فهرست منبع

fix: 关系图谱工具条精简与节点拖动/全屏弹框修复

1. 移除工具条放大/缩小/框选按钮;2. 适配画布改用 CompressOutlined 图标;3. 图标顺序调整为查找、过滤、扩散关系、重新布局、居中内容,适配与全屏置后;4. 增加 drag-element 行为,恢复节点拖动;5. 详情弹框 z-index 提到 1200,高于全屏图谱浮层 1010,修复全屏下点/线详情弹框被盖住。
cc 1 روز پیش
والد
کامیت
d1250ff01e
1فایلهای تغییر یافته به همراه24 افزوده شده و 51 حذف شده
  1. 24 51
      ai-electron/frontend/src/ai/components/graph/GraphAnalysisViewer.vue

+ 24 - 51
ai-electron/frontend/src/ai/components/graph/GraphAnalysisViewer.vue

@@ -173,20 +173,14 @@
                 <FilterOutlined />
               </Button>
             </Tooltip>
-            <span class="canvas-toolbar__divider"></span>
-            <Tooltip title="缩小">
-              <Button type="text" class="canvas-toolbar__button" @click="zoomOut">
-                <MinusOutlined />
-              </Button>
-            </Tooltip>
-            <Tooltip title="放大">
-              <Button type="text" class="canvas-toolbar__button" @click="zoomIn">
-                <PlusOutlined />
+            <Tooltip title="扩散关系">
+              <Button type="text" class="canvas-toolbar__button" @click="selectNeighborElements">
+                <ShareAltOutlined />
               </Button>
             </Tooltip>
-            <Tooltip title="适配画布">
-              <Button type="text" class="canvas-toolbar__button" @click="fitView">
-                <FullscreenOutlined />
+            <Tooltip title="重新布局">
+              <Button type="text" class="canvas-toolbar__button" @click="relayout">
+                <ApartmentOutlined />
               </Button>
             </Tooltip>
             <Tooltip title="居中内容">
@@ -194,22 +188,12 @@
                 <AimOutlined />
               </Button>
             </Tooltip>
-            <span class="canvas-toolbar__divider"></span>
-            <Tooltip title="扩散关系">
-              <Button type="text" class="canvas-toolbar__button" @click="selectNeighborElements">
-                <ShareAltOutlined />
-              </Button>
-            </Tooltip>
-            <Tooltip title="框选">
-              <Button type="text" class="canvas-toolbar__button" @click="showBoxSelectTip">
-                <BorderOutlined />
-              </Button>
-            </Tooltip>
-            <Tooltip title="重新布局">
-              <Button type="text" class="canvas-toolbar__button" @click="relayout">
-                <ApartmentOutlined />
+            <Tooltip title="适配画布">
+              <Button type="text" class="canvas-toolbar__button" @click="fitView">
+                <CompressOutlined />
               </Button>
             </Tooltip>
+            <span class="canvas-toolbar__divider"></span>
             <Tooltip title="全屏查看">
               <Button type="text" class="canvas-toolbar__button" @click="emit('toggle-fullscreen')">
                 <FullscreenOutlined />
@@ -230,6 +214,7 @@
       :open="detailTableModalOpen"
       :title="detailTitle"
       :width="960"
+      :z-index="DETAIL_MODAL_Z_INDEX"
       :loading="detailLoading"
       :filters="detailFilters"
       :filter-schema="detailFilterSchema"
@@ -257,6 +242,7 @@
       :open="detailSummaryModalOpen"
       :title="detailTitle"
       :width="960"
+      :z-index="DETAIL_MODAL_Z_INDEX"
       :show-ok-btn="false"
       :show-cancel-btn="false"
       :can-fullscreen="true"
@@ -279,6 +265,7 @@
     <TransRecordModal
       v-model:open="transDetailVisible"
       :title="transDetailTitle"
+      :z-index="DETAIL_MODAL_Z_INDEX"
       :base-query="transDetailBaseQuery"
       :fetch-api="fetchTransDetailRecords"
       :filter-fields="['startDate', 'endDate', 'transAmount']"
@@ -288,6 +275,7 @@
     <CallRecordModal
       v-model:open="callDetailVisible"
       :title="callDetailTitle"
+      :z-index="DETAIL_MODAL_Z_INDEX"
       :base-query="callDetailBaseQuery"
       :fetch-api="fetchCallDetailRecords"
       :filter-fields="['startDate', 'endDate']"
@@ -308,11 +296,9 @@
   import {
     AimOutlined,
     ApartmentOutlined,
-    BorderOutlined,
+    CompressOutlined,
     FilterOutlined,
     FullscreenOutlined,
-    MinusOutlined,
-    PlusOutlined,
     SearchOutlined,
     ShareAltOutlined,
   } from '@ant-design/icons-vue';
@@ -350,6 +336,8 @@
 
   const FILTER_OPERATORS = ['>', '>=', '=', '<', '<='] as const;
   const filterOperators = FILTER_OPERATORS;
+  /** 详情弹框必须高于全屏图谱浮层(--ai-z-modal + 10 = 1010),低于 toast(2000) */
+  const DETAIL_MODAL_Z_INDEX = 1200;
 
   const stageRef = ref<HTMLDivElement>();
   const graphRef = shallowRef<Graph | null>(null);
@@ -1005,10 +993,6 @@
     activePanel.value = activePanel.value === panel ? null : panel;
   };
 
-  const showBoxSelectTip = () => {
-    showMessage('按住 Shift 拖动画布即可框选', 'info');
-  };
-
   const selectNeighborElements = () => {
     const graph = graphRef.value;
     const node = selectedNode.value;
@@ -1246,6 +1230,13 @@
             enable: (event: any) => event?.targetType === 'canvas',
           },
           'zoom-canvas',
+          {
+            type: 'drag-element',
+            dropEffect: 'move',
+            state: 'selected',
+            animation: false,
+            enable: (event: any) => event?.targetType === 'node',
+          },
         ],
         plugins: performanceMode.value
           ? [createContextMenuPlugin()]
@@ -1345,24 +1336,6 @@
     }
   }
 
-  async function zoomIn() {
-    try {
-      await graphRef.value?.zoomBy(1.12, { duration: 180 });
-      refreshZoom();
-    } catch {
-      /* 忽略 */
-    }
-  }
-
-  async function zoomOut() {
-    try {
-      await graphRef.value?.zoomBy(0.88, { duration: 180 });
-      refreshZoom();
-    } catch {
-      /* 忽略 */
-    }
-  }
-
   async function fitView() {
     try {
       await graphRef.value?.fitView({ when: 'always' }, false);