feat: 拓扑信息简览

src/views/monitor/topology/graph.ts

@@ -317,7 +317,7 @@ registerNode(
       if (cfg.info) {
         const neInfo: any = cfg.info;
         const hasNeState = neInfo.serverState.neId;
-        group.addShape('circle', {
+        const neStateShape = group.addShape('circle', {
           attrs: {
             x: r - 3,
             y: -r + 3,
@@ -329,6 +329,21 @@ registerNode(
           // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
           name: 'ne-state',
         });
+
+        // 添加动画
+        neStateShape.animate(
+          {
+            // Magnifying and disappearing
+            r: 5,
+            opacity: 0.3,
+          },
+          {
+            duration: 1000,
+            easing: 'easeCubic',
+            delay: 0,
+            repeat: true, // repeat
+          }
+        );
       }
 
       if (cfg.label) {
@@ -1468,9 +1483,6 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
               <div id="hide" style="cursor: pointer; margin-bottom: 2px">
                 2. 隐藏节点
               </div>
-              <div id="restart" style="cursor: pointer; margin-bottom: 2px">
-                3. 重启
-              </div>
             </div>
             `;
           }

src/views/monitor/topology/index.vue

@@ -169,7 +169,7 @@ onMounted(() => {
       size="small"
     >
       <!-- 插槽-卡片左侧侧 -->
-      <template #title>
+      <template #title v-if="false">
         <div class="button-container" style="margin-bottom: -12px">
           <a-button type="primary" @click.prevent="fnAdd">
             <template #icon>
@@ -219,7 +219,7 @@ onMounted(() => {
         </div>
       </template>
       <!-- 插槽-卡片右侧 -->
-      <template #extra>
+      <template #extra v-if="false">
         <a-tooltip>
           <template #title>{{ t('common.reloadText') }}</template>
           <a-button type="text" @click.prevent="fnGetList()">
@@ -230,6 +230,7 @@ onMounted(() => {
 
       <div ref="graphG6Dom" class="chart"></div>
 
+      <template v-if="false">
         <div
           style="
             display: flex;
@@ -314,6 +315,7 @@ onMounted(() => {
         <div class="charts">
           <ChartGraphG6></ChartGraphG6>
         </div>
+      </template>
     </a-card>
   </PageContainer>
 </template>