f97ae8186b
对照 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>
106 lines
4.1 KiB
Dart
106 lines
4.1 KiB
Dart
// onboarding_screen.dart — 首次引导页(3 屏可滑动,文案经 AppText 单显)
|
|
import 'package:flutter/material.dart';
|
|
import '../l10n/app_text.dart';
|
|
import '../pangolin_theme.dart';
|
|
import 'pangolin_icons.dart';
|
|
import 'pangolin_button.dart';
|
|
|
|
class OnboardingStep {
|
|
const OnboardingStep({required this.icon, required this.title, required this.body, required this.cta, this.tint, this.tintBg});
|
|
final IconData icon;
|
|
final String title, body, cta;
|
|
final Color? tint, tintBg;
|
|
}
|
|
|
|
class OnboardingScreen extends StatefulWidget {
|
|
const OnboardingScreen({super.key, required this.onDone, required this.t, this.steps});
|
|
final VoidCallback onDone;
|
|
final AppText t;
|
|
final List<OnboardingStep>? steps;
|
|
|
|
@override
|
|
State<OnboardingScreen> createState() => _OnboardingScreenState();
|
|
}
|
|
|
|
class _OnboardingScreenState extends State<OnboardingScreen> {
|
|
int _i = 0;
|
|
final _pager = PageController();
|
|
|
|
List<OnboardingStep> _defaults(PangolinScheme c) {
|
|
final t = widget.t;
|
|
return [
|
|
OnboardingStep(icon: PangolinIcons.globe, title: t.ob1Title, body: t.ob1Sub, cta: t.obNext),
|
|
OnboardingStep(icon: PangolinIcons.shield, title: t.ob2Title, body: t.ob2Sub, cta: t.obAllow),
|
|
OnboardingStep(icon: PangolinIcons.shieldCheck, title: t.ob3Title, body: t.ob3Sub, cta: t.obStart,
|
|
tint: c.success, tintBg: c.successSubtle),
|
|
];
|
|
}
|
|
|
|
@override
|
|
void dispose() { _pager.dispose(); super.dispose(); }
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final c = context.pangolin;
|
|
final steps = widget.steps ?? _defaults(c);
|
|
final last = _i == steps.length - 1;
|
|
|
|
return Scaffold(
|
|
backgroundColor: c.bg,
|
|
body: SafeArea(
|
|
child: Column(children: [
|
|
Align(
|
|
alignment: Alignment.centerRight,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(8),
|
|
child: TextButton(onPressed: widget.onDone, child: Text(widget.t.obSkip, style: PangolinText.sm.copyWith(color: c.fg3, fontWeight: FontWeight.w600))),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: PageView.builder(
|
|
controller: _pager,
|
|
itemCount: steps.length,
|
|
onPageChanged: (v) => setState(() => _i = v),
|
|
itemBuilder: (_, idx) {
|
|
final s = steps[idx];
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 32),
|
|
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
|
|
Container(
|
|
width: 120, height: 120,
|
|
decoration: BoxDecoration(color: s.tintBg ?? c.accentSubtle, shape: BoxShape.circle),
|
|
child: Icon(s.icon, size: 52, color: s.tint ?? c.accent),
|
|
),
|
|
const SizedBox(height: 28),
|
|
Text(s.title, textAlign: TextAlign.center, style: PangolinText.h1.copyWith(color: c.fg1, fontSize: 26)),
|
|
const SizedBox(height: 12),
|
|
Text(s.body, textAlign: TextAlign.center, style: PangolinText.body.copyWith(color: c.fg2, height: 1.6)),
|
|
]),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
Row(mainAxisAlignment: MainAxisAlignment.center, children: List.generate(steps.length, (k) {
|
|
final on = k == _i;
|
|
return AnimatedContainer(
|
|
duration: PangolinMotion.base, curve: PangolinMotion.easeOut,
|
|
width: on ? 22 : 7, height: 7, margin: const EdgeInsets.symmetric(horizontal: 4),
|
|
decoration: BoxDecoration(color: on ? c.accent : c.borderStrong, borderRadius: BorderRadius.circular(PangolinRadius.full)),
|
|
);
|
|
})),
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(28, 22, 28, 26),
|
|
child: PangolinButton(
|
|
label: steps[_i].cta, expand: true,
|
|
onPressed: () {
|
|
if (last) { widget.onDone(); }
|
|
else { _pager.nextPage(duration: PangolinMotion.base, curve: PangolinMotion.easeOut); }
|
|
},
|
|
),
|
|
),
|
|
]),
|
|
),
|
|
);
|
|
}
|
|
}
|