将装修列表页面去掉直接在菜单栏里面添加按钮跳转到对应的装修页面

yudao-admin-vue3/src/components/DiyEditor/index.vue

@@ -249,6 +249,7 @@ watch(
       const component = componentConfigs[item.id]
       return { ...component, property: item.property }
     })
+	console.log(modelValue,"pageComponents.value")
   },
   {
     immediate: true

yudao-admin-vue3/src/router/modules/remaining.ts

@@ -469,7 +469,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
   },
   {
-    path: '/diy',
+    path: '/diy-template/diy',
     name: 'DiyCenter',
     meta: { hidden: true },
     component: Layout,

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue

@@ -1,18 +1,10 @@
 <template>
-  <DiyEditor
+	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
-    v-if="formData && !formLoading"
+		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
-    v-model="currentFormData!.property"
+		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
-    :title="templateItems[selectedTemplateItem].name"
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
-    :libs="libs"
+		<template #toolBarLeft>
-    :show-page-config="selectedTemplateItem !== 0"
+			<!-- <el-radio-group
-    :show-tab-bar="selectedTemplateItem === 0"
-    :show-navigation-bar="selectedTemplateItem !== 0"
-    :preview-url="previewUrl"
-    @save="submitForm"
-    @reset="handleEditorReset"
-  >
-    <template #toolBarLeft>
-      <el-radio-group
         v-model="selectedTemplateItem"
         class="h-full!"
         @change="handleTemplateItemChange"
@@ -22,146 +14,159 @@
             <Icon :icon="item.icon" :size="24" />
           </el-radio-button>
         </el-tooltip>
-      </el-radio-group>
+      </el-radio-group> -->
-    </template>
+		</template>
-  </DiyEditor>
+	</DiyEditor>
 </template>
 <script setup lang="ts">
-// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+	// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
-import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+	import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
-import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+	import * as DiyPageApi from '@/api/mall/promotion/diy/page'
-import { useTagsViewStore } from '@/store/modules/tagsView'
+	import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
+	import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
-import { toNumber } from 'lodash-es'
+	import { toNumber } from 'lodash-es'
+	// import { watch } from 'vue'; 
 
-/** 装修模板表单 */
+	/** 装修模板表单 */
-defineOptions({ name: 'DiyTemplateDecorate' })
+	defineOptions({ name: 'DiyTemplateDecorate' })
+	/** 初始化 **/
+	const { currentRoute } = useRouter() // 路由
+	const { delView } = useTagsViewStore() // 视图操作
+	const route = useRoute();
+	// 左上角工具栏操作按钮
+	const selectedTemplateItem = ref('0')
+	// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
+	const templateItems = reactive([
+		{ name: '基础设置', icon: 'ep:iphone' },
+		{ name: '首页', icon: 'ep:home-filled' },
+		{ name: '我的', icon: 'ep:user-filled' }
+	])
 
-// 左上角工具栏操作按钮
+	const message = useMessage() // 消息弹窗
-const selectedTemplateItem = ref(0)
-const templateItems = reactive([
-  { name: '基础设置', icon: 'ep:iphone' },
-  { name: '首页', icon: 'ep:home-filled' },
-  { name: '我的', icon: 'ep:user-filled' }
-])
 
-const message = useMessage() // 消息弹窗
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+	const formRef = ref() // 表单 Ref
+	// 当前编辑的属性
+	const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+	// 商城 H5 预览地址
+	const previewUrl = ref('')
 
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	// 获取详情
-const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+	const getPageDetail = async (id : any) => {
-const formRef = ref() // 表单 Ref
+		formLoading.value = true
-// 当前编辑的属性
+		try {
-const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+			formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
-// 商城 H5 预览地址
+			currentFormData.value = formData.value
-const previewUrl = ref('')
+			// 拼接手机预览链接
+			const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+			previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
+		} finally {
+			formLoading.value = false
+		}
+	}
 
-// 获取详情
+	// 模板组件库
-const getPageDetail = async (id: any) => {
+	const templateLibs = [] as DiyComponentLibrary[]
-  formLoading.value = true
+	// 当前组件库
-  try {
+	const libs = ref<DiyComponentLibrary[]>(templateLibs)
-    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+	// 模板选项切换
-    currentFormData.value = formData.value
+	const handleTemplateItemChange = () => {
+		// 编辑模板
+		// if (selectedTemplateItem.value === 0) {
+		//   libs.value = templateLibs
+		//   currentFormData.value = formData.value
+		//   return
+		// }
 
-    // 拼接手机预览链接
+		// 编辑页面
-    const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+		libs.value = PAGE_LIBS
-    previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
+		console.log(formData.value!.pages, 'PAGE_LIBS')
-  } finally {
+		// currentFormData.value = formData.value!.pages.find(
-    formLoading.value = false
+		//   // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
-  }
+		//   (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
-}
+		// )
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
+	}
 
-// 模板组件库
+	// 提交表单
-const templateLibs = [] as DiyComponentLibrary[]
+	const submitForm = async () => {
-// 当前组件库
+		// 校验表单
-const libs = ref<DiyComponentLibrary[]>(templateLibs)
+		if (!formRef) return
-// 模板选项切换
+		// 提交请求
-const handleTemplateItemChange = () => {
+		formLoading.value = true
-  // 编辑模板
+		try {
-  if (selectedTemplateItem.value === 0) {
+			if (selectedTemplateItem.value === '0') {
-    libs.value = templateLibs
+				// 提交模板属性
-    currentFormData.value = formData.value
+				await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
-    return
+			} else {
-  }
+				// 提交页面属性
+				await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+			}
+			message.success('保存成功')
+		} finally {
+			formLoading.value = false
+		}
+	}
 
-  // 编辑页面
+	// 重置表单
-  libs.value = PAGE_LIBS
+	const resetForm = () => {
-  currentFormData.value = formData.value!.pages.find(
+		formData.value = {
-    (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+			id: undefined,
-  )
+			name: '',
-}
+			used: false,
+			usedTime: undefined,
+			remark: '',
+			previewPicUrls: [],
+			property: '',
+			pages: []
+		} as DiyTemplateApi.DiyTemplatePropertyVO
+		formRef.value?.resetFields()
+	}
 
-// 提交表单
+	// 重置时记录当前编辑的页面
-const submitForm = async () => {
+	const handleEditorReset = () => storePageIndex()
-  // 校验表单
-  if (!formRef) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    if (selectedTemplateItem.value === 0) {
-      // 提交模板属性
-      await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
-    } else {
-      // 提交页面属性
-      await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
-    }
-    message.success('保存成功')
-  } finally {
-    formLoading.value = false
-  }
-}
 
-// 重置表单
+	//#region 无感刷新
-const resetForm = () => {
+	// 记录标识
-  formData.value = {
+	const DIY_PAGE_INDEX_KEY = 'diy_page_index'
-    id: undefined,
+	// 1. 记录
-    name: '',
+	const storePageIndex = () =>
-    used: false,
+		sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
-    usedTime: undefined,
+	// 2. 恢复
-    remark: '',
+	const recoverPageIndex = () => {
-    previewPicUrls: [],
+		// 恢复重置前的页面，默认是第一个页面
-    property: '',
+		const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
-    pages: []
+		// 移除标记
-  } as DiyTemplateApi.DiyTemplatePropertyVO
+		sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
-  formRef.value?.resetFields()
+		// 切换页面
-}
+		if (pageIndex !== selectedTemplateItem.value) {
+			selectedTemplateItem.value = pageIndex
+			handleTemplateItemChange()
+		}
+	}
+	//#endregion
 		
-// 重置时记录当前编辑的页面
-const handleEditorReset = () => storePageIndex()
 
-//#region 无感刷新
+	onMounted(async () => {
-// 记录标识
+		resetForm()
-const DIY_PAGE_INDEX_KEY = 'diy_page_index'
+		// if (!currentRoute.value.params.id) {
-// 1. 记录
+		//   message.warning('参数错误，页面编号不能为空！')
-const storePageIndex = () =>
+		//   delView(unref(currentRoute))
-  sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
+		//   return
-// 2. 恢复
+		// }
-const recoverPageIndex = () => {
+		// 查询详情
-  // 恢复重置前的页面，默认是第一个页面
+		// await getPageDetail(currentRoute.value.params.id)
-  const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
+		await getPageDetail(4)
-  // 移除标记
+		// 恢复重置前的页面
-  sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
+		recoverPageIndex()
-  // 切换页面
+		currentFormData.value = formData.value!.pages[0]
-  if (pageIndex !== selectedTemplateItem.value) {
-    selectedTemplateItem.value = pageIndex
-    handleTemplateItemChange()
-  }
-}
-//#endregion
 
-/** 初始化 **/
+	})
-const { currentRoute } = useRouter() // 路由
-const { delView } = useTagsViewStore() // 视图操作
-onMounted(async () => {
-  resetForm()
-  if (!currentRoute.value.params.id) {
-    message.warning('参数错误，页面编号不能为空！')
-    delView(unref(currentRoute))
-    return
-  }
 	
-  // 查询详情
+	// watch(() => route.path, (newPath, oldPath) => {
-  await getPageDetail(currentRoute.value.params.id)
+	// console.log(newPath,'newPathnewPath');
-  // 恢复重置前的页面
+	// // handleTemplateItemChange()
-  recoverPageIndex()
+	// }, { immediate: true });
-})
 </script>

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue

@@ -0,0 +1,175 @@
+<template>
+	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
+		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
+		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+		<template #toolBarLeft>
+			<!-- <el-radio-group
+        v-model="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+          <el-radio-button :label="index">
+            <Icon :icon="item.icon" :size="24" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group> -->
+		</template>
+	</DiyEditor>
+</template>
+<script setup lang="ts">
+	// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+	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' // 商城的 DIY 组件，在 DiyEditor 目录下
+	import { toNumber } from 'lodash-es'
+	// import { watch } from 'vue'; 
+
+	/** 装修模板表单 */
+	defineOptions({ name: 'DiyTemplateDecorate' })
+	/** 初始化 **/
+	const { currentRoute } = useRouter() // 路由
+	const { delView } = useTagsViewStore() // 视图操作
+	const route = useRoute();
+	// 左上角工具栏操作按钮
+	const selectedTemplateItem = ref('1')
+	// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
+	const templateItems = reactive([
+		{ name: '基础设置', icon: 'ep:iphone' },
+		{ name: '首页', icon: 'ep:home-filled' },
+		{ name: '我的', icon: 'ep:user-filled' }
+	])
+
+	const message = useMessage() // 消息弹窗
+
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+	const formRef = ref() // 表单 Ref
+	// 当前编辑的属性
+	const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+	// 商城 H5 预览地址
+	const previewUrl = ref('')
+
+	// 获取详情
+	const getPageDetail = async (id : any) => {
+		formLoading.value = true
+		try {
+			formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+			currentFormData.value = formData.value
+			// 拼接手机预览链接
+			const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+			previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 模板组件库
+	const templateLibs = [] as DiyComponentLibrary[]
+	// 当前组件库
+	const libs = ref<DiyComponentLibrary[]>(templateLibs)
+	// 模板选项切换
+	const handleTemplateItemChange = () => {
+		// 编辑模板
+		// if (selectedTemplateItem.value === 0) {
+		//   libs.value = templateLibs
+		//   currentFormData.value = formData.value
+		//   return
+		// }
+
+		// 编辑页面
+		libs.value = PAGE_LIBS
+		console.log(formData.value!.pages, 'PAGE_LIBS')
+		// currentFormData.value = formData.value!.pages.find(
+		//   // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+		//   (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
+		// )
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
+	}
+
+	// 提交表单
+	const submitForm = async () => {
+		// 校验表单
+		if (!formRef) return
+		// 提交请求
+		formLoading.value = true
+		try {
+			if (selectedTemplateItem.value === '0') {
+				// 提交模板属性
+				await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
+			} else {
+				// 提交页面属性
+				await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+			}
+			message.success('保存成功')
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 重置表单
+	const resetForm = () => {
+		formData.value = {
+			id: undefined,
+			name: '',
+			used: false,
+			usedTime: undefined,
+			remark: '',
+			previewPicUrls: [],
+			property: '',
+			pages: []
+		} as DiyTemplateApi.DiyTemplatePropertyVO
+		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
+		
+
+	onMounted(async () => {
+		resetForm()
+		// if (!currentRoute.value.params.id) {
+		//   message.warning('参数错误，页面编号不能为空！')
+		//   delView(unref(currentRoute))
+		//   return
+		// }
+		// 查询详情
+		// await getPageDetail(currentRoute.value.params.id)
+		await getPageDetail(4)
+		// 恢复重置前的页面
+		recoverPageIndex()
+		selectedTemplateItem.value = 1
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		// handleTemplateItemChange()
+		console.log(currentRoute.value.params.id, "currentRoute.value.params.id");
+
+	})
+	
+	// watch(() => route.path, (newPath, oldPath) => {
+	// console.log(newPath,'newPathnewPath');
+	// // handleTemplateItemChange()
+	// }, { immediate: true });
+</script>

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate3.vue

@@ -0,0 +1,175 @@
+<template>
+	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
+		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
+		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+		<template #toolBarLeft>
+			<!-- <el-radio-group
+        v-model="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+          <el-radio-button :label="index">
+            <Icon :icon="item.icon" :size="24" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group> -->
+		</template>
+	</DiyEditor>
+</template>
+<script setup lang="ts">
+	// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+	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' // 商城的 DIY 组件，在 DiyEditor 目录下
+	import { toNumber } from 'lodash-es'
+	// import { watch } from 'vue'; 
+
+	/** 装修模板表单 */
+	defineOptions({ name: 'DiyTemplateDecorate' })
+	/** 初始化 **/
+	const { currentRoute } = useRouter() // 路由
+	const { delView } = useTagsViewStore() // 视图操作
+	const route = useRoute();
+	// 左上角工具栏操作按钮
+	const selectedTemplateItem = ref('1')
+	// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
+	const templateItems = reactive([
+		{ name: '基础设置', icon: 'ep:iphone' },
+		{ name: '首页', icon: 'ep:home-filled' },
+		{ name: '我的', icon: 'ep:user-filled' }
+	])
+
+	const message = useMessage() // 消息弹窗
+
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+	const formRef = ref() // 表单 Ref
+	// 当前编辑的属性
+	const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+	// 商城 H5 预览地址
+	const previewUrl = ref('')
+
+	// 获取详情
+	const getPageDetail = async (id : any) => {
+		formLoading.value = true
+		try {
+			formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+			currentFormData.value = formData.value
+			// 拼接手机预览链接
+			const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+			previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 模板组件库
+	const templateLibs = [] as DiyComponentLibrary[]
+	// 当前组件库
+	const libs = ref<DiyComponentLibrary[]>(templateLibs)
+	// 模板选项切换
+	const handleTemplateItemChange = () => {
+		// 编辑模板
+		// if (selectedTemplateItem.value === 0) {
+		//   libs.value = templateLibs
+		//   currentFormData.value = formData.value
+		//   return
+		// }
+
+		// 编辑页面
+		libs.value = PAGE_LIBS
+		console.log(formData.value!.pages, 'PAGE_LIBS')
+		// currentFormData.value = formData.value!.pages.find(
+		//   // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+		//   (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
+		// )
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
+	}
+
+	// 提交表单
+	const submitForm = async () => {
+		// 校验表单
+		if (!formRef) return
+		// 提交请求
+		formLoading.value = true
+		try {
+			if (selectedTemplateItem.value === '0') {
+				// 提交模板属性
+				await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
+			} else {
+				// 提交页面属性
+				await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+			}
+			message.success('保存成功')
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 重置表单
+	const resetForm = () => {
+		formData.value = {
+			id: undefined,
+			name: '',
+			used: false,
+			usedTime: undefined,
+			remark: '',
+			previewPicUrls: [],
+			property: '',
+			pages: []
+		} as DiyTemplateApi.DiyTemplatePropertyVO
+		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
+		
+
+	onMounted(async () => {
+		resetForm()
+		// if (!currentRoute.value.params.id) {
+		//   message.warning('参数错误，页面编号不能为空！')
+		//   delView(unref(currentRoute))
+		//   return
+		// }
+		// 查询详情
+		// await getPageDetail(currentRoute.value.params.id)
+		await getPageDetail(4)
+		// 恢复重置前的页面
+		recoverPageIndex()
+		libs.value = templateLibs
+		currentFormData.value = formData.value
+		// handleTemplateItemChange()
+		console.log(currentRoute.value.params.id, "currentRoute.value.params.id");
+
+	})
+	
+	// watch(() => route.path, (newPath, oldPath) => {
+	// console.log(newPath,'newPathnewPath');
+	// // handleTemplateItemChange()
+	// }, { immediate: true });
+</script>