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>

client/lib/widgets/account_screens.dart

@@ -1,68 +1,74 @@
 // account_screens.dart — 账户子页(套餐选择 / 设备管理 / 兑换 & 购买 / 联系我们)
+//
+// 文案全部经 AppText(l10n,单显)。套餐数字以 design/CLAUDE.md §7 为准。
+// App 内无任何支付表单——购买仅引导至外部渠道。
 import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
 import '../pangolin_theme.dart';
+import 'pangolin_button.dart';
 import 'pangolin_icons.dart';
 import 'plan_card.dart';
-import 'pangolin_button.dart';
 
-/// 通用：带返回箭头的子页骨架
+/// 通用:带返回箭头的子页骨架
 class _SubScaffold extends StatelessWidget {
   const _SubScaffold({required this.title, required this.child, this.onBack});
-  final String title; final Widget child; final VoidCallback? onBack;
+  final String title;
+  final Widget child;
+  final VoidCallback? onBack;
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
     return Scaffold(
       backgroundColor: c.bg,
-      body: SafeArea(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-        Padding(
-          padding: const EdgeInsets.fromLTRB(8, 6, 16, 10),
-          child: Row(children: [
-            IconButton(onPressed: onBack ?? () => Navigator.of(context).maybePop(), icon: Icon(PangolinIcons.arrowLeft, size: 22, color: c.fg1)),
-            Text(title, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
-          ]),
-        ),
-        Expanded(child: child),
-      ])),
+      body: SafeArea(
+        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(8, 6, 16, 10),
+            child: Row(children: [
+              IconButton(
+                onPressed: onBack ?? () => Navigator.of(context).maybePop(),
+                icon: Icon(PangolinIcons.arrowLeft, size: 22, color: c.fg1),
+              ),
+              Text(title, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+            ]),
+          ),
+          Expanded(child: child),
+        ]),
+      ),
     );
   }
 }
 
 /// ── 套餐选择 ──
 class PlansScreen extends StatelessWidget {
-  const PlansScreen({super.key, this.zh = true, this.onChoose, this.onBack});
-  final bool zh; final ValueChanged<String>? onChoose; final VoidCallback? onBack;
+  const PlansScreen({super.key, required this.t, this.onChoose, this.onBack});
+  final AppText t;
+  final ValueChanged<String>? onChoose;
+  final VoidCallback? onBack;
 
   @override
   Widget build(BuildContext context) {
     final plans = [
-      (
-        id: 'free', name: zh ? '免费版' : 'Free', price: '¥0', cta: zh ? '当前' : 'Current', featured: false, current: true, pop: null as String?,
-        feats: zh ? ['3 个基础节点', '每日 1GB 流量', '1 台设备'] : ['3 basic locations', '1GB / day', '1 device'],
-      ),
-      (
-        id: 'pro', name: zh ? '专业版' : 'Pro', price: '¥25', cta: zh ? '立即升级' : 'Upgrade', featured: true, current: false, pop: zh ? '最受欢迎' : 'Popular',
-        feats: zh ? ['80+ 全球节点', '无限流量 · 极速', '5 台设备同时在线', '流媒体优化'] : ['80+ locations', 'Unlimited · fast', '5 devices', 'Streaming optimized'],
-      ),
-      (
-        id: 'team', name: zh ? '团队版' : 'Team', price: '¥99', cta: zh ? '选择' : 'Choose', featured: false, current: false, pop: null as String?,
-        feats: zh ? ['Pro 全部功能', '10 个成员席位', '集中计费与管理', '优先客服'] : ['Everything in Pro', '10 seats', 'Central billing', 'Priority support'],
-      ),
+      (id: 'free', name: t.freePlan, price: '¥0', cta: t.current, featured: false, current: true, pop: null as String?, feats: t.featsFree),
+      (id: 'pro', name: t.proPlan, price: '¥25', cta: t.upgrade, featured: true, current: false, pop: t.mostPopular, feats: t.featsPro),
+      (id: 'team', name: t.teamPlan, price: '¥99', cta: t.choose, featured: false, current: false, pop: null as String?, feats: t.featsTeam),
     ];
     return _SubScaffold(
-      title: zh ? '选择套餐' : 'Choose plan',
+      title: t.choosePlan,
       onBack: onBack,
       child: ListView(
         padding: const EdgeInsets.fromLTRB(20, 14, 20, 24),
         children: [
-          for (final p in plans) Padding(
-            padding: EdgeInsets.only(bottom: 14, top: p.pop != null ? 12 : 0),
-            child: PlanCard(
-              name: p.name, price: p.price, period: zh ? '/月' : '/mo',
-              features: p.feats, ctaLabel: p.cta, featured: p.featured, isCurrent: p.current,
-              popularLabel: p.pop, onPressed: () => onChoose?.call(p.id),
+          for (final p in plans)
+            Padding(
+              padding: EdgeInsets.only(bottom: 14, top: p.pop != null ? 12 : 0),
+              child: PlanCard(
+                name: p.name, price: p.price, period: t.perMonth,
+                features: p.feats, ctaLabel: p.cta, featured: p.featured, isCurrent: p.current,
+                popularLabel: p.pop, onPressed: () => onChoose?.call(p.id),
+              ),
             ),
-          ),
         ],
       ),
     );
@@ -72,31 +78,34 @@ class PlansScreen extends StatelessWidget {
 /// ── 设备管理 ──
 class DeviceItem {
   const DeviceItem({required this.id, required this.icon, required this.name, required this.os, required this.active, this.me = false});
-  final String id, name, os, active; final IconData icon; final bool me;
+  final String id, name, os, active;
+  final IconData icon;
+  final bool me;
 }
 
 class DevicesScreen extends StatefulWidget {
-  const DevicesScreen({super.key, this.zh = true, this.onBack});
-  final bool zh; final VoidCallback? onBack;
+  const DevicesScreen({super.key, required this.t, this.onBack});
+  final AppText t;
+  final VoidCallback? onBack;
   @override
   State<DevicesScreen> createState() => _DevicesScreenState();
 }
 
 class _DevicesScreenState extends State<DevicesScreen> {
   late List<DeviceItem> _devices = [
-    DeviceItem(id: '1', icon: PangolinIcons.laptop, name: 'MacBook Pro', os: 'macOS 26', active: widget.zh ? '当前设备' : 'This device', me: true),
+    DeviceItem(id: '1', icon: PangolinIcons.laptop, name: 'MacBook Pro', os: 'macOS 26', active: widget.t.thisDevice, me: true),
     DeviceItem(id: '2', icon: PangolinIcons.smartphone, name: 'iPhone 17', os: 'iOS 26', active: '2 min'),
-    DeviceItem(id: '3', icon: PangolinIcons.monitorSmartphone, name: 'iPad Air', os: 'iPadOS 26', active: widget.zh ? '3 小时前' : '3h ago'),
+    DeviceItem(id: '3', icon: PangolinIcons.monitorSmartphone, name: 'iPad Air', os: 'iPadOS 26', active: widget.t.lang == AppLang.zh ? '3 小时前' : '3h ago'),
   ];
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
     return _SubScaffold(
-      title: widget.zh ? '我的设备' : 'My devices',
+      title: widget.t.myDevices,
       onBack: widget.onBack,
       child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
-        Text(widget.zh ? 'PRO 套餐最多 5 台设备同时在线' : 'Up to 5 devices on PRO', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
+        Text(widget.t.devicesSub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
         const SizedBox(height: 12),
         Container(
           decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
@@ -120,18 +129,22 @@ class _DevicesScreenState extends State<DevicesScreen> {
         Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
           Row(children: [
             Flexible(child: Text(d.name, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 14.5))),
-            if (d.me) Container(margin: const EdgeInsets.only(left: 7), padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 1),
+            if (d.me)
+              Container(
+                margin: const EdgeInsets.only(left: 7), padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 1),
                 decoration: BoxDecoration(color: c.successSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
-                child: Text(d.active, style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w600, fontSize: 10.5))),
+                child: Text(d.active, style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w600, fontSize: 10.5)),
+              ),
           ]),
           const SizedBox(height: 1),
           Text(d.me ? d.os : '${d.os} · ${d.active}', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
         ])),
-        if (!d.me) OutlinedButton(
-          onPressed: () => setState(() => _devices.removeWhere((x) => x.id == d.id)),
-          style: OutlinedButton.styleFrom(foregroundColor: c.fg2, side: BorderSide(color: c.borderStrong, width: 1.5), shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7), minimumSize: Size.zero),
-          child: Text(widget.zh ? '移除' : 'Remove', style: PangolinText.caption.copyWith(fontWeight: FontWeight.w600)),
-        ),
+        if (!d.me)
+          OutlinedButton(
+            onPressed: () => setState(() => _devices.removeWhere((x) => x.id == d.id)),
+            style: OutlinedButton.styleFrom(foregroundColor: c.fg2, side: BorderSide(color: c.borderStrong, width: 1.5), shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7), minimumSize: Size.zero),
+            child: Text(widget.t.remove, style: PangolinText.caption.copyWith(fontWeight: FontWeight.w600)),
+          ),
       ]),
     );
   }
@@ -139,8 +152,9 @@ class _DevicesScreenState extends State<DevicesScreen> {
 
 /// ── 兑换 & 购买 ──
 class RedeemScreen extends StatefulWidget {
-  const RedeemScreen({super.key, this.zh = true, this.onBack});
-  final bool zh; final VoidCallback? onBack;
+  const RedeemScreen({super.key, required this.t, this.onBack});
+  final AppText t;
+  final VoidCallback? onBack;
   @override
   State<RedeemScreen> createState() => _RedeemScreenState();
 }
@@ -150,52 +164,59 @@ class _RedeemScreenState extends State<RedeemScreen> {
   bool _ok = false;
 
   @override
-  void dispose() { _code.dispose(); super.dispose(); }
+  void dispose() {
+    _code.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
-    final zh = widget.zh;
+    final t = widget.t;
     final channels = [
-      (icon: PangolinIcons.shoppingBag, name: zh ? '自助发卡商店' : 'Self-serve store', sub: 'shop.pangolin.vpn', accent: true),
+      (icon: PangolinIcons.shoppingBag, name: t.chStore, sub: 'shop.pangolin.vpn', accent: true),
       (icon: PangolinIcons.send, name: 'Telegram', sub: '@PangolinVPN_bot', accent: false),
       (icon: PangolinIcons.messageCircle, name: 'LINE', sub: '@pangolinvpn', accent: false),
-      (icon: PangolinIcons.mail, name: zh ? '邮箱客服' : 'Email support', sub: 'buy@pangolin.vpn', accent: false),
+      (icon: PangolinIcons.mail, name: t.chEmail, sub: 'buy@pangolin.vpn', accent: false),
     ];
     return _SubScaffold(
-      title: zh ? '兑换 & 购买' : 'Redeem & buy',
+      title: t.redeemTitle,
       onBack: widget.onBack,
       child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
         Container(
           padding: const EdgeInsets.all(18),
           decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.xl), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
           child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-            Text(zh ? '兑换激活码' : 'Redeem a code', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
+            Text(t.redeemCodeTitle, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
             const SizedBox(height: 12),
-            if (_ok) Row(children: [
-              Icon(PangolinIcons.checkCircle, size: 20, color: c.success), const SizedBox(width: 9),
-              Text(zh ? '激活成功 · PRO 已开通' : 'Activated · PRO unlocked', style: PangolinText.body.copyWith(color: c.success, fontWeight: FontWeight.w600)),
-            ]) else Row(children: [
-              Expanded(child: Container(
-                padding: const EdgeInsets.symmetric(horizontal: 14),
-                decoration: BoxDecoration(color: c.bg, borderRadius: BorderRadius.circular(PangolinRadius.md), border: Border.all(color: c.borderStrong, width: 1.5)),
-                child: TextField(controller: _code,
+            if (_ok)
+              Row(children: [
+                Icon(PangolinIcons.checkCircle, size: 20, color: c.success),
+                const SizedBox(width: 9),
+                Text(t.redeemOk, style: PangolinText.body.copyWith(color: c.success, fontWeight: FontWeight.w600)),
+              ])
+            else
+              Row(children: [
+                Expanded(child: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 14),
+                  decoration: BoxDecoration(color: c.bg, borderRadius: BorderRadius.circular(PangolinRadius.md), border: Border.all(color: c.borderStrong, width: 1.5)),
+                  child: TextField(
+                    controller: _code,
                     textCapitalization: TextCapitalization.characters,
                     style: PangolinText.mono.copyWith(color: c.fg1, letterSpacing: 1.5),
-                    decoration: InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: const EdgeInsets.symmetric(vertical: 13),
-                        hintText: zh ? '输入激活码' : 'Enter code', hintStyle: PangolinText.sm.copyWith(color: c.fg3)),
-                    onChanged: (_) => setState(() {})),
-              )),
-              const SizedBox(width: 10),
-              PangolinButton(label: zh ? '激活' : 'Redeem', onPressed: _code.text.trim().length >= 4 ? () => setState(() => _ok = true) : null),
-            ]),
+                    decoration: InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: const EdgeInsets.symmetric(vertical: 13), hintText: t.redeemPh, hintStyle: PangolinText.sm.copyWith(color: c.fg3)),
+                    onChanged: (_) => setState(() {}),
+                  ),
+                )),
+                const SizedBox(width: 10),
+                PangolinButton(label: t.redeemBtn, onPressed: _code.text.trim().length >= 4 ? () => setState(() => _ok = true) : null),
+              ]),
           ]),
         ),
         const SizedBox(height: 22),
-        Text(zh ? '购买渠道' : 'Where to buy', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
+        Text(t.buyTitle, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
         const SizedBox(height: 6),
-        Text(zh ? 'App 内不支持直接支付。请通过以下渠道获取激活码:' : 'In-app payment is unavailable. Get a code via:',
-            style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400, height: 1.5)),
+        Text(t.buySub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400, height: 1.5)),
         const SizedBox(height: 14),
         for (final ch in channels) Padding(padding: const EdgeInsets.only(bottom: 10), child: _channel(c, ch.icon, ch.name, ch.sub, ch.accent)),
       ]),
@@ -208,12 +229,7 @@ class _RedeemScreenState extends State<RedeemScreen> {
       onTap: () {},
       child: Container(
         padding: const EdgeInsets.all(14),
-        decoration: BoxDecoration(
-          color: accent ? c.accentSubtle : c.surface,
-          borderRadius: BorderRadius.circular(PangolinRadius.lg),
-          border: Border.all(color: accent ? c.accentBorder : c.border),
-          boxShadow: PangolinShadow.sm,
-        ),
+        decoration: BoxDecoration(color: accent ? c.accentSubtle : c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: accent ? c.accentBorder : c.border), boxShadow: PangolinShadow.sm),
         child: Row(children: [
           Container(width: 40, height: 40, decoration: BoxDecoration(color: accent ? c.accent : c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
               child: Icon(icon, size: 20, color: accent ? PangolinColors.white : c.accent)),
@@ -231,8 +247,9 @@ class _RedeemScreenState extends State<RedeemScreen> {
 
 /// ── 联系我们 ──
 class ContactScreen extends StatelessWidget {
-  const ContactScreen({super.key, this.zh = true, this.onBack});
-  final bool zh; final VoidCallback? onBack;
+  const ContactScreen({super.key, required this.t, this.onBack});
+  final AppText t;
+  final VoidCallback? onBack;
 
   @override
   Widget build(BuildContext context) {
@@ -240,15 +257,14 @@ class ContactScreen extends StatelessWidget {
     final channels = [
       (icon: PangolinIcons.send, name: 'Telegram', sub: '@PangolinVPN_bot', accent: true),
       (icon: PangolinIcons.messageCircle, name: 'LINE', sub: '@pangolinvpn', accent: false),
-      (icon: PangolinIcons.mail, name: zh ? '邮箱客服' : 'Email support', sub: 'support@pangolin.vpn', accent: false),
-      (icon: PangolinIcons.shoppingBag, name: zh ? '自助发卡商店' : 'Self-serve store', sub: 'shop.pangolin.vpn', accent: false),
+      (icon: PangolinIcons.mail, name: t.contactEmail, sub: 'support@pangolin.vpn', accent: false),
+      (icon: PangolinIcons.shoppingBag, name: t.contactStore, sub: 'shop.pangolin.vpn', accent: false),
     ];
     return _SubScaffold(
-      title: zh ? '联系我们' : 'Contact us',
+      title: t.contactTitle,
       onBack: onBack,
       child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
-        Text(zh ? '遇到问题?通过以下任一渠道联系我们,通常数分钟内回复。' : 'Need help? Reach us via any channel below — usually replies in minutes.',
-            style: PangolinText.sm.copyWith(color: c.fg2, height: 1.6)),
+        Text(t.contactIntro, style: PangolinText.sm.copyWith(color: c.fg2, height: 1.6)),
         const SizedBox(height: 16),
         for (final ch in channels) Padding(padding: const EdgeInsets.only(bottom: 10), child: _contact(c, ch.icon, ch.name, ch.sub, ch.accent)),
         const SizedBox(height: 8),
@@ -256,9 +272,9 @@ class ContactScreen extends StatelessWidget {
           padding: const EdgeInsets.all(16),
           decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
           child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-            Text(zh ? '服务时间' : 'Support hours', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
+            Text(t.contactHoursTitle, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
             const SizedBox(height: 5),
-            Text(zh ? '每日 9:00 – 24:00 (GMT+8)' : 'Daily 9:00 – 24:00 (GMT+8)', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
+            Text(t.contactHours, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
           ]),
         ),
       ]),
@@ -271,12 +287,7 @@ class ContactScreen extends StatelessWidget {
       onTap: () {},
       child: Container(
         padding: const EdgeInsets.all(14),
-        decoration: BoxDecoration(
-          color: accent ? c.accentSubtle : c.surface,
-          borderRadius: BorderRadius.circular(PangolinRadius.lg),
-          border: Border.all(color: accent ? c.accentBorder : c.border),
-          boxShadow: PangolinShadow.sm,
-        ),
+        decoration: BoxDecoration(color: accent ? c.accentSubtle : c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: accent ? c.accentBorder : c.border), boxShadow: PangolinShadow.sm),
         child: Row(children: [
           Container(width: 40, height: 40, decoration: BoxDecoration(color: accent ? c.accent : c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
               child: Icon(icon, size: 20, color: accent ? PangolinColors.white : c.accent)),

client/lib/widgets/app_top_bar.dart

@@ -0,0 +1,37 @@
+// app_top_bar.dart — 页面顶栏(品牌锁版 + 可选右侧状态)
+import 'package:flutter/material.dart';
+
+import '../pangolin_theme.dart';
+import 'pangolin_logo.dart';
+
+class AppTopBar extends StatelessWidget {
+  const AppTopBar({super.key, required this.brand, this.trailing});
+  final String brand;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(20, 6, 20, 14),
+      child: Row(children: [
+        PangolinBrandLockup(brand: brand, markSize: 24),
+        const Spacer(),
+        if (trailing != null) trailing!,
+      ]),
+    );
+  }
+}
+
+/// 标题行(节点/统计/账户页用)。
+class PageTitle extends StatelessWidget {
+  const PageTitle({super.key, required this.title});
+  final String title;
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
+      child: Text(title, style: PangolinText.h2.copyWith(color: c.fg1)),
+    );
+  }
+}

client/lib/widgets/auth_screen.dart

@@ -1,16 +1,18 @@
-// auth_screen.dart — 登录 / 注册页
+// auth_screen.dart — 登录 / 注册页(文案经 AppText 单显)
 import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
 import '../pangolin_theme.dart';
-import 'pangolin_icons.dart';
 import 'pangolin_button.dart';
+import 'pangolin_icons.dart';
 import 'pangolin_logo.dart';
 
 enum _AuthMode { login, register }
 
 class AuthScreen extends StatefulWidget {
-  const AuthScreen({super.key, required this.onDone, this.zh = true});
+  const AuthScreen({super.key, required this.onDone, required this.t});
   final VoidCallback onDone;
-  final bool zh;
+  final AppText t;
 
   @override
   State<AuthScreen> createState() => _AuthScreenState();
@@ -26,14 +28,18 @@ class _AuthScreenState extends State<AuthScreen> {
 
   bool get _emailValid => RegExp(r'\S+@\S+\.\S+').hasMatch(_email.text);
 
-  String _t(String zh, String en) => widget.zh ? zh : en;
-
   @override
-  void dispose() { _email.dispose(); _code.dispose(); _pw.dispose(); super.dispose(); }
+  void dispose() {
+    _email.dispose();
+    _code.dispose();
+    _pw.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
+    final t = widget.t;
     return Scaffold(
       backgroundColor: c.bg,
       body: SafeArea(
@@ -45,26 +51,21 @@ class _AuthScreenState extends State<AuthScreen> {
               Column(children: [
                 const PangolinMark(size: 52),
                 const SizedBox(height: 12),
-                Text(widget.zh ? '穿山甲' : 'Pangolin', style: PangolinText.h1.copyWith(color: c.fg1)),
+                Text(t.brand, style: PangolinText.h1.copyWith(color: c.fg1)),
                 const SizedBox(height: 4),
-                Text(_t('极速 · 稳定 · 省心', 'Fast · Stable · Effortless'),
-                    style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
+                Text(t.authTagline, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
               ]),
               const SizedBox(height: 28),
               Row(children: [
-                _tab(_AuthMode.login, _t('登录', 'Log in'), c),
-                _tab(_AuthMode.register, _t('注册', 'Sign up'), c),
+                _tab(_AuthMode.login, t.tabLogin, c),
+                _tab(_AuthMode.register, t.tabRegister, c),
               ]),
               Divider(height: 1, color: c.border),
               const SizedBox(height: 22),
-              Expanded(child: _mode == _AuthMode.login ? _login(c) : _register(c)),
+              Expanded(child: _mode == _AuthMode.login ? _login(c, t) : _register(c, t)),
               Padding(
                 padding: const EdgeInsets.symmetric(vertical: 20),
-                child: Text(
-                  _t('继续即代表同意《服务条款》与《隐私政策》', 'By continuing you agree to our Terms & Privacy Policy'),
-                  textAlign: TextAlign.center,
-                  style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400),
-                ),
+                child: Text(t.tos, textAlign: TextAlign.center, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
               ),
             ],
           ),
@@ -77,7 +78,11 @@ class _AuthScreenState extends State<AuthScreen> {
     final on = _mode == m;
     return Expanded(
       child: GestureDetector(
-        onTap: () => setState(() { _mode = m; _step = 0; _sent = false; }),
+        onTap: () => setState(() {
+          _mode = m;
+          _step = 0;
+          _sent = false;
+        }),
         child: Container(
           padding: const EdgeInsets.symmetric(vertical: 10),
           decoration: BoxDecoration(border: Border(bottom: BorderSide(color: on ? c.accent : Colors.transparent, width: 2))),
@@ -99,57 +104,65 @@ class _AuthScreenState extends State<AuthScreen> {
     ]);
   }
 
-  InputDecoration get _bare => const InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: EdgeInsets.symmetric(vertical: 12));
+  InputDecoration get _bare =>
+      const InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: EdgeInsets.symmetric(vertical: 12));
 
-  Widget _login(PangolinScheme c) {
+  Widget _login(PangolinScheme c, AppText t) {
     return Column(children: [
-      _field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
-          child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
+      _field(c, icon: PangolinIcons.mail, label: t.emailLabel,
+          child: TextField(controller: _email, decoration: _bare.copyWith(hintText: t.emailPh), onChanged: (_) => setState(() {}))),
       const SizedBox(height: 16),
-      _field(c, icon: PangolinIcons.lock, label: _t('密码', 'Password'),
-          child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: _t('输入密码', 'Enter password')), onChanged: (_) => setState(() {}))),
-      Align(alignment: Alignment.centerRight, child: Padding(
-        padding: const EdgeInsets.only(top: 8),
-        child: Text(_t('忘记密码?', 'Forgot password?'), style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
-      )),
+      _field(c, icon: PangolinIcons.lock, label: t.pwLabel,
+          child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: t.pwPh), onChanged: (_) => setState(() {}))),
+      Align(
+        alignment: Alignment.centerRight,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 8),
+          child: Text(t.forgotPw, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
+        ),
+      ),
       const SizedBox(height: 18),
-      PangolinButton(label: _t('登录', 'Log in'), expand: true, onPressed: (_emailValid && _pw.text.isNotEmpty) ? widget.onDone : null),
+      PangolinButton(label: t.doLogin, expand: true, onPressed: (_emailValid && _pw.text.isNotEmpty) ? widget.onDone : null),
     ]);
   }
 
-  Widget _register(PangolinScheme c) {
+  Widget _register(PangolinScheme c, AppText t) {
     if (_step == 0) {
       return Column(children: [
-        _field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
+        _field(c, icon: PangolinIcons.mail, label: t.emailLabel,
             child: Row(children: [
-              Expanded(child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
+              Expanded(child: TextField(controller: _email, decoration: _bare.copyWith(hintText: t.emailPh), onChanged: (_) => setState(() {}))),
               GestureDetector(
                 onTap: _emailValid ? () => setState(() => _sent = true) : null,
-                child: Text(_sent ? _t('重新发送', 'Resend') : _t('发送验证码', 'Send code'),
+                child: Text(_sent ? t.resend : t.sendCode,
                     style: PangolinText.caption.copyWith(color: _emailValid ? c.accent : c.fg3, fontWeight: FontWeight.w700)),
               ),
             ])),
-        if (_sent) Padding(padding: const EdgeInsets.only(top: 8), child: Row(children: [
-          Icon(PangolinIcons.checkCircle, size: 14, color: c.success), const SizedBox(width: 6),
-          Text('${_t('验证码已发送至', 'Code sent to')} ${_email.text}', style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w400)),
-        ])),
+        if (_sent)
+          Padding(
+            padding: const EdgeInsets.only(top: 8),
+            child: Row(children: [
+              Icon(PangolinIcons.checkCircle, size: 14, color: c.success),
+              const SizedBox(width: 6),
+              Expanded(child: Text(t.codeSentTo(_email.text), style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w400))),
+            ]),
+          ),
         const SizedBox(height: 16),
-        _field(c, icon: PangolinIcons.shieldCheck, label: _t('邮箱验证码', 'Verification code'),
+        _field(c, icon: PangolinIcons.shieldCheck, label: t.codeLabel,
             child: TextField(controller: _code, keyboardType: TextInputType.number, maxLength: 6,
                 style: PangolinText.mono.copyWith(letterSpacing: 6, color: c.fg1),
                 decoration: _bare.copyWith(counterText: '', hintText: '······'), onChanged: (_) => setState(() {}))),
         const SizedBox(height: 8),
-        PangolinButton(label: _t('下一步', 'Next'), expand: true, onPressed: (_sent && _code.text.length == 6) ? () => setState(() => _step = 1) : null),
+        PangolinButton(label: t.doNext, expand: true, onPressed: (_sent && _code.text.length == 6) ? () => setState(() => _step = 1) : null),
       ]);
     }
     return Column(children: [
       Row(children: [Icon(PangolinIcons.checkCircle, size: 15, color: c.success), const SizedBox(width: 7), Text(_email.text, style: PangolinText.sm.copyWith(color: c.fg2))]),
       const SizedBox(height: 16),
-      _field(c, icon: PangolinIcons.lock, label: _t('密码', 'Password'),
-          child: TextField(controller: _pw, obscureText: true,
-              decoration: _bare.copyWith(hintText: _t('设置登录密码(用于多端登录)', 'Set a password (multi-device)')), onChanged: (_) => setState(() {}))),
+      _field(c, icon: PangolinIcons.lock, label: t.pwLabel,
+          child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: t.setPwPh), onChanged: (_) => setState(() {}))),
       const SizedBox(height: 18),
-      PangolinButton(label: _t('创建账户', 'Create account'), expand: true, onPressed: _pw.text.length >= 6 ? widget.onDone : null),
+      PangolinButton(label: t.doCreate, expand: true, onPressed: _pw.text.length >= 6 ? widget.onDone : null),
     ]);
   }
 }

client/lib/widgets/connect_button.dart

@@ -1,21 +1,38 @@
-// connect_button.dart — 核心连接键(三态:off / connecting / on)
+// connect_button.dart — 核心连接键(严格三态:off / connecting / on)
+//
+// 纯展示组件:状态由外部状态机(connection_provider)注入,点击只回调
+// onTap(派发事件),绝不在组件内本地翻转状态——禁止乐观显示。
+//
+// 三态(design/CLAUDE.md §5):
+//   off        暖灰底 sand-100 + clay power 图标 + 虚线轨道环 + 「点击连接」
+//   connecting clay 实底 + 旋转进度弧 + 旋转 loader
+//   on         success 实底 + 白盾勾 + 满白环 + 圆内计时 + 「已加密」+ 绿光晕
+// 背景在纯色间切换仅过渡 box-shadow / background-color,不用 transition: all。
 import 'package:flutter/material.dart';
-import '../pangolin_theme.dart';
-import 'pangolin_icons.dart';
 
-enum VpnStatus { off, connecting, on }
+import '../pangolin_theme.dart';
+import '../state/connection_provider.dart';
+import 'pangolin_icons.dart';
 
 class ConnectButton extends StatefulWidget {
   const ConnectButton({
     super.key,
-    required this.status,
+    required this.phase,
     required this.onTap,
+    required this.offLabel,
+    required this.secureLabel,
     this.elapsed = Duration.zero,
     this.size = 208,
   });
 
-  final VpnStatus status;
+  final VpnPhase phase;
   final VoidCallback onTap;
+
+  /// off 态圆内文字(如「点击连接」/「CONNECT」)。
+  final String offLabel;
+
+  /// on 态圆内计时下方文字(如「已加密」/「SECURE」)。
+  final String secureLabel;
   final Duration elapsed;
   final double size;
 
@@ -41,68 +58,89 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
-    final s = widget.status;
+    final s = widget.phase;
 
     final Color fill = switch (s) {
-      VpnStatus.off => c.bgSubtle,
-      VpnStatus.connecting => c.accent,
-      VpnStatus.on => c.success,
+      VpnPhase.off => c.bgSubtle,
+      VpnPhase.connecting => c.accent,
+      VpnPhase.on => c.success,
     };
-    final Color fg = s == VpnStatus.off ? c.accent : PangolinColors.white;
+    final Color fg = s == VpnPhase.off ? c.accent : PangolinColors.white;
     final IconData icon = switch (s) {
-      VpnStatus.off => PangolinIcons.power,
-      VpnStatus.connecting => PangolinIcons.loader,
-      VpnStatus.on => PangolinIcons.shieldCheck,
+      VpnPhase.off => PangolinIcons.power,
+      VpnPhase.connecting => PangolinIcons.loader,
+      VpnPhase.on => PangolinIcons.shieldCheck,
     };
 
-    final List<BoxShadow> glow = s == VpnStatus.off
+    // off 用柔和阴影;connecting/on 增加同色光晕环(box-shadow,不动背景计算)。
+    final List<BoxShadow> glow = s == VpnPhase.off
         ? PangolinShadow.md
         : [
             BoxShadow(
-              color: (s == VpnStatus.on ? c.success : c.accent).withOpacity(0.18),
+              color: (s == VpnPhase.on ? c.success : c.accent).withOpacity(0.18),
               blurRadius: 0,
               spreadRadius: 9,
             ),
             ...PangolinShadow.lg,
           ];
 
-    return GestureDetector(
-      onTap: widget.onTap,
-      child: AnimatedContainer(
-        duration: PangolinMotion.slow,
-        curve: PangolinMotion.easeOut,
-        width: widget.size,
-        height: widget.size,
-        decoration: BoxDecoration(color: fill, shape: BoxShape.circle, boxShadow: glow),
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            Positioned.fill(
-              child: AnimatedBuilder(
-                animation: _spin,
-                builder: (_, __) => CustomPaint(
-                  painter: _RingPainter(
-                    status: s,
-                    track: c.sand200,
-                    progress: PangolinColors.white,
-                    turns: s == VpnStatus.connecting ? _spin.value : 0,
+    return Semantics(
+      button: true,
+      label: widget.offLabel,
+      child: GestureDetector(
+        onTap: widget.onTap,
+        child: AnimatedContainer(
+          duration: PangolinMotion.slow,
+          curve: PangolinMotion.easeOut,
+          width: widget.size,
+          height: widget.size,
+          decoration: BoxDecoration(color: fill, shape: BoxShape.circle, boxShadow: glow),
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              Positioned.fill(
+                child: AnimatedBuilder(
+                  animation: _spin,
+                  builder: (_, __) => CustomPaint(
+                    painter: _RingPainter(
+                      phase: s,
+                      track: c.sand200,
+                      progress: PangolinColors.white,
+                      turns: s == VpnPhase.connecting ? _spin.value : 0,
+                    ),
                   ),
                 ),
               ),
-            ),
-            Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Icon(icon, size: 50, color: fg),
-                const SizedBox(height: 6),
-                if (s == VpnStatus.on)
-                  Text(_fmt(widget.elapsed), style: PangolinText.mono.copyWith(color: fg, fontSize: 18, fontWeight: FontWeight.w600))
-                else
-                  Text(s == VpnStatus.connecting ? '···' : 'TAP',
-                      style: PangolinText.mono.copyWith(color: fg, fontSize: 14, fontWeight: FontWeight.w700, letterSpacing: 1.1)),
-              ],
-            ),
-          ],
+              // connecting 时图标也旋转(对齐 React loader spin)
+              if (s == VpnPhase.connecting)
+                RotationTransition(
+                  turns: _spin,
+                  child: Icon(icon, size: 50, color: fg),
+                )
+              else
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Icon(icon, size: 50, color: fg),
+                    const SizedBox(height: 6),
+                    if (s == VpnPhase.on) ...[
+                      Text(_fmt(widget.elapsed),
+                          style: PangolinText.mono
+                              .copyWith(color: fg, fontSize: 18, fontWeight: FontWeight.w600)),
+                      Text(widget.secureLabel,
+                          style: PangolinText.caption.copyWith(
+                              color: fg.withOpacity(0.9),
+                              fontSize: 10,
+                              fontWeight: FontWeight.w700,
+                              letterSpacing: 1.0)),
+                    ] else
+                      Text(widget.offLabel,
+                          style: PangolinText.caption.copyWith(
+                              color: fg, fontSize: 13, fontWeight: FontWeight.w700, letterSpacing: 0.5)),
+                  ],
+                ),
+            ],
+          ),
         ),
       ),
     );
@@ -110,8 +148,8 @@ class _ConnectButtonState extends State<ConnectButton> with SingleTickerProvider
 }
 
 class _RingPainter extends CustomPainter {
-  _RingPainter({required this.status, required this.track, required this.progress, required this.turns});
-  final VpnStatus status;
+  _RingPainter({required this.phase, required this.track, required this.progress, required this.turns});
+  final VpnPhase phase;
   final Color track;
   final Color progress;
   final double turns;
@@ -122,23 +160,39 @@ class _RingPainter extends CustomPainter {
     final radius = size.width / 2 - 8;
     final rect = Rect.fromCircle(center: center, radius: radius);
 
-    if (status == VpnStatus.off) {
-      final p = Paint()..style = PaintingStyle.stroke..strokeWidth = 3..strokeCap = StrokeCap.round..color = track;
-      const dash = 0.045, gap = 0.11;
-      for (double a = 0; a < 6.283; a += dash + gap) {
-        canvas.drawArc(rect, a, dash, false, p);
-      }
-    } else if (status == VpnStatus.connecting) {
-      final base = Paint()..style = PaintingStyle.stroke..strokeWidth = 4..color = progress.withOpacity(0.3);
-      canvas.drawArc(rect, 0, 6.283, false, base);
-      final arc = Paint()..style = PaintingStyle.stroke..strokeWidth = 4..strokeCap = StrokeCap.round..color = progress;
-      canvas.drawArc(rect, turns * 6.283, 1.6, false, arc);
-    } else {
-      final p = Paint()..style = PaintingStyle.stroke..strokeWidth = 4..strokeCap = StrokeCap.round..color = progress.withOpacity(0.85);
-      canvas.drawArc(rect, 0, 6.283, false, p);
+    switch (phase) {
+      case VpnPhase.off:
+        final p = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 3
+          ..strokeCap = StrokeCap.round
+          ..color = track;
+        const dash = 0.045, gap = 0.11;
+        for (double a = 0; a < 6.283; a += dash + gap) {
+          canvas.drawArc(rect, a, dash, false, p);
+        }
+      case VpnPhase.connecting:
+        final base = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..color = progress.withOpacity(0.3);
+        canvas.drawArc(rect, 0, 6.283, false, base);
+        final arc = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..strokeCap = StrokeCap.round
+          ..color = progress;
+        canvas.drawArc(rect, turns * 6.283, 1.6, false, arc);
+      case VpnPhase.on:
+        final p = Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 4
+          ..strokeCap = StrokeCap.round
+          ..color = progress.withOpacity(0.85);
+        canvas.drawArc(rect, 0, 6.283, false, p);
     }
   }
 
   @override
-  bool shouldRepaint(_RingPainter old) => old.turns != turns || old.status != status;
+  bool shouldRepaint(_RingPainter old) => old.turns != turns || old.phase != phase;
 }

client/lib/widgets/home_shell.dart

@@ -1,326 +1,278 @@
-// home_shell.dart — 主框架(底部 4 Tab:连接 / 节点 / 统计 / 账户)
+// home_shell.dart — 主框架(4 Tab:连接 / 节点 / 统计 / 账户)
+//
+// 自适应断点:同一份页面代码,宽度 ≥900 时从底部 Tab 切换为左侧栏分栏
+// (LayoutBuilder 开关,不 fork 页面)。窄屏支持左右滑动切换 Tab。
 import 'dart:async';
-import 'package:flutter/material.dart';
-import '../pangolin_theme.dart';
-import 'pangolin_icons.dart';
-import 'connect_button.dart';
-import 'server_tile.dart';
-import 'country_code.dart';
-import 'account_screens.dart';
-import 'pangolin_logo.dart';
 
-class HomeShell extends StatefulWidget {
-  const HomeShell({super.key, this.zh = true});
-  final bool zh;
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../pangolin_theme.dart';
+import '../screens/account_page.dart';
+import '../screens/connect_page.dart';
+import '../screens/nodes_page.dart';
+import '../screens/stats_page.dart';
+import '../state/app_providers.dart';
+import '../state/connection_provider.dart';
+import '../state/nodes_provider.dart';
+import 'pangolin_icons.dart';
+import 'pangolin_logo.dart';
+import 'tab_swipe.dart';
+
+/// 宽屏断点(逻辑像素)。≥该值切侧栏分栏。
+const double kWideBreakpoint = 900;
+
+class HomeShell extends ConsumerStatefulWidget {
+  const HomeShell({super.key});
   @override
-  State<HomeShell> createState() => _HomeShellState();
+  ConsumerState<HomeShell> createState() => _HomeShellState();
 }
 
-class _HomeShellState extends State<HomeShell> {
+class _HomeShellState extends ConsumerState<HomeShell> {
   int _tab = 0;
-  VpnStatus _status = VpnStatus.off;
-  ServerInfo _server = const ServerInfo(code: 'HK', name: '香港 · 流媒体', sub: 'Hong Kong', ping: 18);
-  Timer? _timer;
-  int _elapsed = 0;
+  int _dir = 0;
+  Timer? _dirReset;
 
-  String _t(String zh, String en) => widget.zh ? zh : en;
-
-  void _toggle() {
-    if (_status == VpnStatus.off) {
-      setState(() => _status = VpnStatus.connecting);
-      Future.delayed(const Duration(milliseconds: 1500), () {
-        if (!mounted) return;
-        setState(() { _status = VpnStatus.on; _elapsed = 0; });
-        _timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(() => _elapsed++));
-      });
-    } else {
-      _timer?.cancel();
-      setState(() => _status = VpnStatus.off);
-    }
+  void _goTab(int i) {
+    if (i == _tab) return;
+    setState(() {
+      _dir = i > _tab ? 1 : -1;
+      _tab = i;
+    });
+    _dirReset?.cancel();
+    _dirReset = Timer(const Duration(milliseconds: 260), () {
+      if (mounted) setState(() => _dir = 0);
+    });
   }
 
-  void _pick(ServerInfo s) {
-    setState(() { _server = s; _tab = 0; });
-    if (_status == VpnStatus.on) {
-      _timer?.cancel();
-      setState(() => _status = VpnStatus.connecting);
-      Future.delayed(const Duration(milliseconds: 1200), () {
-        if (!mounted) return;
-        setState(() { _status = VpnStatus.on; _elapsed = 0; });
-        _timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(() => _elapsed++));
-      });
-    }
-  }
+  void _swipe(int delta) => _goTab((_tab + delta).clamp(0, 3));
 
   @override
-  void dispose() { _timer?.cancel(); super.dispose(); }
+  void dispose() {
+    _dirReset?.cancel();
+    super.dispose();
+  }
+
+  List<Widget> _pages(bool isWide) => [
+        ConnectPage(isWide: isWide, onOpenNodes: () => _goTab(1)),
+        NodesPage(isWide: isWide, onPicked: () => _goTab(0)),
+        StatsPage(isWide: isWide),
+        AccountPage(isWide: isWide),
+      ];
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
-    final pages = [
-      _ConnectPage(zh: widget.zh, status: _status, server: _server, elapsedSec: _elapsed, onToggle: _toggle, onOpenServers: () => setState(() => _tab = 1)),
-      _ServersPage(zh: widget.zh, current: _server.code, onPick: _pick),
-      _StatsPage(zh: widget.zh),
-      _AccountPage(zh: widget.zh),
-    ];
     return Scaffold(
       backgroundColor: c.bg,
-      body: SafeArea(bottom: false, child: pages[_tab]),
-      bottomNavigationBar: _BottomTab(zh: widget.zh, index: _tab, onTap: (i) => setState(() => _tab = i)),
+      body: LayoutBuilder(builder: (context, constraints) {
+        final isWide = constraints.maxWidth >= kWideBreakpoint;
+        final page = DirectionalTabSwitcher(index: _tab, direction: _dir, child: _pages(isWide)[_tab]);
+        if (isWide) {
+          return SafeArea(child: _WideLayout(tab: _tab, onTab: _goTab, child: page));
+        }
+        return SafeArea(
+          bottom: false,
+          child: Column(children: [
+            Expanded(
+              child: HorizontalSwipeArea(
+                onSwipeLeft: () => _swipe(1),
+                onSwipeRight: () => _swipe(-1),
+                child: page,
+              ),
+            ),
+            _BottomTab(index: _tab, onTap: _goTab),
+          ]),
+        );
+      }),
     );
   }
 }
 
-/// ── Bottom tab bar ──
-class _BottomTab extends StatelessWidget {
-  const _BottomTab({required this.zh, required this.index, required this.onTap});
-  final bool zh; final int index; final ValueChanged<int> onTap;
+/// ── 宽屏分栏:左侧栏导航 + 内容区 ──
+class _WideLayout extends ConsumerWidget {
+  const _WideLayout({required this.tab, required this.onTab, required this.child});
+  final int tab;
+  final ValueChanged<int> onTab;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final conn = ref.watch(connectionProvider);
+    final node = ref.watch(effectiveNodeProvider);
+    final titles = [t.tabConnect, t.tabServers, t.tabStats, t.tabMe];
+    return Row(children: [
+      _SideRail(tab: tab, onTab: onTab),
+      Expanded(
+        child: Column(children: [
+          // 内容区顶栏:标题 + 在线状态
+          SizedBox(
+            height: 56,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 28),
+              child: Row(children: [
+                Text(titles[tab], style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+                const Spacer(),
+                Text(
+                  conn.phase == VpnPhase.on ? '● ${node.code}' : '○',
+                  style: PangolinText.mono.copyWith(
+                      fontSize: 12.5,
+                      fontWeight: FontWeight.w600,
+                      color: conn.phase == VpnPhase.on ? c.success : c.fg3),
+                ),
+              ]),
+            ),
+          ),
+          Expanded(child: child),
+        ]),
+      ),
+    ]);
+  }
+}
+
+class _SideRail extends ConsumerWidget {
+  const _SideRail({required this.tab, required this.onTab});
+  final int tab;
+  final ValueChanged<int> onTab;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final isFree = ref.watch(isFreePlanProvider);
+    final items = [
+      (PangolinIcons.power, t.tabConnect),
+      (PangolinIcons.globe, t.tabServers),
+      (PangolinIcons.barChart, t.tabStats),
+      (PangolinIcons.user, t.tabMe),
+    ];
+    return Container(
+      width: 232,
+      decoration: BoxDecoration(color: c.bgSubtle, border: Border(right: BorderSide(color: c.border))),
+      padding: const EdgeInsets.fromLTRB(14, 18, 14, 16),
+      child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+        // 品牌锁版
+        Padding(
+          padding: const EdgeInsets.fromLTRB(8, 0, 8, 20),
+          child: Row(children: [
+            const PangolinMark(size: 30),
+            const SizedBox(width: 10),
+            Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+              Text(t.brand, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 17, height: 1)),
+              const SizedBox(height: 3),
+              Text('PANGOLIN', style: PangolinText.overline.copyWith(color: c.accent, fontSize: 9, letterSpacing: 1.8)),
+            ]),
+          ]),
+        ),
+        for (var i = 0; i < items.length; i++)
+          Padding(
+            padding: const EdgeInsets.only(bottom: 4),
+            child: _RailItem(icon: items[i].$1, label: items[i].$2, active: i == tab, onTap: () => onTab(i)),
+          ),
+        const Spacer(),
+        // 套餐迷你卡
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 12),
+          decoration: BoxDecoration(
+            color: isFree ? c.surface : null,
+            gradient: isFree
+                ? null
+                : const LinearGradient(
+                    begin: Alignment.topLeft, end: Alignment.bottomRight,
+                    colors: [PangolinColors.clay600, PangolinColors.clay800]),
+            border: isFree ? Border.all(color: c.border) : null,
+            borderRadius: BorderRadius.circular(PangolinRadius.lg),
+          ),
+          child: Row(children: [
+            Container(
+              width: 32, height: 32,
+              decoration: BoxDecoration(color: isFree ? c.bgSubtle : PangolinColors.white.withOpacity(0.18), shape: BoxShape.circle),
+              child: Icon(isFree ? PangolinIcons.user : PangolinIcons.crown, size: 16, color: isFree ? c.fg2 : PangolinColors.white),
+            ),
+            const SizedBox(width: 9),
+            Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+              Text(isFree ? t.freePlanName : t.proMember,
+                  overflow: TextOverflow.ellipsis,
+                  style: PangolinText.caption.copyWith(color: isFree ? c.fg1 : PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 12.5)),
+              Text(kDemoEmail,
+                  overflow: TextOverflow.ellipsis,
+                  style: PangolinText.caption.copyWith(color: isFree ? c.fg3 : PangolinColors.white.withOpacity(0.7), fontSize: 10.5)),
+            ])),
+          ]),
+        ),
+      ]),
+    );
+  }
+}
+
+class _RailItem extends StatelessWidget {
+  const _RailItem({required this.icon, required this.label, required this.active, required this.onTap});
+  final IconData icon;
+  final String label;
+  final bool active;
+  final VoidCallback onTap;
 
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
+    return Material(
+      color: active ? c.accentSubtle : Colors.transparent,
+      borderRadius: BorderRadius.circular(PangolinRadius.md),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(minHeight: 48), // 触控尺寸 ≥48
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
+            child: Row(children: [
+              Icon(icon, size: 20, color: active ? c.accent : c.fg3),
+              const SizedBox(width: 12),
+              Text(label, style: PangolinText.body.copyWith(color: active ? c.accent : c.fg2, fontWeight: active ? FontWeight.w700 : FontWeight.w500)),
+            ]),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// ── 底部 Tab 栏(窄屏)──
+class _BottomTab extends ConsumerWidget {
+  const _BottomTab({required this.index, required this.onTap});
+  final int index;
+  final ValueChanged<int> onTap;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
     final items = [
-      (PangolinIcons.power, zh ? '连接' : 'Connect'),
-      (PangolinIcons.globe, zh ? '节点' : 'Servers'),
-      (PangolinIcons.barChart, zh ? '统计' : 'Stats'),
-      (PangolinIcons.user, zh ? '账户' : 'Account'),
+      (PangolinIcons.power, t.tabConnect),
+      (PangolinIcons.globe, t.tabServers),
+      (PangolinIcons.barChart, t.tabStats),
+      (PangolinIcons.user, t.tabMe),
     ];
     return Container(
       decoration: BoxDecoration(color: c.surface, border: Border(top: BorderSide(color: c.border))),
       padding: const EdgeInsets.only(top: 8, bottom: 22),
       child: Row(children: [
         for (var i = 0; i < items.length; i++)
-          Expanded(child: GestureDetector(
-            behavior: HitTestBehavior.opaque,
-            onTap: () => onTap(i),
-            child: Column(mainAxisSize: MainAxisSize.min, children: [
-              Icon(items[i].$1, size: 22, color: i == index ? c.accent : c.fg3),
-              const SizedBox(height: 4),
-              Text(items[i].$2, style: PangolinText.caption.copyWith(color: i == index ? c.accent : c.fg3, fontWeight: i == index ? FontWeight.w700 : FontWeight.w500)),
-            ]),
-          )),
-      ]),
-    );
-  }
-}
-
-/// ── Connect page ──
-class _ConnectPage extends StatelessWidget {
-  const _ConnectPage({required this.zh, required this.status, required this.server, required this.elapsedSec, required this.onToggle, required this.onOpenServers});
-  final bool zh; final VpnStatus status; final ServerInfo server; final int elapsedSec; final VoidCallback onToggle, onOpenServers;
-
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    final cap = switch (status) {
-      VpnStatus.off => zh ? '未连接 · 轻点连接' : 'Tap to connect',
-      VpnStatus.connecting => zh ? '连接中…' : 'Connecting…',
-      VpnStatus.on => zh ? '已连接 · 网络已加密' : 'Connected · Encrypted',
-    };
-    return Column(children: [
-      _TopBar(zh: zh, trailing: Text(status == VpnStatus.on ? (zh ? '● 在线' : '● Online') : (zh ? '○ 离线' : '○ Offline'),
-          style: PangolinText.mono.copyWith(fontSize: 12, color: status == VpnStatus.on ? c.success : c.fg3, fontWeight: FontWeight.w600))),
-      Expanded(child: Center(child: Column(mainAxisSize: MainAxisSize.min, children: [
-        ConnectButton(status: status, elapsed: Duration(seconds: elapsedSec), onTap: onToggle),
-        const SizedBox(height: 24),
-        Text(cap, style: PangolinText.body.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
-      ]))),
-      Padding(
-        padding: const EdgeInsets.fromLTRB(20, 0, 20, 18),
-        child: GestureDetector(
-          onTap: onOpenServers,
-          child: Container(
-            padding: const EdgeInsets.all(12),
-            decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-            child: Row(children: [
-              CountryCode(code: server.code, active: true),
-              const SizedBox(width: 12),
-              Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-                Text(server.name, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
-                Text('${server.sub} · ${server.ping}ms', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
-              ])),
-              Icon(PangolinIcons.chevronRight, size: 20, color: c.fg3),
-            ]),
-          ),
-        ),
-      ),
-    ]);
-  }
-}
-
-/// ── Servers page ──
-class _ServersPage extends StatelessWidget {
-  const _ServersPage({required this.zh, required this.current, required this.onPick});
-  final bool zh; final String current; final ValueChanged<ServerInfo> onPick;
-
-  static const _servers = [
-    ServerInfo(code: 'HK', name: '香港 · 流媒体', sub: 'Hong Kong', ping: 18),
-    ServerInfo(code: 'JP', name: '日本 东京', sub: 'Tokyo', ping: 32),
-    ServerInfo(code: 'TW', name: '台湾 台北', sub: 'Taipei', ping: 28),
-    ServerInfo(code: 'SG', name: '新加坡', sub: 'Singapore · P2P', ping: 54),
-    ServerInfo(code: 'KR', name: '韩国 首尔', sub: 'Seoul', ping: 41),
-    ServerInfo(code: 'US', name: '美国 洛杉矶', sub: 'Los Angeles', ping: 146),
-  ];
-
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      _TopBar(zh: zh),
-      Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
-          child: Text(zh ? '选择节点' : 'Choose server', style: PangolinText.h2.copyWith(color: c.fg1))),
-      Expanded(child: ListView.builder(
-        padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
-        itemCount: _servers.length,
-        itemBuilder: (_, i) => Padding(
-          padding: const EdgeInsets.only(bottom: 10),
-          child: ServerTile(server: _servers[i], active: _servers[i].code == current, onTap: () => onPick(_servers[i])),
-        ),
-      )),
-    ]);
-  }
-}
-
-/// ── Stats page ──
-class _StatsPage extends StatelessWidget {
-  const _StatsPage({required this.zh});
-  final bool zh;
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    final vals = [2.1, 3.4, 1.8, 4.6, 5.2, 6.1, 3.0];
-    final labels = zh ? ['一','二','三','四','五','六','日'] : ['M','T','W','T','F','S','S'];
-    const maxV = 6.1;
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      _TopBar(zh: zh),
-      Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 16),
-          child: Text(zh ? '使用统计' : 'Statistics', style: PangolinText.h2.copyWith(color: c.fg1))),
-      Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 20),
-        child: Row(children: [
-          for (final m in [(zh ? '本月流量' : 'Traffic', '42.6', 'GB'), (zh ? '平均延迟' : 'Ping', '29', 'ms'), (zh ? '本月时长' : 'Time', '86.4', 'h')])
-            Expanded(child: Container(
-              margin: const EdgeInsets.only(right: 12),
-              padding: const EdgeInsets.all(14),
-              decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-              child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-                Text(m.$1, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
-                const SizedBox(height: 6),
-                Text.rich(TextSpan(text: m.$2, style: PangolinText.mono.copyWith(fontSize: 20, color: c.fg1, fontWeight: FontWeight.w500),
-                    children: [TextSpan(text: ' ${m.$3}', style: PangolinText.caption.copyWith(color: c.fg3))])),
+          Expanded(
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () => onTap(i),
+              child: Column(mainAxisSize: MainAxisSize.min, children: [
+                Icon(items[i].$1, size: 22, color: i == index ? c.accent : c.fg3),
+                const SizedBox(height: 4),
+                Text(items[i].$2,
+                    style: PangolinText.caption.copyWith(
+                        color: i == index ? c.accent : c.fg3, fontWeight: i == index ? FontWeight.w700 : FontWeight.w500)),
               ]),
-            )),
-        ]),
-      ),
-      const SizedBox(height: 16),
-      Expanded(child: Padding(
-        padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
-        child: Container(
-          width: double.infinity,
-          padding: const EdgeInsets.all(18),
-          decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-            Text(zh ? '本周流量 (GB)' : 'This week (GB)', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
-            const SizedBox(height: 18),
-            Expanded(child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
-              for (var i = 0; i < vals.length; i++)
-                Expanded(child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
-                  Text('${vals[i]}', style: PangolinText.mono.copyWith(fontSize: 12, color: c.fg3)),
-                  const SizedBox(height: 6),
-                  Container(height: 90 * (vals[i] / maxV), margin: const EdgeInsets.symmetric(horizontal: 6),
-                      decoration: BoxDecoration(color: c.accent.withOpacity(.85), borderRadius: const BorderRadius.vertical(top: Radius.circular(6)))),
-                  const SizedBox(height: 6),
-                  Text(labels[i], style: PangolinText.caption.copyWith(color: c.fg3)),
-                ])),
-            ])),
-          ]),
-        ),
-      )),
-    ]);
-  }
-}
-
-/// ── Account page ──
-class _AccountPage extends StatelessWidget {
-  const _AccountPage({required this.zh});
-  final bool zh;
-  @override
-  Widget build(BuildContext context) {
-    final c = context.pangolin;
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      _TopBar(zh: zh),
-      Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 14),
-          child: Text(zh ? '我的' : 'Account', style: PangolinText.h2.copyWith(color: c.fg1))),
-      Expanded(child: ListView(padding: const EdgeInsets.fromLTRB(20, 0, 20, 20), children: [
-        Container(
-          padding: const EdgeInsets.all(18),
-          decoration: BoxDecoration(
-            gradient: const LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [PangolinColors.clay600, PangolinColors.clay800]),
-            borderRadius: BorderRadius.circular(PangolinRadius.xl), boxShadow: PangolinShadow.md,
-          ),
-          child: Row(children: [
-            Container(width: 44, height: 44, decoration: BoxDecoration(color: PangolinColors.white.withOpacity(.18), shape: BoxShape.circle),
-                child: const Icon(PangolinIcons.crown, size: 22, color: PangolinColors.white)),
-            const SizedBox(width: 11),
-            Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-              const Text('me@pangolin.vpn', style: TextStyle(color: PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 16)),
-              const SizedBox(height: 4),
-              Text(zh ? 'PRO 会员 · 至 2026-12-31' : 'PRO · until 2026-12-31', style: TextStyle(color: PangolinColors.white.withOpacity(.85), fontSize: 12)),
-            ])),
-            FilledButton(
-              onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => PlansScreen(zh: zh, onChoose: (_) => Navigator.of(context).push(MaterialPageRoute(builder: (_) => RedeemScreen(zh: zh)))))),
-              style: FilledButton.styleFrom(backgroundColor: PangolinColors.white, foregroundColor: PangolinColors.clay700, shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10)),
-              child: Text(zh ? '续费 / 升级' : 'Renew', style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13)),
             ),
-          ]),
-        ),
-        const SizedBox(height: 18),
-        _accountRow(c, PangolinIcons.mail, zh ? '邮箱' : 'Email', 'me@pangolin.vpn'),
-        _accountRow(c, PangolinIcons.lock, zh ? '密码' : 'Password', '••••••••••'),
-        _accountRow(c, PangolinIcons.monitorSmartphone, zh ? '我的设备' : 'My devices', '',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => DevicesScreen(zh: zh)))),
-        _accountRow(c, PangolinIcons.shoppingBag, zh ? '兑换 & 购买' : 'Redeem & buy', '',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => RedeemScreen(zh: zh)))),
-        _accountRow(c, PangolinIcons.messageCircle, zh ? '联系我们' : 'Contact us', '',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => ContactScreen(zh: zh)))),
-        _accountRow(c, PangolinIcons.logOut, zh ? '退出登录' : 'Sign out', '', danger: true),
-      ])),
-    ]);
-  }
-
-  Widget _accountRow(PangolinScheme c, IconData icon, String title, String value, {bool danger = false, VoidCallback? onTap}) {
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onTap: onTap,
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 10),
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
-        decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
-        child: Row(children: [
-          Icon(icon, size: 20, color: danger ? c.danger : c.accent),
-          const SizedBox(width: 13),
-          Expanded(child: Text(title, style: PangolinText.body.copyWith(color: danger ? c.danger : c.fg1, fontWeight: FontWeight.w500))),
-          if (value.isNotEmpty) Text(value, style: PangolinText.sm.copyWith(color: c.fg3))
-          else Icon(PangolinIcons.chevronRight, size: 18, color: c.fg3),
-        ]),
-      ),
-    );
-  }
-}
-
-/// ── Shared top bar ──
-class _TopBar extends StatelessWidget {
-  const _TopBar({required this.zh, this.trailing});
-  final bool zh; final Widget? trailing;
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.fromLTRB(20, 6, 20, 14),
-      child: Row(children: [
-        PangolinBrandLockup(zh: zh, markSize: 24),
-        const Spacer(),
-        if (trailing != null) trailing!,
+          ),
       ]),
     );
   }

client/lib/widgets/onboarding_screen.dart

@@ -1,5 +1,6 @@
-// onboarding_screen.dart — 首次引导页(3 屏可滑动)
+// onboarding_screen.dart — 首次引导页(3 屏可滑动,文案经 AppText 单显)
 import 'package:flutter/material.dart';
+import '../l10n/app_text.dart';
 import '../pangolin_theme.dart';
 import 'pangolin_icons.dart';
 import 'pangolin_button.dart';
@@ -12,8 +13,9 @@ class OnboardingStep {
 }
 
 class OnboardingScreen extends StatefulWidget {
-  const OnboardingScreen({super.key, required this.onDone, this.steps});
+  const OnboardingScreen({super.key, required this.onDone, required this.t, this.steps});
   final VoidCallback onDone;
+  final AppText t;
   final List<OnboardingStep>? steps;
 
   @override
@@ -24,12 +26,15 @@ class _OnboardingScreenState extends State<OnboardingScreen> {
   int _i = 0;
   final _pager = PageController();
 
-  List<OnboardingStep> _defaults(PangolinScheme c) => [
-        OnboardingStep(icon: PangolinIcons.globe, title: '一键连接全球', body: '80+ 节点,智能选择最快线路,稳定不掉线。', cta: '下一步'),
-        OnboardingStep(icon: PangolinIcons.shield, title: '授权网络配置', body: '系统会请求添加一个网络配置,用于建立加密隧道。', cta: '允许并继续'),
-        OnboardingStep(icon: PangolinIcons.shieldCheck, title: '安全 · 无日志', body: '端到端加密,我们不记录你的任何浏览数据。', cta: '开始使用',
-            tint: c.success, tintBg: c.successSubtle),
-      ];
+  List<OnboardingStep> _defaults(PangolinScheme c) {
+    final t = widget.t;
+    return [
+      OnboardingStep(icon: PangolinIcons.globe, title: t.ob1Title, body: t.ob1Sub, cta: t.obNext),
+      OnboardingStep(icon: PangolinIcons.shield, title: t.ob2Title, body: t.ob2Sub, cta: t.obAllow),
+      OnboardingStep(icon: PangolinIcons.shieldCheck, title: t.ob3Title, body: t.ob3Sub, cta: t.obStart,
+          tint: c.success, tintBg: c.successSubtle),
+    ];
+  }
 
   @override
   void dispose() { _pager.dispose(); super.dispose(); }
@@ -48,7 +53,7 @@ class _OnboardingScreenState extends State<OnboardingScreen> {
             alignment: Alignment.centerRight,
             child: Padding(
               padding: const EdgeInsets.all(8),
-              child: TextButton(onPressed: widget.onDone, child: Text('跳过', style: PangolinText.sm.copyWith(color: c.fg3, fontWeight: FontWeight.w600))),
+              child: TextButton(onPressed: widget.onDone, child: Text(widget.t.obSkip, style: PangolinText.sm.copyWith(color: c.fg3, fontWeight: FontWeight.w600))),
             ),
           ),
           Expanded(

client/lib/widgets/pangolin_icons.dart

@@ -12,6 +12,9 @@ class PangolinIcons {
   static const loader       = LucideIcons.loader;
   static const zap          = LucideIcons.zap;
   static const globe        = LucideIcons.globe;
+  static const clock        = LucideIcons.clock;
+  static const playCircle   = LucideIcons.playCircle;
+  static const wifi         = LucideIcons.wifi;
 
   // ── 导航 / 操作 ──
   static const settings     = LucideIcons.settings;

client/lib/widgets/pangolin_logo.dart

@@ -41,18 +41,18 @@ class PangolinAppIcon extends StatelessWidget {
   }
 }
 
-/// 顶栏品牌锁版:标记 + 「穿山甲 / Pangolin」
+/// 顶栏品牌锁版:标记 + 品牌名(文案由 l10n 传入,单显)
 class PangolinBrandLockup extends StatelessWidget {
-  const PangolinBrandLockup({super.key, this.zh = true, this.markSize = 26});
-  final bool zh; final double markSize;
+  const PangolinBrandLockup({super.key, required this.brand, this.markSize = 26});
+  final String brand;
+  final double markSize;
   @override
   Widget build(BuildContext context) {
     final c = context.pangolin;
     return Row(mainAxisSize: MainAxisSize.min, children: [
       PangolinMark(size: markSize),
       const SizedBox(width: 9),
-      Text(zh ? '穿山甲' : 'Pangolin',
-          style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
+      Text(brand, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
     ]);
   }
 }

client/lib/widgets/pangolin_widgets.dart

@@ -1,13 +1,17 @@
-// pangolin_widgets.dart — 统一导出穿山甲 VPN 核心组件。
-export 'pangolin_icons.dart';
-export 'pangolin_button.dart';
-export 'country_code.dart';
-export 'status_pill.dart';
-export 'connect_button.dart';
-export 'server_tile.dart';
-export 'plan_card.dart';
-export 'auth_screen.dart';
-export 'onboarding_screen.dart';
-export 'home_shell.dart';
+// pangolin_widgets.dart — 统一导出穿山甲核心组件。
 export 'account_screens.dart';
+export 'app_top_bar.dart';
+export 'auth_screen.dart';
+export 'connect_button.dart';
+export 'country_code.dart';
+export 'home_shell.dart';
+export 'onboarding_screen.dart';
+export 'pangolin_button.dart';
+export 'pangolin_icons.dart';
 export 'pangolin_logo.dart';
+export 'plan_card.dart';
+export 'quota_card.dart';
+export 'server_tile.dart';
+export 'smart_select_card.dart';
+export 'status_pill.dart';
+export 'tab_swipe.dart';

client/lib/widgets/quota_card.dart

@@ -0,0 +1,120 @@
+// quota_card.dart — 免费版每日额度卡(纯展示)
+//
+// 今日剩余分钟 + 进度条(≤3 分钟切 warning 色)+「看广告开始使用」;
+// 解锁后变绿「已解锁 · 今日可用」。状态由 quota_provider 注入,本地仅展示。
+import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
+import '../pangolin_theme.dart';
+import '../state/quota_provider.dart';
+import 'pangolin_icons.dart';
+
+class QuotaCard extends StatelessWidget {
+  const QuotaCard({super.key, required this.quota, required this.t, required this.onWatchAd});
+
+  final FreeQuotaState quota;
+  final AppText t;
+  final VoidCallback onWatchAd;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final barColor = quota.isLow ? c.warning : c.accent;
+
+    return Container(
+      padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
+      decoration: BoxDecoration(
+        color: c.surface,
+        borderRadius: BorderRadius.circular(PangolinRadius.lg),
+        border: Border.all(color: c.border),
+        boxShadow: PangolinShadow.sm,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Row(children: [
+            Icon(PangolinIcons.clock, size: 15, color: c.accent),
+            const SizedBox(width: 7),
+            Text(t.quotaToday,
+                style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600, fontSize: 12)),
+            const SizedBox(width: 7),
+            Text('${quota.remainingMinutes} ${t.minutes}',
+                style: PangolinText.mono.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w600)),
+            const Spacer(),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3),
+              decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
+              child: Text(t.quotaFree,
+                  style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600, fontSize: 10.5)),
+            ),
+          ]),
+          const SizedBox(height: 9),
+          // 进度条:剩余比例;≤3 分钟切 warning 色(满宽轨道 + 比例填充)
+          ClipRRect(
+            borderRadius: BorderRadius.circular(3),
+            child: SizedBox(
+              height: 6,
+              child: Stack(children: [
+                Positioned.fill(child: ColoredBox(color: c.bgSubtle)),
+                FractionallySizedBox(
+                  alignment: Alignment.centerLeft,
+                  widthFactor: quota.progress,
+                  child: AnimatedContainer(
+                    duration: PangolinMotion.base,
+                    curve: PangolinMotion.easeOut,
+                    decoration: BoxDecoration(color: barColor, borderRadius: BorderRadius.circular(3)),
+                  ),
+                ),
+              ]),
+            ),
+          ),
+          const SizedBox(height: 11),
+          if (quota.adUnlocked)
+            SizedBox(
+              height: 38,
+              child: Center(
+                child: Row(mainAxisSize: MainAxisSize.min, children: [
+                  Icon(PangolinIcons.checkCircle, size: 16, color: c.success),
+                  const SizedBox(width: 7),
+                  Text(t.adUnlocked,
+                      style: PangolinText.sm.copyWith(color: c.success, fontWeight: FontWeight.w700, fontSize: 13)),
+                ]),
+              ),
+            )
+          else
+            _WatchAdButton(t: t, onTap: onWatchAd),
+        ],
+      ),
+    );
+  }
+}
+
+class _WatchAdButton extends StatelessWidget {
+  const _WatchAdButton({required this.t, required this.onTap});
+  final AppText t;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Material(
+      color: c.accentSubtle,
+      shape: StadiumBorder(side: BorderSide(color: c.accentBorder, width: 1.5)),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: SizedBox(
+          height: 38,
+          child: Center(
+            child: Row(mainAxisSize: MainAxisSize.min, children: [
+              Icon(PangolinIcons.playCircle, size: 16, color: c.accent),
+              const SizedBox(width: 7),
+              Text(t.watchAd,
+                  style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w700, fontSize: 13)),
+            ]),
+          ),
+        ),
+      ),
+    );
+  }
+}

client/lib/widgets/server_tile.dart

@@ -1,18 +1,23 @@
-// server_tile.dart — 服务器列表行
+// server_tile.dart — 节点列表行(国家码块 · 名称 · 延迟 · 信号条 · 选中态)
 import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
+import '../models/node.dart';
 import '../pangolin_theme.dart';
 import 'country_code.dart';
 import 'pangolin_icons.dart';
 
-class ServerInfo {
-  const ServerInfo({required this.code, required this.name, required this.sub, required this.ping});
-  final String code, name, sub;
-  final int ping;
-}
-
 class ServerTile extends StatelessWidget {
-  const ServerTile({super.key, required this.server, this.active = false, this.onTap});
-  final ServerInfo server;
+  const ServerTile({
+    super.key,
+    required this.node,
+    required this.lang,
+    this.active = false,
+    this.onTap,
+  });
+
+  final Node node;
+  final AppLang lang;
   final bool active;
   final VoidCallback? onTap;
 
@@ -26,21 +31,24 @@ class ServerTile extends StatelessWidget {
         padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
         child: Row(
           children: [
-            CountryCode(code: server.code, active: active),
+            CountryCode(code: node.code, active: active),
             const SizedBox(width: 13),
             Expanded(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(server.name, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 15)),
+                  Text(node.localizedName(lang),
+                      style: PangolinText.sm
+                          .copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 15)),
                   const SizedBox(height: 2),
-                  Text(server.sub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
+                  Text(node.localizedSub(lang),
+                      style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
                 ],
               ),
             ),
-            Text('${server.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
+            Text('${node.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
             const SizedBox(width: 8),
-            SignalBars(ping: server.ping),
+            SignalBars(ping: node.ping),
             if (active) ...[const SizedBox(width: 10), Icon(PangolinIcons.check, size: 18, color: c.accent)],
           ],
         ),

client/lib/widgets/smart_select_card.dart

@@ -0,0 +1,82 @@
+// smart_select_card.dart — 节点页置顶「智能选择」推荐卡(纯展示)
+//
+// accent-subtle 底 + clay 渐变 zap 图标 + 「推荐」胶囊 + 脱敏文案,默认选中。
+import 'package:flutter/material.dart';
+
+import '../l10n/app_text.dart';
+import '../pangolin_theme.dart';
+import 'pangolin_icons.dart';
+
+class SmartSelectCard extends StatelessWidget {
+  const SmartSelectCard({super.key, required this.t, required this.selected, required this.onTap});
+
+  final AppText t;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    return Material(
+      color: c.accentSubtle,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(PangolinRadius.xl),
+        side: BorderSide(color: selected ? c.accent : c.accentBorder, width: 1.5),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 15),
+          child: Row(
+            children: [
+              Container(
+                width: 42,
+                height: 42,
+                decoration: BoxDecoration(
+                  gradient: const LinearGradient(
+                    begin: Alignment.topLeft,
+                    end: Alignment.bottomRight,
+                    colors: [PangolinColors.clay500, PangolinColors.clay700],
+                  ),
+                  borderRadius: BorderRadius.circular(PangolinRadius.md),
+                ),
+                child: const Icon(PangolinIcons.zap, size: 21, color: PangolinColors.white),
+              ),
+              const SizedBox(width: 13),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(children: [
+                      Flexible(
+                        child: Text(t.smartSelect,
+                            style: PangolinText.body
+                                .copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 15.5)),
+                      ),
+                      const SizedBox(width: 8),
+                      Container(
+                        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+                        decoration: BoxDecoration(color: c.accent, borderRadius: BorderRadius.circular(PangolinRadius.full)),
+                        child: Text(t.recommended,
+                            style: PangolinText.caption.copyWith(
+                                color: c.fgOnAccent, fontWeight: FontWeight.w700, fontSize: 10)),
+                      ),
+                    ]),
+                    const SizedBox(height: 3),
+                    Text(t.smartSub,
+                        style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w400, height: 1.5)),
+                  ],
+                ),
+              ),
+              if (selected) ...[
+                const SizedBox(width: 8),
+                Icon(PangolinIcons.check, size: 19, color: c.accent),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

client/lib/widgets/tab_swipe.dart

@@ -0,0 +1,110 @@
+// tab_swipe.dart — Tab 左右滑动切换的手势仲裁组件
+//
+// 约定(design/CLAUDE.md §5):横向位移 >60px 且明显大于纵向时切换 Tab;
+// 子页内的纵向滚动区域不响应该手势。
+//
+// 仲裁机制:本组件只接 HorizontalDrag。纵向滚动由内部 ListView 的
+// VerticalDragGestureRecognizer 在手势竞技场中胜出,本组件的横向识别器
+// 自然落败——因此「滚动列表/纵向拖拽」永远不会误触发 Tab 切换,无需手写
+// dx/dy 比例判断。横向为主的拖拽才会进入本组件并按阈值判定方向。
+import 'package:flutter/material.dart';
+
+/// 方向感知:1 = 向后(进入右侧 Tab),-1 = 向前(进入左侧 Tab)。
+typedef SwipeCallback = void Function();
+
+class HorizontalSwipeArea extends StatefulWidget {
+  const HorizontalSwipeArea({
+    super.key,
+    required this.child,
+    this.onSwipeLeft,
+    this.onSwipeRight,
+    this.threshold = 60,
+  });
+
+  /// 包裹的内容(通常是当前 Tab 页)。
+  final Widget child;
+
+  /// 向左滑(手指从右往左)→ 切到下一个 Tab。
+  final VoidCallback? onSwipeLeft;
+
+  /// 向右滑(手指从左往右)→ 切到上一个 Tab。
+  final VoidCallback? onSwipeRight;
+
+  /// 触发阈值(逻辑像素)。
+  final double threshold;
+
+  @override
+  State<HorizontalSwipeArea> createState() => _HorizontalSwipeAreaState();
+}
+
+class _HorizontalSwipeAreaState extends State<HorizontalSwipeArea> {
+  double _dx = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      // 仅接横向拖拽:纵向滚动交给内部可滚动组件(竞技场仲裁)。
+      onHorizontalDragStart: (_) => _dx = 0,
+      onHorizontalDragUpdate: (d) => _dx += d.delta.dx,
+      onHorizontalDragEnd: (details) {
+        final v = details.primaryVelocity ?? 0;
+        // 位移过阈值,或带明显速度的快划。
+        final left = _dx <= -widget.threshold || v < -300;
+        final right = _dx >= widget.threshold || v > 300;
+        if (left) {
+          widget.onSwipeLeft?.call();
+        } else if (right) {
+          widget.onSwipeRight?.call();
+        }
+        _dx = 0;
+      },
+      child: widget.child,
+    );
+  }
+}
+
+/// 方向感知的页面切换动画:200ms 轻移淡入(对齐 React pg-in-l / pg-in-r)。
+class DirectionalTabSwitcher extends StatelessWidget {
+  const DirectionalTabSwitcher({super.key, required this.index, required this.direction, required this.child});
+
+  /// 当前 Tab 索引(作为切换 key)。
+  final int index;
+
+  /// 进入方向:1 从右进(下一个),-1 从左进(上一个),0 无动画。
+  final int direction;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 200),
+      switchInCurve: PangolinMotionEaseOut.curve,
+      transitionBuilder: (child, animation) {
+        // 仅对「进入」的新页做方向位移 + 淡入;旧页直接淡出,避免回弹。
+        final isIncoming = child.key == ValueKey<int>(index);
+        if (direction == 0 || !isIncoming) {
+          return FadeTransition(opacity: animation, child: child);
+        }
+        final begin = Offset(direction > 0 ? 0.06 : -0.06, 0);
+        return FadeTransition(
+          opacity: animation,
+          child: SlideTransition(
+            position: Tween<Offset>(begin: begin, end: Offset.zero).animate(animation),
+            child: child,
+          ),
+        );
+      },
+      layoutBuilder: (currentChild, previousChildren) => Stack(
+        alignment: Alignment.topCenter,
+        children: [...previousChildren, if (currentChild != null) currentChild],
+      ),
+      child: KeyedSubtree(key: ValueKey<int>(index), child: child),
+    );
+  }
+}
+
+/// 暴露 easeOut 曲线(避免在本文件 import 主题造成循环)。
+class PangolinMotionEaseOut {
+  PangolinMotionEaseOut._();
+  static const Curve curve = Cubic(0.22, 1, 0.36, 1);
+}