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>
This commit is contained in:
wangjia
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user