From af7c652ed4a67303d323c3ffad734fb7b48e1891 Mon Sep 17 00:00:00 2001 From: daxiong Date: Sat, 11 Apr 2026 13:54:34 +0800 Subject: [PATCH] feat --- .../dc/database/components/FormDialog.vue | 64 +- .../dc/middleware/components/FormDialog.vue | 58 +- .../dc/network/components/FormDialog.vue | 41 +- .../dc/server/components/ServerFormDialog.vue | 23 +- .../dc/url-harvest/components/FormDialog.vue | 14 +- .../netarch/topo/components/CustomNode.vue | 268 ++++--- .../netarch/topo/components/EdgeStyleMenu.vue | 60 +- .../netarch/topo/components/GroupPanel.vue | 159 ++-- .../netarch/topo/components/GroupTreeItem.vue | 251 +++--- src/views/ops/pages/netarch/topo/config.ts | 45 +- .../pages/netarch/topo/hooks/useEdgeStyles.ts | 35 +- src/views/ops/pages/netarch/topo/index.vue | 712 +++++++++--------- src/views/ops/pages/netarch/topo/types.ts | 50 +- tsconfig.tsbuildinfo | 2 +- 14 files changed, 913 insertions(+), 869 deletions(-) diff --git a/src/views/ops/pages/dc/database/components/FormDialog.vue b/src/views/ops/pages/dc/database/components/FormDialog.vue index 78491cd..fbd0c69 100644 --- a/src/views/ops/pages/dc/database/components/FormDialog.vue +++ b/src/views/ops/pages/dc/database/components/FormDialog.vue @@ -10,28 +10,19 @@ > - - - - - - - - + + + @@ -54,13 +45,7 @@ - + @@ -73,10 +58,7 @@ - + @@ -92,23 +74,13 @@ - + - + @@ -131,13 +103,7 @@ - + @@ -148,11 +114,7 @@ - + @@ -162,13 +124,7 @@ import { ref, reactive, computed, watch } from 'vue' import { Message } from '@arco-design/web-vue' import type { FormInstance } from '@arco-design/web-vue' -import { - createDatabase, - updateDatabase, - type CreateDatabaseParams, - type UpdateDatabaseParams, - type DatabaseType, -} from '@/api/ops/database' +import { createDatabase, updateDatabase, type CreateDatabaseParams, type UpdateDatabaseParams, type DatabaseType } from '@/api/ops/database' interface Props { visible: boolean diff --git a/src/views/ops/pages/dc/middleware/components/FormDialog.vue b/src/views/ops/pages/dc/middleware/components/FormDialog.vue index ee4c907..8ab477f 100644 --- a/src/views/ops/pages/dc/middleware/components/FormDialog.vue +++ b/src/views/ops/pages/dc/middleware/components/FormDialog.vue @@ -10,28 +10,19 @@ > - - - - - - - - + + + @@ -48,17 +39,13 @@ - + - + @@ -80,13 +67,7 @@ - + @@ -99,23 +80,13 @@ - + - + @@ -125,12 +96,7 @@ import { ref, reactive, computed, watch } from 'vue' import { Message } from '@arco-design/web-vue' import type { FormInstance } from '@arco-design/web-vue' -import { - createMiddleware, - updateMiddleware, - type MiddlewareCreateData, - type MiddlewareUpdateData, -} from '@/api/ops/middleware' +import { createMiddleware, updateMiddleware, type MiddlewareCreateData, type MiddlewareUpdateData } from '@/api/ops/middleware' interface Props { visible: boolean @@ -220,9 +186,9 @@ watch( const handleOk = async () => { try { await formRef.value?.validate() - + confirmLoading.value = true - + if (isEdit.value) { const updateData: MiddlewareUpdateData = { service_identity: formData.service_identity, @@ -264,7 +230,7 @@ const handleOk = async () => { await createMiddleware(createData) Message.success('创建成功') } - + emit('success') handleCancel() } catch (error) { diff --git a/src/views/ops/pages/dc/network/components/FormDialog.vue b/src/views/ops/pages/dc/network/components/FormDialog.vue index b3be647..40ec95e 100644 --- a/src/views/ops/pages/dc/network/components/FormDialog.vue +++ b/src/views/ops/pages/dc/network/components/FormDialog.vue @@ -10,23 +10,11 @@ > - - - - - - - - @@ -39,6 +27,9 @@ + + + @@ -88,18 +79,11 @@ - + - + - + @@ -108,7 +92,6 @@ \ No newline at end of file + diff --git a/src/views/ops/pages/dc/server/components/ServerFormDialog.vue b/src/views/ops/pages/dc/server/components/ServerFormDialog.vue index 00395be..0ab0477 100644 --- a/src/views/ops/pages/dc/server/components/ServerFormDialog.vue +++ b/src/views/ops/pages/dc/server/components/ServerFormDialog.vue @@ -10,28 +10,19 @@ > - - - - - - - - + + + @@ -140,11 +131,7 @@ - + @@ -265,7 +252,7 @@ watch( }) } } - }, + } ) const handleOk = async () => { diff --git a/src/views/ops/pages/dc/url-harvest/components/FormDialog.vue b/src/views/ops/pages/dc/url-harvest/components/FormDialog.vue index 1e2a848..84721bc 100644 --- a/src/views/ops/pages/dc/url-harvest/components/FormDialog.vue +++ b/src/views/ops/pages/dc/url-harvest/components/FormDialog.vue @@ -10,22 +10,18 @@ > - - - - - + + + + + - - - - diff --git a/src/views/ops/pages/netarch/topo/components/CustomNode.vue b/src/views/ops/pages/netarch/topo/components/CustomNode.vue index 83c5896..9402502 100644 --- a/src/views/ops/pages/netarch/topo/components/CustomNode.vue +++ b/src/views/ops/pages/netarch/topo/components/CustomNode.vue @@ -1,154 +1,244 @@ diff --git a/src/views/ops/pages/netarch/topo/components/EdgeStyleMenu.vue b/src/views/ops/pages/netarch/topo/components/EdgeStyleMenu.vue index 7f66916..dc8a372 100644 --- a/src/views/ops/pages/netarch/topo/components/EdgeStyleMenu.vue +++ b/src/views/ops/pages/netarch/topo/components/EdgeStyleMenu.vue @@ -2,10 +2,7 @@ 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 @@ 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 + 。