XW-AIOT/iot-device-management-frontend
4
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: ele改造

Browse Source
This commit is contained in:
hw
2025-11-18 13:44:41 +08:00
parent 3e1dac41b6
commit 9c8316c385
11 changed files with 108 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web-ele/src/views/mp/draft/modules/cover-select.vue
View File

@@ -80,20 +80,22 @@ function onUploadError(err: Error) {
<template>
<div>
<p>封面:</p>
<div class="thumb-div">
<div
class="inline-flex w-full flex-col items-center justify-center text-center"
>
<ElImage
v-if="newsItem.thumbUrl"
style="width: 300px; max-height: 300px"
class="max-h-[300px] w-[300px]"
:src="newsItem.thumbUrl"
fit="contain"
/>
<IconifyIcon
v-else
icon="ep:plus"
class="avatar-uploader-icon"
:class="isFirst ? 'avatar' : 'avatar1'"
class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
:class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
/>
<div class="thumb-but">
<div class="m-1.5">
<ElUpload
:action="UPLOAD_URL"
:headers="HEADERS"
@@ -112,12 +114,12 @@ function onUploadError(err: Error) {
size="small"
type="primary"
@click="showImageDialog = true"
style="margin-left: 5px"
class="ml-1.5"
>
素材库选择
</ElButton>
<template #tip>
<div class="el-upload__tip">
<div class="ml-1.5">
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
</div>
</template>
@@ -139,43 +141,3 @@ function onUploadError(err: Error) {
</div>
</div>
</template>
<style lang="scss" scoped>
.el-upload__tip {
margin-left: 5px;
}
.thumb-div {
display: inline-block;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
.avatar-uploader-icon {
width: 120px;
height: 120px;
font-size: 28px;
line-height: 120px;
color: #8c939d;
text-align: center;
border: 1px solid #d9d9d9;
}
.avatar {
width: 230px;
height: 120px;
}
.avatar1 {
width: 120px;
height: 120px;
}
.thumb-but {
margin: 5px;
}
}
</style>

8
apps/web-ele/src/views/mp/draft/modules/draft-table.vue
View File

@@ -11,15 +11,9 @@ const props = defineProps<{
</script>
<template>
<div class="draft-content">
<div class="p-2.5">
<div v-if="props.row.content && props.row.content.newsItem">
<News :articles="props.row.content.newsItem" />
</div>
</div>
</template>
<style lang="scss" scoped>
.draft-content {
padding: 10px;
}
</style>

7
apps/web-ele/src/views/mp/draft/modules/form.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { NewsItem } from './types';
import { computed, ref } from 'vue';
import { computed, provide, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
@@ -27,6 +27,11 @@ const getTitle = computed(() => {
return formData.value?.isCreating ? '新建图文' : '修改图文';
});
// 提供 accountId 给子组件
provide(
'accountId',
computed(() => formData.value?.accountId),
);
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (!formData.value) {

165
apps/web-ele/src/views/mp/draft/modules/news-form.vue
View File

@@ -98,19 +98,28 @@ function plusNews() {
<template>
<ElContainer>
<ElAside width="40%">
<div class="select-item">
<div class="mx-auto mb-2.5 w-3/5 border border-gray-200 p-2.5">
<div v-for="(news, index) in newsList" :key="index">
<div
class="news-main father"
class="group mx-auto h-[120px] w-full cursor-pointer bg-white"
v-if="index === 0"
:class="{ activeAddNews: activeNewsIndex === index }"
:class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
@click="activeNewsIndex = index"
>
<div class="news-content">
<img class="material-img" :src="news.thumbUrl" />
<div class="news-content-title">{{ news.title }}</div>
<div class="relative h-[120px] w-full bg-[#acadae]">
<img class="h-full w-full" :src="news.thumbUrl" />
<div
class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
>
{{ news.title }}
</div>
</div>
<div class="child" v-if="newsList.length > 1">
<div
v-if="newsList.length > 1"
class="relative -bottom-6 hidden text-center group-hover:block"
>
<ElButton
type="info"
circle
@@ -131,18 +140,22 @@ function plusNews() {
</div>
</div>
<div
class="news-main-item father"
class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
v-if="index > 0"
:class="{ activeAddNews: activeNewsIndex === index }"
:class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
@click="activeNewsIndex = index"
>
<div class="news-content-item">
<div class="news-content-item-title">{{ news.title }}</div>
<div class="news-content-item-img">
<img class="material-img" :src="news.thumbUrl" width="100%" />
<div class="relative -ml-0.5">
<div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
<div class="inline-block w-1/4 bg-[#acadae]">
<img class="h-full w-full" :src="news.thumbUrl" width="100%" />
</div>
</div>
<div class="child">
<div
class="relative -bottom-6 hidden text-center group-hover:block"
>
<ElButton
v-if="newsList.length > index + 1"
circle
@@ -173,7 +186,10 @@ function plusNews() {
</div>
</div>
</div>
<ElRow justify="center" class="ope-row">
<ElRow
justify="center"
class="mt-1.5 border-t border-gray-200 pt-1.5 text-center"
>
<ElButton
type="primary"
circle
@@ -188,7 +204,7 @@ function plusNews() {
<ElMain>
<div v-if="newsList.length > 0 && activeNewsItem">
<!-- 标题、作者、原文地址 -->
<ElRow :gutter="20">
<ElRow :gutter="20" class="mb-5 last:mb-0">
<ElInput
v-model="activeNewsItem.title"
placeholder="请输入标题（必填）"
@@ -196,16 +212,16 @@ function plusNews() {
<ElInput
v-model="activeNewsItem.author"
placeholder="请输入作者"
style="margin-top: 5px"
class="mt-1.5"
/>
<ElInput
v-model="activeNewsItem.contentSourceUrl"
placeholder="请输入原文地址"
style="margin-top: 5px"
class="mt-1.5"
/>
</ElRow>
<!-- 封面和摘要 -->
<ElRow :gutter="20">
<ElRow :gutter="20" class="mb-5 last:mb-0">
<ElCol :span="12">
<CoverSelect
v-model="activeNewsItem"
@@ -219,123 +235,16 @@ function plusNews() {
type="textarea"
v-model="activeNewsItem.digest"
placeholder="请输入摘要"
class="digest"
class="inline-block w-full align-top"
maxlength="120"
/>
</ElCol>
</ElRow>
<!--富文本编辑器组件-->
<ElRow>
<ElRow class="mb-5 last:mb-0">
<RichTextarea v-model="activeNewsItem.content" />
</ElRow>
</div>
</ElMain>
</ElContainer>
</template>
<style lang="scss" scoped>
.ope-row {
padding-top: 5px;
margin-top: 5px;
text-align: center;
border-top: 1px solid #eaeaea;
}
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.digest {
display: inline-block;
width: 100%;
vertical-align: top;
}
/* 新增图文 */
.news-main {
width: 100%;
height: 120px;
margin: auto;
background-color: #fff;
}
.news-content {
position: relative;
width: 100%;
height: 120px;
background-color: #acadae;
}
.news-content-title {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 98%;
height: 25px;
padding: 1%;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
color: #fff;
white-space: nowrap;
background-color: black;
opacity: 0.65;
}
.news-main-item {
width: 100%;
padding: 5px 0;
margin: auto;
background-color: #fff;
border-top: 1px solid #eaeaea;
}
.news-content-item {
position: relative;
margin-left: -3px;
}
.news-content-item-title {
display: inline-block;
width: 70%;
font-size: 12px;
}
.news-content-item-img {
display: inline-block;
width: 25%;
background-color: #acadae;
}
.select-item {
width: 60%;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.activeAddNews {
border: 5px solid #2bb673;
}
}
.father .child {
position: relative;
bottom: 25px;
display: none;
text-align: center;
}
.father:hover .child {
display: block;
}
.material-img {
width: 100%;
height: 100%;
}
</style>