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

packages/controller/src/hooks/useBlock.js

@@ -20,13 +20,7 @@ import { getMergeMeta } from '@opentiny/tiny-engine-entry'
 import { getCanvasStatus } from '../../js/canvas'
 import { ast2String, parseExpression } from '../../js/ast'
 import { getCssObjectFromStyleStr } from '../../js/css'
-import {
-  useCanvas,
-  useTranslate,
-  useEditorInfo,
-  useBreadcrumb,
-  useLayout
-} from '@opentiny/tiny-engine-entry'
+import { useCanvas, useTranslate, useEditorInfo, useBreadcrumb, useLayout } from '@opentiny/tiny-engine-entry'
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
 

packages/design-core/index.js

@@ -51,5 +51,5 @@ export {
   SaveLocalService,
   TranslateService,
   HistoryService,
-  BreadcrumbService,
+  BreadcrumbService
 } from '@opentiny/tiny-engine-controller'

packages/entry/src/common.js

@@ -10,7 +10,7 @@
  *
  */
 
-import { initHook } from "./hooks"
+import { initHook } from './hooks'
 
 const vueLifeHook = [
   'onMounted',

packages/layout/src/Main.vue

@@ -50,7 +50,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,25 @@
  *
  */
 
-import entry, { api } from './src/Main.vue'
+import entry from './src/Main.vue'
 import metaData from './meta.js'
+import MaterialLayout from './src/meta/layout'
+import MaterialBlock from './src/meta/block'
+import MaterialComponent from './src/meta/component'
+import MaterialHeader from './src/components/header/Main.vue'
 
 export default {
   ...metaData,
   entry,
-  api
+  layout: MaterialLayout,
+  options: {
+    defaultTabId: 'engine.plugins.materials.component',
+    childrenIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block']
+  },
+  components: {
+    header: MaterialHeader
+  },
+  apis: { ...MaterialBlock.apis },
+  api: { ...MaterialBlock.apis },
+  metas: [MaterialBlock, MaterialComponent]
 }
-
-export { entry }

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.entry" :registryData="registryData"></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
+      registryData: 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/components/header/Main.vue

@@ -0,0 +1,33 @@
+<template>
+  <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>
+
+<script>
+import { SvgButton } from '@opentiny/tiny-engine-common'
+import { useLayout } from '@opentiny/tiny-engine-controller'
+
+export default {
+  components: {
+    SvgButton
+  },
+
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup() {
+    const { PLUGIN_NAME } = useLayout()
+
+    return {
+      PLUGIN_NAME
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,14 @@
+import entry from './src/Main.vue'
+import metaData from './meta'
+import { fetchGroups } from './src/http'
+
+export default {
+  ...metaData,
+  entry,
+  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 entry from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry,
+  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/layout/index.js

@@ -0,0 +1,7 @@
+import entry from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry
+}

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

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