refactor(material): 物料管理插件元应用拆分

designer-demo/registry.js

@@ -58,7 +58,21 @@ export default {
   ],
   plugins: [
     {
-      id: 'engine.plugins.materials'
+      id: 'engine.plugins.materials',
+      metas:[
+        {
+          id: 'engine.plugins.materials.header',
+        },
+        {
+          id: 'engine.plugins.materials.content',
+        },
+        {
+          id: 'engine.plugins.materials.block',
+        },
+        {
+          id: 'engine.plugins.materials.component',
+        }
+      ]
     },
     {
       id: 'engine.plugins.outlinetree'

packages/design-core/src/App.vue

@@ -43,7 +43,7 @@ import { constants } from '@opentiny/tiny-engine-utils'
 
 const { message } = useModal()
 const { requestInitBlocks } = blockPlugin.api
-const { fetchGroups } = materials.api
+const { fetchGroups } = materials.apis
 const { BROADCAST_CHANNEL } = constants
 
 export default {

packages/plugins/materials/index.js

@@ -10,13 +10,24 @@
  *
  */
 
-import component, { api } from './src/Main.vue'
+import component from './src/Main.vue'
 import metaData from './meta.js'
+import MaterialLayout from './src/meta/layout'
+import MaterialHeader from './src/meta/header'
+import MaterialContent from './src/meta/contentLayout'
+import MaterialBlock from './src/meta/block'
+import MaterialComponent from './src/meta/component'
 
 export default {
   ...metaData,
   component,
-  api
+  layout: MaterialLayout,
+  options: {
+    layoutComponentIdMap: {
+      header: 'engine.plugins.materials.header',
+      content: 'engine.plugins.materials.content'
+    }
+  },
+  apis: { ...MaterialBlock.apis },
+  metas: [MaterialHeader, MaterialContent, MaterialBlock, MaterialComponent]
 }
-
-export { component }

packages/plugins/materials/src/Main.vue

@@ -1,116 +1,18 @@
 <template>
-  <plugin-panel :title="shortcut ? '' : '物料'" @close="$emit('close')">
-    <template #header>
-      <svg-button
-        class="item icon-sidebar"
-        :class="[fixedPanels?.includes(PLUGIN_NAME.Materials) && 'active']"
-        name="fixed"
-        :tips="!fixedPanels?.includes(PLUGIN_NAME.Materials) ? '固定面板' : '解除固定面板'"
-        @click="$emit('fixPanel', PLUGIN_NAME.Materials)"
-      ></svg-button>
-    </template>
-    <template #content>
-      <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" @click="tabClick">
-        <tiny-tab-item name="components" title="组件">
-          <component-panel></component-panel>
-        </tiny-tab-item>
-        <tiny-tab-item name="blocks" title="区块">
-          <block-panel></block-panel>
-        </tiny-tab-item>
-      </tiny-tabs>
-      <block-group-panel></block-group-panel>
-      <block-version-select></block-version-select>
-    </template>
-  </plugin-panel>
+  <component :is="layout.component" :metaData="metaData"></component>
 </template>
 
 <script>
-import { ref, reactive, provide } from 'vue'
-import { Tabs, TabItem } from '@opentiny/vue'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
-import ComponentPanel from './component/Main.vue'
-import BlockPanel from './block/Main.vue'
-import BlockGroupPanel from './block/BlockGroupPanel.vue'
-import BlockVersionSelect from './block/BlockVersionSelect.vue'
-import { setBlockPanelVisible, setBlockVersionPanelVisible } from './block/js/usePanel'
-import { useLayout } from '@opentiny/tiny-engine-controller'
-import { fetchGroups } from './block/http'
-
-export const api = {
-  fetchGroups
-}
-
+import { getMergeRegistry } from '@opentiny/tiny-engine-entry'
+import meta from '../meta'
 export default {
-  components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    PluginPanel,
-    ComponentPanel,
-    BlockPanel,
-    BlockGroupPanel,
-    BlockVersionSelect,
-    SvgButton
-  },
-
-  props: {
-    shortcut: [Boolean, String],
-    fixedPanels: {
-      type: Array
-    }
-  },
-  emits: ['close', 'fix-panel'],
-  setup(props, { emit }) {
-    const activeName = ref('components')
-
-    const panelState = reactive({
-      isShortcutPanel: props.shortcut,
-      isBlockGroupPanel: false,
-      isBlockList: false,
-      emitEvent: emit
-    })
-
-    provide('panelState', panelState)
-
-    const tabClick = (tabs) => {
-      if (tabs.name === 'components') {
-        setBlockPanelVisible(false)
-        setBlockVersionPanelVisible(false)
-      }
-    }
-    const { PLUGIN_NAME } = useLayout()
-
+  setup() {
+    const registry = getMergeRegistry(meta.type, meta.id)
+    const { layout, ...restRegistry } = registry
     return {
-      activeName,
-      tabClick,
-      PLUGIN_NAME
+      metaData: restRegistry,
+      layout
     }
   }
 }
 </script>
-
-<style lang="less" scoped>
-.tiny-tabs {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto;
-}
-
-:deep(.tiny-tabs__header) {
-  padding: 8px;
-}
-
-:deep(.tiny-tabs__content) {
-  flex: 1;
-  overflow-y: scroll;
-  padding: 0;
-  & > div {
-    height: 100%;
-  }
-}
-
-.tiny-collapse {
-  flex: 1;
-  overflow-y: scroll;
-}
-</style>

packages/plugins/materials/src/meta/block/index.js

@@ -0,0 +1,14 @@
+import component from './src/Main.vue'
+import metaData from './meta'
+import { fetchGroups } from './src/http'
+
+export default {
+  ...metaData,
+  component,
+  apis: {
+    fetchGroups
+  },
+  options: {
+    title: '区块'
+  }
+}

packages/plugins/materials/src/meta/block/meta.js

@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.plugins.materials.block',
+  type: 'plugins'
+}

packages/plugins/materials/src/block/Main.vue → packages/plugins/materials/src/meta/block/src/Main.vue

@@ -6,6 +6,10 @@
     </tiny-search>
     <block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>
   </div>
+  <teleport to=".material-right-panel" v-if="rightPanelRef">
+    <block-group-panel></block-group-panel>
+    <block-version-select></block-version-select>
+  </teleport>
 </template>
 
 <script lang="jsx">
@@ -15,16 +19,26 @@ import { iconSearch } from '@opentiny/vue-icon'
 import { useApp, useBlock, useModal, useResource } from '@opentiny/tiny-engine-controller'
 import BlockGroup from './BlockGroup.vue'
 import BlockList from './BlockList.vue'
+import BlockGroupPanel from './BlockGroupPanel.vue'
+import BlockVersionSelect from './BlockVersionSelect.vue'
 import { fetchGroups, fetchGroupBlocksById, fetchGroupBlocksByIds } from './http'
+import metaData from '../meta'
+import { setBlockPanelVisible, setBlockVersionPanelVisible } from './js/usePanel'
 
 export default {
   components: {
     TinySearch: Search,
     TinyIconSearch: iconSearch(),
     BlockGroup,
-    BlockList
+    BlockList,
+    BlockGroupPanel,
+    BlockVersionSelect
   },
-  setup() {
+  props: {
+    activeTabName: String,
+    rightPanelRef: Object
+  },
+  setup(props) {
     const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
     const { resState } = useResource()
     const { message } = useModal()
@@ -114,6 +128,16 @@ export default {
       }
     )
 
+    watch(
+      () => props.activeTabName,
+      (value) => {
+        if (value !== metaData.id) {
+          setBlockPanelVisible(false)
+          setBlockVersionPanelVisible(false)
+        }
+      }
+    )
+
     onMounted(() => {
       fetchGroups(appId)
         .then((data) => {

packages/plugins/materials/src/block/js/usePanel.js → packages/plugins/materials/src/meta/block/src/js/usePanel.js

@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import { reactive } from 'vue'
 

packages/plugins/materials/src/meta/component/index.js

@@ -0,0 +1,10 @@
+import component from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  component,
+  options: {
+    title: '物料'
+  }
+}

packages/plugins/materials/src/meta/component/meta.js

@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.plugins.materials.component',
+  type: 'plugins'
+}

packages/plugins/materials/src/meta/contentLayout/index.js

@@ -0,0 +1,12 @@
+import component from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  component,
+  options: {
+    onlyShowDefault: false,
+    defaultTabId: 'engine.plugins.materials.component',
+    children: [{ id: 'engine.plugins.materials.component' }, { id: 'engine.plugins.materials.block' }]
+  }
+}

packages/plugins/materials/src/meta/contentLayout/meta.js

@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.plugins.materials.content',
+  type: 'plugins'
+}

packages/plugins/materials/src/meta/contentLayout/src/Main.vue

@@ -0,0 +1,73 @@
+<template>
+  <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" v-if="!onlyShowDefault">
+    <tiny-tab-item :key="item.id" v-for="item in tabComponents" :title="item.title" :name="item.id">
+      <component :is="item.component" :activeTabName="activeName" :rightPanelRef="rightPanelRef"></component>
+    </tiny-tab-item>
+  </tiny-tabs>
+  <component :is="defaultComponent" v-if="onlyShowDefault"></component>
+  <div class="material-right-panel" ref="rightPanelRef"></div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { Tabs, TabItem } from '@opentiny/vue'
+import { getMergeMeta } from '@opentiny/tiny-engine-entry'
+
+import MetaData from '../index.js'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  setup() {
+    const rightPanelRef = ref(null)
+    const onlyShowDefault = ref(MetaData.options?.isShowTabs)
+    const activeName = ref(MetaData.options?.defaultTabId)
+    const defaultComponent = getMergeMeta(activeName.value)?.component
+    const tabComponents = MetaData.options.children?.map(({ id }) => {
+      const metaData = getMergeMeta(id)
+      return {
+        id,
+        component: metaData?.component,
+        title: metaData?.options?.title || id
+      }
+    })
+
+    return {
+      activeName,
+      defaultComponent,
+      onlyShowDefault,
+      tabComponents,
+      rightPanelRef
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-tabs {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+}
+
+:deep(.tiny-tabs__header) {
+  padding: 8px;
+}
+
+:deep(.tiny-tabs__content) {
+  flex: 1;
+  overflow-y: scroll;
+  padding: 0;
+  & > div {
+    height: 100%;
+  }
+}
+
+.tiny-collapse {
+  flex: 1;
+  overflow-y: scroll;
+}
+</style>