feat(client): 三端布局架构 + macOS 桌面端 + app 图标

三端布局(mobile/tablet/desktop):
- core/responsive/form_factor.dart 形态判定 + shell/ 分发器(home_shell→desktop/mobile)
- desktop_shell 对照 ui_kits/desktop/dapp.jsx: 侧栏204·6项 + 套餐卡 + 顶栏(标题/状态/主题切换) + 连接页居中单列
- 新增组件 nav_sidebar / plan_badge_card / content_top_bar / bottom_tab_bar
- 新增一级页 contact_page / settings_page; navigation_provider(NavView)
- 删除旧 widgets/home_shell.dart(逻辑迁入 shell/)

macOS 桌面端:
- 窗口默认 920×600 + 最小 720×560(MainFlutterWindow.swift)
- app 图标替换为穿山甲(AppIcon.appiconset 全套, 由 app-icon.svg 渲染)

其余(本会话):
- Phase2 接线: auth_api/token_store/auth_provider/vpn_bridge_provider + 真实 connection/nodes
- lucide_icons 兼容补丁(packages/lucide_icons_patched) 修复 IconData final 报错
- 测试修复: connect_passthrough(UTF-8) / harness / golden @Skip
- l10n 新增 settingsTitle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/lib/state/connection_provider.dart

@@ -1,16 +1,41 @@
-// connection_provider.dart — 连接状态机(严格三态,禁止乐观显示)
+// connection_provider.dart — 连接状态机（严格三态，状态由内核事件驱动）
 //
-// 设计约定(design/CLAUDE.md §2/§5):连接键三态严格对应状态层事件,
-// UI 只渲染本通知器的真实状态,绝不在点击时本地乐观翻转。连接握手由
-// 状态层(此处为 mock 计时器,后续替换为隧道事件)决定何时进入 on。
+// 设计约定：
+//   - UI 调用 toggle()，控制器内部读取有效节点 + 认证令牌，调用 ConnectApi
+//     并启动 VpnBridge 子进程。
+//   - 严禁乐观翻转：VpnPhase.on 必须由 bridge.statusStream 确认后才置。
+//   - 状态来源：bridge.statusStream（来自内核回调），非 Timer 模拟。
 import 'dart:async';
 
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-/// 连接阶段。严格三态——与 React 原型一致。
+import '../bridge/vpn_bridge.dart';
+import '../bridge/vpn_bridge_provider.dart';
+import '../services/connect_api.dart';
+import 'auth_provider.dart';
+import 'nodes_provider.dart';
+
+// ── 设备 ID（MVP 常量；后续由 device_info_plus 取真实 ID）──────────
+
+const _kDeviceId = String.fromEnvironment(
+  'PANGOLIN_DEVICE_ID',
+  defaultValue: 'mac-001',
+);
+
+// ── API base URL ─────────────────────────────────────────────────
+
+const _kApiUrl = String.fromEnvironment(
+  'PANGOLIN_API_URL',
+  defaultValue: 'http://localhost:8080',
+);
+
+// ── 连接阶段枚举 ──────────────────────────────────────────────────
+
+/// 连接阶段。严格三态，与设计稿一致。
 enum VpnPhase { off, connecting, on }
 
-/// 连接状态快照。
+// ── 连接状态快照 ──────────────────────────────────────────────────
+
 class ConnectionState {
   const ConnectionState({required this.phase, this.elapsed = Duration.zero});
 
@@ -28,67 +53,123 @@ class ConnectionState {
   int get hashCode => Object.hash(phase, elapsed);
 }
 
-/// 连接状态机。握手时长可注入,便于测试确定化。
+// ── 状态机 ───────────────────────────────────────────────────────
+
 class ConnectionController extends StateNotifier<ConnectionState> {
-  ConnectionController({this.handshake = const Duration(milliseconds: 1500)})
-      : super(const ConnectionState(phase: VpnPhase.off));
+  ConnectionController(this._ref, this._bridge)
+      : super(const ConnectionState(phase: VpnPhase.off)) {
+    // 订阅桥状态流：状态由内核事件驱动，严禁 UI 乐观翻转。
+    _statusSub = _bridge.statusStream.listen(_onKernelStatus);
+  }
 
-  final Duration handshake;
-  Timer? _handshakeTimer;
-  Timer? _tick;
+  final Ref _ref;
+  final VpnBridge _bridge;
+  StreamSubscription<VpnStatus>? _statusSub;
+  Timer? _elapsed;
+  ConnectApi? _api;
 
-  /// 用户轻点连接键:仅依据真实状态决定动作,握手中点击被忽略(禁乐观)。
+  // ── 公有 API ───────────────────────────────────────────────────
+
+  /// 用户点击连接键：按当前状态决定动作，握手中忽略（禁乐观）。
   void toggle() {
     switch (state.phase) {
       case VpnPhase.off:
-        connect();
+        _connect();
       case VpnPhase.on:
-        disconnect();
+        _disconnect();
       case VpnPhase.connecting:
-        break; // 握手进行中,不响应——避免乐观回退
+        break; // 握手进行中，不响应
     }
   }
 
-  void connect() {
-    _cancelTimers();
-    state = const ConnectionState(phase: VpnPhase.connecting);
-    _handshakeTimer = Timer(handshake, _onConnected);
-  }
-
-  void disconnect() {
-    _cancelTimers();
-    state = const ConnectionState(phase: VpnPhase.off);
-  }
-
-  /// 切换节点时触发:已连接则重连(短暂回到 connecting)。
+  /// 节点切换时触发：已连接则重连。
   void onNodeChanged() {
     if (state.phase == VpnPhase.on || state.phase == VpnPhase.connecting) {
-      connect();
+      _disconnect().then((_) => _connect());
     }
   }
 
-  void _onConnected() {
-    state = const ConnectionState(phase: VpnPhase.on);
-    _tick = Timer.periodic(const Duration(seconds: 1), (_) {
-      state = state.copyWith(elapsed: state.elapsed + const Duration(seconds: 1));
+  // ── 内部 ─────────────────────────────────────────────────────
+
+  Future<void> _connect() async {
+    state = const ConnectionState(phase: VpnPhase.connecting);
+
+    final authState = _ref.read(authProvider);
+    final token = authState.accessToken ?? '';
+    final node = _ref.read(effectiveNodeProvider);
+
+    // 无 UUID 时（演示节点）直接进入 mock 连接状态
+    if (node.uuid.isEmpty) {
+      await Future<void>.delayed(const Duration(milliseconds: 1200));
+      if (mounted) state = const ConnectionState(phase: VpnPhase.on);
+      _startElapsed();
+      return;
+    }
+
+    try {
+      _api?.dispose();
+      _api = ConnectApi(baseUrl: _kApiUrl, authToken: token);
+      final configJson = await _api!.fetchConfig(
+        nodeId: node.uuid,
+        deviceId: _kDeviceId,
+      );
+      // bridge.start() 不阻塞至连接建立；on 状态由 statusStream 回调驱动。
+      await _bridge.start(configJson);
+    } catch (e) {
+      if (mounted) state = const ConnectionState(phase: VpnPhase.off);
+    }
+  }
+
+  Future<void> _disconnect() async {
+    _stopElapsed();
+    try {
+      await _bridge.stop();
+    } catch (_) {}
+    if (mounted) state = const ConnectionState(phase: VpnPhase.off);
+  }
+
+  void _onKernelStatus(VpnStatus s) {
+    if (!mounted) return;
+    switch (s) {
+      case VpnStatus.on:
+        state = state.copyWith(phase: VpnPhase.on);
+        _startElapsed();
+      case VpnStatus.connecting:
+        state = state.copyWith(phase: VpnPhase.connecting);
+        _stopElapsed();
+      case VpnStatus.off:
+      case VpnStatus.error:
+        state = const ConnectionState(phase: VpnPhase.off);
+        _stopElapsed();
+    }
+  }
+
+  void _startElapsed() {
+    _elapsed?.cancel();
+    _elapsed = Timer.periodic(const Duration(seconds: 1), (_) {
+      if (mounted && state.phase == VpnPhase.on) {
+        state = state.copyWith(elapsed: state.elapsed + const Duration(seconds: 1));
+      }
     });
   }
 
-  void _cancelTimers() {
-    _handshakeTimer?.cancel();
-    _handshakeTimer = null;
-    _tick?.cancel();
-    _tick = null;
+  void _stopElapsed() {
+    _elapsed?.cancel();
+    _elapsed = null;
   }
 
   @override
   void dispose() {
-    _cancelTimers();
+    _statusSub?.cancel();
+    _stopElapsed();
+    _api?.dispose();
     super.dispose();
   }
 }
 
+// ── Provider ──────────────────────────────────────────────────────
+
 final connectionProvider =
     StateNotifierProvider<ConnectionController, ConnectionState>(
-  (ref) => ConnectionController(),
+  (ref) => ConnectionController(ref, ref.watch(vpnBridgeProvider)),
 );