refactor(material): 将物料（组件，区块）从resource剥离出来

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -20,7 +20,7 @@ import {
   useProperties,
   useCanvas,
   useLayout,
-  useResource,
+  useMaterial,
   useHistory,
   useModal
 } from '@opentiny/tiny-engine-controller'
@@ -182,9 +182,9 @@ export default {
       showMask,
       controller: {
         // 需要在canvas/render或内置组件里使用的方法
-        getMaterial: useResource().getMaterial,
+        getMaterial: useMaterial().getMaterial,
         addHistory: useHistory().addHistory,
-        registerBlock: useResource().registerBlock,
+        registerBlock: useMaterial().registerBlock,
         request: useHttp(),
         ast
       },

packages/canvas/container/src/CanvasContainer.vue

@@ -30,7 +30,7 @@
 <script>
 import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-controller/js/monitor'
-import { useTranslate, useCanvas, useResource } from '@opentiny/tiny-engine-controller'
+import { useTranslate, useCanvas, useMaterial } from '@opentiny/tiny-engine-controller'
 import { NODE_UID, NODE_LOOP } from '../../common'
 import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
@@ -110,8 +110,7 @@ export default {
     const beforeCanvasReady = () => {
       if (iframe.value) {
         const win = iframe.value.contentWindow
-
-        win.thirdPartyDeps = useResource().resState.thirdPartyDeps
+        win.thirdPartyDeps = useMaterial().materialState.thirdPartyDeps
       }
     }
 

packages/canvas/container/src/components/CanvasAction.vue

@@ -128,7 +128,7 @@ import {
   dragStart,
   getCurrentElement
 } from '../container'
-import { useLayout, useResource } from '@opentiny/tiny-engine-controller'
+import { useLayout, useMaterial } from '@opentiny/tiny-engine-controller'
 import { Popover } from '@opentiny/vue'
 import shortCutPopover from './shortCutPopover.vue'
 
@@ -236,7 +236,7 @@ export default {
     const showToParent = computed(() => getCurrent().parent !== getSchema())
 
     const isModal = computed(() => {
-      const config = useResource().getMaterial(props.selectState.componentName)
+      const config = useMaterial().getMaterial(props.selectState.componentName)
       return config?.configure?.isModal
     })
 

packages/canvas/container/src/components/shortCutPopover.vue

@@ -30,7 +30,7 @@
 
 <script>
 import { computed, ref } from 'vue'
-import { useResource, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-controller'
+import { useMaterial, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-controller'
 import { iconSetting, iconClose } from '@opentiny/vue-icon'
 
 export default {
@@ -39,7 +39,7 @@ export default {
     IconClose: iconClose()
   },
   setup(props, { emit }) {
-    const { getMaterial } = useResource()
+    const { getMaterial } = useMaterial()
     const { pageState } = useCanvas()
     const { properties } = useProperty().getProperty({ pageState })
     const active = ref('props')

packages/canvas/container/src/container.js

@@ -19,7 +19,7 @@ import {
   NODE_TAG,
   NODE_LOOP
 } from '../../common'
-import { useCanvas, useLayout, useResource, useTranslate } from '@opentiny/tiny-engine-controller'
+import { useCanvas, useLayout, useResource, useTranslate, useMaterial } from '@opentiny/tiny-engine-controller'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import Builtin from '../../render/src/builtin/builtin.json' //TODO 画布内外应该分开
 
@@ -917,6 +917,6 @@ export const initCanvas = ({ renderer, iframe, emit, controller }) => {
   setUtils(useResource().resState.utils)
   setSchema(schema)
   setConfigure(useResource().getConfigureMap())
-  canvasDispatch('updateDependencies', { detail: useResource().resState.thirdPartyDeps })
+  canvasDispatch('updateDependencies', { detail: useMaterial().materialState.thirdPartyDeps })
   canvasState.loading = false
 }

packages/common/component/ConfigItem.vue

@@ -106,7 +106,7 @@ import { typeOf } from '@opentiny/vue-renderless/common/type'
 import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 import MultiTypeSelector from './MultiTypeSelector.vue'
-import { useHistory, useProperties, useResource, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
+import { useHistory, useProperties, useMaterial, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
 import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '@opentiny/tiny-engine-controller/js/constants'
 import { getConfigurator } from '@opentiny/tiny-engine-entry'
 import { utils } from '@opentiny/tiny-engine-utils'
@@ -254,7 +254,7 @@ export default {
         const currentComponent = useProperties().getSchema().componentName
         const {
           schema: { events = {} }
-        } = useResource().getMaterial(currentComponent)
+        } = useMaterial().getMaterial(currentComponent)
 
         if (Object.keys(events).includes(`onUpdate:${property}`)) {
           // 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。

packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue

@@ -48,7 +48,7 @@
 </template>
 <script>
 import { reactive, ref, watchEffect } from 'vue'
-import { useProperties, useResource } from '@opentiny/tiny-engine-controller'
+import { useProperties, useMaterial } from '@opentiny/tiny-engine-controller'
 import { IconDel, IconEdit, IconClose, IconPlus } from '@opentiny/vue-icon'
 import { Form, FormItem, Input, Button, Popover, Tooltip } from '@opentiny/vue'
 import { utils } from '@opentiny/tiny-engine-utils'
@@ -89,7 +89,7 @@ export default {
         return
       }
 
-      const { schema } = useResource().getMaterial(useProperties().getSchema().componentName)
+      const { schema } = useMaterial().getMaterial(useProperties().getSchema().componentName)
       schema?.properties?.forEach(({ content }) => {
         content.forEach(({ property }) => properties.push(property))
       })

packages/configurator/src/slot-configurator/SlotConfigurator.vue

@@ -25,7 +25,7 @@
 <script>
 import { ref, watchEffect, nextTick } from 'vue'
 import { Popover } from '@opentiny/vue'
-import { useProperties, useResource, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
+import { useProperties, useModal, useCanvas, useMaterial } from '@opentiny/tiny-engine-controller'
 import { iconHelpCircle } from '@opentiny/vue-icon'
 
 export default {
@@ -108,7 +108,7 @@ export default {
           cancel: () => {}
         })
       }
-      const config = useResource().getMaterial(schema.componentName)
+      const config = useMaterial().getMaterial(schema.componentName)
       const isPopper = config?.configure?.isPopper
 
       if (isPopper) {

packages/controller/js/preview.js

@@ -12,7 +12,7 @@
 
 import { constants } from '@opentiny/tiny-engine-utils'
 import { isDevelopEnv } from './environments'
-import { useResource } from '@opentiny/tiny-engine-entry'
+import { useMaterial } from '@opentiny/tiny-engine-entry'
 // prefer old unicode hacks for backward compatibility
 
 const { COMPONENT_NAME } = constants
@@ -25,7 +25,7 @@ const open = (params = {}) => {
   const paramsMap = new URLSearchParams(location.search)
   params.app = paramsMap.get('id')
   params.tenant = paramsMap.get('tenant')
-  const { scripts, styles } = useResource().resState.thirdPartyDeps
+  const { scripts, styles } = useMaterial().materialState.thirdPartyDeps
   params.scripts = scripts
     .filter((item) => item.script)
     .reduce((pre, cur) => ({ ...pre, [cur.package]: cur.script }), {})

packages/controller/src/index.js

@@ -31,5 +31,6 @@ export {
   useModal,
   useNotify,
   useCustom,
-  useMessage
+  useMessage,
+  useMaterial
 } from '@opentiny/tiny-engine-entry'

packages/design-core/index.js

@@ -15,7 +15,7 @@ export { default as GenerateVue, SaveLocalService } from '@opentiny/tiny-engine-
 export { default as Refresh } from '@opentiny/tiny-engine-toolbar-refresh'
 export { default as Collaboration } from '@opentiny/tiny-engine-toolbar-collaboration'
 export { default as Setting } from '@opentiny/tiny-engine-toolbar-setting'
-export { default as Materials, ResourceService } from '@opentiny/tiny-engine-plugin-materials'
+export { default as Materials, ResourceService, MaterialService } from '@opentiny/tiny-engine-plugin-materials'
 export { default as Data } from '@opentiny/tiny-engine-plugin-data'
 export { default as Script } from '@opentiny/tiny-engine-plugin-script'
 export { default as Tree } from '@opentiny/tiny-engine-plugin-tree'

packages/entry/src/hooks.js

@@ -18,7 +18,8 @@ export const HOOK_NAME = {
   useEnv: 'env',
   useModal: 'modal',
   useNotify: 'notify',
-  useCustom: 'custom'
+  useCustom: 'custom',
+  useMaterial: 'material'
 }
 
 const hooksState = {
@@ -41,6 +42,7 @@ const hooksState = {
   [HOOK_NAME.useEnv]: {},
   [HOOK_NAME.useNotify]: {},
   [HOOK_NAME.useModal]: {},
+  [HOOK_NAME.useMaterial]: {},
   [HOOK_NAME.useCustom]: {} // 自定义
 }
 
@@ -63,6 +65,7 @@ export const useHttp = () => hooksState[HOOK_NAME.useHttp]
 export const useEnv = () => hooksState[HOOK_NAME.useEnv]
 export const useModal = () => hooksState[HOOK_NAME.useModal]
 export const useNotify = () => hooksState[HOOK_NAME.useNotify]
+export const useMaterial = () => hooksState[HOOK_NAME.useMaterial]
 export const useCustom = () => hooksState[HOOK_NAME.useCustom]
 
 export function initHook(hookName, hookContent, { useDefaultExport } = {}) {

packages/plugins/materials/index.js

@@ -12,13 +12,13 @@
 
 import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
-import { ResourceService } from './src/composable'
+import { ResourceService, MaterialService } from './src/composable'
 
 export default {
   ...metaData,
   entry,
   api,
-  metas: [ResourceService]
+  metas: [ResourceService, MaterialService]
 }
 
-export { entry, ResourceService }
+export { entry, ResourceService, MaterialService }

packages/plugins/materials/src/block/BlockGroupPanel.vue

@@ -24,7 +24,7 @@ import { nextTick, reactive, watch, inject } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
-import { useApp, useBlock, useModal, useResource } from '@opentiny/tiny-engine-controller'
+import { useApp, useBlock, useModal, useResource, useMaterial } from '@opentiny/tiny-engine-controller'
 import BlockGroupTransfer from './BlockGroupTransfer.vue'
 import BlockGroupFilters from './BlockGroupFilters.vue'
 
@@ -113,7 +113,7 @@ export default {
             const selectedId = selectedBlockArray.value.map((b) => b.id)
             const addedBlocks = res.blocks.filter((item) => selectedId.includes(item.id))
 
-            useResource().updateCanvasDependencies(addedBlocks)
+            useMaterial().updateCanvasDependencies(addedBlocks)
 
             isRefresh.value = true
             state.searchValue = ''

packages/plugins/materials/src/block/BlockList.vue

@@ -17,7 +17,7 @@
 
 <script lang="jsx">
 import { computed, inject, reactive, ref } from 'vue'
-import { useBlock, useResource, useModal, useApp, useCanvas } from '@opentiny/tiny-engine-controller'
+import { useBlock, useMaterial, useModal, useApp, useCanvas } from '@opentiny/tiny-engine-controller'
 import { PluginBlockList } from '@opentiny/tiny-engine-common'
 import { requestUpdateGroup, fetchGroupBlocksById } from './http'
 import { setBlockPanelVisible, setBlockVersionPanelVisible } from './js/usePanel'
@@ -49,7 +49,7 @@ export default {
   },
   emits: ['check', 'close'],
   setup(props, { emit }) {
-    const { generateNode, registerBlock } = useResource()
+    const { generateNode, registerBlock } = useMaterial()
     const { isDefaultGroupId, isAllGroupId, selectedBlock, selectedGroup, isRefresh, getBlockAssetsByVersion } =
       useBlock()
     const blockRef = ref(null)

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

@@ -12,7 +12,7 @@
 import { onMounted, reactive, watch, provide, computed } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
-import { useApp, useBlock, useModal, useResource } from '@opentiny/tiny-engine-controller'
+import { useApp, useBlock, useMaterial, useModal } from '@opentiny/tiny-engine-controller'
 import BlockGroup from './BlockGroup.vue'
 import BlockList from './BlockList.vue'
 import { fetchGroups, fetchGroupBlocksById, fetchGroupBlocksByIds } from './http'
@@ -26,7 +26,7 @@ export default {
   },
   setup() {
     const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
-    const { resState } = useResource()
+    const { materialState } = useMaterial()
     const { message } = useModal()
     const appId = useApp().appInfoState.selectedId
 
@@ -67,14 +67,14 @@ export default {
       // 设计器默认区块分组的数据从bundle.json取，其他用户自定义分组调接口向数据库查询
       const groupId = selectedGroup.value.groupId
       if (isDefaultGroupId(groupId)) {
-        const blocks = resState.blocks[0]?.children || []
+        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 = resState.blocks[0]?.children || []
+        const innerBlocks = materialState.blocks[0]?.children || []
         innerBlocks.forEach((item) => {
           item.isDefaultGroup = true
           item.groupName = '设计器默认区块分组'

packages/plugins/materials/src/component/Main.vue

@@ -34,7 +34,7 @@ import { inject, onMounted, reactive, ref } from 'vue'
 import { Collapse, CollapseItem, Search } from '@opentiny/vue'
 import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import { iconSearch } from '@opentiny/vue-icon'
-import { useResource, useCanvas } from '@opentiny/tiny-engine-controller'
+import { useMaterial, useCanvas } from '@opentiny/tiny-engine-controller'
 import { CanvasDragItem } from '@opentiny/tiny-engine-canvas'
 
 export default {
@@ -49,10 +49,10 @@ export default {
   setup() {
     const COMPONENT_PANEL_COLUMNS = '1fr 1fr 1fr'
     const SHORTCUT_PANEL_COLUMNS = '1fr 1fr 1fr 1fr 1fr 1fr'
-    const { generateNode, resState } = useResource()
+    const { generateNode, materialState } = useMaterial()
     const gridTemplateColumns = ref(COMPONENT_PANEL_COLUMNS)
     const panelState = inject('panelState', {})
-    const { components } = resState
+    const { components } = materialState
 
     const fetchComponents = (components, name) => {
       if (!name) {