From 35f495b4fa62733b983f226d091c2fffa9cfc94b Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Tue, 10 Jun 2025 13:51:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BC=98=E5=8C=96=E4=BB=93?=
 =?UTF-8?q?=E5=BA=93=E5=B8=83=E5=B1=80=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增列数、层数、列宽、层高等设置功能
- 实现复制、删除列的功能
- 优化列和层高的编辑界面
- 改进样式，增加滚动条和背景色等细节
---
 src/editor/propEditors/BayEditor.vue         | 99 +++++++++++++++++++++++++---
 src/editor/propEditors/InOutCenterEditor.vue |  6 +-
 2 files changed, 92 insertions(+), 13 deletions(-)

diff --git a/src/editor/propEditors/BayEditor.vue b/src/editor/propEditors/BayEditor.vue
index c84b50a..09cd98f 100644
--- a/src/editor/propEditors/BayEditor.vue
+++ b/src/editor/propEditors/BayEditor.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import lodash from "lodash";
 import { computed, reactive } from "vue";
 import { ElButton, ElDivider, ElFormItem, ElIcon, ElInputNumber, useFormItem } from "element-plus";
 import { CopyDocument, Delete } from "@element-plus/icons-vue";
@@ -36,10 +37,15 @@ const props = withDefaults(defineProps<BayEditorProps>(), {});
 
 // 定义 State 类型
 interface BayEditorState {
+    /** 列数 */
     numberOfBays: number;
+    /** 层数 */
     numberOfLevels: number;
+    /** 列宽 */
     widthOfBays: number;
+    /** 层高 */
     heightOfLevels: number;
+    /** 选中列 */
     selectIdx?: number;
 }
 
@@ -61,26 +67,78 @@ const data: BayEditorData = {
     labelWidth: 110,
 };
 const { formItem } = useFormItem();
-const list = computed(() => props.modelValue ?? []);
+const list = computed(getModelValue);
 const selectDay = computed(() => {
     if (Typeof.noValue(state.selectIdx)) return;
     return props.modelValue?.[state.selectIdx];
 });
 
-function setSelectIdx(idx: number) {
+function setSelectIdx(idx?: number) {
     state.selectIdx = idx;
 }
 
 function applyBasicSettings() {
-
+    const { numberOfBays, numberOfLevels, widthOfBays, heightOfLevels } = state;
+    const newValue = getModelValue();
+    newValue.length = 0;
+    for (let idx = 0; idx < numberOfBays; idx++) {
+        const bay: DtBay = {
+            bayWidth: widthOfBays,
+            offset: 0,
+            levelHeight: [],
+        };
+        for (let i = 0; i < numberOfLevels; i++) {
+            bay.levelHeight.push(heightOfLevels);
+        }
+        newValue.push(bay);
+    }
+    emit("update:modelValue", newValue);
 }
 
 function deleteBay() {
-
+    const selectIdx = state.selectIdx;
+    if (Typeof.noValue(selectIdx)) return;
+    const newValue = getModelValue();
+    if (selectIdx >= newValue.length) return;
+    newValue.splice(selectIdx, 1);
+    emit("update:modelValue", newValue);
+    if (selectIdx >= newValue.length) {
+        setSelectIdx(undefined);
+    }
 }
 
 function copyBay() {
+    const selectIdx = state.selectIdx;
+    if (Typeof.noValue(selectIdx)) return;
+    const newValue = getModelValue();
+    const bay = newValue[selectIdx];
+    if (!bay) return;
+    newValue.splice(selectIdx + 1, 0, lodash.cloneDeep(bay));
+    emit("update:modelValue", newValue);
+    setSelectIdx(selectIdx + 1);
+}
+
+function updateBayWidth(bay: DtBay, bayWidth?: number) {
+    bay.bayWidth = bayWidth;
+    const newValue = getModelValue();
+    emit("update:modelValue", newValue);
+}
+
+function updateBayOffset(bay: DtBay, offset?: number) {
+    bay.offset = offset;
+    const newValue = getModelValue();
+    emit("update:modelValue", newValue);
+}
+
+function updateBayLevelHeight(bay: DtBay, idx: number, levelHeight?: number) {
+    if (!bay.levelHeight) bay.levelHeight = [];
+    bay.levelHeight[idx] = levelHeight;
+    const newValue = getModelValue();
+    emit("update:modelValue", newValue);
+}
 
+function getModelValue(): DtBays {
+    return props.modelValue ?? [];
 }
 
 interface BayEditorExpose {
@@ -130,10 +188,10 @@ export type {
         <div class="flex-row-container bay-editor-advanced">
             <div class="flex-item-fixed flex-column-container bay-editor-bay-list">
                 <div class="flex-item-fixed tools-button-container">
-                    <ElIcon :class="['tools-button-icon', { 'tools-button-disabled': false }]" @click="copyBay">
+                    <ElIcon :class="['tools-button-icon', { 'tools-button-disabled': !selectDay }]" @click="copyBay">
                         <CopyDocument/>
                     </ElIcon>
-                    <ElIcon :class="['tools-button-icon', { 'tools-button-disabled': false }]" @click="deleteBay">
+                    <ElIcon :class="['tools-button-icon', { 'tools-button-disabled': !selectDay }]" @click="deleteBay">
                         <Delete/>
                     </ElIcon>
                 </div>
@@ -155,21 +213,34 @@ export type {
             <div v-if="selectDay" class="flex-item-fill flex-column-container bay-editor-bay-info">
                 <div class="flex-item-fixed">
                     <ElFormItem label="Bay Width" :labelWidth="80">
-                        <ElInputNumber :controls="false" :modelValue="selectDay.bayWidth"/>
+                        <ElInputNumber
+                            :controls="false"
+                            :modelValue="selectDay.bayWidth"
+                            @change="(width: number) => updateBayWidth(selectDay, width)"
+                        />
                     </ElFormItem>
                     <div style="height: 8px;"/>
                     <ElFormItem label="Bay Offset" :labelWidth="80">
-                        <ElInputNumber :controls="false" :modelValue="selectDay.offset"/>
+                        <ElInputNumber
+                            :controls="false"
+                            :modelValue="selectDay.offset"
+                            @change="(offset: number) => updateBayOffset(selectDay, offset)"
+                        />
                     </ElFormItem>
                 </div>
                 <div>Level Heights</div>
                 <div class="flex-item-fill bay-editor-bay-info-level-height">
                     <ElFormItem
                         v-for="(levelHeight, idx) in selectDay.levelHeight"
+                        labelPosition="left"
                         :label="`Level ${idx+1}`"
                         :labelWidth="64"
                     >
-                        <ElInputNumber :controls="false" :modelValue="levelHeight"/>
+                        <ElInputNumber
+                            :controls="false"
+                            :modelValue="levelHeight"
+                            @change="(height: number) => updateBayLevelHeight(selectDay, idx, height)"
+                        />
                     </ElFormItem>
                 </div>
             </div>
@@ -183,6 +254,7 @@ export type {
 <style scoped>
 .bay-editor {
     width: 100%;
+    user-select: none;
 }
 
 .bay-editor-title {
@@ -204,6 +276,7 @@ export type {
 
 .bay-editor-bay-list-name {
     border: 1px solid #dddddd;
+    overflow-y: auto;
 }
 
 .tools-button-container {
@@ -215,6 +288,9 @@ export type {
     gap: 4px;
     cursor: pointer;
     width: 100%;
+    background-color: #f5f5f5;
+    border: 1px solid #dddddd;
+    border-bottom: none;
 }
 
 .tools-button-container > .tools-button-icon {
@@ -247,7 +323,7 @@ export type {
 }
 
 .list-item {
-    padding: 4px 0 4px 2px;
+    padding: 0 2px;
     cursor: pointer;
     border-bottom: 1px solid #f0f0f0;
     user-select: none;
@@ -277,6 +353,7 @@ export type {
 
 .bay-editor-bay-info-level-height {
     border: 1px solid #dddddd;
+    overflow-y: auto;
 }
 
 .bay-editor-bay-info-level-height :deep(.el-input__wrapper) {
@@ -291,6 +368,8 @@ export type {
 
 .bay-editor-bay-info-level-height :deep(.el-form-item > .el-form-item__label) {
     border-right: 1px solid #dddddd;
+    background-color: #f0f0f0;
+    padding: 0 2px;
 }
 
 .bay-editor-bay-info-level-height :deep(.el-input-number) {
diff --git a/src/editor/propEditors/InOutCenterEditor.vue b/src/editor/propEditors/InOutCenterEditor.vue
index 73a96c3..09117d3 100644
--- a/src/editor/propEditors/InOutCenterEditor.vue
+++ b/src/editor/propEditors/InOutCenterEditor.vue
@@ -67,7 +67,7 @@ const canUpItem = computed(() => selectIdx.value > 0);
 const canDownItem = computed(() => selectIdx.value < (list.value.length - 1));
 const canDeleteItem = computed(() => selectIdx.value < list.value.length);
 
-function setSelectIdx(idx: number) {
+function setSelectIdx(idx?: number) {
     selectIdx.value = idx;
 }
 
@@ -112,7 +112,7 @@ function deleteItem() {
     list.splice(selectIdx.value, 1);
     emit("update:modelValue", modelValue);
     if (selectIdx.value >= list.length) {
-        setSelectIdx(Math.max(0, selectIdx.value - 1));
+        setSelectIdx(undefined);
     }
 }
 
@@ -256,7 +256,7 @@ export type {
 }
 
 .list-item {
-    padding: 4px 0 4px 2px;
+    padding: 0 2px;
     cursor: pointer;
     border-bottom: 1px solid #f0f0f0;
     user-select: none;