From a2e0c3fa40a3fdd0901d3cd89b25946985593f6b Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Tue, 10 Jun 2025 16:59:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 BulkCopy 组件用于批量复制操作
- 在 Model2DEditor 中集成批量复制功能
- 实现了行数、列数、行间距、列间距等配置选项
- 添加了批量复制的逻辑，包括复制对象的坐标计算
---
 src/editor/BulkCopy.vue                       | 127 ++++++++++++++++++++++++
 src/editor/Model2DEditor.vue                  |  61 +++++++++++-
 src/editor/widgets/property/PropertyPanel.vue | 136 +++++++++++++-------------
 3 files changed, 251 insertions(+), 73 deletions(-)
 create mode 100644 src/editor/BulkCopy.vue

diff --git a/src/editor/BulkCopy.vue b/src/editor/BulkCopy.vue
new file mode 100644
index 0000000..2064ca2
--- /dev/null
+++ b/src/editor/BulkCopy.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import DataForm from "@/components/data-form/DataForm.vue";
+import type { FormField } from "@/components/data-form/DataFormTypes.ts";
+
+defineOptions({
+    name: 'BulkCopy',
+});
+
+interface BulkCopyConfig {
+    /** 行数 */
+    numberOfRows?: number;
+    /** 列数 */
+    numberOfColumns?: number;
+    /** 行间距 */
+    rowSpace?: number;
+    /** 列间距 */
+    columnSpacing?: number;
+    /** 双排 */
+    doubleRow?: boolean;
+}
+
+// 定义 Props 类型
+interface BulkCopyProps {
+    config: BulkCopyConfig;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<BulkCopyProps>(), {});
+
+// 定义 State 类型
+interface BulkCopyState {
+}
+
+// state 属性
+const state = reactive<BulkCopyState>({});
+
+// 定义 Data 类型
+interface BulkCopyData {
+    formFields?: Array<FormField>;
+}
+
+// 内部数据
+const data: BulkCopyData = {
+    formFields: [
+        {
+            dataPath: 'numberOfRows', label: '行数', input: 'InputNumber',
+            inputProps: {
+                placeholder: '请输入',
+                controlsPosition: 'right',
+                min: 1,
+                precision: 0,
+            },
+        },
+        {
+            dataPath: 'numberOfColumns', label: '列数', input: 'InputNumber',
+            inputProps: {
+                placeholder: '请输入',
+                controlsPosition: 'right',
+                min: 1,
+                precision: 0,
+            },
+        },
+        {
+            dataPath: 'rowSpace', label: '行间距', input: 'InputNumber',
+            inputProps: {
+                placeholder: '请输入',
+                controlsPosition: 'right',
+                min: 0,
+                // precision:
+            },
+        },
+        {
+            dataPath: 'columnSpacing', label: '列间距', input: 'InputNumber',
+            inputProps: {
+                placeholder: '请输入',
+                controlsPosition: 'right',
+                min: 0,
+                // precision:
+            },
+        },
+        {
+            dataPath: 'doubleRow', label: '单双排', input: 'Switch',
+            inputProps: {
+                // trueValue: true,
+                // falseValue: false,
+                inlinePrompt: true,
+                inactiveText: "单排",
+                activeText: "双排",
+            },
+        },
+    ],
+};
+
+interface BulkCopyExpose {
+    state: BulkCopyState;
+    data: BulkCopyData;
+}
+
+const expose: BulkCopyExpose = {
+    state,
+    data,
+};
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    BulkCopyConfig,
+    BulkCopyProps,
+    BulkCopyState,
+}
+</script>
+
+<template>
+    <DataForm
+        :data="props.config"
+        :formFields="data.formFields"
+        :columnCount="2"
+        layout="onlyLabelFixed"
+        labelWidth="80px"
+        inputWidth=""
+    />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/editor/Model2DEditor.vue b/src/editor/Model2DEditor.vue
index 1c7e8e0..60d277d 100644
--- a/src/editor/Model2DEditor.vue
+++ b/src/editor/Model2DEditor.vue
@@ -17,6 +17,9 @@
                    :type="state?.view3DMode===Constract.Mode3D?'primary':''"
                    @click="state.view3DMode = Constract.Mode3D">3D
         </el-button>
+        <el-button :icon="renderIcon('element Files')" link @click="showBulkCopy" :disabled="!selectedObject">
+          批量复制
+        </el-button>
       </el-button-group>
     </div>
     <div class="section-content">
@@ -92,13 +95,14 @@
 </template>
 <script>
 import * as THREE from 'three'
-import $ from 'jquery'
-import { getQueryParams, renderIcon, setQueryParam } from '@/utils/webutils'
-import { defineComponent, markRaw } from 'vue'
+import { renderIcon, setQueryParam } from '@/utils/webutils'
+import { createVNode, defineComponent, markRaw } from 'vue'
 import Viewport from '@/core/engine/Viewport'
 import Constract from '@/core/Constract'
 import EventBus from '@/runtime/EventBus'
 import SceneHelp from '@/core/engine/SceneHelp'
+import BulkCopy from './BulkCopy.vue'
+import lodash from "lodash";
 
 export default defineComponent({
   name: 'Model2DEditor',
@@ -242,7 +246,51 @@ export default defineComponent({
       })
 
 
-    }
+    },
+    showBulkCopy() {
+      const viewport = this.viewport;
+      const selectedItem = viewport?.state?.selectedItem;
+      if(!viewport || !selectedItem) return;
+      const config = {
+        numberOfRows: 1,
+        numberOfColumns: 1,
+        rowSpace: 0,
+        columnSpacing: 0,
+        doubleRow: false,
+      };
+      system.showDialog(createVNode(BulkCopy, {
+        config,
+      }), {
+        title: '批量复制',
+        width: 520,
+        height: 240,
+        showClose: true,
+        showMax: true,
+        showCancelButton: false,
+        showOkButton: true,
+      }).then(() => {
+        if(!config.numberOfRows || !config.numberOfColumns) return;
+        viewport.stateManager.update(({ getEntity, addEntity }) => {
+            const xAxle = selectedItem.tf[0][0];
+            const zAxle = selectedItem.tf[0][2];
+            const xSize = selectedItem.tf[2][0];
+            const zSize = selectedItem.tf[2][2];
+            console.log("item", JSON.stringify(selectedItem.tf));
+            for (let rCount = 0; rCount < config.numberOfRows; rCount++) {
+                for (let cCount = 0; cCount < config.numberOfColumns; cCount++) {
+                    if(rCount===0 && cCount===0) continue;
+                    const item = lodash.cloneDeep(selectedItem);
+                    item.id = system.createUUID();
+                    item.tf[0][0] = xAxle + cCount * (xSize + config.columnSpacing);
+                    item.tf[0][2] = zAxle + rCount * (zSize + config.rowSpace);
+                    addEntity(item);
+                    console.log("item", JSON.stringify(item.tf));
+                }
+            }
+        });
+        console.log("config", config, selectedItem);
+      }).finally();
+    },
   },
   computed: {
     state() {
@@ -268,7 +316,10 @@ export default defineComponent({
           label: item.label
         }))
       }))
-    }
+    },
+    selectedObject() {
+      return this.state?.selectedObject;
+    },
   }
 })
 </script>
diff --git a/src/editor/widgets/property/PropertyPanel.vue b/src/editor/widgets/property/PropertyPanel.vue
index 1cf6e7b..a8182ca 100644
--- a/src/editor/widgets/property/PropertyPanel.vue
+++ b/src/editor/widgets/property/PropertyPanel.vue
@@ -9,23 +9,23 @@ import { defDataFormProps } from '@/editor/widgets/property/PropertyPanelConstan
 import Viewport, { type ViewportState } from '@/core/engine/Viewport.ts'
 
 defineOptions({
-  name: 'PropertyPanel'
+    name: 'PropertyPanel'
 })
 
 // 定义 Props 类型
 interface PropertyPanelProps {
-  /** 待编辑数据 */
-  data?: any;
-  /** Viewport */
-  viewport: Viewport;
-  /** ViewportState */
-  viewportState: ViewportState;
-  /** 默认的DataFormProps */
-  defDataFormProps?: DataFormProps;
-  /** 最上面平铺的设置器 */
-  flatten?: PropertyFlattenSetter;
-  /** 设置器分组集合 */
-  groups?: Array<PropertySetterGroup>;
+    /** 待编辑数据 */
+    data?: any;
+    /** Viewport */
+    viewport: Viewport;
+    /** ViewportState */
+    viewportState: ViewportState;
+    /** 默认的DataFormProps */
+    defDataFormProps?: DataFormProps;
+    /** 最上面平铺的设置器 */
+    flatten?: PropertyFlattenSetter;
+    /** 设置器分组集合 */
+    groups?: Array<PropertySetterGroup>;
 }
 
 // 读取组件 props 属性
@@ -33,16 +33,16 @@ const props = withDefaults(defineProps<PropertyPanelProps>(), {})
 
 // 定义 State 类型
 interface PropertyPanelState {
-  /** 待编辑数据 */
-  data?: any;
-  /** 已展开的分组 */
-  expandGroups: Array<string>;
+    /** 待编辑数据 */
+    data?: any;
+    /** 已展开的分组 */
+    expandGroups: Array<string>;
 }
 
 // state 属性
 const state = reactive<PropertyPanelState>({
-  data: lodash.cloneDeep(props.data),
-  expandGroups: []
+    data: lodash.cloneDeep(props.data),
+    expandGroups: []
 })
 
 // 定义 Data 类型
@@ -54,84 +54,84 @@ const data: PropertyPanelData = {}
 const flattenFormProps = computed(() => getDefFormProps(props.flatten))
 
 function getDefFormProps(setter?: PropertyFlattenSetter) {
-  const formProps: DataFormProps = {
-    ...defDataFormProps,
-    ...props.defDataFormProps
-  }
-  fillFormProps(setter)
-  return formProps
+    const formProps: DataFormProps = {
+        ...defDataFormProps,
+        ...props.defDataFormProps
+    }
+    fillFormProps(setter)
+    return formProps
 }
 
 function fillFormProps(formProps: DataFormProps, setter?: PropertyFlattenSetter) {
-  if (!setter) return
-  if (setter.size) formProps.size = setter.size
-  if (setter.labelWidth) formProps.labelWidth = setter.labelWidth
+    if (!setter) return
+    if (setter.size) formProps.size = setter.size
+    if (setter.labelWidth) formProps.labelWidth = setter.labelWidth
 }
 
 function getCollapseItemId(group: PropertySetterGroup, idx: number) {
-  return `_${idx}_${group.title}`
+    return `_${idx}_${group.title}`
 }
 
 function onDataChange(newData: any) {
-  const viewport = props.viewport
-  if (!viewport) return
-  viewport.stateManager.update(({ getEntity, putEntity }) => {
-    const data = getEntity(props.data.id)
-    lodash.assign(data, newData)
-    // console.log('onDataChange@1', JSON.stringify(data.dt))
-    putEntity(data)
-  })
+    const viewport = props.viewport
+    if (!viewport) return
+    viewport.stateManager.update(({ getEntity, putEntity }) => {
+        const data = getEntity(props.data.id);
+        lodash.assign(data, newData);
+        // console.log('onDataChange@1', JSON.stringify(data.dt))
+        putEntity(data);
+    });
 }
 
 interface PropertyPanelExpose {
-  state: PropertyPanelState;
-  data: PropertyPanelData;
+    state: PropertyPanelState;
+    data: PropertyPanelData;
 }
 
 const expose: PropertyPanelExpose = {
-  state,
-  data
+    state,
+    data
 }
 // 定义组件公开内容
 defineExpose(expose)
 
 export type {
-  PropertyPanelProps,
-  PropertyPanelState
+    PropertyPanelProps,
+    PropertyPanelState
 }
 </script>
 
 <template>
-  <div class="property-panel">
-    <DataForm
-      v-if="props.flatten"
-      class="property-panel-form"
-      v-bind="flattenFormProps"
-      :data="state.data"
-      :formFields="props.flatten.fields"
-      @dataChange="onDataChange"
-    />
-    <ElCollapse v-if="props.groups" v-model="state.expandGroups">
-      <ElCollapseItem
-        v-for="(group, idx) in props.groups"
-        :name="getCollapseItemId(group, idx)"
-        :title="group.title"
-      >
+    <div class="property-panel">
         <DataForm
-          v-if="group"
-          class="property-panel-form"
-          v-bind="getDefFormProps(group)"
-          :data="state.data"
-          :formFields="props.flatten.fields"
-          @dataChange="onDataChange"
+            v-if="props.flatten"
+            class="property-panel-form"
+            v-bind="flattenFormProps"
+            :data="state.data"
+            :formFields="props.flatten.fields"
+            @dataChange="onDataChange"
         />
-      </ElCollapseItem>
-    </ElCollapse>
-  </div>
+        <ElCollapse v-if="props.groups" v-model="state.expandGroups">
+            <ElCollapseItem
+                v-for="(group, idx) in props.groups"
+                :name="getCollapseItemId(group, idx)"
+                :title="group.title"
+            >
+                <DataForm
+                    v-if="group"
+                    class="property-panel-form"
+                    v-bind="getDefFormProps(group)"
+                    :data="state.data"
+                    :formFields="props.flatten.fields"
+                    @dataChange="onDataChange"
+                />
+            </ElCollapseItem>
+        </ElCollapse>
+    </div>
 </template>
 
 <style scoped>
 .property-panel {
-  padding: 8px 12px 16px 4px;
+    padding: 8px 12px 16px 4px;
 }
 </style>