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
2026-06-13 14:32:36 +08:00
parent 787151245e
commit f97ae8186b
40 changed files with 3369 additions and 567 deletions
+55
View File
@@ -0,0 +1,55 @@
// cards_test.dart — 额度卡 / 智能选择推荐卡 行为
import 'package:flutter_test/flutter_test.dart';
import 'package:pangolin_vpn/l10n/strings_zh.dart';
import 'package:pangolin_vpn/state/quota_provider.dart';
import 'package:pangolin_vpn/widgets/pangolin_icons.dart';
import 'package:pangolin_vpn/widgets/quota_card.dart';
import 'package:pangolin_vpn/widgets/smart_select_card.dart';
import '../helpers/harness.dart';
void main() {
setUpAll(disableGoogleFontsFetching);
const t = StringsZh();
testWidgets('额度卡:未解锁显示看广告按钮,点击回调', (tester) async {
var watched = 0;
await tester.pumpWidget(wrapThemed(
QuotaCard(quota: const FreeQuotaState(), t: t, onWatchAd: () => watched++),
));
await tester.pump();
expect(find.text(t.watchAd), findsOneWidget);
await tester.tap(find.text(t.watchAd));
expect(watched, 1);
});
testWidgets('额度卡:已解锁显示已解锁文案', (tester) async {
await tester.pumpWidget(wrapThemed(
QuotaCard(quota: const FreeQuotaState(adUnlocked: true), t: t, onWatchAd: () {}),
));
await tester.pump();
expect(find.text(t.adUnlocked), findsOneWidget);
expect(find.byIcon(PangolinIcons.checkCircle), findsOneWidget);
});
testWidgets('推荐卡:展示推荐胶囊与文案,选中显示对勾', (tester) async {
await tester.pumpWidget(wrapThemed(
SmartSelectCard(t: t, selected: true, onTap: () {}),
));
await tester.pump();
expect(find.text(t.smartSelect), findsOneWidget);
expect(find.text(t.recommended), findsOneWidget);
expect(find.text(t.smartSub), findsOneWidget);
expect(find.byIcon(PangolinIcons.check), findsOneWidget);
});
testWidgets('推荐卡:点击回调', (tester) async {
var picked = 0;
await tester.pumpWidget(wrapThemed(
SmartSelectCard(t: t, selected: false, onTap: () => picked++),
));
await tester.pump();
await tester.tap(find.text(t.smartSelect));
expect(picked, 1);
});
}
@@ -0,0 +1,51 @@
// connect_button_test.dart — 连接键三态展示与回调
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:pangolin_vpn/state/connection_provider.dart';
import 'package:pangolin_vpn/widgets/connect_button.dart';
import 'package:pangolin_vpn/widgets/pangolin_icons.dart';
import '../helpers/harness.dart';
void main() {
setUpAll(disableGoogleFontsFetching);
Widget button(VpnPhase phase, {Duration elapsed = Duration.zero, VoidCallback? onTap}) => wrapThemed(
ConnectButton(
phase: phase,
elapsed: elapsed,
offLabel: '点击连接',
secureLabel: '已加密',
onTap: onTap ?? () {},
),
);
testWidgets('off 态:power 图标 + 点击连接', (tester) async {
await tester.pumpWidget(button(VpnPhase.off));
await tester.pump();
expect(find.byIcon(PangolinIcons.power), findsOneWidget);
expect(find.text('点击连接'), findsOneWidget);
});
testWidgets('connecting 态:loader 图标', (tester) async {
await tester.pumpWidget(button(VpnPhase.connecting));
await tester.pump(const Duration(milliseconds: 100));
expect(find.byIcon(PangolinIcons.loader), findsOneWidget);
});
testWidgets('on 态:盾勾 + 计时 + 已加密', (tester) async {
await tester.pumpWidget(button(VpnPhase.on, elapsed: const Duration(seconds: 5)));
await tester.pump();
expect(find.byIcon(PangolinIcons.shieldCheck), findsOneWidget);
expect(find.text('00:00:05'), findsOneWidget);
expect(find.text('已加密'), findsOneWidget);
});
testWidgets('点击触发回调', (tester) async {
var tapped = 0;
await tester.pumpWidget(button(VpnPhase.off, onTap: () => tapped++));
await tester.pump();
await tester.tap(find.byType(ConnectButton));
expect(tapped, 1);
});
}