feat(ds-flow): Phase 1.4 — 原型图标 SVG sprite 单源 icons.js

design/prototype/icons.js:57 个 Lucide 图标的 SVG sprite 单源(零依赖,注入
隐藏 <svg> + <symbol id="i-*">,用法 <svg class="ic"><use href="#i-power"/>)。

路径全部来自权威来源、零手写:35 个取自 usercenter icons.tsx 内联路径、
22 个从 web/website/node_modules/lucide-react 包提取。覆盖三处并集
(usercenter 全键 ∪ Flutter pangolin_icons.dart ∪ website lucide 用量);
别名(loader-circle/chart-no-axes-column/play-circle/more-vertical 等)已解析。

供 Phase 2 check-l1-sync ③「三端图标 ⊆ 原型 sprite」同源闸校验。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.gitea/workflows/deploy-client.yml

@@ -34,7 +34,7 @@ concurrency:
 
 jobs:
   build-android:
-    runs-on: mac
+    runs-on: nas
     env:
       GOPROXY: https://goproxy.cn,direct
       PUB_HOSTED_URL: https://pub.flutter-io.cn
@@ -98,7 +98,7 @@ jobs:
   #      simply picks up whatever artifacts DO exist — an absent "macos"
   #      artifact is not an error there.
   build-macos:
-    runs-on: mac
+    runs-on: nas
     continue-on-error: true
     env:
       PUB_HOSTED_URL: https://pub.flutter-io.cn
@@ -129,7 +129,7 @@ jobs:
           path: dist/
 
   build-ios:
-    runs-on: mac
+    runs-on: nas
     continue-on-error: true
     env:
       PUB_HOSTED_URL: https://pub.flutter-io.cn
@@ -160,7 +160,7 @@ jobs:
   # (对应平台下载保留 pangolin1 上一版,待可用时下个 client-v* 追上)。
   release-deploy:
     needs: [build-android]
-    runs-on: mac
+    runs-on: nas
     steps:
       - name: Checkout
         uses: actions/checkout@v4

CLAUDE.md

@@ -90,6 +90,50 @@ cd web/website   && npm run gen:tokens
 - `design/flutter/` 已删除；Flutter 组件 canonical 实现在 `client/lib/widgets/`，规格在 `design/preview/`。
 - **禁止**再向 `design/` 提交 Dart/TS 组件代码副本（会漂移）。
 
+## 前端设计系统治理（ds-flow）
+
+> **落地中**（分阶段收口，见计划 `docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md`
+> / 阅读版 `docs/frontend-ds-refactor-plan.html` / todo #19）。以下是**目标模型与硬规则**；
+> 标注「⏳」的部件正在建，未标注的已生效。参考样板 `~/code/jiu`。
+
+**心智模型**：设计只有一个出生地（**原型单源**），代码永远是镜像；跨端副本是否走样由
+**静态闸**在提交/CI 前拦截，像素是否还原由 **golden/fidelity 双级验收**兜底。主题：**light / dark 双主题**。
+
+**原型单源** `design/prototype/`（⏳ 建设中，Phase 1）：
+- `tokens.css` — 令牌真源：基础 `:root`（主题无关标量：间距/圆角/字号/字体/阴影/动效）+ `[data-theme=dark]` 颜色覆盖块。
+  （当前真源仍是 `design/colors_and_type.css`，Phase 1 迁移后数值不变、结构规整）
+- `atoms.css` — 公用组件原子（按钮/卡片/输入/语言下拉/徽章/状态药丸），**只引 `var(--token)`，禁硬编码**。
+- `icons.js` — SVG sprite 单源（`<symbol id="i-*">`）；website/usercenter/Flutter 三处图标集须 ⊆ 此集。
+- `index.html` — 活登记页：主题切换 + 声明式色板 + 全组件/图标展示卡。**每个 atom 必须在此登记**。
+- `serve.mjs` — 零依赖热重载预览；评审给 URL，**不截图**。
+
+**三层治理**：
+- **L1 设计系统**：新增颜色/组件/图标——**先登记原型，再同步代码**，无例外。跨端映射（状态词→图标）两端同集要有闸。
+- **L2 屏级三态**（台账记 `design/CONTRACT.md`）：`同步`=入 fidelity；`快照`=原型退役、golden+契约为准；`代码先行`=无原型屏、golden 唯一基准。
+- **L3 新屏/改版**：design-first——原型 → serve 评审 → 契约 → 实现 → 验收 → 入同步态。
+
+**codegen**：
+- Flutter：`node design/codegen/gen_flutter_tokens.mjs` → `pangolin_tokens.gen.dart`（**勿手改**）。
+- Web：`build-tokens.mjs`（website→`src/styles/tokens.gen.css` / usercenter→`public/colors_and_type.css`），
+  **只同源不重复生成设计决策**；靠同源闸逐值校验（不建跨端共享组件包，两端各自实现）。
+
+**四道静态闸 —「违规谁拦」**（规则没上闸 = 没有规则）：
+
+| 闸 | 拦什么 | 何时 |
+|---|---|---|
+| 原型校验 `check-ds.mjs`（⏳ Phase 5） | 硬编码色/未定义 token/未登记组件/魔法数断点… 12 道 | pre-commit（动了原型）+ CI |
+| 跨端同源 `check-l1-sync.mjs`（⏳ Phase 2） | tokens 逐值/icons 同集/Web hex 白名单 | CI |
+| 代码色单源 `check_ds_code.mjs`（⏳ Phase 5） | Flutter 裸 `Color(0x)`/具名 `Colors.x`（`// ds-ignore: 理由` 豁免） | pre-commit（`--changed`）+ CI |
+| codegen 零 diff `ci/check-codegen-drift.sh`（**已生效**） | 重生成 token 后 `git diff` 非空即 fail | pre-commit + CI |
+
+**双级像素验收**：
+- **golden**（**已有**，`client/test/golden/`）：多主题回归自比（同渲染器），抓串色/漏 token；真字体加载防豆腐块、钉死 viewport/dpr/动态值。重录 `flutter test --update-goldens`，随功能 commit 入库。
+- **fidelity**（⏳ Phase 5，本地体检**不进 CI**）：原型 Chromium 截图 vs Flutter golden pixelmatch，逐屏阈值=实测残差+2pp；跨渲染器噪声大，故不入 CI。
+
+**pre-commit**：`.githooks/pre-commit` 已写，**每台机需 `bash ci/install-hooks.sh` 启用一次**（设 `core.hooksPath=.githooks`）。
+
+**发现硬编码色**：换 token；确属例外（`#fff/#000`/品牌 logo 固定色）加 `// ds-ignore: 理由` 或列白名单。
+
 ## client/ macOS 原生隧道(PacketTunnel 系统扩展 + 内嵌 libbox)
 
 内嵌 sing-box(`Libbox.xcframework`)的 `NEPacketTunnelProvider` **系统扩展**(站外 Developer ID

ci/check-codegen-drift.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 # check-codegen-drift.sh — codegen 漂移检查(支柱 2:契约单源 / token 单源)。
 #
-# design/colors_and_type.css 是唯一 token 真相源,client/lib/pangolin_tokens.gen.dart
+# design/prototype/tokens.css 是唯一 token 真相源,client/lib/pangolin_tokens.gen.dart
 # 由 design/codegen/gen_flutter_tokens.mjs 生成、勿手改(CLAUDE.md 铁律)。本检查重新
 # 生成一遍,若生成物与已提交版本不一致 → 漂移:要么改了 CSS 没重生成,要么手改了
 # 生成物。两者都会让"单源"失效、契约悄悄分叉。
@@ -22,7 +22,7 @@ echo "→ 重新生成 Flutter token (design/codegen/gen_flutter_tokens.mjs) ...
 node design/codegen/gen_flutter_tokens.mjs
 
 if ! git diff --quiet -- "$GEN"; then
-  echo "❌ codegen 漂移：$GEN 与 design/colors_and_type.css 不一致。" >&2
+  echo "❌ codegen 漂移：$GEN 与 design/prototype/tokens.css 不一致。" >&2
   echo "   原因:改了 CSS 真相源却没重生成,或手改了生成物(铁律:勿手改 *.gen.dart)。" >&2
   echo "   修复:node design/codegen/gen_flutter_tokens.mjs 后提交生成物。" >&2
   echo "   ── diff(前 40 行)──" >&2

client/lib/l10n/app_text.dart

@@ -308,6 +308,24 @@ extension AppLangMisc on AppLang {
         return 'Cancelar';
     }
   }
+
+  /// 更新 banner:「立即更新」。
+  String get updateNow {
+    switch (this) {
+      case AppLang.zh:
+        return '立即更新';
+      case AppLang.en:
+        return 'Update now';
+      case AppLang.ja:
+        return '今すぐ更新';
+      case AppLang.ko:
+        return '지금 업데이트';
+      case AppLang.ru:
+        return 'Обновить';
+      case AppLang.es:
+        return 'Actualizar';
+    }
+  }
 }
 
 /// 全部界面文案的抽象契约。zh / en 各实现一份。

client/lib/pangolin_tokens.gen.dart

@@ -1,6 +1,6 @@
 // pangolin_tokens.gen.dart
 // AUTO-GENERATED — 勿手改。
-// 源: design/colors_and_type.css
+// 源: design/prototype/tokens.css
 // 生成器: design/codegen/gen_flutter_tokens.mjs
 //
 // 包含：PangolinColors · PangolinSpacing · PangolinRadius · PangolinMotion · PangolinShadow
@@ -9,7 +9,7 @@
 import 'package:flutter/material.dart';
 
 /// ── Primitive color ramps ───────────────────────────────────────────
-/// Auto-generated from design/colors_and_type.css :root color ramps.
+/// Auto-generated from design/prototype/tokens.css :root color ramps.
 class PangolinColors {
   PangolinColors._();
 

client/lib/screens/settings_page.dart

@@ -15,10 +15,8 @@ import '../state/settings_provider.dart';
 import '../state/update_provider.dart';
 import '../widgets/pangolin_icons.dart';
 import '../widgets/pangolin_toast.dart';
-import '../widgets/update_dialog.dart';
-
 /// 「检查更新」手动触发:拉取 `$kApiBaseUrl/version`,失败/无更新走轻提示,
-/// 有更新则弹 [showUpdateDialog]。
+/// 有更新则清掉「已忽略版本」→ 顶部更新 banner 显示 + toast(不弹窗)。
 Future<void> _checkForUpdate(BuildContext context, WidgetRef ref, AppText t) async {
   final info = await ref.read(updateProvider.notifier).forceCheck();
   if (!context.mounted) return;
@@ -30,7 +28,10 @@ Future<void> _checkForUpdate(BuildContext context, WidgetRef ref, AppText t) asy
     showPangolinToast(context, t.updateUpToDate);
     return;
   }
-  await showUpdateDialog(context, t, info);
+  // 有更新:清掉「已忽略版本」→ 顶部 banner 重新显示(不弹窗);toast 提示一下。
+  // 强制更新由 home_shell 的 listen 走不可关闭弹窗,这里无需处理。
+  ref.read(dismissedUpdateVersionProvider.notifier).state = null;
+  showPangolinToast(context, t.updateAvailableTitle(info.latestVersion));
 }
 
 class SettingsPage extends ConsumerWidget {

client/lib/shell/home_shell.dart

@@ -22,27 +22,36 @@ class HomeShell extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final c = context.pangolin;
 
-    // 启动自动检查更新:watch 惰性拉起 updateProvider(延迟 3s→查→1h 轮询);
-    // 有新版且本次会话未忽略时弹更新对话框。非强制更新弹前即标 dismiss,避免
-    // rebuild 重复弹(下轮轮询会重置);强制更新走不可关闭弹窗。
+    // 启动自动检查更新:watch 惰性拉起 updateProvider(延迟 3s→查→1h 轮询)。
+    // 非强制更新 → 顶部 banner(见下,不打断);强制更新 → 不可关闭弹窗。
     ref.listen<AsyncValue<AppUpdateInfo?>>(updateProvider, (prev, next) {
       final info = next.valueOrNull;
-      if (info == null || !info.hasUpdate) return;
-      final notifier = ref.read(updateProvider.notifier);
-      if (notifier.isDismissed) return;
-      if (!info.forceUpdate) notifier.dismiss();
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        if (!context.mounted) return;
-        showUpdateDialog(context, ref.read(appTextProvider), info);
-      });
+      if (info != null && info.hasUpdate && info.forceUpdate) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (context.mounted) {
+            showUpdateDialog(context, ref.read(appTextProvider), info);
+          }
+        });
+      }
     });
-    ref.watch(updateProvider); // 激活 provider(惰性 build)
+
+    final info = ref.watch(updateProvider).valueOrNull;
+    final dismissedVer = ref.watch(dismissedUpdateVersionProvider);
+    final showBanner = info != null &&
+        info.hasUpdate &&
+        !info.forceUpdate &&
+        dismissedVer != info.latestVersion;
 
     final Widget body = switch (context.formFactor) {
       FormFactor.desktop => const DesktopShell(),
       FormFactor.tablet => const TabletShell(),
       FormFactor.mobile => const MobileShell(),
     };
-    return Scaffold(backgroundColor: c.bg, body: body);
+    return Scaffold(
+      backgroundColor: c.bg,
+      body: showBanner
+          ? Column(children: [UpdateBanner(info: info), Expanded(child: body)])
+          : body,
+    );
   }
 }

client/lib/state/update_provider.dart

@@ -47,10 +47,6 @@ class AppUpdateInfo {
 /// 更新检查 Notifier。build() 惰性触发:延迟首查 + 每小时轮询。
 class UpdateNotifier extends AsyncNotifier<AppUpdateInfo?> {
   Timer? _timer;
-  bool _dismissed = false;
-
-  /// 本次会话是否已被用户「稍后」忽略(强制更新不看这个)。
-  bool get isDismissed => _dismissed;
 
   @override
   Future<AppUpdateInfo?> build() async {
@@ -58,18 +54,13 @@ class UpdateNotifier extends AsyncNotifier<AppUpdateInfo?> {
     await Future<void>.delayed(_kInitialDelay);
     final first = await _check();
     _timer = Timer.periodic(_kPollInterval, (_) async {
-      _dismissed = false; // 新一轮允许再次提示
       state = AsyncValue.data(await _check());
     });
     return first;
   }
 
-  /// 用户点「稍后」——本次会话内不再自动弹(直到下轮轮询)。
-  void dismiss() => _dismissed = true;
-
-  /// 设置页「检查更新」手动触发:立即查一次并回结果(不受 dismiss 影响)。
+  /// 设置页「检查更新」手动触发:立即查一次并回结果。
   Future<AppUpdateInfo?> forceCheck() async {
-    _dismissed = false;
     final info = await _check();
     state = AsyncValue.data(info);
     return info;
@@ -133,6 +124,11 @@ class UpdateNotifier extends AsyncNotifier<AppUpdateInfo?> {
 final updateProvider =
     AsyncNotifierProvider<UpdateNotifier, AppUpdateInfo?>(UpdateNotifier.new);
 
+/// 用户在更新 banner 点「稍后再说」时忽略的版本号。忽略后 banner 隐藏;出现号
+/// 不同的更新版本会重新显示;设置页手动「检查更新」会清空以重新提示。响应式,
+/// 供 shell 顶部 banner 的显隐判断。
+final dismissedUpdateVersionProvider = StateProvider<String?>((ref) => null);
+
 /// 按当前平台从服务端 download_urls 里取对应下载直链。
 String? platformDownloadUrl(Map<String, String> downloadUrls) {
   if (Platform.isMacOS) return downloadUrls['macos'];

client/lib/widgets/update_dialog.dart

@@ -6,10 +6,12 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../core/update/app_updater.dart';
 import '../l10n/app_text.dart';
 import '../pangolin_theme.dart';
+import '../state/app_providers.dart';
 import '../state/update_provider.dart';
 import 'pangolin_icons.dart';
 
@@ -78,3 +80,60 @@ class _UpdateDialog extends StatelessWidget {
     );
   }
 }
+
+/// jiu 式顶部更新横条(非强制更新用;强制更新仍走不可关闭弹窗 showUpdateDialog)。
+/// 「立即更新」App 内下载安装;「×」忽略此版本(banner 隐藏,更新版本会重现)。
+class UpdateBanner extends ConsumerWidget {
+  const UpdateBanner({super.key, required this.info});
+  final AppUpdateInfo info;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    return Material(
+      color: c.accentSubtle,
+      child: SafeArea(
+        bottom: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(14, 8, 6, 8),
+          child: Row(children: [
+            Icon(PangolinIcons.zap, size: 17, color: c.accent),
+            const SizedBox(width: 10),
+            Expanded(
+              child: Text(
+                t.updateAvailableTitle(info.latestVersion),
+                style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            const SizedBox(width: 8),
+            TextButton(
+              onPressed: () => unawaited(startInAppUpdate(context, t, info)),
+              style: TextButton.styleFrom(
+                backgroundColor: c.accent,
+                foregroundColor: c.fgOnAccent,
+                padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
+                shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(PangolinRadius.full)),
+                minimumSize: Size.zero,
+                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+              ),
+              child: Text(t.lang.updateNow,
+                  style: PangolinText.caption
+                      .copyWith(fontWeight: FontWeight.w700, fontSize: 12.5)),
+            ),
+            IconButton(
+              onPressed: () =>
+                  ref.read(dismissedUpdateVersionProvider.notifier).state = info.latestVersion,
+              icon: Icon(Icons.close, size: 18, color: c.fg3),
+              padding: EdgeInsets.zero,
+              constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+              tooltip: t.updateLater,
+            ),
+          ]),
+        ),
+      ),
+    );
+  }
+}

design/codegen/gen_flutter_tokens.mjs

@@ -2,7 +2,7 @@
 /**
  * gen_flutter_tokens.mjs — CSS token → Dart codegen
  *
- * 唯一真相源：design/colors_and_type.css
+ * 唯一真相源：design/prototype/tokens.css
  * 输出：    client/lib/pangolin_tokens.gen.dart
  *
  * 生成内容（纯数据层，无 Flutter 实现逻辑）：
@@ -20,7 +20,7 @@ import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const SRC = resolve(__dirname, '../colors_and_type.css');
+const SRC = resolve(__dirname, '../prototype/tokens.css');
 const OUT = resolve(__dirname, '../../client/lib/pangolin_tokens.gen.dart');
 
 if (!existsSync(SRC)) {
@@ -125,7 +125,7 @@ const lines = [];
 
 lines.push(`// pangolin_tokens.gen.dart`);
 lines.push(`// AUTO-GENERATED — 勿手改。`);
-lines.push(`// 源: design/colors_and_type.css`);
+lines.push(`// 源: design/prototype/tokens.css`);
 lines.push(`// 生成器: design/codegen/gen_flutter_tokens.mjs`);
 lines.push(`//`);
 lines.push(`// 包含：PangolinColors · PangolinSpacing · PangolinRadius · PangolinMotion · PangolinShadow`);
@@ -136,7 +136,7 @@ lines.push(``);
 
 // ── PangolinColors ──────────────────────────────────────────────────
 lines.push(`/// ── Primitive color ramps ───────────────────────────────────────────`);
-lines.push(`/// Auto-generated from design/colors_and_type.css :root color ramps.`);
+lines.push(`/// Auto-generated from design/prototype/tokens.css :root color ramps.`);
 lines.push(`class PangolinColors {`);
 lines.push(`  PangolinColors._();`);
 lines.push(``);

design/colors_and_type.css

@@ -1,218 +1,8 @@
 /* =============================================================
-   穿山甲 VPN · Pangolin VPN — Design Tokens
-   colors_and_type.css
-   Single source of truth: color ramps, semantic colors (light + dark),
-   typography, spacing, radii, shadows, motion.
+   穿山甲 VPN · Pangolin VPN — Design Tokens (兼容别名)
+   ⚠️ 真源已迁至 design/prototype/tokens.css（ds-flow 原型单源）。
+   本文件仅为浏览器内 @import 转发,供仍 <link> 此路径的历史 preview/*.html 使用。
+   codegen（Flutter gen_flutter_tokens.mjs / Web build-tokens.mjs）已改读 prototype/tokens.css。
+   改 token 只改 design/prototype/tokens.css,勿在此加变量（不会被 codegen 解析）。
    ============================================================= */
-
-/* ---- Webfonts (open-source; documented as the brand's chosen faces) ----
-   Sora       — display / headings (geometric, friendly)
-   Manrope    — body / UI (humanist geometric)
-   Noto Sans SC — Chinese (CJK companion)
-   JetBrains Mono — data readouts (IP, speed, keys)                       */
-@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
-
-:root {
-  /* ===========================================================
-     1. PRIMITIVE COLOR RAMPS
-     =========================================================== */
-
-  /* Clay / Copper — the pangolin-armor primary (warm earth) */
-  --clay-50:  #FAF3ED;
-  --clay-100: #F2E2D4;
-  --clay-200: #E6C7AC;
-  --clay-300: #D9A982;
-  --clay-400: #CC8B5C;
-  --clay-500: #B96A3D;   /* ← brand primary */
-  --clay-600: #9E5630;
-  --clay-700: #7E4426;
-  --clay-800: #5E331D;
-  --clay-900: #3D2213;
-
-  /* Sand / Taupe — warm neutral ramp */
-  --sand-50:  #FAF8F4;
-  --sand-100: #F2EEE7;
-  --sand-200: #E6DFD3;
-  --sand-300: #D2C8B8;
-  --sand-400: #B0A491;
-  --sand-500: #8C8270;
-  --sand-600: #6B6253;
-  --sand-700: #4E4940;
-  --sand-800: #2E2A24;
-  --sand-900: #1F1C18;
-  --sand-950: #14110E;   /* warm espresso near-black */
-
-  /* Semantic hues (earth-tuned) */
-  --green-400: #7FB07A;
-  --green-500: #5B8C5A;  /* connected / secure */
-  --green-600: #467046;
-  --amber-400: #E2B05A;
-  --amber-500: #D69A3C;  /* connecting / warning */
-  --amber-600: #B47E29;
-  --red-400:   #D4715A;
-  --red-500:   #C0533B;  /* error / disconnect */
-  --red-600:   #9E4230;
-
-  /* ===========================================================
-     2. SEMANTIC TOKENS — LIGHT THEME (default)
-     =========================================================== */
-
-  /* Backgrounds & surfaces */
-  --bg:        var(--sand-50);    /* app canvas */
-  --bg-subtle: var(--sand-100);   /* striped / inset regions */
-  --surface:   #FFFFFF;           /* cards, sheets */
-  --surface-2: var(--sand-50);    /* nested surface */
-  --overlay:   rgba(31, 28, 24, 0.45);
-
-  /* Foreground / text */
-  --fg1: var(--sand-900);         /* primary text */
-  --fg2: var(--sand-600);         /* secondary text */
-  --fg3: var(--sand-500);         /* tertiary / captions */
-  --fg-on-accent: #FFFFFF;        /* text on clay fills */
-
-  /* Brand / accent */
-  --accent:        var(--clay-500);
-  --accent-hover:  var(--clay-600);
-  --accent-press:  var(--clay-700);
-  --accent-subtle: var(--clay-50);
-  --accent-border: var(--clay-200);
-
-  /* Borders & lines */
-  --border:        var(--sand-200);
-  --border-strong: var(--sand-300);
-  --ring: rgba(185, 106, 61, 0.35);   /* focus ring (clay) */
-
-  /* Status */
-  --success: var(--green-500);
-  --success-subtle: #E9F0E6;
-  --warning: var(--amber-500);
-  --warning-subtle: #F8EED6;
-  --danger:  var(--red-500);
-  --danger-subtle: #F6E1DA;
-
-  /* ===========================================================
-     3. TYPOGRAPHY
-     =========================================================== */
-  --font-display: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
-  --font-sans:    'Manrope', 'Noto Sans SC', system-ui, sans-serif;
-  --font-cjk:     'Noto Sans SC', 'Manrope', system-ui, sans-serif;
-  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
-
-  /* Type scale (root 16px) */
-  --text-display-xl: 3rem;     /* 48 */
-  --text-display:    2.25rem;  /* 36 */
-  --text-h1:         1.875rem; /* 30 */
-  --text-h2:         1.5rem;   /* 24 */
-  --text-h3:         1.25rem;  /* 20 */
-  --text-body-lg:    1.125rem; /* 18 */
-  --text-body:       1rem;     /* 16 */
-  --text-sm:         0.875rem; /* 14 */
-  --text-caption:    0.75rem;  /* 12 */
-
-  --leading-tight: 1.15;
-  --leading-snug:  1.3;
-  --leading-normal:1.5;
-  --leading-relaxed:1.65;
-
-  --tracking-tight: -0.02em;
-  --tracking-snug:  -0.01em;
-  --tracking-wide:  0.04em;
-  --tracking-caps:  0.08em;
-
-  /* ===========================================================
-     4. SPACING (4px base)
-     =========================================================== */
-  --space-0: 0;
-  --space-1: 0.25rem;  /* 4  */
-  --space-2: 0.5rem;   /* 8  */
-  --space-3: 0.75rem;  /* 12 */
-  --space-4: 1rem;     /* 16 */
-  --space-5: 1.25rem;  /* 20 */
-  --space-6: 1.5rem;   /* 24 */
-  --space-8: 2rem;     /* 32 */
-  --space-10: 2.5rem;  /* 40 */
-  --space-12: 3rem;    /* 48 */
-  --space-16: 4rem;    /* 64 */
-
-  /* ===========================================================
-     5. RADII (generous = friendly)
-     =========================================================== */
-  --radius-sm:  6px;
-  --radius-md:  10px;
-  --radius-lg:  14px;
-  --radius-xl:  20px;
-  --radius-2xl: 28px;
-  --radius-full: 999px;
-
-  /* ===========================================================
-     6. SHADOWS (warm-tinted, soft)
-     =========================================================== */
-  --shadow-sm: 0 1px 2px rgba(45, 30, 20, 0.06);
-  --shadow-md: 0 4px 14px rgba(45, 30, 20, 0.08);
-  --shadow-lg: 0 12px 32px rgba(45, 30, 20, 0.12);
-  --shadow-xl: 0 24px 60px rgba(45, 30, 20, 0.16);
-  --shadow-focus: 0 0 0 4px var(--ring);
-
-  /* ===========================================================
-     7. MOTION
-     =========================================================== */
-  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
-  --dur-fast: 140ms; /* @kind other */
-  --dur-base: 220ms; /* @kind other */
-  --dur-slow: 360ms; /* @kind other */
-}
-
-/* ===========================================================
-   DARK THEME — warm espresso
-   Apply via [data-theme="dark"] on <html> or any container.
-   =========================================================== */
-[data-theme="dark"] {
-  --bg:        var(--sand-950);
-  --bg-subtle: var(--sand-900);
-  --surface:   #221E19;
-  --surface-2: #2A251F;
-  --overlay:   rgba(0, 0, 0, 0.6);
-
-  --fg1: #F4EFE8;
-  --fg2: #B6AC9C;
-  --fg3: #897F6F;
-  --fg-on-accent: #1F1C18;
-
-  --accent:        var(--clay-400);
-  --accent-hover:  var(--clay-300);
-  --accent-press:  var(--clay-500);
-  --accent-subtle: rgba(204, 139, 92, 0.14);
-  --accent-border: rgba(204, 139, 92, 0.30);
-
-  --border:        rgba(242, 238, 231, 0.10);
-  --border-strong: rgba(242, 238, 231, 0.18);
-  --ring: rgba(204, 139, 92, 0.45);
-
-  --success: var(--green-400);
-  --success-subtle: rgba(127, 176, 122, 0.16);
-  --warning: var(--amber-400);
-  --warning-subtle: rgba(226, 176, 90, 0.16);
-  --danger:  var(--red-400);
-  --danger-subtle: rgba(212, 113, 90, 0.16);
-
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
-  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
-  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
-}
-
-/* ===========================================================
-   SEMANTIC TYPE CLASSES  (use directly in markup)
-   =========================================================== */
-.t-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
-.t-display    { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
-.t-h1         { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
-.t-h2         { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
-.t-h3         { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); }
-.t-body-lg    { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; line-height: var(--leading-relaxed); }
-.t-body       { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-normal); }
-.t-sm         { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-normal); }
-.t-caption    { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-normal); }
-.t-overline   { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
-.t-mono       { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; font-feature-settings: 'tnum' 1; }
+@import url('./prototype/tokens.css');

design/prototype/atoms.css

@@ -0,0 +1,272 @@
+/* =============================================================
+   穿山甲 VPN · Pangolin VPN — Prototype Atoms
+   design/prototype/atoms.css
+   -------------------------------------------------------------
+   本文件是「原型公用组件原子层」的唯一真相源（single source）。
+   canonical CSS 原子类，沉淀自 design/preview/*.html 组件规格、
+   web/usercenter/components/shared.tsx、web/website/src/styles/website.css
+   与 client/lib/widgets/*.dart 的交互态语义。
+
+   铁律（写/改本文件必守，对齐 design/CLAUDE.md §1）：
+   1. 颜色 / 圆角 / 间距 / 字号 / 阴影 / 字体 一律走 var(--token)
+      （token 定义在 tokens.css）。禁任何硬编码 hex / rgb / 魔法数。
+   2. 明暗双主题「自动」适配：原子类只引语义 token（--surface / --fg1 …），
+      主题切换由 tokens.css 的 [data-theme="dark"] 负责——
+      本文件里不写任何 [data-theme] 分支。
+   3. 暖大地色 · 大圆角（按钮全胶囊 radius-full / 卡片 lg–xl / 输入 md）·
+      柔和暖阴影 · 状态用「色点 + 文字胶囊」非 emoji。
+   4. 交互态语义：hover 主色加深一档 · press 缩放 .97 · focus clay 光环
+      （shadow-focus）· disabled sand-200 底 + sand-400 字。
+   5. 每新增一个原子，须在 design/prototype/index.html 登记（登记簿单源）。
+
+   使用前先在页面 <head> 引入：tokens.css（令牌）+ 本文件（原子）。
+   ============================================================= */
+
+
+/* =============================================================
+   BUTTONS  ·  .btn + variants
+   全胶囊圆角 · hover 加深 · press 收缩 .97 · focus clay 光环
+   变体：.btn-primary(实心 clay) · .btn-ghost(描边/幽灵) ·
+        .btn-subtle(次要描边) · .btn-danger · 尺寸 .btn-lg · .btn-icon
+   ============================================================= */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: var(--text-sm);
+  line-height: 1;
+  border: none;
+  border-radius: var(--radius-full);
+  padding: var(--space-3) var(--space-5);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color var(--dur-fast) var(--ease-out),
+              color var(--dur-fast) var(--ease-out),
+              border-color var(--dur-fast) var(--ease-out),
+              transform var(--dur-fast) var(--ease-out),
+              box-shadow var(--dur-fast) var(--ease-out);
+}
+.btn > svg { width: 16px; height: 16px; flex-shrink: 0; }
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+.btn:active { transform: scale(0.97); }
+.btn:disabled,
+.btn.is-disabled {
+  background: var(--sand-200);
+  color: var(--sand-400);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+  border-color: transparent;
+}
+
+/* Primary — 实心黏土铜 */
+.btn-primary { background: var(--accent); color: var(--fg-on-accent); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-primary:active { background: var(--accent-press); }
+
+/* Ghost — 透明底、clay 字，hover 上 accent-subtle */
+.btn-ghost { background: transparent; color: var(--accent); }
+.btn-ghost:hover { background: var(--accent-subtle); }
+
+/* Subtle — surface 底 + 强描边（次要动作） */
+.btn-subtle {
+  background: var(--surface);
+  color: var(--fg1);
+  border: 1.5px solid var(--border-strong);
+}
+.btn-subtle:hover { border-color: var(--accent); color: var(--accent); }
+
+/* Danger — 危险动作（断开 / 移除设备） */
+.btn-danger { background: var(--danger-subtle); color: var(--red-600); }
+.btn-danger:hover { background: var(--danger); color: var(--fg-on-accent); }
+
+/* 尺寸 / 形态修饰 */
+.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-body); }
+.btn-icon { padding: var(--space-3); }        /* 正方形图标按钮（配 radius-full 成圆） */
+.btn-block { width: 100%; }
+
+
+/* =============================================================
+   CARD  ·  .card
+   surface 底 + border + radius-xl + shadow-sm
+   ============================================================= */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-5);
+}
+.card-flush { padding: 0; }          /* 列表容器（server-row 组）用，内容自带 padding */
+
+
+/* =============================================================
+   INPUT  ·  .input (+ .field / .flabel)
+   强描边 + radius-md + focus clay 光环
+   ============================================================= */
+.field { display: block; }
+.flabel {
+  display: block;
+  font-family: var(--font-sans);
+  font-size: var(--text-caption);
+  font-weight: 600;
+  color: var(--fg2);
+  margin-bottom: var(--space-2);
+}
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--fg1);
+  background: var(--surface);
+  border: 1.5px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  transition: border-color var(--dur-fast) var(--ease-out),
+              box-shadow var(--dur-fast) var(--ease-out);
+}
+.input::placeholder { color: var(--fg3); }
+.input:focus,
+.input.is-focused {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--shadow-focus);
+}
+.input:disabled {
+  background: var(--bg-subtle);
+  color: var(--fg3);
+  cursor: not-allowed;
+}
+.input.is-error { border-color: var(--danger); }
+.input.is-error:focus { box-shadow: 0 0 0 4px var(--danger-subtle); }
+
+
+/* =============================================================
+   BADGE / PILL  ·  .pill (+ status modifiers)
+   状态胶囊：色点 + 文字（非 emoji）。全胶囊圆角。
+   状态：.is-success / .is-warning / .is-danger / .is-neutral
+   变体：.pill-accent(实心 clay，如 PRO) · .pill-outline(accent 描边，如节点属性)
+   ============================================================= */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--text-caption);
+  font-weight: 600;
+  line-height: 1;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-full);
+  background: var(--sand-100);
+  color: var(--fg2);
+}
+.pill .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  background: var(--sand-400);
+  flex-shrink: 0;
+}
+/* alias：.badge === .pill（语义等价，命名习惯不同） */
+.badge { }
+
+.pill.is-success { background: var(--success-subtle); color: var(--green-600); }
+.pill.is-success .dot { background: var(--success); }
+.pill.is-warning { background: var(--warning-subtle); color: var(--amber-600); }
+.pill.is-warning .dot { background: var(--warning); }
+.pill.is-danger  { background: var(--danger-subtle);  color: var(--red-600); }
+.pill.is-danger .dot { background: var(--danger); }
+.pill.is-neutral { background: var(--sand-100); color: var(--fg2); }
+.pill.is-neutral .dot { background: var(--sand-400); }
+
+/* 实心 accent（PRO 会员等强调标签） */
+.pill-accent { background: var(--accent); color: var(--fg-on-accent); }
+/* accent 描边（节点属性：流媒体 / P2P 等） */
+.pill-outline {
+  background: var(--accent-subtle);
+  color: var(--accent);
+  border: 1px solid var(--accent-border);
+}
+
+
+/* =============================================================
+   LANGUAGE SELECT  ·  .langsel (触发药丸) + .menu (绝对定位菜单)
+   对齐 usercenter shared.tsx::LangSeg / website 的自定义下拉：
+   不依赖原生 <select>（会漂移），按钮 + 自控绝对定位菜单。
+   ============================================================= */
+.langsel {
+  position: relative;
+  display: inline-block;
+}
+/* 触发按钮：药丸形，bg-subtle 底 + 细描边 */
+.langsel-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--text-caption);
+  font-weight: 700;
+  color: var(--fg2);
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: border-color var(--dur-fast) var(--ease-out),
+              color var(--dur-fast) var(--ease-out);
+}
+.langsel-trigger:hover { border-color: var(--border-strong); color: var(--fg1); }
+.langsel-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.langsel-trigger > svg { width: 11px; height: 11px; }
+/* 展开态：caret 翻转（配合 .is-open 或 [aria-expanded="true"]） */
+.langsel-trigger[aria-expanded="true"] > svg,
+.langsel.is-open .langsel-trigger > svg { transform: rotate(180deg); }
+
+/* 绝对定位菜单（下拉列表容器） */
+.menu {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  min-width: 132px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-1);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  z-index: 60;
+}
+.menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--fg1);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  transition: background-color var(--dur-fast) var(--ease-out);
+}
+.menu-item:hover { background: var(--bg-subtle); }
+/* 选中项：accent-subtle 底 + clay 字 */
+.menu-item.is-selected,
+.menu-item[aria-selected="true"] {
+  background: var(--accent-subtle);
+  color: var(--accent);
+  font-weight: 700;
+}

design/prototype/icons.js

@@ -0,0 +1,100 @@
+// icons.js — SVG sprite 单源（Lucide 细线条，viewBox 0 0 24 24 / stroke-width 2 / 圆角端点，ISC 许可）。
+// 用法：<svg class="ic"><use href="#i-power"/></svg>；.ic{ width/height/color } 即可控制尺寸与颜色。
+// 收敛三处分散的 Lucide 图标为一份权威 sprite：
+//   · usercenter —— web/usercenter/components/icons.tsx 的内联路径（权威副本，逐字照抄）。
+//   · lucide-react —— web/website/node_modules/lucide-react（usercenter 没有的从包源提取）。
+// 新增图标先在此登记 symbol，再用 <use> 引用；勿手写/瞎猜路径。
+(function () {
+  // key = kebab-name，value = 该图标的 lucide 子元素串（照搬权威来源）。
+  var ICONS = {
+    // ── 源自 usercenter（web/usercenter/components/icons.tsx 内联，逐字照抄）──
+    'layout-dashboard': '<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>',
+    'link': '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+    'ticket': '<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/>',
+    'users': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+    'copy': '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+    'refresh-cw': '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/>',
+    'qr-code': '<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>',
+    'download': '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',
+    'check': '<path d="M20 6 9 17l-5-5"/>',
+    'check-circle': '<path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/>',
+    'zap': '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
+    'clock': '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+    'shield-check': '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
+    'shield': '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+    'crown': '<path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"/><path d="M5 21h14"/>',
+    'credit-card': '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
+    'send': '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>',
+    'message-circle': '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
+    'mail': '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
+    'shopping-bag': '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
+    'log-out': '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>',
+    'external-link': '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+    'gift': '<rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/>',
+    'smartphone': '<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>',
+    'lock': '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+    'chevron-right': '<path d="m9 18 6-6-6-6"/>',
+    'arrow-down': '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
+    'settings': '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+    'trash-2': '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
+    'monitor': '<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>',
+    'key': '<path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/>',
+    'sun': '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
+    'moon': '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+    'alert-triangle': '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    'x': '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+
+    // ── 源自 lucide-react 包（web/website/node_modules/lucide-react v0.469.0，usercenter 未含）──
+    'power': '<path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/>',
+    'loader-circle': '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>',
+    'globe': '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
+    'user': '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+    'search': '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+    'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+    'arrow-left': '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+    'arrow-up': '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
+    'arrow-right': '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+    'compass': '<path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"/><circle cx="12" cy="12" r="10"/>',
+    'chart-no-axes-column': '<line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/>',
+    'map-pin': '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
+    'laptop': '<path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"/>',
+    'monitor-smartphone': '<path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/>',
+    'play-circle': '<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>',
+    'wifi': '<path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/>',
+    'eye': '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+    'eye-off': '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>',
+    'more-vertical': '<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>',
+    'pencil': '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
+    'terminal': '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+    'menu': '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>'
+  };
+
+  // 组装隐藏 sprite：每个图标一个 <symbol>，符号上带 lucide 标准描边属性，故 .ic 只需管 width/height/color。
+  function buildSprite() {
+    var parts = ['<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">'];
+    for (var name in ICONS) {
+      if (!Object.prototype.hasOwnProperty.call(ICONS, name)) continue;
+      parts.push(
+        '<symbol id="i-' + name + '" viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
+        'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + ICONS[name] + '</symbol>'
+      );
+    }
+    parts.push('</svg>');
+    return parts.join('');
+  }
+
+  function inject() {
+    if (document.getElementById('pangolin-icon-sprite')) return;
+    var d = document.createElement('div');
+    d.id = 'pangolin-icon-sprite';
+    d.style.cssText = 'position:absolute;width:0;height:0';
+    d.innerHTML = buildSprite();
+    document.body.insertBefore(d, document.body.firstChild);
+  }
+
+  if (document.readyState !== 'loading') inject();
+  else document.addEventListener('DOMContentLoaded', inject);
+
+  // 便于调试/校验：暴露原始映射。
+  if (typeof window !== 'undefined') window.PANGOLIN_ICONS = ICONS;
+})();

design/prototype/serve.mjs

@@ -0,0 +1,97 @@
+// 零依赖本地热重载静态服务器 — pangolin 原型单源预览
+// 用法: node design/prototype/serve.mjs [port]   默认 5180
+// 评审给 URL,不截图(ds-flow L3)。
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawn } from 'node:child_process';
+
+const ROOT = path.dirname(fileURLToPath(import.meta.url));
+const PORT = Number(process.argv[2]) || 5180;
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.woff2': 'font/woff2',
+  '.otf': 'font/otf',
+  '.ttf': 'font/ttf',
+};
+
+const clients = new Set();
+const RELOAD_SNIPPET = `\n<script>
+(function(){ try{
+  var es=new EventSource('/__reload');
+  es.onmessage=function(){ location.reload(); };
+}catch(e){} })();
+</script>\n`;
+
+const server = http.createServer((req, res) => {
+  if (req.url === '/__reload') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    });
+    res.write('retry: 500\n\n');
+    clients.add(res);
+    req.on('close', () => clients.delete(res));
+    return;
+  }
+
+  let urlPath = decodeURIComponent(req.url.split('?')[0]);
+  if (urlPath === '/') urlPath = '/index.html';
+  const filePath = path.join(ROOT, urlPath);
+  if (!filePath.startsWith(ROOT)) { res.writeHead(403); res.end('forbidden'); return; }
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) { res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' }); res.end('<h1>404</h1>'); return; }
+    const ext = path.extname(filePath).toLowerCase();
+    const mime = MIME[ext] || 'application/octet-stream';
+    const noCache = { 'Cache-Control': 'no-store, no-cache, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' };
+    if (ext === '.html') {
+      const html = data.toString('utf8').replace('</body>', RELOAD_SNIPPET + '</body>');
+      res.writeHead(200, { 'Content-Type': mime, ...noCache });
+      res.end(html);
+    } else {
+      res.writeHead(200, { 'Content-Type': mime, ...noCache });
+      res.end(data);
+    }
+  });
+});
+
+// 设计系统守门:启动 + 每次改动自动跑 check-ds.mjs(Phase 5 建立后生效)。
+const CHECK_DS = path.join(ROOT, 'tools', 'check-ds.mjs');
+function runDsCheck() {
+  if (!fs.existsSync(CHECK_DS)) return; // Phase 5 前无闸,静默跳过
+  const p = spawn(process.execPath, [CHECK_DS], { cwd: ROOT });
+  let out = '';
+  p.stdout.on('data', d => out += d);
+  p.stderr.on('data', d => out += d);
+  p.on('close', code => {
+    const t = new Date().toLocaleTimeString();
+    if (code === 0) console.log(`\x1b[32m[设计系统 ✓ ${t}] 颜色全部走 token、变量均已定义\x1b[0m`);
+    else console.log(`\x1b[31m[设计系统 ✗ ${t}] 存在违规 —— 运行 node tools/check-ds.mjs 看详情\x1b[0m`);
+  });
+}
+
+let debounce;
+fs.watch(ROOT, { recursive: true }, (_ev, file) => {
+  if (file && file.endsWith('serve.mjs')) return;
+  clearTimeout(debounce);
+  debounce = setTimeout(() => {
+    for (const c of clients) c.write('data: reload\n\n');
+    if (file && /\.(html|css|js)$/.test(file)) runDsCheck();
+  }, 80);
+});
+
+server.listen(PORT, () => {
+  console.log(`prototype live at http://localhost:${PORT}/  (watching ${ROOT})`);
+  runDsCheck();
+});

design/prototype/tokens.css

@@ -0,0 +1,218 @@
+/* =============================================================
+   穿山甲 VPN · Pangolin VPN — Design Tokens
+   colors_and_type.css
+   Single source of truth: color ramps, semantic colors (light + dark),
+   typography, spacing, radii, shadows, motion.
+   ============================================================= */
+
+/* ---- Webfonts (open-source; documented as the brand's chosen faces) ----
+   Sora       — display / headings (geometric, friendly)
+   Manrope    — body / UI (humanist geometric)
+   Noto Sans SC — Chinese (CJK companion)
+   JetBrains Mono — data readouts (IP, speed, keys)                       */
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  /* ===========================================================
+     1. PRIMITIVE COLOR RAMPS
+     =========================================================== */
+
+  /* Clay / Copper — the pangolin-armor primary (warm earth) */
+  --clay-50:  #FAF3ED;
+  --clay-100: #F2E2D4;
+  --clay-200: #E6C7AC;
+  --clay-300: #D9A982;
+  --clay-400: #CC8B5C;
+  --clay-500: #B96A3D;   /* ← brand primary */
+  --clay-600: #9E5630;
+  --clay-700: #7E4426;
+  --clay-800: #5E331D;
+  --clay-900: #3D2213;
+
+  /* Sand / Taupe — warm neutral ramp */
+  --sand-50:  #FAF8F4;
+  --sand-100: #F2EEE7;
+  --sand-200: #E6DFD3;
+  --sand-300: #D2C8B8;
+  --sand-400: #B0A491;
+  --sand-500: #8C8270;
+  --sand-600: #6B6253;
+  --sand-700: #4E4940;
+  --sand-800: #2E2A24;
+  --sand-900: #1F1C18;
+  --sand-950: #14110E;   /* warm espresso near-black */
+
+  /* Semantic hues (earth-tuned) */
+  --green-400: #7FB07A;
+  --green-500: #5B8C5A;  /* connected / secure */
+  --green-600: #467046;
+  --amber-400: #E2B05A;
+  --amber-500: #D69A3C;  /* connecting / warning */
+  --amber-600: #B47E29;
+  --red-400:   #D4715A;
+  --red-500:   #C0533B;  /* error / disconnect */
+  --red-600:   #9E4230;
+
+  /* ===========================================================
+     2. SEMANTIC TOKENS — LIGHT THEME (default)
+     =========================================================== */
+
+  /* Backgrounds & surfaces */
+  --bg:        var(--sand-50);    /* app canvas */
+  --bg-subtle: var(--sand-100);   /* striped / inset regions */
+  --surface:   #FFFFFF;           /* cards, sheets */
+  --surface-2: var(--sand-50);    /* nested surface */
+  --overlay:   rgba(31, 28, 24, 0.45);
+
+  /* Foreground / text */
+  --fg1: var(--sand-900);         /* primary text */
+  --fg2: var(--sand-600);         /* secondary text */
+  --fg3: var(--sand-500);         /* tertiary / captions */
+  --fg-on-accent: #FFFFFF;        /* text on clay fills */
+
+  /* Brand / accent */
+  --accent:        var(--clay-500);
+  --accent-hover:  var(--clay-600);
+  --accent-press:  var(--clay-700);
+  --accent-subtle: var(--clay-50);
+  --accent-border: var(--clay-200);
+
+  /* Borders & lines */
+  --border:        var(--sand-200);
+  --border-strong: var(--sand-300);
+  --ring: rgba(185, 106, 61, 0.35);   /* focus ring (clay) */
+
+  /* Status */
+  --success: var(--green-500);
+  --success-subtle: #E9F0E6;
+  --warning: var(--amber-500);
+  --warning-subtle: #F8EED6;
+  --danger:  var(--red-500);
+  --danger-subtle: #F6E1DA;
+
+  /* ===========================================================
+     3. TYPOGRAPHY
+     =========================================================== */
+  --font-display: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
+  --font-sans:    'Manrope', 'Noto Sans SC', system-ui, sans-serif;
+  --font-cjk:     'Noto Sans SC', 'Manrope', system-ui, sans-serif;
+  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+  /* Type scale (root 16px) */
+  --text-display-xl: 3rem;     /* 48 */
+  --text-display:    2.25rem;  /* 36 */
+  --text-h1:         1.875rem; /* 30 */
+  --text-h2:         1.5rem;   /* 24 */
+  --text-h3:         1.25rem;  /* 20 */
+  --text-body-lg:    1.125rem; /* 18 */
+  --text-body:       1rem;     /* 16 */
+  --text-sm:         0.875rem; /* 14 */
+  --text-caption:    0.75rem;  /* 12 */
+
+  --leading-tight: 1.15;
+  --leading-snug:  1.3;
+  --leading-normal:1.5;
+  --leading-relaxed:1.65;
+
+  --tracking-tight: -0.02em;
+  --tracking-snug:  -0.01em;
+  --tracking-wide:  0.04em;
+  --tracking-caps:  0.08em;
+
+  /* ===========================================================
+     4. SPACING (4px base)
+     =========================================================== */
+  --space-0: 0;
+  --space-1: 0.25rem;  /* 4  */
+  --space-2: 0.5rem;   /* 8  */
+  --space-3: 0.75rem;  /* 12 */
+  --space-4: 1rem;     /* 16 */
+  --space-5: 1.25rem;  /* 20 */
+  --space-6: 1.5rem;   /* 24 */
+  --space-8: 2rem;     /* 32 */
+  --space-10: 2.5rem;  /* 40 */
+  --space-12: 3rem;    /* 48 */
+  --space-16: 4rem;    /* 64 */
+
+  /* ===========================================================
+     5. RADII (generous = friendly)
+     =========================================================== */
+  --radius-sm:  6px;
+  --radius-md:  10px;
+  --radius-lg:  14px;
+  --radius-xl:  20px;
+  --radius-2xl: 28px;
+  --radius-full: 999px;
+
+  /* ===========================================================
+     6. SHADOWS (warm-tinted, soft)
+     =========================================================== */
+  --shadow-sm: 0 1px 2px rgba(45, 30, 20, 0.06);
+  --shadow-md: 0 4px 14px rgba(45, 30, 20, 0.08);
+  --shadow-lg: 0 12px 32px rgba(45, 30, 20, 0.12);
+  --shadow-xl: 0 24px 60px rgba(45, 30, 20, 0.16);
+  --shadow-focus: 0 0 0 4px var(--ring);
+
+  /* ===========================================================
+     7. MOTION
+     =========================================================== */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
+  --dur-fast: 140ms; /* @kind other */
+  --dur-base: 220ms; /* @kind other */
+  --dur-slow: 360ms; /* @kind other */
+}
+
+/* ===========================================================
+   DARK THEME — warm espresso
+   Apply via [data-theme="dark"] on <html> or any container.
+   =========================================================== */
+[data-theme="dark"] {
+  --bg:        var(--sand-950);
+  --bg-subtle: var(--sand-900);
+  --surface:   #221E19;
+  --surface-2: #2A251F;
+  --overlay:   rgba(0, 0, 0, 0.6);
+
+  --fg1: #F4EFE8;
+  --fg2: #B6AC9C;
+  --fg3: #897F6F;
+  --fg-on-accent: #1F1C18;
+
+  --accent:        var(--clay-400);
+  --accent-hover:  var(--clay-300);
+  --accent-press:  var(--clay-500);
+  --accent-subtle: rgba(204, 139, 92, 0.14);
+  --accent-border: rgba(204, 139, 92, 0.30);
+
+  --border:        rgba(242, 238, 231, 0.10);
+  --border-strong: rgba(242, 238, 231, 0.18);
+  --ring: rgba(204, 139, 92, 0.45);
+
+  --success: var(--green-400);
+  --success-subtle: rgba(127, 176, 122, 0.16);
+  --warning: var(--amber-400);
+  --warning-subtle: rgba(226, 176, 90, 0.16);
+  --danger:  var(--red-400);
+  --danger-subtle: rgba(212, 113, 90, 0.16);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
+}
+
+/* ===========================================================
+   SEMANTIC TYPE CLASSES  (use directly in markup)
+   =========================================================== */
+.t-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
+.t-display    { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
+.t-h1         { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
+.t-h2         { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
+.t-h3         { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); }
+.t-body-lg    { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; line-height: var(--leading-relaxed); }
+.t-body       { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-normal); }
+.t-sm         { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-normal); }
+.t-caption    { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-normal); }
+.t-overline   { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
+.t-mono       { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; font-feature-settings: 'tnum' 1; }

docs/frontend-ds-refactor-plan.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>前端设计系统治理重构（ds-flow）· 实现计划</title>
+<style>
+  :root{
+    --bg:#0f1117; --panel:#171a22; --panel2:#1d2129; --fg:#e6e8ee; --fg2:#a8afbd;
+    --accent:#e0884f; --accent2:#5fb0c9; --ok:#5ec27a; --bad:#e06a6a; --warn:#e0b84f;
+    --border:#272c36; --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
+    --sans:-apple-system,"PingFang SC","Helvetica Neue",Arial,sans-serif;
+  }
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.7;font-size:15px}
+  .wrap{max-width:920px;margin:0 auto;padding:48px 24px 96px}
+  h1{font-size:29px;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
+  .sub{color:var(--fg2);font-size:15px;margin:0 0 28px}
+  h2{font-size:20px;margin:38px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
+  h3{font-size:16px;margin:22px 0 8px;color:var(--accent)}
+  p{margin:10px 0}
+  code{font-family:var(--mono);font-size:.86em;background:var(--panel2);padding:1px 6px;border-radius:5px;color:#f0d9c4}
+  a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline}
+  .lead{background:linear-gradient(180deg,rgba(224,136,79,.10),transparent);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0 0 20px}
+  .small{color:var(--fg2);font-size:13px}
+  .phase{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:14px 0}
+  .phase h2{margin-top:4px;border:none;padding:0;font-size:18px}
+  ul{margin:8px 0;padding-left:22px} li{margin:5px 0}
+  .box{overflow-x:auto;margin:14px 0}
+  table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:560px}
+  th,td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
+  th{background:var(--panel2);color:var(--fg)}
+  .ok{color:var(--ok);font-weight:700} .bad{color:var(--bad);font-weight:700} .warn{color:var(--warn);font-weight:700}
+  .pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;margin-left:6px}
+  .pill.big{background:rgba(224,106,106,.16);color:var(--bad)}
+  .tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:rgba(94,194,122,.14);color:var(--ok);margin-left:8px;vertical-align:middle}
+  .back{color:var(--fg2);font-size:13px}
+</style>
+</head>
+<body>
+<div class="wrap">
+
+<p class="back"><a href="index.html">← 文档索引</a></p>
+<h1>前端设计系统治理重构 <span class="tag">ds-flow</span></h1>
+<p class="sub">用 ds-flow 把 Flutter 五端 + 官网 + 用户中心收口到「设计单源 · 代码镜像 · 静态闸拦漂移 · 双级像素验收兜底」</p>
+
+<div class="lead">
+<strong>阅读版</strong>；执行真相源 <code>docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md</code>（含 checkbox）。<br>
+<strong>关键前提</strong>：pangolin <b>不是从零 bootstrap，已约 65% 达标</b>——token 单源（含暗色）、Flutter codegen + drift 闸、golden + CI 闸、pre-commit（写好未启用）都在。本计划是<b>补缺口 + Web 共享原子层去重</b>，非推倒重来。主题保持 <b>light / dark 双主题</b>。
+</div>
+
+<h2>现状盘点</h2>
+<div class="box">
+<table>
+<tr><th>维度</th><th>现状</th><th>缺口</th></tr>
+<tr><td>Token 单源</td><td class="ok">✓ colors_and_type.css（含 [data-theme=dark]）</td><td>迁为 ds-flow 原型结构</td></tr>
+<tr><td>Flutter codegen / 主题层</td><td class="ok">✓ gen 层/实现层分离 + drift 闸</td><td>—</td></tr>
+<tr><td>Flutter UI 硬编码</td><td class="ok">✓ 零裸 hex（唯 1 处裸色 adaptive_menu）</td><td>清 1 处</td></tr>
+<tr><td>Flutter golden</td><td class="ok">✓ 36 张 + harness + 真字体 + CI</td><td class="warn">6 张 failure；缺 CJK 测试字体；覆盖不全</td></tr>
+<tr><td>website / usercenter</td><td class="ok">✓ 179 / 171 处 var(--token)</td><td class="bad">零前端测试</td></tr>
+<tr><td>跨端共享组件</td><td class="bad">✗ 下拉/按钮/卡片两端各写一遍</td><td>抽 atoms 对齐</td></tr>
+<tr><td>原型三件套</td><td class="warn">⚠ 有 _ds_manifest/preview/ui_kits</td><td>缺 atoms.css / icons.js / index.html</td></tr>
+<tr><td>静态闸</td><td class="ok">✓ redline / analyze+test / codegen-drift / golden</td><td class="bad">✗ 硬编码色扫描 / fidelity / Web 同源</td></tr>
+<tr><td>pre-commit</td><td class="warn">⚠ .githooks 写好</td><td class="bad">默认未启用</td></tr>
+</table>
+</div>
+
+<h2>已定决策</h2>
+<ul>
+<li><b>Web 去重</b>：两端<b>各自实现 + 同源闸</b>（不建跨端组件包；成本低、风险小，符合 jiu 取舍）</li>
+<li><b>ui_kits</b>：jsx/css 端原型<b>收敛为纯 HTML 原型</b>并删副本（消除与「禁向 design/ 提组件代码副本」的冲突）</li>
+<li><b>节奏</b>：<b>先定稿本计划，再逐刀执行</b>（每刀 commit，tier-1 大改走确认闸）</li>
+</ul>
+
+<h2>执行阶段（6 阶段）</h2>
+
+<div class="phase">
+<h2>Phase 0 — 更新 CLAUDE.md + 计划落库</h2>
+<ul>
+<li>CLAUDE.md 补「前端设计系统治理（ds-flow）」章节：原型单源位置、codegen 命令、L1/L2/L3 三层规则、四道静态闸 +「违规谁拦」对照表、golden/fidelity 双闸定位</li>
+<li>本计划 .md 定稿 + HTML 阅读版 + 登记 docs/index.html</li>
+<li>/todo 建 tier-1 条目 + 6 子任务</li>
+</ul>
+</div>
+
+<div class="phase">
+<h2>Phase 1 — 原型单源三件套（design/prototype/）</h2>
+<p class="small">把散在 ui_kits / preview / _ds_manifest.json 的东西收敛为 ds-flow 标准三件套。</p>
+<ul>
+<li><code>serve.mjs</code> 照搬 jiu（零依赖热重载）</li>
+<li><code>tokens.css</code>：现有 token <b>数值不变</b>，重排为「基础 :root 标量 + [data-theme=dark] 颜色覆盖」结构</li>
+<li><code>atoms.css</code>：按钮/卡片/输入/<b>语言下拉</b>/徽章/状态药丸公用原子（只引 var(--token)）</li>
+<li><code>icons.js</code>：SVG sprite 单源，收敛 website / usercenter / Flutter 三处图标集</li>
+<li><code>index.html</code>：活登记页——light/dark 切换 + 声明式色板 + 全组件/图标展示卡（每 atom 必登记）</li>
+<li>ui_kits jsx 副本提炼后<b>删除</b>；屏级布局参考迁 <code>prototype/screens/</code></li>
+</ul>
+</div>
+
+<div class="phase">
+<h2>Phase 2 — Web token 升为一等公民 + 同源闸</h2>
+<ul>
+<li>两端 token 落点统一指向原型 tokens.css（website→tokens.gen.css / usercenter→public/colors_and_type.css）</li>
+<li><code>tools/check-l1-sync.mjs</code>（照搬 jiu 裁剪）：website / usercenter token 值逐值同源 + icons 同集 + Web hex 白名单扫描</li>
+<li>build-tokens 幂等：重跑零 diff（纳入 CI）</li>
+</ul>
+</div>
+
+<div class="phase">
+<h2>Phase 3 — Web 共享原子层对齐 <span class="pill big">工作量最大</span></h2>
+<p class="small">各自实现 + 同源闸：两端对齐同一 atoms.css，靠闸防漂移。</p>
+<ul>
+<li>抽公共原子：langsel / button / card / input / badge / pill → atoms.css canonical</li>
+<li>website：website.css/site-extra.css 对齐 atoms 语义，非白/黑/logo 硬编码清零</li>
+<li>usercenter：shared.tsx 的 card/input/LangSeg 对齐 atoms 语义，13 处硬编码核对</li>
+<li>两端 langsel 一致性纳入登记；更新 CONTRACT.md（Web 原子清单 + 屏级三态台账）</li>
+</ul>
+</div>
+
+<div class="phase">
+<h2>Phase 4 — Flutter 收尾 + golden 补齐</h2>
+<ul>
+<li>清 adaptive_menu.dart 唯 1 处裸色 → token</li>
+<li>测试字体补 CJK 子集（make-cjk-subset.sh → client/test/fonts + flutter_test_config 注册）</li>
+<li>处理现存 6 张 failure diff，逐张确认后 --update-goldens 重录</li>
+<li>golden 覆盖扩容：desktop/tablet/mobile 全屏 × light/dark 双主题矩阵</li>
+<li>harness 对齐 jiu：多主题循环 + 钉死 viewport/dpr + ProviderScope 固定数据</li>
+</ul>
+</div>
+
+<div class="phase">
+<h2>Phase 5 — 静态闸挂满 + 启用 pre-commit + fidelity 体检</h2>
+<ul>
+<li>硬编码色扫描：Flutter <code>check_ds_code.mjs</code>（含 --changed）+ Web hex 并入 check-l1-sync</li>
+<li>原型校验 <code>check-ds.mjs</code>（照搬 jiu 12 道，按 pangolin 断点/主题裁剪）</li>
+<li>CI 串起来：原型校验 → 跨端同源 → 代码色单源 → codegen 零 diff（已有）→ 测试含 golden（补 mobile+主题）</li>
+<li>启用 pre-commit：install-hooks 纳入文档，增挂 check-ds --changed（条件触发）</li>
+<li>fidelity 像素闸（本地体检，不进 CI）：screens.mjs + fidelity.mjs，逐屏阈值=实测残差+2pp</li>
+<li>全景文档 docs/frontend-overview.html（照搬 jiu 十节）+ 登记索引</li>
+</ul>
+</div>
+
+<h2>Verification（端到端）</h2>
+<ul>
+<li><b>原型</b>：serve.mjs 逐屏目检 light/dark；check-ds 12 道全绿</li>
+<li><b>同源</b>：check-l1-sync 全绿（tokens 逐值 / icons 同集 / Web hex 白名单）</li>
+<li><b>Flutter</b>：analyze + test（golden ×双主题）；check_ds_code 绿；codegen 重跑零 diff</li>
+<li><b>Web</b>：两端 build 通过；token 同源绿；langsel/button/card 对齐 atoms</li>
+<li><b>fidelity</b>：逐屏残差在阈内（首次校准记录实测值）</li>
+<li><b>闸生效</b>：install-hooks 后改一处硬编码色/未登记组件 → pre-commit 或 CI 拦下</li>
+</ul>
+
+<h2>不在本轮</h2>
+<ul>
+<li>新功能 / 新屏开发（本轮是治理重构）</li>
+<li>iOS/iPad 专属布局深度优化（响应式已覆盖）</li>
+<li>三主题扩展（保持 light/dark）</li>
+</ul>
+
+<p class="small" style="margin-top:32px">真相源（含 checkbox 执行跟踪）：<code>docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md</code></p>
+
+</div>
+</body>
+</html>

docs/index.html

@@ -86,6 +86,11 @@
 </a>
 
 <h2>实现计划 / Plans</h2>
+<a class="doc" href="frontend-ds-refactor-plan.html">
+  <div class="t">前端设计系统治理重构（ds-flow 全端）<span class="tag html">HTML</span></div>
+  <div class="d">阅读版；执行真相源 <code>docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md</code>（含 checkbox）。用 ds-flow 把 Flutter 五端 + 官网 + 用户中心收口到「设计单源·代码镜像·静态闸拦漂移·golden/fidelity 双级像素验收兜底」。<b>非从零 bootstrap（已约 65% 达标）</b>：补原型三件套（atoms.css/icons.js/index.html 登记页）+ Web 共享原子层去重（各自实现+同源闸）+ 硬编码色/fidelity 闸 + 启用 pre-commit。6 阶段：CLAUDE.md → 原型单源 → Web token 同源 → Web 原子对齐 → Flutter golden 补齐 → 闸挂满。主题保持 light/dark。</div>
+  <div class="path">docs/frontend-ds-refactor-plan.html · 真相源 docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md</div>
+</a>
 <a class="doc" href="control-plane-tls-tunnel.html">
   <div class="t">控制面 TLS(Cloudflare Tunnel 前置)实现计划 <span class="tag html">HTML</span></div>
   <div class="d">阅读版；执行真相源 <code>docs/superpowers/plans/2026-07-06-control-plane-tls-tunnel.md</code>（含 checkbox）。把控制面 API 从明文 <code>http://103.119.13.48:8080</code> 迁到 <code>https://api.yanmeiai.com</code>（cloudflared 出站隧道前置，源站仅绑 127.0.0.1，数据面 sing-box REALITY :443 全程不动）。6 任务：CF Tunnel 供给 → 客户端切 https/Android 去明文 → CI 守护禁明文 → PANGOLIN_PUBLIC_URL 切 https → 退役明文口（收 loopback，带上线顺序闸）→ 文档。</div>

docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md

@@ -0,0 +1,132 @@
+# 前端设计系统治理重构（ds-flow 落地全端）
+
+> 用 ds-flow 方法论把 pangolin 全部前端（Flutter 五端 + 官网 website + 用户中心 usercenter）
+> 收口到「设计只有一个出生地（原型单源），代码永远是镜像；漂移由静态闸在提交/CI 前拦截，
+> 走样由 golden/fidelity 双级像素验收兜底」。
+>
+> **关键前提（摸底结论）**：pangolin 不是从零 bootstrap，已约 65% 达标——
+> token 单源（`design/colors_and_type.css` 含 `[data-theme=dark]`）、Flutter codegen + drift 闸、
+> golden + CI 闸、pre-commit（写好未启用）都在。本计划是**补缺口 + Web 共享原子层去重**，
+> 不是推倒重来。
+>
+> 主题模型：pangolin 用 **light / dark 两主题**（非 jiu 的 a/b/c 三主题），全程保持。
+>
+> 已定决策：① Web 两端**各自实现 + 同源闸**（不建跨端共享组件包）；
+> ② `design/ui_kits/` 的 jsx/css 端原型**收敛为纯 HTML 原型**并删副本；
+> ③ **先定稿本计划，再逐刀执行**（每刀 commit）。
+>
+> 参考样板：`~/code/jiu`（`design/prototype/` + `tools/` + `client/lib/core/theme/` + `docs/frontend-overview.html`）。
+
+---
+
+## Phase 0 — 更新 CLAUDE.md + 计划落库
+
+- [x] 0.1 CLAUDE.md 新增「## 前端设计系统治理（ds-flow）」章节：
+  - 原型单源位置（`design/prototype/`：tokens/atoms/icons/index.html 登记簿）+ 只读约定
+  - codegen 命令（Flutter `gen_flutter_tokens.mjs`；Web `build-tokens.mjs` 同源）
+  - 三层治理 L1/L2/L3 规则速查
+  - 四道静态闸清单 + 「违规谁拦」对照表（原型校验 / 跨端同源 / 代码色单源 / codegen 零 diff）
+  - golden（多主题回归自比）/ fidelity（对原型 pixelmatch，本地体检不进 CI）双闸定位
+- [x] 0.2 本 `.md` 定稿 + 生成 HTML 阅读版 `docs/frontend-ds-refactor-plan.html`，登记进 `docs/index.html`「实现计划」
+- [x] 0.3 `/todo` 建 tier-1 条目跟踪本重构，拆 6 个子任务（对应 Phase 1-5 + 收尾）
+
+---
+
+## Phase 1 — 原型单源三件套（design/prototype/）
+
+把散在 `ui_kits/`（6 端 jsx/css 原型）+ `preview/`（20 规格 HTML）+ `_ds_manifest.json`（登记簿）
+的东西收敛成 ds-flow 标准三件套。
+
+- [x] 1.1 建 `design/prototype/` 目录；`serve.mjs` 照搬 jiu（零依赖热重载，默认端口按 jiu）
+- [x] 1.2 `design/prototype/tokens.css`：从现有 `colors_and_type.css` 迁移/规整为
+  「基础 `:root`（主题无关标量：间距/圆角/字号/字体/阴影/动效）+ `[data-theme=dark]` 颜色覆盖块」结构。
+  **保持数值不变**，只重排为 ds-flow 结构；`colors_and_type.css` 作为兼容别名或迁移为薄封装（不破坏现有 codegen）
+- [x] 1.3 `design/prototype/atoms.css`：把按钮/卡片/输入/**语言下拉**/徽章/状态药丸等公用原子类沉淀为
+  只引 `var(--token)` 的 CSS（镜像 `design/preview/` 现有规格 + client widgets 实现语义）
+- [x] 1.4 `design/prototype/icons.js`：SVG sprite 单源（`<symbol id="i-*">`），
+  收敛现有分散图标（website Icon.astro / usercenter icons.tsx / Flutter pangolin_icons.dart 三处的图标集）
+- [ ] 1.5 `design/prototype/index.html`：活登记页——三…两主题（light/dark）切换 + `data-swatches` 声明式色板 +
+  字号梯度 + 圆角/间距/阴影 + 全部公用组件原子展示卡 + 图标库全展示。**每个 atom 必须在此登记**
+- [ ] 1.6 `design/ui_kits/` 的 jsx/css 端原型：提炼进 prototype 后**删除 jsx 组件副本**（消除与
+  「禁向 design/ 提组件代码副本」的冲突 + 漂移源）；保留必要的屏级 HTML 布局参考迁进 `prototype/screens/`
+- [ ] 1.7 更新/退役 `_ds_manifest.json` + `_ds_bundle.js`：登记簿职责交给 `index.html`，
+  manifest 若仍被消费则保留为派生产物（记清谁是真源）
+
+---
+
+## Phase 2 — Web token 升为一等公民 + 同源闸
+
+现状：Web 的 `build-tokens.mjs` 只是「原样拷 css，删 Google Fonts 行」。升级为受闸守护的同源关系。
+
+- [ ] 2.1 确认两端 token 落点与生成链：website→`src/styles/tokens.gen.css`、
+  usercenter→`public/colors_and_type.css`；源统一指向 `design/prototype/tokens.css`（Phase 1 后）
+- [ ] 2.2 建 `tools/check-l1-sync.mjs`（照搬 jiu 裁剪）：
+  - ① website `tokens.gen.css` token 值 ≡ 原型 tokens.css（逐值）
+  - ② usercenter `public/colors_and_type.css` ≡ 原型（逐值）
+  - ③ icons 同源：website / usercenter / Flutter 三处图标集 ⊆ 原型 icons.js sprite
+  - ④ Web 硬编码色扫描（白名单 `#fff/#000/logo 固定色`，其余报警）
+- [ ] 2.3 codegen 幂等：重跑 `build-tokens.mjs` 后 `git diff` 零差异（纳入 CI，见 Phase 5）
+
+---
+
+## Phase 3 — Web 共享原子层对齐（各自实现 + 同源闸）★工作量最大
+
+不建跨端组件包；两端各自实现，但都对齐 `design/prototype/atoms.css`，靠闸保证不漂移。
+
+- [ ] 3.1 抽公共原子清单：langsel（语言下拉，刚修的两套合规范）/ button / card / input / badge / pill。
+  对每个原子在 `atoms.css` 定义 canonical 样式
+- [ ] 3.2 website：`website.css` + `site-extra.css` 里的按钮/卡片/下拉 class 对齐 atoms.css 语义，
+  残留 `#fff/#000`/logo 外的硬编码色清零（当前业务硬编码 ~30 处，多为可保留的白/黑/logo）
+- [ ] 3.3 usercenter：`shared.tsx` 的 `card/input/LangSeg` 内联对象对齐 atoms.css 语义；
+  残留 13 处硬编码（基本 `#fff`）核对，非白/黑/logo 的清零
+- [ ] 3.4 两端 langsel 行为/样式一致性核对（此前刚统一为自定义下拉，纳入 atoms 登记）
+- [ ] 3.5 更新 `design/CONTRACT.md`：Web 原子清单 + 屏级台账（同步/快照/代码先行三态）
+
+---
+
+## Phase 4 — Flutter 收尾 + golden 补齐
+
+Flutter 已很干净（UI 层零裸 hex），只需收尾。
+
+- [ ] 4.1 清 `client/lib/widgets/adaptive_menu.dart` 唯 1 处裸 Material 色 → 走 token
+- [ ] 4.2 测试字体补 CJK 子集：用 `tools/fonts/make-cjk-subset.sh` 生成 Noto Sans SC 子集放
+  `client/test/fonts/`，`flutter_test_config.dart` 注册——消除 golden 中文与生产渲染差异
+- [ ] 4.3 处理现存 6 张 `client/test/golden/failures/` diff：逐张确认「原型对得上」后 `--update-goldens` 重录入库
+- [ ] 4.4 golden 覆盖扩容：desktop/tablet/mobile 全屏 × light/dark 双主题矩阵
+  （现有 `desktop_pages/tablet_pages/components/auth` → 补 mobile + 主题维度）
+- [ ] 4.5 `client/test/helpers/harness.dart` 对齐 jiu `golden_harness.dart` 手法：
+  多主题循环辅助 + 钉死 viewport/dpr + ProviderScope 固定数据（防动态值翻车）
+
+---
+
+## Phase 5 — 静态闸挂满 + 启用 pre-commit + fidelity 体检
+
+- [ ] 5.1 硬编码色扫描闸：
+  - Flutter `client/tool/check_ds_code.mjs`（照搬 jiu，含 `--changed` 供 pre-commit）：禁 `Color(0x..)`/裸 `Colors.x`
+  - Web hex 扫描并入 `check-l1-sync.mjs` ④
+- [ ] 5.2 原型校验闸 `design/prototype/tools/check-ds.mjs`（照搬 jiu 12 道，按 pangolin 断点/主题裁剪）
+- [ ] 5.3 CI 串起来（`.gitea/workflows/ci.yml` 增补）：
+  原型校验 → 跨端同源 → 代码色单源 → codegen 零 diff（已有）→ 测试含 golden（已有，补 mobile+主题）
+- [ ] 5.4 启用 pre-commit：`ci/install-hooks.sh` 纳入 onboarding 文档 + CLAUDE.md，
+  `.githooks/pre-commit` 增挂 `check-ds --changed`（只在动了 `design/prototype/` 时跑，轻量条件触发）
+- [ ] 5.5 fidelity 像素闸（本地体检，不进 CI）：`tools/screens.mjs` 屏注册表 + `tools/fidelity.mjs`
+  （原型 Chromium 截图 vs Flutter golden pixelmatch，逐屏阈值=实测残差+2pp，两边统一注入 CJK 字体）
+- [ ] 5.6 全景文档 `docs/frontend-overview.html`（照搬 jiu 十节）：一次 UI 改动标准路径 + 目录地图 +
+  三层分治 + 闸全景 + 像素验收体系 + 响应式范式 + 规则速查，登记进 docs/index.html
+
+---
+
+## Verification（端到端）
+
+- **原型**：`node design/prototype/serve.mjs` 起服务，浏览器逐屏目检 light/dark；`check-ds.mjs` 12 道全绿
+- **同源**：`node tools/check-l1-sync.mjs` 全绿（tokens 逐值 / icons 同集 / Web hex 白名单）
+- **Flutter**：`flutter analyze` + `flutter test`（含 golden ×双主题）；`check_ds_code.mjs` 全绿；codegen 重跑零 diff
+- **Web**：两端 `npm run build` 通过；token 同源闸绿；langsel/button/card 对齐 atoms
+- **fidelity**：`node tools/fidelity.mjs` 逐屏残差在阈内（首次校准记录各屏实测值）
+- **闸生效**：`ci/install-hooks.sh` 后改一处硬编码色/未登记组件 → pre-commit 或 CI 拦下
+
+## 不在本轮
+
+- 新功能/新屏开发（本轮是治理重构，不加业务）
+- iOS/iPad 专属布局深度优化（响应式已覆盖，超阈再单独立项）
+- 三主题扩展（保持 light/dark 双主题）

scripts/ci/_env.sh

@@ -29,3 +29,18 @@ ver_from_tag() {
   ref="${ref#"${prefix}"-v}"
   printf '%s' "$ref"
 }
+
+# flutter_pub_get_retry — pub.flutter-io.cn 常被 GFW 抖断(socket error / exit 69),
+# 让 flutter build 内隐式的 pub get 偶发失败(见 iOS build 曾因 google_fonts 拉包
+# 断线而挂)。构建前显式预取 + 重试;成功后 build 命中缓存不再拉网。在 flutter
+# 项目根目录调用。
+flutter_pub_get_retry() {
+  local i
+  for i in 1 2 3 4 5; do
+    if flutter pub get; then return 0; fi
+    echo "==> flutter pub get 失败(第 ${i}/5 次,pub.flutter-io.cn 抖?),8s 后重试..." >&2
+    sleep 8
+  done
+  echo "==> flutter pub get 5 次仍失败,放弃" >&2
+  return 1
+}

scripts/ci/combine-site.sh

@@ -22,14 +22,19 @@ rm -rf "${DIST}/user"
 mkdir -p "${DIST}/user"
 cp -R "${UC}/." "${DIST}/user/"
 
-# 2) 合并 _headers:用户中心路径规则前缀 /user,追加到官网 _headers 之后。
-#    删掉并入产物里那份会被 CF 忽略的 /user/_headers,避免误导。
+# 2) 合并 _headers 的 CSP。⚠️ CF Pages _headers 是【叠加】的:/* 与 /user/* 都匹配
+#    /user/,两条 CSP 都会下发,浏览器对多条 CSP 取【交集(最严)】→ 官网严格 CSP
+#    的「style-src 无 unsafe-inline / connect-src 'self'」赢,用户中心的内联样式被拦、
+#    连 API 被拦 → 页面裸奔且登录失败。故在 /user/* 里用 `! Content-Security-Policy`
+#    先【删掉】/* 继承来的官网 CSP,再设用户中心自己的(须排在 /* 之后:先加后删)。
+#    其余安全头(HSTS/X-Frame/…)/* 与用户中心一致,沿用 /* 即可,不重复。
 rm -f "${DIST}/user/_headers"
 {
   echo ""
-  echo "# ==== 用户中心(/user/*)独立 CSP,combine-site.sh 从 usercenter/_headers 重定 ===="
-  # 行首 '/'(路径规则)前缀 /user;'#' 注释与缩进的 header 行不动。
-  sed -E 's#^/#/user/#' "${UC}/_headers"
+  echo "# ==== 用户中心(/user/*):删掉官网 /* 继承的 CSP,换用用户中心自己的 ===="
+  echo "/user/*"
+  echo "  ! Content-Security-Policy"
+  grep -iE '^[[:space:]]*Content-Security-Policy:' "${UC}/_headers"
 } >> "${DIST}/_headers"
 
 echo "==> combine-site: done — 用户中心并入 ${DIST}/user/,_headers 已按 /user/* 分域合并"

scripts/ci/compile-android.sh

@@ -131,6 +131,7 @@ EOF
 # 现代绝大多数 Android 机)作为唯一下载,约 ~80MB;32 位老机(armeabi-v7a)/模拟器
 # (x86_64)本轮不分发(需要再加)。这样官网 + deploy-client 仍是单一稳定 URL。
 cd client
+flutter_pub_get_retry # 预取包 + 重试,防 pub.flutter-io.cn 被 GFW 抖断(见 _env.sh)
 flutter build apk --release --split-per-abi \
   "--dart-define=PANGOLIN_API_URL=${API_URL}"
 cd ..

scripts/ci/compile-ios.sh

@@ -173,6 +173,7 @@ EOF
 
 # ── [6/6] flutter build ipa + 上传 TestFlight ───────────────────────────────
 cd "${REPO_ROOT}/client"
+flutter_pub_get_retry # 预取包 + 重试,防 pub.flutter-io.cn 被 GFW 抖断(见 _env.sh)
 flutter build ipa --release \
   --build-name="${VER}" \
   --build-number="${BUILD}" \

scripts/ci/compile-macos.sh

@@ -182,6 +182,7 @@ echo "==> compile-macos: signing identity '${IDENTITY}'"
 # 明），本步应已产出 Developer ID 签名 + hardened runtime 的 .app；下一步的
 # inside-out 重签是幂等的安全网，不依赖这一步是否已经"恰好签对"。
 cd "${REPO_ROOT}/client"
+flutter_pub_get_retry # 预取包 + 重试,防 pub.flutter-io.cn 被 GFW 抖断(见 _env.sh)
 flutter build macos --release --dart-define="PANGOLIN_API_URL=${API_URL}"
 cd "$REPO_ROOT"
 

scripts/ci/compile-windows.sh

@@ -51,7 +51,15 @@ VER=""
 read -r VER < "$ver_file" || true  # 无结尾换行的 read 退出码,见 compile-android.sh 同注释
 rm -f "$ver_file"
 
-echo "==> compile-windows: tag=${TAG} version=${VER}"
+# build number 同 android/macos 规则(MAJOR*10000+MINOR*100+PATCH)。
+MAJOR="${VER%%.*}"
+_REST="${VER#*.}"
+MINOR="${_REST%%.*}"
+PATCH="${_REST#*.}"
+PATCH="${PATCH%%-*}"
+BUILD=$(( MAJOR * 10000 + MINOR * 100 + PATCH ))
+
+echo "==> compile-windows: tag=${TAG} version=${VER} build=${BUILD}"
 
 API_URL="${PANGOLIN_API_URL:-https://api.yanmeiai.com}"
 
@@ -79,6 +87,12 @@ rm -rf "${BUILD_CLIENT}/windows/flutter/ephemeral" \
        "${BUILD_CLIENT}/.dart_tool" \
        "${BUILD_CLIENT}/build"
 
+# 同步 Flutter app 版本到 tag(GNU sed,windows runner)。否则 package_info 卡在
+# pubspec committed 值(1.0.48),设置页显示旧版 + 自动更新永远判"有新版"。
+# 此前只改了 Inno 安装器 MyAppVersion(下方),App 内部版本没跟上——本次修复。
+sed -i "s/^version:.*/version: ${VER}+${BUILD}/" "${BUILD_CLIENT}/pubspec.yaml"
+echo "==> compile-windows: pubspec version -> ${VER}+${BUILD}"
+
 # ── [3/4] build ──────────────────────────────────────────────────────────────
 # NOTE(controller): `flutter create` on an existing project only fills in
 # scaffolding it manages (ephemeral/, generated_plugins.cmake, ...) and should
@@ -89,6 +103,7 @@ rm -rf "${BUILD_CLIENT}/windows/flutter/ephemeral" \
 # on first real CI run that none of those get clobbered.
 pushd "$BUILD_CLIENT" > /dev/null
 flutter create --platforms=windows . --project-name pangolin_vpn
+flutter_pub_get_retry # 预取包 + 重试,防 pub.flutter-io.cn 被 GFW 抖断(见 _env.sh)
 flutter build windows --release "--dart-define=PANGOLIN_API_URL=${API_URL}"
 popd > /dev/null
 

server/internal/httpapi/cors.go

@@ -35,7 +35,10 @@ func NewCORS() func(http.Handler) http.Handler {
 				h.Set("Access-Control-Allow-Origin", origin)
 				h.Add("Vary", "Origin")
 				h.Set("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, OPTIONS")
-				h.Set("Access-Control-Allow-Headers", "Content-Type, Authorization")
+				// X-Refresh-Token:静默续期/登出把 refresh token 放在此自定义头里
+				// (header token 方案,见 web/usercenter/lib/api/http.ts)。不放行则浏览器
+				// 预检拦截 /v1/auth/refresh → 登录后一刷新即掉线(login 不带此头故不受影响)。
+				h.Set("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Refresh-Token")
 				h.Set("Access-Control-Max-Age", "600")
 			}
 			// 预检请求直接 204(不落到业务路由,避免 /v1/... 的 OPTIONS 404)。

server/internal/httpapi/cors_test.go

@@ -3,6 +3,7 @@ package httpapi
 import (
 	"net/http"
 	"net/http/httptest"
+	"strings"
 	"testing"
 )
 
@@ -35,6 +36,11 @@ func TestCORS(t *testing.T) {
 	if w.Header().Get("Access-Control-Allow-Methods") == "" {
 		t.Fatalf("preflight missing Allow-Methods")
 	}
+	// 静默续期/登出把 refresh token 放 X-Refresh-Token 头,必须在允许头里,
+	// 否则浏览器预检拦截 /v1/auth/refresh → 登录后一刷新即掉线。
+	if ah := w.Header().Get("Access-Control-Allow-Headers"); !strings.Contains(ah, "X-Refresh-Token") {
+		t.Fatalf("preflight Allow-Headers must include X-Refresh-Token, got %q", ah)
+	}
 
 	// 未白名单 Origin:不补 Allow-Origin。
 	r = httptest.NewRequest("POST", "/v1/auth/login", nil)

todo/todo.html

@@ -100,6 +100,8 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
 .t-tag:hover { background: #d9e8fb; color: #1d4ed8; }
 .ver-badge { font-weight: 700; color: #1f7a44; }
 .sub-progress-badge { background: #f0f4ff; color: #3730a3; }
+.owner-user{background:rgba(232,192,122,.16);border:1px solid #e8c07a;color:#e8c07a}
+.owner-agent{background:rgba(126,224,162,.14);border:1px solid #7ee0a2;color:#7ee0a2}
 
 /* 状态徽章 */
 .status-badge { font-size: 11.5px; }
@@ -246,6 +248,78 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
 .modal-cmd-code { font-family: "JetBrains Mono", "Fira Code", monospace; font-size: 13px; color: #86efac; word-break: break-all; display: block; }
 .modal-copy-btn { margin-top: 10px; padding: 5px 14px; border-radius: 6px; background: #334155; color: #e2e8f0; border: none; font-size: 12px; cursor: pointer; }
 .modal-copy-btn:hover { background: #475569; }
+/* ════ 家族深色主题覆盖层（2026-07-06 对齐 brain/docs 家族风格；后置覆盖上方浅色基础样式） ════ */
+:root{--bg:#0d1117;--card:#161b22;--card-2:#1c2330;--border:#283041;--fg:#e6edf3;--fg-soft:#aeb9c7;--muted:#7d8896;--accent:#58a6ff;--green:#3fb950;--amber:#d29922;--red:#f85149}
+body{color:var(--fg);background:radial-gradient(1200px 600px at 80% -10%,rgba(88,166,255,.08),transparent 60%),var(--bg)}
+header{background:linear-gradient(135deg,#101a2c 0%,#15294a 100%);border-bottom:1px solid var(--border)}
+header .header-meta{color:var(--fg-soft)}
+.stat-pill{background:rgba(88,166,255,.12);border:1px solid var(--border)}
+.filter-bar{background:rgba(13,17,23,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
+.filter-label{color:var(--muted)}
+.filter-chip,.filter-btn{background:var(--card);border-color:var(--border);color:var(--fg-soft)}
+.filter-chip:hover,.filter-btn:hover{border-color:var(--accent);color:var(--accent)}
+.filter-chip.active,.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#0d1117}
+.filter-sep{background:var(--border)}
+.section-title .s-count{background:rgba(255,255,255,.08)}
+.st-open    {background:rgba(88,166,255,.10);color:#79b8ff;border-left-color:var(--accent)}
+.st-doing   {background:rgba(210,153,34,.10);color:#e3b341;border-left-color:var(--amber)}
+.st-done    {background:rgba(63,185,80,.08);color:#7ee787;border-left-color:var(--green)}
+.st-accepted{background:rgba(63,185,80,.12);color:#7ee787;border-left-color:var(--green)}
+.todo-card{background:var(--card);border-color:var(--border)}
+.todo-card.s-doing{border-left-color:var(--amber)}
+.todo-card.s-done{border-left-color:var(--green)}
+.todo-card.s-accepted{background:rgba(63,185,80,.06);border-left-color:var(--green)}
+.item-id{color:var(--accent);background:#0b1020;border-color:var(--border)}
+.item-title{color:var(--fg)}
+.todo-card.s-accepted .item-title{color:var(--muted)}
+.item-desc{color:var(--fg-soft)}
+.item-desc code{background:#0b1020;border:1px solid var(--border);color:#c9d6e6}
+.item-meta{color:var(--muted)}
+.t-block{background:rgba(248,81,73,.15);color:#ff9492}
+.t-high{background:rgba(210,153,34,.15);color:#e3b341}
+.t-low{background:rgba(88,166,255,.12);color:#79b8ff}
+.t-tag{background:var(--card-2);color:var(--fg-soft)}
+.t-tag:hover{background:rgba(88,166,255,.15);color:var(--accent)}
+.ver-badge{color:var(--green)}
+.sub-progress-badge{background:rgba(88,166,255,.12);color:#79b8ff}
+.s-open{background:rgba(88,166,255,.15);color:#79b8ff}
+.s-doing{background:rgba(210,153,34,.18);color:#e3b341}
+.s-done{background:rgba(63,185,80,.15);color:#7ee787}
+.s-accepted{background:rgba(63,185,80,.18);color:#7ee787}
+.empty-tip{color:var(--muted)}
+.tier-1{background:rgba(163,113,247,.15);color:#d2a8ff}
+.tier-2{background:rgba(57,197,187,.12);color:#76e3db}
+.tier-3{background:var(--card-2);color:var(--fg-soft)}
+.reject-btn{background:transparent;border-color:var(--red);color:#ff9492}
+.reject-btn:hover{background:var(--red);color:#0d1117}
+.reject-note{background:rgba(248,81,73,.08);border-color:rgba(248,81,73,.4);color:#ff9492}
+.reject-date{color:rgba(248,81,73,.6)}
+.gate-pending{background:rgba(210,153,34,.08);border-color:rgba(210,153,34,.4)}
+.gate-granted{background:rgba(63,185,80,.08);border-color:rgba(63,185,80,.4)}
+.gate-info{background:var(--card-2);border-color:var(--border)}
+.gate-kind,.gate-note,.gate-ref{color:var(--fg-soft)}
+.gate-date{color:var(--muted)}
+.gate-note code,.gate-ref code{background:#0b1020;border:1px solid var(--border);color:#c9d6e6}
+.subtask-block{background:var(--card-2);border-color:var(--border)}
+.subtask-label{color:var(--muted)}
+.subtask-progress-text{color:var(--fg-soft)}
+.subtask-progress-bar{background:var(--border)}
+.subtask-item{background:var(--card);border-color:var(--border)}
+.subtask-item.s-done,.subtask-item.s-accepted{background:rgba(63,185,80,.06);border-color:rgba(63,185,80,.3)}
+.subtask-item.s-doing{background:rgba(210,153,34,.06);border-color:rgba(210,153,34,.3)}
+.sub-icon.s-open{color:var(--muted)}
+.sub-sid{color:var(--muted)}
+.subtask-item.s-done .sub-title,.subtask-item.s-accepted .sub-title{color:var(--muted)}
+.dep-label{color:var(--muted)}
+.dep-done{background:rgba(63,185,80,.15);color:#7ee787}
+.dep-pending{background:rgba(248,81,73,.15);color:#ff9492}
+.modal-overlay{background:rgba(0,0,0,.6)}
+.modal-box{background:var(--card);border:1px solid var(--border)}
+.modal-box h3{color:var(--fg)}
+.modal-subtitle{color:var(--fg-soft)}
+.modal-label{color:var(--fg-soft)}
+.modal-textarea{background:#0b1020;border-color:var(--border);color:var(--fg)}
+.modal-btn-cancel{background:var(--card-2);color:var(--fg-soft)}
 </style>
 </head>
 <body>
@@ -253,14 +327,14 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
 <header>
   <div class="wrap">
     <h1>feature+windows — 项目 TODO</h1>
-    <div class="header-meta">生成于 2026-07-01 · 真相源 todo/todo.json</div>
+    <div class="header-meta">生成于 2026-07-07 · 真相源 todo/todo.json</div>
     <div class="stats">
-      <div class="stat-pill"><strong>17</strong>全部</div>
-      <div class="stat-pill"><strong>8</strong>待开始</div>
+      <div class="stat-pill"><strong>18</strong>全部</div>
+      <div class="stat-pill"><strong>9</strong>待开始</div>
       <div class="stat-pill"><strong>0</strong>开发中</div>
       <div class="stat-pill"><strong>1</strong>待验收</div>
       <div class="stat-pill"><strong>8</strong>已验收</div>
-      
+      <div class="stat-pill gate-stat"><strong>1</strong>待确认</div>
     </div>
   </div>
 </header>
@@ -293,7 +367,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
   <div class="filter-sep"></div>
   <div class="filter-group">
     <span class="filter-label">平台 / 标签</span>
-    <button class="filter-chip" data-filter-tag="Android">Android</button><button class="filter-chip" data-filter-tag="Windows">Windows</button><button class="filter-chip" data-filter-tag="gRPC">gRPC</button><button class="filter-chip" data-filter-tag="iOS">iOS</button><button class="filter-chip" data-filter-tag="mac">mac</button><button class="filter-chip" data-filter-tag="前端">前端</button><button class="filter-chip" data-filter-tag="后端">后端</button><button class="filter-chip" data-filter-tag="运维">运维</button>
+    <button class="filter-chip" data-filter-tag="Android">Android</button><button class="filter-chip" data-filter-tag="CI/CD">CI/CD</button><button class="filter-chip" data-filter-tag="Web">Web</button><button class="filter-chip" data-filter-tag="Windows">Windows</button><button class="filter-chip" data-filter-tag="gRPC">gRPC</button><button class="filter-chip" data-filter-tag="iOS">iOS</button><button class="filter-chip" data-filter-tag="mac">mac</button><button class="filter-chip" data-filter-tag="前端">前端</button><button class="filter-chip" data-filter-tag="后端">后端</button><button class="filter-chip" data-filter-tag="运维">运维</button>
   </div>
 </div>
 
@@ -302,7 +376,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
   
   <div class="section-block" id="section-open">
     <div class="section-title st-open" data-toggle="open">
-      📋 待开始 <span class="s-count">8</span>
+      📋 待开始 <span class="s-count">9</span>
       <span class="s-arrow">▴ 收起</span>
     </div>
     <div class="section-list-wrap " id="list-wrap-open">
@@ -332,6 +406,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="mac">mac</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-22</span>
       
     </div>
@@ -362,6 +437,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Android">Android</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-22</span>
       
     </div>
@@ -392,6 +468,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span> <span class="tag t-tag" data-tag="运维">运维</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       
     </div>
@@ -422,6 +499,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       
     </div>
@@ -452,6 +530,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       
     </div>
@@ -482,6 +561,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Android">Android</span> <span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-29</span>
       
     </div>
@@ -512,12 +592,54 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span> <span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-30</span>
       
     </div>
       </div>
     </li>
 
+    <li class="todo-card s-open"
+        data-id="19"
+        data-level="mid"
+        data-status="open"
+        data-tier="1"
+        data-tags="前端,Web,mac,iOS,Android,Windows,CI/CD">
+      <div class="card-header">
+        <span class="item-id">#19</span>
+        <span class="item-title">前端设计系统治理重构（ds-flow 全端）</span>
+        <div class="card-badges">
+          <span class="tag status-badge s-open">待开始</span>
+          <span class="tag t-high">重要</span>
+          <span class="tag tier-1">一级</span>
+          
+          
+        </div>
+      </div>
+      
+      <div class="item-desc">用 ds-flow 把 Flutter 五端+官网+用户中心收口到设计单源。补原型三件套(atoms.css/icons.js/index.html)+Web共享原子层去重(各自实现+同源闸)+硬编码色/fidelity闸+启用pre-commit。6阶段。计划见 docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md</div>
+      <div class="gate-block gate-pending">
+      <div class="gate-head"><span class="gate-badge pending">⏸ 待确认</span>
+        <span class="gate-kind">一级方案规划 · 确认后方可继续开发</span></div>
+      <div class="gate-note">6 阶段 ds-flow 治理重构:Phase0 CLAUDE.md+计划落库 / Phase1 原型三件套(atoms.css/icons.js/index.html,收敛ui_kits) / Phase2 Web token同源闸 / Phase3 Web共享原子层去重(各自实现+同源闸,★工作量最大) / Phase4 Flutter收尾+golden补齐 / Phase5 静态闸挂满+启用pre-commit+fidelity体检。已定决策:Web各自实现+同源闸、ui_kits收敛纯HTML、先定稿再逐刀。主题保持light/dark。</div><div class="gate-ref">📄 详见 <code>docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md</code></div>
+      <button class="approve-btn" data-id="19">确认执行 ✓</button>
+      <div class="approve-cmd" id="approve-cmd-19" style="display:none">
+        <div class="approve-cmd-label">在终端运行：</div>
+        <code class="approve-cmd-code">/todo approve 19</code>
+        <button class="approve-copy-btn" data-cmd="/todo approve 19">复制命令</button>
+      </div>
+    </div>
+      
+      <div class="card-footer">
+        <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="Web">Web</span> <span class="tag t-tag" data-tag="mac">mac</span> <span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="Android">Android</span> <span class="tag t-tag" data-tag="Windows">Windows</span> <span class="tag t-tag" data-tag="CI/CD">CI/CD</span></div>
+        <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
+      <span class="meta-date">🕐 2026-07-07</span>
+      
+    </div>
+      </div>
+    </li>
+
     <li class="todo-card s-open"
         data-id="3"
         data-level="low"
@@ -542,6 +664,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Windows">Windows</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-22</span>
       
     </div>
@@ -593,6 +716,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="mac">mac</span> <span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-07-01</span>
       
     </div>
@@ -633,6 +757,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       <span class="meta-date">✅ 验收 2026-06-30</span>
     </div>
@@ -663,6 +788,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       <span class="meta-date">✅ 验收 2026-06-30</span>
     </div>
@@ -693,6 +819,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       <span class="meta-date">✅ 验收 2026-06-30</span>
     </div>
@@ -723,6 +850,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-30</span>
       <span class="meta-date">✅ 验收 2026-06-30</span>
     </div>
@@ -753,6 +881,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       <span class="meta-date">✅ 验收 2026-06-30</span>
     </div>
@@ -783,6 +912,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span> <span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="gRPC">gRPC</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-29</span>
       <span class="meta-date">✅ 验收 2026-06-30</span>
     </div>
@@ -813,6 +943,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       <span class="meta-date">✅ 验收 2026-06-28</span>
     </div>
@@ -843,6 +974,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
+      <span class="tag owner-agent">🤖 agent</span>
       <span class="meta-date">🕐 2026-06-28</span>
       <span class="meta-date">✅ 验收 2026-06-28</span>
     </div>

todo/todo.json

@@ -1,9 +1,9 @@
 {
   "meta": {
     "title": "feature+windows — 项目 TODO",
-    "updated_at": "2026-06-30T23:10:43.458Z"
+    "updated_at": "2026-07-07T15:41:36.537Z"
   },
-  "seq": 18,
+  "seq": 19,
   "items": [
     {
       "id": 1,
@@ -18,7 +18,8 @@
       "created_at": "2026-06-22T09:32:42.340Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 2,
@@ -33,7 +34,8 @@
       "created_at": "2026-06-22T09:32:56.098Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 3,
@@ -48,7 +50,8 @@
       "created_at": "2026-06-22T09:32:56.169Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 4,
@@ -64,7 +67,8 @@
       "created_at": "2026-06-27T16:39:31.549Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 5,
@@ -79,7 +83,8 @@
       "created_at": "2026-06-27T23:37:24.980Z",
       "done": true,
       "completed_at": "2026-06-28T13:19:24.207Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 6,
@@ -95,7 +100,8 @@
       "created_at": "2026-06-28T00:21:30.990Z",
       "done": true,
       "completed_at": "2026-06-28T13:19:24.299Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 7,
@@ -110,7 +116,8 @@
       "created_at": "2026-06-28T00:26:44.498Z",
       "done": true,
       "completed_at": "2026-06-30T14:44:35.082Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 8,
@@ -125,7 +132,8 @@
       "created_at": "2026-06-28T00:38:22.413Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 9,
@@ -141,7 +149,8 @@
       "created_at": "2026-06-28T09:32:26.008Z",
       "done": true,
       "completed_at": "2026-06-30T14:44:34.810Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 10,
@@ -156,7 +165,8 @@
       "created_at": "2026-06-28T09:32:26.080Z",
       "done": true,
       "completed_at": "2026-06-30T14:44:34.991Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 11,
@@ -171,7 +181,8 @@
       "created_at": "2026-06-28T11:27:56.637Z",
       "done": true,
       "completed_at": "2026-06-30T14:47:39.343Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 12,
@@ -187,7 +198,8 @@
       "created_at": "2026-06-28T11:27:56.708Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 13,
@@ -204,7 +216,8 @@
       "created_at": "2026-06-29T04:55:46.733Z",
       "done": true,
       "completed_at": "2026-06-29T16:59:39.926Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 14,
@@ -221,7 +234,8 @@
       "created_at": "2026-06-29T09:36:14.004Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 15,
@@ -237,7 +251,8 @@
       "created_at": "2026-06-30T10:56:48.894Z",
       "done": true,
       "completed_at": "2026-06-30T14:44:34.900Z",
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 16,
@@ -253,7 +268,8 @@
       "created_at": "2026-06-30T14:33:48.996Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
     },
     {
       "id": 18,
@@ -269,7 +285,38 @@
       "created_at": "2026-06-30T23:00:25.193Z",
       "done": false,
       "completed_at": null,
-      "version": null
+      "version": null,
+      "owner": "agent"
+    },
+    {
+      "id": 19,
+      "title": "前端设计系统治理重构（ds-flow 全端）",
+      "desc": "用 ds-flow 把 Flutter 五端+官网+用户中心收口到设计单源。补原型三件套(atoms.css/icons.js/index.html)+Web共享原子层去重(各自实现+同源闸)+硬编码色/fidelity闸+启用pre-commit。6阶段。计划见 docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md",
+      "level": "mid",
+      "tier": 1,
+      "tags": [
+        "前端",
+        "Web",
+        "mac",
+        "iOS",
+        "Android",
+        "Windows",
+        "CI/CD"
+      ],
+      "owner": "agent",
+      "status": "open",
+      "created_at": "2026-07-07T15:41:25.760Z",
+      "done": false,
+      "completed_at": null,
+      "version": null,
+      "gate": {
+        "kind": "plan",
+        "note": "6 阶段 ds-flow 治理重构:Phase0 CLAUDE.md+计划落库 / Phase1 原型三件套(atoms.css/icons.js/index.html,收敛ui_kits) / Phase2 Web token同源闸 / Phase3 Web共享原子层去重(各自实现+同源闸,★工作量最大) / Phase4 Flutter收尾+golden补齐 / Phase5 静态闸挂满+启用pre-commit+fidelity体检。已定决策:Web各自实现+同源闸、ui_kits收敛纯HTML、先定稿再逐刀。主题保持light/dark。",
+        "ref": "docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md",
+        "approval": "pending",
+        "proposed_at": "2026-07-07T15:41:36.536Z",
+        "approved_at": null
+      }
     }
   ]
 }

web/usercenter/components/shared.tsx

@@ -1,5 +1,6 @@
 // shared.tsx — 公共样式常量与原子（承袭 ucapp.jsx 的 ucCard / ucInput / UCLang）
-import React from 'react';
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
 import type { Lang } from '../lib/i18n';
 
 export const card: React.CSSProperties = {
@@ -22,34 +23,110 @@ export const input: React.CSSProperties = {
   boxSizing: 'border-box',
 };
 
+const LANGS: [Lang, string][] = [
+  ['en', 'English'], ['zh', '中文'], ['ja', '日本語'],
+  ['ko', '한국어'], ['ru', 'Русский'], ['es', 'Español'],
+];
+
+// 自定义下拉:原生 <select> 的弹层由系统定位(macOS 锚在选中项、会"漂移"),
+// 改成自控菜单(按钮 + 绝对定位列表),不漂移、样式统一、跨端一致。
 export function LangSeg({ lang, setLang }: { lang: Lang; setLang: (l: Lang) => void }) {
-  // 6 语言用原生下拉（段控横排会挤）。默认 en。
-  const langs: [Lang, string][] = [
-    ['en', 'English'], ['zh', '中文'], ['ja', '日本語'],
-    ['ko', '한국어'], ['ru', 'Русский'], ['es', 'Español'],
-  ];
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const current = LANGS.find(([v]) => v === lang)?.[1] ?? String(lang);
   return (
-    <select
-      value={lang}
-      onChange={(e) => setLang(e.target.value as Lang)}
-      aria-label="Language"
-      style={{
-        // 圆角矩形 + 柔和边框(原纯 --border 太生硬)。
-        border: '1px solid color-mix(in oklab, var(--border), transparent 55%)',
-        cursor: 'pointer',
-        borderRadius: 10,
-        padding: '5px 10px',
-        fontFamily: 'var(--font-sans)',
-        fontSize: 12.5,
-        fontWeight: 700,
-        background: 'var(--bg-subtle)',
-        color: 'var(--fg2)',
-        boxShadow: '0 1px 2px rgba(45, 30, 20, 0.05)',
-      }}
-    >
-      {langs.map(([v, l]) => (
-        <option key={v} value={v}>{l}</option>
-      ))}
-    </select>
+    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label="Language"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 6,
+          border: '1px solid color-mix(in oklab, var(--border), transparent 55%)',
+          cursor: 'pointer',
+          borderRadius: 10,
+          padding: '5px 10px',
+          fontFamily: 'var(--font-sans)',
+          fontSize: 12.5,
+          fontWeight: 700,
+          background: 'var(--bg-subtle)',
+          color: 'var(--fg2)',
+          boxShadow: '0 1px 2px rgba(45, 30, 20, 0.05)',
+        }}
+      >
+        <span>{current}</span>
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true"
+          style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 140ms' }}>
+          <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4"
+            strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      {open && (
+        <div
+          role="listbox"
+          style={{
+            position: 'absolute',
+            top: 'calc(100% + 6px)',
+            right: 0,
+            minWidth: 132,
+            background: 'var(--surface)',
+            border: '1px solid var(--border)',
+            borderRadius: 12,
+            boxShadow: '0 10px 30px rgba(20, 12, 6, 0.22)',
+            padding: 5,
+            zIndex: 60,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+          }}
+        >
+          {LANGS.map(([v, l]) => {
+            const on = v === lang;
+            return (
+              <button
+                key={v}
+                type="button"
+                role="option"
+                aria-selected={on}
+                onClick={() => { setLang(v); setOpen(false); }}
+                style={{
+                  textAlign: 'left',
+                  border: 'none',
+                  cursor: 'pointer',
+                  background: on ? 'var(--accent-subtle, var(--bg-subtle))' : 'transparent',
+                  color: on ? 'var(--accent)' : 'var(--fg1)',
+                  fontWeight: on ? 700 : 500,
+                  fontFamily: 'var(--font-sans)',
+                  fontSize: 13,
+                  padding: '8px 11px',
+                  borderRadius: 8,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {l}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
   );
 }

web/usercenter/public/colors_and_type.css

@@ -1,4 +1,4 @@
-/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。生成器: web/usercenter/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
+/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。生成器: web/usercenter/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
 /* =============================================================
    穿山甲 VPN · Pangolin VPN — Design Tokens
    colors_and_type.css

web/usercenter/scripts/build-tokens.mjs

@@ -2,7 +2,7 @@
 /**
  * build-tokens.mjs — 设计令牌同源生成器（usercenter）
  *
- * 唯一真相来源是仓库根的 `design/colors_and_type.css`。
+ * 唯一真相来源是仓库根的 `design/prototype/tokens.css`。
  * 本脚本把它原样读入，仅删除 Google Fonts @import 行后写入
  * `public/colors_and_type.css`（usercenter 通过 <link> 引入此文件）。
  *
@@ -15,11 +15,11 @@ import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const SRC = resolve(__dirname, '../../../design/colors_and_type.css');
+const SRC = resolve(__dirname, '../../../design/prototype/tokens.css');
 const OUT = resolve(__dirname, '../public/colors_and_type.css');
 
 const BANNER =
-  '/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。' +
+  '/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。' +
   '生成器: web/usercenter/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */\n';
 
 if (!existsSync(SRC)) {
@@ -39,4 +39,4 @@ const stripped = raw
   .join('\n');
 
 writeFileSync(OUT, BANNER + stripped, 'utf8');
-console.log('[build-tokens] ✅ 已生成', OUT, `(${stripped.length} 字节，源自 design/colors_and_type.css)`);
+console.log('[build-tokens] ✅ 已生成', OUT, `(${stripped.length} 字节，源自 design/prototype/tokens.css)`);

web/website/scripts/build-tokens.mjs

@@ -2,7 +2,7 @@
 /**
  * build-tokens.mjs — 设计令牌同源生成器
  *
- * 唯一真相来源是仓库根的 `design/colors_and_type.css`（铁律 1：颜色只用语义 token）。
+ * 唯一真相来源是仓库根的 `design/prototype/tokens.css`（铁律 1：颜色只用语义 token）。
  * 本脚本把它原样读入，仅做一处「必须的」改写后写入 `src/styles/tokens.gen.css`：
  *
  *   删除其中加载 Google Fonts 的 `@import url('https://fonts.googleapis.com/...')` 一行。
@@ -20,11 +20,11 @@ import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const SRC = resolve(__dirname, '../../../design/colors_and_type.css');
+const SRC = resolve(__dirname, '../../../design/prototype/tokens.css');
 const OUT = resolve(__dirname, '../src/styles/tokens.gen.css');
 
 const BANNER =
-  '/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。' +
+  '/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。' +
   '生成器: web/website/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */\n';
 
 if (!existsSync(SRC)) {
@@ -50,4 +50,4 @@ if (/fonts\.(googleapis|gstatic)\.com/i.test(stripped.replace(/^\s*(\/\/|\*|\/\*
 }
 
 writeFileSync(OUT, BANNER + stripped, 'utf8');
-console.log('[build-tokens] 已生成', OUT, `(${stripped.length} 字节，源自 design/colors_and_type.css)`);
+console.log('[build-tokens] 已生成', OUT, `(${stripped.length} 字节，源自 design/prototype/tokens.css)`);

web/website/src/components/Header.jsx

@@ -3,7 +3,7 @@
  * 迁自 design/ui_kits/website/index.html 的 <header> + site.js 的菜单/滚动毛玻璃逻辑。
  * 语言切换由原型的 JS 文本替换改为「路由跳转」(zh=/, en=/en/)，单显不并排（铁律 6）。
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Download, Menu } from 'lucide-react';
 import { SITE } from '../config/site';
 
@@ -29,6 +29,17 @@ function Mark() {
 export default function Header({ lang = 'zh', t = {} }) {
   const [open, setOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const [langOpen, setLangOpen] = useState(false);
+  const langRef = useRef(null);
+
+  useEffect(() => {
+    if (!langOpen) return;
+    const onDoc = (e) => { if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setLangOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
+  }, [langOpen]);
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 8);
@@ -64,16 +75,36 @@ export default function Header({ lang = 'zh', t = {} }) {
           ))}
         </nav>
         <div class="right">
-          <select
-            class="langsel"
-            value={lang}
-            onChange={(e) => { window.location.href = langHref(e.target.value); }}
-            aria-label="Language"
-          >
-            {langs.map(([code, label]) => (
-              <option key={code} value={code}>{label}</option>
-            ))}
-          </select>
+          <div ref={langRef} style={{ position: 'relative', display: 'inline-block' }}>
+            <button
+              type="button"
+              class="langsel"
+              onClick={() => setLangOpen((o) => !o)}
+              aria-haspopup="listbox"
+              aria-expanded={langOpen}
+              aria-label="Language"
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}
+            >
+              <span>{(langs.find(([c]) => c === lang) || ['', 'English'])[1]}</span>
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true"
+                style={{ transform: langOpen ? 'rotate(180deg)' : 'none', transition: 'transform 140ms' }}>
+                <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </button>
+            {langOpen && (
+              <div role="listbox" style={{ position: 'absolute', top: 'calc(100% + 6px)', right: 0, minWidth: 132, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 12, boxShadow: '0 10px 30px rgba(20, 12, 6, 0.22)', padding: 5, zIndex: 60, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                {langs.map(([code, label]) => {
+                  const on = code === lang;
+                  return (
+                    <a key={code} role="option" aria-selected={on} href={langHref(code)}
+                      style={{ textAlign: 'left', textDecoration: 'none', background: on ? 'var(--accent-subtle, var(--bg-subtle))' : 'transparent', color: on ? 'var(--accent)' : 'var(--fg1)', fontWeight: on ? 700 : 500, fontFamily: 'var(--font-sans)', fontSize: 13, padding: '8px 11px', borderRadius: 8, whiteSpace: 'nowrap' }}>
+                      {label}
+                    </a>
+                  );
+                })}
+              </div>
+            )}
+          </div>
           <a class="linklogin" href={SITE.usercenter}>{t.login}</a>
           <a class="btn btn-primary" href="#download">
             <Download />

web/website/src/styles/tokens.gen.css

@@ -1,4 +1,4 @@
-/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。生成器: web/website/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
+/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。生成器: web/website/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
 /* =============================================================
    穿山甲 VPN · Pangolin VPN — Design Tokens
    colors_and_type.css