merge: Flutter 逐屏还原 + iPad 断点 [tsk_gpPXi-icyeOE]

# Conflicts:
#	client/lib/widgets/connect_button.dart
#	client/lib/widgets/home_shell.dart
#	todo/todo.html
#	todo/todo.json

client/lib/widgets/connect_button.dart

@@ -7,18 +7,41 @@ import 'pangolin_icons.dart';
 
 // 重导出便于其他 widget 从 connect_button.dart 引入（向后兼容）
 export '../bridge/vpn_bridge.dart' show VpnStatus;
+// 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 '../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;
 
@@ -44,70 +67,97 @@ 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,
       VpnStatus.error => c.danger,
+      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,
       VpnStatus.error => PangolinIcons.power,
+      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)),
+                  ],
+                ),
+            ],
+          ),
         ),
       ),
     );
@@ -115,8 +165,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;
@@ -127,23 +177,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;
 }