diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue index 44cb10a7..1c0119fb 100644 --- a/src/components/DiyEditor/index.vue +++ b/src/components/DiyEditor/index.vue @@ -102,8 +102,8 @@ - - {{ selectedComponent.name }} + + {{ selectedComponent?.name }} @@ -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') } // 预览 diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue index ffdf11f5..44341873 100644 --- a/src/layout/components/AppView.vue +++ b/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 @@ -49,7 +60,7 @@ const tagsView = computed(() => appStore.getTagsView) } ]" > - + diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue index f2ae7bc0..9a071379 100644 --- a/src/views/mall/promotion/diy/template/decorate.vue +++ b/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" > { 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() })