From 1700d3c922a07f390d83119ef1b7d1fa63693575 Mon Sep 17 00:00:00 2001
From: Hexqi <wu_12556@126.com>
Date: Thu, 5 Sep 2024 14:03:43 +0800
Subject: [PATCH] fix: optimize block and material scalability issue (#788)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

当前问题
从用户注册表去掉区块模块后会报错无法启动，解决该报错后，画布中依然存在了新建区块的入口，且物料插件面板报错无法展开
物料模块没有导出加载bundle.json物料的api，不太方便使用

解决方法
从common包中移除SaveNewBlock组件，画布模块从区块注册表获取组件
物料插件根据区块模块存在情况渲染区块面板
物料模块导出增加addMaterials API，传入bundle对象即可加载物料
遗留
物料插件中要隐藏区块依然需要配置注册表，没有实现自动关联
---
 .../container/src/components/CanvasMenu.vue   |  14 +-
 packages/common/component/ProgressBar.vue     |   4 +-
 packages/common/component/index.js            |   4 +-
 packages/plugins/block/index.js               |   6 +-
 packages/plugins/block/src/Main.vue           |   3 +-
 .../block/src}/SaveNewBlock.vue               |   2 +-
 .../materials/src/composable/useMaterial.js   |   1 +
 .../src/meta/block/src/BlockPanel.vue         | 181 ++++++++++++++++++
 .../materials/src/meta/block/src/Main.vue     | 172 +----------------
 9 files changed, 212 insertions(+), 175 deletions(-)
 rename packages/{common/component => plugins/block/src}/SaveNewBlock.vue (98%)
 create mode 100644 packages/plugins/materials/src/meta/block/src/BlockPanel.vue

diff --git a/packages/canvas/container/src/components/CanvasMenu.vue b/packages/canvas/container/src/components/CanvasMenu.vue
index 1a069154b..226914b22 100644
--- a/packages/canvas/container/src/components/CanvasMenu.vue
+++ b/packages/canvas/container/src/components/CanvasMenu.vue
@@ -27,14 +27,14 @@
         </ul>
       </li>
     </ul>
-    <SaveNewBlock :boxVisibility="boxVisibility" fromCanvas @close="close"></SaveNewBlock>
+    <component :is="SaveNewBlock" :boxVisibility="boxVisibility" fromCanvas @close="close"></component>
   </div>
 </template>
 
 <script lang="jsx">
 import { ref, reactive, nextTick } from 'vue'
 import { canvasState, getConfigure, getController, getCurrent, copyNode, removeNodeById } from '../container'
-import { useLayout, useModal, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, useCanvas, getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { iconRight } from '@opentiny/vue-icon'
 
 const menuState = reactive({
@@ -112,10 +112,15 @@ export default {
       },
       { name: '删除', code: 'del' },
       { name: '复制', code: 'copy' },
-      { name: '绑定事件', code: 'bindEvent' },
-      { name: '新建区块', code: 'createBlock' }
+      { name: '绑定事件', code: 'bindEvent' }
     ])
 
+    // 通过画布右键快捷新建区块
+    const { SaveNewBlock } = getMergeMeta('engine.plugins.blockmanage')?.components || {}
+    if (SaveNewBlock) {
+      menus.value.push({ name: '新建区块', code: 'createBlock' })
+    }
+
     const boxVisibility = ref(false)
 
     // 计算上下文菜单位置，右键时显示，否则关闭
@@ -227,6 +232,7 @@ export default {
     }
 
     return {
+      SaveNewBlock,
       menuState,
       menus,
       doOperation,
diff --git a/packages/common/component/ProgressBar.vue b/packages/common/component/ProgressBar.vue
index b09e4ada7..7e23a3beb 100644
--- a/packages/common/component/ProgressBar.vue
+++ b/packages/common/component/ProgressBar.vue
@@ -21,8 +21,8 @@ export default {
     TinyProgress
   },
   setup() {
-    const { getEditBlock } = getMetaApi(META_APP.BlockManage)
-    const editBlock = computed(getEditBlock)
+    const { getEditBlock } = getMetaApi(META_APP.BlockManage) || {}
+    const editBlock = getEditBlock ? computed(getEditBlock) : null
 
     return {
       editBlock
diff --git a/packages/common/component/index.js b/packages/common/component/index.js
index e67da045c..b7b197b6f 100644
--- a/packages/common/component/index.js
+++ b/packages/common/component/index.js
@@ -12,7 +12,6 @@
 
 import ConfigGroup from './ConfigGroup.vue'
 import ConfigItem from './ConfigItem.vue'
-import SaveNewBlock from './SaveNewBlock.vue'
 export { default as PluginSetting } from './PluginSetting.vue'
 export { default as PluginPanel } from './PluginPanel.vue'
 export { default as SvgButton } from './SvgButton.vue'
@@ -56,12 +55,11 @@ export { default as I18nInput } from './I18nInput.vue'
 export { default as CanvasDragItem } from './CanvasDragItem.vue'
 export { default as Modal } from './Modal.jsx'
 export { default as Notify } from './Notify.jsx'
-export { ConfigGroup, ConfigItem, SaveNewBlock }
+export { ConfigGroup, ConfigItem }
 
 export const injectGlobalComponents = {
   install: (app) => {
     const globalComponents = {
-      SaveNewBlock,
       ConfigGroup,
       ConfigItem
     }
diff --git a/packages/plugins/block/index.js b/packages/plugins/block/index.js
index 539607789..df70726dd 100644
--- a/packages/plugins/block/index.js
+++ b/packages/plugins/block/index.js
@@ -13,12 +13,16 @@
 import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
 import { BlockService } from './src/composable'
+import SaveNewBlock from './src/SaveNewBlock.vue'
 
 export default {
   ...metaData,
   apis: api,
   entry,
-  metas: [BlockService]
+  metas: [BlockService],
+  components: {
+    SaveNewBlock
+  }
 }
 
 export { BlockService }
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index e2edab70c..d64f4ce79 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -114,12 +114,13 @@ import {
   Popover as TinyPopover,
   Button as TinyButton
 } from '@opentiny/vue'
-import { PluginPanel, PluginBlockList, SvgButton, SaveNewBlock, LinkButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, PluginBlockList, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
 import { useBlock, useModal, useLayout, useCanvas, useHelp } from '@opentiny/tiny-engine-meta-register'
 import { constants } from '@opentiny/tiny-engine-utils'
 import BlockSetting, { openPanel, closePanel } from './BlockSetting.vue'
 import BlockGroupArrange from './BlockGroupArrange.vue'
 import CategoryEdit from './CategoryEdit.vue'
+import SaveNewBlock from './SaveNewBlock.vue'
 import {
   saveBlock,
   initEditBlock,
diff --git a/packages/common/component/SaveNewBlock.vue b/packages/plugins/block/src/SaveNewBlock.vue
similarity index 98%
rename from packages/common/component/SaveNewBlock.vue
rename to packages/plugins/block/src/SaveNewBlock.vue
index 4d8230f6b..28fdb0476 100644
--- a/packages/common/component/SaveNewBlock.vue
+++ b/packages/plugins/block/src/SaveNewBlock.vue
@@ -44,7 +44,7 @@
 import { reactive, computed, ref } from 'vue'
 import { Input, Form, FormItem, Button, DialogBox, Select } from '@opentiny/vue'
 import { useBlock, useLayout, useCanvas, useModal } from '@opentiny/tiny-engine-meta-register'
-import { REGEXP_BLOCK_NAME } from '../js/verification'
+import { REGEXP_BLOCK_NAME } from '@opentiny/tiny-engine-common/js/verification'
 
 export default {
   components: {
diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js
index 37d36b1d3..6cd4ea667 100644
--- a/packages/plugins/materials/src/composable/useMaterial.js
+++ b/packages/plugins/materials/src/composable/useMaterial.js
@@ -430,6 +430,7 @@ export default function () {
     clearBlockResources, // 清空区块缓存，以便更新最新版区块
     getMaterial, // 获取单个物料，(property) getMaterial: (name: string) => Material
     setMaterial, // 设置单个物料 (property) setMaterial: (name: string, data: Material) => void
+    addMaterials, // 添加多个物料
     registerBlock, // 注册新的区块
     updateCanvasDependencies, //传入新的区块，获取新增区块的依赖，更新画布中的组件依赖
     getConfigureMap // 获取物料组件的配置信息
diff --git a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
new file mode 100644
index 000000000..3cc7f0179
--- /dev/null
+++ b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="blocks-wrap">
+    <block-group v-model="state.groups" @changeGroup="changeGroup"></block-group>
+    <tiny-search v-model="state.searchValue" clearable placeholder="请输入关键字搜索">
+      <template #prefix> <tiny-icon-search /> </template>
+    </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">
+import { onMounted, reactive, watch, provide, computed } from 'vue'
+import { Search } from '@opentiny/vue'
+import { iconSearch } from '@opentiny/vue-icon'
+import { useApp, useBlock, useMaterial, useModal } from '@opentiny/tiny-engine-meta-register'
+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,
+    BlockGroupPanel,
+    BlockVersionSelect
+  },
+  props: {
+    activeTabName: String,
+    rightPanelRef: Object
+  },
+  setup(props) {
+    const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
+    const { materialState } = useMaterial()
+    const { message } = useModal()
+    const appId = useApp().appInfoState.selectedId
+
+    const state = reactive({
+      searchValue: '',
+      groups: [],
+      groupData: []
+    })
+
+    const filterBlocks = computed(() => {
+      if (!state.searchValue) {
+        return state.groupData
+      }
+
+      const lowerCaseSearchValue = state.searchValue.toLowerCase()
+
+      return state.groupData.filter((block) => {
+        const nameCN = block?.name_cn?.toLowerCase?.() ?? ''
+        const label = block?.label?.toLowerCase?.() ?? ''
+        const description = block?.description?.toLowerCase?.() ?? ''
+
+        return (
+          nameCN.includes(lowerCaseSearchValue) ||
+          label.includes(lowerCaseSearchValue) ||
+          description.includes(lowerCaseSearchValue)
+        )
+      })
+    })
+
+    const changeGroup = () => {
+      state.searchValue = ''
+    }
+
+    provide('displayType', 'default')
+
+    // 读取区块
+    const fetchBlocks = async (value) => {
+      // 设计器默认区块分组的数据从bundle.json取，其他用户自定义分组调接口向数据库查询
+      const groupId = selectedGroup.value.groupId
+      if (isDefaultGroupId(groupId)) {
+        const blocks = materialState.blocks[0]?.children || []
+        state.groupData = value ? blocks.filter((item) => new RegExp(value, 'i').test(item?.label)) : blocks
+        state.groupData.forEach((block) => {
+          block.isDefaultGroup = true
+        })
+      } else if (isAllGroupId(groupId)) {
+        const groupIds = state.groups.map((item) => item.value.groupId).filter((id) => typeof id === 'number')
+        const innerBlocks = materialState.blocks[0]?.children || []
+        innerBlocks.forEach((item) => {
+          item.isDefaultGroup = true
+          item.groupName = '设计器默认区块分组'
+        })
+        let blocks = []
+        try {
+          blocks = await fetchGroupBlocksByIds({ groupIds })
+        } catch (error) {
+          message({ message: `获取区块列表失败: ${error.message || error}`, status: 'error' })
+        }
+        state.groupData = [...innerBlocks, ...blocks]
+      } else {
+        fetchGroupBlocksById({ groupId, value })
+          .then((data) => {
+            state.groupData = data
+          })
+          .catch((error) => {
+            state.groupData = []
+            message({ message: `获取区块列表失败: ${error.message || error}`, status: 'error' })
+          })
+      }
+    }
+
+    watch(
+      () => selectedGroup.value.groupId,
+      // 避免简写带入watch默认参数
+      () => fetchBlocks()
+    )
+
+    watch(
+      () => isRefresh.value,
+      (value) => {
+        if (value) {
+          fetchBlocks()
+          isRefresh.value = false
+        }
+      }
+    )
+
+    watch(
+      () => props.activeTabName,
+      (value) => {
+        if (value !== metaData.id) {
+          setBlockPanelVisible(false)
+          setBlockVersionPanelVisible(false)
+        }
+      }
+    )
+
+    onMounted(() => {
+      fetchGroups(appId)
+        .then((data) => {
+          const groups = addDefaultGroup(data)
+          state.groups.push(...groups)
+
+          fetchBlocks()
+        })
+        .catch((error) => {
+          message({ message: `获取区块列表失败: ${error.message || error}`, status: 'error' })
+        })
+    })
+
+    return {
+      state,
+      filterBlocks,
+      changeGroup
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.blocks-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tiny-search {
+    padding: 0 8px 12px;
+    :deep(.tiny-input__inner) {
+      height: 30px;
+    }
+  }
+
+  :deep(.block-list) {
+    .block-item {
+      color: #ababab;
+    }
+  }
+}
+</style>
diff --git a/packages/plugins/materials/src/meta/block/src/Main.vue b/packages/plugins/materials/src/meta/block/src/Main.vue
index 3cc7f0179..9e50c91a9 100644
--- a/packages/plugins/materials/src/meta/block/src/Main.vue
+++ b/packages/plugins/materials/src/meta/block/src/Main.vue
@@ -1,181 +1,27 @@
 <template>
-  <div class="blocks-wrap">
-    <block-group v-model="state.groups" @changeGroup="changeGroup"></block-group>
-    <tiny-search v-model="state.searchValue" clearable placeholder="请输入关键字搜索">
-      <template #prefix> <tiny-icon-search /> </template>
-    </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>
+  <block-panel v-if="existBlockModule" v-bind="$attrs"></block-panel>
 </template>
 
-<script lang="jsx">
-import { onMounted, reactive, watch, provide, computed } from 'vue'
-import { Search } from '@opentiny/vue'
-import { iconSearch } from '@opentiny/vue-icon'
-import { useApp, useBlock, useMaterial, useModal } from '@opentiny/tiny-engine-meta-register'
-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'
+<script>
+import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import BlockPanel from './BlockPanel.vue'
 
 export default {
   components: {
-    TinySearch: Search,
-    TinyIconSearch: iconSearch(),
-    BlockGroup,
-    BlockList,
-    BlockGroupPanel,
-    BlockVersionSelect
+    BlockPanel
   },
   props: {
     activeTabName: String,
     rightPanelRef: Object
   },
-  setup(props) {
-    const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
-    const { materialState } = useMaterial()
-    const { message } = useModal()
-    const appId = useApp().appInfoState.selectedId
-
-    const state = reactive({
-      searchValue: '',
-      groups: [],
-      groupData: []
-    })
-
-    const filterBlocks = computed(() => {
-      if (!state.searchValue) {
-        return state.groupData
-      }
-
-      const lowerCaseSearchValue = state.searchValue.toLowerCase()
-
-      return state.groupData.filter((block) => {
-        const nameCN = block?.name_cn?.toLowerCase?.() ?? ''
-        const label = block?.label?.toLowerCase?.() ?? ''
-        const description = block?.description?.toLowerCase?.() ?? ''
-
-        return (
-          nameCN.includes(lowerCaseSearchValue) ||
-          label.includes(lowerCaseSearchValue) ||
-          description.includes(lowerCaseSearchValue)
-        )
-      })
-    })
-
-    const changeGroup = () => {
-      state.searchValue = ''
-    }
-
-    provide('displayType', 'default')
-
-    // 读取区块
-    const fetchBlocks = async (value) => {
-      // 设计器默认区块分组的数据从bundle.json取，其他用户自定义分组调接口向数据库查询
-      const groupId = selectedGroup.value.groupId
-      if (isDefaultGroupId(groupId)) {
-        const blocks = materialState.blocks[0]?.children || []
-        state.groupData = value ? blocks.filter((item) => new RegExp(value, 'i').test(item?.label)) : blocks
-        state.groupData.forEach((block) => {
-          block.isDefaultGroup = true
-        })
-      } else if (isAllGroupId(groupId)) {
-        const groupIds = state.groups.map((item) => item.value.groupId).filter((id) => typeof id === 'number')
-        const innerBlocks = materialState.blocks[0]?.children || []
-        innerBlocks.forEach((item) => {
-          item.isDefaultGroup = true
-          item.groupName = '设计器默认区块分组'
-        })
-        let blocks = []
-        try {
-          blocks = await fetchGroupBlocksByIds({ groupIds })
-        } catch (error) {
-          message({ message: `获取区块列表失败: ${error.message || error}`, status: 'error' })
-        }
-        state.groupData = [...innerBlocks, ...blocks]
-      } else {
-        fetchGroupBlocksById({ groupId, value })
-          .then((data) => {
-            state.groupData = data
-          })
-          .catch((error) => {
-            state.groupData = []
-            message({ message: `获取区块列表失败: ${error.message || error}`, status: 'error' })
-          })
-      }
-    }
-
-    watch(
-      () => selectedGroup.value.groupId,
-      // 避免简写带入watch默认参数
-      () => fetchBlocks()
-    )
-
-    watch(
-      () => isRefresh.value,
-      (value) => {
-        if (value) {
-          fetchBlocks()
-          isRefresh.value = false
-        }
-      }
-    )
-
-    watch(
-      () => props.activeTabName,
-      (value) => {
-        if (value !== metaData.id) {
-          setBlockPanelVisible(false)
-          setBlockVersionPanelVisible(false)
-        }
-      }
-    )
-
-    onMounted(() => {
-      fetchGroups(appId)
-        .then((data) => {
-          const groups = addDefaultGroup(data)
-          state.groups.push(...groups)
-
-          fetchBlocks()
-        })
-        .catch((error) => {
-          message({ message: `获取区块列表失败: ${error.message || error}`, status: 'error' })
-        })
-    })
+  setup() {
+    const existBlockModule = getMergeMeta('engine.plugins.blockmanage')
 
     return {
-      state,
-      filterBlocks,
-      changeGroup
+      existBlockModule
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
-.blocks-wrap {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .tiny-search {
-    padding: 0 8px 12px;
-    :deep(.tiny-input__inner) {
-      height: 30px;
-    }
-  }
-
-  :deep(.block-list) {
-    .block-item {
-      color: #ababab;
-    }
-  }
-}
-</style>
+<style lang="less" scoped></style>