@mx-sose-front/mx-sose-graph 1.1.2 → 1.1.3

package/src/components/InteractionLayer.vue

@@ -5,28 +5,9 @@
     @mousedown="onLayerMouseDown" @mouseup="onLayerMouseUp" @click="onLayerClick"
     @contextmenu.prevent="handleContextMenu">
     <!-- 只在"选中对象是画布(diagram)"时显示四个角手柄 -->
-    <div v-for="s in graphStore.marqueeShapes" :key="s.id" class="selection-box" :style="getSelectionBoxStyle(s)">
-      <!-- 只有当shapeType不是edge且不是conceptualRole时才渲染四个角手柄 -->
-      <div class="resize-handles" v-show="!isBusy && s.shapeType !== 'edge'">
-        <div v-for="h in resizeHandles" :key="h.position" class="resize-handle"
-          :class="[`resize-${h.position}`, { 'is-disabled': isMultiSelected }]" :style="getHandleStyle(h, s)"
-          @mousedown.stop.prevent="startResize($event, h.position, s)" />
-      </div>
-      <div class="action-buttons"
-        v-show="!isMultiSelected && s.scenarioMenus && s.scenarioMenus.length > 0 && s.shapeType != ShapeConfig.SHAPE_TYPE"
-        :style="actionButtonsStyle(s)">
-        <div v-if="s.modelTypePropertyId" class="border-btn">
-          <button class="action-btn edit-btn"
-            @mousedown.stop.prevent="clickModelTypePropertyIdButton(s.modelTypePropertyId, s)" title="设置类型">
-            <img src="../statics/icons/childIcons/设置类型.png" alt="设置类型">
-          </button>
-        </div>
-        <button v-for="value in s.scenarioMenus" class="action-btn edit-btn"
-          @mousedown.stop.prevent="clickActionButton($event, value.code, s)" @click.stop.prevent :title="value.name">
-          <img :src="getIcon('childIcons', value.icon || '')" />
-        </button>
-      </div>
-    </div>
+    <SelectionBox v-for="s in graphStore.marqueeShapes" :key="s.id" :shape="s" :is-busy="isBusy"
+      :is-multi-selected="isMultiSelected" @resize-start="startResize" @action-button-click="clickActionButton"
+      @model-type-property-id-click="clickModelTypePropertyIdButton" />
     <!-- 命中容器的高亮矩形（虚线框） -->
     <div v-if="hoverRect" :class="[
       'hover-container-outline',
@@ -35,39 +16,26 @@
         'is-valid': graphStore.hoverNestable === true,
       },
     ]" :style="{
-      left: hoverRect.x - 5 + 'px',
-      top: hoverRect.y - 5 + 'px',
-      width: hoverRect.width + 10 + 'px',
-      height: hoverRect.height + 10 + 'px',
-    }" />
+        left: hoverRect.x - 5 + 'px',
+        top: hoverRect.y - 5 + 'px',
+        width: hoverRect.width + 10 + 'px',
+        height: hoverRect.height + 10 + 'px',
+      }" />
     <!-- 框选预览矩形 -->
     <div v-if="marqueeRect" class="marquee-rect" :style="getMarqueeStyle(marqueeRect)" />
     <!-- 拖动和缩放的预览框 -->
     <component v-for="g in allGhosts" :key="g.id" class="ghost-shape" :is="getShapeComponent(g)" :shape="g"
       :style="getGhostShapeStyle(g)" />
-    <!-- 名称虚线框（选中时显示） -->
-    <div v-if="
-      graphStore.selectedShape &&
-      graphStore.selectedShape.nameBounds &&
-      !isEditingName && graphStore.selectedShape.shapeKey !== 'ConceptRole'
-      && !graphStore.pendingNestedIds.includes(graphStore.selectedShape.id)
-    " class="name-text-box-container" :style="nameTextBoxContainerStyle(graphStore.selectedShape.id)">
-      <div class="name-text-box" :style="nameTextBoxStyle(graphStore.selectedShape)" title="点击编辑名称"></div>
-    </div>
-
-    <!-- 名称编辑输入框 -->
-    <div v-if="isEditingName && graphStore.selectedShape && graphStore.selectedShape.shapeKey !== 'ConceptRole'"
-      class="name-editor-container" :style="nameEditorContainerStyle(graphStore.selectedShape)">
-      <input ref="nameInput" v-model="editingName" class="name-input" :style="nameInputStyle(graphStore.selectedShape)"
-        @blur="nameEditManager.handleBlur(graphStore.selectedShape)"
-        @keyup.enter="nameEditManager.handleKeyUp($event, graphStore.selectedShape)"
-        @keyup.escape="nameEditManager.cancelEdit()" />
-    </div>
+    <!-- 名称编辑组件 -->
+    <NameEditor :selected-shape="graphStore.selectedShape" :can-edit="!graphStore.pendingNestedIds.includes(
+      graphStore.selectedShape?.id || ''
+    )
+      " :is-editing-name="isEditingName" :editing-name="editingName" :name-edit-manager="nameEditManager" />
 
     <!-- 使用右键菜单组件 -->
     <ContextMenu v-if="selectedShape && !isMultiSelected" :visible="showContextMenu" :selected-shape="selectedShape"
       :position="contextMenuPosition" @update:visible="showContextMenu = $event"
-      @delete="ContextMenuUtils.handleDelete(contextMenuTarget)" @show-property-panel="onLayerDblClick(true);" />
+      @show-property-panel="onLayerDblClick(true)" />
 
     <!-- 连接层逻辑 - 当 connectShapeData 存在时显示 -->
     <div v-if="connectShapeData && diagramBounds" class="connect-layer" :style="layerStyle">
@@ -90,12 +58,17 @@ import {
   onMounted,
   type CSSProperties,
   watch,
+  watchEffect,
 } from "vue";
 import type { Shape } from "../types";
 import { InteractionLayerEmits } from "../types/interactionLayer";
-import type { InteractionLayerProps, ExternalCreateDragState } from "../types/interactionLayer";
+import type {
+  InteractionLayerProps,
+  ExternalCreateDragState,
+} from "../types/interactionLayer";
 import { useGraphStore } from "../store/graphStore";
-import { resizeHandles } from "../constants/index";
+import SelectionBox from "./SelectionBox.vue";
+import NameEditor from "./NameEditor.vue";
 
 // 工具：几何/命中/样式/拖拽
 import {
@@ -111,17 +84,10 @@ import {
 } from "../utils/geom";
 import { pickTarget } from "../utils/hittest";
 import {
-  ShapeConfig,
-  selectionBoxStyle,
-  handleStyle,
   adjustCanvasToFitAllShapes,
   actionButtonsStyle,
-  nameTextBoxContainerStyle,
-  nameTextBoxStyle,
-  nameEditorContainerStyle,
-  nameInputStyle,
   getMarqueeStyle,
-  getLayerStyle
+  getLayerStyle,
 } from "../utils/diagram";
 import { withDrag } from "../utils/dom";
 import { checkNestViaFront } from "../utils/policy";
@@ -136,13 +102,12 @@ import { isCompartment } from "../utils/compartment";
 import { HighlightUtils } from "../utils/highlightUtils";
 import { ContextMenuUtils } from "../utils/contextMenuUtils";
 // 静态导入图片资源
-import { getIcon } from "../utils/iconLoader";
 import { getUuid } from "../utils/index";
 import { ElMessage } from "element-plus";
-import { snapPinToParentEdge, snapPinPointerOnMove } from '../utils/pinUtils';
-import { createKeyboardHandler } from '../utils/keyboardUtils';
+import { snapPinToParentEdge, snapPinPointerOnMove } from "../utils/pinUtils";
+import { createKeyboardHandler } from "../utils/keyboardUtils";
 import { NameEditManager } from "../utils/nameEditUtils";
-import { guardOperate } from "../utils/license-guard"
+import { guardOperate } from "../utils/license-guard";
 import { createResizeUtils } from "../utils/resizeUtils";
 
 const props = defineProps<InteractionLayerProps>();
@@ -155,7 +120,7 @@ const graphStore = useGraphStore();
 const { selectedShape, connectMode } = storeToRefs(graphStore);
 
 // 是否正在“外部创建拖拽”（
-const isExternalCreateDragging = ref(false)
+const isExternalCreateDragging = ref(false);
 // 光标样式（仅在按下时切换）
 const cursorStyle = ref<"default" | "pointer">("default");
 // 缩放时使用的预览框
@@ -186,7 +151,7 @@ const allGhosts = computed<Shape[]>(() => {
   const byId = new Map<string, Shape>();
   // 收集所有Ghost形状
   if (!isExternalCreateDragging.value) {
-    graphStore.ghostShadow.forEach(g => byId.set(g.id, g))
+    graphStore.ghostShadow.forEach((g) => byId.set(g.id, g));
   }
   // 缩放时的预览
   resizeGhostShadow.value.forEach((g) => byId.set(g.id, g));
@@ -218,32 +183,42 @@ const nameEditManager = new NameEditManager({
     if (graphStore.selectedShape) {
       emit("editName", graphStore.selectedShape, newName, oldName);
     }
-  }
+  },
 });
 
 // 缩放工具实例
-const resizeUtils = createResizeUtils(layerRef, {
-  packages: props.packages,
-  diagram: props.diagram,
-  taggedValueLabels: props.taggedValueLabels,
-}, {
-  onResizeStart: (target) => {
-    eventBus.emit('resize-start', { target });
-  },
-  onResizeEnd: (target) => {
-    eventBus.emit('resize-end', { target });
+const resizeUtils = createResizeUtils(
+  layerRef,
+  {
+    packages: props.packages,
+    diagram: props.diagram,
+    taggedValueLabels: props.taggedValueLabels,
   },
-  onShapeUpdate: (id, updates) => {
-    graphStore.updateShape(id, updates);
+  {
+    onResizeStart: (target) => {
+      eventBus.emit("resize-start", { target });
+    },
+    onResizeEnd: (target) => {
+      eventBus.emit("resize-end", { target });
+    },
+    onShapeUpdate: (id, updates) => {
+      graphStore.updateShape(id, updates);
+    },
   }
-});
+);
 
 // 解构缩放相关的变量
-const {
-  isResizing,
-  groupGhost,
-  startResize,
-} = resizeUtils;
+const { isResizing, groupGhost, startResize } = resizeUtils;
+
+// 名称输入框引用
+const nameInput = ref<HTMLInputElement | null>(null);
+
+// 监听nameInput ref变化，将其传递给NameEditManager
+watchEffect(() => {
+  if (nameInput.value) {
+    nameEditManager.setNameInput(nameInput.value);
+  }
+});
 
 // 从名称编辑管理器获取响应式状态
 const { isEditingName, editingName } = nameEditManager.editingState;
@@ -319,15 +294,17 @@ const highlightUtils = new HighlightUtils(graphStore);
 
 // 高亮相关状态 - 使用计算属性从工具类获取
 const highlightedShape = computed(() => highlightUtils.getHighlightedShape());
-const sourceShape = ref<Shape | null>(null)
-const recordClickPoint = ref({ x: 0, y: 0 })
+const sourceShape = ref<Shape | null>(null);
+const recordClickPoint = ref({ x: 0, y: 0 });
 // 高亮相关状态
 const highlightTimeout = ref<ReturnType<typeof setTimeout> | null>(null); // 高亮定时器
 
 // 正在交互：缩放中 或 元素拖动中
-const isBusy = computed(() =>
-  isResizing.value || (graphStore.isDragging && graphStore.ghostShadow.length > 0)
-)
+const isBusy = computed(
+  () =>
+    isResizing.value ||
+    (graphStore.isDragging && graphStore.ghostShadow.length > 0)
+);
 
 // 监听所有可能影响菜单显示的操作状态
 const shouldCloseMenu = computed(() => {
@@ -337,12 +314,7 @@ const shouldCloseMenu = computed(() => {
 // 预览框（ghost）的 bounds，仅在缩放时存在
 type Rect = { x: number; y: number; width: number; height: number };
 
-
-const clickActionButton = (event: MouseEvent, value: string, shape: Shape) => {
-  // 阻止事件冒泡，避免触发 onLayerClick
-  event.stopPropagation();
-  event.preventDefault();
-
+const clickActionButton = (value: string, shape: Shape) => {
   // 如果正在编辑名称，先触发失焦以保存当前编辑的内容
   if (isEditingName.value) {
     nameEditManager.handleBlur(graphStore.selectedShape);
@@ -351,9 +323,9 @@ const clickActionButton = (event: MouseEvent, value: string, shape: Shape) => {
   // 清除选中状态，避免第一次点击时取消选中导致需要点击两次
   graphStore.clearSelection();
 
-  graphStore.setConnectMode('action')
-  emit('actionButtonClick', value, shape);
-}
+  graphStore.setConnectMode("action");
+  emit("actionButtonClick", value, shape);
+};
 
 const clickModelTypePropertyIdButton = (value: string, shape: Shape) => {
   // 如果正在编辑名称，先触发失焦以保存当前编辑的内容
@@ -361,16 +333,12 @@ const clickModelTypePropertyIdButton = (value: string, shape: Shape) => {
     nameEditManager.handleBlur(graphStore.selectedShape);
   }
 
-  emit('modelTypePropertyIdButtonClick', value, shape);
-}
-
-// 计算样式：调用 utils（保持单一职责）
-const getSelectionBoxStyle = (shape: Shape) => selectionBoxStyle(shape);
-const getHandleStyle = (h: any, shape: Shape) => handleStyle(h.position, shape);
+  emit("modelTypePropertyIdButtonClick", value, shape);
+};
 
-// 名称编辑
-const startEditName = async () => {
-  await nameEditManager.startEdit(graphStore.selectedShape);
+// 名称编辑处理
+const handleEditName = (shape: Shape, newName: string, oldName: string) => {
+  emit("editName", shape, newName, oldName);
 };
 
 // 属性面板
@@ -394,11 +362,8 @@ const onLayerClick = (evt: MouseEvent) => {
     showContextMenu.value = false;
   }
 
-  // 检查是否点击了name-text-box
+  // 检查是否点击了name-text-box（由NameEditor组件内部处理）
   if (target.classList.contains("name-text-box")) {
-    if (nameEditManager.canEdit(graphStore.selectedShape)) {
-      startEditName();
-    }
     return;
   }
 
@@ -428,18 +393,21 @@ const onLayerClick = (evt: MouseEvent) => {
     const clickY = localPoint.y;
 
     // 判断点击位置是否有图形
-    const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, { x: clickX, y: clickY });
+    const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, {
+      x: clickX,
+      y: clickY,
+    });
 
     // 修改：无论是否在action模式下，只要在连接状态且点击空白处，都创建新图元
     if (!hasShapeAtPoint) {
       // 使用 cloneDeep 克隆 sourceShape
       if (!!sourceShape.value?.parenShapeId) {
         isConnecting.value = false;
-        graphStore.setConnectMode('connect')
+        graphStore.setConnectMode("connect");
         highlightShape(null, false); // 取消图元高亮
         highlightUtils.clearHighlightTimeout();
         return;
-      };
+      }
       const newShape = _.cloneDeep(foundSourceShape);
 
       // 修改 id（使用 getUuid）
@@ -451,8 +419,9 @@ const onLayerClick = (evt: MouseEvent) => {
         (menu) => menu.code === props.connectShapeData?.shapeKey
       );
       // 获取 targetModels，优先使用 currentMenu 中的值
-      const targetModels = currentMenu?.targetCreateModel?.split(',')
-        || props.connectShapeData?.targetCreateModel?.split(',');
+      const targetModels =
+        currentMenu?.targetCreateModel?.split(",") ||
+        props.connectShapeData?.targetCreateModel?.split(",");
 
       // 如果只有一个 targetModel，使用它作为 shapeKey
       if (targetModels?.length === 1) {
@@ -474,11 +443,16 @@ const onLayerClick = (evt: MouseEvent) => {
         y: newShapeY,
         width: defaultWidth,
         height: defaultHeight,
-        modelId: '',
+        modelId: "",
       };
 
       // 添加新 shape 到画布，只传递 shapeKey 和 x, y 坐标
-      emit('actionButtonAdd', { shapeKey: newShape.shapeKey, x: newShapeX, y: newShapeY, diagramId: diagramId });
+      emit("actionButtonAdd", {
+        shapeKey: newShape.shapeKey,
+        x: newShapeX,
+        y: newShapeY,
+        diagramId: diagramId,
+      });
       return;
     } else {
       handleConnectLayerClick(evt);
@@ -489,7 +463,7 @@ const onLayerClick = (evt: MouseEvent) => {
 
 // 处理线条点击事件
 const handleEdgeClick = (shape: Shape, event: MouseEvent) => {
-  console.log('通过edge-click事件选中的线条数据:', shape);
+  console.log("通过edge-click事件选中的线条数据:", shape);
   graphStore.selectShape(shape);
   event.stopPropagation();
 };
@@ -499,12 +473,16 @@ const DRAG_THRESHOLD = 4;
 const onLayerMouseDown = (evt: MouseEvent) => {
   return guardOperate(async () => {
     // 若点击的是名称虚线框/容器，避免触发清选或框选（Pin 的名称可能在外部）
-    const t = evt.target as HTMLElement | null
-    if (t && (t.classList?.contains('name-text-box') || t.closest('.name-text-box-container'))) {
+    const t = evt.target as HTMLElement | null;
+    if (
+      t &&
+      (t.classList?.contains("name-text-box") ||
+        t.closest(".name-text-box-container"))
+    ) {
       // 不改变当前选中；让后续 click 事件去触发 startEditName
-      evt.stopPropagation()
-      evt.preventDefault()
-      return
+      evt.stopPropagation();
+      evt.preventDefault();
+      return;
     }
     if (isResizing.value || isEditingName.value) return;
     if (graphStore.isDragging) graphStore.endDragShape();
@@ -528,11 +506,21 @@ const onLayerMouseDown = (evt: MouseEvent) => {
       showContextMenu.value = false;
     }
 
-    cursorStyle.value = (hit.kind === "shape" || hit.kind === "edge" || hit.kind === "pin") ? "pointer" : "default";
+    cursorStyle.value =
+      hit.kind === "shape" || hit.kind === "edge" || hit.kind === "pin"
+        ? "pointer"
+        : "default";
     // 进入“框选”的条件：
-    const wantMarquee = evt.shiftKey || hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin";
+    const wantMarquee =
+      evt.shiftKey ||
+      (hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin");
     if (wantMarquee) {
-      if ((hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin") && !evt.shiftKey) {
+      if (
+        hit.kind !== "shape" &&
+        hit.kind !== "edge" &&
+        hit.kind !== "pin" &&
+        !evt.shiftKey
+      ) {
         graphStore.clearSelection();
       }
       startMarquee(pt);
@@ -542,13 +530,17 @@ const onLayerMouseDown = (evt: MouseEvent) => {
     // 双击触发不同逻辑
     if (evt.detail === 2 && graphStore.marqueeShapes.length == 1) {
       const selectedShape = graphStore.selectedShape;
-      console.log('双击选中的图元:', selectedShape);
+      console.log("双击选中的图元:", selectedShape);
 
       // 判断是否为Diagram组件
-      if (selectedShape && selectedShape.shapeType !== 'edge' && props.diagram?.includes(selectedShape.shapeKey)) {
+      if (
+        selectedShape &&
+        selectedShape.shapeType !== "edge" &&
+        props.diagram?.includes(selectedShape.shapeKey)
+      ) {
         // Diagram组件的特殊双击逻辑
         // 这里可以添加你想要的其他逻辑，例如发射自定义事件
-        emit('diagramDoubleClick', selectedShape);
+        emit("diagramDoubleClick", selectedShape);
         // console.log(selectedShape,'Diagram组件双击事件');
         // 不打开属性面板
       } else {
@@ -563,7 +555,12 @@ const onLayerMouseDown = (evt: MouseEvent) => {
       const { shape } = hit;
 
       // 打印选中元素的数据信息 - 确保每次点击都能看到
-      console.log('点击选中的' + (hit.kind === 'edge' ? '线条' : hit.kind === 'pin' ? 'Pin' : '图元') + '数据信息:', shape);
+      console.log(
+        "点击选中的" +
+        (hit.kind === "edge" ? "线条" : hit.kind === "pin" ? "Pin" : "图元") +
+        "数据信息:",
+        shape
+      );
 
       const isMulti = graphStore.selectedIds.length > 1;
       const clickedInSelection = graphStore.selectedIds.includes(shape.id);
@@ -598,12 +595,25 @@ const onLayerMouseDown = (evt: MouseEvent) => {
             // 如果是 pin 类型，需要在移动过程中将“指针位置”校正为吸附后的指针坐标
             let targetPt = curr;
             if (ids.length === 1) {
-              const draggedShape = graphStore.shapes.find(x => x.id === ids[0]);
-              if (draggedShape && draggedShape.shapeType === 'pin' && draggedShape.parenShapeId) {
-                const parentShape = graphStore.shapes.find(x => x.id === draggedShape.parenShapeId);
+              const draggedShape = graphStore.shapes.find(
+                (x) => x.id === ids[0]
+              );
+              if (
+                draggedShape &&
+                draggedShape.shapeType === "pin" &&
+                draggedShape.parenShapeId
+              ) {
+                const parentShape = graphStore.shapes.find(
+                  (x) => x.id === draggedShape.parenShapeId
+                );
                 if (parentShape) {
                   // 使用移动专用的吸附方法：根据 dragOffset 计算应传入 moveDraggedShape 的指针坐标
-                  targetPt = snapPinPointerOnMove(curr, parentShape, draggedShape, graphStore.dragOffset || undefined);
+                  targetPt = snapPinPointerOnMove(
+                    curr,
+                    parentShape,
+                    draggedShape,
+                    graphStore.dragOffset || undefined
+                  );
                 }
               }
             }
@@ -623,7 +633,7 @@ const onLayerMouseDown = (evt: MouseEvent) => {
         }
       );
     }
-  })
+  });
 };
 // 框选部分
 const startMarquee = (anchor: { x: number; y: number }) => {
@@ -695,7 +705,11 @@ const contextMenuTarget = ref<Shape | null>(null);
 const isConnectAllowed = ref(false);
 
 // 高亮图元的边框样式 - 使用工具类实现
-const highlightShape = (shape: Shape | null, isHighlight: boolean, isValidSource: boolean = true) => {
+const highlightShape = (
+  shape: Shape | null,
+  isHighlight: boolean,
+  isValidSource: boolean = true
+) => {
   highlightUtils.highlightShape(shape, isHighlight, isValidSource);
 };
 
@@ -724,7 +738,7 @@ const handleContextMenu = (event: MouseEvent) => {
     } else {
       showContextMenu.value = false;
     }
-  })
+  });
 };
 
 // 关闭右键菜单
@@ -747,35 +761,38 @@ watch(shouldCloseMenu, (shouldClose) => {
     closeMenu();
   }
 });
-watch(() => props.actionButtonShapeDataId, (newVal) => {
-  if (newVal) {
-    const foundShape = graphStore.shapes.find((x) => x.id === newVal);
-    if (foundShape) {
-      // 连接 sourceShape 和新 shape
-      if (sourceShape.value) {
-        const connectionData = EdgeUtils.completeConnection(
-          sourceShape.value,
-          foundShape,
-          { x: recordClickPoint.value.x, y: recordClickPoint.value.y },
-          currentConnectPoint.value,
-          graphStore.shapes
-        );
-
-        if (connectionData) {
-          emit("connectEnd", connectionData);
-          graphStore.setConnectMode('connect')
-          isConnecting.value = false;
-          highlightUtils.clearHighlightTimeout();
-          if (highlightTimeout.value) {
-            clearTimeout(highlightTimeout.value);
-            highlightTimeout.value = null;
+watch(
+  () => props.actionButtonShapeDataId,
+  (newVal) => {
+    if (newVal) {
+      const foundShape = graphStore.shapes.find((x) => x.id === newVal);
+      if (foundShape) {
+        // 连接 sourceShape 和新 shape
+        if (sourceShape.value) {
+          const connectionData = EdgeUtils.completeConnection(
+            sourceShape.value,
+            foundShape,
+            { x: recordClickPoint.value.x, y: recordClickPoint.value.y },
+            currentConnectPoint.value,
+            graphStore.shapes
+          );
+
+          if (connectionData) {
+            emit("connectEnd", connectionData);
+            graphStore.setConnectMode("connect");
+            isConnecting.value = false;
+            highlightUtils.clearHighlightTimeout();
+            if (highlightTimeout.value) {
+              clearTimeout(highlightTimeout.value);
+              highlightTimeout.value = null;
+            }
           }
         }
       }
+      // 处理 actionButtonShapeData 的逻辑
     }
-    // 处理 actionButtonShapeData 的逻辑
   }
-});
+);
 
 // 鼠标移动事件处理
 const handleMouseMove = (event: MouseEvent) => {
@@ -818,21 +835,32 @@ const checkHoverTarget = (x: number, y: number) => {
   if (hoverShape) {
     // 检查连接有效性
     let targetModels = props.connectShapeData?.targetModels;
-    if (connectMode.value === 'action') {
+    if (connectMode.value === "action") {
       targetModels = props.connectShapeData?.scenarioMenus?.find(
         (menu) => menu.code === props.connectShapeData?.shapeKey
       )?.targetModels;
     }
     let isAllowed = true;
-    if (targetModels && Array.isArray(targetModels) && targetModels.length > 0) {
-      const hoverShapeType = hoverShape.shapeKey || '';
+    if (
+      targetModels &&
+      Array.isArray(targetModels) &&
+      targetModels.length > 0
+    ) {
+      const hoverShapeType = hoverShape.shapeKey || "";
       isAllowed = targetModels.includes(hoverShapeType);
     }
     // 检查parenShapeId是否匹配（无论hoverShape是否改变都要检查）
     if (props.connectShapeData?.sourceId) {
-      const sourceShape = graphStore.shapes.find(it => it.id === props.connectShapeData?.sourceId)
-      if (sourceShape && sourceShape.parenShapeId !== hoverShape.parenShapeId && (hoverShape.shapeType !== 'pin' && sourceShape.shapeType !== 'pin')) {
-        isAllowed = false
+      const sourceShape = graphStore.shapes.find(
+        (it) => it.id === props.connectShapeData?.sourceId
+      );
+      if (
+        sourceShape &&
+        sourceShape.parenShapeId !== hoverShape.parenShapeId &&
+        hoverShape.shapeType !== "pin" &&
+        sourceShape.shapeType !== "pin"
+      ) {
+        isAllowed = false;
       }
     }
     // 只有当hoverShape改变且connectShapeData存在时才发射事件
@@ -841,19 +869,25 @@ const checkHoverTarget = (x: number, y: number) => {
       // 使用更严格的优先级判断逻辑，确保只要有一个属性有实际值就使用它
       let sourceModelId;
       // 如果modelId是有效字符串或数字，使用modelId
-      if (props.connectShapeData.modelId && props.connectShapeData.modelId.toString().trim() !== '') {
+      if (
+        props.connectShapeData.modelId &&
+        props.connectShapeData.modelId.toString().trim() !== ""
+      ) {
         sourceModelId = props.connectShapeData.modelId;
       }
       // 否则，如果sourceModelId是有效字符串或数字，使用sourceModelId
-      else if (props.connectShapeData.sourceModelId && props.connectShapeData.sourceModelId.toString().trim() !== '') {
+      else if (
+        props.connectShapeData.sourceModelId &&
+        props.connectShapeData.sourceModelId.toString().trim() !== ""
+      ) {
         sourceModelId = props.connectShapeData.sourceModelId;
       }
       // 只有当sourceModelId有值时就发射事件，并将isAllowed的值一并传递
       if (sourceModelId) {
-        eventBus.emit('edge-check', {
+        eventBus.emit("edge-check", {
           sourceModelId: sourceModelId, // 显式指定键值对，避免属性简写可能带来的混淆
           targetModelId: hoverShape.modelId,
-          isAllowed: isAllowed // 将验证结果一并发射
+          isAllowed: isAllowed, // 将验证结果一并发射
         });
       }
     }
@@ -919,7 +953,11 @@ watch(
   () => props.edgeCheck,
   (newEdgeCheck) => {
     // 只有在连接状态下且有高亮图元时才更新
-    if (isConnecting.value && highlightedShape.value && newEdgeCheck !== undefined) {
+    if (
+      isConnecting.value &&
+      highlightedShape.value &&
+      newEdgeCheck !== undefined
+    ) {
       // 使用后端验证结果更新高亮颜色
       highlightShape(highlightedShape.value, true, newEdgeCheck);
     }
@@ -933,7 +971,7 @@ const handleConnectLayerClick = (event: MouseEvent) => {
   const hit = pickTarget(graphStore.shapes, localPoint);
 
   if (
-    ['shape', 'pin'].includes(hit.kind) &&
+    ["shape", "pin"].includes(hit.kind) &&
     hit.shape?.id &&
     props.connectShapeData?.sourceId &&
     hit.shape?.id !== props.connectShapeData.sourceId
@@ -956,14 +994,20 @@ const completeConnection = (
   if (!isConnectAllowed.value) {
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
-    graphStore.setConnectMode('connect')
+    graphStore.setConnectMode("connect");
     highlightUtils.clearHighlightTimeout();
-    ElMessage.error('当前目标图元类型不符合连接要求');
+    ElMessage.error("当前目标图元类型不符合连接要求");
     return;
   }
 
   // 嵌套情况下只能连接同一个父图元
-  if (sourceShape && clickedShape && sourceShape.parenShapeId !== clickedShape.parenShapeId && (clickedShape.shapeType !== 'pin' && sourceShape.shapeType !== 'pin')) {
+  if (
+    sourceShape &&
+    clickedShape &&
+    sourceShape.parenShapeId !== clickedShape.parenShapeId &&
+    clickedShape.shapeType !== "pin" &&
+    sourceShape.shapeType !== "pin"
+  ) {
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
     highlightUtils.clearHighlightTimeout();
@@ -972,33 +1016,32 @@ const completeConnection = (
   // 检查目标图元类型是否符合targetModels要求
   const targetModels = props.connectShapeData?.targetModels;
   if (targetModels && Array.isArray(targetModels) && targetModels.length > 0) {
-
-    const clickedShapeType = clickedShape.shapeKey || '';
+    const clickedShapeType = clickedShape.shapeKey || "";
     if (!targetModels.includes(clickedShapeType)) {
       isConnecting.value = false;
       highlightShape(null, false); // 取消图元高亮
       highlightUtils.clearHighlightTimeout();
       // alert('当前目标图元类型不符合连接要求');
-      ElMessage.error('当前目标图元类型不符合连接要求');
+      ElMessage.error("当前目标图元类型不符合连接要求");
       return;
     }
   }
 
   // 检查是否已存在相同类型的边
-  const existingEdge = graphStore.shapes.find((shape: Shape) =>
-    shape.shapeType === 'edge' &&
-    shape.sourceId === props.connectShapeData?.sourceId &&
-    shape.targetId === clickedShape.id &&
-    shape.shapeKey === props.connectShapeData?.shapeKey
+  const existingEdge = graphStore.shapes.find(
+    (shape: Shape) =>
+      shape.shapeType === "edge" &&
+      shape.sourceId === props.connectShapeData?.sourceId &&
+      shape.targetId === clickedShape.id &&
+      shape.shapeKey === props.connectShapeData?.shapeKey
   );
 
-
   // 如果边已存在，错误提示并返回
   if (existingEdge) {
     // alert('同类型的边已经存在，不能重复添加');
-    ElMessage.error('同类型的边已经存在，不能重复添加');
+    ElMessage.error("同类型的边已经存在，不能重复添加");
     isConnecting.value = false;
-    graphStore.setConnectMode('connect')
+    graphStore.setConnectMode("connect");
     highlightShape(null, false); // 取消图元高亮
     highlightUtils.clearHighlightTimeout();
     return;
@@ -1013,22 +1056,27 @@ const completeConnection = (
   );
   if (connectionData) {
     // ServiceObjectFlow 特殊处理：需要在 sourcePoint 和 targetPoint 创建 pin
-    if (props.connectShapeData?.shapeKey === 'ServiceObjectFlow' && sourceShape && connectionData.sourcePoint && connectionData.targetPoint) {
+    if (
+      props.connectShapeData?.shapeKey?.toLowerCase().includes("objectflow") &&
+      sourceShape &&
+      connectionData.sourcePoint &&
+      connectionData.targetPoint
+    ) {
       const result = EdgeUtils.handleServiceObjectFlowConnection(
         sourceShape,
         clickedShape,
         connectionData
       );
-      emit('objectFlowConnectEnd', {
+      emit("objectFlowConnectEnd", {
         connectionData: result.connectionData,
         outputPinBounds: result.outputPinBounds,
-        inputPinBounds: result.inputPinBounds
+        inputPinBounds: result.inputPinBounds,
       });
     } else {
-      (connectionData as any).sourceShape = sourceShape
-      emit('connectEnd', connectionData);
+      (connectionData as any).sourceShape = sourceShape;
+      emit("connectEnd", connectionData);
     }
-    graphStore.setConnectMode('connect')
+    graphStore.setConnectMode("connect");
     isConnecting.value = false;
     highlightShape(null, false); // 取消图元高亮
     highlightUtils.clearHighlightTimeout();
@@ -1058,7 +1106,8 @@ const initializeConnectPoint = () => {
       props.diagramBounds // 传递图表边界
     );
 
-    if (initialPoint && sourceShape) { // 确保sourceShape存在，防止从工具栏拖拽时错误初始化
+    if (initialPoint && sourceShape) {
+      // 确保sourceShape存在，防止从工具栏拖拽时错误初始化
       currentConnectPoint.value = initialPoint;
 
       if (!isConnecting.value) {
@@ -1164,7 +1213,7 @@ const cancelConnection = () => {
       mousePosition,
       targetConnectPoint,
       targetShape,
-      showLine
+      showLine,
     },
     highlightUtils
   );
@@ -1183,7 +1232,7 @@ const externalCreateDragState: ExternalCreateDragState = {
   creatingId: null,
   pendingShape: null,
   isDragging: false,
-  isCheckInFlight: false
+  isCheckInFlight: false,
 };
 
 const resetExternalCreateDragState = () => {
@@ -1198,7 +1247,7 @@ const resetExternalCreateDragState = () => {
 const cleanupInertShapes = async () => {
   const arr = graphStore.shapes as any[];
   for (let i = arr.length - 1; i >= 0; i--) {
-    if ('inert' in arr[i]) {
+    if ("inert" in arr[i]) {
       arr.splice(i, 1);
     }
   }
@@ -1206,99 +1255,140 @@ const cleanupInertShapes = async () => {
 };
 
 //拖动中添加元素并触发嵌套逻辑，
-const continueExternalCreateDrag = async (payload: { clientX: number; clientY: number; shapeData?: any }) => {
-  externalCreateDragState.isDragging = true
-  isExternalCreateDragging.value = true
-  const pt = clientToLocalPoint(payload.clientX, payload.clientY, layerRef.value)
+const continueExternalCreateDrag = async (payload: {
+  clientX: number;
+  clientY: number;
+  shapeData?: any;
+}) => {
+  externalCreateDragState.isDragging = true;
+  isExternalCreateDragging.value = true;
+  const pt = clientToLocalPoint(
+    payload.clientX,
+    payload.clientY,
+    layerRef.value
+  );
   if (payload.shapeData) {
-    const s = payload.shapeData
-    const isCmp = isCompartment(s as Shape)
+    const s = payload.shapeData;
+    const isCmp = isCompartment(s as Shape);
     externalCreateDragState.pendingShape = {
       ...s,
       bounds: {
         x: pt.x,
         y: pt.y,
         width: s.bounds?.width ?? 180,
-        height: isCmp ? 120 : (s.bounds?.height ?? 80),
+        height: isCmp ? 120 : s.bounds?.height ?? 80,
       },
       inert: false,
-    }
+    };
   }
-  if (!externalCreateDragState.creatingId && externalCreateDragState.pendingShape && isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)) {
-    const draft = externalCreateDragState.pendingShape
+  if (
+    !externalCreateDragState.creatingId &&
+    externalCreateDragState.pendingShape &&
+    isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)
+  ) {
+    const draft = externalCreateDragState.pendingShape;
     try {
-      graphStore.addShape(draft)
-      graphStore.startDrag([draft.id], pt)
-      externalCreateDragState.creatingId = draft.id
-      externalCreateDragState.pendingShape = null
+      graphStore.addShape(draft);
+      graphStore.startDrag([draft.id], pt);
+      externalCreateDragState.creatingId = draft.id;
+      externalCreateDragState.pendingShape = null;
     } finally {
-      externalCreateDragState.isCheckInFlight = false
+      externalCreateDragState.isCheckInFlight = false;
     }
   }
-  externalCreateDragState.pendingShape = null
+  externalCreateDragState.pendingShape = null;
 
-  if (!externalCreateDragState.creatingId) return
+  if (!externalCreateDragState.creatingId) return;
 
-  let targetPt = pt
-  const s = graphStore.shapes.find(x => x.id === externalCreateDragState.creatingId)
-  if (s && s.shapeType === 'pin') {
+  let targetPt = pt;
+  const s = graphStore.shapes.find(
+    (x) => x.id === externalCreateDragState.creatingId
+  );
+  if (s && s.shapeType === "pin") {
     if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
-      const parent = graphStore.shapes.find(x => x.id === graphStore.hoverContainerId)
+      const parent = graphStore.shapes.find(
+        (x) => x.id === graphStore.hoverContainerId
+      );
       if (parent) {
-        const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(pt, parent, s)
-        targetPt = { x: adjustedX, y: adjustedY }
+        const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
+          pt,
+          parent,
+          s
+        );
+        targetPt = { x: adjustedX, y: adjustedY };
       }
     }
   }
 
-  graphStore.moveDraggedShape(targetPt)
-}
+  graphStore.moveDraggedShape(targetPt);
+};
 
 //拖拽结束后重新发送事件到front中调用接口
-const finishExternalCreateDrag = async (payload: { clientX: number; clientY: number }) => {
+const finishExternalCreateDrag = async (payload: {
+  clientX: number;
+  clientY: number;
+}) => {
   try {
-    if (!externalCreateDragState.creatingId) return
-    const pt = clientToLocalPoint(payload.clientX, payload.clientY, layerRef.value)
-    if (isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)) {
-      graphStore.moveDraggedShape(pt)
-      await nextTick()
-      const s: any = (graphStore.shapes || []).find((x: any) => x.id == externalCreateDragState.creatingId)
-      if (s && s.shapeType == 'shape' || s.shapeType == 'pin') {
-        const pure = _.omit(s, ['inert'])
-        pure.bounds = {                 // 覆盖为新的 bounds
-          ...(pure.bounds),
+    if (!externalCreateDragState.creatingId) return;
+    const pt = clientToLocalPoint(
+      payload.clientX,
+      payload.clientY,
+      layerRef.value
+    );
+    if (
+      isInsideCanvasClient(payload.clientX, payload.clientY, layerRef.value)
+    ) {
+      graphStore.moveDraggedShape(pt);
+      await nextTick();
+      const s: any = (graphStore.shapes || []).find(
+        (x: any) => x.id == externalCreateDragState.creatingId
+      );
+      if ((s && s.shapeType == "shape") || s.shapeType == "pin") {
+        const pure = _.omit(s, ["inert"]);
+        pure.bounds = {
+          // 覆盖为新的 bounds
+          ...pure.bounds,
           x: pt.x,
           y: pt.y,
-        }
+        };
         // 先推断这次 drop 的“候选父节点”
-        let parent: Shape | null = null
+        let parent: Shape | null = null;
         if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
-          parent = (graphStore.shapes as any[]).find(
-            (x: any) => x.id === graphStore.hoverContainerId
-          ) || null
+          parent =
+            (graphStore.shapes as any[]).find(
+              (x: any) => x.id === graphStore.hoverContainerId
+            ) || null;
         }
         // 如果是 pin 类型，调整位置吸附到父图元最近的边
-        if (pure.shapeType === 'pin' && parent) {
-          const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(pt, parent, pure)
-          pure.bounds.x = adjustedX
-          pure.bounds.y = adjustedY
+        if (pure.shapeType === "pin" && parent) {
+          const { x: adjustedX, y: adjustedY } = snapPinToParentEdge(
+            pt,
+            parent,
+            pure
+          );
+          pure.bounds.x = adjustedX;
+          pure.bounds.y = adjustedY;
           pure.parenShapeId = parent.id;
           // 将吸附后的坐标同步回 ghost
-          graphStore.moveDraggedShape({ x: adjustedX, y: adjustedY })
+          graphStore.moveDraggedShape({ x: adjustedX, y: adjustedY });
         }
         try {
-          const { ok } = await checkNestViaFront(pure as Shape, parent, graphStore.shapes[0])
+          const { ok } = await checkNestViaFront(
+            pure as Shape,
+            parent,
+            graphStore.shapes[0]
+          );
           if (!ok) {
-            graphStore.setHoverState(null, false)
-            await cleanupInertShapes()
-            resetExternalCreateDragState()
-            return
+            graphStore.setHoverState(null, false);
+            await cleanupInertShapes();
+            resetExternalCreateDragState();
+            return;
           } else {
-            graphStore.canDropOnCanvas = true
+            graphStore.canDropOnCanvas = true;
           }
         } catch (error) {
-          await cleanupInertShapes()
-          resetExternalCreateDragState()
+          await cleanupInertShapes();
+          resetExternalCreateDragState();
         }
         // 同步对外通知
         // 先构造基础数据
@@ -1311,70 +1401,92 @@ const finishExternalCreateDrag = async (payload: { clientX: number; clientY: num
           type: s.type,
           nodeType: s.shapeKey,
           icon: s.icon,
-        }
+        };
         // 如果是 pin 类型，更新 coordinate 为吸附后的 client 坐标
-        if (pure.shapeType === 'pin' && parent) {
-          const adjustedClientPt = localToClientPoint(pure.bounds.x, pure.bounds.y, layerRef.value)
-          payloadData.coordinate.clientX = adjustedClientPt.clientX
-          payloadData.coordinate.clientY = adjustedClientPt.clientY
+        if (pure.shapeType === "pin" && parent) {
+          const adjustedClientPt = localToClientPoint(
+            pure.bounds.x,
+            pure.bounds.y,
+            layerRef.value
+          );
+          payloadData.coordinate.clientX = adjustedClientPt.clientX;
+          payloadData.coordinate.clientY = adjustedClientPt.clientY;
         }
         // 如果当前图元的shapeKey存在于ownerRequiredShapeKeys当中，再补 ownerId 字段
         // @todo OperationalPort合并到ownerRequiredShapeKeys
         if (graphStore.ownerRequiredShapeKeys.includes(pure.shapeKey)) {
-          payloadData.ownerId = parent?.modelId
+          payloadData.ownerId = parent?.modelId;
         }
         // 发送事件
         await new Promise<void>((resolve, reject) => {
-          eventBus.emit('addShape', {
+          eventBus.emit("addShape", {
             ...payloadData,
             resolve,
             reject,
-          })
-        })
-        if (pure.shapeType === 'pin') {
-          graphStore.endDragShape('pinDrop')
+          });
+        });
+        if (pure.shapeType === "pin") {
+          graphStore.endDragShape("pinDrop");
         } else {
-          graphStore.endDragShape('addEntity')    // 提交拖拽（触发嵌套/吸附等 finalize）
+          graphStore.endDragShape("addEntity"); // 提交拖拽（触发嵌套/吸附等 finalize）
         }
       }
     }
   } catch (error) {
-    graphStore.setHoverState(null, false)
-    await cleanupInertShapes()
+    graphStore.setHoverState(null, false);
+    await cleanupInertShapes();
   } finally {
-    await nextTick()
-    await cleanupInertShapes()
-    graphStore.setHoverState(null, false)
-    resetExternalCreateDragState()
+    await nextTick();
+    await cleanupInertShapes();
+    graphStore.setHoverState(null, false);
+    resetExternalCreateDragState();
   }
-}
+};
 // 根据 graphStore.canDropOnCanvas 决定是否显示禁用放置图标
 const onCanvasDragOver = (e: DragEvent) => {
-  e.preventDefault()                       // 必须，否则不会触发 drop
-  if (!e.dataTransfer) return
+  e.preventDefault(); // 必须，否则不会触发 drop
+  if (!e.dataTransfer) return;
   if (graphStore.canDropOnCanvas) {
-    e.dataTransfer.dropEffect = 'copy'     //  显示带 + 的复制光标
+    e.dataTransfer.dropEffect = "copy"; //  显示带 + 的复制光标
   } else {
-    e.dataTransfer.dropEffect = 'none'     //显示禁止的圈圈光标
+    e.dataTransfer.dropEffect = "none"; //显示禁止的圈圈光标
   }
-}
+};
 
 const onCanvasDrop = (e: DragEvent) => {
   if (!graphStore.canDropOnCanvas) {
     // 不允许丢，直接 return
-    return
+    return;
   }
-}
+};
+
 // 创建键盘事件处理器
 const keyboardHandler = createKeyboardHandler({
   onDelete: () => { },
   onEditProperty: () => onLayerDblClick(true),
   onCancelConnection: cancelConnection,
-  isEditingName: () => isEditingName.value
+  isEditingName: () => isEditingName.value,
+  onCopy: () => {
+    // 获取当前选中的图元
+    const selectedShapes = graphStore.selectedIds
+      .map((id) => graphStore.shapes.find((s) => s.id === id))
+      .filter(Boolean) as Shape[];
+
+    if (selectedShapes.length === 0) {
+      return;
+    }
+
+    // 使用ContextMenuUtils存储复制的图元
+    ContextMenuUtils.setCopiedShapes(selectedShapes);
+  },
+  onPaste: () => {
+    // 使用ContextMenuUtils处理粘贴
+    ContextMenuUtils.handlePaste(graphStore.selectedShape);
+  },
 });
 
 onMounted(() => {
-  window.addEventListener('keydown', keyboardHandler);
+  window.addEventListener("keydown", keyboardHandler);
   // 添加连接层相关的事件监听
   if (props.connectShapeData) {
     document.addEventListener("mousemove", handleMouseMove);
@@ -1383,17 +1495,30 @@ onMounted(() => {
   }
 
   //拖动结束后更新情景菜单
-  eventBus.on('shape-drag-end-updateScenarioMenu', actionButtonsStyle)
+  eventBus.on("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
+
+  // 监听粘贴图元事件
+  eventBus.on("paste-shapes", (shapes: Shape[]) => {
+    shapes.forEach((shape) => {
+      graphStore.addShape(shape);
+    });
+  });
+
+  // 监听选择图元事件
+  eventBus.on("select-shapes", (ids: string[]) => {
+    graphStore.clearSelection();
+    graphStore.selectMany(ids);
+  });
 });
 onUnmounted(() => {
   offDrag?.();
   // 清理连接层相关的事件监听
   document.removeEventListener("mousemove", handleMouseMove);
   document.removeEventListener("mouseleave", handleMouseLeave);
-  window.removeEventListener('keydown', keyboardHandler);
+  window.removeEventListener("keydown", keyboardHandler);
   // 重置名称编辑状态
   nameEditManager.reset();
-  eventBus.off('shape-drag-end-updateScenarioMenu', actionButtonsStyle)
+  eventBus.off("shape-drag-end-updateScenarioMenu", actionButtonsStyle);
   highlightUtils.clearHighlightTimeout();
   // 清理高亮工具实例
   highlightUtils.dispose();
@@ -1404,7 +1529,7 @@ defineExpose({
   finishExternalCreateDrag,
   handleEdgeClick,
   getBoundingClientRect: () => layerRef.value?.getBoundingClientRect(),
-})
+});
 </script>
 
 <style scoped>
@@ -1416,22 +1541,11 @@ defineExpose({
   height: 100%;
   /* 应用与画布相同的缩放变换 */
   transform-origin: 0 0;
-  transform: scale(v-bind('graphStore.currentScale'));
+  transform: scale(v-bind("graphStore.currentScale"));
   pointer-events: all;
   z-index: 999;
 }
 
-.selection-box {
-  pointer-events: none;
-  background: transparent;
-}
-
-.resize-handles {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
 .hover-container-outline {
   position: absolute;
   pointer-events: none;
@@ -1450,122 +1564,7 @@ defineExpose({
   background: rgba(240, 237, 237, 0.842);
 }
 
-.resize-handle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background-color: #007bff;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  pointer-events: all;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  z-index: 999;
-}
-
-.resize-handle.is-disabled {
-  cursor: default !important;
-}
-
-.resize-handle:hover {
-  background-color: #0056b3;
-  transform: scale(1.2);
-}
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  pointer-events: all;
-  background: rgba(255, 255, 255, 0.95);
-  padding: 6px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  border: 1px solid #e0e0e0;
-  backdrop-filter: blur(2px);
-}
-
-.action-btn {
-  width: 28px;
-  height: 28px;
-  border: 1px solid #d0d0d0;
-  border-radius: 3px;
-  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: bold;
-  font-family: "Arial", sans-serif;
-  color: #495057;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.action-btn:hover {
-  background: linear-gradient(to bottom, #e3f2fd, #bbdefb);
-  border-color: #90caf9;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
-  color: #1976d2;
-}
-
-.edit-btn:hover {
-  background: #e3f2fd;
-}
-
-.delete-btn:hover {
-  background: #ffebee;
-  border-color: #f44336;
-}
-
-.name-editor-container {
-  pointer-events: all;
-}
-
-.name-input {
-  width: calc(100% - 20px);
-  padding: 2px 4px;
-  border: 2px solid #007bff;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  outline: none;
-  text-align: center;
-}
-
-.name-input:focus {
-  border-color: #0056b3;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
-}
-
-.name-text-box-container {
-  pointer-events: all;
-}
-
-.name-text-box {
-  border: 1px dashed #007bff;
-  background: rgba(255, 255, 255, 0.2);
-  cursor: pointer;
-  pointer-events: all;
-  transition: all 0.2s ease;
-  border-radius: 4px;
-  box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.1);
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.name-text-box:hover {
-  border-color: #0056b3;
-  background: rgba(0, 123, 255, 0.05);
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
-  transform: scale(1.02);
-}
+/* 删除了选择框、调整大小手柄和操作按钮相关的样式，这些样式已经移到了 SelectionBox 组件中 */
 
 .resize-ghost {
   position: absolute;
@@ -1610,9 +1609,4 @@ defineExpose({
   pointer-events: none;
   z-index: 1000;
 }
-
-.border-btn {
-  padding-bottom: 4px;
-  border-bottom: 1px solid #e0e0e0;
-}
 </style>