From e73f7512df473d6f88111c453cefb698d714b8be Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 12 Sep 2024 19:46:18 -0700
Subject: [PATCH 1/5] =?UTF-8?q?feat(page):=20=E6=96=B0=E5=A2=9E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=AE=A1=E7=90=86=E5=AF=BC=E5=87=BAcomponents,?=
 =?UTF-8?q?=E6=89=A9=E5=B1=95AstroPro=E9=A1=B5=E9=9D=A2=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-core/index.js                 |   2 +-
 packages/plugins/page/index.js                |   6 +
 packages/plugins/page/src/Main.vue            | 152 +----------------
 .../plugins/page/src/PageFolderSetting.vue    |  12 +-
 packages/plugins/page/src/PageMain.vue        | 157 ++++++++++++++++++
 packages/plugins/page/src/PageSetting.vue     |  18 +-
 6 files changed, 193 insertions(+), 154 deletions(-)
 create mode 100644 packages/plugins/page/src/PageMain.vue

diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 5acb5ee872..07b6e1b062 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -33,7 +33,7 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
-export { GenerateCodeService, PluginPanel } from '@opentiny/tiny-engine-common'
+export { GenerateCodeService, PluginPanel, PluginSetting } from '@opentiny/tiny-engine-common'
 
 export { default as defaultRegistry } from './registry'
 
diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index c925acfac3..181ef99b8a 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -13,11 +13,17 @@
 import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
 import { PageService } from './src/composable'
+import PageGeneral from './src/PageGeneral.vue'
+import PageMain from './src/PageMain.vue'
 
 export default {
   ...metaData,
   apis: api,
   entry,
+  components: {
+    PageMain,
+    PageGeneral
+  },
   metas: [PageService]
 }
 
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index 9c29df0384..3f3c3f4101 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -1,47 +1,12 @@
 <template>
-  <plugin-panel :title="title" @close="pluginPanelClosed">
-    <template #header>
-      <link-button :href="docsUrl"></link-button>
-      <svg-button
-        class="add-folder-icon"
-        name="add-folder"
-        placement="bottom"
-        tips="新建文件夹"
-        @click="createNewFolder"
-      ></svg-button>
-      <svg-button
-        class="new-page-icon"
-        name="new-page"
-        placement="bottom"
-        tips="新建页面"
-        @click="createNewPage('staticPages')"
-      ></svg-button>
-    </template>
-
-    <template #content>
-      <page-tree
-        ref="pageTreeRef"
-        :isFolder="state.isFolder"
-        @add="createNewPage('publicPages')"
-        @openSettingPanel="openSettingPanel"
-      ></page-tree>
-    </template>
-  </plugin-panel>
-
-  <page-setting :isFolder="state.isFolder" @openNewPage="openNewPage"></page-setting>
-
-  <page-folder-setting :isFolder="state.isFolder"></page-folder-setting>
+  <component :is="pageMain"></component>
 </template>
 
-<script lang="jsx">
-import { reactive, ref, watchEffect, provide } from 'vue'
-import { useCanvas, useApp, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
-import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
-import { extend } from '@opentiny/vue-renderless/common/object'
-import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
-import PageFolderSetting, { openFolderSettingPanel, closeFolderSettingPanel } from './PageFolderSetting.vue'
-import PageTree from './PageTree.vue'
+<script>
+import { getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
+import { openPageSettingPanel } from './PageSetting.vue'
 import { fetchPageDetail } from './http'
+import meta from '../meta'
 
 export const api = {
   getPageById: async (id) => {
@@ -53,115 +18,14 @@ export const api = {
   },
   openPageSettingPanel
 }
-
 export default {
-  components: {
-    PageSetting,
-    PluginPanel,
-    SvgButton,
-    PageFolderSetting,
-    PageTree,
-    LinkButton
-  },
-  props: {
-    title: {
-      type: String,
-      default: '页面管理'
-    }
-  },
   setup() {
-    const { appInfoState } = useApp()
-    const { pageState } = useCanvas()
-    const { pageSettingState, DEFAULT_PAGE, isTemporaryPage, initCurrentPageData } = usePage()
-    const pageTreeRef = ref(null)
-    const ROOT_ID = pageSettingState.ROOT_ID
-    const docsUrl = useHelp().getDocsUrl('page')
-
-    const state = reactive({
-      isFolder: false
-    })
-
-    const createNewPage = (group) => {
-      closeFolderSettingPanel()
-      pageSettingState.isNew = true
-      pageSettingState.currentPageData = {
-        ...DEFAULT_PAGE,
-        parentId: ROOT_ID,
-        route: '',
-        name: 'Untitled',
-        page_content: {
-          lifeCycles: {}
-        },
-        group
-      }
-      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
-      state.isFolder = false
-      openPageSettingPanel()
-    }
-
-    const createNewFolder = () => {
-      closePageSettingPanel()
-      pageSettingState.isNew = true
-      pageSettingState.currentPageData = { parentId: ROOT_ID, route: '', name: 'untitled' }
-      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
-      state.isFolder = true
-      openFolderSettingPanel()
-    }
-
-    watchEffect(() => {
-      if (isTemporaryPage.saved) {
-        openPageSettingPanel()
-      }
-    })
-
-    const openSettingPanel = async (node) => {
-      state.isFolder = !node.data.isPage
-      pageSettingState.isNew = false
-
-      const isPageChange = node.data.id !== pageSettingState.currentPageData.id
-
-      if (state.isFolder) {
-        isPageChange && closePageSettingPanel()
-        openFolderSettingPanel()
-      } else {
-        isPageChange && closeFolderSettingPanel()
-        openPageSettingPanel()
-      }
-      const pageDetail = await fetchPageDetail(node.data?.id)
-      initCurrentPageData(pageDetail)
-    }
-
-    provide('openSettingPanel', openSettingPanel)
-
-    const pluginPanelClosed = () => {
-      closePageSettingPanel()
-      closeFolderSettingPanel()
-    }
-
-    const openNewPage = (data) => {
-      pageTreeRef.value.switchPage(data)
-    }
+    const registry = getMergeRegistry(meta.type, meta.id)
+    const pageMain = registry.components.PageMain
 
     return {
-      state,
-      appInfoState,
-      pageState,
-      openNewPage,
-      pageTreeRef,
-      pluginPanelClosed,
-      openSettingPanel,
-      createNewFolder,
-      createNewPage,
-      docsUrl
+      pageMain
     }
   }
 }
 </script>
-
-<style lang="less" scoped>
-:deep(.help-box) {
-  position: absolute;
-  left: 72px;
-  top: 3px;
-}
-</style>
diff --git a/packages/plugins/page/src/PageFolderSetting.vue b/packages/plugins/page/src/PageFolderSetting.vue
index 1f1157bf18..3c509875af 100644
--- a/packages/plugins/page/src/PageFolderSetting.vue
+++ b/packages/plugins/page/src/PageFolderSetting.vue
@@ -18,7 +18,7 @@
       <div class="page-setting-content">
         <tiny-collapse v-model="state.activeName">
           <tiny-collapse-item title="基本设置" name="folderGeneralRef">
-            <page-general ref="folderGeneralRef" :isFolder="isFolder"></page-general>
+            <component :is="pageGeneral" ref="folderGeneralRef" :isFolder="isFolder"></component>
           </tiny-collapse-item>
         </tiny-collapse>
       </div>
@@ -30,10 +30,10 @@
 import { reactive, ref } from 'vue'
 import { Button, Collapse, CollapseItem } from '@opentiny/vue'
 import { PluginSetting, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
-import { usePage, useModal, useApp, useNotify } from '@opentiny/tiny-engine-meta-register'
+import { usePage, useModal, useApp, useNotify, getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
 import { isEqual } from '@opentiny/vue-renderless/common/object'
 import throttle from '@opentiny/vue-renderless/common/deps/throttle'
-import PageGeneral from './PageGeneral.vue'
+import meta from '../meta'
 import http from './http.js'
 
 let isShow = ref(false)
@@ -55,7 +55,6 @@ export default {
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem,
     PluginSetting,
-    PageGeneral,
     SvgButton,
     ButtonGroup
   },
@@ -70,11 +69,13 @@ export default {
       activeName: ['folderGeneralRef'],
       title: '文件夹设置'
     })
-    const folderGeneralRef = ref(null)
     const { requestCreatePage, requestUpdatePage, requestDeletePage } = http
     const { appInfoState } = useApp()
     const { pageSettingState, changeTreeData } = usePage()
     const { confirm } = useModal()
+    const registry = getMergeRegistry(meta.type, meta.id)
+    const pageGeneral = registry.components.PageGeneral
+    const folderGeneralRef = ref(null)
 
     const closeFolderSetting = () => {
       if (isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)) {
@@ -192,6 +193,7 @@ export default {
     return {
       saveFolderSetting,
       deleteFolder: throttle(5000, true, deleteFolder),
+      pageGeneral,
       folderGeneralRef,
       closeFolderSettingPanel,
       isShow,
diff --git a/packages/plugins/page/src/PageMain.vue b/packages/plugins/page/src/PageMain.vue
new file mode 100644
index 0000000000..4de60f265e
--- /dev/null
+++ b/packages/plugins/page/src/PageMain.vue
@@ -0,0 +1,157 @@
+<template>
+  <plugin-panel :title="title" @close="pluginPanelClosed">
+    <template #header>
+      <link-button :href="docsUrl"></link-button>
+      <svg-button
+        class="add-folder-icon"
+        name="add-folder"
+        placement="bottom"
+        tips="新建文件夹"
+        @click="createNewFolder"
+      ></svg-button>
+      <svg-button
+        class="new-page-icon"
+        name="new-page"
+        placement="bottom"
+        tips="新建页面"
+        @click="createNewPage('staticPages')"
+      ></svg-button>
+    </template>
+
+    <template #content>
+      <page-tree
+        ref="pageTreeRef"
+        :isFolder="state.isFolder"
+        @add="createNewPage('publicPages')"
+        @openSettingPanel="openSettingPanel"
+      ></page-tree>
+    </template>
+  </plugin-panel>
+
+  <page-setting :isFolder="state.isFolder" @openNewPage="openNewPage"></page-setting>
+
+  <page-folder-setting :isFolder="state.isFolder"></page-folder-setting>
+</template>
+
+<script lang="jsx">
+import { reactive, ref, watchEffect, provide } from 'vue'
+import { useCanvas, useApp, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
+import { extend } from '@opentiny/vue-renderless/common/object'
+import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
+import PageFolderSetting, { openFolderSettingPanel, closeFolderSettingPanel } from './PageFolderSetting.vue'
+import PageTree from './PageTree.vue'
+import { fetchPageDetail } from './http'
+
+export default {
+  components: {
+    PageSetting,
+    PluginPanel,
+    SvgButton,
+    PageFolderSetting,
+    PageTree,
+    LinkButton
+  },
+  props: {
+    title: {
+      type: String,
+      default: '页面管理'
+    }
+  },
+  setup() {
+    const { appInfoState } = useApp()
+    const { pageState } = useCanvas()
+    const { pageSettingState, DEFAULT_PAGE, isTemporaryPage, initCurrentPageData } = usePage()
+
+    const pageTreeRef = ref(null)
+    const ROOT_ID = pageSettingState.ROOT_ID
+    const docsUrl = useHelp().getDocsUrl('page')
+
+    const state = reactive({
+      isFolder: false
+    })
+
+    const createNewPage = (group) => {
+      closeFolderSettingPanel()
+      pageSettingState.isNew = true
+      pageSettingState.currentPageData = {
+        ...DEFAULT_PAGE,
+        parentId: ROOT_ID,
+        route: '',
+        name: 'Untitled',
+        page_content: {
+          lifeCycles: {}
+        },
+        group
+      }
+      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
+      state.isFolder = false
+      openPageSettingPanel()
+    }
+
+    const createNewFolder = () => {
+      closePageSettingPanel()
+      pageSettingState.isNew = true
+      pageSettingState.currentPageData = { parentId: ROOT_ID, route: '', name: 'untitled' }
+      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
+      state.isFolder = true
+      openFolderSettingPanel()
+    }
+
+    watchEffect(() => {
+      if (isTemporaryPage.saved) {
+        openPageSettingPanel()
+      }
+    })
+
+    const openSettingPanel = async (node) => {
+      state.isFolder = !node.data.isPage
+      pageSettingState.isNew = false
+
+      const isPageChange = node.data.id !== pageSettingState.currentPageData.id
+
+      if (state.isFolder) {
+        isPageChange && closePageSettingPanel()
+        openFolderSettingPanel()
+      } else {
+        isPageChange && closeFolderSettingPanel()
+        openPageSettingPanel()
+      }
+      const pageDetail = await fetchPageDetail(node.data?.id)
+      initCurrentPageData(pageDetail)
+    }
+
+    provide('openSettingPanel', openSettingPanel)
+
+    const pluginPanelClosed = () => {
+      closePageSettingPanel()
+      closeFolderSettingPanel()
+    }
+
+    const openNewPage = (data) => {
+      pageTreeRef.value.switchPage(data)
+    }
+
+    return {
+      state,
+      appInfoState,
+      pageState,
+      openNewPage,
+      pageTreeRef,
+      pluginPanelClosed,
+      openSettingPanel,
+      createNewFolder,
+      createNewPage,
+      docsUrl
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+:deep(.help-box) {
+  position: absolute;
+  left: 72px;
+  top: 3px;
+}
+</style>
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index b75caa0aa7..8ea616fdd2 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -19,7 +19,7 @@
       <div class="page-setting-content">
         <tiny-collapse v-model="state.activeName" class="page-setting-collapse">
           <tiny-collapse-item title="基本设置" :name="PAGE_SETTING_SESSION.general">
-            <page-general ref="pageGeneralRef" :isFolder="isFolder"></page-general>
+            <component :is="pageGeneral" ref="pageGeneralRef" :isFolder="isFolder"></component>
           </tiny-collapse-item>
 
           <tiny-collapse-item
@@ -55,15 +55,23 @@
 import { reactive, ref } from 'vue'
 import { Button, Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { PluginSetting, ButtonGroup, SvgButton, LifeCycles } from '@opentiny/tiny-engine-common'
-import { useLayout, usePage, useCanvas, useModal, useApp, useNotify } from '@opentiny/tiny-engine-meta-register'
+import {
+  useLayout,
+  usePage,
+  useCanvas,
+  useModal,
+  useApp,
+  useNotify,
+  getMergeRegistry
+} from '@opentiny/tiny-engine-meta-register'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
 import { generatePage } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
-import PageGeneral from './PageGeneral.vue'
 import PageHistory from './PageHistory.vue'
 import PageInputOutput from './PageInputOutput.vue'
+import meta from '../meta'
 import http from './http.js'
 
 const { COMPONENT_NAME } = constants
@@ -95,7 +103,6 @@ export default {
     TinyCollapseItem: CollapseItem,
     PageInputOutput,
     LifeCycles,
-    PageGeneral,
     PageHistory,
     PluginSetting,
     SvgButton,
@@ -122,6 +129,8 @@ export default {
     } = usePage()
     const { pageState, initData } = useCanvas()
     const { confirm } = useModal()
+    const registry = getMergeRegistry(meta.type, meta.id)
+    const pageGeneral = registry.components.PageGeneral
     const pageGeneralRef = ref(null)
 
     const state = reactive({
@@ -363,6 +372,7 @@ export default {
       savePageSetting,
       copyPage,
       pageSettingState,
+      pageGeneral,
       pageGeneralRef,
       deletePage,
       cancelPageSetting,

From fa7ad25523973ce6be0f0e3d238de870b96d648f Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 12 Sep 2024 23:00:24 -0700
Subject: [PATCH 2/5] =?UTF-8?q?Feat(page):=20=E5=88=A0=E9=99=A4pageMain.vu?=
 =?UTF-8?q?e=EF=BC=8C=E5=A6=82=E9=9C=80=E6=89=A9=E5=B1=95=E7=9B=B4?=
 =?UTF-8?q?=E6=8E=A5=E4=BD=BF=E7=94=A8entry?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/page/index.js         |   2 -
 packages/plugins/page/src/Main.vue     | 153 ++++++++++++++++++++++--
 packages/plugins/page/src/PageMain.vue | 157 -------------------------
 3 files changed, 145 insertions(+), 167 deletions(-)
 delete mode 100644 packages/plugins/page/src/PageMain.vue

diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index 181ef99b8a..b9b07781be 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -14,14 +14,12 @@ import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
 import { PageService } from './src/composable'
 import PageGeneral from './src/PageGeneral.vue'
-import PageMain from './src/PageMain.vue'
 
 export default {
   ...metaData,
   apis: api,
   entry,
   components: {
-    PageMain,
     PageGeneral
   },
   metas: [PageService]
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index 3f3c3f4101..4bfefba799 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -1,12 +1,47 @@
 <template>
-  <component :is="pageMain"></component>
+  <plugin-panel :title="title" @close="pluginPanelClosed">
+    <template #header>
+      <link-button :href="docsUrl"></link-button>
+      <svg-button
+        class="add-folder-icon"
+        name="add-folder"
+        placement="bottom"
+        tips="新建文件夹"
+        @click="createNewFolder"
+      ></svg-button>
+      <svg-button
+        class="new-page-icon"
+        name="new-page"
+        placement="bottom"
+        tips="新建页面"
+        @click="createNewPage('staticPages')"
+      ></svg-button>
+    </template>
+
+    <template #content>
+      <page-tree
+        ref="pageTreeRef"
+        :isFolder="state.isFolder"
+        @add="createNewPage('publicPages')"
+        @openSettingPanel="openSettingPanel"
+      ></page-tree>
+    </template>
+  </plugin-panel>
+
+  <page-setting :isFolder="state.isFolder" @openNewPage="openNewPage"></page-setting>
+
+  <page-folder-setting :isFolder="state.isFolder"></page-folder-setting>
 </template>
 
-<script>
-import { getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
-import { openPageSettingPanel } from './PageSetting.vue'
+<script lang="jsx">
+import { reactive, ref, watchEffect, provide } from 'vue'
+import { useCanvas, useApp, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
+import { extend } from '@opentiny/vue-renderless/common/object'
+import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
+import PageFolderSetting, { openFolderSettingPanel, closeFolderSettingPanel } from './PageFolderSetting.vue'
+import PageTree from './PageTree.vue'
 import { fetchPageDetail } from './http'
-import meta from '../meta'
 
 export const api = {
   getPageById: async (id) => {
@@ -18,14 +53,116 @@ export const api = {
   },
   openPageSettingPanel
 }
+
 export default {
+  components: {
+    PageSetting,
+    PluginPanel,
+    SvgButton,
+    PageFolderSetting,
+    PageTree,
+    LinkButton
+  },
+  props: {
+    title: {
+      type: String,
+      default: '页面管理'
+    }
+  },
   setup() {
-    const registry = getMergeRegistry(meta.type, meta.id)
-    const pageMain = registry.components.PageMain
+    const { appInfoState } = useApp()
+    const { pageState } = useCanvas()
+    const { pageSettingState, DEFAULT_PAGE, isTemporaryPage, initCurrentPageData } = usePage()
+
+    const pageTreeRef = ref(null)
+    const ROOT_ID = pageSettingState.ROOT_ID
+    const docsUrl = useHelp().getDocsUrl('page')
+
+    const state = reactive({
+      isFolder: false
+    })
+
+    const createNewPage = (group) => {
+      closeFolderSettingPanel()
+      pageSettingState.isNew = true
+      pageSettingState.currentPageData = {
+        ...DEFAULT_PAGE,
+        parentId: ROOT_ID,
+        route: '',
+        name: 'Untitled',
+        page_content: {
+          lifeCycles: {}
+        },
+        group
+      }
+      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
+      state.isFolder = false
+      openPageSettingPanel()
+    }
+
+    const createNewFolder = () => {
+      closePageSettingPanel()
+      pageSettingState.isNew = true
+      pageSettingState.currentPageData = { parentId: ROOT_ID, route: '', name: 'untitled' }
+      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
+      state.isFolder = true
+      openFolderSettingPanel()
+    }
+
+    watchEffect(() => {
+      if (isTemporaryPage.saved) {
+        openPageSettingPanel()
+      }
+    })
+
+    const openSettingPanel = async (node) => {
+      state.isFolder = !node.data.isPage
+      pageSettingState.isNew = false
+
+      const isPageChange = node.data.id !== pageSettingState.currentPageData.id
+
+      if (state.isFolder) {
+        isPageChange && closePageSettingPanel()
+        openFolderSettingPanel()
+      } else {
+        isPageChange && closeFolderSettingPanel()
+        openPageSettingPanel()
+      }
+      const pageDetail = await fetchPageDetail(node.data?.id)
+      initCurrentPageData(pageDetail)
+    }
+
+    provide('openSettingPanel', openSettingPanel)
+
+    const pluginPanelClosed = () => {
+      closePageSettingPanel()
+      closeFolderSettingPanel()
+    }
+
+    const openNewPage = (data) => {
+      pageTreeRef.value.switchPage(data)
+    }
 
     return {
-      pageMain
+      state,
+      appInfoState,
+      pageState,
+      openNewPage,
+      pageTreeRef,
+      pluginPanelClosed,
+      openSettingPanel,
+      createNewFolder,
+      createNewPage,
+      docsUrl
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+:deep(.help-box) {
+  position: absolute;
+  left: 72px;
+  top: 3px;
+}
+</style>
diff --git a/packages/plugins/page/src/PageMain.vue b/packages/plugins/page/src/PageMain.vue
deleted file mode 100644
index 4de60f265e..0000000000
--- a/packages/plugins/page/src/PageMain.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <plugin-panel :title="title" @close="pluginPanelClosed">
-    <template #header>
-      <link-button :href="docsUrl"></link-button>
-      <svg-button
-        class="add-folder-icon"
-        name="add-folder"
-        placement="bottom"
-        tips="新建文件夹"
-        @click="createNewFolder"
-      ></svg-button>
-      <svg-button
-        class="new-page-icon"
-        name="new-page"
-        placement="bottom"
-        tips="新建页面"
-        @click="createNewPage('staticPages')"
-      ></svg-button>
-    </template>
-
-    <template #content>
-      <page-tree
-        ref="pageTreeRef"
-        :isFolder="state.isFolder"
-        @add="createNewPage('publicPages')"
-        @openSettingPanel="openSettingPanel"
-      ></page-tree>
-    </template>
-  </plugin-panel>
-
-  <page-setting :isFolder="state.isFolder" @openNewPage="openNewPage"></page-setting>
-
-  <page-folder-setting :isFolder="state.isFolder"></page-folder-setting>
-</template>
-
-<script lang="jsx">
-import { reactive, ref, watchEffect, provide } from 'vue'
-import { useCanvas, useApp, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
-import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
-import { extend } from '@opentiny/vue-renderless/common/object'
-import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
-import PageFolderSetting, { openFolderSettingPanel, closeFolderSettingPanel } from './PageFolderSetting.vue'
-import PageTree from './PageTree.vue'
-import { fetchPageDetail } from './http'
-
-export default {
-  components: {
-    PageSetting,
-    PluginPanel,
-    SvgButton,
-    PageFolderSetting,
-    PageTree,
-    LinkButton
-  },
-  props: {
-    title: {
-      type: String,
-      default: '页面管理'
-    }
-  },
-  setup() {
-    const { appInfoState } = useApp()
-    const { pageState } = useCanvas()
-    const { pageSettingState, DEFAULT_PAGE, isTemporaryPage, initCurrentPageData } = usePage()
-
-    const pageTreeRef = ref(null)
-    const ROOT_ID = pageSettingState.ROOT_ID
-    const docsUrl = useHelp().getDocsUrl('page')
-
-    const state = reactive({
-      isFolder: false
-    })
-
-    const createNewPage = (group) => {
-      closeFolderSettingPanel()
-      pageSettingState.isNew = true
-      pageSettingState.currentPageData = {
-        ...DEFAULT_PAGE,
-        parentId: ROOT_ID,
-        route: '',
-        name: 'Untitled',
-        page_content: {
-          lifeCycles: {}
-        },
-        group
-      }
-      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
-      state.isFolder = false
-      openPageSettingPanel()
-    }
-
-    const createNewFolder = () => {
-      closePageSettingPanel()
-      pageSettingState.isNew = true
-      pageSettingState.currentPageData = { parentId: ROOT_ID, route: '', name: 'untitled' }
-      pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
-      state.isFolder = true
-      openFolderSettingPanel()
-    }
-
-    watchEffect(() => {
-      if (isTemporaryPage.saved) {
-        openPageSettingPanel()
-      }
-    })
-
-    const openSettingPanel = async (node) => {
-      state.isFolder = !node.data.isPage
-      pageSettingState.isNew = false
-
-      const isPageChange = node.data.id !== pageSettingState.currentPageData.id
-
-      if (state.isFolder) {
-        isPageChange && closePageSettingPanel()
-        openFolderSettingPanel()
-      } else {
-        isPageChange && closeFolderSettingPanel()
-        openPageSettingPanel()
-      }
-      const pageDetail = await fetchPageDetail(node.data?.id)
-      initCurrentPageData(pageDetail)
-    }
-
-    provide('openSettingPanel', openSettingPanel)
-
-    const pluginPanelClosed = () => {
-      closePageSettingPanel()
-      closeFolderSettingPanel()
-    }
-
-    const openNewPage = (data) => {
-      pageTreeRef.value.switchPage(data)
-    }
-
-    return {
-      state,
-      appInfoState,
-      pageState,
-      openNewPage,
-      pageTreeRef,
-      pluginPanelClosed,
-      openSettingPanel,
-      createNewFolder,
-      createNewPage,
-      docsUrl
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-:deep(.help-box) {
-  position: absolute;
-  left: 72px;
-  top: 3px;
-}
-</style>

From 790fb364aee0b0d52089b642450e71dacefdf990 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Mon, 21 Oct 2024 00:52:01 -0700
Subject: [PATCH 3/5] =?UTF-8?q?feat(plugin-page):=20pageSetting=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E4=BF=AE=E6=94=B9=E4=BB=A5=E9=80=82=E9=85=8D=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/page/index.js                  | 3 ++-
 packages/plugins/page/src/PageSetting.vue       | 7 ++++++-
 packages/plugins/page/src/composable/usePage.js | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index b9b07781be..61a6a557d4 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -14,10 +14,11 @@ import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
 import { PageService } from './src/composable'
 import PageGeneral from './src/PageGeneral.vue'
+import { api as pageSettingApi } from './src/PageSetting.vue'
 
 export default {
   ...metaData,
-  apis: api,
+  apis: [...api, pageSettingApi],
   entry,
   components: {
     PageGeneral
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 22274b778c..b70704e5f1 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -98,6 +98,10 @@ const PAGE_SETTING_SESSION = {
   history: 'history'
 }
 
+export const api = {
+  beforeCreatePage: async () => {}
+}
+
 export default {
   components: {
     TinyButton: Button,
@@ -159,7 +163,7 @@ export default {
       }
     }
 
-    const createPage = () => {
+    const createPage = async () => {
       const { page_content, ...other } = DEFAULT_PAGE
       const { page_content: page_content_state, ...pageSettingStateOther } = pageSettingState.currentPageData
       const createParams = {
@@ -178,6 +182,7 @@ export default {
         delete createParams.id
         delete createParams._id
       }
+      await api.beforeCreatePage(createParams)
 
       requestCreatePage(createParams)
         .then((data) => {
diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js
index 8af5fc0e40..c99072cc4c 100644
--- a/packages/plugins/page/src/composable/usePage.js
+++ b/packages/plugins/page/src/composable/usePage.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
 
 const DEFAULT_PAGE = {
@@ -39,6 +39,8 @@ const DEFAULT_PAGE = {
   group: 'staticPages'
 }
 
+const selectedTemplateCard = ref(null)
+
 const pageSettingState = reactive({
   currentPageDataCopy: {}, // 记录当前页最开始的状态，当用户点击取消按钮的时候恢复到初始状态
   currentPageData: {}, // 当前配置页面的数据
@@ -133,6 +135,7 @@ const COMMON_PAGE_GROUP_ID = 1
 export default () => {
   return {
     DEFAULT_PAGE,
+    selectedTemplateCard,
     pageSettingState,
     isTemporaryPage,
     isCurrentDataSame,

From d8484609760eb2b7e2115ea121d98da711d8b789 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Mon, 21 Oct 2024 01:22:38 -0700
Subject: [PATCH 4/5] =?UTF-8?q?feat(plugin-page):=20pageSetting=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E4=BF=AE=E6=94=B9=E4=BB=A5=E9=80=82=E9=85=8D=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/page/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index 61a6a557d4..3cfcf46ae9 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -18,7 +18,7 @@ import { api as pageSettingApi } from './src/PageSetting.vue'
 
 export default {
   ...metaData,
-  apis: [...api, pageSettingApi],
+  apis: [...api, ...pageSettingApi],
   entry,
   components: {
     PageGeneral

From 31e6ea0a135848a2effb882cfab30c2921959ddf Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Mon, 21 Oct 2024 17:38:30 -0700
Subject: [PATCH 5/5] =?UTF-8?q?feat(plugin-page):=20=E4=BF=AE=E6=94=B9api?=
 =?UTF-8?q?=E6=95=B0=E7=BB=84=E4=B8=BA=E5=AF=B9=E8=B1=A1=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/page/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
index 3cfcf46ae9..0b48197ad5 100644
--- a/packages/plugins/page/index.js
+++ b/packages/plugins/page/index.js
@@ -18,7 +18,7 @@ import { api as pageSettingApi } from './src/PageSetting.vue'
 
 export default {
   ...metaData,
-  apis: [...api, ...pageSettingApi],
+  apis: { ...api, ...pageSettingApi },
   entry,
   components: {
     PageGeneral