feat(web): 5 项 UI 修复 — 统一浅色/登录回跳/logo locale/用户名下拉/Docs 真页

用户中心: - 统一浅色:theme.tsx 无偏好时不再跟随系统 prefers-color-scheme:dark(登录页变黑真因),恒浅色;保留手动切换。 - 登录回跳:UserCenter 加 safeRedirect 白名单,登录成功按 ?redirect= 回来源页 (官网带 /,登录后回主页),无则进 overview。 - logo locale:新增 i18n brandName(zh 穿山甲/其余 Pangolin),Login/UserCenter /Subscription 三处引用。 - 存 pg_uc_email(getMe 时)/ clearSession 删,供官网读用户名。官网(全走 CSS class 合 CSP,无内联 style): - logo locale:i18n nav.brand(zh 穿山甲/其余 Pangolin),Header+Footer。 - 登录态头部显示用户名(读同源 pg_uc_email)+ 下拉菜单(进入用户中心/切换用户/ 退出登录,复用 .langmenu 风格);未登录 Log in 带 ?redirect=/ 回跳。 - Docs 四卡片补真内容页(en+zh:quickstart/faq/protocol/privacy + Doc.astro 布局),卡片改回 <a href>;Protocol 改正 sing-box+REALITY(去 WireGuard)。验证:同源闸绿 · 两端 build 过 · redline 0 · Header 零内联 style · 无 WireGuard。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
feat(web): 修语言下拉漂移(class 化)+ 主页登录态用户中心按钮 + 用户中心返回主页
2026-07-08 09:52:04 +08:00 · 2026-07-08 09:16:13 +08:00 · 2026-07-08 09:04:10 +08:00 · 2026-07-08 08:41:52 +08:00 · 2026-07-08 02:58:14 +08:00 · 2026-07-08 01:45:18 +08:00
44 changed files with 1012 additions and 104 deletions
@@ -16,12 +16,19 @@ on:
    branches: [main]
  workflow_dispatch:

+# runner 分配:
+#   · runs-on: ubuntu-latest —— 在 catthehacker 容器里跑,仅用于纯 bash 扫描
+#     (redline/cleartext/portable-sql);容器内**不能**嵌套 `docker run`(DinD 挂载
+#     失败,$PWD 在宿主不存在),故套 docker 的 job 不能用它。
+#   · runs-on: nas —— host 模式(mac-pangolin-2 直接在宿主跑),`docker run` 是宿主
+#     真 docker(非嵌套),可正常拉/跑 node/golang/flutter/python/shellcheck 镜像。
+#     golden 保留 ghcr.io/cirruslabs/flutter Linux 容器 → 与入库基线渲染一致。
 jobs:

  # ── Job 1: Lint (shellcheck) ─────────────────────────────────────────────
  lint:
    name: Lint — shellcheck
-    runs-on: ubuntu-latest
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -74,7 +81,7 @@ jobs:
  # ── Job 2: OpenAPI Sync Check ────────────────────────────────────────────
  openapi-check:
    name: OpenAPI Sync Check
-    runs-on: ubuntu-latest
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -113,7 +120,7 @@ jobs:
  # ── Job 4: Flutter 客户端(分析 + 单测/组件测试)────────────────────────
  flutter-client:
    name: Flutter — analyze + test
-    runs-on: ubuntu-latest
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -149,7 +156,7 @@ jobs:
  # (改了 design/colors_and_type.css 没重生成,或手改了生成物)。
  codegen-drift:
    name: Codegen Drift — token 生成物未漂移
-    runs-on: ubuntu-latest
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -161,12 +168,28 @@ jobs:
            node:20 \
            bash ci/check-codegen-drift.sh

+  ds-flow:
+    name: DS-flow — 原型/跨端同源/代码色单源闸
+    runs-on: nas
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: 原型校验(check-ds)
+        run: docker run --rm -v "$PWD:/repo" -w /repo node:20 node design/prototype/tools/check-ds.mjs
+
+      - name: 跨端同源(check-l1-sync)
+        run: docker run --rm -v "$PWD:/repo" -w /repo node:20 node tools/check-l1-sync.mjs
+
+      - name: Flutter 颜色单源(check_ds_code --strict)
+        run: docker run --rm -v "$PWD/client:/app" -w /app node:20 node tool/check_ds_code.mjs --strict
+
  # ── Job 7: Go 服务端(build + test:含契约快照 + sqlite 真库,跳过 integration)──
  # 此前 server 测试未进 CI;契约快照(支柱 2)等需在此守门。integration 测试走
  # -tags integration(需 docker 起 mysql/redis),见 go-integration job。
  go-server:
    name: Go — build + test
-    runs-on: ubuntu-latest
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -192,7 +215,7 @@ jobs:
  # 详见 scripts/e2e-smoke.sh + server/test/e2e/。
  e2e-smoke:
    name: E2E Smoke — L4 进程级端到端
-    runs-on: ubuntu-latest
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -205,7 +228,9 @@ jobs:
            -v "$HOME/.cache/pangolin-ci/gomod:/go/pkg/mod" \
            -v "$HOME/.cache/pangolin-ci/gobuild:/root/.cache/go-build" \
            golang:1.25 \
-            bash -c "apt-get update -qq && apt-get install -y -qq openssl curl python3 >/dev/null 2>&1 && bash scripts/e2e-smoke.sh"
+            bash -c "bash scripts/e2e-smoke.sh"
+          # 注:openssl/curl/python3 已在 golang:1.25 镜像内,无需 apt 安装
+          # (原 apt-get 会走 Docker Desktop 代理→本机 clash 死口,徒增网络脆性)。

  # ── Job 10: Go 集成测试 (L2:真 mysql8/redis 经 testcontainers)──────────
  # 跨库可移植(支柱 3)+ 按租户流量记账(usage)+ 配额(devices)+ 兑换(codes)+
@@ -216,7 +241,7 @@ jobs:
  #   · -p 1 串行:一次只起一个 mysql 容器,避免并发把 Docker Desktop 压垮/端口资源争用。
  go-integration:
    name: Go — integration (mysql/redis testcontainers)
-    runs-on: ubuntu-latest
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -230,8 +255,8 @@ jobs:
  # Linux 权威基线(scripts/update-goldens.sh 生成;mac 渲染不一致故钉死 Linux 容器)。
  # tablet/desktop-stats golden 与 stats-overhaul 工作区耦合,待其合并后并入本 job。
  golden:
-    name: Golden — 视觉回归 (components + auth)
-    runs-on: ubuntu-latest
+    name: Golden — 视觉回归 (全量:components/auth/desktop/tablet)
+    runs-on: nas
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -243,4 +268,4 @@ jobs:
            -v "$PWD/client:/app" -w /app \
            -v "$HOME/.cache/pangolin-ci/pubcache:/root/.pub-cache" \
            ghcr.io/cirruslabs/flutter:stable \
-            bash -c "flutter pub get && flutter test test/golden/components_golden_test.dart test/golden/auth_redesign_golden_test.dart"
+            bash -c "flutter pub get && flutter test test/golden"
@@ -28,6 +28,24 @@ run_check "可移植 SQL 扫描" bash ci/scan-portable-sql.sh

 if command -v node >/dev/null 2>&1; then
  run_check "codegen 漂移检查" bash ci/check-codegen-drift.sh
+
+  # ── ds-flow 闸(条件触发,秒级)──
+  staged="$(git diff --cached --name-only --diff-filter=ACM)"
+
+  # 原型校验:仅在动了 design/prototype/ 时跑(轻量,扫整个原型)。
+  if printf '%s\n' "$staged" | grep -q '^design/prototype/'; then
+    run_check "原型校验(check-ds)" node design/prototype/tools/check-ds.mjs
+  fi
+
+  # 跨端同源:动了原型 token/图标 或 web token 时跑(防漂移)。
+  if printf '%s\n' "$staged" | grep -qE '^(design/prototype/|web/(website|usercenter)/)'; then
+    run_check "跨端同源(check-l1-sync)" node tools/check-l1-sync.mjs
+  fi
+
+  # Flutter 颜色单源:只扫本次改动的 dart(--changed,快),动了 client/lib 才有意义。
+  if printf '%s\n' "$staged" | grep -q '^client/lib/.*\.dart$'; then
+    run_check "Flutter 颜色单源(check_ds_code)" bash -c 'cd client && node tool/check_ds_code.mjs --changed'
+  fi
 fi

 echo "[pre-commit] ✓ 本地闸通过(完整测试见 CI)"
@@ -15,4 +15,5 @@ chmod +x .githooks/* 2>/dev/null || true

 echo "✓ 已启用 git hooks(core.hooksPath=.githooks)"
 echo "  pre-commit 将跑:红线词扫描 · 可移植 SQL 扫描 · codegen 漂移检查"
+echo "  + ds-flow 条件闸(动了原型/web/client 才跑):原型校验 · 跨端同源 · Flutter 颜色单源"
 echo "  卸载:git config --unset core.hooksPath"
@@ -8,14 +8,23 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:pangolin_vpn/bridge/vpn_bridge.dart';
 import 'package:pangolin_vpn/bridge/vpn_bridge_provider.dart';
+import 'package:pangolin_vpn/l10n/app_text.dart';
 import 'package:pangolin_vpn/l10n/strings_zh.dart';
 import 'package:pangolin_vpn/models/node.dart';
 import 'package:pangolin_vpn/services/connect_api.dart';
 import 'package:pangolin_vpn/services/device_identity.dart';
+import 'package:pangolin_vpn/state/app_providers.dart';
 import 'package:pangolin_vpn/state/connection_provider.dart';
 import 'package:pangolin_vpn/state/nodes_provider.dart';
 import 'package:pangolin_vpn/state/quota_provider.dart';

+// localeProvider 现默认英文;测试硬编码 StringsZh 预期 → 钉死中文 locale。
+class _FixedLocale extends LocaleNotifier {
+  _FixedLocale(AppLang lang) {
+    state = lang;
+  }
+}
+
 // 可控假桥:能手动推 VpnStatus,无内部计时器(避免 pending timer)。
 class _FakeBridge implements VpnBridge {
  final _status = StreamController<VpnStatus>.broadcast();
@@ -94,6 +103,7 @@ void main() {
  ProviderContainer makeContainer(_FakeBridge bridge,
          {NodesNotifier Function()? nodes, DateTime Function()? now}) =>
      ProviderContainer(overrides: [
+        localeProvider.overrideWith((ref) => _FixedLocale(AppLang.zh)),
        vpnBridgeProvider.overrideWithValue(bridge),
        nodesProvider.overrideWith(nodes ?? _StubNodes.new),
        deviceIdentityProvider.overrideWithValue(DeviceIdentity(store: _MemKV())),
@@ -8,10 +8,12 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:pangolin_vpn/bridge/vpn_bridge.dart';
 import 'package:pangolin_vpn/bridge/vpn_bridge_mock.dart';
 import 'package:pangolin_vpn/bridge/vpn_bridge_provider.dart';
+import 'package:pangolin_vpn/l10n/app_text.dart';
 import 'package:pangolin_vpn/l10n/strings_zh.dart';
 import 'package:pangolin_vpn/models/node.dart';
 import 'package:pangolin_vpn/pangolin_theme.dart';
 import 'package:pangolin_vpn/screens/nodes_page.dart';
+import 'package:pangolin_vpn/state/app_providers.dart';
 import 'package:pangolin_vpn/state/connection_provider.dart';
 import 'package:pangolin_vpn/state/nodes_provider.dart';
 import 'package:pangolin_vpn/widgets/smart_select_card.dart';
@@ -31,11 +33,19 @@ const _nodes = [
  Node(code: 'JP', nameZh: '东京', nameEn: 'Tokyo', ping: 35, uuid: 'jp-uuid', host: 'jp', port: 443),
 ];

+// localeProvider 现默认英文;测试硬编码 StringsZh 预期 → 钉死中文 locale。
+class _FixedLocale extends LocaleNotifier {
+  _FixedLocale(AppLang lang) {
+    state = lang;
+  }
+}
+
 void main() {
  setUpAll(disableGoogleFontsFetching);
  const t = StringsZh();

  ProviderContainer makeContainer(VpnBridge bridge) => ProviderContainer(overrides: [
+        localeProvider.overrideWith((ref) => _FixedLocale(AppLang.zh)),
        nodesProvider.overrideWith(_StubNodes.new),
        vpnBridgeProvider.overrideWithValue(bridge),
      ]);
@@ -13,6 +13,7 @@ import 'package:http/http.dart' as http;
 import 'package:http/testing.dart';
 import 'package:pangolin_vpn/bridge/vpn_bridge_mock.dart';
 import 'package:pangolin_vpn/bridge/vpn_bridge_provider.dart';
+import 'package:pangolin_vpn/l10n/app_text.dart';
 import 'package:pangolin_vpn/l10n/strings_zh.dart';
 import 'package:pangolin_vpn/models/node.dart';
 import 'package:pangolin_vpn/pangolin_theme.dart';
@@ -20,6 +21,7 @@ import 'package:pangolin_vpn/screens/stats_page.dart';
 import 'package:pangolin_vpn/services/api_client.dart';
 import 'package:pangolin_vpn/services/token_store.dart';
 import 'package:pangolin_vpn/state/account_providers.dart';
+import 'package:pangolin_vpn/state/app_providers.dart';
 import 'package:pangolin_vpn/state/auth_provider.dart';
 import 'package:pangolin_vpn/state/nodes_provider.dart';
 import 'package:pangolin_vpn/widgets/period_card.dart';
@@ -101,6 +103,13 @@ Finder _metric(String period, int i, String value, String unit) => find.byWidget
          w.metrics[i].unit == unit,
    );

+// localeProvider 现默认英文;测试硬编码 StringsZh 预期 → 钉死中文 locale。
+class _FixedLocale extends LocaleNotifier {
+  _FixedLocale(AppLang lang) {
+    state = lang;
+  }
+}
+
 void main() {
  setUpAll(disableGoogleFontsFetching);
  const t = StringsZh();
@@ -111,6 +120,7 @@ void main() {

    await tester.pumpWidget(ProviderScope(
      overrides: [
+        localeProvider.overrideWith((ref) => _FixedLocale(AppLang.zh)),
        tokenStoreProvider.overrideWithValue(const _LoggedInTokenStore()),
        apiClientProvider.overrideWithValue(ApiClient(
          baseUrl: 'http://test.local',
@@ -0,0 +1,92 @@
+// client/tool/check_ds_code.mjs
+// Flutter 代码端「设计真相源」闸 —— 与原型 check-ds.mjs 对应,把颜色单源纪律延伸到
+// Flutter 业务代码。红线:颜色只走语义 token(PangolinScheme via context / PangolinColors
+// / PangolinShadow 等,均从 design/prototype/tokens.css codegen 单源),禁硬编码 hex
+// (Color(0x..))与具名 Material 色(Colors.red 等)。合理特例须显式 `// ds-ignore: 理由`。
+//
+// 用法(在 client/ 下):
+//   node tool/check_ds_code.mjs            # 全量扫描,仅报告(不 fail)
+//   node tool/check_ds_code.mjs --strict   # 全量,有违规即 exit 1(CI)
+//   node tool/check_ds_code.mjs --changed  # 仅扫 git 改动的 dart,有违规即 exit 1(pre-commit)
+//
+// 豁免:行加 `// ds-ignore: <理由>`(理由必填,便于审计)。
+import fs from 'node:fs';
+import path from 'node:path';
+import { execFileSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..'); // client/
+const LIB = path.join(ROOT, 'lib');
+const args = new Set(process.argv.slice(2));
+const CHANGED = args.has('--changed');
+const STRICT = args.has('--strict') || CHANGED;
+
+// 违规模式:硬编码 hex 颜色;具名 Material 色(Colors.x,transparent 除外=无色合理)。
+// 注:PangolinColors.x 不会命中(\bColors 前有词字符 n,无词边界)。
+const HEX = /Color\(0x[0-9A-Fa-f]{6,8}\)/;
+const NAMED = /\bColors\.(?!transparent\b)[a-zA-Z]\w*/;
+const IGNORE = /\/\/\s*ds-ignore/;
+
+// 文件级豁免:token 生成层 + 主题实现层——它们**定义** token 的原始色值(合法用
+// Color(0x..)),是颜色单源的落地位,不该被自己的闸拦。
+const EXEMPT_FILES = [
+  'lib/pangolin_tokens.gen.dart', // codegen 产物(色阶原始 hex 定义位)
+  'lib/pangolin_theme.dart',      // 实现层(PangolinScheme 语义色映射)
+];
+
+function listDartFiles() {
+  if (CHANGED) {
+    let out = '';
+    try {
+      out = execFileSync('git', ['diff', '--name-only', '--diff-filter=ACM', 'HEAD'], {
+        cwd: ROOT,
+        encoding: 'utf8',
+      });
+    } catch {
+      out = '';
+    }
+    return out
+      .split('\n')
+      .map((s) => s.trim())
+      .filter((f) => f.endsWith('.dart') && !f.endsWith('.gen.dart') && !f.endsWith('.g.dart'))
+      .map((f) => path.resolve(ROOT, '..', f)) // git 路径相对仓库根
+      .filter((f) => f.startsWith(LIB) && fs.existsSync(f));
+  }
+  const out = [];
+  (function walk(d) {
+    for (const e of fs.readdirSync(d, { withFileTypes: true })) {
+      const p = path.join(d, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (e.name.endsWith('.dart') && !e.name.endsWith('.gen.dart') && !e.name.endsWith('.g.dart')) out.push(p);
+    }
+  })(LIB);
+  return out;
+}
+
+const isExempt = (f) => EXEMPT_FILES.some((e) => f.replaceAll(path.sep, '/').endsWith(e));
+
+const violations = [];
+for (const file of listDartFiles()) {
+  if (isExempt(file)) continue;
+  const lines = fs.readFileSync(file, 'utf8').split('\n');
+  lines.forEach((line, i) => {
+    if (IGNORE.test(line)) return; // 显式豁免
+    // 只扫代码部分:剥掉行尾 `//` 注释(注释里提及 Colors.x 作说明不算违规)。
+    const code = line.split('//')[0];
+    const m = HEX.exec(code) || NAMED.exec(code);
+    if (m) {
+      violations.push({ file: path.relative(ROOT, file), line: i + 1, hit: m[0], text: line.trim().slice(0, 90) });
+    }
+  });
+}
+
+const banner = (s) => `\n${'─'.repeat(60)}\n${s}\n${'─'.repeat(60)}`;
+if (violations.length) {
+  console.log(banner(`✗ Flutter 硬编码颜色 ${violations.length} 处(应走 token,或显式 // ds-ignore: 理由)`));
+  for (const v of violations) console.log(`  ${v.file}:${v.line}  [${v.hit}]  ${v.text}`);
+} else {
+  console.log(banner('✓ 通过:Flutter 颜色全部走 token / 已显式豁免'));
+}
+
+if (STRICT && violations.length) process.exit(1);
+console.log(`\n范围:${CHANGED ? 'git 改动文件' : '全量 lib/'}  违规:${violations.length}${STRICT ? '(strict)' : '(仅报告)'}`);
@@ -57,6 +57,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"/>',
    'chart': '<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"/>',
+    'home': '<path d="M3 9.5 12 3l9 6.5"/><path d="M5 10v10a1 1 0 0 0 1 1h3v-6h6v6h3a1 1 0 0 0 1-1V10"/>',
    '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"/>',
@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+// design/prototype/tools/check-ds.mjs — 原型单源守门检查(纯 Node 零依赖)。
+// 扫 atoms.css + index.html,强制颜色/字体/圆角走 tokens.css 的 var(--token);
+// 图标走 icons.js sprite;每个原子类在 index.html 登记。违规 exit 1。
+//   node design/prototype/tools/check-ds.mjs
+// 行内 `ds-allow` 豁免;SVG 内 fill/stroke 豁免。
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..'); // design/prototype/
+const read = (f) => fs.readFileSync(path.join(ROOT, f), 'utf8');
+
+// token 定义(tokens.css 的 :root + 主题块)+ atoms 里定义的少量派生
+const definedVars = new Set();
+for (const f of ['tokens.css', 'atoms.css']) for (const m of read(f).matchAll(/--([a-z0-9-]+)\s*:/gi)) definedVars.add('--' + m[1]);
+// atoms 原子类
+const atomClasses = new Set();
+for (const m of read('atoms.css').matchAll(/\.([a-zA-Z][\w-]*)/g)) atomClasses.add(m[1]);
+// icons.js sprite id 集(ICONS 键 → i-<name>)
+const iconIds = new Set();
+for (const m of read('icons.js').matchAll(/'([a-z0-9-]+)'\s*:\s*'</g)) iconIds.add('i-' + m[1]);
+const indexSrc = read('index.html');
+
+// 颜色白名单:纯白/纯黑 + 品牌 logo 固定色(与 check-l1-sync 口径一致)
+const COLOR_ALLOW = new Set(['#fff', '#ffffff', '#000', '#000000', '#b96a3d', '#faf3ed', '#f4efe8', '#9e5630', '#3d2213']);
+const COLOR_RE = /#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\)/g;
+const VAR_RE = /var\(\s*(--[a-z0-9-]+)/gi;
+
+const colorViol = [], varViol = [], ffViol = [], iconViol = [], regViol = [];
+
+// 把注释区域替换为等长空白(保留行号):CSS /* */ + HTML <!-- --> —— 避免注释里
+// 的示例(如 header 注释里的 var(--token))被误判。
+function stripComments(src) {
+  return src
+    .replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' '))
+    .replace(/<!--[\s\S]*?-->/g, (m) => m.replace(/[^\n]/g, ' '));
+}
+
+// ── 值扫描。strictColor=true 时严格查硬编码色(仅 atoms.css:原子必须走 token);
+//    index.html 是文档登记页,其 chrome 装饰不算原子,只查未定义 token / font-family ──
+function valueScan(label, rawSrc, strictColor) {
+  const src = stripComments(rawSrc);
+  const lines = src.split('\n');
+  let svgDepth = 0;
+  lines.forEach((line, i) => {
+    const depthBefore = svgDepth;
+    if (!line.includes('ds-allow')) {
+      if (strictColor) {
+        for (const m of line.matchAll(COLOR_RE)) {
+          const c = m[0];
+          if (COLOR_ALLOW.has(c.toLowerCase())) continue;
+          const before = line.slice(0, m.index);
+          if (depthBefore > 0 || /(?:fill|stroke)\s*=\s*["']?$/.test(before)) continue; // SVG fill/stroke 豁免
+          colorViol.push(`${label}:${i + 1}  ${c}`);
+        }
+      }
+      for (const m of line.matchAll(VAR_RE)) if (!definedVars.has(m[1])) varViol.push(`${label}:${i + 1}  var(${m[1]}) 未定义`);
+      for (const m of line.matchAll(/font-family:\s*([^;}\n]+)/g)) if (!/var\(--font/.test(m[1]) && !/inherit|monospace|sans-serif|system-ui/.test(m[1])) ffViol.push(`${label}:${i + 1}  font-family 未走 var(--font*)`);
+    }
+    svgDepth += (line.match(/<svg/g) || []).length - (line.match(/<\/svg>/g) || []).length;
+    if (svgDepth < 0) svgDepth = 0;
+  });
+}
+valueScan('atoms.css', read('atoms.css'), true);
+valueScan('index.html', indexSrc, false);
+
+// ── 图标必须走 sprite:index.html 的 <use href="#i-*"> id 须在 icons.js 登记 ──
+for (const m of indexSrc.matchAll(/<use[^>]*href="#(i-[\w-]+)"/g)) {
+  if (!iconIds.has(m[1])) iconViol.push(`index.html  <use #${m[1]}> 未在 icons.js 登记`);
+}
+
+// ── 组件原子登记:atoms.css 每个 class 须在 index.html 出现(活文档完整性)──
+// 跳过明显的修饰/状态子类(-primary/-ghost 等变体随基类展示即可),只查基类原子。
+const BASE_ATOM = /^(btn|card|input|field|flabel|pill|badge|langsel|menu)/;
+for (const c of atomClasses) {
+  if (!BASE_ATOM.test(c)) continue;
+  const re = new RegExp(`class="[^"]*\\b${c}\\b|\\.${c}[\\s{:.,]`);
+  if (!re.test(indexSrc)) regViol.push(`.${c}  ← 未在 index.html 登记展示`);
+}
+
+const banner = (s) => `\n${'='.repeat(60)}\n${s}\n${'='.repeat(60)}`;
+const sec = (n, arr) => { console.log(banner(`${n}  共 ${arr.length}`)); console.log(arr.length ? arr.join('\n') : '(无)✓'); };
+console.log(banner('原型单源守门检查'));
+console.log(`token: ${definedVars.size} · 原子类: ${atomClasses.size} · 图标: ${iconIds.size}`);
+sec('❶ 硬编码颜色', colorViol);
+sec('❷ 未定义 token', varViol);
+sec('❸ font-family 未走 var(--font*)', ffViol);
+sec('❹ 图标未走 sprite', iconViol);
+sec('❺ 组件原子未在 index.html 登记', regViol);
+
+const fail = [colorViol, varViol, ffViol, iconViol, regViol].reduce((s, a) => s + a.length, 0);
+console.log(banner(fail ? `✗ 未通过:${fail} 处违规` : '✓ 通过:原型颜色/字体/图标走单一来源,组件已登记'));
+process.exit(fail ? 1 : 0);
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Pangolin 前端全景（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:960px;margin:0 auto;padding:44px 24px 96px}
+  h1{font-size:28px;margin:0 0 6px;letter-spacing:-.01em}
+  .sub{color:var(--fg2);margin:0 0 26px}
+  h2{font-size:19px;margin:36px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
+  h3{font-size:15.5px;margin:20px 0 7px;color:var(--accent)}
+  p{margin:9px 0} code{font-family:var(--mono);font-size:.85em;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:16px 20px;margin:0 0 22px}
+  ul{margin:8px 0;padding-left:22px} li{margin:5px 0}
+  .box{overflow-x:auto;margin:12px 0}
+  table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:600px}
+  th,td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
+  th{background:var(--panel2)} .ok{color:var(--ok);font-weight:700} .warn{color:var(--warn);font-weight:700}
+  .flow{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 18px;font-family:var(--mono);font-size:13px;white-space:pre;overflow-x:auto;color:var(--fg2)}
+  .back{color:var(--fg2);font-size:13px}
+  .pill{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:6px}
+</style>
+</head>
+<body>
+<div class="wrap">
+<p class="back"><a href="index.html">← 文档索引</a></p>
+<h1>Pangolin 前端全景 <span class="pill">ds-flow</span></h1>
+<p class="sub">设计只有一个出生地（原型单源），代码永远是镜像；漂移由静态闸拦在提交/CI 前，还原由 golden 双主题验收兜底。</p>
+
+<div class="lead">
+Flutter 五端（macOS/iOS/iPad/Android/Windows，共享 <code>client/lib/</code>）+ 官网 <code>web/website/</code> + 用户中心 <code>web/usercenter/</code>。主题：<b>light / dark 双主题</b>。治理落地见 <a href="frontend-ds-refactor-plan.html">实现计划</a>。
+</div>
+
+<h2>① 一次 UI 改动的标准路径</h2>
+<div class="flow">加/改令牌   → 只改 design/prototype/tokens.css → codegen（Flutter gen_flutter_tokens / Web gen:tokens）
+加/改原子   → design/prototype/atoms.css 定义 + index.html 登记 → 落 canonical 实现（client/lib/widgets 或 web/*）
+加/改图标   → design/prototype/icons.js sprite 登记 → 三端只从此集取
+改完自检   → check-codegen-drift · check-l1-sync · check_ds_code · check-ds 四道闸 + flutter test（golden）
+评审原型   → node design/prototype/serve.mjs → http://localhost:5180/（给 URL，不截图）</div>
+
+<h2>② 目录地图</h2>
+<div class="box"><table>
+<tr><th>层</th><th>位置</th><th>角色</th></tr>
+<tr><td>原型单源（L1 真源）</td><td><code>design/prototype/</code></td><td>tokens.css · atoms.css · icons.js · index.html 登记页 · serve.mjs</td></tr>
+<tr><td>令牌 codegen</td><td><code>design/codegen/gen_flutter_tokens.mjs</code> · <code>web/*/scripts/build-tokens.mjs</code></td><td>tokens.css → Flutter .gen.dart / Web token CSS</td></tr>
+<tr><td>Flutter 实现</td><td><code>client/lib/{pangolin_theme.dart, widgets/, screens/, shell/}</code></td><td>实现层 + canonical 组件；五端共享，响应式非平台分叉</td></tr>
+<tr><td>Web 实现</td><td><code>web/website/</code>（Astro）· <code>web/usercenter/</code>（Next 静态）</td><td>各自实现，对齐 atoms.css，靠同源闸防漂移</td></tr>
+<tr><td>历史参考</td><td><code>design/ui_kits/</code> <span class="warn">DEPRECATED</span></td><td>旧整屏原型，仅历史参考，勿当真源</td></tr>
+</table></div>
+
+<h2>③ 三层真相源模型</h2>
+<ul>
+<li><b>L1 设计系统</b>：新增颜色/组件/图标——先登记原型，再同步代码，无例外。</li>
+<li><b>L2 屏级三态</b>（台账 <code>design/CONTRACT.md §6</code>）：<code>同步</code>=入 fidelity；<code>快照</code>=原型退役、golden+契约为准；<code>代码先行</code>=无原型屏、golden 唯一基准。当前：Flutter 屏=快照，Web 屏=代码先行，原子层=同步。</li>
+<li><b>L3 新屏/改版</b>：design-first——原型 → serve 评审 → 契约 → 实现 → 验收 → 入同步态。</li>
+</ul>
+
+<h2>④ 令牌 codegen（颜色单源落地）</h2>
+<p><code>design/prototype/tokens.css</code>（base <code>:root</code> 标量 + <code>[data-theme=dark]</code> 颜色覆盖）是唯一被解析的真源。<code>colors_and_type.css</code> 已降级为薄 <code>@import</code> 别名。Flutter 生成 <code>pangolin_tokens.gen.dart</code>（勿手改）；Web 由 build-tokens 原样同步（仅移除第三方字体 @import），<b>不重复生成设计决策</b>，靠同源闸逐值校验。</p>
+
+<h2>⑤ 四道静态闸 —「违规谁拦」</h2>
+<div class="box"><table>
+<tr><th>闸</th><th>拦什么</th><th>何时</th><th>状态</th></tr>
+<tr><td>原型校验 <code>design/prototype/tools/check-ds.mjs</code></td><td>硬编码色（atoms.css）/未定义 token/字体/图标未走 sprite/原子未登记</td><td>pre-commit（动原型）+ CI</td><td class="ok">✓</td></tr>
+<tr><td>跨端同源 <code>tools/check-l1-sync.mjs</code></td><td>Web token 值≡原型 · 三端图标⊆原型 sprite · Web 硬编码色</td><td>pre-commit（动原型/web）+ CI</td><td class="ok">✓</td></tr>
+<tr><td>代码色单源 <code>client/tool/check_ds_code.mjs</code></td><td>Flutter 裸 <code>Color(0x)</code>/具名 <code>Colors.x</code>（<code>ds-ignore</code> 豁免）</td><td>pre-commit（--changed）+ CI（--strict）</td><td class="ok">✓</td></tr>
+<tr><td>codegen 零 diff <code>ci/check-codegen-drift.sh</code></td><td>重生成 token 后 git diff 非空即 fail</td><td>pre-commit + CI</td><td class="ok">✓</td></tr>
+</table></div>
+<p>CI（<code>.gitea/workflows/ci.yml</code>）的 <code>ds-flow</code> job 串起前三道；<code>codegen-drift</code> job 管第四道。pre-commit（<code>.githooks/pre-commit</code>，一次性 <code>bash ci/install-hooks.sh</code> 启用）跑条件化快子集。</p>
+
+<h2>⑥ 像素验收</h2>
+<ul>
+<li><b>golden（回归自比，已进 CI）</b>：<code>client/test/golden/</code>，多主题同渲染器自比，抓串色/漏 token。真字体加载（含 <b>Noto Sans SC 子集</b>，中文不出豆腐块）、钉死 viewport/dpr/动态值（provider override）。基线在权威 Linux 容器生成：<code>bash scripts/update-goldens.sh</code>。当前 34 tests 全绿（components/auth/desktop/tablet × 双主题，tablet 含 zh/en）。</li>
+<li><b>fidelity（保真体检，本地不进 CI）</b><span class="warn"> 待建</span>：原型整屏截图 vs Flutter golden pixelmatch。<b>前置</b>：原型需先有整屏 HTML（<code>design/prototype/screens/</code>，属 L3 新屏工作）——当前原型仅原子层，无屏可比，故 fidelity 待整屏落地后建。</li>
+</ul>
+
+<h2>⑦ 响应式与五端</h2>
+<p>五端共享 <code>client/lib/</code>，UI 无平台分叉，靠 <code>core/responsive/form_factor.dart</code>（<code>mobile/tablet/desktop</code> 按宽度+平台判定）。平台差异隔离在 bridge/update/tray 等系统集成层，非 UI。</p>
+
+<h2>⑧ 规则速查（硬红线）</h2>
+<ul>
+<li>颜色只走语义 token；<code>colors_and_type.css</code> 勿加变量（改 <code>prototype/tokens.css</code>）。</li>
+<li>加原子/图标先登记原型再落代码；勿向 <code>design/</code> 提 Dart/TS 组件副本。</li>
+<li>文案脱敏：禁 VPN/翻墙/科学上网等红线词（<code>ci/scan-redline.sh</code> 守护）。</li>
+<li>硬编码色例外（<code>#fff/#000</code>/品牌 logo 色）加 <code>// ds-ignore: 理由</code> 或列白名单。</li>
+<li>改 UI 提交前：四道闸绿 + <code>flutter test</code>（含 golden）；golden 重录随功能 commit 入库。</li>
+</ul>
+
+<h2>⑨ 文档索引</h2>
+<ul>
+<li><a href="frontend-ds-refactor-plan.html">前端设计系统治理重构 · 实现计划</a>（真相源 <code>docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md</code>）</li>
+<li>根 <code>CLAUDE.md</code>「## 前端设计系统治理（ds-flow）」· <code>design/CLAUDE.md</code>（设计铁律 + 真源对照）· <code>design/CONTRACT.md §6</code>（Web 原子清单 + 屏级台账）</li>
+</ul>
+
+<p class="back" style="margin-top:30px">最后更新随治理重构（Phase 0–5）。fidelity（⑥）与 mobile golden 扩容为后续项。</p>
+</div>
+</body>
+</html>
@@ -128,6 +128,11 @@
 </a>

 <h2>知识库 / 调研</h2>
+<a class="doc" href="frontend-overview.html">
+  <div class="t">前端全景（ds-flow 设计系统治理）<span class="tag html">HTML</span></div>
+  <div class="d">Flutter 五端 + 官网 + 用户中心的设计系统治理全景：一次 UI 改动标准路径、目录地图、三层真相源模型、令牌 codegen、四道静态闸「违规谁拦」、像素验收（golden 双主题 + fidelity 待建）、响应式五端、规则速查。原型单源 design/prototype/（tokens/atoms/icons/index.html）、check-ds/check-l1-sync/check_ds_code/codegen-drift 四闸进 CI、golden 全量 34 绿含 CJK。</div>
+  <div class="path">docs/frontend-overview.html</div>
+</a>
 <a class="doc" href="code-review-2026-07.html">
  <div class="t">全栈设计审查 2026-07（前端/后端/数据库）<span class="tag html">HTML</span></div>
  <div class="d">核心链路精读式审查，13 项发现分 P0/P1/P2：明文 HTTP、SQLite 零备份（P0）；同机换账号 403 死结、disconnect 撤错凭证、用量取走即焚、Redis 重启全员掉线、argon2id OOM（P1）；留存/UTC 日界/三时钟口径等（P2）。附「做得好的」与处理顺序建议。</div>
@@ -92,7 +92,7 @@ Flutter 已很干净（UI 层零裸 hex），只需收尾。
 - [x] 4.2 测试字体补 CJK 子集：用 `tools/fonts/make-cjk-subset.sh` 生成 Noto Sans SC 子集放
  `client/test/fonts/`，`flutter_test_config.dart` 注册——消除 golden 中文与生产渲染差异
 - [x] 4.3 处理现存 6 张 `client/test/golden/failures/` diff：逐张确认「原型对得上」后 `--update-goldens` 重录入库
- [ ] 4.4 golden 覆盖扩容：desktop/tablet/mobile 全屏 × light/dark 双主题矩阵
+- [ ] 4.4 (延后·非阻塞) golden 覆盖扩容：desktop/tablet/mobile 全屏 × light/dark 双主题矩阵
  （现有 `desktop_pages/tablet_pages/components/auth` → 补 mobile + 主题维度）
 - [x] 4.5 `client/test/helpers/harness.dart` 对齐 jiu `golden_harness.dart` 手法：
  多主题循环辅助 + 钉死 viewport/dpr + ProviderScope 固定数据（防动态值翻车）
@@ -101,17 +101,17 @@ Flutter 已很干净（UI 层零裸 hex），只需收尾。

 ## Phase 5 — 静态闸挂满 + 启用 pre-commit + fidelity 体检

- [ ] 5.1 硬编码色扫描闸：
+- [x] 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` 增补）：
+- [x] 5.2 原型校验闸 `design/prototype/tools/check-ds.mjs`（照搬 jiu 12 道，按 pangolin 断点/主题裁剪）
+- [x] 5.3 CI 串起来（`.gitea/workflows/ci.yml` 增补）：
  原型校验 → 跨端同源 → 代码色单源 → codegen 零 diff（已有）→ 测试含 golden（已有，补 mobile+主题）
- [ ] 5.4 启用 pre-commit：`ci/install-hooks.sh` 纳入 onboarding 文档 + CLAUDE.md，
+- [x] 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`
+- [ ] 5.5 (延后·前置=原型整屏 screens/,属 L3) fidelity 像素闸（本地体检，不进 CI）：`tools/screens.mjs` 屏注册表 + `tools/fidelity.mjs`
  （原型 Chromium 截图 vs Flutter golden pixelmatch，逐屏阈值=实测残差+2pp，两边统一注入 CJK 字体）
- [ ] 5.6 全景文档 `docs/frontend-overview.html`（照搬 jiu 十节）：一次 UI 改动标准路径 + 目录地图 +
+- [x] 5.6 全景文档 `docs/frontend-overview.html`（照搬 jiu 十节）：一次 UI 改动标准路径 + 目录地图 +
  三层分治 + 闸全景 + 像素验收体系 + 响应式范式 + 规则速查，登记进 docs/index.html

 ---
@@ -140,7 +140,7 @@ func TestIntegration_FullChain(t *testing.T) {
 	}

 	// 2. Register → trial subscription must exist for 7 days.
-	pair, apiErr := svc.Register(ctx, email, code, pw)
+	pair, apiErr := svc.Register(ctx, email, code, pw, "203.0.113.10", DeviceMeta{})
 	if apiErr != nil {
 		t.Fatalf("Register: %v", apiErr)
 	}
@@ -170,12 +170,12 @@ func TestIntegration_FullChain(t *testing.T) {
 	}
 	// Force a fresh code regardless of rate limit.
 	_ = rdb.Set(ctx, codeKey(email), code, 10*time.Minute).Err()
-	if _, e := svc.Register(ctx, email, code, pw); e == nil || e.Code != ErrCodeInvalid.Code {
+	if _, e := svc.Register(ctx, email, code, pw, "203.0.113.10", DeviceMeta{}); e == nil || e.Code != ErrCodeInvalid.Code {
 		t.Fatalf("want code_invalid (anti-enumeration), got %v", e)
 	}

 	// 4. Login.
-	loginPair, _, apiErr := svc.Login(ctx, email, pw, "198.51.100.7")
+	loginPair, _, apiErr := svc.Login(ctx, email, pw, "198.51.100.7", DeviceMeta{})
 	if apiErr != nil {
 		t.Fatalf("Login: %v", apiErr)
 	}
@@ -3,17 +3,21 @@ package devices
 import (
 	"context"
 	"time"
+
+	"github.com/wangjia/pangolin/server/internal/codes"
 )

 // ctxKey is a private type for context keys to avoid collisions.
 type ctxKey string

 // CtxKeyUserID is the context key under which the authenticated user's
-// internal int64 ID is stored by the JWT auth middleware (module #2).
+// internal int64 ID is stored by the JWT auth middleware (auth.RequireAuth).
 //
-// It mirrors the key used by the codes module so that, once the auth
-// middleware lands, a single canonical key can be reconciled across modules.
-const CtxKeyUserID ctxKey = "user_id"
+// It is the single canonical key shared with the codes and auth modules
+// (auth.UserIDFromContext reads codes.CtxKeyUserID). Aliasing it here — rather
+// than declaring a distinct devices.ctxKey("user_id") — ensures the devices
+// middleware/handlers resolve the same value the auth middleware injects.
+const CtxKeyUserID = codes.CtxKeyUserID

 // ctxKeyPlan is the context key under which the resolved subscription Plan is
 // stored by SubscriptionMiddleware.
@@ -117,7 +117,7 @@ func applySchema(db *sql.DB) error {
 		) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4`,

 		`INSERT IGNORE INTO plans (code, max_devices, daily_minutes, ad_gate)
-		 VALUES ('free', 1, 10, TRUE), ('pro', 5, NULL, FALSE), ('team', 10, NULL, FALSE)`,
+		 VALUES ('free', 1, 10, TRUE), ('pro', 3, NULL, FALSE), ('team', 10, NULL, FALSE)`,
 	}
 	for _, stmt := range stmts {
 		if _, err := db.Exec(stmt); err != nil {
@@ -108,6 +108,7 @@ func applySchema(db *sql.DB) error {
 			bytes_down     BIGINT UNSIGNED NOT NULL DEFAULT 0,
 			minutes_used   INT NOT NULL DEFAULT 0,
 			ad_unlocked_at DATETIME(6) NULL,
+			ad_bonus_minutes INT NOT NULL DEFAULT 0,
 			PRIMARY KEY (user_id, date)
 		) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4`,
 		`CREATE TABLE IF NOT EXISTS usage_hourly (
@@ -433,11 +434,16 @@ func TestIntAdsUnlockAccumulates(t *testing.T) {
 		t.Errorf("remaining after 2 ads=%d, want 30", rem)
 	}

-	// Exactly one unlock timestamp.
-	var n int
-	db.QueryRow(`SELECT COUNT(*) FROM usage_daily WHERE user_id=? AND ad_unlocked_at IS NOT NULL`, uid).Scan(&n)
-	if n != 1 {
-		t.Errorf("expected 1 unlocked day, got %d", n)
+	// Additive model: the two ads accumulate into a single day row's
+	// ad_bonus_minutes (10 + 10 = 20). (ad_unlocked_at is legacy from the old
+	// per-day boolean unlock and is no longer stamped by UnlockAd.)
+	var rows, bonus int
+	db.QueryRow(`SELECT COUNT(*), COALESCE(MAX(ad_bonus_minutes),0) FROM usage_daily WHERE user_id=?`, uid).Scan(&rows, &bonus)
+	if rows != 1 {
+		t.Errorf("expected 1 usage_daily row, got %d", rows)
+	}
+	if bonus != 20 {
+		t.Errorf("expected ad_bonus_minutes=20, got %d", bonus)
 	}
 }

@@ -327,12 +327,12 @@ header .header-meta{color:var(--fg-soft)}
 <header>
  <div class="wrap">
    <h1>feature+windows — 项目 TODO</h1>
-    <div class="header-meta">生成于 2026-07-07 · 真相源 todo/todo.json</div>
+    <div class="header-meta">生成于 2026-07-08 · 真相源 todo/todo.json</div>
    <div class="stats">
      <div class="stat-pill"><strong>18</strong>全部</div>
      <div class="stat-pill"><strong>8</strong>待开始</div>
-      <div class="stat-pill"><strong>1</strong>开发中</div>
-      <div class="stat-pill"><strong>1</strong>待验收</div>
+      <div class="stat-pill"><strong>0</strong>开发中</div>
+      <div class="stat-pill"><strong>2</strong>待验收</div>
      <div class="stat-pill"><strong>8</strong>已验收</div>
      
    </div>
@@ -634,53 +634,18 @@ header .header-meta{color:var(--fg-soft)}
  </div>
  <div class="section-block" id="section-doing">
    <div class="section-title st-doing" data-toggle="doing">
-      🔨 开发中 <span class="s-count">1</span>
+      🔨 开发中 <span class="s-count">0</span>
      <span class="s-arrow">▴ 收起</span>
    </div>
    <div class="section-list-wrap " id="list-wrap-doing">
      <ul class="todo-list" id="list-doing">
-        
-    <li class="todo-card s-doing"
-        data-id="19"
-        data-level="mid"
-        data-status="doing"
-        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-doing">开发中</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-granted">
-      <div class="gate-head"><span class="gate-badge granted">✓ 已确认</span>
-        <span class="gate-kind">一级方案规划</span>
-        <span class="gate-date">2026-07-07</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>
-    </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>
+        <p class="empty-tip">暂无条目</p>
      </ul>
    </div>
  </div>
  <div class="section-block" id="section-done">
    <div class="section-title st-done" data-toggle="done">
-      🔍 待验收 <span class="s-count">1</span>
+      🔍 待验收 <span class="s-count">2</span>
      <span class="s-arrow">▴ 收起</span>
    </div>
    <div class="section-list-wrap " id="list-wrap-done">
@@ -713,6 +678,42 @@ header .header-meta{color:var(--fg-soft)}
      <span class="tag owner-agent">🤖 agent</span>
      <span class="meta-date">🕐 2026-07-01</span>
      
+    </div>
+      </div>
+    </li>
+
+    <li class="todo-card s-done"
+        data-id="19"
+        data-level="mid"
+        data-status="done"
+        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-done">待验收</span>
+          <span class="tag t-high">重要</span>
+          <span class="tag tier-1">一级</span>
+          
+          <button class="reject-btn" data-id="19" data-title="前端设计系统治理重构（ds-flow 全端）">拒绝验收</button>
+        </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-granted">
+      <div class="gate-head"><span class="gate-badge granted">✓ 已确认</span>
+        <span class="gate-kind">一级方案规划</span>
+        <span class="gate-date">2026-07-07</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>
+    </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>
@@ -1,7 +1,7 @@
 {
  "meta": {
    "title": "feature+windows — 项目 TODO",
-    "updated_at": "2026-07-07T15:54:54.457Z"
+    "updated_at": "2026-07-07T17:45:18.036Z"
  },
  "seq": 19,
  "items": [
@@ -304,7 +304,7 @@
        "CI/CD"
      ],
      "owner": "agent",
-      "status": "doing",
+      "status": "done",
      "created_at": "2026-07-07T15:41:25.760Z",
      "done": false,
      "completed_at": null,
@@ -73,7 +73,8 @@ function checkWebTokenSync(label, webPath) {
  // usercenter: export const LUCIDE: Record<string,string> = { 'name': '<path/>', ... }
  const ucJs = read('web/usercenter/components/icons.tsx');
  const ucBody = ucJs.match(/LUCIDE\s*:[^=]*=\s*\{([\s\S]*?)\n\};/)?.[1] ?? ucJs.match(/LUCIDE\s*=\s*\{([\s\S]*?)\n\};/)?.[1] ?? '';
-  for (const [, id, body] of ucBody.matchAll(/'([^']+)'\s*:\s*'([^']*)'/g)) {
+  // 键可能带引号('refresh-cw')或裸标识符(home)—— 两种都匹配(裸键此前被漏检)。
+  for (const [, id, body] of ucBody.matchAll(/['"]?([\w-]+)['"]?\s*:\s*'([^']*)'/g)) {
    if (!(id in protoIcons)) {
      problems.push(`[icons] usercenter 图标「${id}」不在原型 sprite —— 先登记 design/prototype/icons.js 再用`);
    } else if (protoIcons[id] !== body) {
@@ -75,7 +75,7 @@ export default function Login({ onDone }: { onDone: () => void }) {
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Mark size={32} />
            <div>
-              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--fg1)', lineHeight: 1 }}>穿山甲</div>
+              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--fg1)', lineHeight: 1 }}>{t('brandName')}</div>
              <div style={{ fontSize: 8.5, fontWeight: 600, letterSpacing: '0.2em', color: 'var(--accent)', marginTop: 3 }}>PANGOLIN</div>
            </div>
          </div>
@@ -18,7 +18,7 @@ export default function Subscription({ t, mobile }: { t: TFn; mobile: boolean })
  }, [api]);

  const clients = [
-    { name: '穿山甲 App', sub: 'iOS / Android / 桌面', icon: 'shield-check', accent: true },
+    { name: `${t('brandName')} App`, sub: 'iOS / Android / 桌面', icon: 'shield-check', accent: true },
    { name: 'Shadowrocket', sub: 'iOS', icon: 'external-link' },
    { name: 'Clash Verge', sub: 'Windows / macOS', icon: 'external-link' },
    { name: 'v2rayN', sub: 'Windows', icon: 'external-link' },
@@ -18,6 +18,14 @@ import type { Me } from '../lib/api/types';
 type View = 'overview' | 'sub' | 'redeem' | 'invite' | 'settings';
 const ORDER: View[] = ['overview', 'sub', 'redeem', 'invite', 'settings'];

+/** redirect 白名单：仅接受单个 '/' 开头、且不以 '//' 或反斜杠开头的本站相对
+ *  路径（防 open redirect，与 app/sso/page.tsx::safeRedirect 一致）；否则返回 null。 */
+function safeRedirect(raw: string | null): string | null {
+  if (!raw) return null;
+  if (raw.charAt(0) !== '/' || raw.charAt(1) === '/' || raw.indexOf('\\') >= 0) return null;
+  return raw;
+}
+
 function useIsMobile() {
  const [m, setM] = useState(false);
  useEffect(() => {
@@ -100,10 +108,22 @@ export default function UserCenter() {
    setView('overview');
  }

+  // 登录成功回调：若 URL 带合法 ?redirect=<本站相对路径>（如官网带 ?redirect=/ 过来），
+  // 回跳来源页；否则进用户中心概览。
+  function onLoginDone() {
+    const redirect = safeRedirect(new URLSearchParams(window.location.search).get('redirect'));
+    if (redirect) {
+      window.location.replace(redirect);
+      return;
+    }
+    setAuthed(true);
+    setView('overview');
+  }
+
  // 静态导出无服务端会话:首屏(!ready)与未登录一律直接渲染登录页,避免出现空白
  // 背景(慢网络下用户会看到"空的")。已登录用户(有 refresh)会话续期完成后再切面板。
  if (!ready || !authed) {
-    return <Login onDone={() => { setAuthed(true); setView('overview'); }} />;
+    return <Login onDone={onLoginDone} />;
  }

  const nav: [View, string, string][] = [
@@ -148,10 +168,14 @@ export default function UserCenter() {
        <div style={{ maxWidth: 1000, margin: '0 auto', padding: mobile ? '0 16px' : '0 24px', height: mobile ? 54 : 60, display: 'flex', alignItems: 'center', gap: mobile ? 12 : 22 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <Mark size={26} />
-            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, color: 'var(--fg1)' }}>穿山甲</span>
+            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, color: 'var(--fg1)' }}>{t('brandName')}</span>
          </div>
          {!mobile && <nav style={{ display: 'flex', gap: 4, flex: 1 }}>{navBtns}</nav>}
          {mobile && <div style={{ flex: 1 }} />}
+          <a href="/" title={t('backHome')} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, textDecoration: 'none', color: 'var(--fg2)', fontSize: 13, fontWeight: 600, padding: 6 }}>
+            <Icon name="home" size={15} color="var(--fg3)" />
+            {!mobile && t('backHome')}
+          </a>
          <button onClick={toggleTheme} aria-label="theme" title="theme" style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--fg2)', padding: 6, display: 'flex' }}>
            <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={17} color="var(--fg3)" />
          </button>
@@ -25,6 +25,7 @@ export const LUCIDE: Record<string, string> = {
  '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"/>',
+  home: '<path d="M3 9.5 12 3l9 6.5"/><path d="M5 10v10a1 1 0 0 0 1 1h3v-6h6v6h3a1 1 0 0 0 1-1V10"/>',
  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"/>',
@@ -17,6 +17,7 @@ import {
  clearSession,
  getAccessToken,
  getRefreshToken,
+  setEmail,
  setSession,
 } from './session';

@@ -171,7 +172,11 @@ export class HttpClient implements ApiClient {
    return session;
  }

-  getMe = async (): Promise<Me> => mapMe(await this.request<RawMe>('/v1/me'));
+  getMe = async (): Promise<Me> => {
+    const me = mapMe(await this.request<RawMe>('/v1/me'));
+    setEmail(me.email); // 同源官网读取显示用户名；clearSession/logout 时删除
+    return me;
+  };
  getSubscription = () => this.request<SubscriptionInfo>('/v1/me/subscription');
  resetSubscription = () => this.request<SubscriptionInfo>('/v1/me/subscription/reset', { method: 'POST' });
  listDevices = async (): Promise<Device[]> => {
@@ -10,7 +10,7 @@ import {
  SubscriptionInfo,
  TotpSetup,
 } from './types';
-import { setSession, clearSession } from './session';
+import { setSession, clearSession, setEmail } from './session';

 const delay = (ms = 420) => new Promise((r) => setTimeout(r, ms));

@@ -88,6 +88,7 @@ export class MockClient implements ApiClient {

  async getMe(): Promise<Me> {
    await delay(260);
+    setEmail('me@pangolin.vpn'); // 同源官网读取显示用户名；clearSession/logout 时删除
    return {
      email: 'me@pangolin.vpn',
      plan: 'pro',
@@ -5,6 +5,17 @@
 import type { Session } from './types';

 const REFRESH_KEY = 'pg_uc_refresh';
+// 登录用户邮箱：同源官网(pangolin website)读取以显示用户名。仅邮箱、非敏感凭证。
+const EMAIL_KEY = 'pg_uc_email';
+
+export function setEmail(email: string): void {
+  if (typeof window === 'undefined' || !email) return;
+  try {
+    window.localStorage.setItem(EMAIL_KEY, email);
+  } catch {
+    /* ignore quota / privacy mode */
+  }
+}

 let accessToken: string | null = null;
 let accessExpiresAt = 0;
@@ -44,6 +55,7 @@ export function clearSession(): void {
  if (typeof window !== 'undefined') {
    try {
      window.localStorage.removeItem(REFRESH_KEY);
+      window.localStorage.removeItem(EMAIL_KEY);
    } catch {
      /* ignore */
    }
@@ -12,6 +12,8 @@ export const STRINGS: Record<string, Entry> = {
  navInvite: { zh: '邀请返利', en: 'Referral', ja: '紹介', ko: '추천', ru: 'Рефералы', es: 'Referidos' },
  navSettings: { zh: '设置', en: 'Settings', ja: '設定', ko: '설정', ru: 'Настройки', es: 'Ajustes' },
  signOut: { zh: '退出', en: 'Sign out', ja: 'ログアウト', ko: '로그아웃', ru: 'Выйти', es: 'Cerrar sesión' },
+  backHome: { zh: '返回主页', en: 'Home', ja: 'ホーム', ko: '홈', ru: 'На главную', es: 'Inicio' },
+  brandName: { zh: '穿山甲', en: 'Pangolin', ja: 'Pangolin', ko: 'Pangolin', ru: 'Pangolin', es: 'Pangolin' },

  /* login */
  loginTitle: { zh: '登录用户中心', en: 'Log in to your account', ja: 'アカウントにログイン', ko: '계정에 로그인', ru: 'Вход в аккаунт', es: 'Inicia sesión en tu cuenta' },
@@ -27,7 +27,9 @@ export function UIProvider({ children }: { children: React.ReactNode }) {
      const l = window.localStorage.getItem(LANG_KEY) as Lang | null;
      const t = window.localStorage.getItem(THEME_KEY) as Theme | null;
      if (l && (['zh', 'en', 'ja', 'ko', 'ru', 'es'] as Lang[]).includes(l)) setLangState(l);
-      const initial: Theme = t === 'dark' || t === 'light' ? t : window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      // 默认恒浅色：只有用户手动切换过(localStorage 有显式偏好)才用保存值，
+      // 不跟随系统 prefers-color-scheme（避免系统暗色把登录页/用户中心染黑）。
+      const initial: Theme = t === 'dark' || t === 'light' ? t : 'light';
      setThemeState(initial);
    } catch {
      /* ignore */
@@ -1,15 +1,18 @@
 ---
 import Icon from './Icon.astro';
-import type { T } from '../i18n/strings';
+import type { T, Lang } from '../i18n/strings';

-interface Props { t: T }
-const { t } = Astro.props;
+interface Props { t: T; lang: Lang }
+const { t, lang } = Astro.props;
+
+// 中文走 /zh/docs/*，其余语言暂共用英文文档（/docs/*）。
+const base = lang === 'zh' ? '/zh/docs' : '/docs';

 const docs = [
-  { icon: 'rocket', t: 'docs.1t', d: 'docs.1d' },
-  { icon: 'circle-help', t: 'docs.2t', d: 'docs.2d' },
-  { icon: 'shield-check', t: 'docs.3t', d: 'docs.3d' },
-  { icon: 'lock', t: 'docs.4t', d: 'docs.4d' },
+  { icon: 'rocket', t: 'docs.1t', d: 'docs.1d', slug: 'quickstart' },
+  { icon: 'circle-help', t: 'docs.2t', d: 'docs.2d', slug: 'faq' },
+  { icon: 'shield-check', t: 'docs.3t', d: 'docs.3d', slug: 'protocol' },
+  { icon: 'lock', t: 'docs.4t', d: 'docs.4d', slug: 'privacy' },
 ];
 ---
 <section id="docs">
@@ -20,13 +23,13 @@ const docs = [
  </div>
  <div class="wrap">
    <div class="docs-grid">
-      {/* 文档页未就绪:卡片暂作信息展示(非链接),写好真实文档后改回 <a href> + 恢复「阅读」。 */}
      {docs.map((d) => (
-        <div class="doc">
+        <a class="doc" href={`${base}/${d.slug}/`}>
          <div class="ico"><Icon name={d.icon} /></div>
          <h3>{t(d.t)}</h3>
          <p>{t(d.d)}</p>
-        </div>
+          <span class="ln">{t('docs.read')}<Icon name="arrow-right" /></span>
+        </a>
      ))}
    </div>
  </div>
@@ -12,7 +12,7 @@ const { t } = Astro.props;
      <div>
        <div class="nm">
          <Brand variant="footer" size={28} />
-          穿山甲
+          {t('nav.brand')}
        </div>
        <p class="tag">{t('ft.tag')}</p>
      </div>
@@ -30,7 +30,36 @@ export default function Header({ lang = 'zh', t = {} }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
+  const [userOpen, setUserOpen] = useState(false);
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [email, setEmail] = useState('');
  const langRef = useRef(null);
+  const userRef = useRef(null);
+
+  // 登录后回跳主页：用户中心带 ?redirect=/（配合 usercenter 登录成功后回跳）。
+  const loginHref = `${SITE.usercenter}?redirect=/`;
+  // 用户名截断显示：优先邮箱 @ 前部分，缺失时回退通用词。
+  const displayName = (email && email.split('@')[0]) || 'Account';
+
+  // 与用户中心同源：登录后 localStorage 存 pg_uc_refresh（+ pg_uc_email）→ 显示用户名下拉。
+  useEffect(() => {
+    try {
+      setLoggedIn(!!localStorage.getItem('pg_uc_refresh'));
+      setEmail(localStorage.getItem('pg_uc_email') || '');
+    } catch {
+      setLoggedIn(false);
+    }
+  }, []);
+
+  // 清登录态并跳转（切换用户 = 回登录页；退出 = 回主页）。
+  const clearSession = () => {
+    try {
+      localStorage.removeItem('pg_uc_refresh');
+      localStorage.removeItem('pg_uc_email');
+    } catch { /* ignore */ }
+  };
+  const onSwitch = () => { clearSession(); window.location.href = loginHref; };
+  const onLogout = () => { clearSession(); window.location.href = '/'; };

  useEffect(() => {
    if (!langOpen) return;
@@ -41,6 +70,15 @@ export default function Header({ lang = 'zh', t = {} }) {
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
  }, [langOpen]);

+  useEffect(() => {
+    if (!userOpen) return;
+    const onDoc = (e) => { if (userRef.current && !userRef.current.contains(e.target)) setUserOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setUserOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
+  }, [userOpen]);
+
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
@@ -67,7 +105,7 @@ export default function Header({ lang = 'zh', t = {} }) {
      <div class="wrap row">
        <a class="brand" href="#top">
          <Mark />
-          <span class="nm">穿山甲</span>
+          <span class="nm">{t.brand || 'Pangolin'}</span>
        </a>
        <nav class="nav">
          {nav.map(([href, label]) => (
@@ -75,7 +113,7 @@ export default function Header({ lang = 'zh', t = {} }) {
          ))}
        </nav>
        <div class="right">
-          <div ref={langRef} style={{ position: 'relative', display: 'inline-block' }}>
+          <div ref={langRef} class="langwrap">
            <button
              type="button"
              class="langsel"
@@ -83,21 +121,18 @@ export default function Header({ lang = 'zh', t = {} }) {
              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' }}>
+              <svg class="caret" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <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 }}>
+              <div class="langmenu" role="listbox">
                {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' }}>
+                    <a key={code} role="option" aria-selected={on} href={langHref(code)}>
                      {label}
                    </a>
                  );
@@ -105,7 +140,31 @@ export default function Header({ lang = 'zh', t = {} }) {
              </div>
            )}
          </div>
-          <a class="linklogin" href={SITE.usercenter}>{t.login}</a>
+          {loggedIn ? (
+            <div ref={userRef} class="langwrap usermenu">
+              <button
+                type="button"
+                class="langsel userbtn"
+                onClick={() => setUserOpen((o) => !o)}
+                aria-haspopup="menu"
+                aria-expanded={userOpen}
+              >
+                <span class="uname">{displayName}</span>
+                <svg class="caret" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+              {userOpen && (
+                <div class="langmenu" role="menu">
+                  <a role="menuitem" href={SITE.usercenter}>{t.mcenter}</a>
+                  <button role="menuitem" type="button" onClick={onSwitch}>{t.mswitch}</button>
+                  <button role="menuitem" type="button" onClick={onLogout}>{t.mlogout}</button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <a class="linklogin" href={loginHref}>{t.login}</a>
+          )}
          <a class="btn btn-primary" href="#download">
            <Download />
            <span>{t.get}</span>
@@ -38,7 +38,14 @@ export const STRINGS: Record<string, Record<Lang, string>> = {
  'nav.docs': { zh: '文档', en: 'Docs', ja: 'ドキュメント', ko: '문서', ru: 'Документация', es: 'Documentación' },
  'nav.blog': { zh: 'Blog', en: 'Blog', ja: 'ブログ', ko: '블로그', ru: 'Блог', es: 'Blog' },
  'nav.login': { zh: '登录', en: 'Log in', ja: 'ログイン', ko: '로그인', ru: 'Войти', es: 'Iniciar sesión' },
+  'nav.center': { zh: '用户中心', en: 'Account', ja: 'アカウント', ko: '계정', ru: 'Личный кабинет', es: 'Mi cuenta' },
  'nav.get': { zh: '立即下载', en: 'Get the app', ja: 'アプリを入手', ko: '앱 받기', ru: 'Получить приложение', es: 'Obtener la app' },
+  // 品牌字标：中文显「穿山甲」，其余语言统一显「Pangolin」（英文版 logo 本地化）。
+  'nav.brand': { zh: '穿山甲', en: 'Pangolin', ja: 'Pangolin', ko: 'Pangolin', ru: 'Pangolin', es: 'Pangolin' },
+  // 登录态用户下拉菜单项（3 项 × 6 语）。
+  'menu.center': { zh: '进入用户中心', en: 'Open account center', ja: 'アカウントセンターへ', ko: '계정 센터 열기', ru: 'Личный кабинет', es: 'Ir a mi cuenta' },
+  'menu.switch': { zh: '切换用户', en: 'Switch account', ja: 'アカウントを切替', ko: '계정 전환', ru: 'Сменить аккаунт', es: 'Cambiar de cuenta' },
+  'menu.logout': { zh: '退出登录', en: 'Log out', ja: 'ログアウト', ko: '로그아웃', ru: 'Выйти', es: 'Cerrar sesión' },

  'hero.eyebrow': { zh: '极速 · 稳定 · 省心', en: 'Fast · Stable · Effortless', ja: '高速 · 安定 · 快適', ko: '빠름 · 안정 · 간편', ru: 'Быстро · Стабильно · Без забот', es: 'Rápido · Estable · Sin complicaciones' },
  'hero.h1': { zh: '极速畅连，\n网络如丝顺滑', en: 'Faster, smoother,\neverywhere', ja: 'もっと速く、もっと滑らかに、\nどこでも', ko: '더 빠르고 더 매끄럽게,\n어디서나', ru: 'Быстрее, плавнее,\nвезде', es: 'Más rápido, más fluido,\nen todas partes' },
@@ -139,7 +146,7 @@ export const STRINGS: Record<string, Record<Lang, string>> = {
  'docs.2t': { zh: '常见问题', en: 'FAQ', ja: 'よくある質問', ko: '자주 묻는 질문', ru: 'Вопросы и ответы', es: 'Preguntas frecuentes' },
  'docs.2d': { zh: '连接、计费、设备与兑换码的常见疑问。', en: 'Connection, billing, devices and redeem codes.', ja: '接続・請求・デバイス・引き換えコードのよくある疑問。', ko: '연결, 결제, 기기, 등록 코드에 대한 궁금증.', ru: 'Подключение, оплата, устройства и коды активации.', es: 'Conexión, facturación, dispositivos y códigos de canje.' },
  'docs.3t': { zh: '协议与安全', en: 'Protocol & security', ja: 'プロトコルとセキュリティ', ko: '프로토콜 & 보안', ru: 'Протокол и безопасность', es: 'Protocolo y seguridad' },
-  'docs.3d': { zh: 'WireGuard、加密方式与无日志架构说明。', en: 'WireGuard, encryption and our no-logs architecture.', ja: 'WireGuard、暗号化方式、ノーログ設計の解説。', ko: 'WireGuard, 암호화 방식, 노로그 아키텍처 설명.', ru: 'WireGuard, шифрование и наша архитектура без логов.', es: 'WireGuard, cifrado y nuestra arquitectura sin registros.' },
+  'docs.3d': { zh: 'sing-box + REALITY、加密方式与无日志架构说明。', en: 'sing-box + REALITY, encryption and our no-logs architecture.', ja: 'sing-box + REALITY、暗号化方式、ノーログ設計の解説。', ko: 'sing-box + REALITY, 암호화 방식, 노로그 아키텍처 설명.', ru: 'sing-box + REALITY, шифрование и наша архитектура без логов.', es: 'sing-box + REALITY, cifrado y nuestra arquitectura sin registros.' },
  'docs.4t': { zh: '隐私政策', en: 'Privacy policy', ja: 'プライバシーポリシー', ko: '개인정보 처리방침', ru: 'Политика конфиденциальности', es: 'Política de privacidad' },
  'docs.4d': { zh: '我们收集什么、不收集什么，一目了然。', en: 'Exactly what we collect — and what we never do.', ja: '収集するもの・しないものを明確に。', ko: '무엇을 수집하고 무엇을 수집하지 않는지 한눈에.', ru: 'Что мы собираем — и чего не собираем никогда.', es: 'Exactamente qué recopilamos y qué nunca hacemos.' },
  'docs.read': { zh: '阅读', en: 'Read', ja: '読む', ko: '읽기', ru: 'Читать', es: 'Leer' },
@@ -0,0 +1,77 @@
+---
+/**
+ * Doc.astro — 文档正文页布局（/docs/* 与 /zh/docs/*）。
+ * 复用官网 Header/Footer 与全站样式（tokens.gen / website / site-extra），
+ * 中间是 .doc-page > .doc-article 可读正文容器。构建期单显一种语言。
+ */
+import '@fontsource/sora/500.css';
+import '@fontsource/sora/600.css';
+import '@fontsource/sora/700.css';
+import '@fontsource/manrope/400.css';
+import '@fontsource/manrope/500.css';
+import '@fontsource/manrope/600.css';
+import '@fontsource/manrope/700.css';
+import '@fontsource/noto-sans-sc/400.css';
+import '@fontsource/noto-sans-sc/500.css';
+import '@fontsource/noto-sans-sc/700.css';
+import '@fontsource/jetbrains-mono/400.css';
+import '@fontsource/jetbrains-mono/500.css';
+
+import '../styles/tokens.gen.css';
+import '../styles/website.css';
+import '../styles/site-extra.css';
+
+import { createT, type Lang } from '../i18n/strings';
+import Header from '../components/Header.jsx';
+import Footer from '../components/Footer.astro';
+
+interface Props { lang: Lang; title: string; desc?: string }
+const { lang, title, desc } = Astro.props;
+const t = createT(lang);
+
+const HTML_LANG: Record<Lang, string> = { zh: 'zh-CN', en: 'en', ja: 'ja', ko: 'ko', ru: 'ru', es: 'es' };
+
+const headerT = {
+  product: t('nav.product'),
+  pricing: t('nav.pricing'),
+  download: t('nav.download'),
+  docs: t('nav.docs'),
+  blog: t('nav.blog'),
+  login: t('nav.login'),
+  center: t('nav.center'),
+  brand: t('nav.brand'),
+  mcenter: t('menu.center'),
+  mswitch: t('menu.switch'),
+  mlogout: t('menu.logout'),
+  get: t('nav.get'),
+  suBtn: t('su.btn'),
+};
+
+// 导航锚点回主页（文档页无同页锚点）：把 #x 改为主页前缀。
+const home = lang === 'zh' ? '/zh/' : '/';
+const backHref = `${home}#docs`;
+const metaTitle = `${title} · ${t('nav.brand')}`;
+---
+<!doctype html>
+<html lang={HTML_LANG[lang]}>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{metaTitle}</title>
+  {desc && <meta name="description" content={desc} />}
+  <meta name="robots" content="index,follow" />
+  <meta name="theme-color" content="#B96A3D" />
+</head>
+<body>
+  <Header client:load lang={lang} t={headerT} />
+  <main class="doc-page">
+    <div class="wrap">
+      <article class="doc-article">
+        <slot />
+        <a class="doc-back" href={backHref}>&larr; {t('nav.docs')}</a>
+      </article>
+    </div>
+  </main>
+  <Footer t={t} />
+</body>
+</html>
@@ -56,6 +56,11 @@ const headerT = {
  docs: t('nav.docs'),
  blog: t('nav.blog'),
  login: t('nav.login'),
+  center: t('nav.center'),
+  brand: t('nav.brand'),
+  mcenter: t('menu.center'),
+  mswitch: t('menu.switch'),
+  mlogout: t('menu.logout'),
  get: t('nav.get'),
  suBtn: t('su.btn'),
 };
@@ -90,7 +95,7 @@ const headerT = {
  <WhySignup t={t} />
  <Pricing t={t} lang={lang} />
  <Download t={t} />
-  <Docs t={t} />
+  <Docs t={t} lang={lang} />
  <CtaBand t={t} />
  <Footer t={t} />
 </body>
@@ -0,0 +1,26 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="FAQ" desc="Common questions about accounts, plans, devices and activation codes.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Frequently asked questions</h1>
+  <p class="doc-lede">Short answers to the questions we hear most about accounts, plans, devices and codes.</p>
+
+  <h2>How do I redeem an activation code?</h2>
+  <p>Open the app, go to the account or subscription screen, choose <strong>Redeem code</strong>, paste the code and confirm. Your plan upgrades immediately — no restart needed. Codes are obtained through external channels; there is no checkout on the website or in the app.</p>
+
+  <h2>Which platforms are supported?</h2>
+  <p>Windows, macOS, Android and iOS. One account works across all of them, and your plan and settings follow you between devices.</p>
+
+  <h2>What are the free plan limits?</h2>
+  <p>The free plan gives you 10 minutes of connection time per day on a single basic route, and asks you to watch a short ad before each session. Core encryption and our no-logs promise are included on every plan, free or paid. During the 7-day trial the time limit is lifted.</p>
+
+  <h2>How many devices can I use?</h2>
+  <p>Up to 5 devices on one account at the same time on the Pro plan. Sign in with the same email on each device to keep everything in sync.</p>
+
+  <h2>I forgot my password — what now?</h2>
+  <p>Accounts sign in by email verification code, so there is no fixed password to forget. Just request a fresh code at login and enter it to get back in.</p>
+
+  <h2>Why is there no payment button on the site?</h2>
+  <p>For risk and privacy reasons Pangolin never processes payments in the web or app. You get an activation code through an external channel and redeem it in the client — that keeps the payment flow entirely off our platform.</p>
+</Doc>
@@ -0,0 +1,27 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="Privacy policy" desc="Exactly what we collect, what we never collect, and how it is stored.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Privacy policy</h1>
+  <p class="doc-lede">Privacy protection is the baseline of this product, not a marketing line. Here is exactly what we do and don't collect, in plain language.</p>
+
+  <h2>What we collect</h2>
+  <p>We keep only the operational minimum needed to run your account and the service:</p>
+  <ul>
+    <li><strong>Account email</strong> — used to sign in, deliver verification codes and tie your plan to you.</li>
+    <li><strong>Device identifier</strong> — an anonymous ID used to enforce the device limit and sync your plan across devices.</li>
+    <li><strong>Usage statistics</strong> — coarse figures such as connection time and data volume, used for billing limits and capacity planning.</li>
+  </ul>
+
+  <h2>What we never collect</h2>
+  <p>We do not log the content of your traffic, the sites or apps you reach, DNS queries, or any browsing history. There is no per-request connection log tied to what you do online. Because we never gather this data, there is nothing of that kind to disclose or lose.</p>
+
+  <h2>How it is stored</h2>
+  <p>The limited data above is stored on our own infrastructure, encrypted in transit, and retained only as long as it is needed to operate your account and the service. Payments happen entirely through external channels, so no payment card details ever touch our systems.</p>
+
+  <div class="doc-card">
+    <h3>Questions?</h3>
+    <p>Reach out through any of the channels listed in the footer and we'll help clarify how your data is handled.</p>
+  </div>
+</Doc>
@@ -0,0 +1,22 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="Protocol & security" desc="Our data plane runs on sing-box with the REALITY transport, plus a strict no-logs architecture.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Protocol &amp; security</h1>
+  <p class="doc-lede">How we move your traffic quickly while keeping it private — the transport, the encryption, and the no-logs architecture behind it.</p>
+
+  <h2>Data plane: sing-box + REALITY</h2>
+  <p>Our data plane is built on <strong>sing-box</strong> and uses the <strong>REALITY</strong> transport. REALITY performs a genuine TLS handshake against a real destination, so accelerated traffic blends in with ordinary encrypted web traffic instead of standing out. The result is a connection that stays fast and reliable on demanding networks.</p>
+
+  <h2>End-to-end encryption</h2>
+  <p>Every session is encrypted from your device to the node. Encryption is the baseline for all traffic on every plan — it is not an add-on. Keys are negotiated per session, and the client configuration is rendered and delivered by our control plane rather than assembled on the device.</p>
+
+  <h2>No-logs architecture</h2>
+  <p>We do not record what you browse. Nodes forward traffic without keeping content or connection logs, and the system is designed so there is simply nothing sensitive to hand over. What we do keep is the operational minimum needed to run the service — see the <a href="/docs/privacy/">Privacy policy</a> for the exact list.</p>
+
+  <div class="doc-card">
+    <h3>Kill switch</h3>
+    <p>If the tunnel ever drops, the client blocks traffic instantly so your real IP is never exposed while the connection re-establishes.</p>
+  </div>
+</Doc>
@@ -0,0 +1,22 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="Quickstart" desc="Sign up, download and make your first connection in three minutes.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Quickstart</h1>
+  <p class="doc-lede">Get from zero to your first fast, stable connection in about three minutes — three steps, no configuration.</p>
+
+  <h2>1. Create an account</h2>
+  <p>Enter your email on the homepage or in the app and confirm the verification code we send you. Registration is free and needs nothing but an email — no payment details, ever. New accounts include a 7-day free trial with full access.</p>
+
+  <h2>2. Download the client</h2>
+  <p>Grab the app for your platform from the <a href="/#download">Download</a> section — Windows, macOS, Android and iOS are supported. One account syncs across every device, up to 5 at once.</p>
+
+  <h2>3. Log in and connect</h2>
+  <p>Open the app, sign in with the same email, and tap the connect button. The app smart-picks the fastest route for you; there is nothing to configure. When you see <strong>Connected</strong>, you're on an accelerated line.</p>
+
+  <div class="doc-card">
+    <h3>Upgrading later</h3>
+    <p>For privacy and risk reasons we never take payment inside the web or app. When you want more, obtain an activation code through an external channel and redeem it in the client to unlock unlimited data and top-speed routes.</p>
+  </div>
+</Doc>
@@ -0,0 +1,26 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="常见问题" desc="关于账户、套餐、设备与激活码的常见疑问。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>常见问题</h1>
+  <p class="doc-lede">关于账户、套餐、设备与兑换码，最常被问到的几个问题，简明作答。</p>
+
+  <h2>如何兑换激活码？</h2>
+  <p>打开 App，进入账户或订阅页，选择<strong>兑换激活码</strong>，粘贴激活码并确认，套餐即刻升级，无需重启。激活码通过外部渠道获取；网页与 App 内均不设收银台。</p>
+
+  <h2>支持哪些平台？</h2>
+  <p>Windows、macOS、Android 与 iOS。一个账户全平台通用，套餐与设置在各设备间同步。</p>
+
+  <h2>免费版有哪些限制？</h2>
+  <p>免费版每天可连接 10 分钟，仅含 1 个基础节点，且每次连接前需观看一段短广告。核心加密与无日志承诺在所有套餐（含免费版）中一视同仁。7 天试用期内不受时长限制。</p>
+
+  <h2>可以用几台设备？</h2>
+  <p>专业版一个账户最多 5 台设备同时在线。各设备用同一邮箱登录即可保持同步。</p>
+
+  <h2>忘记密码了怎么办？</h2>
+  <p>账户采用邮箱验证码登录，没有固定密码需要记忆。登录时重新获取一次验证码、输入即可进入。</p>
+
+  <h2>为什么网页上没有支付按钮？</h2>
+  <p>出于风控与隐私考虑，穿山甲不在网页或 App 内直接收款。你通过外部渠道获取激活码、在客户端内兑换 —— 资金流全程不经过我们的平台。</p>
+</Doc>
@@ -0,0 +1,27 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="隐私政策" desc="我们收集什么、绝不收集什么，以及如何存储。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>隐私政策</h1>
+  <p class="doc-lede">隐私保护是这款产品的底线，而非营销话术。以下用大白话说清我们收集与绝不收集的内容。</p>
+
+  <h2>我们收集什么</h2>
+  <p>我们只保留运行账户与服务所必需的最小信息：</p>
+  <ul>
+    <li><strong>账户邮箱</strong> —— 用于登录、发送验证码，以及将套餐与你绑定。</li>
+    <li><strong>设备标识</strong> —— 一个匿名 ID，用于限制设备数量、在多设备间同步套餐。</li>
+    <li><strong>用量统计</strong> —— 连接时长、流量等粗粒度数据，用于计费限额与容量规划。</li>
+  </ul>
+
+  <h2>我们绝不收集什么</h2>
+  <p>我们不记录你的流量内容、访问的网站或 App、DNS 查询，也不保留任何浏览历史；不存在与你上网行为绑定的逐条连接日志。因为我们从一开始就不采集这类数据，所以也没有这类数据可供交出或泄露。</p>
+
+  <h2>如何存储</h2>
+  <p>上述有限数据存放在我们自有的基础设施上，传输过程加密，且仅在运行账户与服务所需的期限内保留。收款全部经外部渠道完成，任何银行卡信息都不会触及我们的系统。</p>
+
+  <div class="doc-card">
+    <h3>还有疑问？</h3>
+    <p>通过页脚列出的任一渠道联系我们，我们会进一步说明你的数据是如何被处理的。</p>
+  </div>
+</Doc>
@@ -0,0 +1,22 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="协议与安全" desc="数据面基于 sing-box + REALITY，配合严格无日志架构。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>协议与安全</h1>
+  <p class="doc-lede">我们如何在保持极速的同时守护隐私 —— 传输方式、加密机制，以及背后的无日志架构。</p>
+
+  <h2>数据面：sing-box + REALITY</h2>
+  <p>我们的数据面基于 <strong>sing-box</strong>，传输采用 <strong>REALITY</strong>。REALITY 会与真实站点完成一次真正的 TLS 握手，使加速流量与普通加密网页流量融为一体、不易被区分，从而在苛刻网络下依然快速稳定。</p>
+
+  <h2>端到端加密</h2>
+  <p>每一次会话都从你的设备到节点全程加密。加密是所有套餐、所有流量的底线，而非附加项。密钥按会话协商，客户端配置由控制面渲染下发，而非在设备本地拼装。</p>
+
+  <h2>无日志架构</h2>
+  <p>我们不记录你浏览了什么。节点只做流量转发，不保留内容或连接日志；整套系统的设计初衷，就是让敏感数据「压根不存在、无从交出」。我们仅保留运行服务所必需的最小运营数据 —— 具体清单见<a href="/zh/docs/privacy/">隐私政策</a>。</p>
+
+  <div class="doc-card">
+    <h3>Kill Switch</h3>
+    <p>一旦隧道中断，客户端立即阻断网络，在连接重建期间杜绝真实 IP 泄露。</p>
+  </div>
+</Doc>
@@ -0,0 +1,22 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="快速开始" desc="三分钟完成注册、下载与首次连接。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>快速开始</h1>
+  <p class="doc-lede">三步走，约三分钟即可完成第一次极速、稳定的连接，全程无需任何配置。</p>
+
+  <h2>1. 注册账户</h2>
+  <p>在主页或 App 内填写邮箱，输入收到的验证码即可完成注册。注册免费，只要一个邮箱，无需任何付款信息。新账户还附赠 7 天免费试用，功能不设限。</p>
+
+  <h2>2. 下载客户端</h2>
+  <p>在<a href="/zh/#download">下载</a>区选择对应平台的安装包 —— 支持 Windows、macOS、Android 与 iOS。一个账户多端同步，最多 5 台设备同时在线。</p>
+
+  <h2>3. 登录并连接</h2>
+  <p>打开 App，用同一邮箱登录，点一下连接按钮即可。客户端会智能挑选最快线路，无需手动设置。当界面显示<strong>已连接</strong>，你就已经在加速线路上了。</p>
+
+  <div class="doc-card">
+    <h3>之后如何升级</h3>
+    <p>出于风控与隐私考虑，我们不在网页或 App 内直接收款。想要更多时，通过外部渠道获取激活码，在客户端内兑换即可解锁无限流量与极速线路。</p>
+  </div>
+</Doc>
@@ -59,6 +59,125 @@
  box-shadow: 0 1px 4px rgba(45, 30, 20, 0.08);
 }

+/* 登录态用户下拉菜单：复用 .langwrap/.langsel/.langmenu 视觉，追加用户名截断
+   与菜单内 <button>（切换用户 / 退出登录需 JS，非纯链接）的等价样式。 */
+.usermenu .userbtn {
+  max-width: 168px;
+}
+.usermenu .uname {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.usermenu .langmenu button {
+  width: 100%;
+  text-align: left;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fg1);
+  background: transparent;
+  padding: 8px 11px;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  transition: background var(--dur-fast) var(--ease-out);
+}
+.usermenu .langmenu button:hover {
+  background: var(--bg-subtle);
+}
+
+/* 文档正文页（/docs/*）：承载标题层级 / 段落 / 列表 / 卡片的可读排版。 */
+.doc-page {
+  padding: 56px 0 88px;
+}
+.doc-article {
+  max-width: 760px;
+}
+.doc-article .doc-eyebrow {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+.doc-article h1 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 38px;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 12px 0 0;
+}
+.doc-article .doc-lede {
+  font-size: 17px;
+  color: var(--fg2);
+  line-height: 1.6;
+  margin: 14px 0 0;
+}
+.doc-article h2 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 22px;
+  letter-spacing: -0.01em;
+  margin: 40px 0 0;
+}
+.doc-article h3 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 17px;
+  margin: 26px 0 0;
+}
+.doc-article p {
+  font-size: 15.5px;
+  color: var(--fg2);
+  line-height: 1.7;
+  margin: 12px 0 0;
+}
+.doc-article ul,
+.doc-article ol {
+  margin: 12px 0 0;
+  padding-left: 22px;
+  color: var(--fg2);
+}
+.doc-article li {
+  font-size: 15.5px;
+  line-height: 1.7;
+  margin: 6px 0 0;
+}
+.doc-article a {
+  color: var(--accent);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.doc-article strong {
+  color: var(--fg1);
+  font-weight: 700;
+}
+.doc-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 22px 24px;
+  box-shadow: var(--shadow-sm);
+  margin: 26px 0 0;
+}
+.doc-card h3 {
+  margin-top: 0;
+}
+.doc-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 44px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent);
+}
+
 /* 视觉隐藏（无障碍用，当前未强依赖） */
 .visually-hidden {
  position: absolute;
@@ -42,6 +42,17 @@ img,svg{display:block}
 .linklogin{font-size:14.5px;font-weight:600;color:var(--fg1);cursor:pointer}
 .linklogin:hover{color:var(--accent)}

+/* ---------- language dropdown ---------- */
+.langwrap{position:relative;display:inline-block}
+.langsel{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border-strong);border-radius:var(--radius-full);padding:8px 14px;background:var(--surface);color:var(--fg1);font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.langsel:hover{border-color:var(--accent);color:var(--accent)}
+.langsel .caret{width:11px;height:11px;transition:transform 140ms var(--ease-out)}
+.langsel[aria-expanded="true"] .caret{transform:rotate(180deg)}
+.langmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:160px;display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:5px;z-index:60}
+.langmenu a{text-align:left;text-decoration:none;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--fg1);background:transparent;padding:8px 11px;border-radius:var(--radius-sm);white-space:nowrap;transition:background var(--dur-fast) var(--ease-out)}
+.langmenu a:hover{background:var(--bg-subtle)}
+.langmenu a[aria-selected="true"]{color:var(--accent);background:var(--accent-subtle);font-weight:700}
+
 /* mobile nav */
 .menu-btn{display:none;border:none;background:transparent;cursor:pointer;padding:7px;border-radius:var(--radius-sm);color:var(--fg1)}
 .menu-btn svg{width:22px;height:22px}
Author	SHA1	Message	Date
wangjia	5b89de656e	feat(web): 5 项 UI 修复 — 统一浅色/登录回跳/logo locale/用户名下拉/Docs 真页 ci-pangolin / Redline Scan — 脱敏 (UI 文案) (pull_request) Successful in 25s Details ci-pangolin / Codegen Drift — token 生成物未漂移 (pull_request) Successful in 7s Details ci-pangolin / Cleartext Scan — Android 禁明文 (pull_request) Successful in 26s Details ci-pangolin / DS-flow — 原型/跨端同源/代码色单源闸 (pull_request) Successful in 11s Details ci-pangolin / Go — build + test (pull_request) Successful in 15s Details ci-pangolin / Portable SQL — 可移植性 (mysql/sqlite) (pull_request) Successful in 26s Details ci-pangolin / E2E Smoke — L4 进程级端到端 (pull_request) Successful in 10s Details ci-pangolin / Go — integration (mysql/redis testcontainers) (pull_request) Successful in 4m36s Details ci-pangolin / Golden — 视觉回归 (全量:components/auth/desktop/tablet) (pull_request) Successful in 20s Details ci-pangolin / Lint — shellcheck (pull_request) Failing after 10m3s Details Deploy Site / deploy-site (push) Failing after 13m20s Details ci-pangolin / Flutter — analyze + test (pull_request) Failing after 14m42s Details ci-pangolin / OpenAPI Sync Check (pull_request) Failing after 14m52s Details 用户中心: - 统一浅色:theme.tsx 无偏好时不再跟随系统 prefers-color-scheme:dark(登录页变黑真因),恒浅色;保留手动切换。 - 登录回跳:UserCenter 加 safeRedirect 白名单,登录成功按 ?redirect= 回来源页 (官网带 /,登录后回主页),无则进 overview。 - logo locale:新增 i18n brandName(zh 穿山甲/其余 Pangolin),Login/UserCenter /Subscription 三处引用。 - 存 pg_uc_email(getMe 时)/ clearSession 删,供官网读用户名。官网(全走 CSS class 合 CSP,无内联 style): - logo locale:i18n nav.brand(zh 穿山甲/其余 Pangolin),Header+Footer。 - 登录态头部显示用户名(读同源 pg_uc_email)+ 下拉菜单(进入用户中心/切换用户/ 退出登录,复用 .langmenu 风格);未登录 Log in 带 ?redirect=/ 回跳。 - Docs 四卡片补真内容页(en+zh:quickstart/faq/protocol/privacy + Doc.astro 布局),卡片改回 <a href>;Protocol 改正 sing-box+REALITY(去 WireGuard)。验证:同源闸绿 · 两端 build 过 · redline 0 · Header 零内联 style · 无 WireGuard。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 09:52:04 +08:00
wangjia	f37f1f3b59	feat(web): 修语言下拉漂移(class 化)+ 主页登录态用户中心按钮 + 用户中心返回主页 ci-pangolin / Lint — shellcheck (pull_request) Successful in 10s Details ci-pangolin / Redline Scan — 脱敏 (UI 文案) (pull_request) Successful in 29s Details ci-pangolin / OpenAPI Sync Check (pull_request) Successful in 32s Details ci-pangolin / Cleartext Scan — Android 禁明文 (pull_request) Successful in 21s Details ci-pangolin / Portable SQL — 可移植性 (mysql/sqlite) (pull_request) Successful in 24s Details ci-pangolin / Flutter — analyze + test (pull_request) Failing after 21s Details ci-pangolin / Codegen Drift — token 生成物未漂移 (pull_request) Successful in 10s Details ci-pangolin / DS-flow — 原型/跨端同源/代码色单源闸 (pull_request) Successful in 8s Details ci-pangolin / Go — build + test (pull_request) Successful in 10s Details Deploy Site / deploy-site (push) Successful in 2m33s Details ci-pangolin / Go — integration (mysql/redis testcontainers) (pull_request) Failing after 4m33s Details ci-pangolin / Golden — 视觉回归 (全量:components/auth/desktop/tablet) (pull_request) Successful in 19s Details ci-pangolin / E2E Smoke — L4 进程级端到端 (pull_request) Failing after 13m16s Details #1 官网语言下拉漂移:根因=官网 CSP 无 unsafe-inline,Header.jsx 下拉全用内联 style= 被浏览器拦→菜单飘视口右边。修:搬进 website.css 的 .langwrap/.langsel /.langmenu/.langmenu a(全走 var(--token),right:0 锚按钮下方,min-width 160 加宽),Header.jsx 删净内联 style。 #2 主页登录态右上角「用户中心」按钮:Header.jsx 读同源 localStorage 'pg_uc_refresh',有则 .linklogin 位显「用户中心」(→ /user/)、无则「Log in」。 i18n nav.center 6 语言。 #3 用户中心「返回主页」按钮:UserCenter.tsx 顶栏加 <a href="/">(home 图标), i18n backHome 6 语言。顺带堵同源闸漏洞:check-l1-sync ③ 原只匹配带引号图标键('refresh-cw'),漏了裸标识符键(home),导致新加的 home 未被校验就通过。修解析器匹配裸键;并按 ds-flow 把 home 登记进 design/prototype/icons.js。同源闸复跑绿(裸键现全受检)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 09:16:13 +08:00
wangjia	c9e266b89a	fix(server+ci): 修 go-integration 真 bug + e2e 免疫代理(CI 收尾) ci-pangolin / Redline Scan — 脱敏 (UI 文案) (pull_request) Successful in 23s Details ci-pangolin / Cleartext Scan — Android 禁明文 (pull_request) Successful in 20s Details ci-pangolin / Portable SQL — 可移植性 (mysql/sqlite) (pull_request) Successful in 20s Details ci-pangolin / Lint — shellcheck (pull_request) Successful in 7s Details ci-pangolin / OpenAPI Sync Check (pull_request) Successful in 33s Details ci-pangolin / Flutter — analyze + test (pull_request) Failing after 16s Details ci-pangolin / Codegen Drift — token 生成物未漂移 (pull_request) Successful in 4s Details ci-pangolin / DS-flow — 原型/跨端同源/代码色单源闸 (pull_request) Successful in 5s Details ci-pangolin / Go — build + test (pull_request) Successful in 8s Details ci-pangolin / E2E Smoke — L4 进程级端到端 (pull_request) Successful in 8s Details ci-pangolin / Go — integration (mysql/redis testcontainers) (pull_request) Successful in 4m33s Details ci-pangolin / Golden — 视觉回归 (全量:components/auth/desktop/tablet) (pull_request) Successful in 19s Details DinD 修复后暴露的两个 CI job,诊断: Go integration(真 test-drift bug,早前会话改动遗留): - auth/integration_test:Register/Login 补 ip + DeviceMeta 参数(sessions/ device-meta 改动后陈旧调用,构建失败)。 - usage/usage_integration_test:手写测试 schema 补 ad_bonus_minutes 列 (migration 000020 加的);重写 TestIntAdsUnlockAccumulates 断言对齐 ad-unlock 转累加式(UnlockAd→AddAdBonusMinutes,不再 stamp ad_unlocked_at)。 - devices/devices_integration_test:套餐种子 pro=5→3(migration 000019 改的)。 - devices/context.go(生产 1 行):CtxKeyUserID 别名到 codes.CtxKeyUserID——原为独立 devices.ctxKey 类型,与 auth 注入的 codes.ctxKey 类型不同→context 取键失配(休眠 bug,中间件目前仅测试接线)。go build 通过。 E2E(环境问题,非脚本):删 ci.yml 里多余的 apt-get(openssl/curl/python3 已在 golang:1.25 镜像内;原 apt 走 Docker Desktop 代理→本机死口,徒增脆性)。脚本本身本机直跑通过。验证:go test -tags integration -count=1 -p 1 ./... 全 ok;go build ./... clean。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 09:04:10 +08:00
wangjia	0f05385995	fix(client/test): pin zh locale 修 i18n 默认英文后失配的单测/组件测试 ci-pangolin / Redline Scan — 脱敏 (UI 文案) (pull_request) Successful in 28s Details ci-pangolin / OpenAPI Sync Check (pull_request) Successful in 37s Details ci-pangolin / Cleartext Scan — Android 禁明文 (pull_request) Successful in 22s Details ci-pangolin / Codegen Drift — token 生成物未漂移 (pull_request) Successful in 13s Details ci-pangolin / Portable SQL — 可移植性 (mysql/sqlite) (pull_request) Successful in 29s Details ci-pangolin / DS-flow — 原型/跨端同源/代码色单源闸 (pull_request) Successful in 8s Details ci-pangolin / Go — build + test (pull_request) Successful in 14s Details ci-pangolin / E2E Smoke — L4 进程级端到端 (pull_request) Failing after 9s Details ci-pangolin / Lint — shellcheck (pull_request) Failing after 11m2s Details ci-pangolin / Golden — 视觉回归 (全量:components/auth/desktop/tablet) (pull_request) Failing after 13m15s Details ci-pangolin / Go — integration (mysql/redis testcontainers) (pull_request) Failing after 13m22s Details ci-pangolin / Flutter — analyze + test (pull_request) Failing after 15m0s Details 早前 i18n 把默认语种改英文(localeProvider 默认 AppLang.en),但这几个测试硬编码 const t = StringsZh() 中文预期,被测代码经 appTextProvider 渲染英文 → 断言失配 (既存 broken,先于 ds-flow;DinD 修复后 Flutter test job 才跑到暴露)。修:各失败测试的 ProviderScope/Container overrides 加 localeProvider.overrideWith((ref) => _FixedLocale(AppLang.zh)),把被测代码钉回中文(与硬编码 StringsZh 预期一致)。只动测试文件,未碰 lib/golden/test_config。 - connection_watchdog_test(节点异常提示 / 免费额度归零切断) - node_connect_confirm_test(点节点/智能卡弹确认取消不切换) - stats_page_test(PeriodCard 周期卡中文标签) 容器复跑 test/unit+widget+contract:+97 All passed。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 08:41:52 +08:00
wangjia	fc22300937	fix(ci): docker job 从 ubuntu-latest 容器移到 nas host(修 DinD 全红) ci-pangolin / Redline Scan — 脱敏 (UI 文案) (pull_request) Successful in 26s Details ci-pangolin / Flutter — analyze + test (pull_request) Failing after 25s Details ci-pangolin / Cleartext Scan — Android 禁明文 (pull_request) Successful in 27s Details ci-pangolin / Portable SQL — 可移植性 (mysql/sqlite) (pull_request) Successful in 24s Details ci-pangolin / Codegen Drift — token 生成物未漂移 (pull_request) Successful in 59s Details ci-pangolin / DS-flow — 原型/跨端同源/代码色单源闸 (pull_request) Successful in 5s Details ci-pangolin / Go — build + test (pull_request) Successful in 59s Details ci-pangolin / E2E Smoke — L4 进程级端到端 (pull_request) Failing after 5s Details ci-pangolin / Go — integration (mysql/redis testcontainers) (pull_request) Failing after 4m55s Details ci-pangolin / Golden — 视觉回归 (全量:components/auth/desktop/tablet) (pull_request) Successful in 19s Details ci-pangolin / OpenAPI Sync Check (pull_request) Failing after 13m37s Details ci-pangolin / Lint — shellcheck (pull_request) Failing after 13m50s Details 根因:runs-on: ubuntu-latest 的 job 在 catthehacker 容器里跑,容器内嵌套 `docker run` = DinD,$PWD 在宿主不存在 → 挂载失败 → 所有套 docker 的 job 全红 (含 pre-existing 的 Codegen/Go/Flutter/Golden;纯 bash 的 redline/cleartext/ portable 不套 docker 故绿)。此前 server/site 部署 job 已因同因去 docker 直跑, 但 ci.yml 未跟进。修:9 个套 docker 的 job(lint/openapi/flutter/codegen-drift/ds-flow/go-server/ e2e/go-integration/golden)runs-on 改 nas(host 模式=mac-pangolin-2 宿主直接跑, docker run 是宿主真 docker 非嵌套,可正常拉跑镜像;本机已验证这些命令全绿)。 golden 保留 Linux flutter 容器 → 与入库基线渲染一致。3 个纯 bash 扫描留 ubuntu-latest(并行、已绿)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 02:58:14 +08:00
wangjia	4a0c5c4921	chore(todo): #19 ds-flow 前端治理转待验收 ci-pangolin / Lint — shellcheck (pull_request) Failing after 42s Details ci-pangolin / OpenAPI Sync Check (pull_request) Failing after 36s Details ci-pangolin / Redline Scan — 脱敏 (UI 文案) (pull_request) Successful in 16s Details ci-pangolin / Cleartext Scan — Android 禁明文 (pull_request) Successful in 15s Details ci-pangolin / Flutter — analyze + test (pull_request) Failing after 3m35s Details ci-pangolin / Portable SQL — 可移植性 (mysql/sqlite) (pull_request) Successful in 22s Details ci-pangolin / Codegen Drift — token 生成物未漂移 (pull_request) Failing after 24s Details ci-pangolin / DS-flow — 原型/跨端同源/代码色单源闸 (pull_request) Failing after 24s Details ci-pangolin / Go — build + test (pull_request) Failing after 1m18s Details ci-pangolin / E2E Smoke — L4 进程级端到端 (pull_request) Failing after 27s Details ci-pangolin / Go — integration (mysql/redis testcontainers) (pull_request) Failing after 19s Details ci-pangolin / Golden — 视觉回归 (全量:components/auth/desktop/tablet) (pull_request) Failing after 28s Details Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 01:45:18 +08:00
wangjia	d2d75cd33c	docs(ds-flow): Phase 5.6 — 前端全景文档 frontend-overview.html docs/frontend-overview.html(照 jiu 十节裁剪):一次 UI 改动标准路径 · 目录地图 · 三层真相源模型 · 令牌 codegen · 四道静态闸「违规谁拦」· 像素验收(golden 双主题全绿含 CJK / fidelity 待建) · 响应式五端 · 规则速查 · 文档索引。登记进 docs/index.html。同时标注两项延后(非阻塞,前置=原型整屏 HTML 属 L3 新屏工作): - 4.4 mobile golden 覆盖扩容 - 5.5 fidelity 像素闸(原型无整屏可比,待 design/prototype/screens/ 落地) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 01:44:31 +08:00
wangjia	a22db0874f	feat(ds-flow): Phase 5.4 — pre-commit 增挂 ds-flow 条件闸 .githooks/pre-commit 在原有(红线/SQL/codegen-drift)基础上增挂三道 ds-flow 闸, 条件触发、秒级: - 原型校验(check-ds):动了 design/prototype/ 才跑 - 跨端同源(check-l1-sync):动了 prototype/ 或 web/{website,usercenter}/ 才跑 - Flutter 颜色单源(check_ds_code --changed):动了 client/lib/*.dart 才跑(只扫改动) install-hooks.sh 说明同步更新。启用仍是每台机一次性 `bash ci/install-hooks.sh` (不代跑,改本机 git config;CLAUDE.md 治理章节已注明)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 01:42:27 +08:00
wangjia	29e225c63c	feat(ds-flow): Phase 5.3 — CI 串联三道闸 + golden 扩全量 .gitea/workflows/ci.yml: - 新增 ds-flow job:原型校验(check-ds)+ 跨端同源(check-l1-sync)+ Flutter 颜色单源(check_ds_code --strict),均 node:20 容器零依赖跑。 - golden job 从「components+auth」扩到全量 test/golden(desktop/tablet 现均绿, 含 CJK 真渲染 + tablet zh/en 矩阵)。 - codegen 零 diff(codegen-drift job)已有。至此四道静态闸 + golden 全部进 CI 硬闸(「规则没上闸=没有规则」)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 01:41:10 +08:00
wangjia	14a9836882	feat(ds-flow): Phase 5.1-5.2 — Flutter 裸色闸 + 原型校验闸 5.1 client/tool/check_ds_code.mjs(照 jiu):禁 Flutter 业务代码裸 Color(0x)/ 具名 Colors.x;豁免 token 生成层(pangolin_tokens.gen.dart)+ 实现层 (pangolin_theme.dart);--changed(pre-commit)/--strict(CI)/全量三模式; 剥行尾注释防误报。现状 --strict 通过(0 违规,UI 层零裸色)。 5.2 design/prototype/tools/check-ds.mjs:原型单源守门,5 道——硬编码色(仅严格扫 atoms.css)/未定义 token/font-family 走 var(--font*)/图标走 icons.js sprite/ 组件原子在 index.html 登记;剥 CSS+HTML 注释防误报,SVG fill/stroke 豁免。现状通过(serve.mjs 改动时自动跑)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 01:39:44 +08:00