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>