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

package/dist/style.css

@@ -1 +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-cf54d360]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--26f2f4ea));pointer-events:all;z-index:999}.selection-box[data-v-cf54d360]{pointer-events:none;background:transparent}.resize-handles[data-v-cf54d360]{position:relative;width:100%;height:100%}.hover-container-outline[data-v-cf54d360]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline.is-valid[data-v-cf54d360]{border:2px solid #0000ff}.hover-container-outline.is-invalid[data-v-cf54d360]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.resize-handle[data-v-cf54d360]{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-cf54d360]{cursor:default!important}.resize-handle[data-v-cf54d360]:hover{background-color:#0056b3;transform:scale(1.2)}.action-buttons[data-v-cf54d360]{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-cf54d360]{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-cf54d360]: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-cf54d360]:hover{background:#e3f2fd}.delete-btn[data-v-cf54d360]:hover{background:#ffebee;border-color:#f44336}.name-editor-container[data-v-cf54d360]{pointer-events:all}.name-input[data-v-cf54d360]{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-cf54d360]:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.name-text-box-container[data-v-cf54d360]{pointer-events:all}.name-text-box[data-v-cf54d360]{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-cf54d360]: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-cf54d360]{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-cf54d360]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-cf54d360],.connect-dot-target[data-v-cf54d360]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-cf54d360]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.border-btn[data-v-cf54d360]{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-436bf5ea]{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-436bf5ea]{position:absolute;top:10px;left:10px;right:0;bottom:30px;overflow:auto;touch-action:none}.shapes-container[data-v-436bf5ea]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--401af0dd))}.shapes-container[data-v-436bf5ea]>*{position:absolute}.zoom-bar[data-v-436bf5ea]{position:absolute;bottom:0;right:0;left:0;width:100%;height:24px;display:flex;align-items:center;justify-content:flex-end;background:white;border-top:1px solid #e0e0e0;box-shadow:0 -2px 8px #0000000d;z-index:1000;gap:6px;padding:0 10px}.zoom-level[data-v-436bf5ea]{font-size:10px;font-weight:500;min-width:35px;text-align:center;color:#333}.zoom-slider[data-v-436bf5ea]{width:150px;height:100%;display:flex;align-items:center;justify-content:center}.zoom-slider input[type=range][data-v-436bf5ea]{width:100%;height:2px;border-radius:1px;background:#e0e0e0;outline:none;-webkit-appearance:none;margin:0}.zoom-slider input[type=range][data-v-436bf5ea]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#1890ff;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.zoom-slider input[type=range][data-v-436bf5ea]::-webkit-slider-thumb:hover{background:#40a9ff;transform:scale(1.1)}.zoom-slider input[type=range][data-v-436bf5ea]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#1890ff;cursor:pointer;border:none;-moz-transition:all .2s;transition:all .2s}.zoom-slider input[type=range][data-v-436bf5ea]::-moz-range-thumb:hover{background:#40a9ff;transform:scale(1.1)}.zoom-button[data-v-436bf5ea]{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;border-radius:2px;background:white;cursor:pointer;font-size:10px;font-weight:600;color:#333;transition:all .2s}.zoom-button[data-v-436bf5ea]:hover{background:#f5f5f5;border-color:#1890ff;color:#1890ff}.zoom-button[data-v-436bf5ea]:active{background:#e6f7ff}
+@charset "UTF-8";.context-menu[data-v-7371f77c]{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-7371f77c]{animation:fadeIn-7371f77c .2s ease forwards}@keyframes fadeIn-7371f77c{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu[data-v-7371f77c]::-webkit-scrollbar{width:6px}.context-menu[data-v-7371f77c]::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px}.context-menu[data-v-7371f77c]::-webkit-scrollbar-track{background-color:#f5f5f5}.menu-item[data-v-7371f77c]{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-7371f77c]:hover{background-color:#f5f7fa;color:#303133}.menu-disabled[data-v-7371f77c]{color:#c0c4cc!important;cursor:not-allowed!important;pointer-events:none}.menu-disabled[data-v-7371f77c]:hover{background-color:transparent!important}.menu-disabled img[data-v-7371f77c]{opacity:.5}.context-menu[style*="--edge-hint: left"][data-v-7371f77c]{border-top-left-radius:0}.context-menu[style*="--edge-hint: right"][data-v-7371f77c]{border-top-right-radius:0}.context-menu[style*="--edge-hint: top"][data-v-7371f77c]{border-top-left-radius:0;border-top-right-radius:0}.context-menu[style*="--edge-hint: bottom"][data-v-7371f77c]{border-bottom-left-radius:0;border-bottom-right-radius:0}.display-tooltip[data-v-7371f77c]{background-color:#fff;border:1px solid #ebeef5;border-radius:6px;box-shadow:0 2px 12px #0000001a;padding:6px 0;min-width:120px;animation:tooltipFadeIn-7371f77c .2s ease forwards}.tooltip-content[data-v-7371f77c]{overflow:hidden}.tooltip-item[data-v-7371f77c]{padding:8px 16px;cursor:pointer;font-size:14px;color:#606266;border-radius:4px;transition:background-color .2s ease;display:flex;align-items:center}.tooltip-item[data-v-7371f77c]:hover{background-color:#f5f7fa;color:#303133}.tooltip-item span[data-v-7371f77c]{display:block}@keyframes tooltipFadeIn-7371f77c{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.connection-line[data-v-c4c3e8c0]{position:absolute;pointer-events:none;z-index:10}.interaction-layer[data-v-cdfa3994]{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transform:scale(var(--913dd20e));pointer-events:all;z-index:999}.selection-box[data-v-cdfa3994]{pointer-events:none;background:transparent}.resize-handles[data-v-cdfa3994]{position:relative;width:100%;height:100%}.hover-container-outline[data-v-cdfa3994]{position:absolute;pointer-events:none;padding:6px;top:6px}.hover-container-outline.is-valid[data-v-cdfa3994]{border:2px solid #0000ff}.hover-container-outline.is-invalid[data-v-cdfa3994]{border:2px solid #f1eded;background:rgba(240,237,237,.842)}.resize-handle[data-v-cdfa3994]{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-cdfa3994]{cursor:default!important}.resize-handle[data-v-cdfa3994]:hover{background-color:#0056b3;transform:scale(1.2)}.action-buttons[data-v-cdfa3994]{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-cdfa3994]{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-cdfa3994]: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-cdfa3994]:hover{background:#e3f2fd}.delete-btn[data-v-cdfa3994]:hover{background:#ffebee;border-color:#f44336}.name-editor-container[data-v-cdfa3994]{pointer-events:all}.name-input[data-v-cdfa3994]{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-cdfa3994]:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}.name-text-box-container[data-v-cdfa3994]{pointer-events:all}.name-text-box[data-v-cdfa3994]{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-cdfa3994]: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-cdfa3994]{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-cdfa3994]{position:absolute;pointer-events:none;z-index:1000}.connect-dot-direct[data-v-cdfa3994],.connect-dot-target[data-v-cdfa3994]{width:8px;height:8px;background-color:#000;border-radius:50%;border:1px solid #fff;box-shadow:0 0 4px #0000004d}.connection-line[data-v-cdfa3994]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.border-btn[data-v-cdfa3994]{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-b7f57d56]{display:flex;align-items:center;justify-content:center;overflow:hidden}.capability-svg[data-v-b7f57d56]{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-8ed11c37]{position:absolute;pointer-events:all;cursor:pointer}.edge-svg[data-v-8ed11c37]{width:100%;height:100%;overflow:visible}.edge-svg polyline[data-v-8ed11c37]{pointer-events:all;stroke-linecap:round;stroke-linejoin:round}.edge-svg circle[data-v-8ed11c37]{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}.diagram-list-tooltip[data-v-1ad3bdf8]{position:fixed;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;padding:10px 6px;box-shadow:0 4px 12px #00000026;z-index:9999;width:180px;max-width:300px}.tooltip-title[data-v-1ad3bdf8]{padding:0 12px}.diagram-item[data-v-1ad3bdf8]{display:flex;align-items:center;padding:0 12px;cursor:pointer;border-radius:4px;height:36px;line-height:36px;transition:background-color .2s}.diagram-item .diagram-name[data-v-1ad3bdf8]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.diagram-item[data-v-1ad3bdf8]:hover{background-color:#f0f3f6}.diagram-icon[data-v-1ad3bdf8]{width:24px;height:24px;margin-right:6px}.zoom-bar[data-v-80612714]{position:absolute;bottom:0;left:0;width:100%;height:24px;display:flex;align-items:center;justify-content:flex-end;background:white;border-top:1px solid #e0e0e0;box-shadow:0 -2px 8px #0000000d;z-index:100;gap:6px;padding:0 10px}.zoom-level[data-v-80612714]{font-size:10px;font-weight:500;min-width:35px;text-align:center;color:#333}.zoom-button[data-v-80612714]{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;border-radius:2px;background:white;cursor:pointer;font-size:10px;font-weight:600;color:#333;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.zoom-button[data-v-80612714]:hover{background:#f5f5f5;border-color:#2a7fd9;color:#2a7fd9}.zoom-button[data-v-80612714]:active{transform:scale(.95)}.zoom-slider[data-v-80612714]{width:150px;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.slider-wrapper[data-v-80612714]{width:100%;height:2px;background:#e0e0e0;border-radius:1px;position:relative}.slider-wrapper[data-v-80612714]:before{content:"";position:absolute;top:50%;left:0;width:var(--progress, 0%);height:2px;background:#2a7fd9;border-radius:1px;z-index:1;pointer-events:none;transform:translateY(-50%)}.slider-wrapper input[type=range][data-v-80612714]{width:100%;height:12px;background:transparent;outline:none;-webkit-appearance:none;margin:0;position:relative;z-index:2;cursor:pointer}.slider-wrapper input[type=range][data-v-80612714]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:white;border:2px solid #2a7fd9;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;transform:translateY(-6px);box-shadow:0 1px 3px #0000001a}.slider-wrapper input[type=range][data-v-80612714]::-webkit-slider-thumb:hover{background:white;border-color:#2a7fd9;transform:translateY(-6px) scale(1.1)}.slider-wrapper input[type=range][data-v-80612714]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:white;border:2px solid #2a7fd9;cursor:pointer;-moz-transition:all .2s;transition:all .2s;transform:translateY(-6px)}.slider-wrapper input[type=range][data-v-80612714]::-moz-range-thumb:hover{background:white;border-color:#2a7fd9;transform:translateY(-6px) scale(1.1)}.slider-wrapper input[type=range][data-v-80612714]::-moz-range-track{background:transparent;height:2px;border:none}.slider-wrapper input[type=range][data-v-80612714]:focus{outline:none}.graph-view[data-v-1fa719fa]{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-1fa719fa]{position:absolute;top:10px;left:10px;right:0;bottom:30px;overflow:auto;touch-action:none}.shapes-container[data-v-1fa719fa]{position:relative;width:100%;height:100%;min-height:600px;transform-origin:0 0;transform:scale(var(--df8fc896))}.shapes-container[data-v-1fa719fa]>*{position:absolute}.zoom-level[data-v-1fa719fa]{position:absolute;bottom:30px;right:15px;font-size:10px;font-weight:500;min-width:35px;text-align:center;color:#333;background:rgba(255,255,255,.9);padding:2px 6px;border-radius:3px;box-shadow:0 1px 3px #0000001a}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-sose-front/mx-sose-graph",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A Vue3 graph visualization plugin library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/{ContextMenu.vue → ContextMenu/ContextMenu.vue}

@@ -1,93 +1,73 @@
 <template>
   <teleport to="body">
-    <div
-      v-if="visible"
-      class="context-menu px-[6px]!"
-      :style="dynamicMenuStyle"
-      @contextmenu.prevent
-      @click.stop
-      ref="menuRef"
-    >
+    <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="属性配置"
-          />
+        <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="树上高亮"
-          />
+          <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 ref="chartMenuItemRef" class="menu-item" @click="handleLocateChart" :class="{ 'menu-disabled': false }">
+        <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="所在图表" />
+          <div class="flex-[1] flex justify-between items-center">
+            <span>所在图表</span>
+          </div>
         </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="新建图表"
-          />
+        <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" 
+        :class="{ 'menu-disabled': false }"
+        @mouseenter="handleDisplayMouseEnter"
+        @mouseleave="handleDisplayMouseLeave"
+        ref="displayMenuItemRef"
+      >
+        <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="展示" />
+          <div class="flex-1 flex justify-between items-center">
+            <span>展示</span>
+            <el-icon :size="12">
+              <ArrowRight />
+            </el-icon>
+          </div>
+        </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="复制"
-          />
+          <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="粘贴"
-          />
+          <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="剪切"
-          />
+          <img :src="getIcon('createMenu', 'scissors')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="剪切" />
           <span>剪切</span>
         </div>
       </div>
@@ -95,17 +75,35 @@
       <!-- 删除菜单项 -->
       <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="删除"
-          />
+          <img :src="getIcon('createMenu', 'delete')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="删除" />
           <span>删除</span>
         </div>
       </div>
     </div>
   </teleport>
 
+  <!-- 展示子菜单弹框 -->
+  <teleport to="body">
+    <div 
+      v-if="displayTooltipVisible" 
+      class="display-tooltip"
+      :style="displayTooltipStyle"
+      @mouseenter="handleTooltipMouseEnter"
+      @mouseleave="handleTooltipMouseLeave"
+    >
+      <div class="tooltip-content">
+        <div class="tooltip-item" @click="handleDisplayPortAttr">
+          <img :src="getIcon('createMenu', 'diagram')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="展示" />
+          <span>展示端口/属性</span>
+        </div>
+        <div class="tooltip-item" @click="handleDisplayLink">
+          <img :src="getIcon('createMenu', 'diagram')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="展示" />
+          <span>展示连线</span>
+        </div>
+      </div>
+    </div>
+  </teleport>
+
   <!-- 新建图表菜单 -->
   <!-- <Diagram
     :menu-visible="showAddChartDialog"
@@ -118,17 +116,15 @@
 
 <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";
+import { getIcon } from "../../utils/iconLoader";
+import { eventBus } from "../../store";
+import { ArrowRight } from "@element-plus/icons-vue";
 
 // 定义组件props
 const props = defineProps({
@@ -161,14 +157,19 @@ const emit = defineEmits([
   "copy",
   "paste",
   "cut",
+  "apply-links",
 ]);
 
-// 新建图表弹窗状态
-const showAddChartDialog = ref(false);
-// 图表数据
-const chartData = ref([]);
+// GraphLink组件显示状态
+const graphLinkVisible = ref(false);
+
+// 悬浮弹窗相关
+const tooltipVisible = ref(false)
+const displayTooltipVisible = ref(false)
+const displayTooltipStyle = ref<CSSProperties>({})
 
 const menuRef = ref<HTMLElement | null>(null);
+const displayMenuItemRef = ref<HTMLElement | null>(null);
 
 // 菜单尺寸常量
 const MENU_WIDTH = 180; // 与CSS中的min-width一致
@@ -287,9 +288,14 @@ const handleHighlight = () => {
 
 // 处理所在图表菜单项点击
 const handleLocateChart = () => {
-  logSelectedShape();
-  emit("locate-chart", props.selectedShape);
+  // 关闭右键菜单
   closeMenu();
+
+  // 发送事件给父组件
+  eventBus.emit("locate-chart", props.selectedShape);
+
+  //发送位置信息给所在图表
+  eventBus.emit("locate-chart-position", props.position);
 };
 
 // 处理新建图表菜单项点击
@@ -344,6 +350,107 @@ const handleSelectChart = (payload: { value: any; isChart: boolean }) => {
   });
 };
 
+// 用于存储延迟关闭的定时器
+let tooltipCloseTimer: NodeJS.Timeout | null = null
+let displayTooltipCloseTimer: NodeJS.Timeout | null = null
+
+// 更新展示弹框位置
+const updateDisplayTooltipPosition = () => {
+  if (!displayMenuItemRef.value) return;
+
+  const menuItemRect = displayMenuItemRef.value.getBoundingClientRect();
+  const tooltipWidth = 120; // 弹框宽度
+
+  // 计算弹框位置 - 在右边显示
+  let left = menuItemRect.right + 8; // 菜单项右边 + 8px 间距
+  let top = menuItemRect.top;
+
+  // 检查是否超出右边界
+  const viewportWidth = window.innerWidth;
+  if (left + tooltipWidth > viewportWidth) {
+    left = menuItemRect.left - tooltipWidth - 8; // 在左边显示
+  }
+
+  // 确保不超出顶部和底部边界
+  const viewportHeight = window.innerHeight;
+  if (top + 120 > viewportHeight) { // 假设弹框高度为120px
+    top = viewportHeight - 120 - 10;
+  }
+  top = Math.max(10, top);
+
+  displayTooltipStyle.value = {
+    left: `${left}px`,
+    top: `${top}px`,
+    position: "fixed",
+    "z-index": "10000",
+  };
+};
+
+// 处理展示菜单项鼠标进入
+const handleDisplayMouseEnter = () => {
+  if (displayTooltipCloseTimer) {
+    clearTimeout(displayTooltipCloseTimer);
+    displayTooltipCloseTimer = null;
+  }
+  
+  displayTooltipVisible.value = true;
+  updateDisplayTooltipPosition();
+};
+
+// 处理展示菜单项鼠标离开
+const handleDisplayMouseLeave = () => {
+  displayTooltipCloseTimer = setTimeout(() => {
+    displayTooltipVisible.value = false;
+  }, 200); // 200ms延迟，容错时间
+};
+
+// 处理弹框鼠标进入
+const handleTooltipMouseEnter = () => {
+  if (displayTooltipCloseTimer) {
+    clearTimeout(displayTooltipCloseTimer);
+    displayTooltipCloseTimer = null;
+  }
+};
+
+// 处理弹框鼠标离开
+const handleTooltipMouseLeave = () => {
+  displayTooltipVisible.value = false;
+};
+
+// 处理展示子菜单项点击
+const handleDisplayView = () => {
+  logSelectedShape();
+  eventBus.emit("display-view", props.selectedShape);
+  displayTooltipVisible.value = false;
+  closeMenu();
+};
+
+const handleDisplayLink = () => {
+  logSelectedShape();
+  eventBus.emit("display-link", props.selectedShape);
+  displayTooltipVisible.value = false;
+  closeMenu();
+};
+
+const handleDisplayPortAttr = () => {
+  logSelectedShape();
+  eventBus.emit("display-port-attr", props.selectedShape);
+  displayTooltipVisible.value = false;
+  closeMenu();
+};
+
+// 处理点击外部关闭弹窗（包括右键点击）
+const handleTooltipClickOutside = (event: MouseEvent) => {
+  // 检查点击目标是否在弹窗内
+  const tooltipElement = document.querySelector('.diagram-list-tooltip');
+  if (tooltipElement && !tooltipElement.contains(event.target as Node)) {
+    tooltipVisible.value = false;
+    // 移除所有相关事件监听器
+    document.removeEventListener('click', handleTooltipClickOutside, true);
+    document.removeEventListener('contextmenu', handleTooltipClickOutside, true);
+  }
+};
+
 // 处理复制菜单项点击
 const handleCopy = () => {
   logSelectedShape();
@@ -370,6 +477,9 @@ const handleWindowResize = () => {
   if (props.visible) {
     updateMenuPosition();
   }
+  if (displayTooltipVisible.value) {
+    updateDisplayTooltipPosition();
+  }
 };
 
 // 组件挂载时添加事件监听
@@ -383,6 +493,17 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener("click", handleClickOutside);
   window.removeEventListener("resize", handleWindowResize);
+  // 移除所在图表弹窗的点击事件监听器
+  document.removeEventListener('click', handleTooltipClickOutside, true);
+  document.removeEventListener('contextmenu', handleTooltipClickOutside, true);
+  
+  // 清理定时器
+  if (tooltipCloseTimer) {
+    clearTimeout(tooltipCloseTimer);
+  }
+  if (displayTooltipCloseTimer) {
+    clearTimeout(displayTooltipCloseTimer);
+  }
 });
 </script>
 
@@ -408,6 +529,7 @@ onUnmounted(() => {
     opacity: 0;
     transform: scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -418,10 +540,12 @@ onUnmounted(() => {
 .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;
 }
@@ -461,15 +585,64 @@ onUnmounted(() => {
 .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;
 }
+
+/* 展示子菜单弹框样式 */
+.display-tooltip {
+  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;
+  min-width: 120px;
+  animation: tooltipFadeIn 0.2s ease forwards;
+}
+
+.tooltip-content {
+  overflow: hidden;
+}
+
+.tooltip-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: #f5f7fa;
+    color: #303133;
+  }
+
+  span {
+    display: block;
+  }
+}
+
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

package/src/components/DiagramListTooltip/DiagramListTooltip.vue

@@ -0,0 +1,138 @@
+<template>
+  <div 
+    v-if="visible" 
+    ref="tooltipRef"
+    class="diagram-list-tooltip" 
+    :style="{ left: x + 'px', top: y + 'px' }"
+    @click.stop
+  >
+    <div class="tooltip-title text-[#909399] text-[14px] h-[22px]">所在图表</div>
+    <div class="tooltip-content">
+      <div v-for="diagram in (diagramLocationData || [])" :key="diagram.treeId" class="diagram-item" @click="onLocationChartClick(diagram)">
+        <div class="diagram-icon">
+          <img src="@/statics/icons/childIcons/安全概念图@3x.png" alt="图标" />
+        </div>
+        <div :title="diagram.modelName" class="diagram-name text-[14px] text-[#606266]">{{ diagram.modelName }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, onMounted, onUnmounted, watch } from 'vue'
+import { eventBus } from "../../store";
+
+// 定义图表数据类型
+interface Diagram {
+  modelCode: string
+  treeId: string
+  modelName: string
+}
+
+// Props
+const props = defineProps<{
+  visible: boolean
+  x: number
+  y: number
+  currentDiagramId: string
+  diagramLocationData?: Diagram[] | null
+}>()
+
+// Emits
+const emit = defineEmits<{
+  locationChartClick: [diagram: Diagram],
+  close: []
+}>()
+
+// 引用弹窗元素
+const tooltipRef = ref<HTMLElement>()
+
+// 处理点击外部区域关闭弹窗
+const handleClickOutside = (event: MouseEvent) => {
+  if (tooltipRef.value && !tooltipRef.value.contains(event.target as Node)) {
+    emit('close')
+  }
+}
+
+// 处理右键菜单事件关闭弹窗
+const handleContextMenu = (event: MouseEvent) => {
+  event.preventDefault()
+  emit('close')
+}
+
+// 图表点击事件处理
+const onLocationChartClick = (diagram: Diagram) => {
+  eventBus.emit('locationChartClick', diagram)
+  emit('close')
+}
+
+// 监听可见性变化，动态添加/移除事件监听器
+watch(() => props.visible, (newVisible) => {
+  if (newVisible) {
+    document.addEventListener('click', handleClickOutside)
+    document.addEventListener('contextmenu', handleContextMenu)
+  } else {
+    document.removeEventListener('click', handleClickOutside)
+    document.removeEventListener('contextmenu', handleContextMenu)
+  }
+})
+
+// 组件挂载时添加事件监听器
+onMounted(() => {
+  if (props.visible) {
+    document.addEventListener('click', handleClickOutside)
+    document.addEventListener('contextmenu', handleContextMenu)
+  }
+})
+
+// 组件卸载时移除事件监听器
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('contextmenu', handleContextMenu)
+})
+</script>
+
+<style scoped>
+.diagram-list-tooltip {
+  position: fixed;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 10px 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  width: 180px;
+  max-width: 300px;
+}
+.tooltip-title{
+  padding: 0 12px;
+}
+.tooltip-content {}
+
+.diagram-item {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  height: 36px;
+  line-height: 36px;
+  transition: background-color 0.2s;
+  .diagram-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+  }
+}
+
+.diagram-item:hover {
+  background-color: #F0F3F6;
+}
+
+.diagram-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 6px;
+}
+</style>