feat: multi-node create block

Author: SonyLeo

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { ref, watch, onUnmounted, onMounted } from 'vue'
+import { ref, watch, onUnmounted, onMounted, computed } from 'vue'
 import {
   useProperties,
   useCanvas,
@@ -43,6 +43,7 @@ import {
 import { constants } from '@opentiny/tiny-engine-utils'
 import * as ast from '@opentiny/tiny-engine-common/js/ast'
 import { initCanvas } from '../../init-canvas/init-canvas'
+import { useMultiSelect } from '../../container/src/composables/useMultiSelect'
 import { getImportMapData } from './importMap'
 import meta from '../meta'
 
@@ -152,6 +153,9 @@ export default {
       }
     )
 
+    const { multiSelectedStates } = useMultiSelect()
+    const multiStateLength = computed(() => multiSelectedStates.value.length)
+
     const nodeSelected = (node, parent, type, id) => {
       const { leftPanelFixed, rightPanelFixed } = getFixedPanelsStatus()
 
@@ -176,7 +180,9 @@ export default {
 
       // 如果选中的节点是画布，就设置成默认选中最外层schema
       useProperties().getProps(schemaItem || pageSchema, parent)
-      useCanvas().setCurrentSchema(schemaItem || pageSchema)
+      const multiSchemas = multiSelectedStates.value.map(({ schema }) => schema)
+      const currentSchema = multiStateLength.value > 1 ? multiSchemas : schemaItem || pageSchema
+      useCanvas().setCurrentSchema(currentSchema)
       footData.value = getNodePath(schemaItem?.id)
       toolbars.visiblePopover = false
     }

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

@@ -168,6 +168,7 @@ export default {
     const { SaveNewBlock } = getMergeMeta('engine.plugins.blockmanage')?.components || {}
     if (SaveNewBlock) {
       menus.value.push({ name: '新建区块', code: 'createBlock' })
+      multiSelectMenus.value.push({ name: '新建区块', code: 'createBlock' })
     }
 
     menus.value.unshift({

packages/plugins/block/src/composable/useBlock.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { ref, reactive, readonly } from 'vue'
+import { ref, reactive, readonly, toRaw } from 'vue'
 import { hyphenate } from '@vue/shared'
 import { extend, copyArray } from '@opentiny/vue-renderless/common/object'
 import { format } from '@opentiny/vue-renderless/common/date'
@@ -307,9 +307,23 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => {
 
 const createBlock = ({ name_cn, label, path, categories }) => {
   const { pageState } = useCanvas()
-  const schema = extend(true, {}, pageState.currentSchema)
-  // 选中 body 节点创建区块时需传递子节点数据
-  const children = schema.componentName === NODE_TYPE_PAGE ? schema.children : [schema]
+  const rawSchema = toRaw(pageState.currentSchema)
+
+  let processedSchema = []
+  if (!rawSchema) {
+    processedSchema = []
+  } else if (Array.isArray(rawSchema)) {
+    processedSchema = rawSchema.map((schemaItem) => extend(true, {}, schemaItem))
+  } else {
+    processedSchema = extend(true, {}, rawSchema)
+  }
+
+  // 判断 node 类型 以及 schema 类型
+  // 选中 body 节点 创建区块时需传递子节点数据
+  const isPageNode = processedSchema.componentName === NODE_TYPE_PAGE
+  const hasMultiSchema = Array.isArray(processedSchema) && processedSchema.length
+
+  const children = isPageNode ? processedSchema.children : hasMultiSchema ? processedSchema : [processedSchema]
 
   // 过滤只有新区块内使用到的数据
   const { getLangs } = useTranslate()