diff --git a/packages/canvas/DesignCanvas/src/api/useCanvas.js b/packages/canvas/DesignCanvas/src/api/useCanvas.js
index 89e30a72c..7c7f71a88 100644
--- a/packages/canvas/DesignCanvas/src/api/useCanvas.js
+++ b/packages/canvas/DesignCanvas/src/api/useCanvas.js
@@ -261,57 +261,62 @@ const operationTypeMap = {
   insert: (operation) => {
     const { parentId, newNodeData, position, referTargetNodeId } = operation
     const parentNode = getNode(parentId) || pageState.pageSchema
-
+    // 1. 确认是否存在 ParentNode
     if (!parentNode) {
       return {}
     }
 
     parentNode.children = parentNode.children || []
 
+    // 2. 确保 newNodeData 有唯一 ID, 如果没有，则生成新 ID
     if (!newNodeData.id) {
       newNodeData.id = utils.guid()
     }
 
+    // 3. 查找参考节点
+    let referenceNode = null
     if (referTargetNodeId) {
-      const referenceNode = getNode(referTargetNodeId)
-      let index = parentNode.children.indexOf(referenceNode)
-
-      if (index === -1) {
-        index = 0
-      }
-
-      index = position === 'before' ? index : index + 1
-
-      parentNode.children.splice(index, 0, newNodeData)
-
-      setNode(newNodeData, parentNode)
-
-      // 递归构建 nodeMap
-      if (Array.isArray(newNodeData?.children) && newNodeData.children.length) {
-        const newNode = getNode(newNodeData.id)
-        generateNodesMap(newNodeData.children, newNode)
+      referenceNode = getNode(referTargetNodeId)
+      if (!referenceNode) {
+        throw new Error(`Reference node with ID ${referTargetNodeId} not found`)
       }
+    }
 
-      return {
-        current: newNodeData,
-        previous: undefined
-      }
+    // 4. 根据position参数选择插入位置
+    let index = parentNode.children.indexOf(referenceNode)
+    if (index === -1 && referTargetNodeId) {
+      index = parentNode.children.length
     }
 
-    if (position === 'before') {
-      parentNode.children.unshift(newNodeData)
-    } else {
-      parentNode.children.push(newNodeData)
+    // 5. 插入节点的逻辑
+    const childrenNode = toRaw(referenceNode)
+    switch (position) {
+      case 'before':
+        parentNode.children.unshift(newNodeData)
+        break
+      case 'out':
+        if (childrenNode) {
+          newNodeData.children = Array.isArray(childrenNode) ? [...childrenNode] : [childrenNode]
+          parentNode.children.splice(index, 1, newNodeData)
+        }
+        break
+      case 'bottom':
+        parentNode.children.splice(index + 1, 0, newNodeData)
+        break
+      default:
+        parentNode.children.push(newNodeData)
+        break
     }
 
     setNode(newNodeData, parentNode)
 
-    // 递归构建 nodeMap
-    if (Array.isArray(newNodeData?.children) && newNodeData.children.length) {
+    // 6. 如果新节点有子节点，递归构建 nodeMap
+    if (Array.isArray(newNodeData?.children) && newNodeData.children.length > 0) {
       const newNode = getNode(newNodeData.id)
       generateNodesMap(newNodeData.children, newNode)
     }
 
+    // 7. 返回插入结果
     return {
       current: newNodeData,
       previous: undefined
@@ -343,7 +348,7 @@ const operationTypeMap = {
         const nodeItem = getNode(item.id)
         nodesMap.value.delete(item.id)
 
-        if (Array.isArray(nodeItem.children) && nodeItem.children.length) {
+        if (Array.isArray(nodeItem?.children) && nodeItem?.children.length) {
           children.push(...nodeItem.children)
         }
       })
diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue
index 13c6b96c2..1b02a561d 100644
--- a/packages/canvas/container/src/CanvasContainer.vue
+++ b/packages/canvas/container/src/CanvasContainer.vue
@@ -1,14 +1,17 @@
 <template>
-  <canvas-action
-    :hoverState="hoverState"
-    :inactiveHoverState="inactiveHoverState"
-    :selectState="selectState"
-    :lineState="lineState"
-    :windowGetClickEventTarget="target"
-    :resize="canvasState.type === 'absolute'"
-    @select-slot="selectSlot"
-    @setting="settingModel"
-  ></canvas-action>
+  <div v-for="multiState in multiSelectedStates" :key="multiState.id">
+    <canvas-action
+      :hoverState="hoverState"
+      :inactiveHoverState="inactiveHoverState"
+      :selectState="multiStateLength > 1 ? multiState : selectState"
+      :lineState="lineState"
+      :windowGetClickEventTarget="target"
+      :resize="canvasState.type === 'absolute'"
+      :multiStateLength="multiStateLength"
+      @select-slot="selectSlot"
+      @setting="settingModel"
+    ></canvas-action>
+  </div>
   <canvas-router-jumper :hoverState="hoverState" :inactiveHoverState="inactiveHoverState"></canvas-router-jumper>
   <canvas-divider :selectState="selectState"></canvas-divider>
   <canvas-resize-border :iframe="iframe"></canvas-resize-border>
@@ -28,6 +31,15 @@
   <div v-if="insertPosition" ref="insertPanel" class="insert-panel">
     <component :is="materialsPanel" :shortcut="insertPosition" @close="insertPosition = false"></component>
   </div>
+  <!-- 【添加父级容器】快捷选择物料面板 -->
+  <div v-if="insertContainer" ref="containerPanel" class="insert-panel">
+    <component
+      :is="materialsPanel"
+      :shortcut="insertContainer"
+      groupName="layout"
+      @close="insertContainer = false"
+    ></component>
+  </div>
 </template>
 
 <script>
@@ -35,7 +47,7 @@ import { onMounted, ref, computed, onUnmounted, watch, watchEffect } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
 import { useTranslate, useCanvas, useMessage, useResource } from '@opentiny/tiny-engine-meta-register'
 import { NODE_UID, NODE_LOOP, DESIGN_MODE } from '../../common'
-import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
+import { registerHotkeyEvent, removeHotkeyEvent, multiSelectedStates } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
 import CanvasAction from './components/CanvasAction.vue'
 import CanvasRouterJumper from './components/CanvasRouterJumper.vue'
@@ -60,7 +72,10 @@ import {
   clearLineState,
   querySelectById,
   getCurrent,
-  canvasApi
+  canvasApi,
+  getMultiState,
+  setMultiState,
+  handleMultiState
 } from './container'
 
 export default {
@@ -81,7 +96,12 @@ export default {
     let target = ref(null)
     const srcAttrName = computed(() => (props.canvasSrc ? 'src' : 'srcdoc'))
 
-    const setCurrentNode = async (event) => {
+    const containerPanel = ref(null)
+    const insertContainer = ref(false)
+
+    const multiStateLength = computed(() => multiSelectedStates.value.length)
+
+    const setCurrentNode = async (event, doc = null) => {
       const { clientX, clientY } = event
       const element = getElement(event.target)
       closeMenu()
@@ -91,6 +111,9 @@ export default {
         const currentElement = querySelectById(getCurrent().schema?.id)
 
         if (!currentElement?.contains(element) || event.button === 0) {
+          const selectedState = getMultiState(element, doc)
+          setMultiState(multiSelectedStates, selectedState)
+
           const loopId = element.getAttribute(NODE_LOOP)
           if (loopId) {
             node = await selectNode(element.getAttribute(NODE_UID), `loop-id=${loopId}`)
@@ -172,8 +195,23 @@ export default {
               return
             }
 
+            const element = getElement(event.target)
+            if (!element) {
+              return
+            }
+
+            // 多选组合键触发
+            if (element) {
+              const selectedState = getMultiState(element, doc)
+              if (event.ctrlKey && event.button === 0) {
+                handleMultiState(multiSelectedStates, selectedState)
+                return
+              }
+            }
+
             insertPosition.value = false
-            setCurrentNode(event)
+            insertContainer.value = false
+            setCurrentNode(event, doc)
             target.value = event.target
           })
         })
@@ -188,6 +226,7 @@ export default {
           }
 
           insertPosition.value = false
+          insertContainer.value = false
           setCurrentNode(event)
           target.value = event.target
         })
@@ -214,7 +253,7 @@ export default {
           e.preventDefault()
         }
 
-        registerHostkeyEvent(doc)
+        registerHotkeyEvent(doc)
 
         win.addEventListener('scroll', updateRect, true)
       }
@@ -237,6 +276,7 @@ export default {
       // 以下是外部window需要监听的事件
       window.addEventListener('mousedown', (e) => {
         insertPosition.value = insertPanel.value?.contains(e.target)
+        insertContainer.value = containerPanel.value?.contains(e.target)
         target.value = e.target
       })
 
@@ -249,6 +289,10 @@ export default {
     }
 
     const insertComponent = (position) => {
+      if (position === 'out') {
+        insertContainer.value = position
+        return
+      }
       insertPosition.value = position
     }
 
@@ -256,10 +300,20 @@ export default {
       hoverState.slot = slotName
     }
 
+    watch(
+      () => multiStateLength.value,
+      (newVal) => {
+        if (newVal > 1) {
+          // 清空属性面板
+          selectNode(null)
+        }
+      }
+    )
+
     onMounted(() => run(iframe))
     onUnmounted(() => {
       if (iframe.value?.contentDocument) {
-        removeHostkeyEvent(iframe.value.contentDocument)
+        removeHotkeyEvent(iframe.value.contentDocument)
       }
       window.removeEventListener('message', updateI18n, false)
     })
@@ -274,15 +328,19 @@ export default {
       inactiveHoverState,
       selectState,
       lineState,
+      multiSelectedStates,
+      multiStateLength,
       removeNodeById,
       selectSlot,
       canvasState,
       insertComponent,
       insertPanel,
+      containerPanel,
       settingModel,
       target,
       showSettingModel,
       insertPosition,
+      insertContainer,
       loading,
       srcAttrName
     }
diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
index 3b01e2854..2aaa9783a 100644
--- a/packages/canvas/container/src/components/CanvasAction.vue
+++ b/packages/canvas/container/src/components/CanvasAction.vue
@@ -9,7 +9,7 @@
       width: selectState.width + 'px'
     }"
   >
-    <div v-if="!resize" ref="labelRef" class="corner-mark-left" :style="labelStyle">
+    <div v-if="showQuickAction" ref="labelRef" class="corner-mark-left" :style="labelStyle">
       <span>{{ selectState.componentName }}</span>
       <TinyPopover
         v-model="showPopover"
@@ -28,42 +28,42 @@
     <!-- 绝对定位画布时调节元素大小 -->
     <template v-else>
       <div
-        class="drag-resize resize-top"
+        :class="[showAction && 'drag-resize', 'resize-top']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'center', 'start')"
       ></div>
       <div
-        class="drag-resize resize-bottom"
+        :class="[showAction && 'drag-resize', 'resize-bottom']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'center', 'end')"
       ></div>
       <div
-        class="drag-resize resize-left"
+        :class="[showAction && 'drag-resize', 'resize-left']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'start', 'center')"
       ></div>
       <div
-        class="drag-resize resize-right"
+        :class="[showAction && 'drag-resize', 'resize-right']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'end', 'center')"
       ></div>
       <div
-        class="drag-resize resize-top-left"
+        :class="[showAction && 'drag-resize', 'resize-left']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'start', 'start')"
       ></div>
       <div
-        class="drag-resize resize-top-right"
+        :class="[showAction && 'drag-resize', 'resize-top-right']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'end', 'start')"
       ></div>
       <div
-        class="drag-resize resize-bottom-left"
+        :class="[showAction && 'drag-resize', 'resize-bottom-left']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'start', 'end')"
       ></div>
       <div
-        class="drag-resize resize-bottom-right"
+        :class="[showAction && 'drag-resize', 'resize-bottom-right']"
         draggable="true"
         @mousedown.stop="onMousedown($event, 'end', 'end')"
       ></div>
@@ -181,6 +181,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    multiStateLength: {
+      type: Number,
+      default: () => 0
+    },
     resize: {
       type: Boolean,
       default: false
@@ -236,12 +240,20 @@ export default {
       updateRect()
     }
 
+    const isSingleNode = computed(() => {
+      return props.multiStateLength < 2
+    })
+
     const showAction = computed(() => {
       const { schema, parent } = getCurrent()
       if (schema?.props?.['data-id'] === 'root-container') {
         return false
       }
-      return !props.resize && parent && parent?.type !== 'JSSlot'
+      return !props.resize && parent && parent?.type !== 'JSSlot' && isSingleNode.value
+    })
+
+    const showQuickAction = computed(() => {
+      return !props.resize && isSingleNode.value
     })
 
     const showToParent = computed(() => getCurrent().parent !== useCanvas().getSchema())
@@ -405,6 +417,10 @@ export default {
         verticalValue: -LABEL_HEIGHT
       })
 
+      if (!doc) {
+        return {}
+      }
+
       // 是否将操作栏放置到底部，判断当前选中组件底部与页面底部的距离。
       const isOptionAtBottom = canvasHeight - top - height >= OPTION_BAR_HEIGHT
       const optionAlign = new Align({
@@ -506,6 +522,7 @@ export default {
       optionRef,
       fixStyle,
       showAction,
+      showQuickAction,
       showPopover,
       showToParent,
       activeSetting,
diff --git a/packages/canvas/container/src/components/CanvasMenu.vue b/packages/canvas/container/src/components/CanvasMenu.vue
index 6a3d9369f..8b695ffee 100644
--- a/packages/canvas/container/src/components/CanvasMenu.vue
+++ b/packages/canvas/container/src/components/CanvasMenu.vue
@@ -106,7 +106,8 @@ export default {
         name: '添加父级',
         items: [
           { name: '文字提示', code: 'wrap', value: 'TinyTooltip' },
-          { name: '弹出框', code: 'wrap', value: 'TinyPopover' }
+          { name: '弹出框', code: 'wrap', value: 'TinyPopover' },
+          { name: '容器', code: 'insert', value: 'out' }
         ],
         code: 'addParent'
       },
diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js
index 3c1b0a79a..f412d94fc 100644
--- a/packages/canvas/container/src/container.js
+++ b/packages/canvas/container/src/container.js
@@ -30,7 +30,8 @@ export const POSITION = Object.freeze({
   BOTTOM: 'bottom',
   LEFT: 'left',
   RIGHT: 'right',
-  IN: 'in'
+  IN: 'in',
+  OUT: 'out'
 })
 
 const initialDragState = {
@@ -122,6 +123,63 @@ export const lineState = reactive({
   ...initialLineState
 })
 
+// 获取多选节点
+export const getMultiState = (element, doc) => {
+  const { top, left, width, height } = element.getBoundingClientRect()
+  const nodeTag = element?.getAttribute(NODE_TAG)
+  const nodeId = element?.getAttribute(NODE_UID)
+
+  const { node, parent } = useCanvas().getNodeWithParentById(nodeId) || {}
+
+  if (node && parent) {
+    return {
+      id: nodeId,
+      componentName: nodeTag,
+      doc,
+      top,
+      left,
+      width,
+      height,
+      schema: toRaw(node),
+      parent: toRaw(parent)
+    }
+  }
+}
+
+// 设置多选节点
+export function setMultiState(multiSelectedStates, node, append = false) {
+  if (!node || typeof node !== 'object') {
+    multiSelectedStates.value = []
+    return
+  }
+
+  if (append) {
+    const nodeIds = new Set(multiSelectedStates.value.map((state) => state.id))
+    if (!nodeIds.has(node.id)) {
+      multiSelectedStates.value = [...toRaw(multiSelectedStates.value), node]
+    }
+  } else {
+    if (Array.isArray(node)) {
+      multiSelectedStates.value = node
+    } else {
+      multiSelectedStates.value = [node]
+    }
+  }
+}
+
+// 处理多选节点
+export function handleMultiState(multiSelectedStates, selectState) {
+  const nodeId = selectState?.id
+  const isExistNode = multiSelectedStates.value.map((state) => state.id).includes(nodeId)
+
+  if (nodeId && isExistNode) {
+    const exList = multiSelectedStates.value.filter((state) => state.id !== nodeId)
+    setMultiState(multiSelectedStates, exList)
+  } else {
+    setMultiState(multiSelectedStates, selectState, true)
+  }
+}
+
 export const clearHover = () => {
   Object.assign(hoverState, initialRectState, { slot: null })
   Object.assign(inactiveHoverState, initialRectState, { slot: null })
@@ -271,7 +329,7 @@ const getRect = (element) => {
   return element.getBoundingClientRect()
 }
 
-const inserAfter = ({ parent, node, data }) => {
+const insertAfter = ({ parent, node, data }) => {
   if (!data.id) {
     data.id = utils.guid()
   }
@@ -319,6 +377,21 @@ export const removeNode = (id) => {
   })
 }
 
+// 添加外部容器
+const insertContainer = ({ parent, node, data }) => {
+  if (!data.id) {
+    data.id = utils.guid()
+  }
+
+  useCanvas().operateNode({
+    type: 'insert',
+    parentId: parent.id,
+    newNodeData: data,
+    position: POSITION.OUT,
+    referTargetNodeId: node.id
+  })
+}
+
 export const removeNodeById = (id) => {
   if (!id) {
     return
@@ -735,11 +808,14 @@ export const insertNode = (node, position = POSITION.IN, select = true) => {
         break
       case POSITION.BOTTOM:
       case POSITION.RIGHT:
-        inserAfter(node)
+        insertAfter(node)
         break
       case POSITION.IN:
         insertInner(node)
         break
+      case POSITION.OUT:
+        insertContainer(node)
+        break
       default:
         insertInner(node)
         break
@@ -764,7 +840,7 @@ export const copyNode = (id) => {
 
   const { node, parent } = useCanvas().getNodeWithParentById(id)
 
-  inserAfter({ parent, node, data: copyObject(node) })
+  insertAfter({ parent, node, data: copyObject(node) })
   getController().addHistory()
 }
 
diff --git a/packages/canvas/container/src/keyboard.js b/packages/canvas/container/src/keyboard.js
index 681086011..f2985b0c2 100644
--- a/packages/canvas/container/src/keyboard.js
+++ b/packages/canvas/container/src/keyboard.js
@@ -10,21 +10,13 @@
  *
  */
 
-import {
-  getCurrent,
-  insertNode,
-  selectNode,
-  POSITION,
-  removeNodeById,
-  allowInsert,
-  getConfigure,
-  clearHover,
-  hoverState
-} from './container'
-import { useHistory, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { getCurrent, insertNode, selectNode, POSITION, removeNodeById, allowInsert, getConfigure } from './container'
+import { useHistory, useCanvas, getMetaApi, META_APP } from '@opentiny/tiny-engine-meta-register'
 import { copyObject } from '../../common'
 import { getClipboardSchema, setClipboardSchema } from './utils'
+import { ref, toRaw } from 'vue'
 
+const KEY_S = 83
 const KEY_Y = 89
 const KEY_Z = 90
 const KEY_RIGHT = 39
@@ -33,6 +25,9 @@ const KEY_UP = 38
 const KEY_DOWN = 40
 const KEY_DEL = 46
 
+//  多选节点
+const multiSelectedStates = ref([])
+
 function handlerLeft({ parent }) {
   selectNode(parent?.id)
 }
@@ -41,18 +36,19 @@ function handlerRight({ schema }) {
   id && selectNode(id)
 }
 function handlerUp({ index, parent }) {
-  const id = (parent.children[index - 1] || parent)?.id
+  const id = (parent?.children[index - 1] || parent)?.id
   id && selectNode(id)
 }
 function handlerDown({ index, parent }) {
-  const id = parent.children[index + 1]?.id
+  const id = parent?.children[index + 1]?.id
   id && selectNode(id)
 }
-function handlerDelete({ schema }) {
-  if (hoverState.id === schema.id) {
-    clearHover()
-  }
-  removeNodeById(schema.id)
+function handlerDelete() {
+  multiSelectedStates.value.forEach(({ id: schemaId }) => {
+    removeNodeById(schemaId)
+  })
+
+  multiSelectedStates.value.length = 0
 }
 
 const handlerArrow = (keyCode) => {
@@ -77,7 +73,14 @@ const handlerArrow = (keyCode) => {
   }
 }
 
-const handlerCtrl = (keyCode) => {
+const handleSaveEvent = (event) => {
+  const { openCommon } = getMetaApi(META_APP.Save)
+  event.preventDefault()
+  openCommon()
+}
+
+const handlerCtrl = (event) => {
+  const keyCode = event.keyCode
   switch (keyCode) {
     case KEY_Y:
       useHistory().forward()
@@ -85,6 +88,9 @@ const handlerCtrl = (keyCode) => {
     case KEY_Z:
       useHistory().back()
       break
+    case KEY_S:
+      handleSaveEvent(event)
+      break
     default:
       break
   }
@@ -99,7 +105,24 @@ const handleClipboardCut = (event, schema) => {
 const handleClipboardPaste = (node, schema, parent) => {
   if (node?.componentName && schema?.componentName && allowInsert(getConfigure(schema.componentName), node)) {
     insertNode({ parent, node: schema, data: { ...node } }, POSITION.IN)
+  } else {
+    insertNode({ parent, node: schema, data: { ...node } }, POSITION.BOTTOM)
+  }
+}
+
+const handleMultiNodesPaste = (node, schema, parent) => {
+  if (multiSelectedStates.value.length === 1) {
+    handleClipboardPaste(node, schema, parent)
+    return
   }
+
+  const selectedStates = multiSelectedStates.value.map(({ schema, parent }) => {
+    return { node: copyObject(schema), schema: toRaw(schema), parent: toRaw(parent) }
+  })
+
+  selectedStates.forEach(({ node, schema, parent }) => {
+    handleClipboardPaste(node, schema, parent)
+  })
 }
 
 const handlerClipboardEvent = (event) => {
@@ -110,7 +133,7 @@ const handlerClipboardEvent = (event) => {
       setClipboardSchema(event, copyObject(schema))
       break
     case 'paste':
-      handleClipboardPaste(node, schema, parent)
+      handleMultiNodesPaste(node, schema, parent)
       break
     case 'cut':
       handleClipboardCut(event, schema)
@@ -122,21 +145,21 @@ const handlerClipboardEvent = (event) => {
 
 const keyboardHandler = (event) => {
   if (event.ctrlKey) {
-    getCurrent()?.schema && handlerCtrl(event.keyCode)
+    handlerCtrl(event)
   }
 
   handlerArrow(event.keyCode)
 }
 
-const removeHostkeyEvent = (dom) => {
+const removeHotkeyEvent = (dom) => {
   dom.removeEventListener('keydown', keyboardHandler)
   dom.removeEventListener('copy', handlerClipboardEvent)
   dom.removeEventListener('cut', handlerClipboardEvent)
   dom.removeEventListener('paste', handlerClipboardEvent)
 }
 
-const registerHostkeyEvent = (dom) => {
-  removeHostkeyEvent(dom)
+const registerHotkeyEvent = (dom) => {
+  removeHotkeyEvent(dom)
 
   dom.addEventListener('keydown', keyboardHandler)
   dom.addEventListener('copy', handlerClipboardEvent)
@@ -144,4 +167,4 @@ const registerHostkeyEvent = (dom) => {
   dom.addEventListener('paste', handlerClipboardEvent)
 }
 
-export { registerHostkeyEvent, removeHostkeyEvent }
+export { registerHotkeyEvent, removeHotkeyEvent, multiSelectedStates }
diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js
index e9aad8f52..92e12e2d3 100644
--- a/packages/plugins/materials/src/composable/useMaterial.js
+++ b/packages/plugins/materials/src/composable/useMaterial.js
@@ -483,6 +483,17 @@ const initMaterial = ({ isInit = true, appData = {} } = {}) => {
   }
 }
 
+/**
+ * 根据组名获取指定分组组件
+ * @param {Array} components 所有组件
+ * @param {String} groupName 组件分组名
+ * @returns
+ */
+const getComponents = (components, groupName) => {
+  if (!Array.isArray(components)) return []
+  return components.filter((item) => item.group === groupName)
+}
+
 /**
  * 增加区块缓存
  * @param {String} id 区块 id，也就是 label 字段
@@ -511,6 +522,7 @@ export default function () {
     getBlockByName,
     getBlockCompileRes,
     addBlockResources,
-    updateBlockCompileCache
+    updateBlockCompileCache,
+    getComponents
   }
 }
diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
index a4b0fb13b..6da5a43b4 100644
--- a/packages/plugins/materials/src/meta/component/src/Main.vue
+++ b/packages/plugins/materials/src/meta/component/src/Main.vue
@@ -54,7 +54,7 @@ export default {
   setup() {
     const COMPONENT_PANEL_COLUMNS = '1fr 1fr 1fr'
     const SHORTCUT_PANEL_COLUMNS = '1fr 1fr 1fr 1fr 1fr 1fr'
-    const { generateNode, materialState } = useMaterial()
+    const { generateNode, materialState, getComponents } = useMaterial()
     const gridTemplateColumns = ref(COMPONENT_PANEL_COLUMNS)
     const panelState = inject('panelState', {})
     const { components } = materialState
@@ -88,8 +88,17 @@ export default {
       return result
     }
 
+    const initComponents = () => {
+      const groupName = panelState.materialGroup
+      if (groupName) {
+        return getComponents(components, groupName)
+      }
+
+      return components
+    }
+
     const state = reactive({
-      components,
+      components: initComponents(),
       activeName: [...Array(components.length).keys()],
       searchValue: ''
     })
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
index 61a5bdcd5..f4fdbdced 100644
--- a/packages/plugins/materials/src/meta/layout/src/Main.vue
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -40,6 +40,10 @@ export default {
     registryData: {
       type: Object,
       default: () => ({})
+    },
+    groupName: {
+      type: String,
+      default: ''
     }
   },
   emits: ['close', 'fix-panel'],
@@ -48,6 +52,7 @@ export default {
       isShortcutPanel: props.shortcut,
       isBlockGroupPanel: false,
       isBlockList: false,
+      materialGroup: props.groupName,
       emitEvent: emit
     })
     provide('panelState', panelState) // 使用provide传给子组件,后续可能会有调整，先暂定