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

fix: todo修复

Browse Source
This commit is contained in:
hw
2025-11-21 18:19:42 +08:00
parent 0251dc2f3b
commit 8d7d3d5fe1
86 changed files with 963 additions and 1195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus';
import type { NewsItem } from './types';
import type { MpDraftApi } from '#/api/mp/draft';
import { computed, inject, reactive, ref } from 'vue';
@@ -13,20 +13,18 @@ import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
const props = defineProps<{
isFirst: boolean;
modelValue: NewsItem;
modelValue: MpDraftApi.NewsItem;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', v: NewsItem): void;
(e: 'update:modelValue', v: MpDraftApi.NewsItem): void;
}>();
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
const newsItem = computed<NewsItem>({
const newsItem = computed<MpDraftApi.NewsItem>({
get() {
return props.modelValue;
},
@@ -36,7 +34,7 @@ const newsItem = computed<NewsItem>({
});
const accountId = inject<number>('accountId');
const showImageDialog = ref(false);
const dialogVisible = ref(false);
const fileList = ref<UploadFiles>([]);
interface UploadData {
@@ -48,15 +46,19 @@ const uploadData: UploadData = reactive({
accountId: accountId!,
});
function handleOpenDialog() {
dialogVisible.value = true;
}
/** 素材选择完成事件*/
function onMaterialSelected(item: any) {
showImageDialog.value = false;
dialogVisible.value = false;
newsItem.value.thumbMediaId = item.mediaId;
newsItem.value.thumbUrl = item.url;
}
const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
useBeforeUpload(UploadType.Image, 2)(rawFile);
const onBeforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) =>
useBeforeUpload(UploadType.Image, 2)(file as any);
function onUploadSuccess(res: any) {
if (res.code !== 0) {
@@ -113,7 +115,7 @@ function onUploadError(err: Error) {
<ElButton
size="small"
type="primary"
@click="showImageDialog = true"
@click="handleOpenDialog"
class="ml-1.5"
>
素材库选择
@@ -127,7 +129,7 @@ function onUploadError(err: Error) {
</div>
<ElDialog
title="选择图片"
v-model="showImageDialog"
v-model="dialogVisible"
width="80%"
append-to-body
destroy-on-close

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

@@ -93,27 +93,29 @@ function plusNews() {
<template>
<ElContainer>
<ElAside width="40%">
<div class="mx-auto mb-2.5 w-3/5 border border-gray-200 p-2.5">
<div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
<div v-for="(news, index) in newsList" :key="index">
<div
class="group mx-auto h-[120px] w-full cursor-pointer bg-white"
class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
v-if="index === 0"
:class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
:class="
activeNewsIndex === index
? 'border-green-500'
: 'border-transparent'
"
@click="activeNewsIndex = index"
>
<div class="relative h-[120px] w-full bg-[#acadae]">
<div class="relative 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"
class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
>
{{ news.title }}
</div>
</div>
<div
class="relative flex justify-center gap-[10px] py-[5px] text-center"
v-if="newsList.length > 1"
class="relative -bottom-6 hidden text-center group-hover:block"
>
<ElButton
type="info"
@@ -134,25 +136,29 @@ function plusNews() {
</ElButton>
</div>
</div>
<!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
<div
class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
class="group relative mx-auto mb-[10px] cursor-pointer border-[2px] bg-white"
v-if="index > 0"
:class="{
'border-[5px] border-[#2bb673]': activeNewsIndex === index,
}"
:class="
activeNewsIndex === index
? 'border-green-500'
: 'border-transparent'
"
@click="activeNewsIndex = index"
>
<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 class="relative">
<div class="bg-[#acadae]">
<img class="block h-full w-full" :src="news.thumbUrl" />
<div
class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
>
{{ news.title }}
</div>
</div>
</div>
<!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
<!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
<div
class="relative -bottom-6 hidden text-center group-hover:block"
class="relative flex justify-center gap-[10px] py-[5px] text-center"
>
<ElButton
v-if="newsList.length > index + 1"