Feat(page): Add exporting components and APIs for page component to support page template extension (alpha version)

packages/common/component/MetaListItem.vue

@@ -18,7 +18,8 @@
                 title=""
                 width="267"
                 trigger="manual"
-                @hide="hide(item)">
+                @hide="hide(item)"
+              >
                 <template v-if="isVisible">
                   <div ref="addOptions" class="add-options" :style="`left:${itemData.left}px;top:${itemData.top}px`">
                     <icon-close class="tiny-svg-size icon-close" @click="closeEditOption"></icon-close>
@@ -28,7 +29,8 @@
                         footerbtnHide="true"
                         @changeItem="change"
                         @cancel="cancel"
-                        @confirm="formConfirm"></meta-form>
+                        @confirm="formConfirm"
+                      ></meta-form>
                     </slot>
                     <slot name="footer"></slot></div
                 ></template>
@@ -46,7 +48,8 @@
                 effect="dark"
                 :content="item.title"
                 placement="top"
-                @click="btnClick($event, item.type)">
+                @click="btnClick($event, item.type)"
+              >
                 <span class="item-icon">
                   <component :is="item.icon"></component>
                 </span>
@@ -64,7 +67,8 @@
     :visible="isShow"
     title="提示"
     width="20%"
-    @update:visible="isShow = $event">
+    @update:visible="isShow = $event"
+  >
     <span class="switch-tip">
       <span>
         <svg-icon name="warning"></svg-icon>

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 { PluginPanel, ToolbarBase } from '@opentiny/tiny-engine-common'
+export { PluginPanel, PluginSetting, ToolbarBase } from '@opentiny/tiny-engine-common'
 
 export { default as defaultRegistry } from './registry'
 

packages/plugins/page/index.js

@@ -13,11 +13,16 @@
 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
+  },
   metas: [PageService]
 }
 

packages/plugins/page/src/Main.vue

@@ -71,6 +71,7 @@ export default {
     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')

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,

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
@@ -57,15 +57,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
@@ -90,14 +98,17 @@ const PAGE_SETTING_SESSION = {
   history: 'history'
 }
 
+export const api = {
+  beforeCreatePage: async () => {}
+}
+
 export default {
   components: {
     TinyButton: Button,
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem,
     PageInputOutput,
     LifeCycles,
-    PageGeneral,
     PageHistory,
     PluginSetting,
     SvgButton,
@@ -124,6 +135,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({
@@ -150,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 = {
@@ -169,6 +182,7 @@ export default {
         delete createParams.id
         delete createParams._id
       }
+      await api.beforeCreatePage(createParams)
 
       requestCreatePage(createParams)
         .then((data) => {
@@ -365,6 +379,7 @@ export default {
       savePageSetting,
       copyPage,
       pageSettingState,
+      pageGeneral,
       pageGeneralRef,
       deletePage,
       cancelPageSetting,

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,