feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)

design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-11 23:57:57 +08:00
parent 3ae96ef229
commit a642bf16a2
85 changed files with 19946 additions and 0 deletions
@@ -0,0 +1,147 @@
+// connect_button.dart — 核心连接键(三态:off / connecting / on)
+// 对应 React UI Kit 的 ConnectScreen 大圆按钮:暖底轨道环 → 旋转弧 → 满环。
+import 'package:flutter/material.dart';
+import '../pangolin_theme.dart';
+import 'pangolin_icons.dart';
+
+enum VpnStatus { off, connecting, on }
+
+class ConnectButton extends StatefulWidget {
+  const ConnectButton({
+    super.key,
+    required this.status,
+    required this.onTap,
+    this.elapsed = Duration.zero,
+    this.size = 208,
+  });
+
+  final VpnStatus status;
+  final VoidCallback onTap;
+  final Duration elapsed;
+  final double size;
+
+  @override
+  State<ConnectButton> createState() => _ConnectButtonState();
+}
+
+class _ConnectButtonState extends State<ConnectButton> with SingleTickerProviderStateMixin {
+  late final AnimationController _spin =
+      AnimationController(vsync: this, duration: const Duration(milliseconds: 1400))..repeat();
+
+  @override
+  void dispose() {
+    _spin.dispose();
+    super.dispose();
+  }
+
+  String _fmt(Duration d) {
+    String two(int n) => n.toString().padLeft(2, '0');
+    return '${two(d.inHours)}:${two(d.inMinutes % 60)}:${two(d.inSeconds % 60)}';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final c = context.pangolin;
+    final s = widget.status;
+
+    final Color fill = switch (s) {
+      VpnStatus.off => c.bgSubtle,
+      VpnStatus.connecting => c.accent,
+      VpnStatus.on => c.success,
+    };
+    final Color fg = s == VpnStatus.off ? c.accent : PangolinColors.white;
+    final IconData icon = switch (s) {
+      VpnStatus.off => PangolinIcons.power,
+      VpnStatus.connecting => PangolinIcons.loader,
+      VpnStatus.on => PangolinIcons.shieldCheck,
+    };
+
+    final List<BoxShadow> glow = s == VpnStatus.off
+        ? PangolinShadow.md
+        : [
+            BoxShadow(
+              color: (s == VpnStatus.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: [
+            // track ring
+            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,
+                  ),
+                ),
+              ),
+            ),
+            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)),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _RingPainter extends CustomPainter {
+  _RingPainter({required this.status, required this.track, required this.progress, required this.turns});
+  final VpnStatus status;
+  final Color track;
+  final Color progress;
+  final double turns;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final center = size.center(Offset.zero);
+    final radius = size.width / 2 - 8;
+    final rect = Rect.fromCircle(center: center, radius: radius);
+
+    if (status == VpnStatus.off) {
+      // dotted track
+      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);
+    }
+  }
+
+  @override
+  bool shouldRepaint(_RingPainter old) => old.turns != turns || old.status != status;
+}