From 16f9057e1cd11c4dbb7de78ca2914eaa16c48dc3 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Mon, 1 Dec 2025 19:40:07 +0800 Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90m?= =?UTF-8?q?all=E3=80=91diy=20=E5=BA=97=E9=93=BA=E8=A3=85=E4=BF=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../promotion/diy/template/decorate/index.vue | 35 ++++++++----------- .../views/mp/components/wx-reply/tab-news.vue | 2 +- .../promotion/diy/template/decorate/index.vue | 16 +++++---- 3 files changed, 24 insertions(+), 29 deletions(-) diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue index ba944e495..fc188072a 100644 --- a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue +++ b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue @@ -27,34 +27,28 @@ const route = useRoute(); const { refreshTab } = useTabs(); const domain = import.meta.env.VITE_MALL_H5_DOMAIN; -// 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复 -const DIY_PAGE_INDEX_KEY = 'diy_page_index'; +const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复 const selectedTemplateItem = ref(0); -// 左上角工具栏操作按钮 const templateItems = ref([ { key: 0, name: '基础设置', icon: 'lucide:settings' }, { key: 1, name: '首页', icon: 'lucide:home' }, { key: 2, name: '我的', icon: 'lucide:user' }, -]); +]); // 左上角工具栏操作按钮 const formData = ref(); -// 当前编辑的属性 const currentFormData = ref< MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty >({ property: '', -} as MallDiyPageApi.DiyPage); -// templateItem 对应的缓存 +} as MallDiyPageApi.DiyPage); // 当前编辑的属性 const currentFormDataMap = ref< Map ->(new Map()); -// 商城 H5 预览地址 -const previewUrl = ref(''); -// 模板组件库 -const templateLibs = [] as DiyComponentLibrary[]; -// 当前组件库 -const libs = ref(templateLibs); +>(new Map()); // templateItem 对应的缓存 + +const previewUrl = ref(''); // 商城 H5 预览地址 +const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库 +const libs = ref(templateLibs); // 当前组件库 /** 获取详情 */ async function getPageDetail(id: any) { @@ -73,9 +67,8 @@ async function getPageDetail(id: any) { } /** 模板选项切换 */ -/** 模板选项切换 */ -function handleTemplateItemChange(val: any) { - const valIndex = val.target.value; +function handleTemplateItemChange(valObj: any) { + const val = valObj.target.value; // 缓存模版编辑数据 currentFormDataMap.value.set( templateItems.value[selectedTemplateItem.value]?.name || '', @@ -83,14 +76,14 @@ function handleTemplateItemChange(val: any) { ); // 读取模版缓存 const data = currentFormDataMap.value.get( - templateItems.value[valIndex]?.name || '', + templateItems.value[val]?.name || '', ); // 切换模版 - selectedTemplateItem.value = valIndex; + selectedTemplateItem.value = val; // 情况一：编辑模板 - if (valIndex === 0) { + if (val === 0) { libs.value = templateLibs; currentFormData.value = (isEmpty(data) ? formData.value : data) as | MallDiyPageApi.DiyPage @@ -104,7 +97,7 @@ function handleTemplateItemChange(val: any) { isEmpty(data) ? formData.value!.pages.find( (page: MallDiyPageApi.DiyPage) => - page.name === templateItems.value[valIndex]?.name, + page.name === templateItems.value[val]?.name, ) : data ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty; diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue index 6f3d91e64..cd4bd6cfa 100644 --- a/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue +++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue @@ -14,7 +14,7 @@ defineOptions({ name: 'TabNews' }); const props = defineProps<{ modelValue: Reply; - newsType: NewsType; + newsType?: NewsType; }>(); const emit = defineEmits<{ diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue index 3f655becf..b2fd164c9 100644 --- a/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue +++ b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue @@ -3,7 +3,7 @@ import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page'; import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template'; import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下 -import { onMounted, reactive, ref } from 'vue'; +import { onMounted, ref } from 'vue'; import { useRoute } from 'vue-router'; import { useTabs } from '@vben/hooks'; @@ -35,7 +35,7 @@ const { refreshTab } = useTabs(); const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复 const selectedTemplateItem = ref(0); -const templateItems = reactive([ +const templateItems = ref([ { name: '基础设置', icon: 'ep:iphone' }, { name: '首页', icon: 'ep:home-filled' }, { name: '我的', icon: 'ep:user-filled' }, @@ -77,11 +77,13 @@ async function getPageDetail(id: any) { function handleTemplateItemChange(val: any) { // 缓存模版编辑数据 currentFormDataMap.value.set( - templateItems[selectedTemplateItem.value]?.name || '', + templateItems.value[selectedTemplateItem.value]?.name || '', currentFormData.value!, ); // 读取模版缓存 - const data = currentFormDataMap.value.get(templateItems[val]?.name || ''); + const data = currentFormDataMap.value.get( + templateItems.value[val]?.name || '', + ); // 切换模版 selectedTemplateItem.value = val; @@ -101,7 +103,7 @@ function handleTemplateItemChange(val: any) { isEmpty(data) ? formData.value!.pages.find( (page: MallDiyPageApi.DiyPage) => - page.name === templateItems[val]?.name, + page.name === templateItems.value[val]?.name, ) : data ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty; @@ -114,7 +116,7 @@ async function submitForm() { }); try { // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异 - for (const [i, templateItem] of templateItems.entries()) { + for (const [i, templateItem] of templateItems.value.entries()) { const data = currentFormDataMap.value.get(templateItem.name) as any; // 情况一：基础设置 if (i === 0) { @@ -188,7 +190,7 @@ onMounted(async () => { :show-navigation-bar="selectedTemplateItem !== 0" :show-page-config="selectedTemplateItem !== 0" :show-tab-bar="selectedTemplateItem === 0" - :title="templateItems[selectedTemplateItem]?.name || ''" + :title="templateItems[selectedTemplateItem]?.name ?? ''" @reset="handleEditorReset" @save="submitForm" >