fix(desktop): session persistence — refresh/login/context/empty-content 4-bug fix

1. App.tsx: add restoreSession() call on startup to prevent redirect to login page after refresh (isRestoring guard + BootstrapScreen) 2. CloneManager: call syncAgents() after loadClones() to restore currentAgent and conversation history on app load 3. zclaw-memory: add get_or_create_session() so frontend session UUID is persisted directly — kernel no longer creates mismatched IDs 4. openai.rs: assistant message content must be non-empty for Kimi/Qwen APIs — replace empty content with meaningful placeholders Also includes admin-v2 ModelServices unified page (merge providers + models + API keys into expandable row layout)
2026-03-31 13:38:59 +08:00
parent 3e5d64484e
commit 6cae768401
29 changed files with 1982 additions and 933 deletions
--- a/admin-v2/index.html
+++ b/admin-v2/index.html
@@ -1,12 +1,16 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>admin-v2</title>
+    <title>ZCLAW Admin</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  </head>
  <body>
+    <a href="#main-content" class="skip-to-content">跳转到主要内容</a>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
--- a/admin-v2/package.json
+++ b/admin-v2/package.json
@@ -25,6 +25,7 @@
  },
  "devDependencies": {
    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.2.2",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@testing-library/user-event": "^14.6.1",
@@ -38,6 +39,7 @@
    "globals": "^17.4.0",
    "jsdom": "^29.0.1",
    "msw": "^2.12.14",
+    "tailwindcss": "^4.2.2",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.57.0",
    "vite": "^8.0.1",
--- a/admin-v2/pnpm-lock.yaml
+++ b/admin-v2/pnpm-lock.yaml
@@ -42,6 +42,9 @@ importers:
      '@eslint/js':
        specifier: ^9.39.4
        version: 9.39.4
+      '@tailwindcss/vite':
+        specifier: ^4.2.2
+        version: 4.2.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1))
      '@testing-library/jest-dom':
        specifier: ^6.9.1
        version: 6.9.1
@@ -62,16 +65,16 @@ importers:
        version: 19.2.3(@types/react@19.2.14)
      '@vitejs/plugin-react':
        specifier: ^6.0.1
-        version: 6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1))
+        version: 6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1))
      eslint:
        specifier: ^9.39.4
-        version: 9.39.4
+        version: 9.39.4(jiti@2.6.1)
      eslint-plugin-react-hooks:
        specifier: ^7.0.1
-        version: 7.0.1(eslint@9.39.4)
+        version: 7.0.1(eslint@9.39.4(jiti@2.6.1))
      eslint-plugin-react-refresh:
        specifier: ^0.5.2
-        version: 0.5.2(eslint@9.39.4)
+        version: 0.5.2(eslint@9.39.4(jiti@2.6.1))
      globals:
        specifier: ^17.4.0
        version: 17.4.0
@@ -81,18 +84,21 @@ importers:
      msw:
        specifier: ^2.12.14
        version: 2.12.14(@types/node@24.12.0)(typescript@5.9.3)
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
      typescript:
        specifier: ~5.9.3
        version: 5.9.3
      typescript-eslint:
        specifier: ^8.57.0
-        version: 8.57.2(eslint@9.39.4)(typescript@5.9.3)
+        version: 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
      vite:
        specifier: ^8.0.1
-        version: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1)
+        version: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1)
      vitest:
        specifier: ^4.1.2
-        version: 4.1.2(@types/node@24.12.0)(jsdom@29.0.1)(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1))
+        version: 4.1.2(@types/node@24.12.0)(jsdom@29.0.1)(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1))

 packages:

@@ -930,6 +936,100 @@ packages:
  '@standard-schema/spec@1.1.0':
    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}

+  '@tailwindcss/node@4.2.2':
+    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.2':
+    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.2':
+    resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
  '@tanstack/query-core@5.95.2':
    resolution: {integrity: sha512-o4T8vZHZET4Bib3jZ/tCW9/7080urD4c+0/AUaYVpIqOsr7y0reBc1oX3ttNaSW5mYyvZHctiQ/UOP2PfdmFEQ==}

@@ -1317,6 +1417,10 @@ packages:
  emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}

+  enhanced-resolve@5.20.1:
+    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
+    engines: {node: '>=10.13.0'}
+
  entities@6.0.1:
    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
    engines: {node: '>=0.12'}
@@ -1498,6 +1602,9 @@ packages:
    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
    engines: {node: '>= 0.4'}

+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
  graphql@16.13.2:
    resolution: {integrity: sha512-5bJ+nf/UCpAjHM8i06fl7eLyVC9iuNAjm9qzkiu2ZGhM0VscSvS6WDPfAwkdkBuoXGM9FJSbKl6wylMwP9Ktig==}
    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
@@ -1575,6 +1682,10 @@ packages:
  isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}

+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
  js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

@@ -2060,6 +2171,13 @@ packages:
    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
    engines: {node: '>=20'}

+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
+
+  tapable@2.3.2:
+    resolution: {integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==}
+    engines: {node: '>=6'}
+
  terser@5.46.1:
    resolution: {integrity: sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==}
    engines: {node: '>=10'}
@@ -2807,9 +2925,9 @@ snapshots:

  '@emotion/unitless@0.7.5': {}

-  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4)':
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@2.6.1))':
    dependencies:
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.6.1)
      eslint-visitor-keys: 3.4.3

  '@eslint-community/regexpp@4.12.2': {}
@@ -3348,6 +3466,74 @@ snapshots:

  '@standard-schema/spec@1.1.0': {}

+  '@tailwindcss/node@4.2.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.1
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.2
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-x64': 4.2.2
+      '@tailwindcss/oxide-freebsd-x64': 4.2.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
+
+  '@tailwindcss/vite@4.2.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1))':
+    dependencies:
+      '@tailwindcss/node': 4.2.2
+      '@tailwindcss/oxide': 4.2.2
+      tailwindcss: 4.2.2
+      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1)
+
  '@tanstack/query-core@5.95.2': {}

  '@tanstack/react-query@5.95.2(react@19.2.4)':
@@ -3421,15 +3607,15 @@ snapshots:

  '@types/statuses@2.0.6': {}

-  '@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.57.2(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
      '@typescript-eslint/scope-manager': 8.57.2
-      '@typescript-eslint/type-utils': 8.57.2(eslint@9.39.4)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.57.2(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
      '@typescript-eslint/visitor-keys': 8.57.2
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.6.1)
      ignore: 7.0.5
      natural-compare: 1.4.0
      ts-api-utils: 2.5.0(typescript@5.9.3)
@@ -3437,14 +3623,14 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/parser@8.57.2(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@typescript-eslint/scope-manager': 8.57.2
      '@typescript-eslint/types': 8.57.2
      '@typescript-eslint/typescript-estree': 8.57.2(typescript@5.9.3)
      '@typescript-eslint/visitor-keys': 8.57.2
      debug: 4.4.3
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.6.1)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color
@@ -3467,13 +3653,13 @@ snapshots:
    dependencies:
      typescript: 5.9.3

-  '@typescript-eslint/type-utils@8.57.2(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@typescript-eslint/types': 8.57.2
      '@typescript-eslint/typescript-estree': 8.57.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.57.2(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
      debug: 4.4.3
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.6.1)
      ts-api-utils: 2.5.0(typescript@5.9.3)
      typescript: 5.9.3
    transitivePeerDependencies:
@@ -3496,13 +3682,13 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@8.57.2(eslint@9.39.4)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
      '@typescript-eslint/scope-manager': 8.57.2
      '@typescript-eslint/types': 8.57.2
      '@typescript-eslint/typescript-estree': 8.57.2(typescript@5.9.3)
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.6.1)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color
@@ -3518,10 +3704,10 @@ snapshots:
    dependencies:
      react: 19.2.4

-  '@vitejs/plugin-react@6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1))':
+  '@vitejs/plugin-react@6.0.1(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1))':
    dependencies:
      '@rolldown/pluginutils': 1.0.0-rc.7
-      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1)
+      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1)

  '@vitest/expect@4.1.2':
    dependencies:
@@ -3532,14 +3718,14 @@ snapshots:
      chai: 6.2.2
      tinyrainbow: 3.1.0

-  '@vitest/mocker@4.1.2(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1))':
+  '@vitest/mocker@4.1.2(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1))':
    dependencies:
      '@vitest/spy': 4.1.2
      estree-walker: 3.0.3
      magic-string: 0.30.21
    optionalDependencies:
      msw: 2.12.14(@types/node@24.12.0)(typescript@5.9.3)
-      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1)
+      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1)

  '@vitest/pretty-format@4.1.2':
    dependencies:
@@ -3798,6 +3984,11 @@ snapshots:

  emoji-regex@8.0.0: {}

+  enhanced-resolve@5.20.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.2
+
  entities@6.0.1: {}

  es-define-property@1.0.1: {}
@@ -3821,20 +4012,20 @@ snapshots:

  escape-string-regexp@4.0.0: {}

-  eslint-plugin-react-hooks@7.0.1(eslint@9.39.4):
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.4(jiti@2.6.1)):
    dependencies:
      '@babel/core': 7.29.0
      '@babel/parser': 7.29.2
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.6.1)
      hermes-parser: 0.25.1
      zod: 4.3.6
      zod-validation-error: 4.0.2(zod@4.3.6)
    transitivePeerDependencies:
      - supports-color

-  eslint-plugin-react-refresh@0.5.2(eslint@9.39.4):
+  eslint-plugin-react-refresh@0.5.2(eslint@9.39.4(jiti@2.6.1)):
    dependencies:
-      eslint: 9.39.4
+      eslint: 9.39.4(jiti@2.6.1)

  eslint-scope@8.4.0:
    dependencies:
@@ -3847,9 +4038,9 @@ snapshots:

  eslint-visitor-keys@5.0.1: {}

-  eslint@9.39.4:
+  eslint@9.39.4(jiti@2.6.1):
    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
      '@eslint-community/regexpp': 4.12.2
      '@eslint/config-array': 0.21.2
      '@eslint/config-helpers': 0.4.2
@@ -3883,6 +4074,8 @@ snapshots:
      minimatch: 3.1.5
      natural-compare: 1.4.0
      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
    transitivePeerDependencies:
      - supports-color

@@ -3983,6 +4176,8 @@ snapshots:

  gopd@1.2.0: {}

+  graceful-fs@4.2.11: {}
+
  graphql@16.13.2: {}

  has-flag@4.0.0: {}
@@ -4040,6 +4235,8 @@ snapshots:

  isexe@2.0.0: {}

+  jiti@2.6.1: {}
+
  js-tokens@4.0.0: {}

  js-yaml@4.1.1:
@@ -4491,6 +4688,10 @@ snapshots:

  tagged-tag@1.0.0: {}

+  tailwindcss@4.2.2: {}
+
+  tapable@2.3.2: {}
+
  terser@5.46.1:
    dependencies:
      '@jridgewell/source-map': 0.3.11
@@ -4542,13 +4743,13 @@ snapshots:
    dependencies:
      tagged-tag: 1.0.0

-  typescript-eslint@8.57.2(eslint@9.39.4)(typescript@5.9.3):
+  typescript-eslint@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3):
    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.57.2(eslint@9.39.4)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.57.2(@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
      '@typescript-eslint/typescript-estree': 8.57.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.57.2(eslint@9.39.4)(typescript@5.9.3)
-      eslint: 9.39.4
+      '@typescript-eslint/utils': 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.6.1)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color
@@ -4575,7 +4776,7 @@ snapshots:
    dependencies:
      react: 19.2.4

-  vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1):
+  vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1):
    dependencies:
      lightningcss: 1.32.0
      picomatch: 4.0.4
@@ -4585,15 +4786,16 @@ snapshots:
    optionalDependencies:
      '@types/node': 24.12.0
      fsevents: 2.3.3
+      jiti: 2.6.1
      terser: 5.46.1
    transitivePeerDependencies:
      - '@emnapi/core'
      - '@emnapi/runtime'

-  vitest@4.1.2(@types/node@24.12.0)(jsdom@29.0.1)(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1)):
+  vitest@4.1.2(@types/node@24.12.0)(jsdom@29.0.1)(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1)):
    dependencies:
      '@vitest/expect': 4.1.2
-      '@vitest/mocker': 4.1.2(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1))
+      '@vitest/mocker': 4.1.2(msw@2.12.14(@types/node@24.12.0)(typescript@5.9.3))(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1))
      '@vitest/pretty-format': 4.1.2
      '@vitest/runner': 4.1.2
      '@vitest/snapshot': 4.1.2
@@ -4610,7 +4812,7 @@ snapshots:
      tinyexec: 1.0.4
      tinyglobby: 0.2.15
      tinyrainbow: 3.1.0
-      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(terser@5.46.1)
+      vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@24.12.0)(jiti@2.6.1)(terser@5.46.1)
      why-is-node-running: 2.3.0
    optionalDependencies:
      '@types/node': 24.12.0
--- a/admin-v2/src/components/ErrorState.tsx
+++ b/admin-v2/src/components/ErrorState.tsx
@@ -0,0 +1,51 @@
+import { Button, Result } from 'antd'
+import type { FallbackProps } from 'react-error-boundary'
+
+interface ErrorStateProps {
+  title?: string
+  message?: string
+  onRetry?: () => void
+}
+
+export function ErrorState({
+  title = '加载失败',
+  message,
+  onRetry,
+}: ErrorStateProps) {
+  return (
+    <div className="flex items-center justify-center min-h-[200px] p-8">
+      <Result
+        status="error"
+        title={title}
+        subTitle={message}
+        extra={
+          onRetry ? (
+            <Button type="primary" onClick={onRetry}>
+              重试
+            </Button>
+          ) : undefined
+        }
+      />
+    </div>
+  )
+}
+
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <div className="flex items-center justify-center min-h-[200px] p-8">
+      <Result
+        status="error"
+        title="页面出现错误"
+        subTitle={error.message}
+        extra={
+          <div className="flex gap-2">
+            <Button onClick={resetErrorBoundary}>重试</Button>
+            <Button type="primary" onClick={() => window.location.reload()}>
+              刷新页面
+            </Button>
+          </div>
+        }
+      />
+    </div>
+  )
+}
--- a/admin-v2/src/components/PageHeader.tsx
+++ b/admin-v2/src/components/PageHeader.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+}
+
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <div className="flex items-start justify-between mb-6">
+      <div>
+        <h1 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
+          {title}
+        </h1>
+        {description && (
+          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+            {description}
+          </p>
+        )}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  )
+}
--- a/admin-v2/src/components/StatusTag.tsx
+++ b/admin-v2/src/components/StatusTag.tsx
@@ -0,0 +1,15 @@
+import { Tag } from 'antd'
+
+interface StatusTagProps {
+  status: string
+  labels: Record<string, string>
+  colors: Record<string, string>
+}
+
+export function StatusTag({ status, labels, colors }: StatusTagProps) {
+  return (
+    <Tag color={colors[status] || 'default'}>
+      {labels[status] || status}
+    </Tag>
+  )
+}
--- a/admin-v2/src/constants/status.ts
+++ b/admin-v2/src/constants/status.ts
@@ -0,0 +1,45 @@
+// ============================================================
+// 操作日志状态映射 — Dashboard 与 Logs 共用
+// ============================================================
+
+export const actionLabels: Record<string, string> = {
+  login: '登录',
+  logout: '登出',
+  create_account: '创建账号',
+  update_account: '更新账号',
+  delete_account: '删除账号',
+  create_provider: '创建服务商',
+  update_provider: '更新服务商',
+  delete_provider: '删除服务商',
+  create_model: '创建模型',
+  update_model: '更新模型',
+  delete_model: '删除模型',
+  create_token: '创建密钥',
+  revoke_token: '撤销密钥',
+  update_config: '更新配置',
+  create_prompt: '创建提示词',
+  update_prompt: '更新提示词',
+  archive_prompt: '归档提示词',
+  desktop_audit: '桌面端审计',
+}
+
+export const actionColors: Record<string, string> = {
+  login: 'green',
+  logout: 'default',
+  create_account: 'blue',
+  update_account: 'orange',
+  delete_account: 'red',
+  create_provider: 'blue',
+  update_provider: 'orange',
+  delete_provider: 'red',
+  create_model: 'blue',
+  update_model: 'orange',
+  delete_model: 'red',
+  create_token: 'blue',
+  revoke_token: 'red',
+  update_config: 'orange',
+  create_prompt: 'blue',
+  update_prompt: 'orange',
+  archive_prompt: 'red',
+  desktop_audit: 'default',
+}
--- a/admin-v2/src/layouts/AdminLayout.tsx
+++ b/admin-v2/src/layouts/AdminLayout.tsx
@@ -1,15 +1,9 @@
-// ============================================================
-// AdminLayout — ProLayout 管理后台布局
-// ============================================================
-
+import { useState, useCallback, useEffect, useMemo } from 'react'
 import { Outlet, useNavigate, useLocation } from 'react-router-dom'
-import ProLayout from '@ant-design/pro-layout'
 import {
  DashboardOutlined,
  TeamOutlined,
  CloudServerOutlined,
-  ApiOutlined,
-  KeyOutlined,
  BarChartOutlined,
  SwapOutlined,
  SettingOutlined,
@@ -17,67 +11,334 @@ import {
  MessageOutlined,
  RobotOutlined,
  LogoutOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  SunOutlined,
+  MoonOutlined,
+  ApiOutlined,
 } from '@ant-design/icons'
+import { Avatar, Dropdown, Tooltip, Drawer } from 'antd'
 import { useAuthStore } from '@/stores/authStore'
-import { Avatar, Dropdown, message } from 'antd'
-import type { MenuDataItem } from '@ant-design/pro-layout'
+import { useThemeStore, setThemeMode } from '@/stores/themeStore'
+import type { ReactNode } from 'react'

-const menuConfig: MenuDataItem[] = [
-  { path: '/', name: '仪表盘', icon: <DashboardOutlined /> },
-  { path: '/accounts', name: '账号管理', icon: <TeamOutlined />, permission: 'account:admin' },
-  { path: '/providers', name: '服务商', icon: <CloudServerOutlined />, permission: 'provider:manage' },
-  { path: '/models', name: '模型管理', icon: <ApiOutlined />, permission: 'model:read' },
-  { path: '/agent-templates', name: 'Agent 模板', icon: <RobotOutlined />, permission: 'model:read' },
-  { path: '/api-keys', name: 'API 密钥', icon: <KeyOutlined />, permission: 'admin:full' },
-  { path: '/usage', name: '用量统计', icon: <BarChartOutlined />, permission: 'admin:full' },
-  { path: '/relay', name: '中转任务', icon: <SwapOutlined />, permission: 'relay:use' },
-  { path: '/config', name: '系统配置', icon: <SettingOutlined />, permission: 'config:read' },
-  { path: '/prompts', name: '提示词管理', icon: <MessageOutlined />, permission: 'prompt:read' },
-  { path: '/logs', name: '操作日志', icon: <FileTextOutlined />, permission: 'admin:full' },
+// ============================================================
+// Navigation Configuration
+// ============================================================
+
+interface NavItem {
+  path: string
+  name: string
+  icon: ReactNode
+  permission?: string
+  group: string
+}
+
+const navItems: NavItem[] = [
+  { path: '/', name: '仪表盘', icon: <DashboardOutlined />, group: '核心' },
+  { path: '/accounts', name: '账号管理', icon: <TeamOutlined />, permission: 'account:admin', group: '资源管理' },
+  { path: '/model-services', name: '模型服务', icon: <CloudServerOutlined />, permission: 'provider:manage', group: '资源管理' },
+  { path: '/agent-templates', name: 'Agent 模板', icon: <RobotOutlined />, permission: 'model:read', group: '资源管理' },
+  { path: '/api-keys', name: 'API 密钥', icon: <ApiOutlined />, permission: 'provider:manage', group: '资源管理' },
+  { path: '/usage', name: '用量统计', icon: <BarChartOutlined />, permission: 'admin:full', group: '运维' },
+  { path: '/relay', name: '中转任务', icon: <SwapOutlined />, permission: 'relay:use', group: '运维' },
+  { path: '/logs', name: '操作日志', icon: <FileTextOutlined />, permission: 'admin:full', group: '运维' },
+  { path: '/config', name: '系统配置', icon: <SettingOutlined />, permission: 'config:read', group: '系统' },
+  { path: '/prompts', name: '提示词管理', icon: <MessageOutlined />, permission: 'prompt:read', group: '系统' },
 ]

-function filterMenuByPermission(
-  items: MenuDataItem[],
-  hasPermission: (p: string) => boolean,
-): MenuDataItem[] {
-  return items
-    .filter((item) => !item.permission || hasPermission(item.permission as string))
-    .map(({ permission, ...rest }) => ({
-      ...rest,
-      children: rest.children ? filterMenuByPermission(rest.children, hasPermission) : undefined,
-    }))
+// ============================================================
+// Sidebar Component
+// ============================================================
+
+function Sidebar({
+  collapsed,
+  onNavigate,
+  activePath,
+}: {
+  collapsed: boolean
+  onNavigate: (path: string) => void
+  activePath: string
+}) {
+  const { hasPermission } = useAuthStore()
+  const visibleItems = navItems.filter(
+    (item) => !item.permission || hasPermission(item.permission),
+  )
+
+  const groups = useMemo(() => {
+    const map = new Map<string, NavItem[]>()
+    for (const item of visibleItems) {
+      const list = map.get(item.group) || []
+      list.push(item)
+      map.set(item.group, list)
    }
+    return map
+  }, [visibleItems])
+
+  return (
+    <nav className="flex flex-col h-full" aria-label="主导航">
+      {/* Logo */}
+      <div className="flex items-center h-14 px-4 border-b border-neutral-200 dark:border-neutral-800">
+        <div
+          className="flex items-center justify-center w-8 h-8 rounded-lg shrink-0"
+          style={{ background: 'linear-gradient(135deg, #863bff, #47bfff)' }}
+        >
+          <span className="text-white font-bold text-sm">Z</span>
+        </div>
+        {!collapsed && (
+          <span className="ml-3 text-lg font-bold text-neutral-900 dark:text-neutral-100 tracking-tight">
+            ZCLAW
+          </span>
+        )}
+      </div>
+
+      {/* Navigation Items */}
+      <div className="flex-1 overflow-y-auto py-3 px-2">
+        {Array.from(groups.entries()).map(([groupName, items]) => (
+          <div key={groupName} className="mb-3">
+            {!collapsed && (
+              <div className="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-neutral-400 dark:text-neutral-600">
+                {groupName}
+              </div>
+            )}
+            {items.map((item) => {
+              const isActive =
+                item.path === '/'
+                  ? activePath === '/'
+                  : activePath.startsWith(item.path)
+
+              const btn = (
+                <button
+                  key={item.path}
+                  onClick={() => onNavigate(item.path)}
+                  className={`
+                    w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium
+                    transition-all duration-150 ease-in-out cursor-pointer border-none bg-transparent
+                    ${
+                      isActive
+                        ? 'text-brand-purple bg-brand-purple/8 dark:text-brand-purple dark:bg-brand-purple/12'
+                        : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+                    }
+                    ${collapsed ? 'justify-center' : ''}
+                  `}
+                  aria-current={isActive ? 'page' : undefined}
+                >
+                  <span
+                    className={`text-base ${isActive ? 'text-brand-purple' : ''}`}
+                  >
+                    {item.icon}
+                  </span>
+                  {!collapsed && <span>{item.name}</span>}
+                  {isActive && (
+                    <span className="ml-auto w-1.5 h-1.5 rounded-full bg-brand-purple" />
+                  )}
+                </button>
+              )
+
+              return collapsed ? (
+                <Tooltip key={item.path} title={item.name} placement="right">
+                  {btn}
+                </Tooltip>
+              ) : (
+                <div key={item.path}>{btn}</div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+
+      {/* Bottom section */}
+      <div className="border-t border-neutral-200 dark:border-neutral-800 p-3">
+        {!collapsed && (
+          <div className="text-[11px] text-neutral-400 dark:text-neutral-600 text-center">
+            ZCLAW Admin v2
+          </div>
+        )}
+      </div>
+    </nav>
+  )
+}
+
+// ============================================================
+// Mobile Drawer Sidebar
+// ============================================================
+
+function MobileDrawer({
+  open,
+  onClose,
+  onNavigate,
+  activePath,
+}: {
+  open: boolean
+  onClose: () => void
+  onNavigate: (path: string) => void
+  activePath: string
+}) {
+  return (
+    <Drawer
+      placement="left"
+      onClose={onClose}
+      open={open}
+      width={280}
+      styles={{
+        body: { padding: 0 },
+        header: { display: 'none' },
+      }}
+    >
+      <Sidebar collapsed={false} onNavigate={onNavigate} activePath={activePath} />
+    </Drawer>
+  )
+}
+
+// ============================================================
+// Breadcrumb
+// ============================================================
+
+const breadcrumbMap: Record<string, string> = {
+  '/': '仪表盘',
+  '/accounts': '账号管理',
+  '/model-services': '模型服务',
+  '/providers': '模型服务',
+  '/models': '模型服务',
+  '/api-keys': 'API 密钥',
+  '/agent-templates': 'Agent 模板',
+  '/usage': '用量统计',
+  '/relay': '中转任务',
+  '/config': '系统配置',
+  '/prompts': '提示词管理',
+  '/logs': '操作日志',
+}
+
+// ============================================================
+// Main Layout
+// ============================================================

 export default function AdminLayout() {
  const navigate = useNavigate()
  const location = useLocation()
-  const { account, hasPermission, logout } = useAuthStore()
+  const { account, logout } = useAuthStore()
+  const themeState = useThemeStore()
+  const [collapsed, setCollapsed] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)

-  const menuData = filterMenuByPermission(menuConfig, hasPermission)
+  // Responsive detection
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 768px)')
+    setIsMobile(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])

-  const handleLogout = () => {
+  const handleNavigate = useCallback(
+    (path: string) => {
+      navigate(path)
+      setMobileOpen(false)
+    },
+    [navigate],
+  )
+
+  const handleLogout = useCallback(() => {
    logout()
-    message.success('已退出登录')
    navigate('/login', { replace: true })
-  }
+  }, [logout, navigate])
+
+  const toggleTheme = useCallback(() => {
+    setThemeMode(themeState.resolved === 'dark' ? 'light' : 'dark')
+  }, [themeState.resolved])
+
+  const currentPage = breadcrumbMap[location.pathname] || '页面'

  return (
-    <ProLayout
-      title="ZCLAW"
-      logo={<div style={{ width: 28, height: 28, background: '#1677ff', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14 }}>Z</div>}
-      layout="mix"
-      fixSiderbar
-      fixedHeader
-      location={{ pathname: location.pathname }}
-      menuDataRender={() => menuData}
-      menuItemRender={(item, dom) => (
-        <div onClick={() => item.path && navigate(item.path)}>{dom}</div>
+    <div className="flex h-screen overflow-hidden bg-neutral-50 dark:bg-neutral-950">
+      {/* Desktop Sidebar */}
+      {!isMobile && (
+        <aside
+          className={`
+            shrink-0 border-r border-neutral-200 dark:border-neutral-800
+            bg-white dark:bg-neutral-900
+            transition-all duration-200 ease-in-out
+            ${collapsed ? 'w-12' : 'w-64'}
+          `}
+        >
+          <Sidebar
+            collapsed={collapsed}
+            onNavigate={handleNavigate}
+            activePath={location.pathname}
+          />
+        </aside>
      )}
-      avatarProps={{
-        src: undefined,
-        title: account?.display_name || account?.username || 'Admin',
-        size: 'small',
-        render: (_, dom) => (
+
+      {/* Mobile Drawer */}
+      {isMobile && (
+        <MobileDrawer
+          open={mobileOpen}
+          onClose={() => setMobileOpen(false)}
+          onNavigate={handleNavigate}
+          activePath={location.pathname}
+        />
+      )}
+
+      {/* Main Area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Header */}
+        <header className="h-14 shrink-0 flex items-center justify-between px-4 border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+          <div className="flex items-center gap-3">
+            {/* Mobile menu button */}
+            {isMobile && (
+              <button
+                onClick={() => setMobileOpen(true)}
+                className="p-2 rounded-lg text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                aria-label="打开菜单"
+              >
+                <MenuUnfoldOutlined className="text-lg" />
+              </button>
+            )}
+
+            {/* Collapse toggle (desktop) */}
+            {!isMobile && (
+              <button
+                onClick={() => setCollapsed(!collapsed)}
+                className="p-2 rounded-lg text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
+              >
+                {collapsed ? (
+                  <MenuUnfoldOutlined className="text-lg" />
+                ) : (
+                  <MenuFoldOutlined className="text-lg" />
+                )}
+              </button>
+            )}
+
+            {/* Breadcrumb */}
+            <div className="flex items-center gap-2 text-sm">
+              <span className="text-neutral-400 dark:text-neutral-600">ZCLAW</span>
+              <span className="text-neutral-300 dark:text-neutral-700">/</span>
+              <span className="text-neutral-900 dark:text-neutral-100 font-medium">
+                {currentPage}
+              </span>
+            </div>
+          </div>
+
+          {/* Right actions */}
+          <div className="flex items-center gap-2">
+            {/* Theme toggle */}
+            <Tooltip title={themeState.resolved === 'dark' ? '切换亮色' : '切换暗色'}>
+              <button
+                onClick={toggleTheme}
+                className="p-2 rounded-lg text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                aria-label="切换主题"
+              >
+                {themeState.resolved === 'dark' ? (
+                  <SunOutlined className="text-lg" />
+                ) : (
+                  <MoonOutlined className="text-lg" />
+                )}
+              </button>
+            </Tooltip>
+
+            {/* User avatar */}
            <Dropdown
              menu={{
                items: [
@@ -90,14 +351,35 @@ export default function AdminLayout() {
                ],
              }}
            >
-            {dom}
-          </Dropdown>
-        ),
+              <button className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors">
+                <Avatar
+                  size={28}
+                  style={{
+                    background: 'linear-gradient(135deg, #863bff, #47bfff)',
+                    fontSize: 12,
+                    fontWeight: 600,
                  }}
-      suppressSiderWhenMenuEmpty
-      contentStyle={{ padding: 24 }}
+                >
+                  {(account?.display_name || account?.username || 'A')[0].toUpperCase()}
+                </Avatar>
+                {!isMobile && (
+                  <span className="text-sm text-neutral-700 dark:text-neutral-300 font-medium">
+                    {account?.display_name || account?.username || 'Admin'}
+                  </span>
+                )}
+              </button>
+            </Dropdown>
+          </div>
+        </header>
+
+        {/* Content */}
+        <main
+          id="main-content"
+          className="flex-1 overflow-y-auto p-6"
        >
          <Outlet />
-    </ProLayout>
+        </main>
+      </div>
+    </div>
  )
 }
--- a/admin-v2/src/main.tsx
+++ b/admin-v2/src/main.tsx
@@ -1,10 +1,12 @@
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider } from 'react-router-dom'
-import { ConfigProvider, App as AntApp } from 'antd'
+import { ConfigProvider, App as AntApp, theme } from 'antd'
 import zhCN from 'antd/locale/zh_CN'
 import { router } from './router'
 import { ErrorBoundary } from './components/ErrorBoundary'
+import { useThemeStore } from './stores/themeStore'
+import './styles/globals.css'

 const queryClient = new QueryClient({
  defaultOptions: {
@@ -16,14 +18,71 @@ const queryClient = new QueryClient({
  },
 })

-createRoot(document.getElementById('root')!).render(
-  <ErrorBoundary>
-    <ConfigProvider locale={zhCN}>
+function ThemedApp() {
+  const resolved = useThemeStore((s) => s.resolved)
+
+  return (
+    <ConfigProvider
+      locale={zhCN}
+      theme={{
+        token: {
+          colorPrimary: '#863bff',
+          colorBgContainer: resolved === 'dark' ? '#292524' : '#ffffff',
+          colorBgElevated: resolved === 'dark' ? '#1c1917' : '#ffffff',
+          colorBgLayout: resolved === 'dark' ? '#0c0a09' : '#fafaf9',
+          colorBorder: resolved === 'dark' ? '#44403c' : '#e7e5e4',
+          colorBorderSecondary: resolved === 'dark' ? '#44403c' : '#f5f5f4',
+          colorText: resolved === 'dark' ? '#fafaf9' : '#1c1917',
+          colorTextSecondary: resolved === 'dark' ? '#a8a29e' : '#78716c',
+          colorTextTertiary: resolved === 'dark' ? '#78716c' : '#a8a29e',
+          borderRadius: 8,
+          borderRadiusLG: 12,
+          fontFamily:
+            '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          fontSize: 14,
+          controlHeight: 36,
+        },
+        algorithm: resolved === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
+        components: {
+          Card: {
+            borderRadiusLG: 12,
+          },
+          Table: {
+            borderRadiusLG: 12,
+            headerBg: resolved === 'dark' ? '#1c1917' : '#fafaf9',
+            headerColor: resolved === 'dark' ? '#a8a29e' : '#78716c',
+            rowHoverBg: resolved === 'dark' ? 'rgba(134,59,255,0.06)' : 'rgba(134,59,255,0.04)',
+          },
+          Button: {
+            borderRadius: 8,
+            controlHeight: 36,
+          },
+          Input: {
+            borderRadius: 8,
+          },
+          Select: {
+            borderRadius: 8,
+          },
+          Modal: {
+            borderRadiusLG: 12,
+          },
+          Tag: {
+            borderRadiusSM: 9999,
+          },
+        },
+      }}
+    >
      <AntApp>
        <QueryClientProvider client={queryClient}>
          <RouterProvider router={router} />
        </QueryClientProvider>
      </AntApp>
    </ConfigProvider>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(
+  <ErrorBoundary>
+    <ThemedApp />
  </ErrorBoundary>,
 )
--- a/admin-v2/src/pages/Accounts.tsx
+++ b/admin-v2/src/pages/Accounts.tsx
@@ -5,10 +5,10 @@
 import { useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Button, message, Tag, Modal, Form, Input, Select, Popconfirm, Space } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
 import { accountService } from '@/services/accounts'
+import { PageHeader } from '@/components/PageHeader'
 import type { AccountPublic } from '@/types'

 const roleLabels: Record<string, string> = {
@@ -116,7 +116,10 @@ export default function Accounts() {
      hideInSearch: true,
      render: (_, record) => (
        <Space>
-          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
+          <Button
+            size="small"
+            onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}
+          >
            编辑
          </Button>
          {record.status === 'active' ? (
@@ -142,6 +145,8 @@ export default function Accounts() {

  return (
    <div>
+      <PageHeader title="账号管理" description="管理系统用户账号、角色与权限" />
+
      <ProTable<AccountPublic>
        columns={columns}
        dataSource={data?.items ?? []}
@@ -158,13 +163,13 @@ export default function Accounts() {
      />

      <Modal
-        title="编辑账号"
+        title={<span className="text-base font-semibold">编辑账号</span>}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
        confirmLoading={updateMutation.isPending}
      >
-        <Form form={form} layout="vertical">
+        <Form form={form} layout="vertical" className="mt-4">
          <Form.Item name="display_name" label="显示名">
            <Input />
          </Form.Item>
--- a/admin-v2/src/pages/AgentTemplates.tsx
+++ b/admin-v2/src/pages/AgentTemplates.tsx
@@ -4,8 +4,8 @@

 import { useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, Select, InputNumber, Space, Popconfirm, Descriptions, MinusCircleOutlined } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
+import { Button, message, Tag, Modal, Form, Input, Select, InputNumber, Space, Popconfirm, Descriptions } from 'antd'
+import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
 import { agentTemplateService } from '@/services/agent-templates'
--- a/admin-v2/src/pages/ApiKeys.tsx
+++ b/admin-v2/src/pages/ApiKeys.tsx
@@ -1,165 +0,0 @@
-// ============================================================
-// API 密钥管理
-// ============================================================
-
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, InputNumber, Select, Popconfirm, Space, Typography } from 'antd'
-import { PlusOutlined, CopyOutlined } from '@ant-design/icons'
-import type { ProColumns } from '@ant-design/pro-components'
-import { ProTable } from '@ant-design/pro-components'
-import { apiKeyService } from '@/services/api-keys'
-import type { TokenInfo } from '@/types'
-
-const { Text } = Typography
-
-export default function ApiKeys() {
-  const queryClient = useQueryClient()
-  const [form] = Form.useForm()
-  const [modalOpen, setModalOpen] = useState(false)
-  const [newToken, setNewToken] = useState<string | null>(null)
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['api-keys'],
-    queryFn: ({ signal }) => apiKeyService.list(signal),
-  })
-
-  const createMutation = useMutation({
-    mutationFn: (data: { name: string; expires_days?: number; permissions: string[] }) =>
-      apiKeyService.create(data),
-    onSuccess: (result: TokenInfo) => {
-      message.success('创建成功')
-      queryClient.invalidateQueries({ queryKey: ['api-keys'] })
-      if (result.token) {
-        setNewToken(result.token)
-      }
-      setModalOpen(false)
-      form.resetFields()
-    },
-    onError: (err: Error) => message.error(err.message || '创建失败'),
-  })
-
-  const revokeMutation = useMutation({
-    mutationFn: (id: string) => apiKeyService.revoke(id),
-    onSuccess: () => {
-      message.success('已撤销')
-      queryClient.invalidateQueries({ queryKey: ['api-keys'] })
-    },
-    onError: (err: Error) => message.error(err.message || '撤销失败'),
-  })
-
-  const columns: ProColumns<TokenInfo>[] = [
-    { title: '名称', dataIndex: 'name', width: 160 },
-    { title: '前缀', dataIndex: 'token_prefix', width: 120, render: (_, r) => <Text code>{r.token_prefix}...</Text> },
-    {
-      title: '权限',
-      dataIndex: 'permissions',
-      width: 200,
-      render: (_, r) => r.permissions?.map((p) => <Tag key={p}>{p}</Tag>),
-    },
-    {
-      title: '过期时间',
-      dataIndex: 'expires_at',
-      width: 180,
-      render: (_, r) => r.expires_at ? new Date(r.expires_at).toLocaleString('zh-CN') : '永不过期',
-    },
-    {
-      title: '最后使用',
-      dataIndex: 'last_used_at',
-      width: 180,
-      render: (_, r) => r.last_used_at ? new Date(r.last_used_at).toLocaleString('zh-CN') : '-',
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'created_at',
-      width: 180,
-      render: (_, r) => new Date(r.created_at).toLocaleString('zh-CN'),
-    },
-    {
-      title: '操作',
-      width: 100,
-      render: (_, record) => (
-        <Popconfirm title="确定撤销此密钥？撤销后无法恢复。" onConfirm={() => revokeMutation.mutate(record.id)}>
-          <Button size="small" danger>撤销</Button>
-        </Popconfirm>
-      ),
-    },
-  ]
-
-  const handleCreate = async () => {
-    const values = await form.validateFields()
-    createMutation.mutate(values)
-  }
-
-  const copyToken = () => {
-    if (newToken) {
-      navigator.clipboard.writeText(newToken)
-      message.success('已复制到剪贴板')
-    }
-  }
-
-  return (
-    <div>
-      <ProTable<TokenInfo>
-        columns={columns}
-        dataSource={data?.items ?? []}
-        loading={isLoading}
-        rowKey="id"
-        search={false}
-        toolBarRender={() => [
-          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { form.resetFields(); setModalOpen(true) }}>
-            创建密钥
-          </Button>,
-        ]}
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: data?.page_size ?? 20,
-          current: data?.page ?? 1,
-          showSizeChanger: false,
-        }}
-      />
-
-      <Modal
-        title="创建 API 密钥"
-        open={modalOpen}
-        onOk={handleCreate}
-        onCancel={() => { setModalOpen(false); form.resetFields() }}
-        confirmLoading={createMutation.isPending}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
-            <Input placeholder="给密钥起个名字" />
-          </Form.Item>
-          <Form.Item name="expires_days" label="有效期 (天)">
-            <InputNumber min={1} placeholder="留空则永不过期" style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="permissions" label="权限" rules={[{ required: true }]}>
-            <Select mode="multiple" placeholder="选择权限" options={[
-              { value: 'relay:use', label: '中转使用' },
-              { value: 'model:read', label: '模型读取' },
-              { value: 'config:read', label: '配置读取' },
-            ]} />
-          </Form.Item>
-        </Form>
-      </Modal>
-
-      <Modal
-        title="密钥创建成功"
-        open={!!newToken}
-        onOk={() => setNewToken(null)}
-        onCancel={() => setNewToken(null)}
-      >
-        <p>请立即保存此密钥，关闭后将无法再次查看：</p>
-        <Input.TextArea
-          value={newToken || ''}
-          rows={3}
-          readOnly
-          addonAfter={<CopyOutlined onClick={copyToken} style={{ cursor: 'pointer' }} />}
-        />
-        <Button type="primary" icon={<CopyOutlined />} onClick={copyToken} style={{ marginTop: 8 }}>
-          复制密钥
-        </Button>
-      </Modal>
-    </div>
-  )
-}
--- a/admin-v2/src/pages/Dashboard.tsx
+++ b/admin-v2/src/pages/Dashboard.tsx
@@ -3,7 +3,7 @@
 // ============================================================

 import { useQuery } from '@tanstack/react-query'
-import { Card, Col, Row, Statistic, Table, Tag, Typography, Spin, Alert } from 'antd'
+import { Card, Col, Row, Statistic, Table, Tag, Spin } from 'antd'
 import {
  TeamOutlined,
  CloudServerOutlined,
@@ -13,34 +13,18 @@ import {
 } from '@ant-design/icons'
 import { statsService } from '@/services/stats'
 import { logService } from '@/services/logs'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorState } from '@/components/ErrorState'
+import { actionLabels, actionColors } from '@/constants/status'
 import type { OperationLog } from '@/types'

-const { Title } = Typography
-
-const actionLabels: Record<string, string> = {
-  login: '登录', logout: '登出',
-  create_account: '创建账号', update_account: '更新账号', delete_account: '删除账号',
-  create_provider: '创建服务商', update_provider: '更新服务商', delete_provider: '删除服务商',
-  create_model: '创建模型', update_model: '更新模型', delete_model: '删除模型',
-  create_token: '创建密钥', revoke_token: '撤销密钥',
-  update_config: '更新配置',
-  create_prompt: '创建提示词', update_prompt: '更新提示词', archive_prompt: '归档提示词',
-  desktop_audit: '桌面端审计',
-}
-
-const actionColors: Record<string, string> = {
-  login: 'green', logout: 'default',
-  create_account: 'blue', update_account: 'orange', delete_account: 'red',
-  create_provider: 'blue', update_provider: 'orange', delete_provider: 'red',
-  create_model: 'blue', update_model: 'orange', delete_model: 'red',
-  create_token: 'blue', revoke_token: 'red',
-  update_config: 'orange',
-  create_prompt: 'blue', update_prompt: 'orange', archive_prompt: 'red',
-  desktop_audit: 'default',
-}
-
 export default function Dashboard() {
-  const { data: stats, isLoading: statsLoading, error: statsError } = useQuery({
+  const {
+    data: stats,
+    isLoading: statsLoading,
+    error: statsError,
+    refetch: refetchStats,
+  } = useQuery({
    queryKey: ['dashboard-stats'],
    queryFn: ({ signal }) => statsService.dashboard(signal),
  })
@@ -51,15 +35,28 @@ export default function Dashboard() {
  })

  if (statsError) {
-    return <Alert type="error" message="加载仪表盘数据失败" description={(statsError as Error).message} showIcon />
+    return (
+      <>
+        <PageHeader title="仪表盘" description="系统概览与最近活动" />
+        <ErrorState
+          message={(statsError as Error).message}
+          onRetry={() => refetchStats()}
+        />
+      </>
+    )
  }

  const statCards = [
-    { title: '总账号', value: stats?.total_accounts ?? 0, icon: <TeamOutlined />, color: '#1677ff' },
-    { title: '活跃服务商', value: stats?.active_providers ?? 0, icon: <CloudServerOutlined />, color: '#52c41a' },
-    { title: '活跃模型', value: stats?.active_models ?? 0, icon: <ApiOutlined />, color: '#722ed1' },
-    { title: '今日请求', value: stats?.tasks_today ?? 0, icon: <ThunderboltOutlined />, color: '#fa8c16' },
-    { title: '今日 Token', value: ((stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0)), icon: <ColumnWidthOutlined />, color: '#eb2f96' },
+    { title: '总账号', value: stats?.total_accounts ?? 0, icon: <TeamOutlined />, color: '#863bff' },
+    { title: '活跃服务商', value: stats?.active_providers ?? 0, icon: <CloudServerOutlined />, color: '#47bfff' },
+    { title: '活跃模型', value: stats?.active_models ?? 0, icon: <ApiOutlined />, color: '#22c55e' },
+    { title: '今日请求', value: stats?.tasks_today ?? 0, icon: <ThunderboltOutlined />, color: '#f59e0b' },
+    {
+      title: '今日 Token',
+      value: (stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0),
+      icon: <ColumnWidthOutlined />,
+      color: '#ef4444',
+    },
  ]

  const logColumns = [
@@ -74,7 +71,13 @@ export default function Dashboard() {
        </Tag>
      ),
    },
-    { title: '目标类型', dataIndex: 'target_type', key: 'target_type', width: 100, render: (v: string | null) => v || '-' },
+    {
+      title: '目标类型',
+      dataIndex: 'target_type',
+      key: 'target_type',
+      width: 100,
+      render: (v: string | null) => v || '-',
+    },
    {
      title: '时间',
      dataIndex: 'created_at',
@@ -86,19 +89,34 @@ export default function Dashboard() {

  return (
    <div>
-      <Title level={4} style={{ marginBottom: 24 }}>仪表盘</Title>
+      <PageHeader title="仪表盘" description="系统概览与最近活动" />

-      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
+      {/* Stat Cards */}
+      <Row gutter={[16, 16]} className="mb-6">
        {statsLoading ? (
-          <Col span={24}><Spin /></Col>
+          <Col span={24}>
+            <div className="flex justify-center py-8">
+              <Spin size="large" />
+            </div>
+          </Col>
        ) : (
          statCards.map((card) => (
            <Col xs={24} sm={12} md={8} lg={4} key={card.title}>
-              <Card>
+              <Card
+                className="hover:shadow-md transition-shadow duration-200"
+                styles={{ body: { padding: '20px 24px' } }}
+              >
                <Statistic
-                  title={card.title}
+                  title={
+                    <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                      {card.title}
+                    </span>
+                  }
                  value={card.value}
-                  prefix={<span style={{ color: card.color }}>{card.icon}</span>}
+                  valueStyle={{ fontSize: 28, fontWeight: 600, color: card.color }}
+                  prefix={
+                    <span style={{ color: card.color, marginRight: 4 }}>{card.icon}</span>
+                  }
                />
              </Card>
            </Col>
@@ -106,7 +124,16 @@ export default function Dashboard() {
        )}
      </Row>

-      <Card title="最近操作日志" size="small">
+      {/* Recent Logs */}
+      <Card
+        title={
+          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            最近操作日志
+          </span>
+        }
+        size="small"
+        styles={{ body: { padding: 0 } }}
+      >
        <Table<OperationLog>
          columns={logColumns}
          dataSource={logsData?.items ?? []}
--- a/admin-v2/src/pages/Login.tsx
+++ b/admin-v2/src/pages/Login.tsx
@@ -6,13 +6,11 @@ import { useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { LoginForm, ProFormText } from '@ant-design/pro-components'
 import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons'
-import { message, Divider, Typography } from 'antd'
+import { message } from 'antd'
 import { authService } from '@/services/auth'
 import { useAuthStore } from '@/stores/authStore'
 import type { LoginRequest } from '@/types'

-const { Title, Text } = Typography
-
 export default function Login() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
@@ -50,51 +48,75 @@ export default function Login() {
  }

  return (
-    <div style={{ minHeight: '100vh', display: 'flex' }}>
-      {/* 左侧品牌区 */}
-      <div
-        style={{
-          flex: '1 1 0',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: 'linear-gradient(135deg, #001529 0%, #003a70 50%, #001529 100%)',
-          position: 'relative',
-          overflow: 'hidden',
-        }}
+    <div className="min-h-screen flex">
+      {/* Left Brand Panel — hidden on mobile */}
+      <div className="hidden md:flex flex-1 flex-col items-center justify-center relative overflow-hidden"
+        style={{ background: 'linear-gradient(135deg, #0c0a09 0%, #1c1917 40%, #292524 100%)' }}
      >
-        <Title level={1} style={{ color: '#fff', marginBottom: 8, letterSpacing: 4 }}>
-          ZCLAW
-        </Title>
-        <Text style={{ color: 'rgba(255,255,255,0.65)', fontSize: 16 }}>AI Agent 管理平台</Text>
-        <Divider style={{ borderColor: 'rgba(22,119,255,0.3)', width: 100, minWidth: 100 }} />
-        <Text style={{ color: 'rgba(255,255,255,0.45)', fontSize: 13, maxWidth: 320, textAlign: 'center' }}>
+        {/* Decorative gradient orb */}
+        <div
+          className="absolute w-[400px] h-[400px] rounded-full opacity-20 blur-3xl"
+          style={{ background: 'linear-gradient(135deg, #863bff, #47bfff)', top: '20%', left: '10%' }}
+        />
+        <div
+          className="absolute w-[300px] h-[300px] rounded-full opacity-10 blur-3xl"
+          style={{ background: 'linear-gradient(135deg, #47bfff, #863bff)', bottom: '10%', right: '15%' }}
+        />
+
+        {/* Brand content */}
+        <div className="relative z-10 text-center px-8">
+          <div
+            className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6"
+            style={{ background: 'linear-gradient(135deg, #863bff, #47bfff)' }}
+          >
+            <span className="text-white text-2xl font-bold">Z</span>
+          </div>
+          <h1 className="text-4xl font-bold text-white mb-3 tracking-tight">ZCLAW</h1>
+          <p className="text-white/50 text-base mb-8">AI Agent 管理平台</p>
+          <div className="w-16 h-px mx-auto mb-8" style={{ background: 'linear-gradient(90deg, transparent, #863bff, #47bfff, transparent)' }} />
+          <p className="text-white/30 text-sm max-w-sm mx-auto leading-relaxed">
            统一管理 AI 服务商、模型配置、API 密钥、用量监控与系统配置
-        </Text>
+          </p>
+        </div>
      </div>

-      {/* 右侧登录表单 */}
+      {/* Right Login Form */}
+      <div className="flex-1 md:flex-none md:w-[480px] flex items-center justify-center p-8 bg-white dark:bg-neutral-950">
+        <div className="w-full max-w-[360px]">
+          {/* Mobile logo (visible only on mobile) */}
+          <div className="md:hidden flex items-center gap-3 mb-10">
            <div
-        style={{
-          flex: '0 0 480px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: 48,
-        }}
+              className="flex items-center justify-center w-10 h-10 rounded-xl"
+              style={{ background: 'linear-gradient(135deg, #863bff, #47bfff)' }}
            >
-        <div style={{ width: '100%', maxWidth: 360 }}>
-          <Title level={3} style={{ marginBottom: 4 }}>登录</Title>
-          <Text type="secondary" style={{ display: 'block', marginBottom: 32 }}>
+              <span className="text-white font-bold">Z</span>
+            </div>
+            <span className="text-xl font-bold text-neutral-900 dark:text-white">ZCLAW</span>
+          </div>
+
+          <h2 className="text-2xl font-semibold text-neutral-900 dark:text-white mb-1">
+            登录
+          </h2>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-8">
            输入您的账号信息以继续
-          </Text>
+          </p>

          <LoginForm
            onFinish={handleSubmit}
            submitter={{
              searchConfig: { submitText: '登录' },
-              submitButtonProps: { loading, block: true },
+              submitButtonProps: {
+                loading,
+                block: true,
+                style: {
+                  height: 44,
+                  borderRadius: 8,
+                  fontWeight: 500,
+                  fontSize: 15,
+                  background: 'linear-gradient(135deg, #863bff, #47bfff)',
+                  border: 'none',
+                },
+              },
            }}
          >
            <ProFormText
--- a/admin-v2/src/pages/ModelServices.tsx
+++ b/admin-v2/src/pages/ModelServices.tsx
@@ -0,0 +1,427 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Space, Popconfirm, Tabs, Table, Typography } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import type { ProColumns } from '@ant-design/pro-components'
+import { ProTable } from '@ant-design/pro-components'
+import { providerService } from '@/services/providers'
+import { modelService } from '@/services/models'
+import type { Provider, ProviderKey, Model } from '@/types'
+
+const { Text } = Typography
+
+// ============================================================
+// 子组件: 模型表格
+// ============================================================
+function ProviderModelsTable({ providerId }: { providerId: string }) {
+  const queryClient = useQueryClient()
+  const [form] = Form.useForm()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['provider-models', providerId],
+    queryFn: ({ signal }) => modelService.list({ provider_id: providerId! }, signal),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (data: Partial<Omit<Model, 'id'>>) => modelService.create(data),
+    onSuccess: () => {
+      message.success('模型已创建')
+      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
+      setModalOpen(false)
+      form.resetFields()
+    },
+    onError: (err: Error) => message.error(err.message || '创建失败'),
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Model, 'id'>> }) =>
+      modelService.update(id, data),
+    onSuccess: () => {
+      message.success('模型已更新')
+      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
+      setModalOpen(false)
+    },
+    onError: (err: Error) => message.error(err.message || '更新失败'),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => modelService.delete(id),
+    onSuccess: () => {
+      message.success('模型已删除')
+      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
+    },
+    onError: (err: Error) => message.error(err.message || '删除失败'),
+  })
+
+  const handleSave = async () => {
+    const values = await form.validateFields()
+    if (editingId) {
+      updateMutation.mutate({ id: editingId, data: values })
+    } else {
+      createMutation.mutate({ ...values, provider_id: providerId })
+    }
+  }
+
+  const columns: ProColumns<Model>[] = [
+    { title: '模型 ID', dataIndex: 'model_id', width: 180, render: (_, r) => <Text code>{r.model_id}</Text> },
+    { title: '别名', dataIndex: 'alias', width: 120 },
+    { title: '上下文窗口', dataIndex: 'context_window', width: 100, render: (_, r) => r.context_window?.toLocaleString() },
+    { title: '最大输出', dataIndex: 'max_output_tokens', width: 90, render: (_, r) => r.max_output_tokens?.toLocaleString() },
+    { title: '流式', dataIndex: 'supports_streaming', width: 60, render: (_, r) => r.supports_streaming ? <Tag color="green">是</Tag> : <Tag>否</Tag> },
+    { title: '视觉', dataIndex: 'supports_vision', width: 60, render: (_, r) => r.supports_vision ? <Tag color="blue">是</Tag> : <Tag>否</Tag> },
+    { title: '状态', dataIndex: 'enabled', width: 60, render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag> },
+    {
+      title: '操作', width: 120, render: (_, record) => (
+        <Space>
+          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>编辑</Button>
+          <Popconfirm title="确定删除此模型?" onConfirm={() => deleteMutation.mutate(record.id)}>
+            <Button size="small" danger>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  const models = data?.items ?? []
+
+  return (
+    <div>
+      <div style={{ marginBottom: 8 }}>
+        <Button size="small" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
+          添加模型
+        </Button>
+      </div>
+      <Table<Model>
+        columns={columns}
+        dataSource={models}
+        loading={isLoading}
+        rowKey="id"
+        size="small"
+        pagination={false}
+      />
+      <Modal
+        title={editingId ? '编辑模型' : '添加模型'}
+        open={modalOpen}
+        onOk={handleSave}
+        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
+        confirmLoading={createMutation.isPending || updateMutation.isPending}
+        width={560}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item name="model_id" label="模型 ID" rules={[{ required: true }]}>
+            <Input placeholder="如 gpt-4o" />
+          </Form.Item>
+          <Form.Item name="alias" label="别名">
+            <Input placeholder="可选" />
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="context_window" label="上下文窗口" style={{ flex: 1 }}>
+              <InputNumber min={0} placeholder="128000" style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="max_output_tokens" label="最大输出 Token" style={{ flex: 1 }}>
+              <InputNumber min={0} placeholder="4096" style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="enabled" label="启用" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch />
+            </Form.Item>
+            <Form.Item name="supports_streaming" label="支持流式" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch defaultChecked />
+            </Form.Item>
+            <Form.Item name="supports_vision" label="支持视觉" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch />
+            </Form.Item>
+          </div>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="pricing_input" label="输入价格 (每百万Token)" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.01} placeholder="0" style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="pricing_output" label="输出价格 (每百万Token)" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.01} placeholder="0" style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+// ============================================================
+// 子组件: Key Pool 表格
+// ============================================================
+function ProviderKeysTable({ providerId }: { providerId: string }) {
+  const queryClient = useQueryClient()
+  const [addKeyForm] = Form.useForm()
+  const [addKeyOpen, setAddKeyOpen] = useState(false)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['provider-keys', providerId],
+    queryFn: ({ signal }) => providerService.listKeys(providerId!, signal),
+  })
+
+  const addKeyMutation = useMutation({
+    mutationFn: (data: { key_label: string; key_value: string; priority?: number; max_rpm?: number; max_tpm?: number }) =>
+      providerService.addKey(providerId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
+      message.success('密钥已添加')
+      setAddKeyOpen(false)
+      addKeyForm.resetFields()
+    },
+    onError: () => message.error('添加失败'),
+  })
+
+  const toggleKeyMutation = useMutation({
+    mutationFn: ({ keyId, active }: { keyId: string; active: boolean }) =>
+      providerService.toggleKey(providerId, keyId, active),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
+      message.success('状态已切换')
+    },
+    onError: () => message.error('切换失败'),
+  })
+
+  const deleteKeyMutation = useMutation({
+    mutationFn: (keyId: string) => providerService.deleteKey(providerId, keyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
+      message.success('密钥已删除')
+    },
+    onError: () => message.error('删除失败'),
+  })
+
+  const keyColumns: ProColumns<ProviderKey>[] = [
+    { title: '标签', dataIndex: 'key_label', width: 120 },
+    { title: '优先级', dataIndex: 'priority', width: 70 },
+    { title: '请求数', dataIndex: 'total_requests', width: 80 },
+    { title: 'Token 数', dataIndex: 'total_tokens', width: 90 },
+    {
+      title: '状态', dataIndex: 'is_active', width: 70,
+      render: (_, r) => r.is_active ? <Tag color="green">活跃</Tag> : <Tag color="orange">冷却</Tag>,
+    },
+    {
+      title: '操作', width: 120,
+      render: (_, record) => (
+        <Space>
+          <Popconfirm
+            title={record.is_active ? '确定禁用此密钥?' : '确定启用此密钥?'}
+            onConfirm={() => toggleKeyMutation.mutate({ keyId: record.id, active: !record.is_active })}
+          >
+            <Button size="small" type={record.is_active ? 'default' : 'primary'}>
+              {record.is_active ? '禁用' : '启用'}
+            </Button>
+          </Popconfirm>
+          <Popconfirm title="确定删除此密钥?此操作不可恢复。" onConfirm={() => deleteKeyMutation.mutate(record.id)}>
+            <Button size="small" danger>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  const keys = data ?? []
+
+  return (
+    <div>
+      <div style={{ marginBottom: 8 }}>
+        <Button size="small" type="primary" icon={<PlusOutlined />} onClick={() => { addKeyForm.resetFields(); setAddKeyOpen(true) }}>
+          添加密钥
+        </Button>
+      </div>
+      <Table<ProviderKey>
+        columns={keyColumns}
+        dataSource={keys}
+        loading={isLoading}
+        rowKey="id"
+        size="small"
+        pagination={false}
+      />
+      <Modal
+        title="添加密钥"
+        open={addKeyOpen}
+        onOk={() => {
+          addKeyForm.validateFields().then((v) => addKeyMutation.mutate(v))
+        }}
+        onCancel={() => setAddKeyOpen(false)}
+        confirmLoading={addKeyMutation.isPending}
+      >
+        <Form form={addKeyForm} layout="vertical">
+          <Form.Item name="key_label" label="标签" rules={[{ required: true }]}>
+            <Input placeholder="如: my-openai-key" />
+          </Form.Item>
+          <Form.Item name="key_value" label="API Key" rules={[{ required: true }]}>
+            <Input.Password placeholder="sk-..." />
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="priority" label="优先级" initialValue={0} style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="max_rpm" label="最大 RPM" style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="max_tpm" label="最大 TPM" style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+// ============================================================
+// 主页面: 模型服务
+// ============================================================
+export default function ModelServices() {
+  const queryClient = useQueryClient()
+  const [form] = Form.useForm()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['providers'],
+    queryFn: ({ signal }) => providerService.list(signal),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
+      providerService.create(data),
+    onSuccess: () => {
+      message.success('服务商已创建')
+      queryClient.invalidateQueries({ queryKey: ['providers'] })
+      setModalOpen(false)
+      form.resetFields()
+    },
+    onError: (err: Error) => message.error(err.message || '创建失败'),
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>> }) =>
+      providerService.update(id, data),
+    onSuccess: () => {
+      message.success('服务商已更新')
+      queryClient.invalidateQueries({ queryKey: ['providers'] })
+      setModalOpen(false)
+    },
+    onError: (err: Error) => message.error(err.message || '更新失败'),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => providerService.delete(id),
+    onSuccess: () => {
+      message.success('服务商已删除')
+      queryClient.invalidateQueries({ queryKey: ['providers'] })
+    },
+    onError: (err: Error) => message.error(err.message || '删除失败'),
+  })
+
+  const handleSave = async () => {
+    const values = await form.validateFields()
+    if (editingId) {
+      updateMutation.mutate({ id: editingId, data: values })
+    } else {
+      createMutation.mutate(values)
+    }
+  }
+
+  const columns: ProColumns<Provider>[] = [
+    { title: '名称', dataIndex: 'display_name', width: 150 },
+    { title: '标识', dataIndex: 'name', width: 120, render: (_, r) => <Text code>{r.name}</Text> },
+    { title: 'Base URL', dataIndex: 'base_url', width: 260, ellipsis: true },
+    { title: '协议', dataIndex: 'api_protocol', width: 90, hideInSearch: true },
+    { title: 'RPM', dataIndex: 'rate_limit_rpm', width: 80, hideInSearch: true, render: (_, r) => r.rate_limit_rpm ?? '-' },
+    {
+      title: '状态', dataIndex: 'enabled', width: 70, hideInSearch: true,
+      render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
+    },
+    {
+      title: '操作', width: 140, hideInSearch: true,
+      render: (_, record) => (
+        <Space>
+          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>编辑</Button>
+          <Popconfirm title="确定删除此服务商?" onConfirm={() => deleteMutation.mutate(record.id)}>
+            <Button size="small" danger>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <ProTable<Provider>
+        columns={columns}
+        dataSource={data?.items ?? []}
+        loading={isLoading}
+        rowKey="id"
+        search={{}}
+        toolBarRender={() => [
+          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
+            新建服务商
+          </Button>,
+        ]}
+        pagination={{
+          total: data?.total ?? 0,
+          pageSize: data?.page_size ?? 20,
+          current: data?.page ?? 1,
+          showSizeChanger: false,
+        }}
+        expandable={{
+          expandedRowRender: (record) => (
+            <Tabs
+              size="small"
+              style={{ marginTop: 8 }}
+              items={[
+                {
+                  key: 'models',
+                  label: `模型`,
+                  children: <ProviderModelsTable providerId={record.id} />,
+                },
+                {
+                  key: 'keys',
+                  label: 'Key Pool',
+                  children: <ProviderKeysTable providerId={record.id} />,
+                },
+              ]}
+            />
+          ),
+        }}
+      />
+
+      <Modal
+        title={editingId? '编辑服务商' : '新建服务商'}
+        open={modalOpen}
+        onOk={handleSave}
+        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
+        confirmLoading={createMutation.isPending || updateMutation.isPending}
+        width={560}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item name="name" label="标识" rules={[{ required: true }]}>
+            <Input disabled={!!editingId} placeholder="如 openai, anthropic" />
+          </Form.Item>
+          <Form.Item name="display_name" label="显示名称" rules={[{ required: true }]}>
+            <Input placeholder="如 OpenAI" />
+          </Form.Item>
+          <Form.Item name="base_url" label="Base URL" rules={[{ required: true }]}>
+            <Input placeholder="https://api.openai.com/v1" />
+          </Form.Item>
+          <Form.Item name="api_protocol" label="API 协议">
+            <Input placeholder="openai" />
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="enabled" label="启用" valuePropName="checked" style={{ flex: 1 }}>
+              <Switch />
+            </Form.Item>
+            <Form.Item name="rate_limit_rpm" label="RPM 限制" style={{ flex: 1 }}>
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
--- a/admin-v2/src/pages/Models.tsx
+++ b/admin-v2/src/pages/Models.tsx
@@ -1,191 +0,0 @@
-// ============================================================
-// 模型管理
-// ============================================================
-
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Select, Space, Popconfirm } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
-import type { ProColumns } from '@ant-design/pro-components'
-import { ProTable } from '@ant-design/pro-components'
-import { modelService } from '@/services/models'
-import { providerService } from '@/services/providers'
-import type { Model } from '@/types'
-
-export default function Models() {
-  const queryClient = useQueryClient()
-  const [form] = Form.useForm()
-  const [modalOpen, setModalOpen] = useState(false)
-  const [editingId, setEditingId] = useState<string | null>(null)
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['models'],
-    queryFn: ({ signal }) => modelService.list(signal),
-  })
-
-  const { data: providersData } = useQuery({
-    queryKey: ['providers-for-select'],
-    queryFn: ({ signal }) => providerService.list(signal),
-  })
-
-  const createMutation = useMutation({
-    mutationFn: (data: Partial<Omit<Model, 'id'>>) => modelService.create(data),
-    onSuccess: () => {
-      message.success('创建成功')
-      queryClient.invalidateQueries({ queryKey: ['models'] })
-      setModalOpen(false)
-      form.resetFields()
-    },
-    onError: (err: Error) => message.error(err.message || '创建失败'),
-  })
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Model, 'id'>> }) =>
-      modelService.update(id, data),
-    onSuccess: () => {
-      message.success('更新成功')
-      queryClient.invalidateQueries({ queryKey: ['models'] })
-      setModalOpen(false)
-    },
-    onError: (err: Error) => message.error(err.message || '更新失败'),
-  })
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => modelService.delete(id),
-    onSuccess: () => {
-      message.success('删除成功')
-      queryClient.invalidateQueries({ queryKey: ['models'] })
-    },
-    onError: (err: Error) => message.error(err.message || '删除失败'),
-  })
-
-  const columns: ProColumns<Model>[] = [
-    { title: '模型 ID', dataIndex: 'model_id', width: 180, render: (_, r) => <code>{r.model_id}</code> },
-    { title: '别名', dataIndex: 'alias', width: 140 },
-    {
-      title: '服务商',
-      dataIndex: 'provider_id',
-      width: 140,
-      hideInSearch: true,
-      render: (_, r) => {
-        const provider = providersData?.items?.find((p) => p.id === r.provider_id)
-        return provider?.display_name || r.provider_id.substring(0, 8)
-      },
-    },
-    { title: '上下文窗口', dataIndex: 'context_window', width: 110, hideInSearch: true, render: (_, r) => r.context_window?.toLocaleString() },
-    { title: '最大输出', dataIndex: 'max_output_tokens', width: 100, hideInSearch: true, render: (_, r) => r.max_output_tokens?.toLocaleString() },
-    {
-      title: '流式',
-      dataIndex: 'supports_streaming',
-      width: 70,
-      hideInSearch: true,
-      render: (_, r) => r.supports_streaming ? <Tag color="green">是</Tag> : <Tag>否</Tag>,
-    },
-    {
-      title: '视觉',
-      dataIndex: 'supports_vision',
-      width: 70,
-      hideInSearch: true,
-      render: (_, r) => r.supports_vision ? <Tag color="blue">是</Tag> : <Tag>否</Tag>,
-    },
-    {
-      title: '状态',
-      dataIndex: 'enabled',
-      width: 70,
-      hideInSearch: true,
-      render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
-    },
-    {
-      title: '操作',
-      width: 160,
-      hideInSearch: true,
-      render: (_, record) => (
-        <Space>
-          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
-            编辑
-          </Button>
-          <Popconfirm title="确定删除此模型？" onConfirm={() => deleteMutation.mutate(record.id)}>
-            <Button size="small" danger>删除</Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ]
-
-  const handleSave = async () => {
-    const values = await form.validateFields()
-    if (editingId) {
-      updateMutation.mutate({ id: editingId, data: values })
-    } else {
-      createMutation.mutate(values)
-    }
-  }
-
-  return (
-    <div>
-      <ProTable<Model>
-        columns={columns}
-        dataSource={data?.items ?? []}
-        loading={isLoading}
-        rowKey="id"
-        search={{}}
-        toolBarRender={() => [
-          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
-            新建模型
-          </Button>,
-        ]}
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: data?.page_size ?? 20,
-          current: data?.page ?? 1,
-          showSizeChanger: false,
-        }}
-      />
-
-      <Modal
-        title={editingId ? '编辑模型' : '新建模型'}
-        open={modalOpen}
-        onOk={handleSave}
-        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
-        confirmLoading={createMutation.isPending || updateMutation.isPending}
-        width={600}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item name="provider_id" label="服务商" rules={[{ required: true }]}>
-            <Select
-              options={(providersData?.items ?? []).map((p) => ({ value: p.id, label: p.display_name }))}
-              placeholder="选择服务商"
-            />
-          </Form.Item>
-          <Form.Item name="model_id" label="模型 ID" rules={[{ required: true }]}>
-            <Input placeholder="如 gpt-4o" />
-          </Form.Item>
-          <Form.Item name="alias" label="别名">
-            <Input />
-          </Form.Item>
-          <Form.Item name="context_window" label="上下文窗口">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="max_output_tokens" label="最大输出 Token">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="enabled" label="启用" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="supports_streaming" label="支持流式" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="supports_vision" label="支持视觉" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="pricing_input" label="输入价格 (每百万 Token)">
-            <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="pricing_output" label="输出价格 (每百万 Token)">
-            <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
-          </Form.Item>
-        </Form>
-      </Modal>
-    </div>
-  )
-}
--- a/admin-v2/src/pages/Providers.tsx
+++ b/admin-v2/src/pages/Providers.tsx
@@ -1,290 +0,0 @@
-// ============================================================
-// 服务商管理
-// ============================================================
-
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Space, Popconfirm, Typography } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
-import type { ProColumns } from '@ant-design/pro-components'
-import { ProTable } from '@ant-design/pro-components'
-import { providerService } from '@/services/providers'
-import type { Provider, ProviderKey } from '@/types'
-
-const { Text } = Typography
-
-export default function Providers() {
-  const queryClient = useQueryClient()
-  const [form] = Form.useForm()
-  const [modalOpen, setModalOpen] = useState(false)
-  const [editingId, setEditingId] = useState<string | null>(null)
-  const [keyModalProviderId, setKeyModalProviderId] = useState<string | null>(null)
-  const [addKeyOpen, setAddKeyOpen] = useState(false)
-  const [addKeyForm] = Form.useForm()
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['providers'],
-    queryFn: ({ signal }) => providerService.list(signal),
-  })
-
-  const { data: keysData, isLoading: keysLoading } = useQuery({
-    queryKey: ['provider-keys', keyModalProviderId],
-    queryFn: ({ signal }) => providerService.listKeys(keyModalProviderId!, signal),
-    enabled: !!keyModalProviderId,
-  })
-
-  const createMutation = useMutation({
-    mutationFn: (data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
-      providerService.create(data),
-    onSuccess: () => {
-      message.success('创建成功')
-      queryClient.invalidateQueries({ queryKey: ['providers'] })
-      setModalOpen(false)
-      form.resetFields()
-    },
-    onError: (err: Error) => message.error(err.message || '创建失败'),
-  })
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>> }) =>
-      providerService.update(id, data),
-    onSuccess: () => {
-      message.success('更新成功')
-      queryClient.invalidateQueries({ queryKey: ['providers'] })
-      setModalOpen(false)
-    },
-    onError: (err: Error) => message.error(err.message || '更新失败'),
-  })
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => providerService.delete(id),
-    onSuccess: () => {
-      message.success('删除成功')
-      queryClient.invalidateQueries({ queryKey: ['providers'] })
-    },
-    onError: (err: Error) => message.error(err.message || '删除失败'),
-  })
-
-  const addKeyMutation = useMutation({
-    mutationFn: ({ providerId, data }: { providerId: string; data: { key_label: string; key_value: string; priority?: number; max_rpm?: number; max_tpm?: number } }) =>
-      providerService.addKey(providerId, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['provider-keys', keyModalProviderId] })
-      message.success('密钥已添加')
-      setAddKeyOpen(false)
-      addKeyForm.resetFields()
-    },
-    onError: () => message.error('添加失败'),
-  })
-
-  const toggleKeyMutation = useMutation({
-    mutationFn: ({ providerId, keyId, active }: { providerId: string; keyId: string; active: boolean }) =>
-      providerService.toggleKey(providerId, keyId, active),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['provider-keys', keyModalProviderId] })
-      message.success('状态已切换')
-    },
-    onError: () => message.error('切换失败'),
-  })
-
-  const deleteKeyMutation = useMutation({
-    mutationFn: ({ providerId, keyId }: { providerId: string; keyId: string }) =>
-      providerService.deleteKey(providerId, keyId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['provider-keys', keyModalProviderId] })
-      message.success('密钥已删除')
-    },
-    onError: () => message.error('删除失败'),
-  })
-
-  const columns: ProColumns<Provider>[] = [
-    { title: '名称', dataIndex: 'display_name', width: 140 },
-    { title: '标识', dataIndex: 'name', width: 120, render: (_, r) => <Text code>{r.name}</Text> },
-    { title: '协议', dataIndex: 'api_protocol', width: 100, hideInSearch: true },
-    { title: 'RPM 限制', dataIndex: 'rate_limit_rpm', width: 100, hideInSearch: true, render: (_, r) => r.rate_limit_rpm ?? '-' },
-    {
-      title: '状态',
-      dataIndex: 'enabled',
-      width: 80,
-      hideInSearch: true,
-      render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
-    },
-    {
-      title: '操作',
-      width: 260,
-      hideInSearch: true,
-      render: (_, record) => (
-        <Space>
-          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
-            编辑
-          </Button>
-          <Button size="small" onClick={() => setKeyModalProviderId(record.id)}>
-            Key Pool
-          </Button>
-          <Popconfirm title="确定删除此服务商？" onConfirm={() => deleteMutation.mutate(record.id)}>
-            <Button size="small" danger>删除</Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ]
-
-  const keyColumns: ProColumns<ProviderKey>[] = [
-    { title: '标签', dataIndex: 'key_label', width: 120 },
-    { title: '优先级', dataIndex: 'priority', width: 80 },
-    { title: '请求数', dataIndex: 'total_requests', width: 80 },
-    { title: 'Token 数', dataIndex: 'total_tokens', width: 100 },
-    {
-      title: '状态',
-      dataIndex: 'is_active',
-      width: 80,
-      render: (_, r) => r.is_active ? <Tag color="green">活跃</Tag> : <Tag>冷却</Tag>,
-    },
-    {
-      title: '操作',
-      width: 160,
-      render: (_, record) => (
-        <Space>
-          <Popconfirm
-            title={record.is_active ? '确定禁用此密钥？' : '确定启用此密钥？'}
-            onConfirm={() => toggleKeyMutation.mutate({
-              providerId: keyModalProviderId!,
-              keyId: record.id,
-              active: !record.is_active,
-            })}
-          >
-            <Button size="small" type={record.is_active ? 'default' : 'primary'}>
-              {record.is_active ? '禁用' : '启用'}
-            </Button>
-          </Popconfirm>
-          <Popconfirm
-            title="确定删除此密钥？此操作不可恢复。"
-            onConfirm={() => deleteKeyMutation.mutate({
-              providerId: keyModalProviderId!,
-              keyId: record.id,
-            })}
-          >
-            <Button size="small" danger>删除</Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ]
-
-  const handleSave = async () => {
-    const values = await form.validateFields()
-    if (editingId) {
-      updateMutation.mutate({ id: editingId, data: values })
-    } else {
-      createMutation.mutate(values)
-    }
-  }
-
-  return (
-    <div>
-      <ProTable<Provider>
-        columns={columns}
-        dataSource={data?.items ?? []}
-        loading={isLoading}
-        rowKey="id"
-        search={{}}
-        toolBarRender={() => [
-          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
-            新建服务商
-          </Button>,
-        ]}
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: data?.page_size ?? 20,
-          current: data?.page ?? 1,
-          showSizeChanger: false,
-        }}
-      />
-
-      <Modal
-        title={editingId ? '编辑服务商' : '新建服务商'}
-        open={modalOpen}
-        onOk={handleSave}
-        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
-        confirmLoading={createMutation.isPending || updateMutation.isPending}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item name="name" label="标识" rules={[{ required: true }]}>
-            <Input disabled={!!editingId} />
-          </Form.Item>
-          <Form.Item name="display_name" label="显示名称" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="base_url" label="Base URL" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="api_protocol" label="API 协议">
-            <Input placeholder="openai" />
-          </Form.Item>
-          <Form.Item name="enabled" label="启用" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item name="rate_limit_rpm" label="RPM 限制">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-        </Form>
-      </Modal>
-
-      <Modal
-        title="Key Pool"
-        open={!!keyModalProviderId}
-        onCancel={() => setKeyModalProviderId(null)}
-        footer={(_, { OkBtn, CancelBtn }) => (
-          <Space>
-            <CancelBtn />
-            <Button type="primary" onClick={() => { addKeyForm.resetFields(); setAddKeyOpen(true) }}>
-              添加密钥
-            </Button>
-          </Space>
-        )}
-        width={700}
-      >
-        <ProTable<ProviderKey>
-          columns={keyColumns}
-          dataSource={keysData ?? []}
-          loading={keysLoading}
-          rowKey="id"
-          search={false}
-          toolBarRender={false}
-          pagination={false}
-          size="small"
-        />
-      </Modal>
-
-      <Modal
-        title="添加密钥"
-        open={addKeyOpen}
-        onOk={() => {
-          addKeyForm.validateFields().then((v) =>
-            addKeyMutation.mutate({ providerId: keyModalProviderId!, data: v })
-          )
-        }}
-        onCancel={() => setAddKeyOpen(false)}
-        confirmLoading={addKeyMutation.isPending}
-      >
-        <Form form={addKeyForm} layout="vertical">
-          <Form.Item name="key_label" label="标签" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="key_value" label="API Key" rules={[{ required: true }]}>
-            <Input.Password />
-          </Form.Item>
-          <Form.Item name="priority" label="优先级" initialValue={0}>
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="max_rpm" label="最大 RPM (可选)">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-          <Form.Item name="max_tpm" label="最大 TPM (可选)">
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </Form.Item>
-        </Form>
-      </Modal>
-    </div>
-  )
-}
--- a/admin-v2/src/pages/Relay.tsx
+++ b/admin-v2/src/pages/Relay.tsx
@@ -2,16 +2,16 @@
 // 中转任务
 // ============================================================

+import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Tag, Select, Typography } from 'antd'
+import { Tag, Select } from 'antd'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
 import { relayService } from '@/services/relay'
-import { useState } from 'react'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorState } from '@/components/ErrorState'
 import type { RelayTask } from '@/types'

-const { Title } = Typography
-
 const statusLabels: Record<string, string> = {
  queued: '排队中',
  running: '运行中',
@@ -32,26 +32,57 @@ export default function Relay() {
  const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined)
  const [page, setPage] = useState(1)

-  const { data, isLoading } = useQuery({
+  const {
+    data,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
    queryKey: ['relay-tasks', page, statusFilter],
    queryFn: ({ signal }) => relayService.list({ page, page_size: 20, status: statusFilter }, signal),
  })

+  if (error) {
+    return (
+      <>
+        <PageHeader title="中转任务" description="查看和管理 AI 模型中转请求" />
+        <ErrorState message={(error as Error).message} onRetry={() => refetch()} />
+      </>
+    )
+  }
+
  const columns: ProColumns<RelayTask>[] = [
-    { title: 'ID', dataIndex: 'id', width: 120, render: (_, r) => <code>{r.id.substring(0, 8)}...</code> },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 120,
+      render: (_, r) => (
+        <code className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800">
+          {r.id.substring(0, 8)}...
+        </code>
+      ),
+    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
-      render: (_, r) => <Tag color={statusColors[r.status] || 'default'}>{statusLabels[r.status] || r.status}</Tag>,
+      render: (_, r) => (
+        <Tag color={statusColors[r.status] || 'default'}>
+          {statusLabels[r.status] || r.status}
+        </Tag>
+      ),
    },
    { title: '模型', dataIndex: 'model_id', width: 160 },
    { title: '优先级', dataIndex: 'priority', width: 70 },
    { title: '尝试次数', dataIndex: 'attempt_count', width: 80 },
    {
-      title: 'Token',
+      title: 'Token (入/出)',
      width: 140,
-      render: (_, r) => `${r.input_tokens.toLocaleString()} / ${r.output_tokens.toLocaleString()}`,
+      render: (_, r) => (
+        <span className="text-sm">
+          {r.input_tokens.toLocaleString()} / {r.output_tokens.toLocaleString()}
+        </span>
+      ),
    },
    { title: '错误信息', dataIndex: 'error_message', width: 200, ellipsis: true },
    {
@@ -64,19 +95,24 @@ export default function Relay() {
      title: '完成时间',
      dataIndex: 'completed_at',
      width: 180,
-      render: (_, r) => r.completed_at ? new Date(r.completed_at).toLocaleString('zh-CN') : '-',
+      render: (_, r) => (r.completed_at ? new Date(r.completed_at).toLocaleString('zh-CN') : '-'),
    },
  ]

  return (
    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
-        <Title level={4} style={{ margin: 0 }}>中转任务</Title>
+      <PageHeader
+        title="中转任务"
+        description="查看和管理 AI 模型中转请求"
+        actions={
          <Select
            value={statusFilter}
-          onChange={(v) => { setStatusFilter(v === 'all' ? undefined : v); setPage(1) }}
+            onChange={(v) => {
+              setStatusFilter(v === 'all' ? undefined : v)
+              setPage(1)
+            }}
            placeholder="状态筛选"
-          style={{ width: 140 }}
+            className="w-36"
            allowClear
            options={[
              { value: 'all', label: '全部' },
@@ -87,7 +123,8 @@ export default function Relay() {
              { value: 'cancelled', label: '已取消' },
            ]}
          />
-      </div>
+        }
+      />

      <ProTable<RelayTask>
        columns={columns}
--- a/admin-v2/src/pages/Usage.tsx
+++ b/admin-v2/src/pages/Usage.tsx
@@ -4,20 +4,24 @@

 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Card, Row, Col, Select, Spin, Alert, Statistic, Typography } from 'antd'
-import { ColumnWidthOutlined, ThunderboltOutlined } from '@ant-design/icons'
+import { Card, Col, Row, Select, Statistic } from 'antd'
+import { ThunderboltOutlined, ColumnWidthOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { ProTable } from '@ant-design/pro-components'
-import { usageService } from '@/services/usage'
 import { telemetryService } from '@/services/telemetry'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorState } from '@/components/ErrorState'
 import type { DailyUsageStat, ModelUsageStat } from '@/types'

-const { Title } = Typography
-
 export default function Usage() {
  const [days, setDays] = useState(30)

-  const { data: dailyData, isLoading: dailyLoading, error: dailyError } = useQuery({
+  const {
+    data: dailyData,
+    isLoading: dailyLoading,
+    error: dailyError,
+    refetch,
+  } = useQuery({
    queryKey: ['usage-daily', days],
    queryFn: ({ signal }) => telemetryService.dailyStats({ days }, signal),
  })
@@ -28,7 +32,12 @@ export default function Usage() {
  })

  if (dailyError) {
-    return <Alert type="error" message="加载用量数据失败" description={(dailyError as Error).message} showIcon />
+    return (
+      <>
+        <PageHeader title="用量统计" description="查看模型使用情况和 Token 消耗" />
+        <ErrorState message={(dailyError as Error).message} onRetry={() => refetch()} />
+      </>
+    )
  }

  const totalRequests = dailyData?.reduce((s, d) => s + d.request_count, 0) ?? 0
@@ -36,22 +45,52 @@ export default function Usage() {

  const dailyColumns: ProColumns<DailyUsageStat>[] = [
    { title: '日期', dataIndex: 'day', width: 120 },
-    { title: '请求数', dataIndex: 'request_count', width: 100, render: (_, r) => r.request_count.toLocaleString() },
-    { title: '输入 Token', dataIndex: 'input_tokens', width: 120, render: (_, r) => r.input_tokens.toLocaleString() },
-    { title: '输出 Token', dataIndex: 'output_tokens', width: 120, render: (_, r) => r.output_tokens.toLocaleString() },
+    {
+      title: '请求数',
+      dataIndex: 'request_count',
+      width: 100,
+      render: (_, r) => r.request_count.toLocaleString(),
+    },
+    {
+      title: '输入 Token',
+      dataIndex: 'input_tokens',
+      width: 120,
+      render: (_, r) => r.input_tokens.toLocaleString(),
+    },
+    {
+      title: '输出 Token',
+      dataIndex: 'output_tokens',
+      width: 120,
+      render: (_, r) => r.output_tokens.toLocaleString(),
+    },
    { title: '设备数', dataIndex: 'unique_devices', width: 80 },
  ]

  const modelColumns: ProColumns<ModelUsageStat>[] = [
    { title: '模型', dataIndex: 'model_id', width: 200 },
-    { title: '请求数', dataIndex: 'request_count', width: 100, render: (_, r) => r.request_count.toLocaleString() },
-    { title: '输入 Token', dataIndex: 'input_tokens', width: 120, render: (_, r) => r.input_tokens.toLocaleString() },
-    { title: '输出 Token', dataIndex: 'output_tokens', width: 120, render: (_, r) => r.output_tokens.toLocaleString() },
+    {
+      title: '请求数',
+      dataIndex: 'request_count',
+      width: 100,
+      render: (_, r) => r.request_count.toLocaleString(),
+    },
+    {
+      title: '输入 Token',
+      dataIndex: 'input_tokens',
+      width: 120,
+      render: (_, r) => r.input_tokens.toLocaleString(),
+    },
+    {
+      title: '输出 Token',
+      dataIndex: 'output_tokens',
+      width: 120,
+      render: (_, r) => r.output_tokens.toLocaleString(),
+    },
    {
      title: '平均延迟',
      dataIndex: 'avg_latency_ms',
      width: 100,
-      render: (_, r) => r.avg_latency_ms ? `${Math.round(r.avg_latency_ms)}ms` : '-',
+      render: (_, r) => (r.avg_latency_ms ? `${Math.round(r.avg_latency_ms)}ms` : '-'),
    },
    {
      title: '成功率',
@@ -63,8 +102,10 @@ export default function Usage() {

  return (
    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
-        <Title level={4} style={{ margin: 0 }}>用量统计</Title>
+      <PageHeader
+        title="用量统计"
+        description="查看模型使用情况和 Token 消耗"
+        actions={
          <Select
            value={days}
            onChange={setDays}
@@ -73,24 +114,54 @@ export default function Usage() {
              { value: 30, label: '最近 30 天' },
              { value: 90, label: '最近 90 天' },
            ]}
-          style={{ width: 140 }}
+            className="w-36"
+          />
+        }
      />
-      </div>

-      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
-        <Col span={12}>
-          <Card>
-            <Statistic title="总请求数" value={totalRequests} prefix={<ThunderboltOutlined />} />
+      {/* Summary Cards */}
+      <Row gutter={[16, 16]} className="mb-6">
+        <Col xs={24} sm={12}>
+          <Card className="hover:shadow-md transition-shadow duration-200">
+            <Statistic
+              title={
+                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                  总请求数
+                </span>
+              }
+              value={totalRequests}
+              prefix={<ThunderboltOutlined style={{ color: '#863bff' }} />}
+              valueStyle={{ fontWeight: 600, color: '#863bff' }}
+            />
          </Card>
        </Col>
-        <Col span={12}>
-          <Card>
-            <Statistic title="总 Token 数" value={totalTokens} prefix={<ColumnWidthOutlined />} />
+        <Col xs={24} sm={12}>
+          <Card className="hover:shadow-md transition-shadow duration-200">
+            <Statistic
+              title={
+                <span className="text-neutral-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wide">
+                  总 Token 数
+                </span>
+              }
+              value={totalTokens}
+              prefix={<ColumnWidthOutlined style={{ color: '#47bfff' }} />}
+              valueStyle={{ fontWeight: 600, color: '#47bfff' }}
+            />
          </Card>
        </Col>
      </Row>

-      <Card title="每日统计" style={{ marginBottom: 24 }} size="small">
+      {/* Daily Stats */}
+      <Card
+        title={
+          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            每日统计
+          </span>
+        }
+        className="mb-6"
+        size="small"
+        styles={{ body: { padding: 0 } }}
+      >
        <ProTable<DailyUsageStat>
          columns={dailyColumns}
          dataSource={dailyData ?? []}
@@ -103,7 +174,16 @@ export default function Usage() {
        />
      </Card>

-      <Card title="按模型统计" size="small">
+      {/* Model Stats */}
+      <Card
+        title={
+          <span className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            按模型统计
+          </span>
+        }
+        size="small"
+        styles={{ body: { padding: 0 } }}
+      >
        <ProTable<ModelUsageStat>
          columns={modelColumns}
          dataSource={modelData ?? []}
--- a/admin-v2/src/router/index.tsx
+++ b/admin-v2/src/router/index.tsx
@@ -21,10 +21,11 @@ export const router = createBrowserRouter([
    children: [
      { index: true, lazy: () => import('@/pages/Dashboard').then((m) => ({ Component: m.default })) },
      { path: 'accounts', lazy: () => import('@/pages/Accounts').then((m) => ({ Component: m.default })) },
-      { path: 'providers', lazy: () => import('@/pages/Providers').then((m) => ({ Component: m.default })) },
-      { path: 'models', lazy: () => import('@/pages/Models').then((m) => ({ Component: m.default })) },
+      { path: 'model-services', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
+      { path: 'providers', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
+      { path: 'models', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
      { path: 'agent-templates', lazy: () => import('@/pages/AgentTemplates').then((m) => ({ Component: m.default })) },
-      { path: 'api-keys', lazy: () => import('@/pages/ApiKeys').then((m) => ({ Component: m.default })) },
+      { path: 'api-keys', lazy: () => import('@/pages/ModelServices').then((m) => ({ Component: m.default })) },
      { path: 'usage', lazy: () => import('@/pages/Usage').then((m) => ({ Component: m.default })) },
      { path: 'relay', lazy: () => import('@/pages/Relay').then((m) => ({ Component: m.default })) },
      { path: 'config', lazy: () => import('@/pages/Config').then((m) => ({ Component: m.default })) },
--- a/admin-v2/src/stores/themeStore.ts
+++ b/admin-v2/src/stores/themeStore.ts
@@ -0,0 +1,56 @@
+import { create } from 'zustand'
+
+type ThemeMode = 'light' | 'dark' | 'system'
+
+interface ThemeState {
+  mode: ThemeMode
+  resolved: 'light' | 'dark'
+}
+
+function getSystemTheme(): 'light' | 'dark' {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function resolveTheme(mode: ThemeMode): 'light' | 'dark' {
+  return mode === 'system' ? getSystemTheme() : mode
+}
+
+function applyTheme(resolved: 'light' | 'dark') {
+  const html = document.documentElement
+  html.classList.toggle('dark', resolved === 'dark')
+  html.setAttribute('data-theme', resolved)
+}
+
+function getInitialMode(): ThemeMode {
+  const stored = localStorage.getItem('zclaw_admin_theme')
+  if (stored === 'light' || stored === 'dark' || stored === 'system') return stored
+  return 'system'
+}
+
+const initialMode = getInitialMode()
+const initialResolved = resolveTheme(initialMode)
+applyTheme(initialResolved)
+
+export const useThemeStore = create<ThemeState>(() => ({
+  mode: initialMode,
+  resolved: initialResolved,
+}))
+
+export function setThemeMode(mode: ThemeMode) {
+  const resolved = resolveTheme(mode)
+  localStorage.setItem('zclaw_admin_theme', mode)
+  applyTheme(resolved)
+  useThemeStore.setState({ mode, resolved })
+}
+
+// Listen for system theme changes
+if (typeof window !== 'undefined') {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const { mode } = useThemeStore.getState()
+    if (mode === 'system') {
+      const resolved = getSystemTheme()
+      applyTheme(resolved)
+      useThemeStore.setState({ resolved })
+    }
+  })
+}
--- a/admin-v2/src/styles/globals.css
+++ b/admin-v2/src/styles/globals.css
@@ -0,0 +1,235 @@
+@import "tailwindcss";
+
+/* ============================================================
+   ZCLAW Admin Design Tokens
+   DeerFlow-inspired warm neutral palette with brand accents
+   ============================================================ */
+
+@theme {
+  /* Brand Colors */
+  --color-brand-purple: #863bff;
+  --color-brand-blue: #47bfff;
+  --color-brand-gradient: linear-gradient(135deg, #863bff, #47bfff);
+
+  /* Neutral (warm stone palette) */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  --color-neutral-950: #0c0a09;
+
+  /* Semantic Colors */
+  --color-success: #22c55e;
+  --color-success-soft: #dcfce7;
+  --color-warning: #f59e0b;
+  --color-warning-soft: #fef3c7;
+  --color-error: #ef4444;
+  --color-error-soft: #fee2e2;
+  --color-info: #3b82f6;
+  --color-info-soft: #dbeafe;
+
+  /* Dark mode neutrals */
+  --color-dark-bg: #0c0a09;
+  --color-dark-surface: #1c1917;
+  --color-dark-card: #292524;
+  --color-dark-border: #44403c;
+  --color-dark-text: #fafaf9;
+  --color-dark-text-secondary: #a8a29e;
+
+  /* Spacing */
+  --spacing-sidebar-expanded: 16rem;
+  --spacing-sidebar-collapsed: 3rem;
+  --spacing-header-height: 3.5rem;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  /* Shadows */
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.16);
+
+  /* Typography */
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================================
+   Base Styles
+   ============================================================ */
+
+html {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+}
+
+/* Dark mode overrides */
+html.dark body {
+  background-color: var(--color-dark-bg);
+  color: var(--color-dark-text);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-300);
+  border-radius: 3px;
+}
+
+html.dark ::-webkit-scrollbar-thumb {
+  background-color: var(--color-dark-border);
+}
+
+/* Focus visible */
+:focus-visible {
+  outline: 2px solid var(--color-brand-purple);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Skip to content (accessibility) */
+.skip-to-content {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  padding: 8px 16px;
+  background: var(--color-brand-purple);
+  color: white;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  text-decoration: none;
+  transition: top var(--transition-fast);
+}
+
+.skip-to-content:focus {
+  top: 8px;
+}
+
+/* ============================================================
+   Ant Design Overrides (Light Mode)
+   ============================================================ */
+
+/* ProTable search area */
+.ant-pro-table-search {
+  background-color: var(--color-neutral-50) !important;
+  border-bottom: 1px solid var(--color-neutral-200) !important;
+}
+
+/* Card styling */
+.ant-card {
+  border-radius: var(--radius-lg) !important;
+  border: 1px solid var(--color-neutral-200) !important;
+  box-shadow: var(--shadow-card) !important;
+}
+
+.ant-card:hover {
+  box-shadow: var(--shadow-card-hover) !important;
+}
+
+/* Table styling */
+.ant-table-wrapper .ant-table-thead > tr > th {
+  background-color: var(--color-neutral-50) !important;
+  font-weight: 600 !important;
+  color: var(--color-neutral-600) !important;
+}
+
+/* Modal styling */
+.ant-modal .ant-modal-content {
+  border-radius: var(--radius-lg) !important;
+}
+
+/* Tag pill style */
+.ant-tag {
+  border-radius: 9999px !important;
+  padding: 0 8px !important;
+}
+
+/* Form item */
+.ant-form-item-label > label {
+  font-weight: 500 !important;
+  color: var(--color-neutral-700) !important;
+}
+
+/* ============================================================
+   Dark Mode — Ant Design Overrides
+   ============================================================ */
+
+html.dark .ant-card {
+  background-color: var(--color-dark-card) !important;
+  border-color: var(--color-dark-border) !important;
+}
+
+html.dark .ant-table-wrapper .ant-table-thead > tr > th {
+  background-color: var(--color-dark-surface) !important;
+  color: var(--color-dark-text-secondary) !important;
+}
+
+html.dark .ant-table-wrapper .ant-table-tbody > tr > td {
+  border-color: var(--color-dark-border) !important;
+}
+
+html.dark .ant-table-wrapper .ant-table-tbody > tr:hover > td {
+  background-color: rgba(134, 59, 255, 0.06) !important;
+}
+
+html.dark .ant-modal .ant-modal-content {
+  background-color: var(--color-dark-card) !important;
+}
+
+html.dark .ant-modal .ant-modal-header {
+  background-color: var(--color-dark-card) !important;
+}
+
+html.dark .ant-drawer .ant-drawer-content {
+  background-color: var(--color-dark-surface) !important;
+}
+
+html.dark .ant-form-item-label > label {
+  color: var(--color-dark-text-secondary) !important;
+}
+
+html.dark .ant-select-selector,
+html.dark .ant-input,
+html.dark .ant-input-number {
+  background-color: var(--color-dark-card) !important;
+  border-color: var(--color-dark-border) !important;
+  color: var(--color-dark-text) !important;
+}
+
+html.dark .ant-pro-table-search {
+  background-color: var(--color-dark-surface) !important;
+  border-color: var(--color-dark-border) !important;
+}
--- a/admin-v2/vite.config.ts
+++ b/admin-v2/vite.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 import path from 'path'

 export default defineConfig({
-  plugins: [react()],
+  plugins: [tailwindcss(), react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
--- a/crates/zclaw-kernel/src/kernel.rs
+++ b/crates/zclaw-kernel/src/kernel.rs
@@ -645,15 +645,11 @@ impl Kernel {
        // Reuse existing session or create new one
        let session_id = match session_id_override {
            Some(id) => {
-                // Verify the session exists; if not, create a new one
-                let existing = self.memory.get_messages(&id).await;
-                match existing {
-                    Ok(msgs) if !msgs.is_empty() => id,
-                    _ => {
-                        tracing::debug!("Session {} not found or empty, creating new session", id);
-                        self.memory.create_session(agent_id).await?
-                    }
-                }
+                // Use get_or_create to ensure the frontend's session ID is persisted.
+                // This is the critical bridge: without it, the kernel generates a
+                // different UUID each turn, so conversation history is never found.
+                tracing::debug!("Reusing frontend session ID: {}", id);
+                self.memory.get_or_create_session(&id, agent_id).await?
            }
            None => self.memory.create_session(agent_id).await?,
        };
--- a/crates/zclaw-memory/src/store.rs
+++ b/crates/zclaw-memory/src/store.rs
@@ -173,6 +173,49 @@ impl MemoryStore {
        Ok(session_id)
    }

+    /// Get an existing session or create it with the given ID.
+    ///
+    /// This is the critical bridge between frontend session IDs and the database.
+    /// The frontend generates a UUID (`sessionKey`) and sends it with each message.
+    /// Without this method, the kernel would create a *different* session ID on
+    /// every call, so conversation history would never be found.
+    pub async fn get_or_create_session(
+        &self,
+        session_id: &SessionId,
+        agent_id: &AgentId,
+    ) -> Result<SessionId> {
+        let session_str = session_id.to_string();
+        let agent_str = agent_id.to_string();
+
+        // Check if session already exists
+        let exists: bool = sqlx::query_scalar(
+            "SELECT COUNT(*) > 0 FROM sessions WHERE id = ?",
+        )
+        .bind(&session_str)
+        .fetch_one(&self.pool)
+        .await
+        .unwrap_or(false);
+
+        if exists {
+            return Ok(session_id.clone());
+        }
+
+        // Create session with the frontend-provided ID
+        sqlx::query(
+            r#"
+            INSERT INTO sessions (id, agent_id, created_at, updated_at)
+            VALUES (?, ?, datetime('now'), datetime('now'))
+            "#,
+        )
+        .bind(&session_str)
+        .bind(&agent_str)
+        .execute(&self.pool)
+        .await
+        .map_err(|e| ZclawError::StorageError(e.to_string()))?;
+
+        Ok(session_id.clone())
+    }
+
    /// Append a message to a session
    pub async fn append_message(&self, session_id: &SessionId, message: &Message) -> Result<()> {
        let session_str = session_id.to_string();
--- a/crates/zclaw-runtime/src/driver/openai.rs
+++ b/crates/zclaw-runtime/src/driver/openai.rs
@@ -360,10 +360,14 @@ impl OpenAiDriver {

            if let Some(calls) = calls {
                if !calls.is_empty() {
-                    // Merge assistant content + reasoning into the tool call message
+                    // Merge assistant content + reasoning into the tool call message.
+                    // IMPORTANT: Some APIs (Kimi, Qwen) require `content` to be non-empty
+                    // even when tool_calls is set. Use a meaningful placeholder if content is empty.
+                    let content_value = content.filter(|s| !s.trim().is_empty())
+                        .unwrap_or_else(|| "正在调用工具...".to_string());
                    out.push(OpenAiMessage {
                        role: "assistant".to_string(),
-                        content: content.filter(|s| !s.is_empty()),
+                        content: Some(content_value),
                        reasoning_content: reasoning.filter(|s| !s.is_empty()),
                        tool_calls: Some(calls),
                        tool_call_id: None,
@@ -371,11 +375,14 @@ impl OpenAiDriver {
                    return;
                }
            }
-            // No tool calls — emit a plain assistant message
+            // No tool calls — emit a plain assistant message.
+            // Ensure content is always Some() and non-empty to satisfy API requirements.
            if content.is_some() || reasoning.is_some() {
+                let content_value = content.filter(|s| !s.trim().is_empty())
+                    .unwrap_or_else(|| "正在思考...".to_string());
                out.push(OpenAiMessage {
                    role: "assistant".to_string(),
-                    content: content.filter(|s| !s.is_empty()),
+                    content: Some(content_value),
                    reasoning_content: reasoning.filter(|s| !s.is_empty()),
                    tool_calls: None,
                    tool_call_id: None,
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -88,6 +88,20 @@ function App() {
    document.title = 'ZCLAW';
  }, []);

+  // Restore SaaS session from OS keyring on startup (before auth gate)
+  const [isRestoring, setIsRestoring] = useState(true);
+  useEffect(() => {
+    const restore = async () => {
+      try {
+        await useSaaSStore.getState().restoreSession();
+      } catch {
+        // Session restore failed — user will see login page
+      }
+      setIsRestoring(false);
+    };
+    restore();
+  }, []);
+
  // Watch for Hands that need approval
  useEffect(() => {
    const handsNeedingApproval = hands.filter(h => h.status === 'needs_approval');
@@ -345,6 +359,9 @@ function App() {
  };

  // 登录门禁 — 必须登录才能使用
+  if (isRestoring) {
+    return <BootstrapScreen status="Restoring session..." />;
+  }
  if (!isLoggedIn) {
    return <LoginPage />;
  }
--- a/desktop/src/components/CloneManager.tsx
+++ b/desktop/src/components/CloneManager.tsx
@@ -20,7 +20,11 @@ export function CloneManager() {

  useEffect(() => {
    if (connected) {
-      loadClones();
+      loadClones().then(() => {
+        // Sync agents in chatStore and restore currentAgent/conversation
+        const clones = useAgentStore.getState().clones;
+        useChatStore.getState().syncAgents(clones);
+      });
    }
  }, [connected, loadClones]);

--- a/docs/knowledge-base/troubleshooting.md
+++ b/docs/knowledge-base/troubleshooting.md
@@ -2084,7 +2084,58 @@ const adminRouting = storedAccount?.llm_routing;

 ---

-## 16. 相关文档
+## 16. 桌面端会话持久化三连 Bug (2026-04-01)
+
+### 16.1 页面刷新跳回登录页
+
+**症状**: F5 刷新页面后被踢回登录界面，必须重新输入密码。
+
+**根本原因**: `saasStore.restoreSession()` 方法已实现（从 OS keyring 读取 token + 验证），但从未被调用。Zustand store 初始化 `isLoggedIn: false`，`App.tsx` 同步检查后立即渲染 `<LoginPage />`。
+
+**修复**: `desktop/src/App.tsx` — 添加 `isRestoring` 状态，启动时调用 `restoreSession()`，恢复完成前显示加载屏。
+
+### 16.2 登录后空白对话页
+
+**症状**: 登录后看到空白对话页面，必须手动点击 agent 才能看到之前的对话。
+
+**根本原因**: `CloneManager` 在 `loadClones()` 后没有调用 `chatStore.syncAgents()`。`syncAgents` 包含恢复 `currentAgent` 和从 conversations 数组恢复 messages 的安全网逻辑。
+
+**修复**: `desktop/src/components/CloneManager.tsx` — `loadClones().then()` 中调用 `syncAgents(clones)`。
+
+### 16.3 Agent 无上下文记忆 — session ID 映射断裂
+
+**症状**: 每条消息 Agent 都说"这是第一条消息"，多轮对话上下文完全丢失。
+
+**根本原因**: 前端生成的 `sessionKey` UUID 传到 kernel 后，`get_messages()` 查不到（因为该 ID 从未存入 sessions 表），于是 `create_session()` 生成全新的 UUID。下一轮前端再传原 UUID，又创建新 session。前端 session ID 和数据库 session ID 永远无法匹配。
+
+```
+Turn 1: 前端 "abc-123" → DB 查不到 → 创建 "xyz-789" → 消息存到 "xyz-789"
+Turn 2: 前端 "abc-123" → DB 查不到 → 创建 "def-456" → 消息存到 "def-456"
+结果: 永远找不到历史消息
+```
+
+**修复**:
+1. `crates/zclaw-memory/src/store.rs` — 添加 `get_or_create_session()` 方法，直接用前端提供的 ID 创建 session
+2. `crates/zclaw-kernel/src/kernel.rs` — 使用 `get_or_create_session` 替代 lookup-then-create
+
+### 16.4 `messages[N] must not be empty` — assistant 消息空 content
+
+**症状**: Bug 16.3 修复后暴露：`API error 400: messages[4] with role 'assistant' must not be empty`
+
+**根本原因**: Bug 16.3 修复后对话历史终于被正确发送给 LLM。但历史中的 `ToolUse` 消息对应的 assistant 消息 content 为空（只有 tool_calls 没有 text）。Kimi/Qwen API 要求 assistant 消息的 `content` 不能为空字符串。
+
+**修复**: `crates/zclaw-runtime/src/driver/openai.rs` — `flush_pending` 中 assistant 消息的 `content` 字段：空字符串 → 有意义的占位符（`"正在思考..."` / `"正在调用工具..."`）。
+
+**涉及文件**:
+- `desktop/src/App.tsx`
+- `desktop/src/components/CloneManager.tsx`
+- `crates/zclaw-memory/src/store.rs`
+- `crates/zclaw-kernel/src/kernel.rs`
+- `crates/zclaw-runtime/src/driver/openai.rs`
+
+---
+
+## 17. 相关文档

 - [ZCLAW 配置指南](./zclaw-configuration.md) - 配置文件位置、格式和最佳实践
 - [Agent 和 LLM 提供商配置](./agent-provider-config.md) - Agent 管理和 Provider 配置
@@ -2096,6 +2147,7 @@ const adminRouting = storedAccount?.llm_routing;

 | 日期 | 变更 |
 |------|------|
+| 2026-04-01 | 添加第 16 节：桌面端会话持久化四连 Bug — 页面刷新跳登录 + 空白对话页 + Agent 无记忆(session ID 映射断裂) + assistant 空 content 400 |
 | 2026-03-31 | 添加第 14/15 节：llm_routing 读取路径 Bug + SaaS Relay 403 User-Agent 缺失 — relay 模式从未生效的根因分析 |
 | 2026-03-30 | 添加第 13 节：Admin 前端 ERR_ABORTED / 后端卡死 — Next.js SSR/hydration + SWR 根本冲突导致连接池耗尽，admin-v2 (Ant Design Pro 纯 SPA) 替代方案 |
 | 2026-03-28 | 添加 12.1-12.4 节：SaaS 后端问题 — Admin 登录无请求、SQLite→PostgreSQL 遗留语法、角色权限不足、usage 路由不匹配 |