简单贝塞尔曲线
@@ -67,30 +43,30 @@
diff --git a/src/views/ops/pages/netarch/topo/components/GroupTreeItem.vue b/src/views/ops/pages/netarch/topo/components/GroupTreeItem.vue
index 34e2a9e..4c72e8d 100644
--- a/src/views/ops/pages/netarch/topo/components/GroupTreeItem.vue
+++ b/src/views/ops/pages/netarch/topo/components/GroupTreeItem.vue
@@ -1,124 +1,124 @@
-
-
-
-
+
+
+
+
-
-
+
+
- {{ nodeData.label }}
-
异常
-
告警
+ {{ nodeData?.label || group.name }}
+
+
-
-
{{ nodeData.ip }}
-
- {{ nodeData.alerts }}个告警
-
+
+ {{ nodeData.ip }}
+ {{ nodeData.alerts }} 告警
+
+
+
+ {{ group.children?.length || 0 }}
+
-
-
-
-
-
+
+
+
diff --git a/src/views/ops/pages/netarch/topo/config.ts b/src/views/ops/pages/netarch/topo/config.ts
index b228896..9194793 100644
--- a/src/views/ops/pages/netarch/topo/config.ts
+++ b/src/views/ops/pages/netarch/topo/config.ts
@@ -1,17 +1,34 @@
-import { DeviceType } from './types';
+import { DeviceType } from './types'
+import {
+ IconServer,
+ IconRouter,
+ IconDeviceDesktop,
+ IconCloud,
+ IconNotes,
+ IconMap,
+ IconShield,
+ IconDatabase,
+ IconDeviceMobile,
+} from '@tabler/icons-vue'
-// 设备类型配置
-export const DEVICE_TYPE_CONFIG: Record
= {
- server: { icon: 'icon-server', label: '服务器', color: '#2196F3' },
- router: { icon: 'icon-router', label: '路由器', color: '#FF9800' },
- switch: { icon: 'icon-desktop', label: '交换机', color: '#4CAF50' },
- desktop: { icon: 'icon-desktop', label: '终端', color: '#9C27B0' },
- cloud: { icon: 'icon-cloud', label: '云端节点', color: '#00BCD4' },
- text: { icon: 'icon-text', label: '文本标注', color: '#757575' },
- region: { icon: 'icon-rectangle', label: '区域', color: '#FF5722' },
-};
+/** 设备类型配置 */
+export const DEVICE_TYPE_CONFIG: Record = {
+ server: { icon: IconServer, label: '服务器', color: '#3B82F6' },
+ router: { icon: IconRouter, label: '路由器', color: '#F59E0B' },
+ switch: { icon: IconDeviceDesktop, label: '交换机', color: '#10B981' },
+ desktop: { icon: IconDeviceDesktop, label: '终端', color: '#8B5CF6' },
+ cloud: { icon: IconCloud, label: '云端节点', color: '#06B6D4' },
+ text: { icon: IconNotes, label: '文本标注', color: '#6B7280' },
+ region: { icon: IconMap, label: '区域', color: '#EF4444' },
+}
-// 侧边栏宽度
-export const DRAWER_WIDTH = 280;
+/** 扩展设备类型配置(包含更多设备) */
+export const EXTENDED_DEVICE_CONFIG = {
+ ...DEVICE_TYPE_CONFIG,
+ firewall: { icon: IconShield, label: '防火墙', color: '#DC2626' },
+ storage: { icon: IconDatabase, label: '存储设备', color: '#7C3AED' },
+ mobile: { icon: IconDeviceMobile, label: '移动设备', color: '#EC4899' },
+}
-// 初始节点数据 - 带层级关系
+/** 侧边栏宽度 */
+export const DRAWER_WIDTH = 280
diff --git a/src/views/ops/pages/netarch/topo/hooks/useEdgeStyles.ts b/src/views/ops/pages/netarch/topo/hooks/useEdgeStyles.ts
index 5c93809..8c147c3 100644
--- a/src/views/ops/pages/netarch/topo/hooks/useEdgeStyles.ts
+++ b/src/views/ops/pages/netarch/topo/hooks/useEdgeStyles.ts
@@ -1,29 +1,30 @@
-import { computed, ComputedRef } from 'vue';
-import { Edge } from '@vue-flow/core';
+import { computed, ComputedRef, unref, Ref } from 'vue'
+import { Edge } from '@vue-flow/core'
-type EdgeType = 'default' | 'straight' | 'step' | 'smoothstep' | 'simplebezier';
+type EdgeType = 'default' | 'straight' | 'step' | 'simplebezier'
/**
* 边样式计算Hook
* 根据边类型、链路类型、标签等计算最终样式
*/
-export function useEdgeStyles(edges: Edge[], edgeType: EdgeType): ComputedRef {
+export function useEdgeStyles(edges: Ref | Edge[], edgeType: Ref | EdgeType): ComputedRef {
const styledEdges = computed(() => {
- return edges.map((edge) => {
- const isVirtual = edge.data?.type === 'virtual';
- const hasLabel = edge.data?.label && edge.data.label.trim() !== '';
+ const edgesValue = unref(edges)
+ const edgeTypeValue = unref(edgeType)
+
+ return edgesValue.map((edge) => {
+ const isVirtual = edge.data?.type === 'virtual'
+ const hasLabel = edge.data?.label && edge.data.label.trim() !== ''
return {
...edge,
- type: edgeType, // 使用全局设置的边类型
+ type: edgeTypeValue,
label: hasLabel ? edge.data?.label : undefined,
- animated: true, // 流动效果
+ animated: true,
style: {
- stroke: isVirtual
- ? '#F57C00' // 虚拟链路使用橙色
- : '#1976D2', // 物理链路使用蓝色
+ stroke: isVirtual ? '#F57C00' : '#1976D2',
strokeWidth: 2,
- strokeDasharray: isVirtual ? '5,5' : undefined, // 虚拟链路使用虚线
+ strokeDasharray: isVirtual ? '5,5' : undefined,
},
labelStyle: hasLabel
? {
@@ -38,9 +39,9 @@ export function useEdgeStyles(edges: Edge[], edgeType: EdgeType): ComputedRef
-
+
@@ -66,16 +63,9 @@
@delete="handleDeleteNode"
/>
-
+
-
+
-
+
-
+
- 调用 DC-Control /topologies/:id/nodes/batch-import,节点将绑定 ref_type=asset。
+ 调用 DC-Control
+ /topologies/:id/nodes/batch-import
+ ,节点将绑定
+ ref_type=asset
+ 。