feat: add refresh material api (#1320)

Author: chilingling

packages/plugins/materials/src/composable/useMaterial.ts

@@ -285,7 +285,9 @@ const addComponentSnippets = (componentSnippets: Snippet[] | undefined, snippets
     if (snippetsMap.has(snippetGroup.group)) {
       snippetsMap.get(snippetGroup.group)!.children.push(...snippetGroup.children)
     } else {
-      snippetsData.push(snippetGroup)
+      const snippetGroupClone = deepClone(snippetGroup)
+      snippetsData.push(snippetGroupClone)
+      snippetsMap.set(snippetGroup.group, snippetGroupClone)
     }
   })
 
@@ -500,6 +502,12 @@ const initMaterial = ({ isInit = true, appData = {} }: InitMaterialOptions = {})
   }
 }
 
+const refreshMaterial = async () => {
+  clearMaterials()
+  initMaterial()
+  await fetchMaterial()
+}
+
 /**
  * 根据组名获取指定分组组件
  * @param components 所有组件
@@ -540,6 +548,7 @@ export default function () {
     getBlockCompileRes,
     addBlockResources,
     updateBlockCompileCache,
-    getComponentsByGroup
+    getComponentsByGroup,
+    refreshMaterial
   }
 }

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

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { inject, onMounted, reactive, ref, watchEffect } from 'vue'
+import { inject, onMounted, reactive, ref, watch, watchEffect } from 'vue'
 import { Collapse, CollapseItem, Search } from '@opentiny/vue'
 import { SearchEmpty, CanvasDragItem } from '@opentiny/tiny-engine-common'
 import i18n from '@opentiny/tiny-engine-common/js/i18n'
@@ -57,7 +57,6 @@ export default {
     const { generateNode, materialState, getComponentsByGroup } = useMaterial()
     const gridTemplateColumns = ref(COMPONENT_PANEL_COLUMNS)
     const panelState = inject('panelState', {})
-    const { components } = materialState
     const { locale } = i18n.global
 
     const fetchComponents = (components, name) => {
@@ -91,10 +90,10 @@ export default {
     const initComponents = () => {
       const groupName = panelState.materialGroup
       if (groupName) {
-        return getComponentsByGroup(components, groupName)
+        return getComponentsByGroup(materialState.components, groupName)
       }
 
-      return components
+      return materialState.components
     }
 
     const state = reactive({
@@ -104,13 +103,23 @@ export default {
     })
 
     watchEffect(() => {
-      state.activeName = [...Array(components.length).keys()]
+      state.activeName = [...Array(materialState.components.length).keys()]
     })
 
     const change = (value) => {
-      state.components = fetchComponents(components, value)
+      state.components = fetchComponents(materialState.components, value)
     }
 
+    watch(
+      () => materialState.components,
+      (value) => {
+        state.components = fetchComponents(value, state.searchValue)
+      },
+      {
+        deep: true
+      }
+    )
+
     const componentClick = (data) => {
       const { isShortcutPanel, emitEvent } = panelState
       const { addComponent } = useCanvas().canvasApi.value