@mx-sose-front/mx-sose-graph 1.0.0

package/src/components/InteractionLayer.vue

@@ -0,0 +1,2033 @@
+<template>
+  <!-- 交互层：放在图元之上，统一接管交互与鼠标样式 -->
+  <div class="interaction-layer" ref="layerRef" @dragover="onCanvasDragOver" @drop="onCanvasDrop"
+    :style="{ cursor: cursorStyle }" @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="getActionButtonsStyle(s, s.id)" :ref="(el) => setActionButtonsRef(el, s.id)">
+        <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>
+    <!-- 命中容器的高亮矩形（虚线框） -->
+    <div v-if="hoverRect" :class="[
+      'hover-container-outline',
+      {
+        'is-invalid': graphStore.hoverNestable === false,
+        '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',
+    }" />
+    <!-- 框选预览矩形 -->
+    <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" @blur="finishEditName"
+        @keyup.enter="finishEditName" @keyup.escape="cancelEditName" />
+    </div>
+
+    <!-- 使用右键菜单组件 -->
+    <ContextMenu v-if="selectedShape && !isMultiSelected" :visible="showContextMenu" :selected-shape="selectedShape"
+      :position="contextMenuPosition" @update:visible="showContextMenu = $event" @delete="handleMenuDelete"
+      @show-property-panel="onLayerDblClick(true)" />
+
+    <!-- 连接层逻辑 - 当 connectShapeData 存在时显示 -->
+    <div v-if="connectShapeData && diagramBounds" class="connect-layer" :style="layerStyle">
+      <!-- 连线起点的黑点 - 只在连接时显示 -->
+      <div v-if="isConnecting" class="connect-dot-direct" :style="dotStyle"></div>
+
+      <!-- 连线 -->
+      <ConnectionLine v-if="showLine" :show-line="showLine" :points="linePoints" :shape-key="connectShapeData?.shapeKey"
+        :style="svgStyle" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  nextTick,
+  onUnmounted,
+  computed,
+  onMounted,
+  type CSSProperties,
+  watch,
+  onBeforeUnmount,
+  type ComponentPublicInstance,
+} from "vue";
+import type { Shape } from "../types";
+import { useGraphStore } from "../store/graphStore";
+
+// 工具：几何/命中/样式/拖拽
+import {
+  toLocalPoint,
+  getBounds,
+  getDiagramRect,
+  ghostResizeStep,
+  rectFromPoints,
+  rectContainsRect,
+  clampPointToRect,
+} from "../utils/geom";
+import { pickTarget } from "../utils/hittest";
+import {
+  selectionBoxStyle,
+  handleStyle,
+  adjustCanvasToFitAllShapes,
+  actionButtonsStyle,
+  nameTextBoxContainerStyle,
+  nameTextBoxStyle,
+  nameEditorContainerStyle
+} from "../utils/diagram";
+import { withDrag } from "../utils/dom";
+import { checkNestViaFront, getPolicy } from "../utils/policy";
+import { getShapeComponent, getShapeStyle } from "../render/shape-renderer";
+import _ from "lodash";
+import { eventBus } from "../store";
+import { ShapeConfig } from "../utils/diagram";
+import ContextMenu from "./ContextMenu.vue";
+import { finalizeAfterTransform } from "../utils/drag";
+import { normalizeZOrder } from "../utils/zorder";
+import { clampParentRectToChildrenGap } from "../utils/containers";
+import { storeToRefs } from "pinia";
+import { EdgeUtils } from "../utils/edgeUtils";
+import ConnectionLine from "./LineStyle/ConnectionLine.vue";
+import { addChildShapeToCompartment, clampCompartmentResize, isCompartment } from "../utils/compartment";
+import { collectDescendantIds } from "../utils/containers";
+import { HighlightUtils } from "../utils/highlightUtils";
+// 静态导入图片资源
+import { getIcon } from "../utils/iconLoader";
+import { getUuid } from "../utils/index";
+import { ElMessage } from "element-plus";
+import { snapPinToParentEdge, snapPinPointerOnMove } from '../utils/pinUtils';
+const emit = defineEmits([
+  "propertyPanel",
+  "editName",
+  "update-shape",
+  "connectEnd",
+  "actionButtonClick",
+  "diagramDoubleClick",
+  "modelTypePropertyIdButtonClick",
+  "edge-click",
+  "property-panel",
+  "actionButtonAdd"
+]);
+
+// Props
+interface Props {
+  connectShapeData?: Shape;
+  diagramBounds?: any;
+  resShape: Shape;
+  lines?: String[];
+  packages?: String[];
+  diagram?: String[];
+  taggedValueLabels?: String[];
+  actionButtonShapeDataId?: string;
+  edgeCheck?: boolean;
+}
+const props = defineProps<Props>();
+
+//情景菜单dom实例
+const actionButtonsRefs = ref<Record<string, Element | null>>({});
+
+// 取得 graphStore 实例
+const graphStore = useGraphStore();
+
+const { selectedShape } = storeToRefs(graphStore);
+
+// 是否正在“外部创建拖拽”（
+const isExternalCreateDragging = ref(false)
+// 光标样式（仅在按下时切换）
+const cursorStyle = ref<"default" | "pointer">("default");
+// 缩放时使用的预览框
+const resizeGhostShadow = computed<Shape[]>(() => {
+  const out: Shape[] = [];
+  for (const id in groupGhost.value) {
+    const s = graphStore.shapes.find((x) => x.id === id);
+    if (!s) continue;
+    out.push({
+      ...s,
+      bounds: { ...groupGhost.value[id] },
+      meta: { ...(s as any).meta, isGhost: true } as any,
+    } as Shape);
+  }
+  return out;
+});
+//判断嵌套预览框
+const hoverRect = computed(() => {
+  const id = graphStore.hoverContainerId;
+  if (!id) return null;
+  const s = graphStore.shapes.find((x) => x.id === id);
+  if (!s) return null;
+  const b = getBounds(s);
+  return { x: b.x, y: b.y, width: b.width, height: b.height };
+});
+// 把拖动缩放预览框合并，
+const allGhosts = computed<Shape[]>(() => {
+  const byId = new Map<string, Shape>();
+  // 收集所有Ghost形状
+  if (!isExternalCreateDragging.value) {
+    graphStore.ghostShadow.forEach(g => byId.set(g.id, g))
+  }
+  // 缩放时的预览
+  resizeGhostShadow.value.forEach((g) => byId.set(g.id, g));
+  // 添加高亮图元
+  if (highlightedShape.value) {
+    byId.set(highlightedShape.value.id, {
+      ...highlightedShape.value,
+      meta: {
+        ...(highlightedShape.value as any).meta,
+        isHighlighted: true,
+        isGhost: true,
+      },
+    });
+  }
+
+  return Array.from(byId.values());
+});
+
+const getGhostShapeStyle = (shape: Shape): CSSProperties => {
+  const baseStyle = getShapeStyle(shape);
+  return baseStyle;
+};
+// 根层引用：用于本地坐标换算
+const layerRef = ref<HTMLDivElement | null>(null);
+
+// 名称编辑状态
+const isEditingName = ref(false);
+const editingName = ref("");
+const nameInput = ref<HTMLInputElement>();
+
+// Pin 名称编辑输入框样式（放大，随字体自适应），非 Pin 返回空由 CSS 控制
+const nameInputStyle = computed(() => {
+  const s = graphStore.selectedShape as any
+  if (!s) return {}
+  const isPin = String(s?.shapeType || '').toLowerCase() === 'pin'
+  const ns = s?.nameStyle || {}
+  const nb = s?.nameBounds || {}
+  const fs = Number(ns.fontSize || nb.height || 12)
+  if (!isPin) return {}
+  return {
+    width: '100%',
+    height: '100%',
+    fontSize: `${fs}px`,
+    lineHeight: `${Math.ceil(fs + 8)}px`,
+    padding: '4px 6px',
+    boxSizing: 'border-box' as const,
+  }
+})
+
+// 缩放状态
+const isResizing = ref(false);
+// 点击情景菜单状态
+const actionButtonMode = ref(false);
+const resizeDirection = ref<"nw" | "ne" | "sw" | "se" | "">("");
+const startPos = ref({ x: 0, y: 0 });
+const startBounds = ref({ x: 0, y: 0, width: 0, height: 0 });
+let offDrag: null | (() => void) = null;
+// 框选状态
+const marqueeRect = ref<Rect | null>(null);
+const marqueeAnchor = ref<{ x: number; y: number } | null>(null);
+// 是否多选
+const isMultiSelected = computed(() => graphStore.selectedIds.length > 1);
+
+// 连接层相关状态
+const mousePosition = ref({ x: 0, y: 0 });
+const showLine = ref(false);
+const currentConnectPoint = ref({ x: 0, y: 0 });
+const isConnecting = ref(false); // 是否正在连接状态
+const targetConnectPoint = ref({ x: 0, y: 0 }); // 目标连接点
+const targetShape = ref<Shape | null>(null); // 目标图形
+
+// 高亮工具实例
+const highlightUtils = new HighlightUtils(graphStore);
+
+// 高亮相关状态 - 使用计算属性从工具类获取
+const highlightedShape = computed(() => highlightUtils.getHighlightedShape());
+const sourceShape = ref<Shape | null>(null)
+const recordClickPoint = ref({ x: 0, y: 0 })
+// 高亮相关状态
+const highlightTimeout = ref<ReturnType<typeof setTimeout> | null>(null); // 高亮定时器
+
+// 组拖拽的预览
+const groupBase = ref<Record<string, Rect>>({}); // 按下时各 shape 的快照
+const groupGhost = ref<Record<string, Rect>>({}); // 拖动中的预览矩形
+const resizingTarget = ref<Shape | null>(null);
+// 框选矩形的样式
+const getMarqueeStyle = (r: Rect): CSSProperties => ({
+  position: "absolute",
+  left: `${r.x}px`,
+  top: `${r.y}px`,
+  width: `${r.width}px`,
+  height: `${r.height}px`,
+  // background: 'rgba(52,152,219,0.12)',
+  border: "2px dashed #a6ddff",
+  pointerEvents: "none",
+  zIndex: 20,
+});
+// 正在交互：缩放中 或 元素拖动中
+const isBusy = computed(() =>
+  isResizing.value || (graphStore.isDragging && graphStore.ghostShadow.length > 0)
+)
+// 四个角手柄（常量）
+const resizeHandles: { position: "nw" | "ne" | "sw" | "se" }[] = [
+  { position: "nw" },
+  { position: "ne" },
+  { position: "sw" },
+  { position: "se" },
+];
+
+// 监听所有可能影响菜单显示的操作状态
+const shouldCloseMenu = computed(() => {
+  return graphStore.isDragging || isResizing.value || isEditingName.value;
+});
+
+// 预览框（ghost）的 bounds，仅在缩放时存在
+type Rect = { x: number; y: number; width: number; height: number };
+
+//动态绑定ref
+const setActionButtonsRef = (el: Element | ComponentPublicInstance | null, shapeId: string) => {
+  // 只存储 DOM 元素（过滤掉组件实例）
+  // 当el为null时（元素销毁），清空对应引用
+  if (el === null) {
+    actionButtonsRefs.value[shapeId] = null;
+    return;
+  }
+  // 只存储DOM元素，过滤组件实例
+  if (el instanceof Element) {
+    actionButtonsRefs.value[shapeId] = el;
+  } else {
+    actionButtonsRefs.value[shapeId] = null;
+  }
+};
+
+
+// 计算操作按钮的位置样式
+const getActionButtonsStyle = (shape: Shape, shapeId: string): CSSProperties => {
+  // 前置校验：shapeId不存在/元素已销毁，直接返回空样式
+  if (!shapeId || !actionButtonsRefs.value[shapeId] || !layerRef.value) {
+    return {
+      position: "absolute",
+      left: `${(shape.bounds?.width ?? 100) + 15}px`,
+      top: '0px',
+      zIndex: 1000,
+    };
+  }
+
+  const shapeBounds = shape.bounds ?? {};
+  const shapeWidth = shapeBounds.width ?? 100;
+  const shapeHeight = shapeBounds.height ?? 40;
+  if (!shape.scenarioMenus) {
+    return {}
+  }
+  // 按钮宽度：28px，间距4px，共5个按钮 (根据接口动态替换)
+  const hasTypeButton = !!shape.modelTypePropertyId;
+  const totalButtons = (shape.scenarioMenus ? shape.scenarioMenus!.length : 0) + (hasTypeButton ? 1 : 0);
+  const buttonsHeight = 28 * totalButtons + 4 * (totalButtons - (totalButtons > 0 ? 1 : 0));
+  const shapeTop = shape.bounds?.y ?? 0;
+  if (shapeTop < 10) { // 固定阈值，不受按钮DOM样式修改影响
+    return {
+      position: "absolute",
+      left: `${shapeWidth + 15}px`, // 紧贴形状右侧，间距5px
+      top: `10px`, // 顶部对齐
+      zIndex: 1000,
+    };
+  }
+  return {
+    position: "absolute",
+    left: `${shapeWidth + 15}px`, // 紧贴形状右侧，间距5px
+    top: `${(shapeHeight - buttonsHeight) / 2}px`, // 垂直居中
+    zIndex: 1000,
+  };
+};
+
+const clickActionButton = (event: MouseEvent, value: string, shape: Shape) => {
+  // 阻止事件冒泡，避免触发 onLayerClick
+  event.stopPropagation();
+  event.preventDefault();
+
+  // 清除选中状态，避免第一次点击时取消选中导致需要点击两次
+  graphStore.clearSelection();
+
+  actionButtonMode.value = true
+  emit('actionButtonClick', value, shape);
+}
+
+const clickModelTypePropertyIdButton = (value: string, shape: Shape) => {
+  emit('modelTypePropertyIdButtonClick', value, shape);
+}
+
+// 计算样式：调用 utils（保持单一职责）
+const getSelectionBoxStyle = (shape: Shape) => selectionBoxStyle(shape);
+const getHandleStyle = (h: any, shape: Shape) => handleStyle(h.position, shape);
+
+
+
+// 名称编辑
+const startEditName = async () => {
+  if (!graphStore.selectedShape) return;
+  isEditingName.value = true;
+  editingName.value = graphStore.selectedShape.name;
+  await nextTick();
+  nameInput.value?.focus();
+  nameInput.value?.select();
+};
+
+const finishEditName = () => {
+  if (!graphStore.selectedShape || !isEditingName.value) return;
+  const next = editingName.value.trim();
+  if (next && next !== graphStore.selectedShape.name) {
+    emit("editName", graphStore.selectedShape, next);
+    graphStore.updateShape(graphStore.selectedShape.id, { name: next });
+  }
+  isEditingName.value = false;
+};
+
+const cancelEditName = () => {
+  isEditingName.value = false;
+  editingName.value = "";
+};
+
+// 属性面板
+const onLayerDblClick = (payload: boolean) => {
+  emit("propertyPanel", payload);
+};
+
+// 处理点击事件，检查是否点击了text元素
+const onLayerClick = (evt: MouseEvent) => {
+  const target = evt.target as HTMLElement;
+
+  // 检查是否点击了右键菜单
+  const contextMenu = document.querySelector(".context-menu");
+  if (contextMenu && contextMenu.contains(target)) {
+    // 点击了菜单内部，不处理
+    return;
+  }
+
+  // 检查目标元素本身或其父元素是否是text元素
+  let currentElement: HTMLElement | null = target;
+  while (currentElement && currentElement !== layerRef.value) {
+    if (currentElement.tagName === "text") {
+      // 如果是text元素，不处理点击事件，让事件穿透到Capability组件
+      // 不调用stopPropagation，让事件继续冒泡
+      return;
+    }
+    currentElement = currentElement.parentElement;
+  }
+
+  // 如果点击了非菜单区域，关闭菜单
+  if (showContextMenu.value) {
+    showContextMenu.value = false;
+  }
+
+  // 检查是否点击了name-text-box
+  if (target.classList.contains("name-text-box")) {
+    startEditName();
+    return;
+  }
+
+  // 处理连接状态下的点击事件
+  if (isConnecting.value && props.connectShapeData && props.diagramBounds) {
+    const canvas = document.querySelector(".diagram-content");
+    if (!canvas || !props.diagramBounds) {
+      handleConnectLayerClick(evt);
+      return;
+    }
+    recordClickPoint.value = { x: evt.clientX, y: evt.clientY };
+    // 获取 sourceShape（先获取，确保存在）
+    const foundSourceShape = graphStore.shapes.find(
+      (shape) => shape.id === props.connectShapeData?.sourceId
+    );
+    if (!foundSourceShape) {
+      // 如果找不到 sourceShape，不处理
+      handleConnectLayerClick(evt);
+      return;
+    }
+    sourceShape.value = foundSourceShape;
+    // 确保连接点已初始化
+    initializeConnectPoint();
+
+    const canvasRect = canvas.getBoundingClientRect();
+    const clickX = evt.clientX - canvasRect.left - (props.diagramBounds?.x || 0);
+    const clickY = evt.clientY - canvasRect.top - (props.diagramBounds?.y || 0);
+
+    // 判断点击位置是否有图形
+    const hasShapeAtPoint = EdgeUtils.isEndPointInShape(graphStore.shapes, { x: clickX, y: clickY });
+
+    // 修改：无论是否在actionButtonMode模式下，只要在连接状态且点击空白处，都创建新图元
+    if (!hasShapeAtPoint) {
+      // 使用 cloneDeep 克隆 sourceShape
+      console.log(props.connectShapeData, 'props.connectShapeData');
+      console.log(props.connectShapeData.scenarioMenus, 'scenarioMenus');
+      const newShape = _.cloneDeep(foundSourceShape);
+
+      // 修改 id（使用 getUuid）
+      newShape.id = getUuid();
+
+      // 特殊情况：如果 targetModels 有且只有一个，且找到对应的 menu，使用 targetModel 作为 shapeKey
+      // 在 scenarioMenus 中查找 code 为当前 connectShapeData.shapeKey 的 menu
+      const currentMenu = props.connectShapeData?.scenarioMenus?.find(
+        (menu) => menu.code === props.connectShapeData?.shapeKey
+      );
+      // 获取 targetModels，优先使用 currentMenu 中的值
+      const targetModels = currentMenu?.targetCreateModel?.split(',')
+        || props.connectShapeData?.targetCreateModel?.split(',');
+
+      // 如果只有一个 targetModel，使用它作为 shapeKey
+      if (targetModels?.length === 1) {
+        newShape.shapeKey = targetModels[0];
+      }
+
+      // 修改 bounds 的 x, y, width, height
+      const defaultWidth = foundSourceShape.bounds?.width || 100;
+      const defaultHeight = foundSourceShape.bounds?.height || 50;
+
+      // 鼠标位置是新 shape 的左边中点，所以 x = clickX, y = clickY - height/2
+      const newShapeX = clickX;
+      const newShapeY = clickY - defaultHeight / 2;
+      const diagramId = newShape.diagramId;
+
+      newShape.bounds = {
+        ...newShape.bounds,
+        x: newShapeX,
+        y: newShapeY,
+        width: defaultWidth,
+        height: defaultHeight,
+        modelId: '',
+      };
+
+      // 添加新 shape 到画布，只传递 shapeKey 和 x, y 坐标
+      emit('actionButtonAdd', { shapeKey: newShape.shapeKey, x: newShapeX, y: newShapeY, diagramId: diagramId });
+      return;
+    } else {
+      handleConnectLayerClick(evt);
+      return;
+    }
+  }
+};
+// 开始拖拽改变图元大小
+const startResize = (
+  e: MouseEvent,
+  dir: "nw" | "ne" | "sw" | "se",
+  target: Shape
+) => {
+  // 为conceptualRole禁用拖拽放大功能
+  if (target.shapeKey === 'ConceptRole') {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
+
+  if (graphStore.selectedIds.length > 1) {
+    // 阻止事件冒泡到外层，避免触发拖拽或框选
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
+  // const s = graphStore.selectedShape;
+  e.preventDefault();
+  e.stopPropagation();
+
+  isResizing.value = true;
+  resizingTarget.value = target;
+  resizeDirection.value = dir;
+
+  // 发送缩放开始事件
+  eventBus.emit('resize-start', { target });
+  // 记录 anchor（按下时的指针位置）
+  const anchor = toLocalPoint(e, layerRef.value);
+  startPos.value = { x: anchor.x, y: anchor.y };
+  // 记录基准 bounds（按下那一刻）
+  const b = target.bounds ?? {};
+  startBounds.value = {
+    x: b.x ?? 0,
+    y: b.y ?? 0,
+    width: b.width ?? 100,
+    height: b.height ?? 50,
+  };
+  // 初始 ghost = 起始尺寸
+  groupBase.value = { [target.id]: { ...startBounds.value } };
+  groupGhost.value = { [target.id]: { ...startBounds.value } };
+  offDrag = withDrag(handleResize, stopResize);
+};
+
+// 最小尺寸
+const minW = 50,
+  minH = 30;
+
+// 计算文本所需最小宽度 - 应用于所有图形类型
+const calculateTextMinWidth = (shape: Shape): number => {
+  // 对于所有图形类型，使用与Block.vue中相同的宽度计算逻辑
+  // 获取字体大小（与Block.vue中逻辑一致）
+  const nameStyle = shape.nameStyle || {};
+  const nameBounds = shape.nameBounds || {};
+  const fontSize = nameStyle.fontSize || nameBounds.height || 12;
+  // 假设每个字符的平均宽度是字体大小的0.6倍
+  const charWidth = fontSize * 1;
+
+  // 计算名称文本的宽度
+  const nameTextWidth = (shape.name?.length || 0) * charWidth;
+  // 计算关键词文本的宽度
+  const keywordsTextWidth = (shape.keywords?.length || 0) * charWidth;
+
+  // 返回较大的宽度，并添加一些边距（左右各10px）
+  const maxTextWidth = Math.max(nameTextWidth, keywordsTextWidth);
+  const estimatedTextWidth = maxTextWidth + 60; // 左右各10px边距
+
+  // 确保最小宽度不小于minW
+  return Math.max(minW, estimatedTextWidth);
+};
+
+/**
+ * 缩放过程中：只更新 ghostBounds（预览框），不直接改实体。
+ * 松开鼠标时在方法里 里一次性把 ghost 落盘到元素上。
+ */
+const handleResize = (e: MouseEvent) => {
+  // 没在缩放 or 没有有效的缩放目标 => 不处理
+  if (!isResizing.value || !resizingTarget.value) return;
+  // 当前指针在交互层的本地坐标
+  const curr = toLocalPoint(e, layerRef.value);
+  //  按下那一刻的元素矩形（作为缩放基准）
+  const base = startBounds.value;
+  // 当前激活的手柄方向
+  const handle = resizeDirection.value as "nw" | "ne" | "sw" | "se";
+  // 当前被缩放的 shape
+  const shape = resizingTarget.value;
+  // 容器（画布）的约束：只限制left和top不小于0，不限制right和bottom以允许无限放大
+  const container = {
+    left: 0,
+    top: 0,
+    right: Infinity,
+    bottom: Infinity,
+  };
+  // 通过策略读取本图元需要约束的边（left/top/right/bottom）
+  const edges = getPolicy(shape).constrainToDiagram;
+
+  // 计算基于文本内容的最小宽度
+  const dynamicMinW = calculateTextMinWidth(shape);
+
+  // 关键修复：在缩放过程中，我们需要区分当前是在放大还是缩小
+  // 对于缩小操作，使用基于文本内容的最小宽度约束
+  // 对于放大操作，暂时使用更小的最小宽度约束，允许用户自由放大
+  const dx = curr.x - startPos.value.x;
+  const isEnlarging = (handle === 'ne' || handle === 'se') ? dx > 0 : dx < 0;
+
+  // 如果是放大操作，使用一个很小的值作为临时最小宽度
+  // 这样可以允许用户从任何宽度开始自由放大
+  let effectiveMinW = isEnlarging ? minW / 2 : Math.max(minW, dynamicMinW);
+
+  // 根据shapeKey确定最小高度
+  let effectiveMinH = 70; // 默认block组件的最小高度
+  if (shape.shapeKey) {
+    if (props.packages && props.packages.includes(shape.shapeKey)) {
+      effectiveMinH = 85;
+    } else if (props.diagram && props.diagram.includes(shape.shapeKey)) {
+      effectiveMinH = 80;
+    } else if (props.taggedValueLabels && props.taggedValueLabels.includes(shape.shapeKey)) {
+      effectiveMinH = 125;
+    } else if (graphStore.pinsTypes.includes(shape.shapeKey)) {
+      effectiveMinH = 22;
+      effectiveMinW = 22
+    } else if (graphStore.portsTypes.includes(shape.shapeKey)) {
+      effectiveMinH = 22;
+      effectiveMinW = 22
+    }
+  }
+
+  // 判断是否为diagram组件
+  const isDiagramComponent = shape.shapeKey && props.diagram && props.diagram.includes(shape.shapeKey);
+
+  // 用通用几何函数计算“下一帧的ghost矩形”
+  //    - anchor 用按下时的指针坐标 startPos
+  //    - 使用最小可能的约束以允许自由缩放
+  let next = ghostResizeStep(
+    { x: base.x, y: base.y, width: base.width, height: base.height },
+    handle,
+    { x: startPos.value.x, y: startPos.value.y },
+    curr,
+    container,
+    // 只限制left和top，不限制right和bottom，允许自由放大
+    { left: edges.left, top: edges.top, right: false, bottom: false },
+    effectiveMinW,
+    effectiveMinH
+  );
+
+  // 对于diagram组件，保持高度不变
+  if (isDiagramComponent && shape.shapeType === 'shape') {
+    next = { ...next, height: base.height };
+  }
+
+  // 移除额外的宽度调整，因为ghostResizeStep已经处理了最小宽度约束
+  // 这样可以避免重复调整导致的预览框闪烁
+  // 兼容旧逻辑：如果是「画布」图元，缩放时不移动其 (x,y)
+  const isDiagram = (shape as any).shapeType?.toLowerCase?.() === "diagram";
+  if (isDiagram) {
+    next = { ...next, x: base.x, y: base.y };
+    next.x = Math.max(0, next.x);
+    next.y = Math.max(0, next.y);
+  }
+  // 判断是否是隔间组件
+  if (isCompartment(shape)) {
+    next = clampCompartmentResize(
+      graphStore.shapes,   // 所有图元，用于找子
+      shape,               // 正在缩放的父
+      next,                // ghost 下一帧
+      resizeDirection.value as "nw" | "ne" | "sw" | "se"
+    )
+  }
+
+  next = clampParentRectToChildrenGap(
+    graphStore.shapes,
+    shape, // 正在被缩放的父
+    next,
+    resizeDirection.value as any,
+    0, // gap
+    effectiveMinW, // 使用effectiveMinW而不是minW
+    minH,
+    groupGhost.value // 若有子也在 ghost，用它保证更准确
+  );
+
+  // 写到统一的 groupGhost（与拖动预览共用一条通路）
+  groupGhost.value = {
+    ...groupGhost.value,
+    [shape.id]: next,
+  };
+};
+// 停止缩放：复位状态并清理监听
+const stopResize = () => {
+  if (!isResizing.value || !resizingTarget.value) return;
+  const id = resizingTarget.value.id;
+  const shape = resizingTarget.value;
+  const final = groupGhost.value[id] ?? startBounds.value;
+
+  // 计算基于文本内容的最小宽度
+  let dynamicMinW = calculateTextMinWidth(shape);
+
+  // 根据shapeKey确定最小高度
+  // 如果shapeKey属于packages数组，最小高度为90
+  // 如果shapeKey属于diagram数组，最小高度为50
+  // 其他情况（block组件）最小高度为70
+  let minHeight = 70; // 默认block组件的最小高度
+  if (shape.shapeKey) {
+    if (props.packages && props.packages.includes(shape.shapeKey)) {
+      minHeight = 90;
+    } else if (props.diagram && props.diagram.includes(shape.shapeKey)) {
+      minHeight = 50;
+    } else if (graphStore.pinsTypes.includes(shape.shapeKey)) {
+      minHeight = 22;
+      dynamicMinW = 22
+    } else if (graphStore.portsTypes.includes(shape.shapeKey)) {
+      minHeight = 22;
+      dynamicMinW = 22
+    }
+  }
+
+  // 判断是否为diagram组件
+  const isDiagramComponent = shape.shapeKey && props.diagram && props.diagram.includes(shape.shapeKey);
+
+  // 确保宽度不小于文本所需最小宽度，高度不小于对应组件的最小高度
+  let finalBounds = { ...final };
+  if (final.width < dynamicMinW) {
+    finalBounds.width = dynamicMinW;
+  }
+
+  // 对于非diagram组件，保持最小高度限制
+  if (!isDiagramComponent && final.height < minHeight) {
+    finalBounds.height = minHeight;
+  }
+
+  // 对于diagram组件，确保最终应用时保持原始高度
+  if (isDiagramComponent && shape.shapeType === 'shape') {
+    finalBounds = { ...finalBounds, height: startBounds.value.height };
+  }
+
+  // 移除任何可能的容器约束限制，允许图元无限放大
+
+  // 获取原始形状以检查是否真的有变化
+  const shapeBefore = graphStore.shapes.find((s) => s.id === id);
+  const changed = shapeBefore && !_.isEqual(shapeBefore.bounds, finalBounds);
+
+  if (changed) {
+    // 只有确实有变化时才更新
+    graphStore.updateShape(id, { bounds: finalBounds });
+
+    // 统一收尾并检查是否有重新父子关系
+    const containerForFinalize =
+      graphStore.hoverContainerId && graphStore.hoverNestable ? graphStore.hoverContainerId : null;
+
+    const didReparent = finalizeAfterTransform(
+      graphStore.shapes,
+      [id],
+      { [id]: finalBounds },
+      [id],
+      graphStore.currentDiagramId,
+      containerForFinalize,
+      graphStore.updateShape
+    );
+
+    if (didReparent) {
+      normalizeZOrder(
+        graphStore.shapes,
+        graphStore.currentDiagramId,
+        graphStore.updateShape,
+        1,
+        1
+      );
+    }
+
+    // 调用graphStore中的方法处理缩放结束后的事件发射
+    graphStore.endResizeShape(id);
+  }
+
+  // 发送缩放结束事件
+  eventBus.emit('resize-end', { target: resizingTarget.value });
+
+  // 清理状态
+  isResizing.value = false;
+  resizeDirection.value = "";
+  resizingTarget.value = null;
+  groupBase.value = {};
+  groupGhost.value = {};
+  offDrag?.();
+  offDrag = null;
+};
+
+// 处理线条点击事件
+const handleEdgeClick = (shape: Shape, event: MouseEvent) => {
+  console.log('通过edge-click事件选中的线条数据:', shape);
+  graphStore.selectShape(shape);
+  event.stopPropagation();
+};
+
+// 根层按下：命中测试 + 选中 + 切换光标
+const DRAG_THRESHOLD = 4;
+const onLayerMouseDown = (evt: MouseEvent) => {
+  // 若点击的是名称虚线框/容器，避免触发清选或框选（Pin 的名称可能在外部）
+  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
+  }
+  if (isResizing.value || isEditingName.value) return;
+  if (graphStore.isDragging) graphStore.endDragShape();
+  if (offDrag) {
+    offDrag();
+    offDrag = null;
+  }
+  const pt = toLocalPoint(evt, layerRef.value);
+  // 添加详细的点击位置日志
+  // console.log('鼠标点击位置:', pt);
+
+  // 执行命中测试
+  const hit = pickTarget(graphStore.shapes, pt);
+  // console.log('命中测试结果:', hit.kind, hit.shape?.id, hit.shape?.shapeType);
+  // 如果右键菜单已显示且点击了其他图元，关闭菜单
+  if (
+    showContextMenu.value &&
+    (hit.kind === "shape" || hit.kind === "pin") &&
+    (!contextMenuTarget.value || hit.shape.id !== contextMenuTarget.value.id)
+  ) {
+    showContextMenu.value = false;
+  }
+
+  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";
+  if (wantMarquee) {
+    if ((hit.kind !== "shape" && hit.kind !== "edge" && hit.kind !== "pin") && !evt.shiftKey) {
+      graphStore.clearSelection();
+    }
+    startMarquee(pt);
+    evt.preventDefault();
+    return;
+  }
+  // 双击触发不同逻辑
+  if (evt.detail === 2 && graphStore.marqueeShapes.length == 1) {
+    const selectedShape = graphStore.selectedShape;
+    console.log('双击选中的图元:', selectedShape);
+
+    // 判断是否为Diagram组件
+    if (selectedShape && selectedShape.shapeType !== 'edge' && props.diagram?.includes(selectedShape.shapeKey)) {
+      // Diagram组件的特殊双击逻辑
+      // 这里可以添加你想要的其他逻辑，例如发射自定义事件
+      emit('diagramDoubleClick', selectedShape);
+      // console.log(selectedShape,'Diagram组件双击事件');
+      // 不打开属性面板
+    } else {
+      // 所有其他组件（包括连线）都打开属性面板
+      onLayerDblClick(true);
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+    return;
+  }
+  if (hit.kind === "shape" || hit.kind === "edge" || hit.kind === "pin") {
+    const { shape } = hit;
+
+    // 打印选中元素的数据信息 - 确保每次点击都能看到
+    console.log('点击选中的' + (hit.kind === 'edge' ? '线条' : hit.kind === 'pin' ? 'Pin' : '图元') + '数据信息:', shape);
+
+    const isMulti = graphStore.selectedIds.length > 1;
+    const clickedInSelection = graphStore.selectedIds.includes(shape.id);
+
+    if (isMulti && clickedInSelection) {
+      // 多选状态下点击已选中元素，保持现状
+    } else {
+      // 其他情况：单选当前元素
+      graphStore.clearSelection();
+      graphStore.selectShape(shape);
+    }
+    // 选区此时已是“正确”的：要么多选集合，要么当前单选
+    const ids = graphStore.selectedIds.length
+      ? graphStore.selectedIds.slice()
+      : [hit.shape.id];
+    // 准备“潜在拖拽”，但先不触发 store.startDrag
+    let started = false;
+    // 绑定拖拽生命周期，把 move/up 转发给 store
+    offDrag = withDrag(
+      (e) => {
+        const curr = toLocalPoint(e, layerRef.value);
+        const dx = curr.x - pt.x;
+        const dy = curr.y - pt.y;
+        const dist2 = dx * dx + dy * dy;
+
+        if (!started && dist2 >= DRAG_THRESHOLD * DRAG_THRESHOLD) {
+          // 真正超过阈值，再启动 store 的拖拽生命周期
+          started = true;
+          graphStore.startDrag(ids, pt);
+        }
+        if (started) {
+          // 如果是 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);
+              if (parentShape) {
+                // 使用移动专用的吸附方法：根据 dragOffset 计算应传入 moveDraggedShape 的指针坐标
+                targetPt = snapPinPointerOnMove(curr, parentShape, draggedShape, graphStore.dragOffset || undefined);
+              }
+            }
+          }
+          graphStore.moveDraggedShape(targetPt);
+        }
+      },
+      () => {
+        // 只有在“真的开始拖拽”后，才结束拖拽
+        if (started) {
+          graphStore.endDragShape();
+        } else {
+          // 纯点击：啥也不做（已完成选中），避免误触发 reparent/zIndex
+          cursorStyle.value = "default";
+          emit("property-panel", false);
+        }
+        offDrag = null;
+      }
+    );
+  }
+};
+// 框选部分
+const startMarquee = (anchor: { x: number; y: number }) => {
+  // 读取画布容器（diagram 的边界）
+  const container = getDiagramRect(graphStore.shapes);
+  // 只限制“左/上”，右/下允许溢出
+  const edges = { left: true, top: true } as const;
+  //将按下点也先做一次夹取（避免从负坐标起框）
+  const anchorClamped = clampPointToRect(
+    anchor,
+    { x: 0, y: 0, width: 0, height: 0 },
+    container,
+    edges
+  );
+  // 记录锚点与初始化预览矩形
+  marqueeAnchor.value = anchorClamped;
+  marqueeRect.value = {
+    x: anchorClamped.x,
+    y: anchorClamped.y,
+    width: 0,
+    height: 0,
+  };
+  // 拖拽生命周期
+  offDrag?.();
+  offDrag = null;
+  offDrag = withDrag(
+    // move：更新框选矩形 + 实时刷新选区
+    (e) => {
+      // 当前指针的本地坐标
+      const currRaw = toLocalPoint(e, layerRef.value);
+      // 只对左/上做夹取（右/下不限制）
+      const currClamped = clampPointToRect(
+        currRaw,
+        { x: 0, y: 0, width: 0, height: 0 },
+        container,
+        edges
+      );
+      // 根据“锚点 & 当前点”得到框选矩形（会自动处理反向拖拽）
+      const rect = rectFromPoints(marqueeAnchor.value!, currClamped);
+      marqueeRect.value = rect;
+      // 只选“完全位于框内”的图元（排除 diagram）
+      const ids = graphStore.shapes
+        .filter((s) => s.shapeType?.toLowerCase?.() !== "diagram")
+        .filter((s) => rectContainsRect(rect, getBounds(s)))
+        .map((s) => s.id);
+      // 多选：所有被框中的图元都进入选中态
+      graphStore.selectMany(ids);
+    },
+    // 结束框选，清理预览
+    () => {
+      marqueeAnchor.value = null;
+      marqueeRect.value = null;
+      cursorStyle.value = "default";
+    }
+  );
+};
+
+// 鼠标抬起：恢复光标
+const onLayerMouseUp = () => {
+  if (!isResizing.value) cursorStyle.value = "default";
+};
+
+// 右键菜单状态
+const showContextMenu = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
+const contextMenuTarget = ref<Shape | null>(null);
+
+// 是否允许连接当前高亮的图元
+const isConnectAllowed = ref(false);
+
+// 高亮图元的边框样式 - 使用工具类实现
+const highlightShape = (shape: Shape | null, isHighlight: boolean, isValidSource: boolean = true) => {
+  highlightUtils.highlightShape(shape, isHighlight, isValidSource);
+};
+
+// 处理右键点击事件
+const handleContextMenu = (event: MouseEvent) => {
+  // 如果图元正在移动或缩放，则不显示菜单
+  if (graphStore.isDragging || isResizing.value) {
+    return;
+  }
+
+  event.preventDefault();
+
+  // 获取点击位置
+  const point = toLocalPoint(event, layerRef.value);
+
+  // 使用命中测试找到点击的图元
+  const hit = pickTarget(graphStore.shapes, point);
+
+  if (hit.kind === "shape") {
+    // 显示右键菜单
+    showContextMenu.value = true;
+    contextMenuPosition.value = {
+      x: event.clientX,
+      y: event.clientY,
+    };
+    contextMenuTarget.value = hit.shape;
+    graphStore.selectShape(hit.shape);
+  } else {
+    // 如果没有点击图元，隐藏菜单
+    showContextMenu.value = false;
+  }
+};
+
+// 菜单项处理函数
+const handleMenuDelete = () => {
+  if (contextMenuTarget.value) {
+    // removeSelected();
+    graphStore.removeSelected();
+  }
+  showContextMenu.value = false;
+};
+
+// 关闭右键菜单
+const closeMenu = () => {
+  showContextMenu.value = false;
+  contextMenuTarget.value = null;
+};
+
+watch(
+  () => graphStore.shapes,
+  () => {
+    nextTick(adjustCanvasToFitAllShapes);
+  },
+  { deep: true, immediate: true }
+);
+
+// 监听图元状态
+watch(shouldCloseMenu, (shouldClose) => {
+  if (shouldClose && showContextMenu.value) {
+    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);
+          isConnecting.value = false;
+          highlightUtils.clearHighlightTimeout();
+          actionButtonMode.value = false;
+          if (highlightTimeout.value) {
+            clearTimeout(highlightTimeout.value);
+            highlightTimeout.value = null;
+          }
+        }
+      }
+    }
+    // 处理 actionButtonShapeData 的逻辑
+  }
+});
+// 监听delete键移除图元
+const onKeyDownDelete = (e: KeyboardEvent) => {
+  const target = e.target as HTMLElement | null
+  if (target) {
+    const tag = target.tagName
+    // 如果在原生输入类控件里（input / textarea）
+    if (tag === 'INPUT' || tag === 'TEXTAREA') {
+      return // 让浏览器自己处理 Delete，删文字，不动图元
+    }
+  }
+  // 仅处理 Delete；
+  if (e.key !== "Delete") return;
+  e.preventDefault(); // 避免浏览器默认行为
+  //选中的图元中如果有画布(diagram)，则不允许删除
+  const selectedShapes = graphStore.marqueeShapes ?? []
+  // 判断是否包含画布
+  const hasDiagram = selectedShapes.some(s =>
+    s.shapeType?.toLowerCase?.() === 'diagram'
+  )
+  if (hasDiagram) {
+    // 选中了画布，直接不处理删除
+    return
+  }
+  const items = selectedShapes
+    .map(s => ({
+      modelId: s.modelId,
+      shapeId: s.id,           // 图元 id
+      shapeType: s.shapeType,  // 图元类型
+      isRemoveModelTree: false
+    }))
+
+  if (!items.length) return;
+  eventBus.emit('shapes-remove', items);
+};
+
+// 鼠标移动事件处理
+const handleMouseMove = (event: MouseEvent) => {
+  const { clientX, clientY } = event;
+
+  // 使用工具类检查是否在画布内
+  if (EdgeUtils.isWithinCanvas(clientX, clientY)) {
+    mousePosition.value = { x: clientX, y: clientY };
+
+    // 只有在连接状态下才显示线条
+    if (isConnecting.value) {
+      showLine.value = true;
+      updateConnectPointToNearest(clientX, clientY);
+      checkHoverTarget(clientX, clientY);
+    }
+  } else {
+    if (isConnecting.value) {
+      showLine.value = false;
+    }
+    highlightShape(null, false); // 使用highlightShape函数取消高亮，恢复原始样式
+  }
+};
+
+// 用于跟踪上一次的hoverShape，避免重复发射事件
+let lastHoverShapeId: string | null = null;
+
+const checkHoverTarget = (clientX: number, clientY: number) => {
+  if (!props.diagramBounds) return;
+
+  // 使用工具类检查悬停目标
+  const hoverShape = EdgeUtils.checkHoverTarget(
+    clientX,
+    clientY,
+    graphStore.shapes,
+    props.diagramBounds,
+    props.connectShapeData?.sourceId
+  );
+  highlightUtils.clearHighlightTimeout();
+
+  if (hoverShape) {
+    // 检查连接有效性
+    let targetModels = props.connectShapeData?.targetModels;
+    if (actionButtonMode.value) {
+      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 || '';
+      isAllowed = targetModels.includes(hoverShapeType);
+    }
+    // 只有当hoverShape改变且connectShapeData存在时才发射事件
+    if (lastHoverShapeId !== hoverShape.id && props.connectShapeData) {
+      lastHoverShapeId = hoverShape.id;
+      // 使用更严格的优先级判断逻辑，确保只要有一个属性有实际值就使用它
+      let sourceModelId;
+      // 如果modelId是有效字符串或数字，使用modelId
+      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() !== '') {
+        sourceModelId = props.connectShapeData.sourceModelId;
+      }
+
+      // 只有当sourceModelId有值时就发射事件，并将isAllowed的值一并传递
+      if (sourceModelId) {
+        eventBus.emit('edge-check', {
+          sourceModelId: sourceModelId, // 显式指定键值对，避免属性简写可能带来的混淆
+          targetModelId: hoverShape.modelId,
+          isAllowed: isAllowed // 将验证结果一并发射
+        });
+      }
+    }
+    // 高亮目标图元 - 根据edgeCheck属性决定高亮颜色
+    // true为蓝色，false为红色
+    highlightUtils.setHighlightTimeout(() => {
+      highlightShape(hoverShape, true, props.edgeCheck);
+      isConnectAllowed.value = isAllowed;
+    }, 10);
+  } else {
+    // 如果没有悬停在目标上，重置lastHoverShapeId
+    lastHoverShapeId = null;
+    // 延迟取消高亮
+    highlightUtils.setHighlightTimeout(() => {
+      highlightShape(null, false);
+      isConnectAllowed.value = false;
+    }, 60);
+  }
+};
+
+// 更新连接点到最近的点
+const updateConnectPointToNearest = (mouseX: number, mouseY: number) => {
+  if (!props.connectShapeData?.sourceId || !props.diagramBounds) return;
+
+  const sourceShape = graphStore.shapes.find(
+    (shape) => shape.id === props.connectShapeData?.sourceId
+  );
+
+  // 使用工具类找到最近连接点
+  const nearestPoint = EdgeUtils.findNearestConnectPoint(
+    { x: mouseX, y: mouseY },
+    sourceShape,
+    props.diagramBounds
+  );
+
+  if (
+    nearestPoint &&
+    nearestPoint.x !== undefined &&
+    nearestPoint.y !== undefined
+  ) {
+    currentConnectPoint.value = {
+      x: nearestPoint.x,
+      y: nearestPoint.y,
+    };
+  }
+};
+
+// 监听isConnecting变化，重置连接状态
+watch(
+  () => isConnecting.value,
+  (newVal) => {
+    if (!newVal) {
+      isConnectAllowed.value = false;
+      highlightShape(null, false); // 取消图元高亮
+    }
+  }
+);
+
+// 处理连接层点击事件
+const handleConnectLayerClick = (event: MouseEvent) => {
+  const { clientX, clientY } = event;
+
+  const canvas = document.querySelector(".diagram-content");
+  if (!canvas || !props.diagramBounds) return;
+
+  const canvasRect = canvas.getBoundingClientRect();
+  const clickX = clientX - canvasRect.left - (props.diagramBounds?.x || 0);
+  const clickY = clientY - canvasRect.top - (props.diagramBounds?.y || 0);
+
+  const hit = pickTarget(graphStore.shapes, { x: clickX, y: clickY });
+
+  if (
+    hit.kind === "shape" &&
+    hit.shape.id &&
+    props.connectShapeData?.sourceId &&
+    hit.shape.id !== props.connectShapeData.sourceId
+  ) {
+    event.stopPropagation();
+    completeConnection(hit.shape, { x: clickX, y: clickY });
+  }
+};
+
+// 完成连接
+const completeConnection = (
+  clickedShape: Shape,
+  clickPoint: { x: number; y: number }
+) => {
+  const sourceShape = graphStore.shapes.find(
+    (shape: { id: string }) => shape.id === props.connectShapeData?.sourceId
+  );
+
+  // 检查目标图元类型是否符合targetModels要求
+  const targetModels = props.connectShapeData?.targetModels;
+  if (targetModels && Array.isArray(targetModels) && targetModels.length > 0) {
+
+    const clickedShapeType = clickedShape.shapeKey || '';
+    if (!targetModels.includes(clickedShapeType)) {
+      isConnecting.value = false;
+      highlightShape(null, false); // 取消图元高亮
+      highlightUtils.clearHighlightTimeout();
+      // alert('当前目标图元类型不符合连接要求');
+      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
+  );
+
+
+  // 如果边已存在，错误提示并返回
+  if (existingEdge) {
+    // alert('同类型的边已经存在，不能重复添加');
+    ElMessage.error('同类型的边已经存在，不能重复添加');
+    isConnecting.value = false;
+    highlightShape(null, false); // 取消图元高亮
+    highlightUtils.clearHighlightTimeout();
+    return;
+  }
+
+  // 使用工具类完成连接，传递当前的shapes列表以支持差异化路由
+  const connectionData = EdgeUtils.completeConnection(
+    sourceShape,
+    clickedShape,
+    clickPoint,
+    currentConnectPoint.value,
+    graphStore.shapes
+  );
+
+  if (connectionData) {
+    emit("connectEnd", connectionData);
+    isConnecting.value = false;
+    highlightShape(null, false); // 取消图元高亮
+    highlightUtils.clearHighlightTimeout();
+    actionButtonMode.value = false;
+
+  }
+};
+// 鼠标离开事件处理
+const handleMouseLeave = () => {
+  if (isConnecting.value) {
+    showLine.value = false;
+  }
+  highlightShape(null, false); // 取消图元高亮
+  highlightUtils.clearHighlightTimeout();
+};
+
+// 初始化连接点位置
+const initializeConnectPoint = () => {
+  if (props.connectShapeData?.sourceId && props.diagramBounds) {
+    const sourceShape = graphStore.shapes.find(
+      (shape) => shape.id === props.connectShapeData?.sourceId
+    );
+
+    // 使用工具类初始化连接点，传递当前鼠标位置和diagramBounds
+    // 这样可以确保即使是第一次连线，也能计算出图元边界上的合适连接点，而不是使用中心点
+    const initialPoint = EdgeUtils.initializeConnectPoint(
+      sourceShape,
+      recordClickPoint.value, // 传递鼠标点击位置
+      props.diagramBounds // 传递图表边界
+    );
+
+    if (initialPoint && sourceShape) { // 确保sourceShape存在，防止从工具栏拖拽时错误初始化
+      currentConnectPoint.value = initialPoint;
+
+      if (!isConnecting.value) {
+        // 进入连线状态前清空选中状态
+        graphStore.clearSelection();
+        isConnecting.value = true;
+        showLine.value = true;
+      }
+    } else {
+      // 如果没有找到sourceShape，重置连接状态
+      isConnecting.value = false;
+      showLine.value = false;
+    }
+  }
+};
+
+// 直接计算黑点样式 - 使用动态连接点
+const dotStyle = computed(() => {
+  if (!props.connectShapeData || !props.diagramBounds) {
+    return { display: "none" };
+  }
+
+  // 使用动态连接点位置
+  const { x, y } = currentConnectPoint.value;
+
+  return {
+    position: "absolute" as const,
+    left: `${x}px`,
+    top: `${y}px`,
+    width: "8px",
+    height: "8px",
+    pointerEvents: "none" as const,
+    zIndex: 1001,
+    transform: "translate(-50%, -50%)",
+  };
+});
+
+// SVG 样式
+const svgStyle = computed(() => {
+  if (
+    !props.connectShapeData ||
+    !props.connectShapeData.bounds ||
+    !props.diagramBounds
+  ) {
+    return { display: "none" };
+  }
+
+  return {
+    position: "absolute" as const,
+    left: "0px",
+    top: "0px",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none" as const,
+    zIndex: 1000,
+  };
+});
+
+// 计算直角线路径点（增加状态有效性判断）
+const linePoints = computed(() => {
+  // 新增：若未处于连线状态 / 线条未显示 / 无有效连接点，直接返回空值
+  if (
+    !isConnecting.value ||
+    !showLine.value ||
+    !props.connectShapeData ||
+    !props.diagramBounds ||
+    currentConnectPoint.value.x === 0 || // 排除无效默认值
+    currentConnectPoint.value.y === 0
+  ) {
+    return ""; // 返回空字符串，SVG 不会渲染任何线条
+  }
+
+  const canvas = document.querySelector(".diagram-content");
+  if (!canvas) return "";
+
+  const canvasRect = canvas.getBoundingClientRect();
+  const { x: startX, y: startY } = currentConnectPoint.value;
+
+  let endX, endY;
+  // 仅在连线状态下计算终点（避免无效值）
+  if (isConnecting.value) {
+    endX = mousePosition.value.x - canvasRect.left - props.diagramBounds.x;
+    endY = mousePosition.value.y - canvasRect.top - props.diagramBounds.y;
+  } else if (targetConnectPoint.value) {
+    endX = targetConnectPoint.value.x;
+    endY = targetConnectPoint.value.y;
+  } else {
+    return "";
+  }
+
+  // 使用工具类计算线路径
+  return EdgeUtils.calculateLinePoints(
+    { x: startX, y: startY },
+    { x: endX, y: endY }
+  );
+});
+
+// 连接层样式 - 定位到 diagramBounds 位置，确保在最顶层
+const layerStyle = computed(() => {
+  if (!props.diagramBounds) {
+    return { display: "none" };
+  }
+
+  return {
+    position: "absolute" as const,
+    left: `${props.diagramBounds.x}px`,
+    top: `${props.diagramBounds.y}px`,
+    width: `${props.diagramBounds.width}px`,
+    height: `${props.diagramBounds.height}px`,
+    pointerEvents: "none" as const,
+    // zIndex: 10000, // 确保在最顶层
+  };
+});
+
+// 处理键盘按键事件
+const handleKeyDown = (e: KeyboardEvent) => {
+  // 按下Esc且正在连线时，取消连线（增加 event.preventDefault 避免浏览器默认行为）
+  if (e.key === 'Escape' && isConnecting.value) {
+    e.preventDefault(); // 阻止浏览器默认的Esc行为（如关闭弹窗）
+    cancelConnection();
+  }
+};
+
+// 组件卸载时清理高亮工具
+onUnmounted(() => {
+  // 清理高亮工具实例
+  highlightUtils.dispose();
+});
+
+
+// 取消连线的方法（完全重置所有相关状态）
+const cancelConnection = () => {
+  // 1. 先停止连线状态，避免后续计算触发
+  isConnecting.value = false;
+
+  // 2. 重置关键坐标状态（核心：清空无效坐标，让 linePoints 无值可算）
+  currentConnectPoint.value = { x: 0, y: 0 }; // 重置为无效默认值
+  mousePosition.value = { x: 0, y: 0 };       // 重置鼠标位置
+  targetConnectPoint.value = { x: 0, y: 0 };  // 重置目标连接点
+  targetShape.value = null;                  // 清空目标图元
+
+  // 3. 清除高亮状态和定时器
+  highlightShape(null, false); // 取消图元高亮，恢复原始样式
+  highlightUtils.clearHighlightTimeout();
+
+  // 4. 最后隐藏线条（确保状态重置后再隐藏，避免延迟渲染）
+  showLine.value = false;
+};
+
+// 监听 connectShapeData 变化，重新初始化连接点
+watch(
+  () => props.connectShapeData,
+  () => {
+    initializeConnectPoint();
+  },
+  { deep: true }
+);
+let externalCreatingId: string | null        // 当前正在拖拽的（已加入画布的）元素 id
+let externalPendingShape: any | null         // 首帧/未入画布时的草稿（等待进入画布再 add）
+let entranceCheckInFlight = false   // 是否正在做第一次进画布的校验
+let entranceDeniedInThisDrag = false      // 本次拖拽是否已经被判定为“不允许进入画布”
+// 转换坐标
+const clientToLocalPoint = ({ clientX, clientY }: { clientX: number; clientY: number }) => {
+  const el = layerRef.value
+  if (!el) return { x: clientX, y: clientY }        // 若还没挂载，直接用屏幕坐标兜底
+  const rect = el.getBoundingClientRect()
+  // 获取当前缩放比例
+  const scale = graphStore.getScale() || 1
+  // 计算本地坐标并除以缩放比例
+  return {
+    x: (clientX - rect.left) / scale,
+    y: (clientY - rect.top) / scale
+  } // 屏幕坐标转画布本地坐标
+}
+// 本地坐标转 client 坐标
+const localToClientPoint = ({ x, y }: { x: number; y: number }) => {
+  const el = layerRef.value
+  if (!el) return { clientX: x, clientY: y }  // 兜底
+  const rect = el.getBoundingClientRect()
+  const scale = graphStore.getScale() || 1
+  return {
+    clientX: rect.left + x * scale,
+    clientY: rect.top + y * scale,
+  }
+}
+// 判断当前指针是否在画布（交互层）范围内
+const isInsideCanvasClient = (p: { clientX: number; clientY: number }) => {
+  const el = layerRef.value
+  if (!el) return false
+  const r = el.getBoundingClientRect()
+  return (
+    p.clientX >= r.left &&
+    p.clientX <= r.right &&
+    p.clientY >= r.top &&
+    p.clientY <= r.bottom
+  )
+}
+//拖动中添加元素并触发嵌套逻辑，
+const continueExternalCreateDrag = async (payload: { clientX: number; clientY: number; shapeData?: any }) => {
+  isExternalCreateDragging.value = true
+  const pt = clientToLocalPoint(payload)
+  if (payload.shapeData) {
+    const s = payload.shapeData
+    const isCmp = isCompartment(s as Shape)
+    externalPendingShape = {
+      ...s,
+      bounds: {
+        // 坐标始终用当前指针位置
+        x: pt.x,
+        y: pt.y,
+        // 宽度优先用传入的，否则给个默认
+        width: s.bounds?.width ?? 180,
+        // 隔间组件固定高度 120；否则用原值或默认 80
+        height: isCmp ? 120 : (s.bounds?.height ?? 80),
+      },
+      inert: false,
+    }
+  }
+  if (!externalCreatingId && externalPendingShape && isInsideCanvasClient(payload)) {
+    // entranceCheckInFlight = true
+    const draft = externalPendingShape
+    try {
+      graphStore.addShape(draft)
+      graphStore.startDrag([draft.id], pt)
+      externalCreatingId = draft.id
+      externalPendingShape = null
+    } finally {
+      // entranceCheckInFlight = false
+    }
+    externalPendingShape = null     // 草稿已用完，清空
+  }
+  externalPendingShape = null
+
+  if (!externalCreatingId) return   // 还没开始拖拽（不在画布内），直接返回
+
+  // 如果是pin类型，需要计算吸附位置
+  let targetPt = pt
+  if (externalCreatingId) {
+    const s = graphStore.shapes.find(x => x.id === externalCreatingId)
+    if (s && s.shapeType === 'pin') {
+      // 检查是否有父容器
+      if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
+        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 }
+        }
+      }
+    }
+  }
+
+  graphStore.moveDraggedShape(targetPt)   // 已在拖拽：更新位置
+}
+
+//拖拽结束后重新发送事件到front中调用接口
+const finishExternalCreateDrag = async (payload: { clientX: number; clientY: number }) => {
+  try {
+    if (!externalCreatingId) return   // 未开始则无事可做
+    const pt = clientToLocalPoint(payload)
+    if (isInsideCanvasClient(payload)) {
+      graphStore.moveDraggedShape(pt)   // 补最后一次位置
+      await nextTick()
+      // 结束后，把该元素标记为 inert=true（仅对 shapeType==='shape' 生效）
+      const s: any = (graphStore.shapes || []).find((x: any) => x.id == externalCreatingId)
+      if (s && s.shapeType == 'shape' || s.shapeType == 'pin') {
+        // s.inert = true                  // 直接改对象属性（Vue3 响应式）
+        const pure = _.omit(s, ['inert'])
+        pure.bounds = {                 // 覆盖为新的 bounds
+          ...(pure.bounds),
+          x: pt.x,
+          y: pt.y,
+        }
+        // 先推断这次 drop 的“候选父节点”
+        let parent: Shape | null = null
+        if (graphStore.hoverContainerId && graphStore.hoverNestable !== false) {
+          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
+          pure.parenShapeId = parent.id;
+          // 将吸附后的坐标同步回 ghost
+          graphStore.moveDraggedShape({ x: adjustedX, y: adjustedY })
+        }
+        try {
+          const { ok } = await checkNestViaFront(pure as Shape, parent, graphStore.shapes[0])
+          if (!ok) {
+            graphStore.setHoverState(null, false)   // 根不高亮就行
+            //立即删除临时数据，避免后续重复 
+            await sweepShapesWithInert()
+            externalCreatingId = null         // 清理状态
+            isExternalCreateDragging.value = false
+            graphStore.canDropOnCanvas = false
+            return
+          } else {
+            graphStore.canDropOnCanvas = true
+          }
+        } catch (error) {
+          //立即删除临时数据，避免后续重复 
+          await sweepShapesWithInert()
+          // await graphStore.removeShape(externalCreatingId as string)
+          // graphStore.clearSelection()
+          externalCreatingId = null         // 清理状态
+          isExternalCreateDragging.value = false
+        }
+        // 同步对外通知
+        // 先构造基础数据
+        const payloadData: any = {
+          coordinate: {
+            clientX: payload.clientX,
+            clientY: payload.clientY,
+          },
+          shapeData: _.cloneDeep(pure),
+          type: s.type,
+          nodeType: s.shapeKey,
+          icon: s.icon,
+        }
+        // 如果是 pin 类型，更新 coordinate 为吸附后的 client 坐标
+        if (pure.shapeType === 'pin' && parent) {
+          const adjustedClientPt = localToClientPoint({ x: pure.bounds.x, y: pure.bounds.y })
+          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
+        }
+        // 发送事件
+        await new Promise<void>((resolve, reject) => {
+          eventBus.emit('addShape', {
+            ...payloadData,
+            resolve,
+            reject,
+          })
+        })
+        if (pure.shapeType === 'pin') {
+          graphStore.endDragShape('pinDrop')
+        } else {
+          graphStore.endDragShape('addEntity')    // 提交拖拽（触发嵌套/吸附等 finalize）
+        }
+      }
+    }
+  } catch (error) {
+    graphStore.setHoverState(null, false)
+    //立即删除临时数据，避免后续重复 
+    await sweepShapesWithInert()
+  } finally {
+    await nextTick()
+    //立即删除临时数据，避免后续重复 
+    await sweepShapesWithInert()
+    graphStore.setHoverState(null, false)
+    // await graphStore.removeShape(externalCreatingId as string)
+    // graphStore.clearSelection()
+    externalCreatingId = null         // 清理状态
+    isExternalCreateDragging.value = false
+  }
+}
+// 根据 graphStore.canDropOnCanvas 决定是否显示禁用放置图标
+const onCanvasDragOver = (e: DragEvent) => {
+  e.preventDefault()                       // 必须，否则不会触发 drop
+  if (!e.dataTransfer) return
+  if (graphStore.canDropOnCanvas) {
+    e.dataTransfer.dropEffect = 'copy'     //  显示带 + 的复制光标
+  } else {
+    e.dataTransfer.dropEffect = 'none'     //显示禁止的圈圈光标
+  }
+}
+
+const onCanvasDrop = (e: DragEvent) => {
+  if (!graphStore.canDropOnCanvas) {
+    // 不允许丢，直接 return
+    return
+  }
+}
+//清掉前端存的脏数据
+function sweepShapesWithInert() {
+  const arr = graphStore.shapes as any[]
+  let removed = 0
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if ('inert' in arr[i]) {
+      arr.splice(i, 1);     // 直接删，避免 removeShape 的事件/副作用导致回填
+      removed++
+    }
+  }
+}
+onMounted(() => {
+  // 监听delete键移除图元
+  document.addEventListener("keydown", onKeyDownDelete, { capture: true });
+  window.addEventListener('keydown', handleKeyDown);
+  // 添加连接层相关的事件监听
+  if (props.connectShapeData) {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    initializeConnectPoint();
+  }
+
+  //拖动结束后更新情景菜单
+  eventBus.on('shape-drag-end-updateScenarioMenu', getActionButtonsStyle)
+});
+onUnmounted(() => {
+  offDrag?.();
+  // 监听delete键移除图元
+  document.removeEventListener("keydown", onKeyDownDelete, { capture: true });
+  // 清理连接层相关的事件监听
+  document.removeEventListener("mousemove", handleMouseMove);
+  document.removeEventListener("mouseleave", handleMouseLeave);
+  window.removeEventListener('keydown', handleKeyDown);
+  eventBus.off('shape-drag-end-updateScenarioMenu', getActionButtonsStyle)
+  highlightUtils.clearHighlightTimeout();
+});
+
+defineExpose({
+  continueExternalCreateDrag,
+  finishExternalCreateDrag,
+  handleEdgeClick,
+  getBoundingClientRect: () => layerRef.value?.getBoundingClientRect(),
+})
+</script>
+
+<style scoped>
+.interaction-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* 应用与画布相同的缩放变换 */
+  transform-origin: 0 0;
+  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;
+  padding: 6px;
+  top: 6px;
+}
+
+/* 允许嵌套（后端 ok） */
+.hover-container-outline.is-valid {
+  border: 2px solid #0000ff;
+}
+
+/* 不允许嵌套（后端 false） */
+.hover-container-outline.is-invalid {
+  border: 2px solid #f1eded;
+  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);
+}
+
+.resize-ghost {
+  position: absolute;
+  border: 2px solid #8a6d3b;
+  background: transparent;
+  box-shadow: 0 0 0 2px rgba(138, 109, 59, 0.15) inset;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+/* 连接层样式 */
+.connect-layer {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.connect-dot-direct {
+  width: 8px;
+  height: 8px;
+  background-color: #000;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+}
+
+.connect-dot-target {
+  width: 8px;
+  height: 8px;
+  background-color: #000;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+}
+
+.connection-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.border-btn {
+  padding-bottom: 4px;
+  border-bottom: 1px solid #e0e0e0;
+}
+</style>