Merge branch 'ospp-2024/005-template' into 005-template/template_docu…

…ment

packages/controller/src/usePage.js

@@ -48,7 +48,9 @@ const pageSettingState = reactive({
   isNew: false,
   ROOT_ID: '0', // 根节点ID
   updateTreeData: null,
-  treeDataMapping: {}
+  treeDataMapping: {},
+  template_content: null,
+  templates: []
 })
 
 const isTemporaryPage = reactive({

packages/controller/src/useTemplate.js

@@ -12,6 +12,7 @@
 
 import { reactive } from 'vue'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
+import { useHttp } from '@opentiny/tiny-engine-http'
 
 const DEFAULT_TEMPLATE = {
   app: '',
@@ -128,6 +129,37 @@ const resetTemplateData = () => {
 const isChangeTemplateData = () =>
   !isEqual(templateSettingState.currentTemplateData, templateSettingState.currentTemplateDataCopy)
 
+const http = useHttp()
+
+const formatTreeData = (data) => {
+  const map = {}
+  const tree = []
+
+  data.forEach((item) => {
+    map[item.id] = { ...item, children: [] }
+  })
+
+  data.forEach((item) => {
+    if (item.parentId) {
+      const parent = map[item.parentId]
+      if (parent) {
+        parent.children.push(map[item.id])
+      }
+    } else {
+      tree.push(map[item.id])
+    }
+  })
+  templateSettingState.treeDataMapping = map
+
+  return tree
+}
+
+const refreshTemplateList = async (appId, data) => {
+  const templateData = data ? data : await http.get(`/app-center/api/templates/list/${appId}`)
+  templateSettingState.templates = formatTreeData(templateData)
+  return templateSettingState.templates
+}
+
 export default () => {
   return {
     DEFAULT_TEMPLATE,
@@ -138,6 +170,7 @@ export default () => {
     getTemplateContent,
     resetTemplateData,
     initCurrentTemplateData,
-    isChangeTemplateData
+    isChangeTemplateData,
+    refreshTemplateList
   }
 }

packages/plugins/page/src/Main.vue

@@ -35,7 +35,7 @@
 
 <script lang="jsx">
 import { reactive, ref, watchEffect, provide } from 'vue'
-import { useCanvas, useApp, useResource, usePage, useHelp } from '@opentiny/tiny-engine-controller'
+import { useCanvas, useApp, useResource, usePage, useHelp, useTemplate } from '@opentiny/tiny-engine-controller'
 import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
@@ -77,12 +77,13 @@ export default {
     const pageTreeRef = ref(null)
     const ROOT_ID = pageSettingState.ROOT_ID
     const docsUrl = useHelp().getDocsUrl('page')
+    const { refreshTemplateList } = useTemplate()
 
     const state = reactive({
       isFolder: false
     })
 
-    const createNewPage = (group) => {
+    const createNewPage = async (group) => {
       closeFolderSettingPanel()
       pageSettingState.isNew = true
       pageSettingState.currentPageData = {
@@ -97,6 +98,8 @@ export default {
       }
       pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
       state.isFolder = false
+      pageSettingState.templates = await refreshTemplateList(appInfoState.selectedId)
+      pageSettingState.template_content = null
       openPageSettingPanel()
     }
 

packages/plugins/page/src/PageGeneral.vue

@@ -56,6 +56,20 @@
           </span>
         </div>
       </tiny-form-item>
+
+      <tiny-form-item v-if="!isFolder && pageSettingState.isNew" label="选择模板" prop="template">
+        <tiny-select
+          v-model="pageSettingState.template_content"
+          filterable
+          :filter-method="filterTemplate"
+          clearable
+          value-field="template_content"
+          text-field="name"
+          render-type="tree"
+          popper-class="parent-fold-select-dropdown"
+          :tree-op="treeTemplateOp"
+        ></tiny-select>
+      </tiny-form-item>
     </tiny-form>
     <page-home
       v-if="!isFolder && !pageSettingState.isNew && pageSettingState.currentPageData.group !== 'public'"
@@ -222,6 +236,31 @@ export default {
       oldParentId.value = value.id
     }
 
+    const treeTemplateOp = computed(() => {
+      const processTemplates = (templates) => {
+        return templates.map((template) => {
+          const processedTemplate = { ...template }
+          if (!template.isTemplate) {
+            processedTemplate.disabled = true
+          }
+          if (template.children && template.children.length > 0) {
+            processedTemplate.children = processTemplates(template.children)
+          }
+          return processedTemplate
+        })
+      }
+
+      return {
+        data: processTemplates(pageSettingState.templates)
+      }
+    })
+
+    const filterTemplate = (value, data) => {
+      if (!value) return true
+
+      return data.name?.toLowerCase().indexOf(value?.toLowerCase()) !== -1
+    }
+
     return {
       pageRules,
       folderRules,
@@ -230,7 +269,9 @@ export default {
       validGeneralForm,
       treeFolderOp,
       currentRoute,
-      changeParentForderId
+      changeParentForderId,
+      filterTemplate,
+      treeTemplateOp
     }
   }
 }

packages/plugins/page/src/PageSetting.vue

@@ -150,7 +150,16 @@ export default {
 
     const createPage = () => {
       const { page_content, ...other } = DEFAULT_PAGE
+
+      if (pageSettingState.template_content) {
+        pageSettingState.currentPageData.page_content = {
+          ...pageSettingState.template_content,
+          componentName: page_content.componentName,
+          lifeCycles: pageSettingState.currentPageData.page_content?.lifeCycles || {}
+        }
+      }
       const { page_content: page_content_state, ...pageSettingStateOther } = pageSettingState.currentPageData
+
       const createParams = {
         ...other,
         ...pageSettingStateOther,

packages/plugins/template/readme.md

@@ -90,4 +90,4 @@
 ### 页面管理中生成页面
 新增页面时，选择模板，即可基于模板生成页面。
 
-![alt text](./assets/select-template.png)
+![alt text](./assets/select-template.png)

packages/plugins/template/src/TemplateTree.vue

@@ -1,14 +1,28 @@
 <template>
   <div class="app-manage-search">
-    <tiny-search v-model="state.templateSearchValue" clearable placeholder="搜索模板"
-      @update:modelValue="searchTemplateData"></tiny-search>
+    <tiny-search
+      v-model="state.templateSearchValue"
+      clearable
+      placeholder="搜索模板"
+      @update:modelValue="searchTemplateData"
+    ></tiny-search>
   </div>
 
   <div class="tree-container app-manage-tree">
-    <tiny-tree ref="templateTreeRefs" :data="templateSettingState.templates" node-key="id" highlight-current
-      current-node-key="1-1" :props="{ children: 'children', label: 'name' }"
-      :filter-node-method="filterTemplateTreeData" :expand-on-click-node="false" :shrink-icon="shrinkIcon"
-      :expand-icon="expandIcon" @current-change="handleCurrentChange" default-expand-all>
+    <tiny-tree
+      ref="templateTreeRefs"
+      :data="templateSettingState.templates"
+      node-key="id"
+      highlight-current
+      current-node-key="1-1"
+      :props="{ children: 'children', label: 'name' }"
+      :filter-node-method="filterTemplateTreeData"
+      :expand-on-click-node="false"
+      :shrink-icon="shrinkIcon"
+      :expand-icon="expandIcon"
+      @current-change="handleCurrentChange"
+      default-expand-all
+    >
       <template #operation="{ node }">
         <div style="width: 80px; text-align: right" @click.stop>
           <tiny-dropdown size="mini" trigger="click" :show-icon="false" :visible-arrow="true">
@@ -43,7 +57,16 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 import { IconFolderOpened, IconFolderClosed } from '@opentiny/vue-icon'
-import { useCanvas, useApp, useModal, useTemplate, useBreadcrumb, useLayout, useNotify, usePage } from '@opentiny/tiny-engine-controller'
+import {
+  useCanvas,
+  useApp,
+  useModal,
+  useTemplate,
+  useBreadcrumb,
+  useLayout,
+  useNotify,
+  usePage
+} from '@opentiny/tiny-engine-controller'
 import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/canvas'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { closeTemplateSettingPanel } from './TemplateSetting.vue'
@@ -68,8 +91,8 @@ export default {
     const { appInfoState } = useApp()
     const { confirm } = useModal()
     const { initData, templateState, isBlock, isTemplateSaved, isSaved, setSaved } = useCanvas()
-    const { templateSettingState, isCurrentDataSame, changeTreeData } = useTemplate()
-    const { fetchTemplateList, fetchTemplateDetail } = http
+    const { templateSettingState, isCurrentDataSame, changeTreeData, refreshTemplateList } = useTemplate()
+    const { fetchTemplateDetail } = http
     const { setBreadcrumbTemplate } = useBreadcrumb()
     const templateTreeRefs = ref([])
     const { resetPageData, DEFAULT_PAGE, STATIC_PAGE_GROUP_ID, pageSettingState } = usePage()
@@ -79,39 +102,10 @@ export default {
       currentNodeData: {}
     })
 
-    const formatTreeData = (data) => {
-      const map = {}
-      const tree = []
-
-      data.forEach((item) => {
-        map[item.id] = { ...item, children: [] }
-      })
-
-      data.forEach((item) => {
-        if (item.parentId) {
-          const parent = map[item.parentId]
-          if (parent) {
-            parent.children.push(map[item.id])
-          }
-        } else {
-          tree.push(map[item.id])
-        }
-      })
-      templateSettingState.treeDataMapping = map
-
-      return tree
-    }
-
     const searchTemplateData = (value) => {
       templateTreeRefs.value.filter(value)
     }
 
-    const refreshTemplateList = async (appId, data) => {
-      const templateData = data ? data : await fetchTemplateList(appId)
-      templateSettingState.templates = formatTreeData(templateData)
-      return templateSettingState.templates
-    }
-
     templateSettingState.updateTreeData = async () => {
       const templateList = await refreshTemplateList(appInfoState.selectedId)
       return templateList
@@ -204,7 +198,7 @@ export default {
       if (isSaved() && isTemplateSaved() && isCurrentDataSame()) {
         switchTemplate(data)
       } else {
-        const text = isBlock() ? '区块' : (!isSaved() ? '页面' : '模板')
+        const text = isBlock() ? '区块' : !isSaved() ? '页面' : '模板'
 
         confirm({
           title: '提示',
@@ -372,7 +366,6 @@ export default {
         position: relative;
         top: -2px;
         left: -8px;
-
       }
     }
 
@@ -443,4 +436,4 @@ export default {
     }
   }
 }
-</style>
+</style>