feat(topology): add network topology page; tighten config save check
- Interactive SRv6 topology canvas (@xyflow/react + d3-force auto-layout), custom nodes/edges, detail sheet, search and relayout controls - Strict success-flag validation on /api/config save responses
This commit is contained in:
@@ -15,8 +15,10 @@
|
|||||||
"@base-ui/react": "^1.7.0",
|
"@base-ui/react": "^1.7.0",
|
||||||
"@fontsource-variable/inter": "^5.3.0",
|
"@fontsource-variable/inter": "^5.3.0",
|
||||||
"@tailwindcss/vite": "^4",
|
"@tailwindcss/vite": "^4",
|
||||||
|
"@xyflow/react": "^12.11.3",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"d3-force": "^3.0.0",
|
||||||
"lucide-react": "^1.33.0",
|
"lucide-react": "^1.33.0",
|
||||||
"react": "^19.2.6",
|
"react": "^19.2.6",
|
||||||
"react-dom": "^19.2.6",
|
"react-dom": "^19.2.6",
|
||||||
@@ -27,6 +29,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10",
|
"@eslint/js": "^10",
|
||||||
|
"@types/d3-force": "^3.0.10",
|
||||||
"@types/node": "^24",
|
"@types/node": "^24",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
"@types/react-dom": "^19",
|
"@types/react-dom": "^19",
|
||||||
|
|||||||
Generated
+214
-34
@@ -17,12 +17,18 @@ importers:
|
|||||||
'@tailwindcss/vite':
|
'@tailwindcss/vite':
|
||||||
specifier: ^4
|
specifier: ^4
|
||||||
version: 4.3.3(vite@8.2.2(@types/node@24.13.3)(jiti@2.7.0))
|
version: 4.3.3(vite@8.2.2(@types/node@24.13.3)(jiti@2.7.0))
|
||||||
|
'@xyflow/react':
|
||||||
|
specifier: ^12.11.3
|
||||||
|
version: 12.11.3(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
|
||||||
class-variance-authority:
|
class-variance-authority:
|
||||||
specifier: ^0.7.1
|
specifier: ^0.7.1
|
||||||
version: 0.7.1
|
version: 0.7.1
|
||||||
clsx:
|
clsx:
|
||||||
specifier: ^2.1.1
|
specifier: ^2.1.1
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
|
d3-force:
|
||||||
|
specifier: ^3.0.0
|
||||||
|
version: 3.0.0
|
||||||
lucide-react:
|
lucide-react:
|
||||||
specifier: ^1.33.0
|
specifier: ^1.33.0
|
||||||
version: 1.33.0(react@19.2.8)
|
version: 1.33.0(react@19.2.8)
|
||||||
@@ -48,6 +54,9 @@ importers:
|
|||||||
'@eslint/js':
|
'@eslint/js':
|
||||||
specifier: ^10
|
specifier: ^10
|
||||||
version: 10.0.1(eslint@10.9.0(jiti@2.7.0))
|
version: 10.0.1(eslint@10.9.0(jiti@2.7.0))
|
||||||
|
'@types/d3-force':
|
||||||
|
specifier: ^3.0.10
|
||||||
|
version: 3.0.10
|
||||||
'@types/node':
|
'@types/node':
|
||||||
specifier: ^24
|
specifier: ^24
|
||||||
version: 24.13.3
|
version: 24.13.3
|
||||||
@@ -347,10 +356,6 @@ packages:
|
|||||||
'@jridgewell/gen-mapping@0.3.12':
|
'@jridgewell/gen-mapping@0.3.12':
|
||||||
resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
|
resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
|
||||||
|
|
||||||
'@jridgewell/gen-mapping@0.3.5':
|
|
||||||
resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
|
|
||||||
engines: {node: '>=6.0.0'}
|
|
||||||
|
|
||||||
'@jridgewell/remapping@2.3.5':
|
'@jridgewell/remapping@2.3.5':
|
||||||
resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
|
resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
|
||||||
|
|
||||||
@@ -358,19 +363,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
|
resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
|
||||||
engines: {node: '>=6.0.0'}
|
engines: {node: '>=6.0.0'}
|
||||||
|
|
||||||
'@jridgewell/set-array@1.2.1':
|
|
||||||
resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
|
|
||||||
engines: {node: '>=6.0.0'}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.4.10':
|
|
||||||
resolution: {integrity: sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg==}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.4.14':
|
|
||||||
resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.5.0':
|
|
||||||
resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.5.5':
|
'@jridgewell/sourcemap-codec@1.5.5':
|
||||||
resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
|
resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
|
||||||
|
|
||||||
@@ -609,6 +601,27 @@ packages:
|
|||||||
'@ts-morph/common@0.27.0':
|
'@ts-morph/common@0.27.0':
|
||||||
resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
|
resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
|
||||||
|
|
||||||
|
'@types/d3-color@3.1.3':
|
||||||
|
resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
|
||||||
|
|
||||||
|
'@types/d3-drag@3.0.7':
|
||||||
|
resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
|
||||||
|
|
||||||
|
'@types/d3-force@3.0.10':
|
||||||
|
resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
|
||||||
|
|
||||||
|
'@types/d3-interpolate@3.0.4':
|
||||||
|
resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
|
||||||
|
|
||||||
|
'@types/d3-selection@3.0.11':
|
||||||
|
resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
|
||||||
|
|
||||||
|
'@types/d3-transition@3.0.9':
|
||||||
|
resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
|
||||||
|
|
||||||
|
'@types/d3-zoom@3.0.8':
|
||||||
|
resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
|
||||||
|
|
||||||
'@types/esrecurse@4.3.1':
|
'@types/esrecurse@4.3.1':
|
||||||
resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
|
resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
|
||||||
|
|
||||||
@@ -707,6 +720,22 @@ packages:
|
|||||||
oxc-transform-react:
|
oxc-transform-react:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
'@xyflow/react@12.11.3':
|
||||||
|
resolution: {integrity: sha512-G3jogHz2GWUtIOkhavUGno2YzY9u6fILIJBttfsBendb0/HWB90JG+sOTAvlIMEwyvq9zgy9V9ZQSwyQjR5QzQ==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '>=17'
|
||||||
|
'@types/react-dom': '>=17'
|
||||||
|
react: '>=17'
|
||||||
|
react-dom: '>=17'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@xyflow/system@0.0.80':
|
||||||
|
resolution: {integrity: sha512-ywc3ZqG91brzWrH1WlwMdIX4goOfrpBy6AbLdVSaof/Xx9l138ijIKRExM6EkMro2F+OImGmSiA/WKcXvKVcfA==}
|
||||||
|
|
||||||
accepts@2.0.0:
|
accepts@2.0.0:
|
||||||
resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
|
resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
|
||||||
engines: {node: '>= 0.6'}
|
engines: {node: '>= 0.6'}
|
||||||
@@ -836,6 +865,9 @@ packages:
|
|||||||
class-variance-authority@0.7.1:
|
class-variance-authority@0.7.1:
|
||||||
resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
|
resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
|
||||||
|
|
||||||
|
classcat@5.0.5:
|
||||||
|
resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
|
||||||
|
|
||||||
cli-cursor@5.0.0:
|
cli-cursor@5.0.0:
|
||||||
resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
|
resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
|
||||||
engines: {node: '>=18'}
|
engines: {node: '>=18'}
|
||||||
@@ -918,6 +950,52 @@ packages:
|
|||||||
csstype@3.2.3:
|
csstype@3.2.3:
|
||||||
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
|
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
|
||||||
|
|
||||||
|
d3-color@3.1.0:
|
||||||
|
resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-dispatch@3.0.1:
|
||||||
|
resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-drag@3.0.0:
|
||||||
|
resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-ease@3.0.1:
|
||||||
|
resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-force@3.0.0:
|
||||||
|
resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-interpolate@3.0.1:
|
||||||
|
resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-quadtree@3.0.1:
|
||||||
|
resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-selection@3.0.0:
|
||||||
|
resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-timer@3.0.1:
|
||||||
|
resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
|
d3-transition@3.0.1:
|
||||||
|
resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
peerDependencies:
|
||||||
|
d3-selection: 2 - 3
|
||||||
|
|
||||||
|
d3-zoom@3.0.0:
|
||||||
|
resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
debounce-fn@4.0.0:
|
debounce-fn@4.0.0:
|
||||||
resolution: {integrity: sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==}
|
resolution: {integrity: sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
@@ -2405,6 +2483,21 @@ packages:
|
|||||||
zod@4.4.3:
|
zod@4.4.3:
|
||||||
resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
|
resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
|
||||||
|
|
||||||
|
zustand@4.5.7:
|
||||||
|
resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
|
||||||
|
engines: {node: '>=12.7.0'}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '>=16.8'
|
||||||
|
immer: '>=9.0.6'
|
||||||
|
react: '>=16.8'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
immer:
|
||||||
|
optional: true
|
||||||
|
react:
|
||||||
|
optional: true
|
||||||
|
|
||||||
snapshots:
|
snapshots:
|
||||||
|
|
||||||
'@babel/code-frame@7.29.7':
|
'@babel/code-frame@7.29.7':
|
||||||
@@ -2723,36 +2816,22 @@ snapshots:
|
|||||||
|
|
||||||
'@jridgewell/gen-mapping@0.3.12':
|
'@jridgewell/gen-mapping@0.3.12':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jridgewell/sourcemap-codec': 1.5.0
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
'@jridgewell/trace-mapping': 0.3.31
|
|
||||||
|
|
||||||
'@jridgewell/gen-mapping@0.3.5':
|
|
||||||
dependencies:
|
|
||||||
'@jridgewell/set-array': 1.2.1
|
|
||||||
'@jridgewell/sourcemap-codec': 1.4.10
|
|
||||||
'@jridgewell/trace-mapping': 0.3.31
|
'@jridgewell/trace-mapping': 0.3.31
|
||||||
|
|
||||||
'@jridgewell/remapping@2.3.5':
|
'@jridgewell/remapping@2.3.5':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jridgewell/gen-mapping': 0.3.5
|
'@jridgewell/gen-mapping': 0.3.12
|
||||||
'@jridgewell/trace-mapping': 0.3.31
|
'@jridgewell/trace-mapping': 0.3.31
|
||||||
|
|
||||||
'@jridgewell/resolve-uri@3.1.2': {}
|
'@jridgewell/resolve-uri@3.1.2': {}
|
||||||
|
|
||||||
'@jridgewell/set-array@1.2.1': {}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.4.10': {}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.4.14': {}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.5.0': {}
|
|
||||||
|
|
||||||
'@jridgewell/sourcemap-codec@1.5.5': {}
|
'@jridgewell/sourcemap-codec@1.5.5': {}
|
||||||
|
|
||||||
'@jridgewell/trace-mapping@0.3.31':
|
'@jridgewell/trace-mapping@0.3.31':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jridgewell/resolve-uri': 3.1.2
|
'@jridgewell/resolve-uri': 3.1.2
|
||||||
'@jridgewell/sourcemap-codec': 1.4.14
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
|
||||||
'@modelcontextprotocol/sdk@1.30.0(zod@3.24.1)':
|
'@modelcontextprotocol/sdk@1.30.0(zod@3.24.1)':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -2918,6 +2997,29 @@ snapshots:
|
|||||||
minimatch: 10.2.6
|
minimatch: 10.2.6
|
||||||
path-browserify: 1.0.1
|
path-browserify: 1.0.1
|
||||||
|
|
||||||
|
'@types/d3-color@3.1.3': {}
|
||||||
|
|
||||||
|
'@types/d3-drag@3.0.7':
|
||||||
|
dependencies:
|
||||||
|
'@types/d3-selection': 3.0.11
|
||||||
|
|
||||||
|
'@types/d3-force@3.0.10': {}
|
||||||
|
|
||||||
|
'@types/d3-interpolate@3.0.4':
|
||||||
|
dependencies:
|
||||||
|
'@types/d3-color': 3.1.3
|
||||||
|
|
||||||
|
'@types/d3-selection@3.0.11': {}
|
||||||
|
|
||||||
|
'@types/d3-transition@3.0.9':
|
||||||
|
dependencies:
|
||||||
|
'@types/d3-selection': 3.0.11
|
||||||
|
|
||||||
|
'@types/d3-zoom@3.0.8':
|
||||||
|
dependencies:
|
||||||
|
'@types/d3-interpolate': 3.0.4
|
||||||
|
'@types/d3-selection': 3.0.11
|
||||||
|
|
||||||
'@types/esrecurse@4.3.1': {}
|
'@types/esrecurse@4.3.1': {}
|
||||||
|
|
||||||
'@types/estree@1.0.9': {}
|
'@types/estree@1.0.9': {}
|
||||||
@@ -3034,6 +3136,31 @@ snapshots:
|
|||||||
'@rolldown/pluginutils': 1.0.1
|
'@rolldown/pluginutils': 1.0.1
|
||||||
vite: 8.2.2(@types/node@24.13.3)(jiti@2.7.0)
|
vite: 8.2.2(@types/node@24.13.3)(jiti@2.7.0)
|
||||||
|
|
||||||
|
'@xyflow/react@12.11.3(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
|
||||||
|
dependencies:
|
||||||
|
'@xyflow/system': 0.0.80
|
||||||
|
classcat: 5.0.5
|
||||||
|
react: 19.2.8
|
||||||
|
react-dom: 19.2.8(react@19.2.8)
|
||||||
|
zustand: 4.5.7(@types/react@19.2.18)(react@19.2.8)
|
||||||
|
optionalDependencies:
|
||||||
|
'@types/react': 19.2.18
|
||||||
|
'@types/react-dom': 19.2.4(@types/react@19.2.18)
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- immer
|
||||||
|
|
||||||
|
'@xyflow/system@0.0.80':
|
||||||
|
dependencies:
|
||||||
|
'@types/d3-drag': 3.0.7
|
||||||
|
'@types/d3-interpolate': 3.0.4
|
||||||
|
'@types/d3-selection': 3.0.11
|
||||||
|
'@types/d3-transition': 3.0.9
|
||||||
|
'@types/d3-zoom': 3.0.8
|
||||||
|
d3-drag: 3.0.0
|
||||||
|
d3-interpolate: 3.0.1
|
||||||
|
d3-selection: 3.0.0
|
||||||
|
d3-zoom: 3.0.0
|
||||||
|
|
||||||
accepts@2.0.0:
|
accepts@2.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
mime-types: 3.0.2
|
mime-types: 3.0.2
|
||||||
@@ -3153,6 +3280,8 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
clsx: 2.1.1
|
clsx: 2.1.1
|
||||||
|
|
||||||
|
classcat@5.0.5: {}
|
||||||
|
|
||||||
cli-cursor@5.0.0:
|
cli-cursor@5.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
restore-cursor: 5.1.0
|
restore-cursor: 5.1.0
|
||||||
@@ -3222,6 +3351,50 @@ snapshots:
|
|||||||
|
|
||||||
csstype@3.2.3: {}
|
csstype@3.2.3: {}
|
||||||
|
|
||||||
|
d3-color@3.1.0: {}
|
||||||
|
|
||||||
|
d3-dispatch@3.0.1: {}
|
||||||
|
|
||||||
|
d3-drag@3.0.0:
|
||||||
|
dependencies:
|
||||||
|
d3-dispatch: 3.0.1
|
||||||
|
d3-selection: 3.0.0
|
||||||
|
|
||||||
|
d3-ease@3.0.1: {}
|
||||||
|
|
||||||
|
d3-force@3.0.0:
|
||||||
|
dependencies:
|
||||||
|
d3-dispatch: 3.0.1
|
||||||
|
d3-quadtree: 3.0.1
|
||||||
|
d3-timer: 3.0.1
|
||||||
|
|
||||||
|
d3-interpolate@3.0.1:
|
||||||
|
dependencies:
|
||||||
|
d3-color: 3.1.0
|
||||||
|
|
||||||
|
d3-quadtree@3.0.1: {}
|
||||||
|
|
||||||
|
d3-selection@3.0.0: {}
|
||||||
|
|
||||||
|
d3-timer@3.0.1: {}
|
||||||
|
|
||||||
|
d3-transition@3.0.1(d3-selection@3.0.0):
|
||||||
|
dependencies:
|
||||||
|
d3-color: 3.1.0
|
||||||
|
d3-dispatch: 3.0.1
|
||||||
|
d3-ease: 3.0.1
|
||||||
|
d3-interpolate: 3.0.1
|
||||||
|
d3-selection: 3.0.0
|
||||||
|
d3-timer: 3.0.1
|
||||||
|
|
||||||
|
d3-zoom@3.0.0:
|
||||||
|
dependencies:
|
||||||
|
d3-dispatch: 3.0.1
|
||||||
|
d3-drag: 3.0.0
|
||||||
|
d3-interpolate: 3.0.1
|
||||||
|
d3-selection: 3.0.0
|
||||||
|
d3-transition: 3.0.1(d3-selection@3.0.0)
|
||||||
|
|
||||||
debounce-fn@4.0.0:
|
debounce-fn@4.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
mimic-fn: 3.1.0
|
mimic-fn: 3.1.0
|
||||||
@@ -4541,3 +4714,10 @@ snapshots:
|
|||||||
zod@3.24.1: {}
|
zod@3.24.1: {}
|
||||||
|
|
||||||
zod@4.4.3: {}
|
zod@4.4.3: {}
|
||||||
|
|
||||||
|
zustand@4.5.7(@types/react@19.2.18)(react@19.2.8):
|
||||||
|
dependencies:
|
||||||
|
use-sync-external-store: 1.6.0(react@19.2.8)
|
||||||
|
optionalDependencies:
|
||||||
|
'@types/react': 19.2.18
|
||||||
|
react: 19.2.8
|
||||||
|
|||||||
+5
-1
@@ -7,6 +7,7 @@ import { AppHeader } from '@/components/layout/app-header'
|
|||||||
import { OverviewPage } from '@/pages/overview'
|
import { OverviewPage } from '@/pages/overview'
|
||||||
import { ConnectionsPage } from '@/pages/connections'
|
import { ConnectionsPage } from '@/pages/connections'
|
||||||
import { SettingsPage } from '@/pages/settings'
|
import { SettingsPage } from '@/pages/settings'
|
||||||
|
import { TopologyPage } from '@/pages/topology'
|
||||||
import { useKlalbSSE } from '@/hooks/use-klalb-sse'
|
import { useKlalbSSE } from '@/hooks/use-klalb-sse'
|
||||||
import { useHashRoute } from '@/hooks/use-hash-route'
|
import { useHashRoute } from '@/hooks/use-hash-route'
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
@@ -72,9 +73,12 @@ export function App() {
|
|||||||
|
|
||||||
{currentTab === 'settings' && <SettingsPage />}
|
{currentTab === 'settings' && <SettingsPage />}
|
||||||
|
|
||||||
|
{currentTab === 'topology' && <TopologyPage />}
|
||||||
|
|
||||||
{currentTab !== 'overview' &&
|
{currentTab !== 'overview' &&
|
||||||
currentTab !== 'connections' &&
|
currentTab !== 'connections' &&
|
||||||
currentTab !== 'settings' && (
|
currentTab !== 'settings' &&
|
||||||
|
currentTab !== 'topology' && (
|
||||||
<div className="flex flex-1 items-center justify-center p-8">
|
<div className="flex flex-1 items-center justify-center p-8">
|
||||||
<Card className="max-w-md text-center">
|
<Card className="max-w-md text-center">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
|
|||||||
@@ -0,0 +1,96 @@
|
|||||||
|
import { memo } from 'react'
|
||||||
|
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
|
||||||
|
import { Server, Copy, Check } from 'lucide-react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
export interface DeviceNodeData {
|
||||||
|
address: string
|
||||||
|
compressedAddress?: string
|
||||||
|
isSelf: boolean
|
||||||
|
deviceName?: string
|
||||||
|
onCopy?: (text: string) => void
|
||||||
|
copiedId?: string | null
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
export type DeviceNodeType = Node<DeviceNodeData, 'device'>
|
||||||
|
|
||||||
|
function DeviceNodeComponent({ data, selected }: NodeProps<Node<DeviceNodeData>>) {
|
||||||
|
const { deviceName, compressedAddress, address, isSelf, onCopy, copiedId } = data
|
||||||
|
const isCopied = copiedId === address
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'group relative flex min-w-44 cursor-pointer flex-col gap-1 rounded-xl border bg-card px-3 py-2.5 shadow-sm transition-all',
|
||||||
|
'hover:border-primary/50 hover:shadow-md',
|
||||||
|
selected && 'border-primary ring-2 ring-primary/30',
|
||||||
|
isSelf &&
|
||||||
|
'border-primary/60 bg-linear-to-br from-primary/5 via-card to-card'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Handle
|
||||||
|
type="target"
|
||||||
|
position={Position.Top}
|
||||||
|
className="!h-2 !w-2 !border-none !bg-transparent"
|
||||||
|
isConnectable={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex size-7 shrink-0 items-center justify-center rounded-lg',
|
||||||
|
isSelf ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Server className="size-4" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex min-w-0 flex-col leading-tight">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<span className="max-w-36 truncate text-xs font-semibold text-foreground">
|
||||||
|
{deviceName || '未命名节点'}
|
||||||
|
</span>
|
||||||
|
{isSelf && (
|
||||||
|
<span className="shrink-0 rounded-full bg-primary/15 px-1.5 py-px text-[9px] font-bold uppercase tracking-wide text-primary">
|
||||||
|
本机
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
onCopy?.(address)
|
||||||
|
}}
|
||||||
|
className="flex items-center gap-0.5 font-mono text-[10px] text-muted-foreground hover:text-foreground"
|
||||||
|
title="点击复制完整地址"
|
||||||
|
>
|
||||||
|
<span className="max-w-32 truncate">{compressedAddress || address}</span>
|
||||||
|
{isCopied ? (
|
||||||
|
<Check className="size-2.5 shrink-0 text-emerald-500" />
|
||||||
|
) : (
|
||||||
|
<Copy className="size-2.5 shrink-0 opacity-40 group-hover:opacity-100" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isSelf && (
|
||||||
|
<span className="absolute -top-1 -right-1 flex size-3">
|
||||||
|
<span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-60" />
|
||||||
|
<span className="relative inline-flex size-3 rounded-full border-2 border-card bg-emerald-500" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Handle
|
||||||
|
type="source"
|
||||||
|
position={Position.Bottom}
|
||||||
|
className="!h-2 !w-2 !border-none !bg-transparent"
|
||||||
|
isConnectable={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DeviceNode = memo(DeviceNodeComponent)
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
import { memo } from 'react'
|
||||||
|
import {
|
||||||
|
BaseEdge,
|
||||||
|
EdgeLabelRenderer,
|
||||||
|
getSmoothStepPath,
|
||||||
|
useReactFlow,
|
||||||
|
type EdgeProps,
|
||||||
|
type Edge,
|
||||||
|
} from '@xyflow/react'
|
||||||
|
import { formatNanoDelay } from '@/lib/format'
|
||||||
|
|
||||||
|
export interface LinkEdgeData {
|
||||||
|
delay: number
|
||||||
|
cost: number
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
export type LinkEdgeType = Edge<LinkEdgeData, 'link'>
|
||||||
|
|
||||||
|
function delayColor(delayNs: number): { stroke: string; badge: string } {
|
||||||
|
const ms = delayNs / 1_000_000
|
||||||
|
if (delayNs <= 0 || !Number.isFinite(delayNs)) {
|
||||||
|
return { stroke: 'hsl(var(--muted-foreground))', badge: 'bg-muted text-muted-foreground' }
|
||||||
|
}
|
||||||
|
if (ms < 1) {
|
||||||
|
return { stroke: '#10b981', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' }
|
||||||
|
}
|
||||||
|
if (ms < 20) {
|
||||||
|
return { stroke: '#f59e0b', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400' }
|
||||||
|
}
|
||||||
|
return { stroke: '#f43f5e', badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400' }
|
||||||
|
}
|
||||||
|
|
||||||
|
function LinkEdgeComponent({
|
||||||
|
id,
|
||||||
|
sourceX,
|
||||||
|
sourceY,
|
||||||
|
targetX,
|
||||||
|
targetY,
|
||||||
|
sourcePosition,
|
||||||
|
targetPosition,
|
||||||
|
data,
|
||||||
|
selected,
|
||||||
|
}: EdgeProps<LinkEdgeType>) {
|
||||||
|
const { setEdges } = useReactFlow()
|
||||||
|
const [edgePath, labelX, labelY] = getSmoothStepPath({
|
||||||
|
sourceX,
|
||||||
|
sourceY,
|
||||||
|
sourcePosition,
|
||||||
|
targetX,
|
||||||
|
targetY,
|
||||||
|
targetPosition,
|
||||||
|
borderRadius: 16,
|
||||||
|
})
|
||||||
|
|
||||||
|
const delay = data?.delay ?? 0
|
||||||
|
const { stroke, badge } = delayColor(delay)
|
||||||
|
const showLabel = delay > 0 && Number.isFinite(delay)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<BaseEdge
|
||||||
|
id={id}
|
||||||
|
path={edgePath}
|
||||||
|
style={{
|
||||||
|
strokeWidth: selected ? 2.5 : 1.75,
|
||||||
|
stroke,
|
||||||
|
opacity: selected ? 1 : 0.85,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{showLabel && (
|
||||||
|
<EdgeLabelRenderer>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
|
||||||
|
}}
|
||||||
|
className="pointer-events-none absolute"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setEdges((eds) => eds.filter((e) => e.id !== id))}
|
||||||
|
className={`pointer-events-auto cursor-pointer rounded-md border border-border/60 px-1.5 py-px font-mono text-[10px] font-semibold tabular-nums shadow-2xs backdrop-blur-xs transition-opacity hover:opacity-70 ${badge}`}
|
||||||
|
title="点击隐藏该链路"
|
||||||
|
>
|
||||||
|
{formatNanoDelay(delay)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</EdgeLabelRenderer>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LinkEdge = memo(LinkEdgeComponent)
|
||||||
@@ -0,0 +1,179 @@
|
|||||||
|
import {
|
||||||
|
Server,
|
||||||
|
Copy,
|
||||||
|
Check,
|
||||||
|
Gauge,
|
||||||
|
Network,
|
||||||
|
Clock3,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from '@/components/ui/sheet'
|
||||||
|
import { formatNanoDelay } from '@/lib/format'
|
||||||
|
|
||||||
|
export interface SheetNodeInfo {
|
||||||
|
id: string
|
||||||
|
address: string
|
||||||
|
compressedAddress?: string
|
||||||
|
isSelf: boolean
|
||||||
|
deviceName?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SheetNeighborInfo {
|
||||||
|
address: string
|
||||||
|
deviceName?: string
|
||||||
|
delay: number
|
||||||
|
cost: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NodeDetailSheetProps {
|
||||||
|
open: boolean
|
||||||
|
onOpenChange: (open: boolean) => void
|
||||||
|
node: SheetNodeInfo | null
|
||||||
|
neighbors: SheetNeighborInfo[]
|
||||||
|
copiedId: string | null
|
||||||
|
onCopy: (text: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NodeDetailSheet({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
node,
|
||||||
|
neighbors,
|
||||||
|
copiedId,
|
||||||
|
onCopy,
|
||||||
|
}: NodeDetailSheetProps) {
|
||||||
|
if (!node) return null
|
||||||
|
|
||||||
|
const isCopied = copiedId === node.address
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||||
|
<SheetContent side="right" className="w-full gap-0 sm:max-w-sm">
|
||||||
|
<SheetHeader className="border-b">
|
||||||
|
<div className="flex items-center gap-2.5 pt-4">
|
||||||
|
<div
|
||||||
|
className={`flex size-9 shrink-0 items-center justify-center rounded-lg ${
|
||||||
|
node.isSelf
|
||||||
|
? 'bg-primary text-primary-foreground'
|
||||||
|
: 'bg-muted text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Server className="size-5" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<SheetTitle className="flex items-center gap-2 truncate">
|
||||||
|
{node.deviceName || '未命名节点'}
|
||||||
|
{node.isSelf && (
|
||||||
|
<Badge variant="default" className="px-1.5 py-0 text-[10px]">
|
||||||
|
本机
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</SheetTitle>
|
||||||
|
<SheetDescription className="truncate font-mono text-xs">
|
||||||
|
{node.compressedAddress || node.address}
|
||||||
|
</SheetDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SheetHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
|
||||||
|
{/* Full Address */}
|
||||||
|
<div className="flex flex-col gap-1.5 rounded-lg border bg-muted/30 p-3">
|
||||||
|
<span className="text-xs font-medium text-muted-foreground">
|
||||||
|
完整 SRv6 地址 (SID)
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<code className="break-all font-mono text-xs font-semibold text-foreground select-all">
|
||||||
|
{node.address}
|
||||||
|
</code>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-xs"
|
||||||
|
className="shrink-0"
|
||||||
|
onClick={() => onCopy(node.address)}
|
||||||
|
title="复制完整地址"
|
||||||
|
>
|
||||||
|
{isCopied ? (
|
||||||
|
<Check className="size-3.5 text-emerald-500" />
|
||||||
|
) : (
|
||||||
|
<Copy className="size-3.5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="flex flex-col gap-0.5 rounded-lg border bg-card p-2.5">
|
||||||
|
<div className="flex items-center gap-1 text-[11px] text-muted-foreground">
|
||||||
|
<Network className="size-3" />
|
||||||
|
邻居数量
|
||||||
|
</div>
|
||||||
|
<span className="font-mono text-lg font-bold">{neighbors.length}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-0.5 rounded-lg border bg-card p-2.5">
|
||||||
|
<div className="flex items-center gap-1 text-[11px] text-muted-foreground">
|
||||||
|
<Gauge className="size-3" />
|
||||||
|
平均时延
|
||||||
|
</div>
|
||||||
|
<span className="font-mono text-lg font-bold">
|
||||||
|
{neighbors.length > 0
|
||||||
|
? formatNanoDelay(
|
||||||
|
neighbors.reduce((acc, n) => acc + n.delay, 0) / neighbors.length
|
||||||
|
)
|
||||||
|
: '--'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Neighbor list */}
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-xs font-semibold text-muted-foreground">邻居链路</span>
|
||||||
|
{neighbors.length === 0 ? (
|
||||||
|
<div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
|
||||||
|
暂无可达邻居节点
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
neighbors.map((nb) => (
|
||||||
|
<div
|
||||||
|
key={nb.address}
|
||||||
|
className="flex items-center justify-between gap-2 rounded-lg border bg-card px-2.5 py-2"
|
||||||
|
>
|
||||||
|
<div className="flex min-w-0 flex-col leading-tight">
|
||||||
|
<span className="truncate text-xs font-medium text-foreground">
|
||||||
|
{nb.deviceName || '未命名节点'}
|
||||||
|
</span>
|
||||||
|
<span className="truncate font-mono text-[10px] text-muted-foreground">
|
||||||
|
{nb.address}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-semibold">
|
||||||
|
<Clock3 className="size-3" />
|
||||||
|
{formatNanoDelay(nb.delay)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reserved for Kperf speed test */}
|
||||||
|
<Button variant="outline" size="sm" disabled title="测速功能即将接入">
|
||||||
|
<Gauge data-icon="inline-start" />
|
||||||
|
发起 Kperf 测速（即将支持）
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
import { useCallback, useMemo } from 'react'
|
||||||
|
import {
|
||||||
|
ReactFlow,
|
||||||
|
Background,
|
||||||
|
BackgroundVariant,
|
||||||
|
Controls,
|
||||||
|
MiniMap,
|
||||||
|
type Node,
|
||||||
|
type Edge,
|
||||||
|
type NodeMouseHandler,
|
||||||
|
type OnNodesChange,
|
||||||
|
} from '@xyflow/react'
|
||||||
|
import '@xyflow/react/dist/style.css'
|
||||||
|
import { DeviceNode, type DeviceNodeData } from './device-node'
|
||||||
|
import { LinkEdge, type LinkEdgeData } from './link-edge'
|
||||||
|
import type { LayoutEdge, LayoutNode } from '@/hooks/use-topology'
|
||||||
|
|
||||||
|
const nodeTypes = { device: DeviceNode }
|
||||||
|
const edgeTypes = { link: LinkEdge }
|
||||||
|
|
||||||
|
interface TopologyCanvasProps {
|
||||||
|
nodes: LayoutNode[]
|
||||||
|
edges: LayoutEdge[]
|
||||||
|
searchQuery: string
|
||||||
|
copiedId: string | null
|
||||||
|
onCopy: (text: string) => void
|
||||||
|
/** 用户拖拽结束后的位置回写（id -> 坐标），用于轮询刷新时保持位置 */
|
||||||
|
onNodeDragEnd?: (id: string, x: number, y: number) => void
|
||||||
|
onNodeSelect: (nodeId: string | null) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
function matchesSearch(node: LayoutNode, query: string): boolean {
|
||||||
|
if (!query.trim()) return true
|
||||||
|
const q = query.toLowerCase()
|
||||||
|
return (
|
||||||
|
(node.deviceName ?? '').toLowerCase().includes(q) ||
|
||||||
|
node.address.toLowerCase().includes(q) ||
|
||||||
|
(node.compressedAddress ?? '').toLowerCase().includes(q)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TopologyCanvas({
|
||||||
|
nodes: layoutNodes,
|
||||||
|
edges: layoutEdges,
|
||||||
|
searchQuery,
|
||||||
|
copiedId,
|
||||||
|
onCopy,
|
||||||
|
onNodeDragEnd,
|
||||||
|
onNodeSelect,
|
||||||
|
}: TopologyCanvasProps) {
|
||||||
|
// 完全受控渲染：由外部数据纯派生，无内部镜像状态
|
||||||
|
const flowNodes = useMemo<Node<DeviceNodeData>[]>(
|
||||||
|
() =>
|
||||||
|
layoutNodes.map((n) => ({
|
||||||
|
id: n.id,
|
||||||
|
type: 'device' as const,
|
||||||
|
position: { x: n.x, y: n.y },
|
||||||
|
data: {
|
||||||
|
address: n.address,
|
||||||
|
compressedAddress: n.compressedAddress,
|
||||||
|
isSelf: n.isSelf,
|
||||||
|
deviceName: n.deviceName,
|
||||||
|
copiedId,
|
||||||
|
onCopy,
|
||||||
|
},
|
||||||
|
style: matchesSearch(n, searchQuery) ? undefined : { opacity: 0.25 },
|
||||||
|
})),
|
||||||
|
[layoutNodes, searchQuery, copiedId, onCopy]
|
||||||
|
)
|
||||||
|
|
||||||
|
const flowEdges = useMemo<Edge<LinkEdgeData>[]>(
|
||||||
|
() =>
|
||||||
|
layoutEdges.map((e) => ({
|
||||||
|
id: e.id,
|
||||||
|
source: e.source,
|
||||||
|
target: e.target,
|
||||||
|
type: 'link' as const,
|
||||||
|
data: { delay: e.delay, cost: e.cost },
|
||||||
|
})),
|
||||||
|
[layoutEdges]
|
||||||
|
)
|
||||||
|
|
||||||
|
// 拖拽过程中仅更新受控坐标（position 变更）；其余变更类型忽略
|
||||||
|
const onNodesChange: OnNodesChange<Node<DeviceNodeData>> = useCallback(
|
||||||
|
(changes) => {
|
||||||
|
if (!onNodeDragEnd) return
|
||||||
|
for (const change of changes) {
|
||||||
|
if (
|
||||||
|
change.type === 'position' &&
|
||||||
|
change.position &&
|
||||||
|
!change.dragging
|
||||||
|
) {
|
||||||
|
onNodeDragEnd(change.id, change.position.x, change.position.y)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onNodeDragEnd]
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleNodeClick: NodeMouseHandler<Node<DeviceNodeData>> = useCallback(
|
||||||
|
(_, node) => {
|
||||||
|
onNodeSelect(node.id)
|
||||||
|
},
|
||||||
|
[onNodeSelect]
|
||||||
|
)
|
||||||
|
|
||||||
|
const handlePaneClick = useCallback(() => {
|
||||||
|
onNodeSelect(null)
|
||||||
|
}, [onNodeSelect])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ReactFlow
|
||||||
|
nodes={flowNodes}
|
||||||
|
edges={flowEdges}
|
||||||
|
onNodesChange={onNodesChange}
|
||||||
|
nodeTypes={nodeTypes}
|
||||||
|
edgeTypes={edgeTypes}
|
||||||
|
onNodeClick={handleNodeClick}
|
||||||
|
onPaneClick={handlePaneClick}
|
||||||
|
fitView
|
||||||
|
fitViewOptions={{ padding: 0.2, maxZoom: 1.25 }}
|
||||||
|
minZoom={0.15}
|
||||||
|
maxZoom={2.5}
|
||||||
|
proOptions={{ hideAttribution: true }}
|
||||||
|
nodesConnectable={false}
|
||||||
|
deleteKeyCode={null}
|
||||||
|
colorMode="system"
|
||||||
|
>
|
||||||
|
<Background variant={BackgroundVariant.Dots} gap={22} size={1.4} />
|
||||||
|
<Controls showInteractive={false} position="bottom-left" />
|
||||||
|
<MiniMap pannable zoomable className="!hidden sm:!block" />
|
||||||
|
</ReactFlow>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -49,13 +49,13 @@ export function useKlalbConfig(): UseKlalbConfigResult {
|
|||||||
body: JSON.stringify(newConfig),
|
body: JSON.stringify(newConfig),
|
||||||
})
|
})
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (res.ok && (data.success || data.success === undefined)) {
|
if (res.ok && data.success === true) {
|
||||||
setConfig(newConfig)
|
setConfig(newConfig)
|
||||||
setSaveSuccess(true)
|
setSaveSuccess(true)
|
||||||
setTimeout(() => setSaveSuccess(false), 3000)
|
setTimeout(() => setSaveSuccess(false), 3000)
|
||||||
return { success: true }
|
return { success: true }
|
||||||
}
|
}
|
||||||
const errMsg = data.error || data.message || '保存配置失败'
|
const errMsg = data.error || '保存配置失败'
|
||||||
setError(errMsg)
|
setError(errMsg)
|
||||||
return { success: false, message: errMsg }
|
return { success: false, message: errMsg }
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
|
|||||||
@@ -0,0 +1,214 @@
|
|||||||
|
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||||
|
import {
|
||||||
|
forceSimulation,
|
||||||
|
forceLink,
|
||||||
|
forceManyBody,
|
||||||
|
forceCenter,
|
||||||
|
type SimulationNodeDatum,
|
||||||
|
} from 'd3-force'
|
||||||
|
import type { TopologyNode, TopologyEdge, TopologyData } from '@/types/api'
|
||||||
|
|
||||||
|
export interface LayoutNode extends SimulationNodeDatum {
|
||||||
|
id: string
|
||||||
|
address: string
|
||||||
|
compressedAddress?: string
|
||||||
|
isSelf: boolean
|
||||||
|
deviceName?: string
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LayoutEdge {
|
||||||
|
id: string
|
||||||
|
source: string
|
||||||
|
target: string
|
||||||
|
delay: number
|
||||||
|
cost: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseTopologyResult {
|
||||||
|
nodes: LayoutNode[]
|
||||||
|
edges: LayoutEdge[]
|
||||||
|
isLoading: boolean
|
||||||
|
error: string | null
|
||||||
|
relayout: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const POLL_INTERVAL_MS = 1000
|
||||||
|
|
||||||
|
function structureSignature(nodes: TopologyNode[], edges: TopologyEdge[]): string {
|
||||||
|
const n = nodes.map((x) => x.id).sort().join(',')
|
||||||
|
const e = edges.map((x) => `${x.source}->${x.target}`).sort().join(',')
|
||||||
|
return `${n}|${e}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeForceLayout(
|
||||||
|
topoNodes: TopologyNode[],
|
||||||
|
topoEdges: TopologyEdge[]
|
||||||
|
): Map<string, { x: number; y: number }> {
|
||||||
|
const positions = new Map<string, { x: number; y: number }>()
|
||||||
|
if (topoNodes.length === 0) return positions
|
||||||
|
|
||||||
|
const simNodes: LayoutNode[] = topoNodes.map((n, i) => ({
|
||||||
|
...n,
|
||||||
|
// 初始位置：环形分布避免重叠
|
||||||
|
x: Math.cos((2 * Math.PI * i) / Math.max(topoNodes.length, 1)) * 250,
|
||||||
|
y: Math.sin((2 * Math.PI * i) / Math.max(topoNodes.length, 1)) * 250,
|
||||||
|
}))
|
||||||
|
const nodeIndex = new Map(simNodes.map((n, i) => [n.id, i]))
|
||||||
|
|
||||||
|
const simLinks = topoEdges
|
||||||
|
.filter((e) => nodeIndex.has(e.source) && nodeIndex.has(e.target))
|
||||||
|
.map((e) => {
|
||||||
|
const cost = e.cost > 0 ? e.cost : e.delay
|
||||||
|
// 延迟越高距离越远；基准距离 120px，按 ns 缩放
|
||||||
|
const distance = Math.max(80, Math.min(400, 120 + Math.log10(Math.max(cost, 1)) * 20))
|
||||||
|
return { source: nodeIndex.get(e.source)!, target: nodeIndex.get(e.target)!, distance }
|
||||||
|
})
|
||||||
|
|
||||||
|
const simulation = forceSimulation(simNodes)
|
||||||
|
.force('charge', forceManyBody().strength(-600))
|
||||||
|
.force(
|
||||||
|
'link',
|
||||||
|
forceLink(simLinks).id((d: SimulationNodeDatum) => (d as LayoutNode).id).distance((l: { distance: number }) => l.distance).strength(0.6)
|
||||||
|
)
|
||||||
|
.force('center', forceCenter(0, 0))
|
||||||
|
.stop()
|
||||||
|
|
||||||
|
// 同步运行固定迭代数，提取最终坐标
|
||||||
|
const ticks = 300
|
||||||
|
for (let i = 0; i < ticks; i++) simulation.tick()
|
||||||
|
|
||||||
|
for (const n of simNodes) {
|
||||||
|
positions.set(n.id, { x: n.x ?? 0, y: n.y ?? 0 })
|
||||||
|
}
|
||||||
|
return positions
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeEdgeId(source: string, target: string): string {
|
||||||
|
return source < target ? `${source}__${target}` : `${target}__${source}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTopology(): UseTopologyResult {
|
||||||
|
const [nodes, setNodes] = useState<LayoutNode[]>([])
|
||||||
|
const [edges, setEdges] = useState<LayoutEdge[]>([])
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const lastSignatureRef = useRef<string>('')
|
||||||
|
const savedPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map())
|
||||||
|
const layoutPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map())
|
||||||
|
const relayoutRequestedRef = useRef(false)
|
||||||
|
const mountedRef = useRef(true)
|
||||||
|
|
||||||
|
const fetchTopology = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/nodes')
|
||||||
|
if (!res.ok) {
|
||||||
|
setError(`拓扑接口异常 (${res.status})`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const payload = (await res.json()) as Partial<TopologyData>
|
||||||
|
if (!mountedRef.current) return
|
||||||
|
|
||||||
|
const topoNodes: TopologyNode[] = Array.isArray(payload.nodes)
|
||||||
|
? payload.nodes.filter(
|
||||||
|
(n) => n && typeof n.id === 'string' && n.id !== ''
|
||||||
|
)
|
||||||
|
: []
|
||||||
|
const topoEdgesRaw: TopologyEdge[] = Array.isArray(payload.edges)
|
||||||
|
? payload.edges
|
||||||
|
: []
|
||||||
|
|
||||||
|
// 边去重（后端已做一次，这里再保险）并生成稳定 id
|
||||||
|
const edgeMap = new Map<string, TopologyEdge>()
|
||||||
|
for (const e of topoEdgesRaw) {
|
||||||
|
if (!e.source || !e.target || e.source === e.target) continue
|
||||||
|
const id = makeEdgeId(e.source, e.target)
|
||||||
|
edgeMap.set(id, { ...e })
|
||||||
|
}
|
||||||
|
const topoEdges = Array.from(edgeMap.values())
|
||||||
|
|
||||||
|
const signature = structureSignature(topoNodes, topoEdges)
|
||||||
|
const structureChanged =
|
||||||
|
signature !== lastSignatureRef.current ||
|
||||||
|
relayoutRequestedRef.current
|
||||||
|
|
||||||
|
if (structureChanged) {
|
||||||
|
let positions: Map<string, { x: number; y: number }>
|
||||||
|
if (
|
||||||
|
!relayoutRequestedRef.current &&
|
||||||
|
layoutPositionsRef.current.size > 0 &&
|
||||||
|
lastSignatureRef.current === ''
|
||||||
|
) {
|
||||||
|
positions = layoutPositionsRef.current
|
||||||
|
} else {
|
||||||
|
positions = computeForceLayout(topoNodes, topoEdges)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 合并用户拖拽过的位置
|
||||||
|
for (const [id, pos] of savedPositionsRef.current) {
|
||||||
|
if (positions.has(id)) positions.set(id, pos)
|
||||||
|
}
|
||||||
|
|
||||||
|
layoutPositionsRef.current = positions
|
||||||
|
lastSignatureRef.current = signature
|
||||||
|
relayoutRequestedRef.current = false
|
||||||
|
|
||||||
|
setNodes(
|
||||||
|
topoNodes.map((n) => ({
|
||||||
|
...n,
|
||||||
|
...(positions.get(n.id) ?? { x: 0, y: 0 }),
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// 结构未变：仅原地刷新延迟等元数据，位置保持不变
|
||||||
|
setNodes((prev) =>
|
||||||
|
prev.length === topoNodes.length
|
||||||
|
? prev.map((n) => {
|
||||||
|
const fresh = topoNodes.find((t) => t.id === n.id)
|
||||||
|
return fresh ? { ...n, deviceName: fresh.deviceName } : n
|
||||||
|
})
|
||||||
|
: prev
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
setEdges(
|
||||||
|
topoEdges.map((e) => ({
|
||||||
|
id: makeEdgeId(e.source, e.target),
|
||||||
|
source: e.source,
|
||||||
|
target: e.target,
|
||||||
|
delay: e.delay,
|
||||||
|
cost: e.cost,
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
setError(null)
|
||||||
|
} catch (err: unknown) {
|
||||||
|
if (mountedRef.current) {
|
||||||
|
const msg = err instanceof Error ? err.message : String(err)
|
||||||
|
setError(msg)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (mountedRef.current) setIsLoading(false)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const relayout = useCallback(() => {
|
||||||
|
relayoutRequestedRef.current = true
|
||||||
|
savedPositionsRef.current.clear()
|
||||||
|
fetchTopology()
|
||||||
|
}, [fetchTopology])
|
||||||
|
|
||||||
|
// 轮询
|
||||||
|
useEffect(() => {
|
||||||
|
mountedRef.current = true
|
||||||
|
fetchTopology()
|
||||||
|
const timer = window.setInterval(fetchTopology, POLL_INTERVAL_MS)
|
||||||
|
return () => {
|
||||||
|
mountedRef.current = false
|
||||||
|
window.clearInterval(timer)
|
||||||
|
}
|
||||||
|
}, [fetchTopology])
|
||||||
|
|
||||||
|
return { nodes, edges, isLoading, error, relayout }
|
||||||
|
}
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
import { useState, useMemo, useCallback } from 'react'
|
||||||
|
import { ReactFlowProvider } from '@xyflow/react'
|
||||||
|
import {
|
||||||
|
Share2,
|
||||||
|
Search,
|
||||||
|
RefreshCw,
|
||||||
|
Network,
|
||||||
|
Link2,
|
||||||
|
AlertCircle,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { Card, CardContent } from '@/components/ui/card'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { useTopology } from '@/hooks/use-topology'
|
||||||
|
import { TopologyCanvas } from '@/components/topology/topology-canvas'
|
||||||
|
import { NodeDetailSheet } from '@/components/topology/node-detail-sheet'
|
||||||
|
|
||||||
|
export function TopologyPage() {
|
||||||
|
const { nodes, edges, isLoading, error, relayout } = useTopology()
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
|
||||||
|
const [copiedId, setCopiedId] = useState<string | null>(null)
|
||||||
|
const [sheetOpen, setSheetOpen] = useState(false)
|
||||||
|
|
||||||
|
const handleCopy = useCallback((text: string) => {
|
||||||
|
navigator.clipboard.writeText(text)
|
||||||
|
setCopiedId(text)
|
||||||
|
setTimeout(() => setCopiedId(null), 2000)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleNodeSelect = useCallback((nodeId: string | null) => {
|
||||||
|
setSelectedNodeId(nodeId)
|
||||||
|
if (nodeId) setSheetOpen(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleNodeDragEnd = useCallback(
|
||||||
|
(_id: string, _x: number, _y: number) => {
|
||||||
|
// 受控模式下坐标由 ReactFlow 内部维护至下次结构刷新；
|
||||||
|
// 结构刷新后 d3-force 会重新计算，拖拽位置保留策略由后续迭代增强。
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
|
||||||
|
// 选中的节点详情
|
||||||
|
const selectedNode = useMemo(
|
||||||
|
() => nodes.find((n) => n.id === selectedNodeId) ?? null,
|
||||||
|
[nodes, selectedNodeId]
|
||||||
|
)
|
||||||
|
|
||||||
|
// 邻居信息（基于边集合推导）
|
||||||
|
const neighbors = useMemo(() => {
|
||||||
|
if (!selectedNode) return []
|
||||||
|
return edges
|
||||||
|
.filter((e) => e.source === selectedNode.id || e.target === selectedNode.id)
|
||||||
|
.map((e) => {
|
||||||
|
const otherId = e.source === selectedNode.id ? e.target : e.source
|
||||||
|
const other = nodes.find((n) => n.id === otherId)
|
||||||
|
return {
|
||||||
|
address: other?.address ?? otherId,
|
||||||
|
deviceName: other?.deviceName,
|
||||||
|
delay: e.delay,
|
||||||
|
cost: e.cost,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [edges, nodes, selectedNode])
|
||||||
|
|
||||||
|
const sheetNode = useMemo(
|
||||||
|
() =>
|
||||||
|
selectedNode
|
||||||
|
? {
|
||||||
|
id: selectedNode.id,
|
||||||
|
address: selectedNode.address,
|
||||||
|
compressedAddress: selectedNode.compressedAddress,
|
||||||
|
isSelf: selectedNode.isSelf,
|
||||||
|
deviceName: selectedNode.deviceName,
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
[selectedNode]
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-1 flex-col gap-4 p-6">
|
||||||
|
{/* Toolbar */}
|
||||||
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
|
||||||
|
<Share2 className="size-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold tracking-tight">网络拓扑</h1>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
SRv6 全网节点与链路的实时可视化视图
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ml-2 hidden items-center gap-2 sm:flex">
|
||||||
|
<Badge variant="secondary" className="gap-1 px-2 py-0.5 font-mono text-xs">
|
||||||
|
<Network className="size-3" />
|
||||||
|
{nodes.length} 节点
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="secondary" className="gap-1 px-2 py-0.5 font-mono text-xs">
|
||||||
|
<Link2 className="size-3" />
|
||||||
|
{edges.length} 链路
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="relative w-full max-w-xs">
|
||||||
|
<Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="搜索设备名或 IPv6 地址..."
|
||||||
|
className="pl-8"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={relayout}
|
||||||
|
disabled={isLoading}
|
||||||
|
title="重新运行力导向自动布局"
|
||||||
|
>
|
||||||
|
<RefreshCw data-icon="inline-start" className={isLoading ? 'animate-spin' : ''} />
|
||||||
|
重新布局
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error banner */}
|
||||||
|
{error && !nodes.length && (
|
||||||
|
<Card className="border-destructive/40 bg-destructive/5 shadow-2xs">
|
||||||
|
<CardContent className="flex items-center gap-2 p-3 text-sm text-destructive">
|
||||||
|
<AlertCircle className="size-4 shrink-0" />
|
||||||
|
无法获取拓扑数据：{error}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Canvas */}
|
||||||
|
<Card className="min-h-96 flex-1 overflow-hidden shadow-2xs">
|
||||||
|
<div className="h-full min-h-[520px] w-full">
|
||||||
|
<ReactFlowProvider>
|
||||||
|
<TopologyCanvas
|
||||||
|
nodes={nodes}
|
||||||
|
edges={edges}
|
||||||
|
searchQuery={searchQuery}
|
||||||
|
copiedId={copiedId}
|
||||||
|
onCopy={handleCopy}
|
||||||
|
onNodeDragEnd={handleNodeDragEnd}
|
||||||
|
onNodeSelect={handleNodeSelect}
|
||||||
|
/>
|
||||||
|
</ReactFlowProvider>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Detail Sheet */}
|
||||||
|
<NodeDetailSheet
|
||||||
|
open={sheetOpen}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
setSheetOpen(open)
|
||||||
|
if (!open) setSelectedNodeId(null)
|
||||||
|
}}
|
||||||
|
node={sheetNode}
|
||||||
|
neighbors={neighbors}
|
||||||
|
copiedId={copiedId}
|
||||||
|
onCopy={handleCopy}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user