💚 fix ci: add ACTIONS_RESULTS_URL for actions/upload-artifact@v4

👷 ci: add build workflow
fix(routing-table): preserve SRv6 protocol types and colors
2026-09-03 15:54:46 +08:00 · 2026-09-01 15:02:38 +08:00 · 2026-08-31 14:40:33 +08:00 · 2026-08-27 23:19:39 +08:00 · 2026-08-26 21:27:44 +08:00 · 2026-08-26 19:42:20 +08:00
18 changed files with 1740 additions and 222 deletions
@@ -0,0 +1,39 @@
+name: Build Dashboard
+
+on:
+  push:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out source
+        uses: actions/checkout@v4
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 11
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build dashboard
+        run: pnpm build
+
+      - name: Upload dashboard artifact
+        uses: actions/upload-artifact@v4
+        env:
+          ACTIONS_RESULTS_URL: https://git.code.cq.cn/
+        with:
+          name: dashboard-dist
+          path: dist/
+          if-no-files-found: error
+          retention-days: 14
@@ -15,8 +15,10 @@
    "@base-ui/react": "^1.7.0",
    "@fontsource-variable/inter": "^5.3.0",
    "@tailwindcss/vite": "^4",
+    "@xyflow/react": "^12.11.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "d3-force": "^3.0.0",
    "lucide-react": "^1.33.0",
    "react": "^19.2.6",
    "react-dom": "^19.2.6",
@@ -27,6 +29,7 @@
  },
  "devDependencies": {
    "@eslint/js": "^10",
+    "@types/d3-force": "^3.0.10",
    "@types/node": "^24",
    "@types/react": "^19",
    "@types/react-dom": "^19",
@@ -17,12 +17,18 @@ importers:
      '@tailwindcss/vite':
        specifier: ^4
        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:
        specifier: ^0.7.1
        version: 0.7.1
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
+      d3-force:
+        specifier: ^3.0.0
+        version: 3.0.0
      lucide-react:
        specifier: ^1.33.0
        version: 1.33.0(react@19.2.8)
@@ -48,6 +54,9 @@ importers:
      '@eslint/js':
        specifier: ^10
        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':
        specifier: ^24
        version: 24.13.3
@@ -347,10 +356,6 @@ packages:
  '@jridgewell/gen-mapping@0.3.12':
    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':
    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}

@@ -358,19 +363,6 @@ packages:
    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
    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':
    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}

@@ -609,6 +601,27 @@ packages:
  '@ts-morph/common@0.27.0':
    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':
    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}

@@ -707,6 +720,22 @@ packages:
      oxc-transform-react:
        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:
    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
    engines: {node: '>= 0.6'}
@@ -836,6 +865,9 @@ packages:
  class-variance-authority@0.7.1:
    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:
    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
    engines: {node: '>=18'}
@@ -918,6 +950,52 @@ packages:
  csstype@3.2.3:
    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:
    resolution: {integrity: sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==}
    engines: {node: '>=10'}
@@ -2405,6 +2483,21 @@ packages:
  zod@4.4.3:
    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:

  '@babel/code-frame@7.29.7':
@@ -2723,36 +2816,22 @@ snapshots:

  '@jridgewell/gen-mapping@0.3.12':
    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@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/sourcemap-codec': 1.5.5
      '@jridgewell/trace-mapping': 0.3.31

  '@jridgewell/remapping@2.3.5':
    dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/gen-mapping': 0.3.12
      '@jridgewell/trace-mapping': 0.3.31

  '@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/trace-mapping@0.3.31':
    dependencies:
      '@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)':
    dependencies:
@@ -2918,6 +2997,29 @@ snapshots:
      minimatch: 10.2.6
      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/estree@1.0.9': {}
@@ -3034,6 +3136,31 @@ snapshots:
      '@rolldown/pluginutils': 1.0.1
      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:
    dependencies:
      mime-types: 3.0.2
@@ -3153,6 +3280,8 @@ snapshots:
    dependencies:
      clsx: 2.1.1

+  classcat@5.0.5: {}
+
  cli-cursor@5.0.0:
    dependencies:
      restore-cursor: 5.1.0
@@ -3222,6 +3351,50 @@ snapshots:

  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:
    dependencies:
      mimic-fn: 3.1.0
@@ -4541,3 +4714,10 @@ snapshots:
  zod@3.24.1: {}

  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
@@ -7,6 +7,8 @@ import { AppHeader } from '@/components/layout/app-header'
 import { OverviewPage } from '@/pages/overview'
 import { ConnectionsPage } from '@/pages/connections'
 import { SettingsPage } from '@/pages/settings'
+import { TopologyPage } from '@/pages/topology'
+import { RoutingTablePage } from '@/pages/routing-table'
 import { useKlalbSSE } from '@/hooks/use-klalb-sse'
 import { useHashRoute } from '@/hooks/use-hash-route'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -38,7 +40,6 @@ export function App() {
        <AppSidebar
          currentTab={currentTab}
          onSelectTab={navigate}
-          onlineDevices={status?.onlineDevices}
          linksCount={safeLinks.length}
          establishedLinksCount={establishedLinksCount}
          isConnected={isConnected}
@@ -72,9 +73,15 @@ export function App() {

            {currentTab === 'settings' && <SettingsPage />}

+            {currentTab === 'topology' && <TopologyPage />}
+
+            {currentTab === 'routing-table' && <RoutingTablePage />}
+
            {currentTab !== 'overview' &&
              currentTab !== 'connections' &&
-              currentTab !== 'settings' && (
+              currentTab !== 'settings' &&
+              currentTab !== 'topology' &&
+              currentTab !== 'routing-table' && (
                <div className="flex flex-1 items-center justify-center p-8">
                  <Card className="max-w-md text-center">
                    <CardHeader>
@@ -3,7 +3,6 @@ import {
  Network,
  GitFork,
  Share2,
-  Cpu,
  Settings,
  Activity,
  Layers,
@@ -24,12 +23,11 @@ import {
 } from '@/components/ui/sidebar'
 import { Badge } from '@/components/ui/badge'

-export type NavTab = 'overview' | 'connections' | 'routes' | 'topology' | 'interfaces' | 'settings'
+export type NavTab = 'overview' | 'connections' | 'routing-table' | 'topology' | 'settings'

 interface AppSidebarProps {
  currentTab: NavTab
  onSelectTab: (tab: NavTab) => void
-  onlineDevices?: number
  linksCount?: number
  establishedLinksCount?: number
  isConnected?: boolean
@@ -38,7 +36,6 @@ interface AppSidebarProps {
 export function AppSidebar({
  currentTab,
  onSelectTab,
-  onlineDevices = 0,
  linksCount = 0,
  establishedLinksCount = 0,
  isConnected = false,
@@ -48,7 +45,6 @@ export function AppSidebar({
      id: 'overview' as NavTab,
      title: '总览',
      icon: LayoutDashboard,
-      badge: isConnected ? 'Live' : undefined,
    },
    {
      id: 'connections' as NavTab,
@@ -57,7 +53,7 @@ export function AppSidebar({
      badge: linksCount > 0 ? `${establishedLinksCount}/${linksCount}` : undefined,
    },
    {
-      id: 'routes' as NavTab,
+      id: 'routing-table' as NavTab,
      title: 'SRv6 路由表',
      icon: GitFork,
    },
@@ -65,12 +61,6 @@ export function AppSidebar({
      id: 'topology' as NavTab,
      title: '网络拓扑',
      icon: Share2,
-      badge: onlineDevices > 0 ? `${onlineDevices}` : undefined,
-    },
-    {
-      id: 'interfaces' as NavTab,
-      title: '网卡接口',
-      icon: Cpu,
    },
    {
      id: 'settings' as NavTab,
@@ -161,4 +151,3 @@ export function AppSidebar({
    </Sidebar>
  )
 }
-
@@ -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 w-fit min-w-56 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-60 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="whitespace-nowrap">{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,204 @@
+import {
+  Server,
+  Copy,
+  Check,
+  Gauge,
+  Network,
+  Clock3,
+  FileText,
+} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { Skeleton } from '@/components/ui/skeleton'
+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
+  /** 设备描述（来自 /api/node-info 查询） */
+  description?: string | null
+  descriptionLoading?: boolean
+}
+
+export function NodeDetailSheet({
+  open,
+  onOpenChange,
+  node,
+  neighbors,
+  copiedId,
+  onCopy,
+  description,
+  descriptionLoading,
+}: 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">
+          {/* Device Description */}
+          <div className="flex flex-col gap-1.5 rounded-lg border bg-muted/30 p-3">
+            <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+              <FileText className="size-3.5" />
+              设备描述
+            </span>
+            {descriptionLoading ? (
+              <div className="flex flex-col gap-1.5">
+                <Skeleton className="h-3.5 w-full" />
+                <Skeleton className="h-3.5 w-2/3" />
+              </div>
+            ) : (
+              <span className="whitespace-pre-wrap break-words text-xs leading-relaxed text-foreground">
+                {description ? description : '无描述信息'}
+              </span>
+            )}
+          </div>
+
+          {/* 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>
+  )
+}
@@ -4,9 +4,8 @@ import type { NavTab } from '@/components/layout/app-sidebar'
 const VALID_TABS: NavTab[] = [
  'overview',
  'connections',
-  'routes',
+  'routing-table',
  'topology',
-  'interfaces',
  'settings',
 ]

@@ -49,13 +49,13 @@ export function useKlalbConfig(): UseKlalbConfigResult {
          body: JSON.stringify(newConfig),
        })
        const data = await res.json()
-        if (res.ok && (data.success || data.success === undefined)) {
+        if (res.ok && data.success === true) {
          setConfig(newConfig)
          setSaveSuccess(true)
          setTimeout(() => setSaveSuccess(false), 3000)
          return { success: true }
        }
-        const errMsg = data.error || data.message || '保存配置失败'
+        const errMsg = data.error || '保存配置失败'
        setError(errMsg)
        return { success: false, message: errMsg }
      } catch (err: unknown) {
@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { RoutingTableItem } from '@/types/api'
+
+const POLL_INTERVAL_MS = 1000
+
+interface UseRoutingTableResult {
+  routingTable: RoutingTableItem[]
+  isLoading: boolean
+  error: string | null
+  refresh: () => void
+}
+
+export function useRoutingTable(): UseRoutingTableResult {
+  const [routingTable, setRoutingTable] = useState<RoutingTableItem[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const mountedRef = useRef(true)
+
+  const fetchRoutingTable = useCallback(async () => {
+    try {
+      const response = await fetch('/api/routing-table')
+      if (!response.ok) throw new Error(`路由接口异常 (${response.status})`)
+      const payload: unknown = await response.json()
+      if (!Array.isArray(payload)) throw new Error('路由接口返回格式异常')
+      if (!mountedRef.current) return
+      setRoutingTable(payload as RoutingTableItem[])
+      setError(null)
+    } catch (err: unknown) {
+      if (mountedRef.current) setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      if (mountedRef.current) setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    mountedRef.current = true
+    void fetchRoutingTable()
+    const timer = window.setInterval(() => void fetchRoutingTable(), POLL_INTERVAL_MS)
+    return () => {
+      mountedRef.current = false
+      window.clearInterval(timer)
+    }
+  }, [fetchRoutingTable])
+
+  const refresh = useCallback(() => void fetchRoutingTable(), [fetchRoutingTable])
+  return { routingTable, isLoading, error, refresh }
+}
@@ -0,0 +1,217 @@
+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
+
+  // 节点卡片较宽（~300px），初始环形半径与斥力需足够大以避免重叠
+  const simNodes: LayoutNode[] = topoNodes.map((n, i) => ({
+    ...n,
+    x: Math.cos((2 * Math.PI * i) / Math.max(topoNodes.length, 1)) * 450,
+    y: Math.sin((2 * Math.PI * i) / Math.max(topoNodes.length, 1)) * 450,
+  }))
+  const nodeIds = new Set(simNodes.map((n) => n.id))
+
+  const simLinks = topoEdges
+    .filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target))
+    .map((e) => {
+      const cost = e.cost > 0 ? e.cost : e.delay
+      // 延迟越高距离越远；基准距离大于卡片宽度，保证相邻节点不挤压
+      const distance = Math.max(280, Math.min(650, 300 + Math.log10(Math.max(cost, 1)) * 35))
+      return { source: e.source, target: e.target, distance }
+    })
+
+  const simulation = forceSimulation(simNodes)
+    .force('charge', forceManyBody().strength(-2200))
+    .force(
+      'link',
+      forceLink(simLinks)
+        .id((d: SimulationNodeDatum) => (d as LayoutNode).id)
+        .distance((l: any) => l.distance ?? 300)
+        .strength(0.5)
+    )
+    .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 }
+}
@@ -52,9 +52,9 @@ export function OverviewPage({ status, links, isConnected }: OverviewPageProps)

  const metrics = status?.metrics

-  // Calculate link status counts
+  // Calculate link status counts (LinkStatus: DOWN=0, UNSTABLE=1, UP=2; state string like "●up"/"○down")
  const establishedLinks = links.filter(
-    (l) => l.state === 'ESTABLISHED' || l.stateCode === 1
+    (l) => l.stateCode === 2 || (l.state && l.state.toLowerCase().includes('up')) || l.state === 'ESTABLISHED'
  ).length
  const totalLinks = links.length

@@ -142,7 +142,8 @@ export function OverviewPage({ status, links, isConnected }: OverviewPageProps)
                </div>

                <div className="flex flex-col gap-0.5 rounded-xl border bg-background/60 px-3 py-1.5 shadow-2xs">
-                  <Zap className="size-3.5 text-muted-foreground" />
+                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Zap className="size-3.5" />
                    <span>活跃线路</span>
                  </div>
                  <span className="font-mono text-sm font-bold text-foreground">
@@ -151,6 +152,7 @@ export function OverviewPage({ status, links, isConnected }: OverviewPageProps)
                </div>
              </div>
            </div>
+          </div>
        </CardContent>
      </Card>

@@ -0,0 +1,282 @@
+import { useMemo, useState } from "react"
+import { Check, Copy, GitFork, RefreshCw, Search } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useRoutingTable } from "@/hooks/use-routing-table"
+import type { RoutingTableItem } from "@/types/api"
+
+type ProtocolFilter = "all" | string
+
+function protocolBadge(protocol: RoutingTableItem["protocol"]) {
+  if (protocol === "Direct")
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-blue-500/10 text-blue-600 dark:text-blue-400"
+      >
+        {protocol}
+      </Badge>
+    )
+  if (protocol === "SRv6 ENDXSID")
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-purple-500/10 text-purple-600 dark:text-purple-400"
+      >
+        {protocol}
+      </Badge>
+    )
+  if (protocol === "SRv6 ENDSID")
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+      >
+        {protocol}
+      </Badge>
+    )
+  return <Badge variant="outline">{protocol}</Badge>
+}
+
+export function RoutingTablePage() {
+  const { routingTable, isLoading, error, refresh } = useRoutingTable()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [protocolFilter, setProtocolFilter] = useState<ProtocolFilter>("all")
+  const [copiedHop, setCopiedHop] = useState<string | null>(null)
+
+  const counts = useMemo(
+    () => ({
+      total: routingTable.length,
+      direct: routingTable.filter((route) => route.protocol === "Direct").length,
+      endxsid: routingTable.filter((route) => route.protocol === "SRv6 ENDXSID").length,
+      endsid: routingTable.filter((route) => route.protocol === "SRv6 ENDSID").length,
+    }),
+    [routingTable]
+  )
+
+  const filteredRoutingTable = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+    return routingTable.filter((route) => {
+      const matchesSearch =
+        !query ||
+        [
+          route.destination,
+          route.nexthop,
+          route.interface,
+          route.protocol,
+        ].some((value) => String(value).toLowerCase().includes(query))
+      const matchesProtocol =
+        protocolFilter === "all" ||
+        route.protocol === protocolFilter
+      return matchesSearch && matchesProtocol
+    })
+  }, [routingTable, searchQuery, protocolFilter])
+
+  const copyNextHop = async (nextHop: string) => {
+    try {
+      await navigator.clipboard.writeText(nextHop)
+      setCopiedHop(nextHop)
+      window.setTimeout(
+        () => setCopiedHop((current) => (current === nextHop ? null : current)),
+        1500
+      )
+    } catch {
+      setCopiedHop(null)
+    }
+  }
+
+  const filterOptions: { value: ProtocolFilter; label: string }[] = [
+    { value: "all", label: "全部" },
+    ...Array.from(new Set(routingTable.map((route) => route.protocol))).map(
+      (protocol) => ({ value: protocol, label: protocol })
+    ),
+  ]
+
+  return (
+    <div className="flex flex-1 flex-col gap-5 p-6">
+      <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">
+            <GitFork className="size-5" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tight">SRv6 路由表</h1>
+            <p className="text-xs text-muted-foreground">
+              实时查看当前 IPv6 转发路径与下一跳。
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-2 sm:ml-13 lg:ml-0">
+          <Badge variant="outline">全部 {counts.total}</Badge>
+          <Badge
+            variant="secondary"
+            className="bg-blue-500/10 text-blue-600 dark:text-blue-400"
+          >
+            直连 {counts.direct}
+          </Badge>
+          <Badge
+            variant="secondary"
+            className="bg-purple-500/10 text-purple-600 dark:text-purple-400"
+          >
+            SRv6 ENDXSID {counts.endxsid}
+          </Badge>
+          <Badge
+            variant="secondary"
+            className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+          >
+            SRv6 ENDSID {counts.endsid}
+          </Badge>
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="relative w-full max-w-sm">
+          <Search className="absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+            placeholder="搜索目的地址、下一跳、接口或协议"
+            className="pl-8"
+          />
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="flex items-center rounded-lg border bg-background p-0.5 shadow-2xs">
+            {filterOptions.map((option) => (
+              <Button
+                key={option.value}
+                variant={
+                  protocolFilter === option.value ? "secondary" : "ghost"
+                }
+                size="sm"
+                onClick={() => setProtocolFilter(option.value)}
+              >
+                {option.label}
+              </Button>
+            ))}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={refresh}
+            disabled={isLoading}
+            title="刷新路由表"
+          >
+            <RefreshCw
+              data-icon="inline-start"
+              className={isLoading ? "animate-spin" : ""}
+            />
+            刷新
+          </Button>
+        </div>
+      </div>
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            路由数据更新失败：{error}，当前显示最近一次成功数据。
+          </AlertDescription>
+        </Alert>
+      )}
+      {isLoading && routingTable.length === 0 ? (
+        <div className="border-y py-12 text-center text-sm text-muted-foreground">
+          正在加载路由表...
+        </div>
+      ) : filteredRoutingTable.length === 0 ? (
+        <div className="border-y py-12 text-center">
+          <p className="text-sm font-medium">未找到匹配的路由</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            调整搜索条件或等待路由表更新。
+          </p>
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-lg border bg-card shadow-2xs">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>目的地址</TableHead>
+                <TableHead>协议</TableHead>
+                <TableHead className="text-right">优先级</TableHead>
+                <TableHead className="text-right">开销</TableHead>
+                <TableHead>标志</TableHead>
+                <TableHead>下一跳</TableHead>
+                <TableHead>出接口</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRoutingTable.map((route, index) => (
+                <TableRow
+                  key={`${route.destination}-${route.nexthop}-${route.interface}-${index}`}
+                >
+                  <TableCell className="font-mono text-xs font-medium">
+                    {route.destination}
+                  </TableCell>
+                  <TableCell>{protocolBadge(route.protocol)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">
+                    {route.preference}
+                  </TableCell>
+                  <TableCell className="text-right font-mono text-xs">
+                    {(route.cost / 1_000_000).toFixed(2)} ms
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="font-mono text-[10px]">
+                      {route.flag}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <span className="font-mono text-xs">
+                        {route.nexthop || "--"}
+                      </span>
+                      {route.nexthop && (
+                        <Tooltip>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                variant="ghost"
+                                size="icon-xs"
+                                title="复制下一跳"
+                                onClick={() => void copyNextHop(route.nexthop)}
+                              />
+                            }
+                          >
+                            <>
+                              {copiedHop === route.nexthop ? (
+                                <Check
+                                  data-icon="inline-start"
+                                  className="text-emerald-500"
+                                />
+                              ) : (
+                                <Copy data-icon="inline-start" />
+                              )}
+                            </>
+                          </TooltipTrigger>
+                          <TooltipContent>复制下一跳</TooltipContent>
+                        </Tooltip>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="font-mono text-xs text-muted-foreground">
+                    {route.interface || "--"}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { Switch } from '@/components/ui/switch'
 import { Slider } from '@/components/ui/slider'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
@@ -87,53 +88,6 @@ function toAddrString(item: unknown): string {
  return String(item)
 }

-interface ConnectionItem {
-  id: string
-  address: string
-  autoConnect: boolean
-}
-
-function parseConnectionsFromConfig(config: KLALBControllerConfig | null): ConnectionItem[] {
-  if (!config) return []
-  const lineTable = (
-    Array.isArray(config.openConnections)
-      ? config.openConnections
-      : Array.isArray(config.LineTable)
-        ? config.LineTable
-        : []
-  ).map(toAddrString)
-  const connectTable = (
-    Array.isArray(config.autoConnections)
-      ? config.autoConnections
-      : Array.isArray(config.ConnectLineTable)
-        ? config.ConnectLineTable
-        : []
-  ).map(toAddrString)
-
-  const items: ConnectionItem[] = []
-  // openConnections (autoConnect: false)
-  lineTable.forEach((addr, index) => {
-    if (addr && addr.trim() !== '') {
-      items.push({
-        id: `open-${index}-${addr}`,
-        address: addr,
-        autoConnect: false,
-      })
-    }
-  })
-  // autoConnections (autoConnect: true)
-  connectTable.forEach((addr, index) => {
-    if (addr && addr.trim() !== '') {
-      items.push({
-        id: `auto-${index}-${addr}`,
-        address: addr,
-        autoConnect: true,
-      })
-    }
-  })
-  return items
-}
-
 function SettingsForm({
  initialConfig,
  onSave,
@@ -149,6 +103,9 @@ function SettingsForm({
    ...initialConfig,
    TCPListen: toAddrString(initialConfig.TCPListen),
    UDPListen: toAddrString(initialConfig.UDPListen),
+    webListen:
+      initialConfig.webListen ??
+      (initialConfig.webPort ? `http://0.0.0.0:${initialConfig.webPort}` : 'http://0.0.0.0:4665'),
  }))
  const [tunEnabled, setTunEnabled] = useState<boolean>(() =>
    initialConfig.enableTUN ??
@@ -157,8 +114,26 @@ function SettingsForm({
      initialConfig.TUNName.trim() !== '')
  )

-  const [connections, setConnections] = useState<ConnectionItem[]>(() =>
-    parseConnectionsFromConfig(initialConfig)
+  const [autoConnections, setAutoConnections] = useState<string[]>(() =>
+    (
+      Array.isArray(initialConfig.autoConnections)
+        ? initialConfig.autoConnections
+        : Array.isArray(initialConfig.ConnectLineTable)
+          ? initialConfig.ConnectLineTable
+          : []
+    ).map(toAddrString)
+  )
+
+  const [externalEndpoints, setExternalEndpoints] = useState<string[]>(() =>
+    (
+      Array.isArray(initialConfig.externalEndpoints)
+        ? initialConfig.externalEndpoints
+        : Array.isArray(initialConfig.openConnections)
+          ? initialConfig.openConnections
+          : Array.isArray(initialConfig.LineTable)
+            ? initialConfig.LineTable
+            : []
+    ).map(toAddrString)
  )

  const [ntpServers, setNtpServers] = useState<string[]>(() =>
@@ -190,20 +165,38 @@ function SettingsForm({
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

-    const cleanConnections = connections.filter((c) => c.address.trim() !== '')
-    // 互斥分离：选中自动连接的进 autoConnections，未选中的进 openConnections
-    const updatedOpenConnections = cleanConnections
-      .filter((c) => !c.autoConnect)
-      .map((c) => c.address.trim())
-    const updatedAutoConnections = cleanConnections
-      .filter((c) => c.autoConnect)
-      .map((c) => c.address.trim())
+    const updatedAutoConnections = autoConnections
+      .filter((address) => address.trim() !== '')
+      .map((address) => address.trim())
+    const updatedExternalEndpoints = externalEndpoints
+      .filter((address) => address.trim() !== '')
+      .map((address) => address.trim())
+
+    // 保存时同时携带新键名与历史别名，兼容新旧后端
+    const denyQuery =
+      form.denyExternalEndpointQuery ?? form.denyConnectionQuery ?? form.denyLineTableQuery ?? false
+    const denyBroadcast =
+      form.denyExternalEndpointBroadcast ??
+      form.denyConnectionBroadcast ??
+      form.denyLineTableBroadcast ??
+      false
+    const webListen = form.webListen?.trim() || 'http://0.0.0.0:4665'
+    let webPort = 4665
+    try {
+      const parsedPort = new URL(webListen).port
+      if (parsedPort) webPort = parseInt(parsedPort, 10)
+    } catch {
+      // Java backend validates the canonical listen address.
+    }

    const updatedConfig: Record<string, unknown> = {
      ...form,
-      openConnections: updatedOpenConnections,
+      webListen,
+      webPort,
+      externalEndpoints: updatedExternalEndpoints,
+      openConnections: updatedExternalEndpoints,
      autoConnections: updatedAutoConnections,
-      LineTable: updatedOpenConnections,
+      LineTable: updatedExternalEndpoints,
      ConnectLineTable: updatedAutoConnections,
      ntpServers: ntpServers.filter((s) => s.trim() !== ''),
      ntpServerTable: ntpServers.filter((s) => s.trim() !== ''),
@@ -212,42 +205,16 @@ function SettingsForm({
      NetworkInterfaceExcepts: interfaceExcepts.filter((s) => s.trim() !== ''),
      enableTUN: tunEnabled,
      TUNName: form.TUNName?.trim() || 'KLALB_SRv6',
-      denyConnectionQuery: form.denyConnectionQuery ?? form.denyLineTableQuery ?? false,
-      denyConnectionBroadcast: form.denyConnectionBroadcast ?? form.denyLineTableBroadcast ?? false,
+      denyExternalEndpointQuery: denyQuery,
+      denyExternalEndpointBroadcast: denyBroadcast,
+      denyConnectionQuery: denyQuery,
+      denyConnectionBroadcast: denyBroadcast,
      Type: 'KLALBController',
    }

    await onSave(updatedConfig as KLALBControllerConfig)
  }

-  // --- Dynamic Connection Items Handlers ---
-  const addConnection = () => {
-    setConnections((prev) => [
-      ...prev,
-      {
-        id: `conn-${Date.now()}`,
-        address: '',
-        autoConnect: true,
-      },
-    ])
-  }
-
-  const updateConnection = (
-    index: number,
-    field: 'address' | 'autoConnect',
-    value: string | boolean
-  ) => {
-    setConnections((prev) => {
-      const next = [...prev]
-      next[index] = { ...next[index], [field]: value }
-      return next
-    })
-  }
-
-  const removeConnection = (index: number) => {
-    setConnections((prev) => prev.filter((_, i) => i !== index))
-  }
-
  // --- Generic Dynamic List Handlers ---
  const addListItem = (setter: React.Dispatch<React.SetStateAction<string[]>>) => {
    setter((prev) => [...prev, ''])
@@ -384,15 +351,16 @@ function SettingsForm({

                <Field className="md:col-span-2">
                  <FieldLabel htmlFor="deviceDescription">设备描述</FieldLabel>
-                  <Input
+                  <Textarea
                    id="deviceDescription"
-                    placeholder="如: 机房 A 区多线聚合网关"
+                    placeholder={'如: 机房 A 区多线聚合网关\n支持多行输入'}
+                    className="min-h-20"
                    value={form.DeviceDescription || ''}
                    onChange={(e) =>
                      setForm((prev) => ({ ...prev, DeviceDescription: e.target.value }))
                    }
                  />
-                  <FieldDescription>本地备注说明信息，不参与网络路由决策</FieldDescription>
+                  <FieldDescription>本地备注说明信息，支持多行，不参与网络路由决策</FieldDescription>
                </Field>
              </FieldGroup>
            </CardContent>
@@ -471,23 +439,21 @@ function SettingsForm({
                )}

                <Field>
-                  <FieldLabel htmlFor="webPort">Web 控制台端口</FieldLabel>
+                  <FieldLabel htmlFor="webListen">Web API 监听地址</FieldLabel>
                  <Input
-                    id="webPort"
-                    type="number"
-                    min={1}
-                    max={65535}
-                    placeholder="4665"
-                    value={form.webPort ?? 4665}
+                    id="webListen"
+                    type="text"
+                    placeholder="http://0.0.0.0:4665"
+                    value={form.webListen ?? 'http://0.0.0.0:4665'}
                    onChange={(e) =>
                      setForm((prev) => ({
                        ...prev,
-                        webPort: parseInt(e.target.value) || 4665,
+                        webListen: e.target.value,
                      }))
                    }
                  />
                  <FieldDescription>
-                    Web API 与前端仪表盘托管监听端口（默认 4665）
+                    Web API 与前端仪表盘托管监听地址（默认 http://0.0.0.0:4665）
                  </FieldDescription>
                </Field>

@@ -661,80 +627,111 @@ function SettingsForm({

        {/* Tab 3: 连接与同步列表 (Lists) */}
        <TabsContent value="lists" className="m-0 flex flex-col gap-6">
-          {/* 1. Connections List (with Auto Connect toggle) */}
+          {/* 1. Automatic Connection Endpoints */}
          <Card className="shadow-2xs">
            <CardHeader className="flex flex-row items-center justify-between pb-3">
              <div>
-                <CardTitle className="text-base">连接列表</CardTitle>
-                <CardDescription>
-                  配置开放的 Socket 连接地址，开启「自动连接」将作为启动自动连接目标，未开启则作为对外开放连接
-                </CardDescription>
+                <CardTitle className="text-base">与以下端点自动建立连接</CardTitle>
+                <CardDescription>本节点启动时主动连接的远端端点</CardDescription>
              </div>
              <Button
                type="button"
                size="sm"
                variant="outline"
-                onClick={addConnection}
+                onClick={() => addListItem(setAutoConnections)}
              >
                <Plus data-icon="inline-start" />
-                添加连接
+                添加端点
              </Button>
            </CardHeader>
            <CardContent>
-              <FieldGroup className="gap-3">
-                {connections.length === 0 ? (
-                  <div className="rounded-lg border border-dashed p-6 text-center text-xs text-muted-foreground">
-                    暂未配置连接条目，请点击右上角「添加连接」
+              <FieldGroup className="gap-2">
+                {autoConnections.length === 0 ? (
+                  <div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
+                    未配置自动连接端点
                  </div>
                ) : (
-                  connections.map((item, idx) => (
-                    <div
-                      key={item.id}
-                      className="flex flex-col gap-3 rounded-lg border bg-card p-3 shadow-2xs sm:flex-row sm:items-center sm:justify-between"
-                    >
-                      <div className="flex flex-1 items-center gap-2">
+                  autoConnections.map((endpoint, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
                      <Input
                        className="flex-1 font-mono text-xs"
                        placeholder="tcp://kne01.yoyo250.fun:4565 或 udp://..."
-                          value={item.address}
+                        value={endpoint}
                        onChange={(e) =>
-                            updateConnection(idx, 'address', e.target.value)
+                          updateListItem(idx, e.target.value, setAutoConnections)
                        }
                      />
-                      </div>
-
-                      <div className="flex shrink-0 items-center justify-end gap-4">
-                        <Field orientation="horizontal" className="flex items-center gap-2">
-                          <FieldLabel htmlFor={`auto-conn-${item.id}`} className="cursor-pointer text-xs text-muted-foreground">
-                            自动连接
-                          </FieldLabel>
-                          <Switch
-                            id={`auto-conn-${item.id}`}
-                            checked={item.autoConnect}
-                            onCheckedChange={(checked) =>
-                              updateConnection(idx, 'autoConnect', checked)
-                            }
-                          />
-                        </Field>
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon-xs"
                        className="text-destructive hover:text-destructive"
-                          onClick={() => removeConnection(idx)}
-                          title="删除该连接"
+                        onClick={() => removeListItem(idx, setAutoConnections)}
+                        title="删除该端点"
                      >
                        <Trash2 className="size-3.5" />
                      </Button>
                    </div>
-                    </div>
                  ))
                )}
              </FieldGroup>
            </CardContent>
          </Card>

-          {/* 2. NTP Server List */}
+          {/* 2. Published External Endpoints */}
+          <Card className="shadow-2xs">
+            <CardHeader className="flex flex-row items-center justify-between pb-3">
+              <div>
+                <CardTitle className="text-base">本机外部端点</CardTitle>
+                <CardDescription>
+                  本节点对外发布且可被其他节点访问的端点，不是远端连接目标
+                </CardDescription>
+              </div>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => addListItem(setExternalEndpoints)}
+              >
+                <Plus data-icon="inline-start" />
+                添加端点
+              </Button>
+            </CardHeader>
+            <CardContent>
+              <FieldGroup className="gap-2">
+                {externalEndpoints.length === 0 ? (
+                  <div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
+                    未配置本机外部端点
+                  </div>
+                ) : (
+                  externalEndpoints.map((endpoint, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
+                      <Input
+                        className="flex-1 font-mono text-xs"
+                        placeholder="tcp://本机公网地址:4565 或 udp://..."
+                        value={endpoint}
+                        onChange={(e) =>
+                          updateListItem(idx, e.target.value, setExternalEndpoints)
+                        }
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-xs"
+                        className="text-destructive hover:text-destructive"
+                        onClick={() => removeListItem(idx, setExternalEndpoints)}
+                        title="删除该端点"
+                      >
+                        <Trash2 className="size-3.5" />
+                      </Button>
+                    </div>
+                  ))
+                )}
+              </FieldGroup>
+            </CardContent>
+          </Card>
+
+          {/* 3. NTP Server List */}
          <Card className="shadow-2xs">
            <CardHeader className="flex flex-row items-center justify-between pb-3">
              <div>
@@ -981,10 +978,16 @@ function SettingsForm({
                  </FieldContent>
                  <Switch
                    id="switch-deny-query"
-                    checked={form.denyConnectionQuery ?? form.denyLineTableQuery ?? false}
+                    checked={
+                      form.denyExternalEndpointQuery ??
+                      form.denyConnectionQuery ??
+                      form.denyLineTableQuery ??
+                      false
+                    }
                    onCheckedChange={(checked) =>
                      setForm((prev) => ({
                        ...prev,
+                        denyExternalEndpointQuery: checked,
                        denyConnectionQuery: checked,
                        denyLineTableQuery: checked,
                      }))
@@ -1004,10 +1007,16 @@ function SettingsForm({
                  </FieldContent>
                  <Switch
                    id="switch-deny-broadcast"
-                    checked={form.denyConnectionBroadcast ?? form.denyLineTableBroadcast ?? false}
+                    checked={
+                      form.denyExternalEndpointBroadcast ??
+                      form.denyConnectionBroadcast ??
+                      form.denyLineTableBroadcast ??
+                      false
+                    }
                    onCheckedChange={(checked) =>
                      setForm((prev) => ({
                        ...prev,
+                        denyExternalEndpointBroadcast: checked,
                        denyConnectionBroadcast: checked,
                        denyLineTableBroadcast: checked,
                      }))
@@ -0,0 +1,209 @@
+import { useState, useMemo, useCallback, useRef } 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'
+import type { NodeInfoDetail } from '@/types/api'
+
+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)
+
+  // 节点详情（含设备描述，来自 /api/node-info）
+  const [nodeInfo, setNodeInfo] = useState<NodeInfoDetail | null>(null)
+  const [nodeInfoLoading, setNodeInfoLoading] = useState(false)
+  const nodeInfoSeqRef = useRef(0)
+
+  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)
+      setNodeInfo(null)
+      setNodeInfoLoading(true)
+      const seq = ++nodeInfoSeqRef.current
+      fetch(`/api/node-info?address=${encodeURIComponent(nodeId)}`)
+        .then((res) => (res.ok ? res.json() : null))
+        .then((data: NodeInfoDetail | null) => {
+          // 防止乱序：仅当仍是当前选中节点时才应用结果
+          if (seq === nodeInfoSeqRef.current && data) {
+            setNodeInfo(data)
+          }
+        })
+        .catch(() => {})
+        .finally(() => {
+          if (seq === nodeInfoSeqRef.current) {
+            setNodeInfoLoading(false)
+          }
+        })
+    } else {
+      setSheetOpen(false)
+      setNodeInfo(null)
+      setNodeInfoLoading(false)
+      nodeInfoSeqRef.current++
+    }
+  }, [])
+
+  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)
+            setNodeInfo(null)
+            nodeInfoSeqRef.current++
+          }
+        }}
+        node={sheetNode}
+        neighbors={neighbors}
+        copiedId={copiedId}
+        onCopy={handleCopy}
+        description={nodeInfo?.deviceDescription ?? null}
+        descriptionLoading={nodeInfoLoading}
+      />
+    </div>
+  )
+}
@@ -64,12 +64,12 @@ export interface SSEEventData {
  links: RemoteLinkItem[]
 }

-export interface RouteItemData {
+export interface RoutingTableItem {
  destination: string
-  protocol: number
+  protocol: string
  preference: number
  cost: number
-  flag: number
+  flag: string
  nexthop: string
  interface: string
 }
@@ -94,10 +94,13 @@ export interface TopologyData {
  edges: TopologyEdge[]
 }

-export interface NetworkInterfaceInfo {
-  name: string
-  displayName: string
-  addresses: string[]
+export interface NodeInfoDetail {
+  address: string
+  isSelf: boolean
+  deviceName: string
+  deviceDescription: string
+  reachable?: boolean
+  openLines?: string[]
 }

 export interface KLALBControllerConfig {
@@ -109,11 +112,13 @@ export interface KLALBControllerConfig {
  enableTUN?: boolean
  TUNName?: string | null
  webUI?: boolean
+  webListen?: string
  webPort?: number
  nogui?: boolean
  TCPListen?: string
  UDPListen?: string
  VirtualSocketName?: string
+  externalEndpoints?: string[]
  openConnections?: string[]
  autoConnections?: string[]
  ntpServers?: string[]
@@ -123,6 +128,8 @@ export interface KLALBControllerConfig {
  DNS?: string[]
  ExtraRoutes?: string[]
  NetworkInterfaceExcepts?: string[]
+  denyExternalEndpointQuery?: boolean
+  denyExternalEndpointBroadcast?: boolean
  denyConnectionQuery?: boolean
  denyConnectionBroadcast?: boolean
  denyLineTableQuery?: boolean
Author	SHA1	Message	Date
SerinaNya	beb826e7d6	💚 fix ci: add `ACTIONS_RESULTS_URL` for `actions/upload-artifact@v4` Build Dashboard / build (push) Successful in 5m24s Details	2026-09-03 15:54:46 +08:00
SerinaNya	f2dae09b6b	👷 ci: add build workflow Build Dashboard / build (push) Failing after 6m49s Details	2026-09-01 15:02:38 +08:00
SerinaNya	885a0c2d89	fix(routing-table): preserve SRv6 protocol types and colors - Type route protocol and flag fields as strings - Distinguish Direct, SRv6 ENDXSID, and SRv6 ENDSID routes - Add dynamic protocol filtering and protocol-specific counters - Use distinct violet and emerald badges for ENDXSID and ENDSID	2026-08-31 14:40:33 +08:00
SerinaNya	89474b9e91	feat(dashboard)!: add routing table and split endpoint settings - Add #/routing-table with one-second polling and route filters - Separate auto-connect targets from local external endpoints - Remove the obsolete interfaces navigation module BREAKING CHANGE: #/interfaces is removed.	2026-08-27 23:19:39 +08:00
SerinaNya	ad94d2c274	feat(topology): add device description support and polish UI layouts - Topology: query /api/node-info on node select and display multi-line description - Topology: widen device node cards and remove SID truncation for full display - Topology: tune d3-force layout parameters (increased distance & repulsion) - Topology: fix d3-force string ID matching error ("node not found: 0") - Settings: switch device description field from Input to multi-line Textarea - Overview: fix active lines count logic and broken badge layout - Sidebar: remove redundant Live badge from overview navigation item	2026-08-26 21:27:44 +08:00
SerinaNya	f38d640ac4	feat(settings): use webListen URI format for Web API address - rename webPort field/label to webListen (Web API 监听地址) - seed initial form state from webListen with legacy webPort fallback - save webListen URI string while deriving legacy webPort integer for backend compatibility	2026-08-26 19:42:20 +08:00
SerinaNya	d4250fce31	feat(settings): adopt externalEndpoints/denyExternalEndpoint* keys - read externalEndpoints first, fall back to openConnections/LineTable - deny toggles mirror new canonical keys plus legacy aliases on save so both updated and legacy backends keep working	2026-08-26 00:22:59 +08:00
SerinaNya	3f0b20e757	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	2026-08-24 23:59:00 +08:00