营销：完善装修编辑器重置功能

Author: owen118z

src/components/DiyEditor/index.vue

@@ -102,16 +102,16 @@
           <!-- 组件名称 -->
           <template #header>
             <div class="flex items-center gap-8px">
-              <Icon :icon="selectedComponent.icon" color="gray" />
-              <span>{{ selectedComponent.name }}</span>
+              <Icon :icon="selectedComponent?.icon" color="gray" />
+              <span>{{ selectedComponent?.name }}</span>
             </div>
           </template>
           <el-scrollbar
             class="m-[calc(0px-var(--el-card-padding))]"
             view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
           >
             <component
-              :is="selectedComponent.id + 'Property'"
+              :is="selectedComponent?.id + 'Property'"
               v-model="selectedComponent.property"
             />
           </el-scrollbar>
@@ -306,9 +306,12 @@ const handleDeleteComponent = (index: number) => {
 
 // 工具栏操作
 const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
+
+// 注入无感刷新页面函数
+const reload = inject<() => void>('reload')
 // 重置
 const handleReset = () => {
-  message.warning('开发中~')
+  if (reload) reload()
   emits('reset')
 }
 // 预览

src/layout/components/AppView.vue

@@ -20,6 +20,17 @@ const getCaches = computed((): string[] => {
 })
 
 const tagsView = computed(() => appStore.getTagsView)
+
+//region 无感刷新
+const routerAlive = ref(true)
+// 无感刷新，防止出现页面闪烁白屏
+const reload = () => {
+  routerAlive.value = false
+  nextTick(() => (routerAlive.value = true))
+}
+// 为组件后代提供刷新方法
+provide('reload', reload)
+//endregion
 </script>
 
 <template>
@@ -49,7 +60,7 @@ const tagsView = computed(() => appStore.getTagsView)
       }
     ]"
   >
-    <router-view>
+    <router-view v-if="routerAlive">
       <template #default="{ Component, route }">
         <keep-alive :include="getCaches">
           <component :is="Component" :key="route.fullPath" />

src/views/mall/promotion/diy/template/decorate.vue

@@ -8,6 +8,7 @@
     :show-tab-bar="selectedTemplateItem === 0"
     :show-navigation-bar="selectedTemplateItem !== 0"
     @save="submitForm"
+    @reset="handleEditorReset"
   >
     <template #toolBarLeft>
       <el-radio-group
@@ -29,6 +30,7 @@ import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util'
+import { toNumber } from 'lodash-es'
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' })
@@ -115,17 +117,43 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
+// 重置时记录当前编辑的页面
+const handleEditorReset = () => storePageIndex()
+
+//#region 无感刷新
+// 记录标识
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'
+// 1. 记录
+const storePageIndex = () =>
+  sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
+// 2. 恢复
+const recoverPageIndex = () => {
+  // 恢复重置前的页面，默认是第一个页面
+  const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
+  // 移除标记
+  sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
+  // 切换页面
+  if (pageIndex !== selectedTemplateItem.value) {
+    selectedTemplateItem.value = pageIndex
+    handleTemplateItemChange()
+  }
+}
+//#endregion
+
 /** 初始化 **/
 const { currentRoute } = useRouter() // 路由
 const { delView } = useTagsViewStore() // 视图操作
-const route = useRoute()
-onMounted(() => {
+onMounted(async () => {
   resetForm()
-  if (!route.params.id) {
+  if (!currentRoute.value.params.id) {
     message.warning('参数错误，页面编号不能为空！')
     delView(unref(currentRoute))
     return
   }
-  getPageDetail(route.params.id)
+
+  // 查询详情
+  await getPageDetail(currentRoute.value.params.id)
+  // 恢复重置前的页面
+  recoverPageIndex()
 })
 </script>