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

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.context-menu[data-v-3f0901d5]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;overflow-y:auto;box-sizing:border-box;transition:opacity .2s ease,transform .2s ease;transform-origin:top left}.context-menu[style*="display: block"][data-v-3f0901d5]{animation:fadeIn-3f0901d5 .2s ease forwards}@keyframes fadeIn-3f0901d5{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-3f0901d5]::-webkit-scrollbar{width:6px}.context-menu[data-v-3f0901d5]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-3f0901d5]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-3f0901d5]{padding:0 15px;cursor:pointer;font-size:14px;color:#606266;border-radius:4px;height:36px;line-height:36px;box-sizing:border-box}.menu-item[data-v-3f0901d5]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-3f0901d5]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-3f0901d5]:hover{background-color:transparent!important}.menu-disabled img[data-v-3f0901d5]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-3f0901d5]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-3f0901d5]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-3f0901d5]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-3f0901d5]{border-bottom-left-radius:0;border-bottom-right-radius:0}.connection-line[data-v-c4c3e8c0]{position:absolute;pointer-events:none;z-index:10}.interaction-layer[data-v-914902a3]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--672c44c5));pointer-events:all;z-index:999}.selection-box[data-v-914902a3]{pointer-events:none;background:transparent}.resize-handles[data-v-914902a3]{position:relative;width:100%;height:100%}.hover-container-outline[data-v-914902a3]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline.is-valid[data-v-914902a3]{border:2px solid #0000ff}.hover-container-outline.is-invalid[data-v-914902a3]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.resize-handle[data-v-914902a3]{position:absolute;width:10px;height:10px;background-color:#007bff;border:2px solid #fff;border-radius:50%;pointer-events:all;transition:all .2s ease;box-shadow:0 2px 4px #0000004d;z-index:999}.resize-handle.is-disabled[data-v-914902a3]{cursor:default!important}.resize-handle[data-v-914902a3]:hover{background-color:#0056b3;transform:scale(1.2)}.action-buttons[data-v-914902a3]{display:flex;flex-direction:column;gap:4px;pointer-events:all;background:rgba(255,255,255,.95);padding:6px;border-radius:4px;box-shadow:0 2px 8px #00000026;border:1px solid #e0e0e0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.action-btn[data-v-914902a3]{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:700;font-family:Arial,sans-serif;color:#495057;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.action-btn[data-v-914902a3]:hover{background:linear-gradient(to bottom,#e3f2fd,#bbdefb);border-color:#90caf9;transform:translateY(-1px);box-shadow:0 2px 4px #2196f34d;color:#1976d2}.edit-btn[data-v-914902a3]:hover{background:#e3f2fd}.delete-btn[data-v-914902a3]:hover{background:#ffebee;border-color:#f44336}.name-editor-container[data-v-914902a3]{pointer-events:all}.name-input[data-v-914902a3]{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 #00000026;outline:none;text-align:center}.name-input[data-v-914902a3]:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.name-text-box-container[data-v-914902a3]{pointer-events:all}.name-text-box[data-v-914902a3]{border:1px dashed #007bff;background:rgba(255,255,255,.2);cursor:pointer;pointer-events:all;transition:all .2s ease;border-radius:4px;box-shadow:0 0 0 1px #007bff1a;height:100%;display:flex;align-items:center;justify-content:center}.name-text-box[data-v-914902a3]:hover{border-color:#0056b3;background:rgba(0,123,255,.05);box-shadow:0 0 0 2px #007bff33;transform:scale(1.02)}.resize-ghost[data-v-914902a3]{position:absolute;border:2px solid #8a6d3b;background:transparent;box-shadow:0 0 0 2px #8a6d3b26 inset;pointer-events:none;z-index:9999}.connect-layer[data-v-914902a3]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-914902a3],.connect-dot-target[data-v-914902a3]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-914902a3]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.border-btn[data-v-914902a3]{padding-bottom:4px;border-bottom:1px solid #e0e0e0}.diagram-shape[data-v-1f4cb409]{background:#e5ecf0;border-radius:10px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;margin:0;padding:0;border:var(--bw) var(--bs) var(--bc)}.hit-edge[data-v-1f4cb409]{position:absolute;background:transparent;z-index:999;pointer-events:auto}.hit-top[data-v-1f4cb409]{left:0;right:0;top:0;height:var(--bw)}.hit-right[data-v-1f4cb409]{top:0;right:0;bottom:0;width:var(--bw)}.hit-bottom[data-v-1f4cb409]{left:0;right:0;bottom:0;height:var(--bw)}.hit-left[data-v-1f4cb409]{top:0;left:0;bottom:0;width:var(--bw)}.diagram-header[data-v-1f4cb409]{background:rgba(255,255,255,.5);padding:3px 16px 3px 5px;display:inline-flex;align-items:center;position:relative;white-space:nowrap;align-self:flex-start}.diagram-header[data-v-1f4cb409]:after{content:"";position:absolute;bottom:-12px;right:-12px;width:20px;height:20px;background-color:var(--5113555a);transform:rotate(45deg);z-index:0}.diagram-title[data-v-1f4cb409]{font-family:var(--name-ff);font-size:var(--name-fs);font-weight:400;line-height:normal;letter-spacing:0em;font-variation-settings:"opsz" auto;font-feature-settings:"kern" on;color:var(--name-color);position:relative;z-index:2}.diagram-shape[data-v-05edf0d1]{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto;touch-action:none;-webkit-touch-action:none;-ms-touch-action:none;zoom:1;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important}.diagram-svg[data-v-05edf0d1]{width:100%;height:100%;transform:none!important;-webkit-transform:none!important}.capability-shape[data-v-66d2551a]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-66d2551a]{display:block}.capability-shape[data-v-8e8054b6]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-8e8054b6]{display:block}.capability-shape[data-v-27d34586]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-27d34586]{display:block}.capability-shape[data-v-5f0b14f5]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-5f0b14f5]{display:block}.capability-shape[data-v-4f0bb734]{display:inline-block;position:relative;overflow:visible;box-sizing:content-box}[data-v-4f0bb734] .name-text-svg{text-align:left}[data-v-4f0bb734] .shape-name-svg{text-align:center}[data-v-4f0bb734] .content-text-svg{font-size:13px;line-height:1.4;color:#000;font-family:Arial,sans-serif;min-height:20px;overflow:visible;width:100%;box-sizing:border-box}[data-v-4f0bb734] .content-item{margin-bottom:4px;word-break:break-word;white-space:normal;overflow:visible;width:100%;box-sizing:border-box}[data-v-4f0bb734] .content-item:last-child{margin-bottom:0}.edge-component[data-v-aa953435]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-aa953435]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-aa953435]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-aa953435]{pointer-events:none}.diagram-shape[data-v-daf180ad]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.diagram-svg[data-v-daf180ad]{width:100%;height:100%}.capability-shape[data-v-ec8f07ea]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-ec8f07ea]{display:block}.output-pin-shape[data-v-2081b7c7]{display:flex;align-items:center;justify-content:center;overflow:visible}.output-pin-svg[data-v-2081b7c7]{display:block;overflow:visible}.port-shape[data-v-4aa98dd6]{display:flex;align-items:center;justify-content:center;overflow:visible}.port-svg[data-v-4aa98dd6]{display:block;overflow:visible}.graph-view[data-v-73d6d56b]{width:100%;height:100%;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.diagram-content[data-v-73d6d56b]{position:absolute;top:10px;left:10px;right:0;bottom:0;overflow:auto;touch-action:none}.shapes-container[data-v-73d6d56b]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--1fac33f2))}.shapes-container[data-v-73d6d56b]>*{position:absolute}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@mx-sose-front/mx-sose-graph",
+  "version": "1.0.0",
+  "description": "A Vue3 graph visualization plugin library",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:lib": "vue-tsc && vite build --config vite.lib.config.ts",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "type-check": "vue-tsc --noEmit",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run clean && npm run build:lib",
+    "build:prod": "node scripts/build.js"
+  },
+  "keywords": [
+    "vue3",
+    "graph",
+    "visualization",
+    "plugin",
+    "component"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "http://47.96.106.104:9090/mx-sose/mx-sose-graph.git"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^8.0.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "postcss": "^8.5.6",
+    "rimraf": "^5.0.0",
+    "sass": "^1.96.0",
+    "tailwindcss": "^4.1.12",
+    "terser": "^5.44.1",
+    "typescript": "~5.0.0",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vitest": "^0.34.0",
+    "vue-tsc": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "dependencies": {
+    "element-plus": "^2.11.5",
+    "lodash": "^4.17.21",
+    "pinia": "^3.0.3"
+  }
+}

package/src/components/ContextMenu.vue

@@ -0,0 +1,475 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="visible"
+      class="context-menu px-[6px]!"
+      :style="dynamicMenuStyle"
+      @contextmenu.prevent
+      @click.stop
+      ref="menuRef"
+    >
+      <!-- 属性配置菜单项 -->
+      <div class="menu-item" @click="handleShowPropertyPanel">
+        <div
+          class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]"
+        >
+          <img
+            :src="getIcon('createMenu', 'config')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="属性配置"
+          />
+          <span>属性配置</span>
+        </div>
+      </div>
+
+      <div class="menu-item" @click="handleHighlight">
+        <div class="flex items-center">
+          <img
+            :src="getIcon('createMenu', 'delete')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="树上高亮"
+          />
+          <span>树上高亮</span>
+        </div>
+      </div>
+
+      <div class="menu-item" @click="handleLocateChart" :class="{ 'menu-disabled': true }">
+        <div
+          class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]"
+        >
+          <img
+            :src="getIcon('createMenu', 'locateChart')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="所在图表"
+          />
+          <span>所在图表</span>
+        </div>
+      </div>
+
+      <div class="menu-item" :class="{ 'menu-disabled': true }">
+        <div
+          class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]"
+        >
+          <img
+            :src="getIcon('createMenu', 'diagram')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="新建图表"
+          />
+          <span>新建图表</span>
+        </div>
+      </div>
+
+      <div class="menu-item" @click="handleCopy" :class="{ 'menu-disabled': true }">
+        <div class="flex items-center">
+          <img
+            :src="getIcon('createMenu', 'copy')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="复制"
+          />
+          <span>复制</span>
+        </div>
+      </div>
+
+      <div class="menu-item" @click="handlePaste" :class="{ 'menu-disabled': true }">
+        <div class="flex items-center">
+          <img
+            :src="getIcon('createMenu', 'paste')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="粘贴"
+          />
+          <span>粘贴</span>
+        </div>
+      </div>
+
+      <div class="menu-item" @click="handleCut" :class="{ 'menu-disabled': true }">
+        <div class="flex items-center">
+          <img
+            :src="getIcon('createMenu', 'scissors')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="剪切"
+          />
+          <span>剪切</span>
+        </div>
+      </div>
+
+      <!-- 删除菜单项 -->
+      <div class="menu-item" @click="handleDelete">
+        <div class="flex items-center">
+          <img
+            :src="getIcon('createMenu', 'delete')"
+            class="w-[18px] h-[18px] mr-[10px] ml-[2px]"
+            alt="删除"
+          />
+          <span>删除</span>
+        </div>
+      </div>
+    </div>
+  </teleport>
+
+  <!-- 新建图表菜单 -->
+  <!-- <Diagram
+    :menu-visible="showAddChartDialog"
+    :menu-x="position.x"
+    :menu-y="position.y"
+    :domain-data="chartData"
+    @select-chart="handleSelectChart"
+  /> -->
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  type CSSProperties,
+} from "vue";
+import { getIcon } from "../utils/iconLoader";
+import { eventBus } from "../store";
+// import Diagram from "@/components/common/diagram/diagram.vue";
+// import { getModelDataApi } from "@/services/modelTree";
+
+// 定义组件props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+    validator: (value: any) => {
+      return typeof value.x === "number" && typeof value.y === "number";
+    },
+  },
+  selectedShape: {
+    type: Object,
+    required: true,
+  },
+});
+
+// 定义组件事件
+const emit = defineEmits([
+  "update:visible",
+  "rename",
+  "delete",
+  "show-property-panel",
+  "highlight",
+  "locate-chart",
+  "new-chart",
+  "copy",
+  "paste",
+  "cut",
+]);
+
+// 新建图表弹窗状态
+const showAddChartDialog = ref(false);
+// 图表数据
+const chartData = ref([]);
+
+const menuRef = ref<HTMLElement | null>(null);
+
+// 菜单尺寸常量
+const MENU_WIDTH = 180; // 与CSS中的min-width一致
+const MENU_ITEM_HEIGHT = 36; // 每个菜单项高度
+const MENU_PADDING = 6; // 菜单内边距
+const MAX_VISIBLE_ITEMS = 8; // 最大可见菜单项数量
+const SAFE_MARGIN = 10; // 安全边距
+
+// 使用ref来存储动态样式
+const dynamicMenuStyle = ref<CSSProperties>({
+  left: "0px",
+  top: "0px",
+  display: "none",
+  position: "fixed",
+  zIndex: "9999",
+  minWidth: `${MENU_WIDTH}px`,
+  maxHeight: "70vh",
+});
+
+// 计算并更新菜单位置
+const updateMenuPosition = () => {
+  if (!props.visible) {
+    dynamicMenuStyle.value = { ...dynamicMenuStyle.value, display: "none" };
+    return;
+  }
+
+  // 获取视口尺寸
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // 计算菜单高度（基于实际菜单项数量）
+  const menuItems = document.querySelectorAll(".menu-item");
+  const menuHeight = Math.min(
+    menuItems.length * MENU_ITEM_HEIGHT + MENU_PADDING * 2,
+    MAX_VISIBLE_ITEMS * MENU_ITEM_HEIGHT + MENU_PADDING * 2
+  );
+
+  // 初始位置
+  let left = props.position.x;
+  let top = props.position.y;
+
+  // 水平方向调整 - 确保不超出右侧边界
+  if (left + MENU_WIDTH > viewportWidth) {
+    left = viewportWidth - MENU_WIDTH - SAFE_MARGIN;
+  }
+  // 确保不小于左侧边界
+  left = Math.max(SAFE_MARGIN, left);
+
+  // 垂直方向调整 - 确保不超出底部边界
+  if (top + menuHeight > viewportHeight) {
+    top = viewportHeight - menuHeight - SAFE_MARGIN;
+  }
+  // 确保不小于顶部边界
+  top = Math.max(SAFE_MARGIN, top);
+
+  dynamicMenuStyle.value = {
+    left: `${left}px`,
+    top: `${top}px`,
+    display: "block",
+    position: "fixed",
+    "z-index": "9999",
+    "min-width": `${MENU_WIDTH}px`,
+    "max-height": "70vh",
+  };
+};
+
+// 使用watch来响应props变化
+watch(
+  () => [props.visible, props.position],
+  () => {
+    updateMenuPosition();
+  },
+  { immediate: true }
+);
+
+// 处理点击外部关闭菜单
+const handleClickOutside = (event: MouseEvent) => {
+  if (!props.visible || !menuRef.value) return;
+
+  if (!menuRef.value.contains(event.target as Node)) {
+    closeMenu();
+  }
+};
+
+// 关闭菜单
+const closeMenu = () => {
+  emit("update:visible", false);
+};
+
+// 打印当前选中图元
+const logSelectedShape = () => {
+  console.log("当前选中的图元:", props.selectedShape);
+};
+
+// 处理删除菜单项点击
+const handleDelete = () => {
+  logSelectedShape();
+  // emit("delete", props.selectedShape);
+  eventBus.emit("shapes-delete", props.selectedShape);
+  closeMenu();
+};
+
+// 处理属性配置菜单项点击
+const handleShowPropertyPanel = () => {
+  logSelectedShape();
+  emit("show-property-panel", props.selectedShape);
+  closeMenu();
+};
+
+// 处理树上高亮菜单项点击
+const handleHighlight = () => {
+  logSelectedShape();
+  eventBus.emit("highlight-shape", props.selectedShape);
+  closeMenu();
+};
+
+// 处理所在图表菜单项点击
+const handleLocateChart = () => {
+  logSelectedShape();
+  emit("locate-chart", props.selectedShape);
+  closeMenu();
+};
+
+// 处理新建图表菜单项点击
+// const handleNewChart = async () => {
+//   logSelectedShape();
+
+//   try {
+//     // 先调用事件，保持原有逻辑兼容
+//     emit("new-chart", props.selectedShape);
+
+//     // 获取当前右键点击的节点
+//     const parentNode = props.selectedShape;
+//     if (!parentNode) {
+//       console.warn("没有选中的节点");
+//       return;
+//     }
+
+//     // 处理父节点类型（ROOT_PACKAGE特殊处理）
+//     const parentNodeType = parentNode.shapeKey;
+//     const requestCode =
+//       !parentNodeType || parentNodeType === "ROOT_PACKAGE"
+//         ? "ArchitecturalDescription"
+//         : parentNodeType;
+
+//     // 调用接口获取图表数据
+//     const res = await getModelDataApi({
+//       code: requestCode,
+//       type: "1",
+//     });
+
+//     if (res.code == 200) {
+//       chartData.value = res.data || [];
+//       // 显示新建图表弹窗
+//       showAddChartDialog.value = true;
+//     } else {
+//       console.error("获取图表数据失败", res.msg);
+//     }
+//   } catch (error) {
+//     console.error("处理新建图表时出错", error);
+//   } finally {
+//     closeMenu();
+//   }
+// };
+
+// 处理选择图表
+const handleSelectChart = (payload: { value: any; isChart: boolean }) => {
+  // 转发选择图表事件给父组件
+
+  emit("new-chart", {
+    ...props.selectedShape,
+    chartInfo: payload.value,
+  });
+};
+
+// 处理复制菜单项点击
+const handleCopy = () => {
+  logSelectedShape();
+  emit("copy", props.selectedShape);
+  closeMenu();
+};
+
+// 处理粘贴菜单项点击
+const handlePaste = () => {
+  logSelectedShape();
+  emit("paste", props.selectedShape);
+  closeMenu();
+};
+
+// 处理剪切菜单项点击
+const handleCut = () => {
+  logSelectedShape();
+  emit("cut", props.selectedShape);
+  closeMenu();
+};
+
+// 处理窗口大小变化
+const handleWindowResize = () => {
+  if (props.visible) {
+    updateMenuPosition();
+  }
+};
+
+// 组件挂载时添加事件监听
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside);
+  window.addEventListener("resize", handleWindowResize);
+  updateMenuPosition(); // 初始位置计算
+});
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+  window.removeEventListener("resize", handleWindowResize);
+});
+</script>
+
+<style scoped lang="scss">
+.context-menu {
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 6px 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform-origin: top left;
+}
+
+.context-menu[style*="display: block"] {
+  animation: fadeIn 0.2s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 滚动条优化 */
+.context-menu::-webkit-scrollbar {
+  width: 6px;
+}
+.context-menu::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 3px;
+}
+.context-menu::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+.menu-item {
+  padding: 0 15px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  border-radius: 4px;
+  height: 36px;
+  line-height: 36px;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: #f5f7fa;
+    color: #303133;
+  }
+}
+
+/* 置灰样式 */
+.menu-disabled {
+  color: #c0c4cc !important;
+  cursor: not-allowed !important;
+  pointer-events: none;
+
+  &:hover {
+    background-color: transparent !important;
+  }
+
+  img {
+    opacity: 0.5;
+  }
+}
+
+/* 边界提示样式 */
+.context-menu[style*="--edge-hint: left"] {
+  border-top-left-radius: 0;
+}
+.context-menu[style*="--edge-hint: right"] {
+  border-top-right-radius: 0;
+}
+.context-menu[style*="--edge-hint: top"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.context-menu[style*="--edge-hint: bottom"] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+</style>

package/src/components/Diagram/StrategicTaxonomyDiagram.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="diagram-shape" :style="diagramStyle" @click="handleClick">
+    <div class="diagram-header">
+      <span class="diagram-title">{{ shape.name }}</span>
+    </div>
+    <!-- 负责命中的透明边框 -->
+    <div class="hit-edge hit-top" @click.prevent="handleClick" />
+    <div class="hit-edge hit-right" @click.prevent="handleClick" />
+    <div class="hit-edge hit-bottom" @click.prevent="handleClick" />
+    <div class="hit-edge hit-left" @click.prevent="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Shape } from "../../types";
+
+// Props
+interface Props {
+  shape: Shape;
+}
+
+const props = defineProps<Props>();
+
+// 事件定义
+const emit = defineEmits<{
+  (e: "shape-click", shape: Shape, event: MouseEvent): void;
+}>();
+// 交互层在拖拽/缩放时会给 shape.meta.isGhost = true
+const isGhost = computed(() => (props.shape as any).meta?.isGhost)
+// 根据 shape 的 bounds 和 style 生成样式
+const diagramStyle = computed(() => {
+  const { bounds, style } = props.shape;
+  return {
+    width: `${bounds?.width || 200}px`,
+    height: `${bounds?.height || 150}px`,
+    backgroundColor: isGhost.value
+      ? 'transparent'                            // 预览态（拖拽/缩放）透明
+      : (style?.backgroundColor ?? '#e5ecf0'),
+    '--bc': style?.canvasBorderColor || '#7b8fa1',//画布边框颜色
+    '--bw': `${style?.canvasBorderWidth || 2}px`,  //画布边框粗细
+    '--bs': style?.canvasBorderStyle || 'solid', //画布边框线型
+    '--name-fs': `${style?.canvasNameFontSize || 10}px`,//画布名称字体大小
+    '--name-ff':
+      style?.canvasNameFontFamily ||
+      `Source Han Sans SC, "Microsoft YaHei", "PingFang SC", Arial, sans-serif`,//画布名称字体
+    '--name-color': style?.canvasNameFontColor || "#303133",//画布名称字体颜色
+  };
+});
+
+// 点击事件处理
+const handleClick = (event: MouseEvent) => {
+  event.stopPropagation();
+  emit("shape-click", props.shape, event);
+};
+</script>
+
+<style scoped>
+.diagram-shape {
+  background: #e5ecf0;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: var(--bw) var(--bs) var(--bc);
+}
+
+.hit-edge {
+  position: absolute;
+  background: transparent;
+  z-index: 999;
+  pointer-events: auto;
+}
+
+.hit-top {
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--bw);
+}
+
+.hit-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--bw);
+}
+
+.hit-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--bw);
+}
+
+.hit-left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--bw);
+}
+
+.diagram-header {
+  background: rgba(255, 255, 255, 0.5);
+  padding: 3px 16px 3px 5px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  white-space: nowrap;
+  align-self: flex-start;
+}
+
+.diagram-header::after {
+  content: "";
+  position: absolute;
+  bottom: -12px;
+  right: -12px;
+  width: 20px;
+  height: 20px;
+  background-color: v-bind('diagramStyle.backgroundColor');
+  transform: rotate(45deg);
+  z-index: 0;
+}
+
+.diagram-title {
+  font-family: var(--name-ff);
+  font-size: var(--name-fs);
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+  font-variation-settings: "opsz" auto;
+  font-feature-settings: "kern" on;
+  color: var(--name-color);
+  position: relative;
+  z-index: 2;
+}
+</style>