wangjia/pangolin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 22 Wiki Activity

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

Browse Source 
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-11 23:57:57 +08:00
parent 3ae96ef229
commit a642bf16a2
85 changed files with 19946 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/flutter/widgets/account_screens.dart
+296
View File
@@ -0,0 +1,296 @@
// account_screens.dart — 账户子页(套餐选择 / 设备管理 / 兑换 & 购买 / 联系我们)
// 对应 React UI Kit 的 PlansScreen / DAccountView 设备段 / RedeemScreen / ContactScreen。
// 均为带返回栏的独立页;HomeShell 账户页的行点击后 push 这些页即可。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
import 'pangolin_icons.dart';
import 'plan_card.dart';
import 'pangolin_button.dart';
/// 通用：带返回箭头的子页骨架
class _SubScaffold extends StatelessWidget {
const _SubScaffold({required this.title, required this.child, this.onBack});
final String title; final Widget child; final VoidCallback? onBack;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return Scaffold(
backgroundColor: c.bg,
body: SafeArea(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Padding(
padding: const EdgeInsets.fromLTRB(8, 6, 16, 10),
child: Row(children: [
IconButton(onPressed: onBack ?? () => Navigator.of(context).maybePop(), icon: Icon(PangolinIcons.arrowLeft, size: 22, color: c.fg1)),
Text(title, style: PangolinText.h3.copyWith(color: c.fg1, fontFamily: PangolinFonts.display, fontWeight: FontWeight.w700)),
]),
),
Expanded(child: child),
])),
);
}
}
/// ── 套餐选择 ──（点「续费 / 升级」进入）
class PlansScreen extends StatelessWidget {
const PlansScreen({super.key, this.zh = true, this.onChoose, this.onBack});
final bool zh; final ValueChanged<String>? onChoose; final VoidCallback? onBack;
@override
Widget build(BuildContext context) {
final plans = [
(
id: 'free', name: zh ? '免费版' : 'Free', price: '¥0', cta: zh ? '当前' : 'Current', featured: false, current: true, pop: null,
feats: zh ? ['3 个基础节点', '每日 1GB 流量', '1 台设备'] : ['3 basic locations', '1GB / day', '1 device'],
),
(
id: 'pro', name: zh ? '专业版' : 'Pro', price: '¥25', cta: zh ? '立即升级' : 'Upgrade', featured: true, current: false, pop: zh ? '最受欢迎' : 'Popular',
feats: zh ? ['80+ 全球节点', '无限流量 · 极速', '5 台设备同时在线', '流媒体优化'] : ['80+ locations', 'Unlimited · fast', '5 devices', 'Streaming optimized'],
),
(
id: 'team', name: zh ? '团队版' : 'Team', price: '¥99', cta: zh ? '选择' : 'Choose', featured: false, current: false, pop: null,
feats: zh ? ['Pro 全部功能', '10 个成员席位', '集中计费与管理', '优先客服'] : ['Everything in Pro', '10 seats', 'Central billing', 'Priority support'],
),
];
return _SubScaffold(
title: zh ? '选择套餐' : 'Choose plan',
onBack: onBack,
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 14, 20, 24),
children: [
for (final p in plans) Padding(
padding: EdgeInsets.only(bottom: 14, top: p.pop != null ? 12 : 0),
child: PlanCard(
name: p.name, price: p.price, period: zh ? '/月' : '/mo',
features: p.feats, ctaLabel: p.cta, featured: p.featured, isCurrent: p.current,
popularLabel: p.pop, onPressed: () => onChoose?.call(p.id),
),
),
],
),
);
}
}
/// ── 设备管理 ──
class DeviceItem {
const DeviceItem({required this.id, required this.icon, required this.name, required this.os, required this.active, this.me = false});
final String id, name, os, active; final IconData icon; final bool me;
}
class DevicesScreen extends StatefulWidget {
const DevicesScreen({super.key, this.zh = true, this.onBack});
final bool zh; final VoidCallback? onBack;
@override
State<DevicesScreen> createState() => _DevicesScreenState();
}
class _DevicesScreenState extends State<DevicesScreen> {
late List<DeviceItem> _devices = [
DeviceItem(id: '1', icon: PangolinIcons.laptop, name: 'MacBook Pro', os: 'macOS 26', active: widget.zh ? '当前设备' : 'This device', me: true),
DeviceItem(id: '2', icon: PangolinIcons.smartphone, name: 'iPhone 17', os: 'iOS 26', active: '2 min'),
DeviceItem(id: '3', icon: PangolinIcons.monitorSmartphone, name: 'iPad Air', os: 'iPadOS 26', active: widget.zh ? '3 小时前' : '3h ago'),
];
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return _SubScaffold(
title: widget.zh ? '我的设备' : 'My devices',
onBack: widget.onBack,
child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
Text(widget.zh ? 'PRO 套餐最多 5 台设备同时在线' : 'Up to 5 devices on PRO', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
const SizedBox(height: 12),
Container(
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
clipBehavior: Clip.antiAlias,
child: Column(children: [
for (var i = 0; i < _devices.length; i++) _row(c, _devices[i], i < _devices.length - 1),
]),
),
]),
);
}
Widget _row(PangolinScheme c, DeviceItem d, bool divider) {
return Container(
decoration: BoxDecoration(border: divider ? Border(bottom: BorderSide(color: c.border)) : null),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: Row(children: [
Container(width: 38, height: 38, decoration: BoxDecoration(color: c.accentSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
child: Icon(d.icon, size: 19, color: c.accent)),
const SizedBox(width: 12),
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(children: [
Flexible(child: Text(d.name, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 14.5))),
if (d.me) Container(margin: const EdgeInsets.only(left: 7), padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 1),
decoration: BoxDecoration(color: c.successSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
child: Text(d.active, style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w600, fontSize: 10.5))),
]),
const SizedBox(height: 1),
Text(d.me ? d.os : '${d.os} · ${d.active}', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
])),
if (!d.me) OutlinedButton(
onPressed: () => setState(() => _devices.removeWhere((x) => x.id == d.id)),
style: OutlinedButton.styleFrom(foregroundColor: c.fg2, side: BorderSide(color: c.borderStrong, width: 1.5), shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7), minimumSize: Size.zero),
child: Text(widget.zh ? '移除' : 'Remove', style: PangolinText.caption.copyWith(fontWeight: FontWeight.w600)),
),
]),
);
}
}
/// ── 兑换 & 购买 ──（App 内无支付,走兑换码 + 外部渠道）
class RedeemScreen extends StatefulWidget {
const RedeemScreen({super.key, this.zh = true, this.onBack});
final bool zh; final VoidCallback? onBack;
@override
State<RedeemScreen> createState() => _RedeemScreenState();
}
class _RedeemScreenState extends State<RedeemScreen> {
final _code = TextEditingController();
bool _ok = false;
@override
void dispose() { _code.dispose(); super.dispose(); }
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final zh = widget.zh;
final channels = [
(icon: PangolinIcons.shoppingBag, name: zh ? '自助发卡商店' : 'Self-serve store', sub: 'shop.pangolin.vpn', accent: true),
(icon: PangolinIcons.send, name: 'Telegram', sub: '@PangolinVPN_bot', accent: false),
(icon: PangolinIcons.messageCircle, name: 'LINE', sub: '@pangolinvpn', accent: false),
(icon: PangolinIcons.mail, name: zh ? '邮箱客服' : 'Email support', sub: 'buy@pangolin.vpn', accent: false),
];
return _SubScaffold(
title: zh ? '兑换 & 购买' : 'Redeem & buy',
onBack: widget.onBack,
child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
// redeem code
Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.xl), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(zh ? '兑换激活码' : 'Redeem a code', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
const SizedBox(height: 12),
if (_ok) Row(children: [
Icon(PangolinIcons.checkCircle, size: 20, color: c.success), const SizedBox(width: 9),
Text(zh ? '激活成功 · PRO 已开通' : 'Activated · PRO unlocked', style: PangolinText.body.copyWith(color: c.success, fontWeight: FontWeight.w600)),
]) else Row(children: [
Expanded(child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14),
decoration: BoxDecoration(color: c.bg, borderRadius: BorderRadius.circular(PangolinRadius.md), border: Border.all(color: c.borderStrong, width: 1.5)),
child: TextField(controller: _code,
textCapitalization: TextCapitalization.characters,
style: PangolinText.mono.copyWith(color: c.fg1, letterSpacing: 1.5),
decoration: InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: const EdgeInsets.symmetric(vertical: 13),
hintText: zh ? '输入激活码' : 'Enter code', hintStyle: PangolinText.sm.copyWith(color: c.fg3)),
onChanged: (_) => setState(() {})),
)),
const SizedBox(width: 10),
PangolinButton(label: zh ? '激活' : 'Redeem', onPressed: _code.text.trim().length >= 4 ? () => setState(() => _ok = true) : null),
]),
]),
),
const SizedBox(height: 22),
Text(zh ? '购买渠道' : 'Where to buy', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 14.5)),
const SizedBox(height: 6),
Text(zh ? 'App 内不支持直接支付。请通过以下渠道获取激活码:' : 'In-app payment is unavailable. Get a code via:',
style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400, height: 1.5)),
const SizedBox(height: 14),
for (final ch in channels) Padding(padding: const EdgeInsets.only(bottom: 10), child: _channel(c, ch.icon, ch.name, ch.sub, ch.accent)),
]),
);
}
Widget _channel(PangolinScheme c, IconData icon, String name, String sub, bool accent) {
return InkWell(
borderRadius: BorderRadius.circular(PangolinRadius.lg),
onTap: () {/* launchUrl(...) */},
child: Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: accent ? c.accentSubtle : c.surface,
borderRadius: BorderRadius.circular(PangolinRadius.lg),
border: Border.all(color: accent ? c.accentBorder : c.border),
boxShadow: PangolinShadow.sm,
),
child: Row(children: [
Container(width: 40, height: 40, decoration: BoxDecoration(color: accent ? c.accent : c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
child: Icon(icon, size: 20, color: accent ? PangolinColors.white : c.accent)),
const SizedBox(width: 13),
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(name, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
Text(sub, style: PangolinText.caption.copyWith(color: c.fg3, fontFamily: PangolinFonts.mono, fontWeight: FontWeight.w400)),
])),
Icon(PangolinIcons.externalLink, size: 16, color: c.fg3),
]),
),
);
}
}
/// ── 联系我们 ──
class ContactScreen extends StatelessWidget {
const ContactScreen({super.key, this.zh = true, this.onBack});
final bool zh; final VoidCallback? onBack;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final channels = [
(icon: PangolinIcons.send, name: 'Telegram', sub: '@PangolinVPN_bot', accent: true),
(icon: PangolinIcons.messageCircle, name: 'LINE', sub: '@pangolinvpn', accent: false),
(icon: PangolinIcons.mail, name: zh ? '邮箱客服' : 'Email support', sub: 'support@pangolin.vpn', accent: false),
(icon: PangolinIcons.shoppingBag, name: zh ? '自助发卡商店' : 'Self-serve store', sub: 'shop.pangolin.vpn', accent: false),
];
return _SubScaffold(
title: zh ? '联系我们' : 'Contact us',
onBack: onBack,
child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
Text(zh ? '遇到问题?通过以下任一渠道联系我们,通常数分钟内回复。' : 'Need help? Reach us via any channel below — usually replies in minutes.',
style: PangolinText.sm.copyWith(color: c.fg2, height: 1.6)),
const SizedBox(height: 16),
for (final ch in channels) Padding(padding: const EdgeInsets.only(bottom: 10), child: _contact(c, ch.icon, ch.name, ch.sub, ch.accent)),
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(zh ? '服务时间' : 'Support hours', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
const SizedBox(height: 5),
Text(zh ? '每日 9:00 – 24:00 (GMT+8)' : 'Daily 9:00 – 24:00 (GMT+8)', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontFamily: PangolinFonts.mono)),
]),
),
]),
);
}
Widget _contact(PangolinScheme c, IconData icon, String name, String sub, bool accent) {
return InkWell(
borderRadius: BorderRadius.circular(PangolinRadius.lg),
onTap: () {/* launchUrl(...) */},
child: Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: accent ? c.accentSubtle : c.surface,
borderRadius: BorderRadius.circular(PangolinRadius.lg),
border: Border.all(color: accent ? c.accentBorder : c.border),
boxShadow: PangolinShadow.sm,
),
child: Row(children: [
Container(width: 40, height: 40, decoration: BoxDecoration(color: accent ? c.accent : c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
child: Icon(icon, size: 20, color: accent ? PangolinColors.white : c.accent)),
const SizedBox(width: 13),
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(name, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
Text(sub, style: PangolinText.caption.copyWith(color: c.fg3, fontFamily: PangolinFonts.mono, fontWeight: FontWeight.w400)),
])),
Icon(PangolinIcons.externalLink, size: 16, color: c.fg3),
]),
),
);
}
}
design/flutter/widgets/auth_screen.dart
+159
View File
@@ -0,0 +1,159 @@
// auth_screen.dart — 登录 / 注册页雏形
// 对应 React UI Kit 的 AuthFlow / DAuthFlow。
// 登录:邮箱 + 密码;注册:邮箱 → 发送验证码 → 填验证码 → 设置密码(多端登录)。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
import 'pangolin_icons.dart';
import 'pangolin_button.dart';
import 'pangolin_logo.dart';
enum _AuthMode { login, register }
class AuthScreen extends StatefulWidget {
const AuthScreen({super.key, required this.onDone, this.zh = true});
final VoidCallback onDone; // 登录/注册成功 → 进入引导或主应用
final bool zh; // 简单 i18n:true=中文 false=EN
@override
State<AuthScreen> createState() => _AuthScreenState();
}
class _AuthScreenState extends State<AuthScreen> {
_AuthMode _mode = _AuthMode.login;
int _step = 0; // 注册步骤:0 邮箱+验证码,1 设置密码
bool _sent = false;
final _email = TextEditingController();
final _code = TextEditingController();
final _pw = TextEditingController();
bool get _emailValid => RegExp(r'\S+@\S+\.\S+').hasMatch(_email.text);
String _t(String zh, String en) => widget.zh ? zh : en;
@override
void dispose() { _email.dispose(); _code.dispose(); _pw.dispose(); super.dispose(); }
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return Scaffold(
backgroundColor: c.bg,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 28),
child: Column(
children: [
const SizedBox(height: 18),
// brand
Column(children: [
const PangolinMark(size: 52),
const SizedBox(height: 12),
Text(widget.zh ? '穿山甲' : 'Pangolin', style: PangolinText.h1.copyWith(color: c.fg1)),
const SizedBox(height: 4),
Text(_t('极速 · 稳定 · 省心', 'Fast · Stable · Effortless'),
style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
]),
const SizedBox(height: 28),
// tabs
Row(children: [
_tab(_AuthMode.login, _t('登录', 'Log in'), c),
_tab(_AuthMode.register, _t('注册', 'Sign up'), c),
]),
Divider(height: 1, color: c.border),
const SizedBox(height: 22),
Expanded(child: _mode == _AuthMode.login ? _login(c) : _register(c)),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
_t('继续即代表同意《服务条款》与《隐私政策》', 'By continuing you agree to our Terms & Privacy Policy'),
textAlign: TextAlign.center,
style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400),
),
),
],
),
),
),
);
}
Widget _tab(_AuthMode m, String label, PangolinScheme c) {
final on = _mode == m;
return Expanded(
child: GestureDetector(
onTap: () => setState(() { _mode = m; _step = 0; _sent = false; }),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(border: Border(bottom: BorderSide(color: on ? c.accent : Colors.transparent, width: 2))),
child: Center(child: Text(label, style: PangolinText.body.copyWith(color: on ? c.fg1 : c.fg3, fontWeight: on ? FontWeight.w700 : FontWeight.w500))),
),
),
);
}
Widget _field(PangolinScheme c, {required IconData icon, required String label, required Widget child}) {
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(label, style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
const SizedBox(height: 7),
Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 2),
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.md), border: Border.all(color: c.borderStrong, width: 1.5)),
child: Row(children: [Icon(icon, size: 18, color: c.fg3), const SizedBox(width: 10), Expanded(child: child)]),
),
]);
}
InputDecoration get _bare => const InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: EdgeInsets.symmetric(vertical: 12));
Widget _login(PangolinScheme c) {
return Column(children: [
_field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
const SizedBox(height: 16),
_field(c, icon: PangolinIcons.lock, label: _t('密码', 'Password'),
child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: _t('输入密码', 'Enter password')), onChanged: (_) => setState(() {}))),
Align(alignment: Alignment.centerRight, child: Padding(
padding: const EdgeInsets.only(top: 8),
child: Text(_t('忘记密码?', 'Forgot password?'), style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
)),
const SizedBox(height: 18),
PangolinButton(label: _t('登录', 'Log in'), expand: true, onPressed: (_emailValid && _pw.text.isNotEmpty) ? widget.onDone : null),
]);
}
Widget _register(PangolinScheme c) {
if (_step == 0) {
return Column(children: [
_field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
child: Row(children: [
Expanded(child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
GestureDetector(
onTap: _emailValid ? () => setState(() => _sent = true) : null,
child: Text(_sent ? _t('重新发送', 'Resend') : _t('发送验证码', 'Send code'),
style: PangolinText.caption.copyWith(color: _emailValid ? c.accent : c.fg3, fontWeight: FontWeight.w700)),
),
])),
if (_sent) Padding(padding: const EdgeInsets.only(top: 8), child: Row(children: [
Icon(PangolinIcons.checkCircle, size: 14, color: c.success), const SizedBox(width: 6),
Text('${_t('验证码已发送至', 'Code sent to')} ${_email.text}', style: PangolinText.caption.copyWith(color: c.success, fontWeight: FontWeight.w400)),
])),
const SizedBox(height: 16),
_field(c, icon: PangolinIcons.shieldCheck, label: _t('邮箱验证码', 'Verification code'),
child: TextField(controller: _code, keyboardType: TextInputType.number, maxLength: 6,
style: PangolinText.mono.copyWith(letterSpacing: 6, color: c.fg1),
decoration: _bare.copyWith(counterText: '', hintText: '······'), onChanged: (_) => setState(() {}))),
const SizedBox(height: 8),
PangolinButton(label: _t('下一步', 'Next'), expand: true, onPressed: (_sent && _code.text.length == 6) ? () => setState(() => _step = 1) : null),
]);
}
return Column(children: [
Row(children: [Icon(PangolinIcons.checkCircle, size: 15, color: c.success), const SizedBox(width: 7), Text(_email.text, style: PangolinText.sm.copyWith(color: c.fg2))]),
const SizedBox(height: 16),
_field(c, icon: PangolinIcons.lock, label: _t('密码', 'Password'),
child: TextField(controller: _pw, obscureText: true,
decoration: _bare.copyWith(hintText: _t('设置登录密码(用于多端登录)', 'Set a password (multi-device)')), onChanged: (_) => setState(() {}))),
const SizedBox(height: 18),
PangolinButton(label: _t('创建账户', 'Create account'), expand: true, onPressed: _pw.text.length >= 6 ? widget.onDone : null),
]);
}
}
design/flutter/widgets/connect_button.dart
+147
View File
@@ -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;
}
design/flutter/widgets/country_code.dart
+61
View File
@@ -0,0 +1,61 @@
// country_code.dart — 国家码方块 + 信号条
// 对应 React UI Kit 的 CC / Signal 组件。不用 emoji 国旗。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
class CountryCode extends StatelessWidget {
const CountryCode({super.key, required this.code, this.active = false, this.size = 38});
final String code;
final bool active;
final double size;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return Container(
width: size,
height: size,
alignment: Alignment.center,
decoration: BoxDecoration(
color: active ? c.accent : c.bgSubtle,
borderRadius: BorderRadius.circular(PangolinRadius.md),
),
child: Text(
code,
style: PangolinText.mono.copyWith(
fontSize: size * 0.31,
fontWeight: FontWeight.w600,
color: active ? PangolinColors.white : c.fg2,
),
),
);
}
}
/// 三格信号条,依据延迟 ping 显示强度。
class SignalBars extends StatelessWidget {
const SignalBars({super.key, required this.ping});
final int ping;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final level = ping < 40 ? 3 : ping < 90 ? 2 : 1;
const heights = [4.0, 8.0, 13.0];
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: List.generate(3, (i) {
return Container(
width: 3,
height: heights[i],
margin: EdgeInsets.only(left: i == 0 ? 0 : 2),
decoration: BoxDecoration(
color: i < level ? c.success : c.borderStrong,
borderRadius: BorderRadius.circular(1),
),
);
}),
);
}
}
design/flutter/widgets/home_shell.dart
+328
View File
@@ -0,0 +1,328 @@
// home_shell.dart — 主框架雏形(底部 4 Tab:连接 / 节点 / 统计 / 账户)
// 对应 React UI Kit 的 BottomTab + App 状态机。
// 这是「外壳」:负责导航与连接状态机,各页内容为占位骨架,工程师按需接真实逻辑。
import 'dart:async';
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
import 'pangolin_icons.dart';
import 'connect_button.dart';
import 'server_tile.dart';
import 'country_code.dart';
import 'account_screens.dart';
import 'pangolin_logo.dart';
class HomeShell extends StatefulWidget {
const HomeShell({super.key, this.zh = true});
final bool zh;
@override
State<HomeShell> createState() => _HomeShellState();
}
class _HomeShellState extends State<HomeShell> {
int _tab = 0; // 0 连接 1 节点 2 统计 3 账户
VpnStatus _status = VpnStatus.off;
ServerInfo _server = const ServerInfo(code: 'HK', name: '香港 · 流媒体', sub: 'Hong Kong', ping: 18);
Timer? _timer;
int _elapsed = 0;
String _t(String zh, String en) => widget.zh ? zh : en;
void _toggle() {
if (_status == VpnStatus.off) {
setState(() => _status = VpnStatus.connecting);
Future.delayed(const Duration(milliseconds: 1500), () {
if (!mounted) return;
setState(() { _status = VpnStatus.on; _elapsed = 0; });
_timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(() => _elapsed++));
});
} else {
_timer?.cancel();
setState(() => _status = VpnStatus.off);
}
}
void _pick(ServerInfo s) {
setState(() { _server = s; _tab = 0; });
if (_status == VpnStatus.on) {
_timer?.cancel();
setState(() => _status = VpnStatus.connecting);
Future.delayed(const Duration(milliseconds: 1200), () {
if (!mounted) return;
setState(() { _status = VpnStatus.on; _elapsed = 0; });
_timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(() => _elapsed++));
});
}
}
@override
void dispose() { _timer?.cancel(); super.dispose(); }
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final pages = [
_ConnectPage(zh: widget.zh, status: _status, server: _server, elapsedSec: _elapsed, onToggle: _toggle, onOpenServers: () => setState(() => _tab = 1)),
_ServersPage(zh: widget.zh, current: _server.code, onPick: _pick),
_StatsPage(zh: widget.zh),
_AccountPage(zh: widget.zh),
];
return Scaffold(
backgroundColor: c.bg,
body: SafeArea(bottom: false, child: pages[_tab]),
bottomNavigationBar: _BottomTab(zh: widget.zh, index: _tab, onTap: (i) => setState(() => _tab = i)),
);
}
}
/// ── Bottom tab bar ──
class _BottomTab extends StatelessWidget {
const _BottomTab({required this.zh, required this.index, required this.onTap});
final bool zh; final int index; final ValueChanged<int> onTap;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final items = [
(PangolinIcons.power, zh ? '连接' : 'Connect'),
(PangolinIcons.globe, zh ? '节点' : 'Servers'),
(PangolinIcons.barChart, zh ? '统计' : 'Stats'),
(PangolinIcons.user, zh ? '账户' : 'Account'),
];
return Container(
decoration: BoxDecoration(color: c.surface, border: Border(top: BorderSide(color: c.border))),
padding: const EdgeInsets.only(top: 8, bottom: 22),
child: Row(children: [
for (var i = 0; i < items.length; i++)
Expanded(child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => onTap(i),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Icon(items[i].$1, size: 22, color: i == index ? c.accent : c.fg3),
const SizedBox(height: 4),
Text(items[i].$2, style: PangolinText.caption.copyWith(color: i == index ? c.accent : c.fg3, fontWeight: i == index ? FontWeight.w700 : FontWeight.w500)),
]),
)),
]),
);
}
}
/// ── Connect page ──
class _ConnectPage extends StatelessWidget {
const _ConnectPage({required this.zh, required this.status, required this.server, required this.elapsedSec, required this.onToggle, required this.onOpenServers});
final bool zh; final VpnStatus status; final ServerInfo server; final int elapsedSec; final VoidCallback onToggle, onOpenServers;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final cap = switch (status) {
VpnStatus.off => zh ? '未连接 · 轻点连接' : 'Tap to connect',
VpnStatus.connecting => zh ? '连接中…' : 'Connecting…',
VpnStatus.on => zh ? '已连接 · 网络已加密' : 'Connected · Encrypted',
};
return Column(children: [
_TopBar(zh: zh, trailing: Text(status == VpnStatus.on ? (zh ? '● 在线' : '● Online') : (zh ? '○ 离线' : '○ Offline'),
style: PangolinText.caption.copyWith(fontFamily: PangolinFonts.mono, color: status == VpnStatus.on ? c.success : c.fg3, fontWeight: FontWeight.w600))),
Expanded(child: Center(child: Column(mainAxisSize: MainAxisSize.min, children: [
ConnectButton(status: status, elapsed: Duration(seconds: elapsedSec), onTap: onToggle),
const SizedBox(height: 24),
Text(cap, style: PangolinText.body.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
]))),
// current server card
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 18),
child: GestureDetector(
onTap: onOpenServers,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
child: Row(children: [
CountryCode(code: server.code, active: true),
const SizedBox(width: 12),
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(server.name, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
Text('${server.sub} · ${server.ping}ms', style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
])),
Icon(PangolinIcons.chevronRight, size: 20, color: c.fg3),
]),
),
),
),
]);
}
}
/// ── Servers page ──
class _ServersPage extends StatelessWidget {
const _ServersPage({required this.zh, required this.current, required this.onPick});
final bool zh; final String current; final ValueChanged<ServerInfo> onPick;
static const _servers = [
ServerInfo(code: 'HK', name: '香港 · 流媒体', sub: 'Hong Kong', ping: 18),
ServerInfo(code: 'JP', name: '日本 东京', sub: 'Tokyo', ping: 32),
ServerInfo(code: 'TW', name: '台湾 台北', sub: 'Taipei', ping: 28),
ServerInfo(code: 'SG', name: '新加坡', sub: 'Singapore · P2P', ping: 54),
ServerInfo(code: 'KR', name: '韩国 首尔', sub: 'Seoul', ping: 41),
ServerInfo(code: 'US', name: '美国 洛杉矶', sub: 'Los Angeles', ping: 146),
];
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
_TopBar(zh: zh),
Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
child: Text(zh ? '选择节点' : 'Choose server', style: PangolinText.h2.copyWith(color: c.fg1))),
Expanded(child: ListView.builder(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
itemCount: _servers.length,
itemBuilder: (_, i) => Padding(
padding: const EdgeInsets.only(bottom: 10),
child: ServerTile(server: _servers[i], active: _servers[i].code == current, onTap: () => onPick(_servers[i])),
),
)),
]);
}
}
/// ── Stats page (skeleton) ──
class _StatsPage extends StatelessWidget {
const _StatsPage({required this.zh});
final bool zh;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final vals = [2.1, 3.4, 1.8, 4.6, 5.2, 6.1, 3.0];
final labels = zh ? ['一','二','三','四','五','六','日'] : ['M','T','W','T','F','S','S'];
const maxV = 6.1;
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
_TopBar(zh: zh),
Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 16),
child: Text(zh ? '使用统计' : 'Statistics', style: PangolinText.h2.copyWith(color: c.fg1))),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(children: [
for (final m in [(zh ? '本月流量' : 'Traffic', '42.6', 'GB'), (zh ? '平均延迟' : 'Ping', '29', 'ms'), (zh ? '本月时长' : 'Time', '86.4', 'h')])
Expanded(child: Container(
margin: const EdgeInsets.only(right: 12),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(m.$1, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
const SizedBox(height: 6),
Text.rich(TextSpan(text: m.$2, style: PangolinText.mono.copyWith(fontSize: 20, color: c.fg1, fontWeight: FontWeight.w500),
children: [TextSpan(text: ' ${m.$3}', style: PangolinText.caption.copyWith(color: c.fg3))])),
]),
)),
]),
),
const SizedBox(height: 16),
Expanded(child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(zh ? '本周流量 (GB)' : 'This week (GB)', style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
const SizedBox(height: 18),
Expanded(child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
for (var i = 0; i < vals.length; i++)
Expanded(child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
Text('${vals[i]}', style: PangolinText.caption.copyWith(fontFamily: PangolinFonts.mono, color: c.fg3)),
const SizedBox(height: 6),
Container(height: 90 * (vals[i] / maxV), margin: const EdgeInsets.symmetric(horizontal: 6),
decoration: BoxDecoration(color: c.accent.withOpacity(.85), borderRadius: const BorderRadius.vertical(top: Radius.circular(6)))),
const SizedBox(height: 6),
Text(labels[i], style: PangolinText.caption.copyWith(color: c.fg3)),
])),
])),
]),
),
)),
]);
}
}
/// ── Account page (skeleton — 套餐横幅 + 账户信息 + 设备入口) ──
class _AccountPage extends StatelessWidget {
const _AccountPage({required this.zh});
final bool zh;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
_TopBar(zh: zh),
Padding(padding: const EdgeInsets.fromLTRB(20, 0, 20, 14),
child: Text(zh ? '我的' : 'Account', style: PangolinText.h2.copyWith(color: c.fg1))),
Expanded(child: ListView(padding: const EdgeInsets.fromLTRB(20, 0, 20, 20), children: [
// plan banner
Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
gradient: const LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [PangolinColors.clay600, PangolinColors.clay800]),
borderRadius: BorderRadius.circular(PangolinRadius.xl), boxShadow: PangolinShadow.md,
),
child: Row(children: [
Container(width: 44, height: 44, decoration: BoxDecoration(color: PangolinColors.white.withOpacity(.18), shape: BoxShape.circle),
child: const Icon(PangolinIcons.crown, size: 22, color: PangolinColors.white)),
const SizedBox(width: 11),
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
const Text('me@pangolin.vpn', style: TextStyle(color: PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 16)),
const SizedBox(height: 4),
Text(zh ? 'PRO 会员 · 至 2026-12-31' : 'PRO · until 2026-12-31', style: TextStyle(color: PangolinColors.white.withOpacity(.85), fontSize: 12)),
])),
FilledButton(onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => PlansScreen(zh: zh, onChoose: (_) => Navigator.of(context).push(MaterialPageRoute(builder: (_) => RedeemScreen(zh: zh)))))), style: FilledButton.styleFrom(backgroundColor: PangolinColors.white, foregroundColor: PangolinColors.clay700, shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10)),
child: Text(zh ? '续费 / 升级' : 'Renew', style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13))),
]),
),
const SizedBox(height: 18),
_accountRow(c, PangolinIcons.mail, zh ? '邮箱' : 'Email', 'me@pangolin.vpn'),
_accountRow(c, PangolinIcons.lock, zh ? '密码' : 'Password', '••••••••••'),
_accountRow(c, PangolinIcons.monitorSmartphone, zh ? '我的设备' : 'My devices', '',
onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => DevicesScreen(zh: zh)))),
_accountRow(c, PangolinIcons.shoppingBag, zh ? '兑换 & 购买' : 'Redeem & buy', '',
onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => RedeemScreen(zh: zh)))),
_accountRow(c, PangolinIcons.messageCircle, zh ? '联系我们' : 'Contact us', '',
onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => ContactScreen(zh: zh)))),
_accountRow(c, PangolinIcons.logOut, zh ? '退出登录' : 'Sign out', '', danger: true),
])),
]);
}
Widget _accountRow(PangolinScheme c, IconData icon, String title, String value, {bool danger = false, VoidCallback? onTap}) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: Container(
margin: const EdgeInsets.only(bottom: 10),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
decoration: BoxDecoration(color: c.surface, borderRadius: BorderRadius.circular(PangolinRadius.lg), border: Border.all(color: c.border), boxShadow: PangolinShadow.sm),
child: Row(children: [
Icon(icon, size: 20, color: danger ? c.danger : c.accent),
const SizedBox(width: 13),
Expanded(child: Text(title, style: PangolinText.body.copyWith(color: danger ? c.danger : c.fg1, fontWeight: FontWeight.w500))),
if (value.isNotEmpty) Text(value, style: PangolinText.sm.copyWith(color: c.fg3))
else Icon(PangolinIcons.chevronRight, size: 18, color: c.fg3),
]),
),
);
}
}
/// ── Shared top bar ──
class _TopBar extends StatelessWidget {
const _TopBar({required this.zh, this.trailing});
final bool zh; final Widget? trailing;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 6, 20, 14),
child: Row(children: [
PangolinBrandLockup(zh: zh, markSize: 24),
const Spacer(),
if (trailing != null) trailing!,
]),
);
}
}
design/flutter/widgets/onboarding_screen.dart
+103
View File
@@ -0,0 +1,103 @@
// onboarding_screen.dart — 首次引导页雏形(3 屏)
// 对应 React UI Kit 的 Onboarding / DOnboarding。
import 'package:flutter/material.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, this.steps});
final VoidCallback onDone;
final List<OnboardingStep>? steps; // 不传则用默认中文 3 屏
@override
State<OnboardingScreen> createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
int _i = 0;
final _pager = PageController();
List<OnboardingStep> _defaults(PangolinScheme c) => [
OnboardingStep(icon: PangolinIcons.globe, title: '一键连接全球', body: '80+ 节点,智能选择最快线路,稳定不掉线。', cta: '下一步'),
OnboardingStep(icon: PangolinIcons.shield, title: '授权网络配置', body: '系统会请求添加一个网络配置,用于建立加密隧道。', cta: '允许并继续'),
OnboardingStep(icon: PangolinIcons.shieldCheck, title: '安全 · 无日志', body: '端到端加密,我们不记录你的任何浏览数据。', cta: '开始使用',
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: [
// skip
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.all(8),
child: TextButton(onPressed: widget.onDone, child: Text('跳过', 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)),
]),
);
},
),
),
// dots
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); }
},
),
),
]),
),
);
}
}
design/flutter/widgets/pangolin_button.dart
+67
View File
@@ -0,0 +1,67 @@
// pangolin_button.dart — 胶囊按钮(primary / secondary / ghost / danger)
// 对应 React UI Kit 的 .btn / Pill 组件。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
enum PangolinButtonVariant { primary, secondary, ghost, danger }
class PangolinButton extends StatelessWidget {
const PangolinButton({
super.key,
required this.label,
this.onPressed,
this.icon,
this.variant = PangolinButtonVariant.primary,
this.expand = false,
});
final String label;
final VoidCallback? onPressed;
final IconData? icon;
final PangolinButtonVariant variant;
final bool expand;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final disabled = onPressed == null;
late final Color bg, fg;
Border? border;
switch (variant) {
case PangolinButtonVariant.primary:
bg = c.accent; fg = c.fgOnAccent; break;
case PangolinButtonVariant.secondary:
bg = c.surface; fg = c.fg1; border = Border.all(color: c.borderStrong, width: 1.5); break;
case PangolinButtonVariant.ghost:
bg = Colors.transparent; fg = c.accent; break;
case PangolinButtonVariant.danger:
bg = c.dangerSubtle; fg = c.danger; break;
}
final child = Row(
mainAxisSize: expand ? MainAxisSize.max : MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (icon != null) ...[Icon(icon, size: 18, color: fg), const SizedBox(width: 8)],
Text(label, style: PangolinText.sm.copyWith(color: fg, fontWeight: FontWeight.w600, fontSize: 15)),
],
);
return Opacity(
opacity: disabled ? 0.45 : 1,
child: Material(
color: bg,
shape: StadiumBorder(side: border?.top ?? BorderSide.none),
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: onPressed,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 13),
child: child,
),
),
),
);
}
}
design/flutter/widgets/pangolin_icons.dart
+85
View File
@@ -0,0 +1,85 @@
// pangolin_icons.dart — Lucide 图标映射表
//
// React UI Kit 用 Lucide 图标(按名引用,如 'power' / 'shield-check')。
// 本文件把这些名映射到 Flutter 的 lucide_icons 包常量,保证与设计像素一致。
//
// 依赖:在 pubspec.yaml 添加
// dependencies:
// lucide_icons: ^0.x # https://pub.dev/packages/lucide_icons
//
// 用法 A(直用常量,推荐):
// Icon(PangolinIcons.power, size: 20, color: c.accent)
// 用法 B(按 Lucide 名查表,便于从 React data-lucide 移植):
// Icon(PangolinIcons.byName('shield-check'))
//
// ⚠️ lucide_icons 各版本常量名可能略有差异;若某常量在你的版本里不存在,
// 按 IDE 提示替换为最接近的名称即可(已在右侧注明 Lucide 原名)。
import 'package:flutter/widgets.dart';
import 'package:lucide_icons/lucide_icons.dart';
class PangolinIcons {
PangolinIcons._();
// ── 连接 / 状态 ──
static const power = LucideIcons.power; // power — 连接键
static const shieldCheck = LucideIcons.shieldCheck; // shield-check — 已加密
static const shield = LucideIcons.shield; // shield — Kill Switch
static const loader = LucideIcons.loader; // loader-circle — 连接中(旋转)
static const zap = LucideIcons.zap; // zap — 延迟 / 极速
static const globe = LucideIcons.globe; // globe — 节点
// ── 导航 / 操作 ──
static const settings = LucideIcons.settings; // settings
static const user = LucideIcons.user; // user — 账户
static const search = LucideIcons.search; // search
static const check = LucideIcons.check; // check — 选中
static const checkCircle = LucideIcons.checkCircle; // check-circle — 成功
static const x = LucideIcons.x; // x — 关闭
static const chevronRight = LucideIcons.chevronRight; // chevron-right
static const chevronDown = LucideIcons.chevronDown; // chevron-down
static const arrowLeft = LucideIcons.arrowLeft; // arrow-left — 返回
static const arrowUp = LucideIcons.arrowUp; // arrow-up — 上传
static const arrowDown = LucideIcons.arrowDown; // arrow-down — 下载
static const refreshCw = LucideIcons.refreshCw; // refresh-cw — 检查更新
static const compass = LucideIcons.compass; // compass — 引导
static const barChart = LucideIcons.barChart; // chart-no-axes-column / chart — 统计
static const mapPin = LucideIcons.mapPin; // map-pin
// ── 主题 ──
static const moon = LucideIcons.moon; // moon — 深色
static const sun = LucideIcons.sun; // sun — 浅色
// ── 账户 / 套餐 / 兑换 ──
static const crown = LucideIcons.crown; // crown — PRO
static const ticket = LucideIcons.ticket; // ticket — 兑换 / 续费
static const creditCard = LucideIcons.creditCard; // credit-card
static const shoppingBag = LucideIcons.shoppingBag; // shopping-bag — 发卡商店
static const mail = LucideIcons.mail; // mail — 邮箱
static const lock = LucideIcons.lock; // lock — 密码
static const logOut = LucideIcons.logOut; // log-out — 退出
static const send = LucideIcons.send; // send — Telegram
static const messageCircle= LucideIcons.messageCircle; // message-circle — LINE / 联系
static const externalLink = LucideIcons.externalLink; // external-link — 外链
// ── 设备 ──
static const laptop = LucideIcons.laptop; // laptop
static const smartphone = LucideIcons.smartphone; // smartphone
// monitor-smartphone 在部分版本缺失,回退到 smartphone(平板亦可用 LucideIcons.tablet)
static const monitorSmartphone = LucideIcons.smartphone; // monitor-smartphone(回退)
/// 按 Lucide 原名查表(React data-lucide 名 → IconData)。未命中返回 null。
static IconData? byName(String name) => _byName[name];
static const Map<String, IconData> _byName = {
'power': power, 'shield-check': shieldCheck, 'shield': shield, 'loader-circle': loader,
'zap': zap, 'globe': globe, 'settings': settings, 'user': user, 'search': search,
'check': check, 'check-circle': checkCircle, 'x': x, 'chevron-right': chevronRight,
'chevron-down': chevronDown, 'arrow-left': arrowLeft, 'arrow-up': arrowUp, 'arrow-down': arrowDown,
'refresh-cw': refreshCw, 'compass': compass, 'chart-no-axes-column': barChart, 'chart': barChart,
'map-pin': mapPin, 'moon': moon, 'sun': sun, 'crown': crown, 'ticket': ticket,
'credit-card': creditCard, 'shopping-bag': shoppingBag, 'mail': mail, 'lock': lock,
'log-out': logOut, 'send': send, 'message-circle': messageCircle, 'external-link': externalLink,
'laptop': laptop, 'smartphone': smartphone, 'monitor-smartphone': monitorSmartphone,
};
}
design/flutter/widgets/pangolin_logo.dart
+74
View File
@@ -0,0 +1,74 @@
// pangolin_logo.dart — 品牌标 / 字标 / App 图标(SVG)
// 用 flutter_svg 加载 assets/ 下的矢量 logo,自动适配明暗主题。
//
// 依赖:pubspec.yaml
// dependencies:
// flutter_svg: ^2.0.0
// flutter:
// assets:
// - assets/logo-mark.svg
// - assets/logo-mark-white.svg
// - assets/logo-wordmark.svg
// - assets/app-icon.svg
//
// 资产路径:把本目录上一级的 assets/*.svg 拷进你的 Flutter 工程 assets/。
// 若放在其他包/前缀下,改 _base 即可。
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../pangolin_theme.dart';
const String _base = 'assets';
/// 仅标记(行走穿山甲)。深色主题自动用反白版。
class PangolinMark extends StatelessWidget {
const PangolinMark({super.key, this.size = 28, this.forceLight, this.forceDark});
final double size;
final bool? forceLight; // 强制浅色锁版(clay 标)
final bool? forceDark; // 强制深色锁版(反白标)
@override
Widget build(BuildContext context) {
final isDark = forceDark ?? (forceLight == true ? false : Theme.of(context).brightness == Brightness.dark);
final asset = isDark ? '$_base/logo-mark-white.svg' : '$_base/logo-mark.svg';
return SvgPicture.asset(asset, width: size, height: size);
}
}
/// 标记 + 字标(横版锁版)。深色下文字需反白时建议改用 PangolinMark + Text 自绘,
/// 因 wordmark.svg 内文字为深色;此处提供浅背景用法。
class PangolinWordmark extends StatelessWidget {
const PangolinWordmark({super.key, this.height = 28});
final double height;
@override
Widget build(BuildContext context) => SvgPicture.asset('$_base/logo-wordmark.svg', height: height);
}
/// App 图标(clay 渐变圆角方 + 白色穿山甲)。圆角随尺寸。
class PangolinAppIcon extends StatelessWidget {
const PangolinAppIcon({super.key, this.size = 64});
final double size;
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(size * 0.22),
child: SvgPicture.asset('$_base/app-icon.svg', width: size, height: size),
);
}
}
/// 顶栏品牌锁版:标记 + 「穿山甲 / Pangolin」字样(用本地字体,随主题变色)。
/// 比直接用 wordmark.svg 更灵活(可双语 + 深浅自适应)。
class PangolinBrandLockup extends StatelessWidget {
const PangolinBrandLockup({super.key, this.zh = true, this.markSize = 26});
final bool zh; final double markSize;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return Row(mainAxisSize: MainAxisSize.min, children: [
PangolinMark(size: markSize),
const SizedBox(width: 9),
Text(zh ? '穿山甲' : 'Pangolin',
style: PangolinText.h3.copyWith(color: c.fg1, fontFamily: PangolinFonts.display, fontWeight: FontWeight.w700)),
]);
}
}
design/flutter/widgets/pangolin_widgets.dart
+14
View File
@@ -0,0 +1,14 @@
// pangolin_widgets.dart — 统一导出穿山甲 VPN 核心组件雏形。
// 用法:import 'widgets/pangolin_widgets.dart';
export 'pangolin_icons.dart';
export 'pangolin_button.dart';
export 'country_code.dart';
export 'status_pill.dart';
export 'connect_button.dart';
export 'server_tile.dart';
export 'plan_card.dart';
export 'auth_screen.dart';
export 'onboarding_screen.dart';
export 'home_shell.dart';
export 'account_screens.dart';
export 'pangolin_logo.dart';
design/flutter/widgets/plan_card.dart
+112
View File
@@ -0,0 +1,112 @@
// plan_card.dart — 套餐卡(免费 / 专业渐变高亮 / 团队)
// 对应 React UI Kit 的 PlanCard / PlansScreen。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
import 'pangolin_icons.dart';
class PlanCard extends StatelessWidget {
const PlanCard({
super.key,
required this.name,
required this.price,
required this.period,
required this.features,
required this.ctaLabel,
this.featured = false,
this.isCurrent = false,
this.popularLabel,
this.onPressed,
});
final String name, price, period, ctaLabel;
final List<String> features;
final bool featured, isCurrent;
final String? popularLabel;
final VoidCallback? onPressed;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
final onCard = featured ? PangolinColors.white : c.fg1;
final subColor = featured ? PangolinColors.white.withOpacity(0.92) : c.fg2;
final card = Container(
padding: const EdgeInsets.fromLTRB(20, 22, 20, 20),
decoration: BoxDecoration(
gradient: featured
? const LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [PangolinColors.clay600, PangolinColors.clay800])
: null,
color: featured ? null : c.surface,
border: featured ? null : Border.all(color: c.border),
borderRadius: BorderRadius.circular(PangolinRadius.xl),
boxShadow: featured ? PangolinShadow.md : PangolinShadow.sm,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(name, style: PangolinText.sm.copyWith(color: featured ? PangolinColors.white.withOpacity(0.85) : c.fg2, fontWeight: FontWeight.w600)),
const SizedBox(height: 6),
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(price, style: PangolinText.display.copyWith(color: onCard, fontSize: 30)),
Text(period, style: PangolinText.caption.copyWith(color: subColor, fontSize: 13)),
],
),
const SizedBox(height: 16),
...features.map((f) => Padding(
padding: const EdgeInsets.only(bottom: 9),
child: Row(children: [
Icon(PangolinIcons.check, size: 15, color: featured ? PangolinColors.white : c.success),
const SizedBox(width: 9),
Expanded(child: Text(f, style: PangolinText.sm.copyWith(color: subColor, fontSize: 13))),
]),
)),
const SizedBox(height: 8),
SizedBox(
width: double.infinity,
child: Material(
color: featured ? PangolinColors.white : (isCurrent ? Colors.transparent : c.accent),
shape: StadiumBorder(side: isCurrent ? BorderSide(color: c.borderStrong, width: 1.5) : BorderSide.none),
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: isCurrent ? null : onPressed,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Center(
child: Text(ctaLabel,
style: PangolinText.sm.copyWith(
fontWeight: FontWeight.w700,
fontSize: 14,
color: featured ? PangolinColors.clay700 : (isCurrent ? c.fg2 : PangolinColors.white),
)),
),
),
),
),
),
],
),
);
if (popularLabel == null) return card;
// 带「最受欢迎」浮标
return Stack(clipBehavior: Clip.none, children: [
card,
Positioned(
top: -10,
left: 0,
right: 0,
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 3),
decoration: BoxDecoration(color: PangolinColors.white, borderRadius: BorderRadius.circular(PangolinRadius.full), boxShadow: PangolinShadow.sm),
child: Text(popularLabel!, style: PangolinText.caption.copyWith(color: PangolinColors.clay700, fontWeight: FontWeight.w700, fontSize: 11)),
),
),
),
]);
}
}
design/flutter/widgets/server_tile.dart
+51
View File
@@ -0,0 +1,51 @@
// server_tile.dart — 服务器列表行(国家码 · 名称 · 延迟 · 信号 · 选中态)
// 对应 React UI Kit 的 ServerRow。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
import 'country_code.dart';
import 'pangolin_icons.dart';
class ServerInfo {
const ServerInfo({required this.code, required this.name, required this.sub, required this.ping});
final String code, name, sub;
final int ping;
}
class ServerTile extends StatelessWidget {
const ServerTile({super.key, required this.server, this.active = false, this.onTap});
final ServerInfo server;
final bool active;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
return InkWell(
onTap: onTap,
child: Container(
color: active ? c.accentSubtle : Colors.transparent,
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
child: Row(
children: [
CountryCode(code: server.code, active: active),
const SizedBox(width: 13),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(server.name, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 15)),
const SizedBox(height: 2),
Text(server.sub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
],
),
),
Text('${server.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
const SizedBox(width: 8),
SignalBars(ping: server.ping),
if (active) ...[const SizedBox(width: 10), Icon(PangolinIcons.check, size: 18, color: c.accent)],
],
),
),
);
}
}
design/flutter/widgets/status_pill.dart
+45
View File
@@ -0,0 +1,45 @@
// status_pill.dart — 状态胶囊(色点 + 文字)。不用 emoji。
// 对应 React UI Kit 的 .pill / 徽章。
import 'package:flutter/material.dart';
import '../pangolin_theme.dart';
enum PangolinStatus { connected, connecting, error, neutral, pro }
class StatusPill extends StatelessWidget {
const StatusPill({super.key, required this.label, this.status = PangolinStatus.neutral});
final String label;
final PangolinStatus status;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
late final Color bg, fg, dot;
bool showDot = true;
switch (status) {
case PangolinStatus.connected:
bg = c.successSubtle; fg = c.success; dot = c.success; break;
case PangolinStatus.connecting:
bg = c.warningSubtle; fg = c.warning; dot = c.warning; break;
case PangolinStatus.error:
bg = c.dangerSubtle; fg = c.danger; dot = c.danger; break;
case PangolinStatus.pro:
bg = c.accent; fg = c.fgOnAccent; dot = c.fgOnAccent; showDot = false; break;
case PangolinStatus.neutral:
bg = c.bgSubtle; fg = c.fg2; dot = c.fg3; break;
}
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(color: bg, borderRadius: BorderRadius.circular(PangolinRadius.full)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (showDot) ...[
Container(width: 7, height: 7, decoration: BoxDecoration(color: dot, shape: BoxShape.circle)),
const SizedBox(width: 7),
],
Text(label, style: PangolinText.caption.copyWith(color: fg, fontWeight: FontWeight.w600)),
],
),
);
}
}