feat(client): Flutter 逐屏还原 + iPad ≥900 断点 (tsk_gpPXi-icyeOE)

对照 design/ui_kits mobile+tablet 原型逐屏补齐 Flutter 客户端:

- l10n 资源层(strings_zh/en,单显)+ Riverpod 状态层(连接状态机/免费额度/
  节点选择/语言/主题),UI 与数据解耦,mock 数据接 API 不动 UI。
- 连接键严格三态(off 虚线轨道环 / connecting 旋转弧 / on 满环+计时+光晕),
  状态来自 connectionProvider,点击只派发事件——禁止乐观显示。
- 节点页置顶「智能选择」推荐卡(clay 渐变 zap + 推荐胶囊,默认选中);
  免费额度卡(剩余分钟+进度条 ≤3 分钟切 warning + 看广告解锁变绿)。
- Tab 左右滑动切换(手势竞技场仲裁,子页滚动不误触发,200ms 方向感知滑入)。
- iPad/宽屏 ≥900 LayoutBuilder 切侧栏分栏(导航行高 ≥48,连接页双栏/节点双列网格),
  复用同一批原子组件,不 fork 页面。
- 语义 token 零硬编码;文案全部走 l10n;套餐数字对齐 §7;无支付表单/emoji 国旗。
- CI 红线词扫描扩展到 client/lib;新增 Flutter analyze+test CI 任务。
- 测试:连接状态机/额度/节点单测、连接键三态与卡片组件测试、
  golden(连接键三态/推荐卡/额度卡 × 明暗)。

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

todo/todo.html

@@ -131,6 +131,37 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
 }
 .reject-date { color: #ef9999; font-size: 12px; }
 
+/* ── 确认闸（方案/改动说明）── */
+.gate-block { margin: 10px 0 4px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
+.gate-pending { background: #fff7ed; border: 1px solid #fdba74; }
+.gate-granted { background: #f0fdf4; border: 1px solid #bbf7d0; }
+.gate-info    { background: #f1f5f9; border: 1px solid #e2e8f0; }
+.gate-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
+.gate-badge { padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
+.gate-badge.pending { background: #f97316; color: #fff; }
+.gate-badge.granted { background: #22c55e; color: #fff; }
+.gate-badge.info    { background: #94a3b8; color: #fff; }
+.gate-kind { font-size: 12px; color: #52606d; }
+.gate-date { font-size: 12px; color: #8aa3c4; margin-left: auto; }
+.gate-note { color: #52606d; margin: 4px 0; white-space: pre-wrap; }
+.gate-ref  { font-size: 12.5px; color: #52606d; margin-top: 4px; }
+.gate-note code, .gate-ref code {
+  background: #fff; padding: 1px 5px; border-radius: 3px;
+  font-family: "JetBrains Mono", monospace; font-size: 12px; color: #b91c1c;
+}
+.approve-btn {
+  margin-top: 8px; padding: 5px 14px; border-radius: 6px; border: none;
+  background: #16a34a; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
+  transition: background .15s;
+}
+.approve-btn:hover { background: #15803d; }
+.approve-cmd { margin-top: 10px; padding: 10px 12px; background: #1e293b; border-radius: 8px; }
+.approve-cmd-label { font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
+.approve-cmd-code { font-family: "JetBrains Mono", monospace; font-size: 13px; color: #86efac; display: block; word-break: break-all; }
+.approve-copy-btn { margin-top: 8px; padding: 4px 12px; border-radius: 6px; background: #334155; color: #e2e8f0; border: none; font-size: 12px; cursor: pointer; }
+.approve-copy-btn:hover { background: #475569; }
+.stat-pill.gate-stat { background: #f97316; }
+
 /* ── 子任务区 ── */
 .subtask-block {
   margin-top: 12px; padding: 10px 14px;
@@ -221,13 +252,14 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
 <header>
   <div class="wrap">
     <h1>doc — 项目 TODO</h1>
-    <div class="header-meta">生成于 2026-06-11 · 真相源 todo/todo.json</div>
+    <div class="header-meta">生成于 2026-06-13 · 真相源 todo/todo.json</div>
     <div class="stats">
-      <div class="stat-pill"><strong>18</strong>全部</div>
+      <div class="stat-pill"><strong>19</strong>全部</div>
       <div class="stat-pill"><strong>18</strong>待开始</div>
       <div class="stat-pill"><strong>0</strong>开发中</div>
-      <div class="stat-pill"><strong>0</strong>待验收</div>
+      <div class="stat-pill"><strong>1</strong>待验收</div>
       <div class="stat-pill"><strong>0</strong>已验收</div>
+      
     </div>
   </div>
 </header>
@@ -294,6 +326,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">依据 doc/02、doc/03：openapi.yaml 展开全部 /v1 契约（connect 返回 sing-box 凭证而非 WG peer）；MySQL 8 全量 DDL（users/devices/plans/subscriptions/codes/usage_daily/audit_log + providers/node_events/directory_version）。后端各模块的共同前置。</div>
       
+      
       <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">
@@ -322,6 +355,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">proto 定义（注册/心跳/凭证下发与回收/用量上报，mTLS 双向）、节点目录 version 灰度（if_version 304）、connect/disconnect 下发 REALITY/Hy2 参数、free 凭证 TTL。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -350,6 +384,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">用 design/flutter/ 起步包建工程：pubspec 覆盖、theme/widgets/main 拷入、字体配置，flutter run 出登录→引导→主框架演示态。前端线起点，可与后端完全并行。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="Android">Android</span></div>
         <div class="item-meta">
@@ -378,6 +413,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">gomobile AAR/XCFramework + iOS NetworkExtension / Android VpnService / 桌面 TUN 子进程；URLTest 智能选线、Kill-switch。全项目最大技术风险，应尽早并行启动。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</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="mac">mac</span> <span class="tag t-tag" data-tag="Windows">Windows</span></div>
         <div class="item-meta">
@@ -406,6 +442,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">境内多 ISP 拨测 + 境外对照 + 流量骤降三路互证；blocked_suspect/confirmed 状态机、阈值与熔断、池水位告警、自动补新。依赖 #5、#14。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -434,6 +471,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">邮箱验证码限频、注册自动 7 天 PRO 试用、argon2id、JWT RS256（access 15min + refresh 30d）、Redis 滑窗限流。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -462,6 +500,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">批量生成（Crockford Base32 + 校验位，库存 hash）、发卡店 webhook（HMAC）、兑换幂等 + 订阅顺延叠加、失败锁定、audit_log。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -490,6 +529,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">设备登记/移除（同步回收节点侧凭证）、套餐/到期/设备数校验中间件。依赖 #1、#2。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -518,6 +558,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">轻量 agent：mTLS 自注册、心跳、sing-box 用户表增删（凭证下发/回收/TTL）、负载上报 Redis；cloud-init 一段式安装。依赖 #5 的 proto。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -546,6 +587,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">usage_daily 聚合（仅字节/分钟，无日志口径）、/v1/ads/unlock 验广告 SDK 回执、free 用户 connect 额度校验。依赖 #1。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -574,6 +616,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">对照 ui_kits/mobile + tablet 逐屏补齐：智能选择推荐卡、免费额度卡+看广告解锁、Tab 滑动切换、宽度 ≥900 切侧栏分栏（连接页双栏/节点双列网格）；四态验证（明暗×中英）。依赖 #9。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="前端">前端</span> <span class="tag t-tag" data-tag="iOS">iOS</span> <span class="tag t-tag" data-tag="Android">Android</span></div>
         <div class="item-meta">
@@ -602,6 +645,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">ui_kits/website → Astro SSG + Cloudflare Pages 多镜像；保留 i18n 单显、响应式断点、全部脱敏文案。完全独立可并行。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Web">Web</span> <span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
@@ -630,6 +674,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">ui_kits/usercenter React 组件直接复用；先 mock 数据，后接 me/redeem/devices；TOTP 2FA。UI 部分独立并行，接口联调依赖 #2。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Web">Web</span> <span class="tag t-tag" data-tag="前端">前端</span></div>
         <div class="item-meta">
@@ -658,6 +703,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">多厂商 API 适配层（providers 池）、cloud-init 模板、replace 一键更换（make-before-break）与全量滚动轮换、换 IP 不换机。依赖 #6 的 agent。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="CI/CD">CI/CD</span> <span class="tag t-tag" data-tag="后端">后端</span></div>
         <div class="item-meta">
@@ -686,6 +732,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">四组域名隔离与冷备池、源站隐藏（回源鉴权）、Ed25519 签名端点更新与公告 JSON 多镜像、客户端 DoH/IP 直连兜底联动。可独立并行。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="Web">Web</span></div>
         <div class="item-meta">
@@ -714,6 +761,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">xtrabackup 每日全量 + binlog 15min 增量、age 加密异地（独立身份账号）、月度恢复演练脚本、RPO≤15min/RTO≤4h 验证。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="数据库">数据库</span> <span class="tag t-tag" data-tag="CI/CD">CI/CD</span></div>
         <div class="item-meta">
@@ -742,6 +790,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">码批次生成导出、节点操作（replace/draining）、audit_log 查看；独立监听 + 内网白名单 + 2FA。依赖 #1。</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></div>
         <div class="item-meta">
@@ -770,6 +819,7 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       
       <div class="item-desc">lint + 单测 + OpenAPI 同步校验 + 脱敏红线词扫描（UI 文案资源）+ 容器镜像构建。</div>
       
+      
       <div class="card-footer">
         <div class="tag-row"><span class="tag t-tag" data-tag="CI/CD">CI/CD</span></div>
         <div class="item-meta">
@@ -794,12 +844,40 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
   </div>
   <div class="section-block" id="section-done">
     <div class="section-title st-done" data-toggle="done">
-      🔍 待验收 <span class="s-count">0</span>
+      🔍 待验收 <span class="s-count">1</span>
       <span class="s-arrow">▴ 收起</span>
     </div>
     <div class="section-list-wrap " id="list-wrap-done">
       <ul class="todo-list" id="list-done">
-        <p class="empty-tip">暂无条目</p>
+        
+    <li class="todo-card s-done"
+        data-id="19"
+        data-level="mid"
+        data-status="done"
+        data-tier=""
+        data-tags="">
+      <div class="card-header">
+        <span class="item-title">Flutter 逐屏还原+iPad断点: l10n/Riverpod/三态连接/推荐卡/额度卡/Tab滑动/≥900分栏/golden/CI红线</span>
+        <div class="card-badges">
+          <span class="tag status-badge s-done">待验收</span>
+          <span class="tag t-high">重要</span>
+          
+          
+          <button class="reject-btn" data-id="19" data-title="Flutter 逐屏还原+iPad断点: l10n/Riverpod/三态连接/推荐卡/额度卡/Tab滑动/≥900分栏/golden/CI红线">拒绝验收</button>
+        </div>
+      </div>
+      
+      
+      
+      
+      <div class="card-footer">
+        <div class="tag-row"></div>
+        <div class="item-meta">
+      <span class="meta-date">🕐 2026-06-13</span>
+      
+    </div>
+      </div>
+    </li>
       </ul>
     </div>
   </div>
@@ -844,6 +922,16 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
   let curTier   = 'all';
   let curTags   = new Set();
 
+  // 通过本地服务（http）打开时，按钮直接写库；用 file:// 直接打开则回退为「复制命令」
+  const SERVED = location.protocol === 'http:' || location.protocol === 'https:';
+  function postAction(url, payload) {
+    return fetch(url, {
+      method: 'POST',
+      headers: payload ? { 'Content-Type': 'application/json' } : undefined,
+      body: payload ? JSON.stringify(payload) : undefined,
+    }).then(r => r.json());
+  }
+
   function applyFilter() {
     document.querySelectorAll('.todo-card').forEach(card => {
       const lvl    = card.dataset.level;
@@ -964,8 +1052,13 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       reasonInput.focus();
       return;
     }
-    const escaped = reason.replace(/\/g, '\\').replace(/"/g, '\"');
-    const cmd = '/todo reject ' + rejectId + ' ' + escaped;
+    if (SERVED) {
+      postAction('/api/reject/' + rejectId, { reason })
+        .then(d => { if (d.ok) { location.reload(); } else { alert('拒绝失败：' + (d.error || '')); } })
+        .catch(() => alert('请求失败，确认本地服务是否在运行'));
+      return;
+    }
+    const cmd = '/todo reject ' + rejectId + ' ' + JSON.stringify(reason);
     cmdText.textContent = cmd;
     cmdWrap.style.display = 'block';
     document.getElementById('reject-confirm-btn').style.display = 'none';
@@ -983,6 +1076,32 @@ ul.todo-list { list-style: none; margin: 0; padding: 0; }
       copyBtn.textContent = '已复制 ✓';
     });
   });
+
+  // ── 确认闸：服务模式直接写库；file:// 模式回退为展开命令 ──
+  document.querySelectorAll('.approve-btn').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      const id = btn.dataset.id;
+      if (SERVED) {
+        btn.disabled = true; btn.textContent = '确认中…';
+        postAction('/api/approve/' + id)
+          .then(d => {
+            if (d.ok) { location.reload(); }
+            else { btn.disabled = false; btn.textContent = '确认执行 ✓'; alert('确认失败：' + (d.error || '')); }
+          })
+          .catch(() => { btn.disabled = false; btn.textContent = '确认执行 ✓'; alert('请求失败，确认本地服务是否在运行'); });
+      } else {
+        const box = document.getElementById('approve-cmd-' + id);
+        if (box) box.style.display = box.style.display === 'none' ? 'block' : 'none';
+      }
+    });
+  });
+  document.querySelectorAll('.approve-copy-btn').forEach(btn => {
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      navigator.clipboard.writeText(btn.dataset.cmd).then(() => { btn.textContent = '已复制 ✓'; });
+    });
+  });
 })();
 </script>
 </body>

todo/todo.json

@@ -1,9 +1,9 @@
 {
   "meta": {
     "title": "doc — 项目 TODO",
-    "updated_at": "2026-06-11T15:48:46.142Z"
+    "updated_at": "2026-06-13T06:32:11.161Z"
   },
-  "seq": 18,
+  "seq": 19,
   "items": [
     {
       "id": 1,
@@ -288,6 +288,19 @@
       "done": false,
       "completed_at": null,
       "version": null
+    },
+    {
+      "id": 19,
+      "title": "Flutter 逐屏还原+iPad断点: l10n/Riverpod/三态连接/推荐卡/额度卡/Tab滑动/≥900分栏/golden/CI红线",
+      "desc": null,
+      "level": "mid",
+      "tier": null,
+      "tags": [],
+      "status": "done",
+      "created_at": "2026-06-13T06:08:14.230Z",
+      "done": false,
+      "completed_at": null,
+      "version": null
     }
   ]
 }