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
@@ -0,0 +1,54 @@
|
||||
# 穿山甲 · Pangolin — Flutter 客户端
|
||||
|
||||
跨平台网络加速客户端。UI 以 `design/ui_kits/`(mobile + tablet)React 原型为像素基准,
|
||||
令牌同源自 `design/colors_and_type.css`(Dart 镜像见 `lib/pangolin_theme.dart`)。
|
||||
|
||||
## 运行
|
||||
|
||||
```bash
|
||||
flutter pub get
|
||||
flutter run
|
||||
# main.dart 已串好:登录 → 引导 → 主框架(连接/节点/统计/账户)
|
||||
```
|
||||
|
||||
## 工程结构
|
||||
|
||||
```
|
||||
lib/
|
||||
pangolin_theme.dart 语义 token + 明/暗 ThemeData(零硬编码十六进制,改令牌与 css 两处同改)
|
||||
l10n/ 文案资源(单显:任一时刻只渲染中文或英文)
|
||||
app_text.dart 抽象契约 + AppLang 枚举
|
||||
strings_zh.dart 中文资源 ← CI 红线词扫描目标
|
||||
strings_en.dart 英文资源 ← CI 红线词扫描目标
|
||||
models/node.dart 节点模型(2 字母码块,无 emoji 国旗)
|
||||
state/ Riverpod 状态层(UI 与数据解耦,mock 数据,接 API 不动 UI)
|
||||
app_providers.dart 语言 / 主题 / 套餐视角
|
||||
connection_provider.dart 连接状态机(严格三态,禁止乐观显示)
|
||||
quota_provider.dart 免费额度状态机(剩余分钟 + 看广告解锁)
|
||||
nodes_provider.dart 节点清单 + 智能选择(AUTO 取最低延迟)
|
||||
widgets/ 原子组件(连接键三态 / 推荐卡 / 额度卡 / 国家码块 / Tab 滑动仲裁 …)
|
||||
screens/ 4 个主页面(同一份代码按断点自适应)
|
||||
```
|
||||
|
||||
## 关键实现要点
|
||||
|
||||
- **连接键三态**:`off` 暖灰底+虚线轨道环 / `connecting` clay 实底+旋转弧 / `on` 绿底满环+圆内计时+光晕。
|
||||
过渡只走 `box-shadow`/背景色,不做全属性动画。状态严格来自 `connectionProvider`,点击只派发事件——**禁止乐观显示**。
|
||||
- **智能选择推荐卡**:节点页置顶常驻,accent-subtle 底 + clay 渐变 zap 图标 + 「推荐」胶囊,默认选中。
|
||||
- **免费额度卡**:剩余分钟 + 进度条(≤3 分钟切 warning 色)+「看广告开始使用」→ 解锁后变绿。
|
||||
- **Tab 滑动切换**:`HorizontalSwipeArea` 仅接横向拖拽;纵向滚动由列表的纵向识别器在手势竞技场胜出,
|
||||
子页滚动区域不会误触发(`DirectionalTabSwitcher` 做 200ms 方向感知滑入)。
|
||||
- **iPad/宽屏断点**:`LayoutBuilder` 在宽度 ≥900 时切左侧栏分栏(导航行高 ≥48),
|
||||
连接页双栏、节点页双列网格——**复用同一批原子组件,仅布局开关,不 fork 页面**。
|
||||
- **文案全部走 l10n**,界面无红线词(铁律 13),由 `ci/scan-redline.sh` 在 CI 防回归。
|
||||
|
||||
## 测试
|
||||
|
||||
```bash
|
||||
flutter analyze # 期望零警告
|
||||
flutter test test/unit test/widget # 状态机单测 + 组件行为测试
|
||||
flutter test --update-goldens test/golden # 首次生成 golden 基准图
|
||||
flutter test test/golden # 之后做 golden 回归(连接键三态/推荐卡/额度卡 × 明暗)
|
||||
```
|
||||
|
||||
> golden 基准图依赖本机字体渲染,首次须用 `--update-goldens` 生成并提交;CI 默认只跑 unit + widget。
|
||||
@@ -0,0 +1,152 @@
|
||||
// app_text.dart — 文案契约(l10n 资源层)
|
||||
//
|
||||
// 产品任一时刻只显示中文【或】英文(设计铁律 §6 单语言显示),由
|
||||
// `localeProvider` 段控切换。所有界面文案必须经此处取用,禁止在组件内
|
||||
// 写死中/英字面量。zh / en 两份资源分别在 strings_zh.dart / strings_en.dart。
|
||||
//
|
||||
// 红线词约束(设计铁律 §13):资源文件不得出现 VPN / 翻墙 / 科学上网 /
|
||||
// 突破封锁 / 自由穿越 / Go anywhere。CI `ci/scan-redline.sh` 对本目录做扫描。
|
||||
//
|
||||
// 注意:这是手写资源(非 flutter gen-l10n 代码生成),保证离线可编译;
|
||||
// 接口形态与 .arb 一致,后续可平滑迁移到官方 l10n 工具链。
|
||||
|
||||
/// 受支持语言。单显——任一时刻只渲染其一。
|
||||
enum AppLang { zh, en }
|
||||
|
||||
/// 全部界面文案的抽象契约。zh / en 各实现一份。
|
||||
abstract class AppText {
|
||||
const AppText();
|
||||
|
||||
AppLang get lang;
|
||||
|
||||
// ── 品牌 / 连接状态 ──
|
||||
String get brand;
|
||||
String get online;
|
||||
String get offline;
|
||||
String get capOff;
|
||||
String get capConnecting;
|
||||
String get capOn;
|
||||
String get connectNow; // 连接键 off 态圆内文字
|
||||
String get secure; // 连接键圆内「已加密」
|
||||
|
||||
// ── 底部 / 侧栏导航 ──
|
||||
String get tabConnect;
|
||||
String get tabServers;
|
||||
String get tabStats;
|
||||
String get tabMe;
|
||||
|
||||
// ── 连接页 ──
|
||||
String get currentNode;
|
||||
String get download;
|
||||
String get upload;
|
||||
String get latency;
|
||||
|
||||
// ── 免费额度卡 ──
|
||||
String get quotaToday;
|
||||
String get minutes;
|
||||
String get quotaFree;
|
||||
String get watchAd;
|
||||
String get adUnlocked;
|
||||
|
||||
// ── 节点页 ──
|
||||
String get chooseNode;
|
||||
String get searchPh;
|
||||
String get smartSelect;
|
||||
String get smartSub;
|
||||
String get recommended;
|
||||
|
||||
// ── 统计页 ──
|
||||
String get statsTitle;
|
||||
String get trafficMonth;
|
||||
String get avgPing;
|
||||
String get durMonth;
|
||||
String get weekTraffic;
|
||||
List<String> get days7;
|
||||
|
||||
// ── 账户页 ──
|
||||
String get meTitle;
|
||||
String get proMember;
|
||||
String get freePlanName;
|
||||
String get expires;
|
||||
String get upgradeBtn;
|
||||
String get accInfoTitle;
|
||||
String get accEmail;
|
||||
String get accPassword;
|
||||
String get accChange;
|
||||
String get myDevices;
|
||||
String get devicesSub;
|
||||
String get thisDevice;
|
||||
String get remove;
|
||||
String get redeemEntry;
|
||||
String get contactEntry;
|
||||
String get signOut;
|
||||
String get language;
|
||||
String get darkAppearance;
|
||||
String get stateOn;
|
||||
String get followLight;
|
||||
String get protocol;
|
||||
|
||||
// ── 套餐选择 ──
|
||||
String get choosePlan;
|
||||
String get freePlan;
|
||||
String get proPlan;
|
||||
String get teamPlan;
|
||||
String get perMonth;
|
||||
String get current;
|
||||
String get upgrade;
|
||||
String get choose;
|
||||
String get mostPopular;
|
||||
List<String> get featsFree;
|
||||
List<String> get featsPro;
|
||||
List<String> get featsTeam;
|
||||
|
||||
// ── 兑换 & 购买 ──
|
||||
String get redeemTitle;
|
||||
String get redeemCodeTitle;
|
||||
String get redeemPh;
|
||||
String get redeemBtn;
|
||||
String get redeemOk;
|
||||
String get buyTitle;
|
||||
String get buySub;
|
||||
String get chStore;
|
||||
String get chEmail;
|
||||
|
||||
// ── 联系我们 ──
|
||||
String get contactTitle;
|
||||
String get contactIntro;
|
||||
String get contactEmail;
|
||||
String get contactStore;
|
||||
String get contactHoursTitle;
|
||||
String get contactHours;
|
||||
|
||||
// ── 登录 / 注册 ──
|
||||
String get authTagline;
|
||||
String get tabLogin;
|
||||
String get tabRegister;
|
||||
String get emailLabel;
|
||||
String get emailPh;
|
||||
String get pwLabel;
|
||||
String get pwPh;
|
||||
String get setPwPh;
|
||||
String get codeLabel;
|
||||
String codeSentTo(String email);
|
||||
String get sendCode;
|
||||
String get resend;
|
||||
String get doLogin;
|
||||
String get doNext;
|
||||
String get doCreate;
|
||||
String get forgotPw;
|
||||
String get tos;
|
||||
|
||||
// ── 首次引导 ──
|
||||
String get obSkip;
|
||||
String get obNext;
|
||||
String get obAllow;
|
||||
String get obStart;
|
||||
String get ob1Title;
|
||||
String get ob1Sub;
|
||||
String get ob2Title;
|
||||
String get ob2Sub;
|
||||
String get ob3Title;
|
||||
String get ob3Sub;
|
||||
}
|
||||
@@ -0,0 +1,247 @@
|
||||
// strings_en.dart — English copy resources (single-language display)
|
||||
//
|
||||
// Red-line words forbidden: VPN / 翻墙 / 科学上网 / 突破封锁 / 自由穿越 / Go anywhere.
|
||||
// Positioning: network acceleration / experience optimization + privacy.
|
||||
// Plan numbers follow design/CLAUDE.md §7.
|
||||
import 'app_text.dart';
|
||||
|
||||
class StringsEn extends AppText {
|
||||
const StringsEn();
|
||||
|
||||
@override
|
||||
AppLang get lang => AppLang.en;
|
||||
|
||||
@override
|
||||
String get brand => 'Pangolin';
|
||||
@override
|
||||
String get online => '● Online';
|
||||
@override
|
||||
String get offline => '○ Offline';
|
||||
@override
|
||||
String get capOff => 'Tap to connect';
|
||||
@override
|
||||
String get capConnecting => 'Connecting…';
|
||||
@override
|
||||
String get capOn => 'Connected · Encrypted';
|
||||
@override
|
||||
String get connectNow => 'CONNECT';
|
||||
@override
|
||||
String get secure => 'SECURE';
|
||||
|
||||
@override
|
||||
String get tabConnect => 'Connect';
|
||||
@override
|
||||
String get tabServers => 'Servers';
|
||||
@override
|
||||
String get tabStats => 'Stats';
|
||||
@override
|
||||
String get tabMe => 'Account';
|
||||
|
||||
@override
|
||||
String get currentNode => 'Current node';
|
||||
@override
|
||||
String get download => 'Down';
|
||||
@override
|
||||
String get upload => 'Up';
|
||||
@override
|
||||
String get latency => 'Ping';
|
||||
|
||||
@override
|
||||
String get quotaToday => 'Left today';
|
||||
@override
|
||||
String get minutes => 'min';
|
||||
@override
|
||||
String get quotaFree => 'Free · 10 min/day';
|
||||
@override
|
||||
String get watchAd => 'Watch ad to start';
|
||||
@override
|
||||
String get adUnlocked => 'Unlocked for today';
|
||||
|
||||
@override
|
||||
String get chooseNode => 'Choose server';
|
||||
@override
|
||||
String get searchPh => 'Search country / city';
|
||||
@override
|
||||
String get smartSelect => 'Smart select';
|
||||
@override
|
||||
String get smartSub => 'Picks the best node for your network';
|
||||
@override
|
||||
String get recommended => 'Recommended';
|
||||
|
||||
@override
|
||||
String get statsTitle => 'Statistics';
|
||||
@override
|
||||
String get trafficMonth => 'Traffic';
|
||||
@override
|
||||
String get avgPing => 'Avg ping';
|
||||
@override
|
||||
String get durMonth => 'Time';
|
||||
@override
|
||||
String get weekTraffic => 'This week (GB)';
|
||||
@override
|
||||
List<String> get days7 => const ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
|
||||
|
||||
@override
|
||||
String get meTitle => 'Account';
|
||||
@override
|
||||
String get proMember => 'PRO member';
|
||||
@override
|
||||
String get freePlanName => 'Free';
|
||||
@override
|
||||
String get expires => 'Expires';
|
||||
@override
|
||||
String get upgradeBtn => 'Renew / Upgrade';
|
||||
@override
|
||||
String get accInfoTitle => 'Account info';
|
||||
@override
|
||||
String get accEmail => 'Email';
|
||||
@override
|
||||
String get accPassword => 'Password';
|
||||
@override
|
||||
String get accChange => 'Change';
|
||||
@override
|
||||
String get myDevices => 'My devices';
|
||||
@override
|
||||
String get devicesSub => 'Up to 5 devices on PRO';
|
||||
@override
|
||||
String get thisDevice => 'This device';
|
||||
@override
|
||||
String get remove => 'Remove';
|
||||
@override
|
||||
String get redeemEntry => 'Redeem & buy';
|
||||
@override
|
||||
String get contactEntry => 'Contact us';
|
||||
@override
|
||||
String get signOut => 'Sign out';
|
||||
@override
|
||||
String get language => 'Language';
|
||||
@override
|
||||
String get darkAppearance => 'Dark appearance';
|
||||
@override
|
||||
String get stateOn => 'On';
|
||||
@override
|
||||
String get followLight => 'Off';
|
||||
@override
|
||||
String get protocol => 'Protocol';
|
||||
|
||||
@override
|
||||
String get choosePlan => 'Choose plan';
|
||||
@override
|
||||
String get freePlan => 'Free';
|
||||
@override
|
||||
String get proPlan => 'Pro';
|
||||
@override
|
||||
String get teamPlan => 'Team';
|
||||
@override
|
||||
String get perMonth => '/mo';
|
||||
@override
|
||||
String get current => 'Current';
|
||||
@override
|
||||
String get upgrade => 'Upgrade';
|
||||
@override
|
||||
String get choose => 'Choose';
|
||||
@override
|
||||
String get mostPopular => 'Popular';
|
||||
@override
|
||||
List<String> get featsFree => const [
|
||||
'1 basic node only',
|
||||
'10 min per day',
|
||||
'Watch an ad to start',
|
||||
'7-day free trial on sign-up',
|
||||
];
|
||||
@override
|
||||
List<String> get featsPro =>
|
||||
const ['80+ locations', 'Unlimited · fast', '5 devices', 'Streaming optimized'];
|
||||
@override
|
||||
List<String> get featsTeam =>
|
||||
const ['Everything in Pro', '10 seats', 'Central billing', 'Priority support'];
|
||||
|
||||
@override
|
||||
String get redeemTitle => 'Redeem & buy';
|
||||
@override
|
||||
String get redeemCodeTitle => 'Redeem a code';
|
||||
@override
|
||||
String get redeemPh => 'Enter activation code';
|
||||
@override
|
||||
String get redeemBtn => 'Redeem';
|
||||
@override
|
||||
String get redeemOk => 'Activated · PRO unlocked';
|
||||
@override
|
||||
String get buyTitle => 'Where to buy';
|
||||
@override
|
||||
String get buySub => 'In-app payment is unavailable. Get a code via:';
|
||||
@override
|
||||
String get chStore => 'Self-serve store';
|
||||
@override
|
||||
String get chEmail => 'Email support';
|
||||
|
||||
@override
|
||||
String get contactTitle => 'Contact us';
|
||||
@override
|
||||
String get contactIntro =>
|
||||
'Need help? Reach us via any channel below — usually replies in minutes.';
|
||||
@override
|
||||
String get contactEmail => 'Email support';
|
||||
@override
|
||||
String get contactStore => 'Self-serve store';
|
||||
@override
|
||||
String get contactHoursTitle => 'Support hours';
|
||||
@override
|
||||
String get contactHours => 'Daily 9:00 – 24:00 (GMT+8)';
|
||||
|
||||
@override
|
||||
String get authTagline => 'Fast · Stable · Effortless';
|
||||
@override
|
||||
String get tabLogin => 'Log in';
|
||||
@override
|
||||
String get tabRegister => 'Sign up';
|
||||
@override
|
||||
String get emailLabel => 'Email';
|
||||
@override
|
||||
String get emailPh => 'your@email.com';
|
||||
@override
|
||||
String get pwLabel => 'Password';
|
||||
@override
|
||||
String get pwPh => 'Enter password';
|
||||
@override
|
||||
String get setPwPh => 'Set a password (for multi-device login)';
|
||||
@override
|
||||
String get codeLabel => 'Verification code';
|
||||
@override
|
||||
String codeSentTo(String email) => 'Code sent to $email';
|
||||
@override
|
||||
String get sendCode => 'Send code';
|
||||
@override
|
||||
String get resend => 'Resend';
|
||||
@override
|
||||
String get doLogin => 'Log in';
|
||||
@override
|
||||
String get doNext => 'Next';
|
||||
@override
|
||||
String get doCreate => 'Create account';
|
||||
@override
|
||||
String get forgotPw => 'Forgot password?';
|
||||
@override
|
||||
String get tos => 'By continuing you agree to our Terms & Privacy Policy';
|
||||
|
||||
@override
|
||||
String get obSkip => 'Skip';
|
||||
@override
|
||||
String get obNext => 'Next';
|
||||
@override
|
||||
String get obAllow => 'Allow & continue';
|
||||
@override
|
||||
String get obStart => 'Get started';
|
||||
@override
|
||||
String get ob1Title => 'Connect worldwide';
|
||||
@override
|
||||
String get ob1Sub => '80+ locations, auto-fastest routing, rock-solid.';
|
||||
@override
|
||||
String get ob2Title => 'Allow network setup';
|
||||
@override
|
||||
String get ob2Sub => 'The system will ask to add a network profile to build the encrypted tunnel.';
|
||||
@override
|
||||
String get ob3Title => 'Private by design';
|
||||
@override
|
||||
String get ob3Sub => 'End-to-end encrypted. We keep zero browsing logs.';
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
// strings_zh.dart — 中文文案资源(单显)
|
||||
//
|
||||
// 红线词禁用:VPN / 翻墙 / 科学上网 / 突破封锁 / 自由穿越 / Go anywhere。
|
||||
// 脱敏口径:网络加速 / 体验优化 + 隐私保护。套餐数字以 design/CLAUDE.md §7 为准。
|
||||
import 'app_text.dart';
|
||||
|
||||
class StringsZh extends AppText {
|
||||
const StringsZh();
|
||||
|
||||
@override
|
||||
AppLang get lang => AppLang.zh;
|
||||
|
||||
@override
|
||||
String get brand => '穿山甲';
|
||||
@override
|
||||
String get online => '● 在线';
|
||||
@override
|
||||
String get offline => '○ 离线';
|
||||
@override
|
||||
String get capOff => '未连接 · 轻点连接';
|
||||
@override
|
||||
String get capConnecting => '连接中…';
|
||||
@override
|
||||
String get capOn => '已连接 · 网络已加密';
|
||||
@override
|
||||
String get connectNow => '点击连接';
|
||||
@override
|
||||
String get secure => '已加密';
|
||||
|
||||
@override
|
||||
String get tabConnect => '连接';
|
||||
@override
|
||||
String get tabServers => '节点';
|
||||
@override
|
||||
String get tabStats => '统计';
|
||||
@override
|
||||
String get tabMe => '我的';
|
||||
|
||||
@override
|
||||
String get currentNode => '当前节点';
|
||||
@override
|
||||
String get download => '下载';
|
||||
@override
|
||||
String get upload => '上传';
|
||||
@override
|
||||
String get latency => '延迟';
|
||||
|
||||
@override
|
||||
String get quotaToday => '今日剩余';
|
||||
@override
|
||||
String get minutes => '分钟';
|
||||
@override
|
||||
String get quotaFree => '免费版 · 每日 10 分钟';
|
||||
@override
|
||||
String get watchAd => '看广告开始使用';
|
||||
@override
|
||||
String get adUnlocked => '已解锁 · 今日可用';
|
||||
|
||||
@override
|
||||
String get chooseNode => '选择节点';
|
||||
@override
|
||||
String get searchPh => '搜索国家 / 城市';
|
||||
@override
|
||||
String get smartSelect => '智能选择';
|
||||
@override
|
||||
String get smartSub => '根据当前网络环境,自动选择最优节点';
|
||||
@override
|
||||
String get recommended => '推荐';
|
||||
|
||||
@override
|
||||
String get statsTitle => '使用统计';
|
||||
@override
|
||||
String get trafficMonth => '本月流量';
|
||||
@override
|
||||
String get avgPing => '平均延迟';
|
||||
@override
|
||||
String get durMonth => '本月时长';
|
||||
@override
|
||||
String get weekTraffic => '本周流量 (GB)';
|
||||
@override
|
||||
List<String> get days7 => const ['一', '二', '三', '四', '五', '六', '日'];
|
||||
|
||||
@override
|
||||
String get meTitle => '我的';
|
||||
@override
|
||||
String get proMember => 'PRO 会员';
|
||||
@override
|
||||
String get freePlanName => '免费版';
|
||||
@override
|
||||
String get expires => '有效期至';
|
||||
@override
|
||||
String get upgradeBtn => '续费 / 升级';
|
||||
@override
|
||||
String get accInfoTitle => '账户信息';
|
||||
@override
|
||||
String get accEmail => '邮箱';
|
||||
@override
|
||||
String get accPassword => '密码';
|
||||
@override
|
||||
String get accChange => '修改';
|
||||
@override
|
||||
String get myDevices => '我的设备';
|
||||
@override
|
||||
String get devicesSub => 'PRO 套餐最多 5 台设备同时在线';
|
||||
@override
|
||||
String get thisDevice => '当前设备';
|
||||
@override
|
||||
String get remove => '移除';
|
||||
@override
|
||||
String get redeemEntry => '兑换 & 购买';
|
||||
@override
|
||||
String get contactEntry => '联系我们';
|
||||
@override
|
||||
String get signOut => '退出登录';
|
||||
@override
|
||||
String get language => '语言';
|
||||
@override
|
||||
String get darkAppearance => '深色外观';
|
||||
@override
|
||||
String get stateOn => '已开启';
|
||||
@override
|
||||
String get followLight => '跟随浅色';
|
||||
@override
|
||||
String get protocol => '协议';
|
||||
|
||||
@override
|
||||
String get choosePlan => '选择套餐';
|
||||
@override
|
||||
String get freePlan => '免费版';
|
||||
@override
|
||||
String get proPlan => '专业版';
|
||||
@override
|
||||
String get teamPlan => '团队版';
|
||||
@override
|
||||
String get perMonth => '/月';
|
||||
@override
|
||||
String get current => '当前';
|
||||
@override
|
||||
String get upgrade => '立即升级';
|
||||
@override
|
||||
String get choose => '选择';
|
||||
@override
|
||||
String get mostPopular => '最受欢迎';
|
||||
@override
|
||||
List<String> get featsFree =>
|
||||
const ['仅 1 个基础节点', '每日 10 分钟时长', '使用前观看广告', '注册享 7 天免费试用'];
|
||||
@override
|
||||
List<String> get featsPro =>
|
||||
const ['80+ 全球节点', '无限流量 · 极速', '5 台设备同时在线', '流媒体优化'];
|
||||
@override
|
||||
List<String> get featsTeam =>
|
||||
const ['专业版全部功能', '10 个成员席位', '集中计费与管理', '优先客服'];
|
||||
|
||||
@override
|
||||
String get redeemTitle => '兑换 & 购买';
|
||||
@override
|
||||
String get redeemCodeTitle => '兑换激活码';
|
||||
@override
|
||||
String get redeemPh => '输入激活码';
|
||||
@override
|
||||
String get redeemBtn => '激活';
|
||||
@override
|
||||
String get redeemOk => '激活成功 · PRO 已开通';
|
||||
@override
|
||||
String get buyTitle => '购买渠道';
|
||||
@override
|
||||
String get buySub => 'App 内不支持直接支付。请通过以下渠道获取激活码:';
|
||||
@override
|
||||
String get chStore => '自助发卡商店';
|
||||
@override
|
||||
String get chEmail => '邮箱客服';
|
||||
|
||||
@override
|
||||
String get contactTitle => '联系我们';
|
||||
@override
|
||||
String get contactIntro => '遇到问题?通过以下任一渠道联系我们,通常数分钟内回复。';
|
||||
@override
|
||||
String get contactEmail => '邮箱客服';
|
||||
@override
|
||||
String get contactStore => '自助发卡商店';
|
||||
@override
|
||||
String get contactHoursTitle => '服务时间';
|
||||
@override
|
||||
String get contactHours => '每日 9:00 – 24:00 (GMT+8)';
|
||||
|
||||
@override
|
||||
String get authTagline => '极速 · 稳定 · 省心';
|
||||
@override
|
||||
String get tabLogin => '登录';
|
||||
@override
|
||||
String get tabRegister => '注册';
|
||||
@override
|
||||
String get emailLabel => '邮箱';
|
||||
@override
|
||||
String get emailPh => '你的邮箱地址';
|
||||
@override
|
||||
String get pwLabel => '密码';
|
||||
@override
|
||||
String get pwPh => '输入密码';
|
||||
@override
|
||||
String get setPwPh => '设置登录密码(用于多端登录)';
|
||||
@override
|
||||
String get codeLabel => '邮箱验证码';
|
||||
@override
|
||||
String codeSentTo(String email) => '验证码已发送至 $email';
|
||||
@override
|
||||
String get sendCode => '发送验证码';
|
||||
@override
|
||||
String get resend => '重新发送';
|
||||
@override
|
||||
String get doLogin => '登录';
|
||||
@override
|
||||
String get doNext => '下一步';
|
||||
@override
|
||||
String get doCreate => '创建账户';
|
||||
@override
|
||||
String get forgotPw => '忘记密码?';
|
||||
@override
|
||||
String get tos => '继续即代表同意《服务条款》与《隐私政策》';
|
||||
|
||||
@override
|
||||
String get obSkip => '跳过';
|
||||
@override
|
||||
String get obNext => '下一步';
|
||||
@override
|
||||
String get obAllow => '允许并继续';
|
||||
@override
|
||||
String get obStart => '开始使用';
|
||||
@override
|
||||
String get ob1Title => '一键连接全球';
|
||||
@override
|
||||
String get ob1Sub => '80+ 节点,智能选择最快线路,稳定不掉线。';
|
||||
@override
|
||||
String get ob2Title => '授权网络配置';
|
||||
@override
|
||||
String get ob2Sub => '系统会请求添加一个网络配置,用于建立加密隧道。';
|
||||
@override
|
||||
String get ob3Title => '安全 · 无日志';
|
||||
@override
|
||||
String get ob3Sub => '端到端加密,我们不记录你的任何浏览数据。';
|
||||
}
|
||||
+20
-21
@@ -1,30 +1,29 @@
|
||||
// main.dart — 入口(演示态)
|
||||
// 串接:登录 → 引导 → 主框架(4 Tab)
|
||||
// 串接:登录 → 引导 → 主框架(4 Tab);状态层统一走 Riverpod。
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import 'pangolin_theme.dart';
|
||||
import 'widgets/pangolin_widgets.dart';
|
||||
import 'state/app_providers.dart';
|
||||
import 'widgets/auth_screen.dart';
|
||||
import 'widgets/home_shell.dart';
|
||||
import 'widgets/onboarding_screen.dart';
|
||||
|
||||
void main() => runApp(const PangolinApp());
|
||||
void main() => runApp(const ProviderScope(child: PangolinApp()));
|
||||
|
||||
class PangolinApp extends StatefulWidget {
|
||||
class PangolinApp extends ConsumerWidget {
|
||||
const PangolinApp({super.key});
|
||||
@override
|
||||
State<PangolinApp> createState() => _PangolinAppState();
|
||||
}
|
||||
|
||||
class _PangolinAppState extends State<PangolinApp> {
|
||||
bool zh = true;
|
||||
ThemeMode mode = ThemeMode.system;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final mode = ref.watch(themeModeProvider);
|
||||
return MaterialApp(
|
||||
title: '穿山甲',
|
||||
debugShowCheckedModeBanner: false,
|
||||
theme: PangolinTheme.light,
|
||||
darkTheme: PangolinTheme.dark,
|
||||
themeMode: mode,
|
||||
home: RootFlow(zh: zh),
|
||||
home: const RootFlow(),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -32,25 +31,25 @@ class _PangolinAppState extends State<PangolinApp> {
|
||||
/// 应用阶段:登录 → 引导 → 主应用
|
||||
enum AppStage { auth, onboarding, app }
|
||||
|
||||
class RootFlow extends StatefulWidget {
|
||||
const RootFlow({super.key, this.zh = true});
|
||||
final bool zh;
|
||||
class RootFlow extends ConsumerStatefulWidget {
|
||||
const RootFlow({super.key});
|
||||
@override
|
||||
State<RootFlow> createState() => _RootFlowState();
|
||||
ConsumerState<RootFlow> createState() => _RootFlowState();
|
||||
}
|
||||
|
||||
class _RootFlowState extends State<RootFlow> {
|
||||
class _RootFlowState extends ConsumerState<RootFlow> {
|
||||
AppStage stage = AppStage.auth;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final t = ref.watch(appTextProvider);
|
||||
switch (stage) {
|
||||
case AppStage.auth:
|
||||
return AuthScreen(zh: widget.zh, onDone: () => setState(() => stage = AppStage.onboarding));
|
||||
return AuthScreen(t: t, onDone: () => setState(() => stage = AppStage.onboarding));
|
||||
case AppStage.onboarding:
|
||||
return OnboardingScreen(onDone: () => setState(() => stage = AppStage.app));
|
||||
return OnboardingScreen(t: t, onDone: () => setState(() => stage = AppStage.app));
|
||||
case AppStage.app:
|
||||
return HomeShell(zh: widget.zh);
|
||||
return const HomeShell();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
// node.dart — 加速节点数据模型
|
||||
import '../l10n/app_text.dart';
|
||||
|
||||
/// 节点标签(决定副标题语义胶囊)。
|
||||
enum NodeTag { none, streaming, p2p }
|
||||
|
||||
/// 单个加速节点。名称按语言单显;副标题脱敏(无红线词)。
|
||||
class Node {
|
||||
const Node({
|
||||
required this.code,
|
||||
required this.nameZh,
|
||||
required this.nameEn,
|
||||
required this.ping,
|
||||
this.tag = NodeTag.none,
|
||||
});
|
||||
|
||||
/// 2 字母国家码(HK/JP/SG…),界面以码块渲染,绝不用 emoji 国旗。
|
||||
final String code;
|
||||
final String nameZh;
|
||||
final String nameEn;
|
||||
|
||||
/// 演示延迟(ms)。
|
||||
final int ping;
|
||||
final NodeTag tag;
|
||||
|
||||
String localizedName(AppLang lang) => lang == AppLang.zh ? nameZh : nameEn;
|
||||
|
||||
/// 副标题:有标签时显示语义文字,否则用拉丁地名(两语言通用,不串语言)。
|
||||
String localizedSub(AppLang lang) {
|
||||
switch (tag) {
|
||||
case NodeTag.streaming:
|
||||
return lang == AppLang.zh ? '流媒体优化' : 'Streaming';
|
||||
case NodeTag.p2p:
|
||||
return 'P2P';
|
||||
case NodeTag.none:
|
||||
return nameEn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 智能选择的哨兵选中值。
|
||||
const String kSmartNodeCode = 'AUTO';
|
||||
|
||||
/// 演示节点清单(对齐 design/ui_kits/mobile/parts.jsx 的 SERVERS)。
|
||||
const List<Node> kDemoNodes = [
|
||||
Node(code: 'HK', nameZh: '香港 · 流媒体', nameEn: 'Hong Kong', ping: 18, tag: NodeTag.streaming),
|
||||
Node(code: 'JP', nameZh: '日本 东京', nameEn: 'Tokyo', ping: 32, tag: NodeTag.p2p),
|
||||
Node(code: 'SG', nameZh: '新加坡', nameEn: 'Singapore', ping: 54, tag: NodeTag.p2p),
|
||||
Node(code: 'TW', nameZh: '台湾 台北', nameEn: 'Taipei', ping: 28),
|
||||
Node(code: 'US', nameZh: '美国 洛杉矶', nameEn: 'Los Angeles', ping: 146, tag: NodeTag.streaming),
|
||||
Node(code: 'DE', nameZh: '德国 法兰克福', nameEn: 'Frankfurt', ping: 198),
|
||||
Node(code: 'UK', nameZh: '英国 伦敦', nameEn: 'London', ping: 210),
|
||||
Node(code: 'KR', nameZh: '韩国 首尔', nameEn: 'Seoul', ping: 41),
|
||||
];
|
||||
@@ -1,5 +1,5 @@
|
||||
// pangolin_theme.dart
|
||||
// 穿山甲 VPN · Pangolin VPN — Flutter design tokens
|
||||
// 穿山甲 · Pangolin — Flutter design tokens
|
||||
//
|
||||
// Single Dart source mirroring colors_and_type.css.
|
||||
// Fonts are loaded at runtime via the google_fonts package (no local ttf needed).
|
||||
|
||||
@@ -0,0 +1,387 @@
|
||||
// account_page.dart — 账户页(套餐横幅 + 账户信息 + 设备/兑换/联系 + 语言/主题)
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import '../state/app_providers.dart';
|
||||
import '../widgets/account_screens.dart';
|
||||
import '../widgets/app_top_bar.dart';
|
||||
import '../widgets/pangolin_icons.dart';
|
||||
|
||||
const String kDemoEmail = 'me@pangolin.vpn';
|
||||
|
||||
class AccountPage extends ConsumerWidget {
|
||||
const AccountPage({super.key, required this.isWide});
|
||||
final bool isWide;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final c = context.pangolin;
|
||||
final t = ref.watch(appTextProvider);
|
||||
final isFree = ref.watch(isFreePlanProvider);
|
||||
final lang = ref.watch(localeProvider);
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final pad = isWide ? 28.0 : 20.0;
|
||||
|
||||
void push(Widget page) =>
|
||||
Navigator.of(context).push(MaterialPageRoute(builder: (_) => page));
|
||||
|
||||
final body = ListView(
|
||||
padding: EdgeInsets.fromLTRB(pad, isWide ? 6 : 0, pad, 24),
|
||||
children: [
|
||||
_PlanBanner(t: t, isFree: isFree, onUpgrade: () => push(PlansScreen(t: t))),
|
||||
const SizedBox(height: 18),
|
||||
// 账户信息
|
||||
_SectionLabel(text: t.accInfoTitle),
|
||||
_Card(children: [
|
||||
_InfoRow(icon: PangolinIcons.mail, title: t.accEmail, value: kDemoEmail, trailing: _changeHint(c, t)),
|
||||
Divider(height: 1, color: c.border),
|
||||
_InfoRow(icon: PangolinIcons.lock, title: t.accPassword, value: '••••••••••', trailing: _changeHint(c, t)),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
// 设备 / 兑换 / 联系
|
||||
_Card(children: [
|
||||
_NavRow(icon: PangolinIcons.monitorSmartphone, title: t.myDevices, onTap: () => push(DevicesScreen(t: t))),
|
||||
Divider(height: 1, color: c.border),
|
||||
_NavRow(icon: PangolinIcons.shoppingBag, title: t.redeemEntry, onTap: () => push(RedeemScreen(t: t))),
|
||||
Divider(height: 1, color: c.border),
|
||||
_NavRow(icon: PangolinIcons.messageCircle, title: t.contactEntry, onTap: () => push(ContactScreen(t: t))),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
// 语言 / 主题 / 协议
|
||||
_Card(children: [
|
||||
_CustomRow(
|
||||
icon: PangolinIcons.globe,
|
||||
title: t.language,
|
||||
trailing: _LangSwitch(lang: lang, onChange: (l) => ref.read(localeProvider.notifier).state = l),
|
||||
),
|
||||
Divider(height: 1, color: c.border),
|
||||
_CustomRow(
|
||||
icon: isDark ? PangolinIcons.moon : PangolinIcons.sun,
|
||||
title: t.darkAppearance,
|
||||
subtitle: isDark ? t.stateOn : t.followLight,
|
||||
trailing: _PangolinSwitch(
|
||||
value: isDark,
|
||||
onChanged: (v) => ref.read(themeModeProvider.notifier).state = v ? ThemeMode.dark : ThemeMode.light,
|
||||
),
|
||||
),
|
||||
Divider(height: 1, color: c.border),
|
||||
_CustomRow(
|
||||
icon: PangolinIcons.shield,
|
||||
title: t.protocol,
|
||||
trailing: Text('WireGuard', style: PangolinText.mono.copyWith(color: c.fg3, fontSize: 13)),
|
||||
),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
// 演示:免费版视角开关
|
||||
_Card(children: [
|
||||
_CustomRow(
|
||||
icon: PangolinIcons.clock,
|
||||
title: lang == AppLang.zh ? '演示:免费版视角' : 'Demo: free-tier view',
|
||||
subtitle: lang == AppLang.zh ? '切换额度卡与套餐横幅' : 'Toggles quota UI & plan banner',
|
||||
trailing: _PangolinSwitch(
|
||||
value: isFree,
|
||||
onChanged: (v) => ref.read(isFreePlanProvider.notifier).state = v,
|
||||
),
|
||||
),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
_Card(children: [
|
||||
_NavRow(icon: PangolinIcons.logOut, title: t.signOut, danger: true, onTap: () {}),
|
||||
]),
|
||||
],
|
||||
);
|
||||
|
||||
if (isWide) return body;
|
||||
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
AppTopBar(brand: t.brand),
|
||||
PageTitle(title: t.meTitle),
|
||||
Expanded(child: body),
|
||||
]);
|
||||
}
|
||||
|
||||
Widget _changeHint(PangolinScheme c, AppText t) =>
|
||||
Text(t.accChange, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600, fontSize: 13));
|
||||
}
|
||||
|
||||
class _PlanBanner extends StatelessWidget {
|
||||
const _PlanBanner({required this.t, required this.isFree, required this.onUpgrade});
|
||||
final AppText t;
|
||||
final bool isFree;
|
||||
final VoidCallback onUpgrade;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
if (isFree) {
|
||||
return 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: [
|
||||
Row(children: [
|
||||
Container(
|
||||
width: 44, height: 44,
|
||||
decoration: BoxDecoration(color: c.bgSubtle, shape: BoxShape.circle),
|
||||
child: Icon(PangolinIcons.user, size: 22, color: c.fg2),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(kDemoEmail, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 2),
|
||||
decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
|
||||
child: Text(t.freePlanName, style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600, fontSize: 11)),
|
||||
),
|
||||
])),
|
||||
_UpgradeButton(label: t.upgradeBtn, onTap: onUpgrade),
|
||||
]),
|
||||
]),
|
||||
);
|
||||
}
|
||||
// PRO 渐变横幅
|
||||
return 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(0.18), shape: BoxShape.circle),
|
||||
child: const Icon(PangolinIcons.crown, size: 22, color: PangolinColors.white),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(kDemoEmail, style: const TextStyle(color: PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 16)),
|
||||
const SizedBox(height: 4),
|
||||
Text('${t.proMember} · 2026-12-31',
|
||||
style: TextStyle(color: PangolinColors.white.withOpacity(0.85), fontSize: 12)),
|
||||
])),
|
||||
FilledButton(
|
||||
onPressed: onUpgrade,
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: PangolinColors.white,
|
||||
foregroundColor: PangolinColors.clay700,
|
||||
shape: const StadiumBorder(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||
),
|
||||
child: Text(t.upgradeBtn, style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13)),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _UpgradeButton extends StatelessWidget {
|
||||
const _UpgradeButton({required this.label, required this.onTap});
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return FilledButton(
|
||||
onPressed: onTap,
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: c.accent,
|
||||
foregroundColor: c.fgOnAccent,
|
||||
shape: const StadiumBorder(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
||||
),
|
||||
child: Text(label, style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SectionLabel extends StatelessWidget {
|
||||
const _SectionLabel({required this.text});
|
||||
final String text;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(4, 0, 4, 10),
|
||||
child: Text(text, style: PangolinText.sm.copyWith(color: c.fg2, fontWeight: FontWeight.w700, fontSize: 13)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Card extends StatelessWidget {
|
||||
const _Card({required this.children});
|
||||
final List<Widget> children;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return 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: children),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoRow extends StatelessWidget {
|
||||
const _InfoRow({required this.icon, required this.title, required this.value, this.trailing});
|
||||
final IconData icon;
|
||||
final String title, value;
|
||||
final Widget? trailing;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 13),
|
||||
child: Row(children: [
|
||||
_IconBox(icon: icon),
|
||||
const SizedBox(width: 13),
|
||||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(title, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w500, fontSize: 15)),
|
||||
Text(value, style: PangolinText.caption.copyWith(color: c.fg3)),
|
||||
])),
|
||||
if (trailing != null) trailing!,
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _NavRow extends StatelessWidget {
|
||||
const _NavRow({required this.icon, required this.title, required this.onTap, this.danger = false});
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final VoidCallback onTap;
|
||||
final bool danger;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
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 (!danger) Icon(PangolinIcons.chevronRight, size: 18, color: c.fg3),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CustomRow extends StatelessWidget {
|
||||
const _CustomRow({required this.icon, required this.title, this.subtitle, required this.trailing});
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final Widget trailing;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 13),
|
||||
child: Row(children: [
|
||||
_IconBox(icon: icon),
|
||||
const SizedBox(width: 13),
|
||||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(title, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w500, fontSize: 15)),
|
||||
if (subtitle != null) Text(subtitle!, style: PangolinText.caption.copyWith(color: c.fg3)),
|
||||
])),
|
||||
trailing,
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _IconBox extends StatelessWidget {
|
||||
const _IconBox({required this.icon});
|
||||
final IconData icon;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Container(
|
||||
width: 32, height: 32,
|
||||
decoration: BoxDecoration(color: c.accentSubtle, borderRadius: BorderRadius.circular(PangolinRadius.sm)),
|
||||
child: Icon(icon, size: 17, color: c.accent),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 段控:中文 / EN(单显切换)。
|
||||
class _LangSwitch extends StatelessWidget {
|
||||
const _LangSwitch({required this.lang, required this.onChange});
|
||||
final AppLang lang;
|
||||
final ValueChanged<AppLang> onChange;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
Widget seg(AppLang v, String label) {
|
||||
final active = lang == v;
|
||||
return GestureDetector(
|
||||
onTap: () => onChange(v),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 5),
|
||||
decoration: BoxDecoration(
|
||||
color: active ? c.accent : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.full),
|
||||
),
|
||||
child: Text(label,
|
||||
style: PangolinText.caption.copyWith(
|
||||
color: active ? c.fgOnAccent : c.fg3, fontWeight: FontWeight.w700, fontSize: 12.5)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(3),
|
||||
decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
|
||||
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
||||
seg(AppLang.zh, '中文'),
|
||||
const SizedBox(width: 2),
|
||||
seg(AppLang.en, 'EN'),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PangolinSwitch extends StatelessWidget {
|
||||
const _PangolinSwitch({required this.value, required this.onChanged});
|
||||
final bool value;
|
||||
final ValueChanged<bool> onChanged;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return GestureDetector(
|
||||
onTap: () => onChanged(!value),
|
||||
child: AnimatedContainer(
|
||||
duration: PangolinMotion.base,
|
||||
curve: PangolinMotion.easeOut,
|
||||
width: 46, height: 28,
|
||||
decoration: BoxDecoration(color: value ? c.accent : c.borderStrong, borderRadius: BorderRadius.circular(PangolinRadius.full)),
|
||||
child: AnimatedAlign(
|
||||
duration: PangolinMotion.base,
|
||||
curve: PangolinMotion.easeOut,
|
||||
alignment: value ? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(3),
|
||||
child: Container(width: 22, height: 22, decoration: const BoxDecoration(color: PangolinColors.white, shape: BoxShape.circle)),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
// connect_page.dart — 连接页(窄屏单栏 / 宽屏双栏,同一份代码按断点切换)
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../models/node.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import '../state/app_providers.dart';
|
||||
import '../state/connection_provider.dart';
|
||||
import '../state/nodes_provider.dart';
|
||||
import '../state/quota_provider.dart';
|
||||
import '../widgets/app_top_bar.dart';
|
||||
import '../widgets/connect_button.dart';
|
||||
import '../widgets/country_code.dart';
|
||||
import '../widgets/pangolin_icons.dart';
|
||||
import '../widgets/quota_card.dart';
|
||||
|
||||
class ConnectPage extends ConsumerWidget {
|
||||
const ConnectPage({super.key, required this.isWide, required this.onOpenNodes});
|
||||
|
||||
final bool isWide;
|
||||
final VoidCallback onOpenNodes;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final c = context.pangolin;
|
||||
final t = ref.watch(appTextProvider);
|
||||
final conn = ref.watch(connectionProvider);
|
||||
final node = ref.watch(effectiveNodeProvider);
|
||||
final smart = ref.watch(isSmartSelectProvider);
|
||||
final isFree = ref.watch(isFreePlanProvider);
|
||||
final quota = ref.watch(quotaProvider);
|
||||
|
||||
final caption = switch (conn.phase) {
|
||||
VpnPhase.off => t.capOff,
|
||||
VpnPhase.connecting => t.capConnecting,
|
||||
VpnPhase.on => t.capOn,
|
||||
};
|
||||
|
||||
final button = ConnectButton(
|
||||
phase: conn.phase,
|
||||
elapsed: conn.elapsed,
|
||||
offLabel: t.connectNow,
|
||||
secureLabel: t.secure,
|
||||
onTap: () => ref.read(connectionProvider.notifier).toggle(),
|
||||
);
|
||||
|
||||
final captionWidget = Text(caption,
|
||||
style: PangolinText.body.copyWith(color: c.fg2, fontWeight: FontWeight.w600));
|
||||
|
||||
final infoChildren = <Widget>[
|
||||
if (isFree)
|
||||
QuotaCard(quota: quota, t: t, onWatchAd: () => ref.read(quotaProvider.notifier).watchAd()),
|
||||
if (conn.phase == VpnPhase.on) _SpeedRow(t: t, node: node),
|
||||
_CurrentNodeCard(t: t, node: node, smart: smart, showLabel: isWide, onTap: onOpenNodes),
|
||||
];
|
||||
|
||||
final statusTrailing = Text(
|
||||
conn.phase == VpnPhase.on ? t.online : t.offline,
|
||||
style: PangolinText.mono.copyWith(
|
||||
fontSize: 12,
|
||||
color: conn.phase == VpnPhase.on ? c.success : c.fg3,
|
||||
fontWeight: FontWeight.w600),
|
||||
);
|
||||
|
||||
if (isWide) {
|
||||
// 宽屏双栏:左大连接键 / 右信息列(额度卡→当前节点→速率)
|
||||
return Column(children: [
|
||||
Expanded(
|
||||
child: Row(children: [
|
||||
Expanded(
|
||||
flex: 5,
|
||||
child: Center(
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
button,
|
||||
const SizedBox(height: 24),
|
||||
captionWidget,
|
||||
]),
|
||||
),
|
||||
),
|
||||
Container(width: 1, color: c.border),
|
||||
SizedBox(
|
||||
width: 332,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
for (final w in infoChildren) Padding(padding: const EdgeInsets.only(bottom: 14), child: w),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
]);
|
||||
}
|
||||
|
||||
// 窄屏单栏
|
||||
return Column(children: [
|
||||
AppTopBar(brand: t.brand, trailing: statusTrailing),
|
||||
Expanded(
|
||||
child: Center(
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
button,
|
||||
const SizedBox(height: 24),
|
||||
captionWidget,
|
||||
]),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 0, 20, 18),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
|
||||
for (final w in infoChildren) Padding(padding: const EdgeInsets.only(bottom: 12), child: w),
|
||||
]),
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/// 实时速率行(连接成功时显示;演示值)。
|
||||
class _SpeedRow extends StatelessWidget {
|
||||
const _SpeedRow({required this.t, required this.node});
|
||||
final AppText t;
|
||||
final Node node;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
final metrics = [
|
||||
(PangolinIcons.arrowDown, t.download, '86.4', 'Mb/s'),
|
||||
(PangolinIcons.arrowUp, t.upload, '12.1', 'Mb/s'),
|
||||
(PangolinIcons.zap, t.latency, '${node.ping}', 'ms'),
|
||||
];
|
||||
return Row(children: [
|
||||
for (var i = 0; i < metrics.length; i++)
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(right: i < metrics.length - 1 ? 12 : 0),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.fromLTRB(13, 11, 13, 11),
|
||||
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: [
|
||||
Row(children: [
|
||||
Icon(metrics[i].$1, size: 13, color: c.accent),
|
||||
const SizedBox(width: 5),
|
||||
Flexible(
|
||||
child: Text(metrics[i].$2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600, fontSize: 11)),
|
||||
),
|
||||
]),
|
||||
const SizedBox(height: 4),
|
||||
Text.rich(TextSpan(
|
||||
text: metrics[i].$3,
|
||||
style: PangolinText.mono.copyWith(fontSize: 16, color: c.fg1, fontWeight: FontWeight.w500),
|
||||
children: [TextSpan(text: ' ${metrics[i].$4}', style: PangolinText.caption.copyWith(color: c.fg3, fontSize: 10.5))],
|
||||
)),
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/// 当前节点卡(智能选择时展示「智能选择 + zap」)。
|
||||
class _CurrentNodeCard extends StatelessWidget {
|
||||
const _CurrentNodeCard({
|
||||
required this.t,
|
||||
required this.node,
|
||||
required this.smart,
|
||||
required this.showLabel,
|
||||
required this.onTap,
|
||||
});
|
||||
final AppText t;
|
||||
final Node node;
|
||||
final bool smart;
|
||||
final bool showLabel;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
final title = smart ? t.smartSelect : node.localizedName(t.lang);
|
||||
final sub = smart
|
||||
? '${node.localizedName(t.lang)} · ${node.ping}ms'
|
||||
: '${node.localizedSub(t.lang)} · ${node.ping}ms';
|
||||
return Material(
|
||||
color: c.surface,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.lg),
|
||||
side: BorderSide(color: c.border),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Row(children: [
|
||||
CountryCode(code: node.code, active: true),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
if (showLabel)
|
||||
Text(t.currentNode,
|
||||
style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600, fontSize: 11)),
|
||||
Row(children: [
|
||||
Flexible(
|
||||
child: Text(title,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
|
||||
),
|
||||
if (smart) ...[const SizedBox(width: 6), Icon(PangolinIcons.zap, size: 13, color: c.accent)],
|
||||
]),
|
||||
Text(sub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
|
||||
]),
|
||||
),
|
||||
Icon(PangolinIcons.chevronRight, size: 20, color: c.fg3),
|
||||
]),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
// nodes_page.dart — 节点页(置顶智能选择推荐卡 + 搜索 + 列表/双列网格)
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../models/node.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import '../state/app_providers.dart';
|
||||
import '../state/connection_provider.dart';
|
||||
import '../state/nodes_provider.dart';
|
||||
import '../widgets/app_top_bar.dart';
|
||||
import '../widgets/country_code.dart';
|
||||
import '../widgets/pangolin_icons.dart';
|
||||
import '../widgets/server_tile.dart';
|
||||
import '../widgets/smart_select_card.dart';
|
||||
|
||||
class NodesPage extends ConsumerStatefulWidget {
|
||||
const NodesPage({super.key, required this.isWide, required this.onPicked});
|
||||
final bool isWide;
|
||||
final VoidCallback onPicked;
|
||||
|
||||
@override
|
||||
ConsumerState<NodesPage> createState() => _NodesPageState();
|
||||
}
|
||||
|
||||
class _NodesPageState extends ConsumerState<NodesPage> {
|
||||
String _q = '';
|
||||
|
||||
void _pick(String code) {
|
||||
ref.read(selectedNodeCodeProvider.notifier).state = code;
|
||||
ref.read(connectionProvider.notifier).onNodeChanged();
|
||||
widget.onPicked();
|
||||
}
|
||||
|
||||
List<Node> _filtered(List<Node> nodes) {
|
||||
if (_q.trim().isEmpty) return nodes;
|
||||
final q = _q.toLowerCase();
|
||||
return nodes
|
||||
.where((n) => (n.nameZh + n.nameEn + n.code).toLowerCase().contains(q))
|
||||
.toList();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
final t = ref.watch(appTextProvider);
|
||||
final selected = ref.watch(selectedNodeCodeProvider);
|
||||
final nodes = _filtered(ref.watch(nodesProvider));
|
||||
final smart = selected == kSmartNodeCode;
|
||||
|
||||
final smartCard = SmartSelectCard(t: t, selected: smart, onTap: () => _pick(kSmartNodeCode));
|
||||
final search = _SearchBox(hint: t.searchPh, onChanged: (v) => setState(() => _q = v));
|
||||
|
||||
if (widget.isWide) {
|
||||
return ListView(
|
||||
padding: const EdgeInsets.fromLTRB(28, 6, 28, 24),
|
||||
children: [
|
||||
smartCard,
|
||||
const SizedBox(height: 14),
|
||||
ConstrainedBox(constraints: const BoxConstraints(maxWidth: 380), child: search),
|
||||
const SizedBox(height: 14),
|
||||
GridView.count(
|
||||
crossAxisCount: 2,
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
mainAxisSpacing: 11,
|
||||
crossAxisSpacing: 11,
|
||||
childAspectRatio: 4.4,
|
||||
children: [
|
||||
for (final n in nodes)
|
||||
_NodeGridTile(node: n, lang: t.lang, active: !smart && n.code == selected, onTap: () => _pick(n.code)),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// 窄屏:顶栏 + 标题 + 推荐卡 + 搜索 + 分组列表
|
||||
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
AppTopBar(brand: t.brand),
|
||||
PageTitle(title: t.chooseNode),
|
||||
Expanded(
|
||||
child: ListView(
|
||||
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
|
||||
children: [
|
||||
smartCard,
|
||||
const SizedBox(height: 12),
|
||||
search,
|
||||
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 < nodes.length; i++) ...[
|
||||
ServerTile(
|
||||
node: nodes[i],
|
||||
lang: t.lang,
|
||||
active: !smart && nodes[i].code == selected,
|
||||
onTap: () => _pick(nodes[i].code),
|
||||
),
|
||||
if (i < nodes.length - 1) Divider(height: 1, thickness: 1, color: c.border),
|
||||
],
|
||||
]),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
class _SearchBox extends StatelessWidget {
|
||||
const _SearchBox({required this.hint, required this.onChanged});
|
||||
final String hint;
|
||||
final ValueChanged<String> onChanged;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Container(
|
||||
decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.md)),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: Row(children: [
|
||||
Icon(PangolinIcons.search, size: 18, color: c.fg3),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
onChanged: onChanged,
|
||||
style: PangolinText.sm.copyWith(color: c.fg1, fontSize: 15),
|
||||
decoration: InputDecoration(
|
||||
isCollapsed: true,
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 12),
|
||||
border: InputBorder.none,
|
||||
hintText: hint,
|
||||
hintStyle: PangolinText.sm.copyWith(color: c.fg3, fontSize: 15),
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 宽屏双列网格中的节点块。
|
||||
class _NodeGridTile extends StatelessWidget {
|
||||
const _NodeGridTile({required this.node, required this.lang, required this.active, required this.onTap});
|
||||
final Node node;
|
||||
final AppLang lang;
|
||||
final bool active;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Material(
|
||||
color: active ? c.accentSubtle : c.surface,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.lg),
|
||||
side: BorderSide(color: active ? c.accentBorder : c.border, width: 1.5),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 11),
|
||||
child: Row(children: [
|
||||
CountryCode(code: node.code, active: active),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
|
||||
Text(node.localizedName(lang),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 14.5)),
|
||||
Text(node.localizedSub(lang),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
|
||||
]),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.end, children: [
|
||||
Text('${node.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
|
||||
const SizedBox(height: 5),
|
||||
SignalBars(ping: node.ping),
|
||||
]),
|
||||
if (active) ...[const SizedBox(width: 8), Icon(PangolinIcons.check, size: 18, color: c.accent)],
|
||||
]),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
// stats_page.dart — 统计页(指标卡 + 本周柱状图)
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../pangolin_theme.dart';
|
||||
import '../state/app_providers.dart';
|
||||
import '../widgets/app_top_bar.dart';
|
||||
|
||||
class StatsPage extends ConsumerWidget {
|
||||
const StatsPage({super.key, required this.isWide});
|
||||
final bool isWide;
|
||||
|
||||
static const _vals = [2.1, 3.4, 1.8, 4.6, 5.2, 6.1, 3.0];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final c = context.pangolin;
|
||||
final t = ref.watch(appTextProvider);
|
||||
final maxV = _vals.reduce((a, b) => a > b ? a : b);
|
||||
final pad = isWide ? 28.0 : 20.0;
|
||||
|
||||
final metrics = [
|
||||
(t.trafficMonth, '42.6', 'GB'),
|
||||
(t.avgPing, '29', 'ms'),
|
||||
(t.durMonth, '86.4', 'h'),
|
||||
];
|
||||
|
||||
final body = ListView(
|
||||
padding: EdgeInsets.fromLTRB(pad, isWide ? 6 : 0, pad, 24),
|
||||
children: [
|
||||
Row(children: [
|
||||
for (var i = 0; i < metrics.length; i++)
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(right: i < metrics.length - 1 ? 12 : 0),
|
||||
child: _MetricCard(label: metrics[i].$1, value: metrics[i].$2, unit: metrics[i].$3),
|
||||
),
|
||||
),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
Container(
|
||||
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(t.weekTraffic, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
|
||||
const SizedBox(height: 18),
|
||||
SizedBox(
|
||||
height: isWide ? 150 : 120,
|
||||
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.mono.copyWith(fontSize: 11, color: c.fg3)),
|
||||
const SizedBox(height: 6),
|
||||
Container(
|
||||
height: (isWide ? 104 : 84) * (_vals[i] / maxV),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: c.accent.withOpacity(0.85),
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(6)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(t.days7[i], style: PangolinText.caption.copyWith(color: c.fg3)),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
if (isWide) return body;
|
||||
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
AppTopBar(brand: t.brand),
|
||||
PageTitle(title: t.statsTitle),
|
||||
Expanded(child: body),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
class _MetricCard extends StatelessWidget {
|
||||
const _MetricCard({required this.label, required this.value, required this.unit});
|
||||
final String label, value, unit;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Container(
|
||||
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(label, overflow: TextOverflow.ellipsis, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600)),
|
||||
const SizedBox(height: 6),
|
||||
Text.rich(TextSpan(
|
||||
text: value,
|
||||
style: PangolinText.mono.copyWith(fontSize: 20, color: c.fg1, fontWeight: FontWeight.w500),
|
||||
children: [TextSpan(text: ' $unit', style: PangolinText.caption.copyWith(color: c.fg3))],
|
||||
)),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// app_providers.dart — 语言 / 主题 / 套餐视角等基础状态(Riverpod)
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../l10n/strings_en.dart';
|
||||
import '../l10n/strings_zh.dart';
|
||||
|
||||
/// 当前语言(单显)。设置/账户页段控切换。
|
||||
final localeProvider = StateProvider<AppLang>((ref) => AppLang.zh);
|
||||
|
||||
/// 由语言派生的文案资源——UI 一律通过它取文案,不写死字面量。
|
||||
final appTextProvider = Provider<AppText>((ref) {
|
||||
final lang = ref.watch(localeProvider);
|
||||
return lang == AppLang.zh ? const StringsZh() : const StringsEn();
|
||||
});
|
||||
|
||||
/// 主题模式。默认跟随系统;设置页可显式切深色。
|
||||
final themeModeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.system);
|
||||
|
||||
/// 演示:是否「免费版视角」。免费版才显示额度卡与免费横幅。
|
||||
final isFreePlanProvider = StateProvider<bool>((ref) => true);
|
||||
@@ -0,0 +1,94 @@
|
||||
// connection_provider.dart — 连接状态机(严格三态,禁止乐观显示)
|
||||
//
|
||||
// 设计约定(design/CLAUDE.md §2/§5):连接键三态严格对应状态层事件,
|
||||
// UI 只渲染本通知器的真实状态,绝不在点击时本地乐观翻转。连接握手由
|
||||
// 状态层(此处为 mock 计时器,后续替换为隧道事件)决定何时进入 on。
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
/// 连接阶段。严格三态——与 React 原型一致。
|
||||
enum VpnPhase { off, connecting, on }
|
||||
|
||||
/// 连接状态快照。
|
||||
class ConnectionState {
|
||||
const ConnectionState({required this.phase, this.elapsed = Duration.zero});
|
||||
|
||||
final VpnPhase phase;
|
||||
final Duration elapsed;
|
||||
|
||||
ConnectionState copyWith({VpnPhase? phase, Duration? elapsed}) =>
|
||||
ConnectionState(phase: phase ?? this.phase, elapsed: elapsed ?? this.elapsed);
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
other is ConnectionState && other.phase == phase && other.elapsed == elapsed;
|
||||
|
||||
@override
|
||||
int get hashCode => Object.hash(phase, elapsed);
|
||||
}
|
||||
|
||||
/// 连接状态机。握手时长可注入,便于测试确定化。
|
||||
class ConnectionController extends StateNotifier<ConnectionState> {
|
||||
ConnectionController({this.handshake = const Duration(milliseconds: 1500)})
|
||||
: super(const ConnectionState(phase: VpnPhase.off));
|
||||
|
||||
final Duration handshake;
|
||||
Timer? _handshakeTimer;
|
||||
Timer? _tick;
|
||||
|
||||
/// 用户轻点连接键:仅依据真实状态决定动作,握手中点击被忽略(禁乐观)。
|
||||
void toggle() {
|
||||
switch (state.phase) {
|
||||
case VpnPhase.off:
|
||||
connect();
|
||||
case VpnPhase.on:
|
||||
disconnect();
|
||||
case VpnPhase.connecting:
|
||||
break; // 握手进行中,不响应——避免乐观回退
|
||||
}
|
||||
}
|
||||
|
||||
void connect() {
|
||||
_cancelTimers();
|
||||
state = const ConnectionState(phase: VpnPhase.connecting);
|
||||
_handshakeTimer = Timer(handshake, _onConnected);
|
||||
}
|
||||
|
||||
void disconnect() {
|
||||
_cancelTimers();
|
||||
state = const ConnectionState(phase: VpnPhase.off);
|
||||
}
|
||||
|
||||
/// 切换节点时触发:已连接则重连(短暂回到 connecting)。
|
||||
void onNodeChanged() {
|
||||
if (state.phase == VpnPhase.on || state.phase == VpnPhase.connecting) {
|
||||
connect();
|
||||
}
|
||||
}
|
||||
|
||||
void _onConnected() {
|
||||
state = const ConnectionState(phase: VpnPhase.on);
|
||||
_tick = Timer.periodic(const Duration(seconds: 1), (_) {
|
||||
state = state.copyWith(elapsed: state.elapsed + const Duration(seconds: 1));
|
||||
});
|
||||
}
|
||||
|
||||
void _cancelTimers() {
|
||||
_handshakeTimer?.cancel();
|
||||
_handshakeTimer = null;
|
||||
_tick?.cancel();
|
||||
_tick = null;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_cancelTimers();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
final connectionProvider =
|
||||
StateNotifierProvider<ConnectionController, ConnectionState>(
|
||||
(ref) => ConnectionController(),
|
||||
);
|
||||
@@ -0,0 +1,25 @@
|
||||
// nodes_provider.dart — 节点清单 + 当前选择(含智能选择 AUTO)
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../models/node.dart';
|
||||
|
||||
/// 可用节点(演示数据;接口就绪后替换为 nodes API)。
|
||||
final nodesProvider = Provider<List<Node>>((ref) => kDemoNodes);
|
||||
|
||||
/// 当前选中的节点 code;`AUTO` 表示智能选择(默认)。
|
||||
final selectedNodeCodeProvider = StateProvider<String>((ref) => kSmartNodeCode);
|
||||
|
||||
/// 是否处于智能选择。
|
||||
final isSmartSelectProvider = Provider<bool>(
|
||||
(ref) => ref.watch(selectedNodeCodeProvider) == kSmartNodeCode,
|
||||
);
|
||||
|
||||
/// 实际生效的节点:智能选择时取延迟最小者,否则取选中节点。
|
||||
final effectiveNodeProvider = Provider<Node>((ref) {
|
||||
final nodes = ref.watch(nodesProvider);
|
||||
final code = ref.watch(selectedNodeCodeProvider);
|
||||
if (code == kSmartNodeCode) {
|
||||
return nodes.reduce((a, b) => a.ping <= b.ping ? a : b);
|
||||
}
|
||||
return nodes.firstWhere((n) => n.code == code, orElse: () => nodes.first);
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
// quota_provider.dart — 免费版每日额度状态机(Riverpod,mock 数据)
|
||||
//
|
||||
// 设计约定(design/CLAUDE.md §7 / §2):免费额度权威在服务端,本地仅展示。
|
||||
// 这里以 mock 实现 UI 与数据层解耦的接口形态:剩余分钟 + 是否已看广告解锁。
|
||||
// 接 API 时只替换本通知器内部,UI 不动。
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
/// 免费额度快照。
|
||||
class FreeQuotaState {
|
||||
const FreeQuotaState({
|
||||
this.totalMinutes = 10,
|
||||
this.remainingMinutes = 6,
|
||||
this.adUnlocked = false,
|
||||
});
|
||||
|
||||
/// 每日总额度(分钟)。§7:免费版每日 10 分钟。
|
||||
final int totalMinutes;
|
||||
|
||||
/// 今日剩余分钟(展示值,权威以服务端为准)。
|
||||
final int remainingMinutes;
|
||||
|
||||
/// 今日是否已观看激励视频解锁。
|
||||
final bool adUnlocked;
|
||||
|
||||
/// 进度(0–1),用于进度条宽度。
|
||||
double get progress =>
|
||||
totalMinutes == 0 ? 0 : (remainingMinutes / totalMinutes).clamp(0.0, 1.0);
|
||||
|
||||
/// 是否进入低额度警示(≤3 分钟切 warning 色)。
|
||||
bool get isLow => remainingMinutes <= 3;
|
||||
|
||||
FreeQuotaState copyWith({int? totalMinutes, int? remainingMinutes, bool? adUnlocked}) =>
|
||||
FreeQuotaState(
|
||||
totalMinutes: totalMinutes ?? this.totalMinutes,
|
||||
remainingMinutes: remainingMinutes ?? this.remainingMinutes,
|
||||
adUnlocked: adUnlocked ?? this.adUnlocked,
|
||||
);
|
||||
}
|
||||
|
||||
class QuotaController extends StateNotifier<FreeQuotaState> {
|
||||
QuotaController([FreeQuotaState? initial])
|
||||
: super(initial ?? const FreeQuotaState());
|
||||
|
||||
/// 观看激励视频后解锁今日使用。
|
||||
void watchAd() => state = state.copyWith(adUnlocked: true);
|
||||
|
||||
/// 演示重置(回到未解锁)。
|
||||
void reset() => state = const FreeQuotaState();
|
||||
}
|
||||
|
||||
final quotaProvider = StateNotifierProvider<QuotaController, FreeQuotaState>(
|
||||
(ref) => QuotaController(),
|
||||
);
|
||||
@@ -1,68 +1,74 @@
|
||||
// account_screens.dart — 账户子页(套餐选择 / 设备管理 / 兑换 & 购买 / 联系我们)
|
||||
//
|
||||
// 文案全部经 AppText(l10n,单显)。套餐数字以 design/CLAUDE.md §7 为准。
|
||||
// App 内无任何支付表单——购买仅引导至外部渠道。
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import 'pangolin_button.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;
|
||||
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, fontWeight: FontWeight.w700)),
|
||||
]),
|
||||
),
|
||||
Expanded(child: child),
|
||||
])),
|
||||
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, 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;
|
||||
const PlansScreen({super.key, required this.t, this.onChoose, this.onBack});
|
||||
final AppText t;
|
||||
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 as String?,
|
||||
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 as String?,
|
||||
feats: zh ? ['Pro 全部功能', '10 个成员席位', '集中计费与管理', '优先客服'] : ['Everything in Pro', '10 seats', 'Central billing', 'Priority support'],
|
||||
),
|
||||
(id: 'free', name: t.freePlan, price: '¥0', cta: t.current, featured: false, current: true, pop: null as String?, feats: t.featsFree),
|
||||
(id: 'pro', name: t.proPlan, price: '¥25', cta: t.upgrade, featured: true, current: false, pop: t.mostPopular, feats: t.featsPro),
|
||||
(id: 'team', name: t.teamPlan, price: '¥99', cta: t.choose, featured: false, current: false, pop: null as String?, feats: t.featsTeam),
|
||||
];
|
||||
return _SubScaffold(
|
||||
title: zh ? '选择套餐' : 'Choose plan',
|
||||
title: t.choosePlan,
|
||||
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),
|
||||
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: t.perMonth,
|
||||
features: p.feats, ctaLabel: p.cta, featured: p.featured, isCurrent: p.current,
|
||||
popularLabel: p.pop, onPressed: () => onChoose?.call(p.id),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -72,31 +78,34 @@ class PlansScreen extends StatelessWidget {
|
||||
/// ── 设备管理 ──
|
||||
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;
|
||||
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;
|
||||
const DevicesScreen({super.key, required this.t, this.onBack});
|
||||
final AppText t;
|
||||
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: '1', icon: PangolinIcons.laptop, name: 'MacBook Pro', os: 'macOS 26', active: widget.t.thisDevice, 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'),
|
||||
DeviceItem(id: '3', icon: PangolinIcons.monitorSmartphone, name: 'iPad Air', os: 'iPadOS 26', active: widget.t.lang == AppLang.zh ? '3 小时前' : '3h ago'),
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return _SubScaffold(
|
||||
title: widget.zh ? '我的设备' : 'My devices',
|
||||
title: widget.t.myDevices,
|
||||
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)),
|
||||
Text(widget.t.devicesSub, 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),
|
||||
@@ -120,18 +129,22 @@ class _DevicesScreenState extends State<DevicesScreen> {
|
||||
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),
|
||||
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))),
|
||||
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)),
|
||||
),
|
||||
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.t.remove, style: PangolinText.caption.copyWith(fontWeight: FontWeight.w600)),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
@@ -139,8 +152,9 @@ class _DevicesScreenState extends State<DevicesScreen> {
|
||||
|
||||
/// ── 兑换 & 购买 ──
|
||||
class RedeemScreen extends StatefulWidget {
|
||||
const RedeemScreen({super.key, this.zh = true, this.onBack});
|
||||
final bool zh; final VoidCallback? onBack;
|
||||
const RedeemScreen({super.key, required this.t, this.onBack});
|
||||
final AppText t;
|
||||
final VoidCallback? onBack;
|
||||
@override
|
||||
State<RedeemScreen> createState() => _RedeemScreenState();
|
||||
}
|
||||
@@ -150,52 +164,59 @@ class _RedeemScreenState extends State<RedeemScreen> {
|
||||
bool _ok = false;
|
||||
|
||||
@override
|
||||
void dispose() { _code.dispose(); super.dispose(); }
|
||||
void dispose() {
|
||||
_code.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
final zh = widget.zh;
|
||||
final t = widget.t;
|
||||
final channels = [
|
||||
(icon: PangolinIcons.shoppingBag, name: zh ? '自助发卡商店' : 'Self-serve store', sub: 'shop.pangolin.vpn', accent: true),
|
||||
(icon: PangolinIcons.shoppingBag, name: t.chStore, 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),
|
||||
(icon: PangolinIcons.mail, name: t.chEmail, sub: 'buy@pangolin.vpn', accent: false),
|
||||
];
|
||||
return _SubScaffold(
|
||||
title: zh ? '兑换 & 购买' : 'Redeem & buy',
|
||||
title: t.redeemTitle,
|
||||
onBack: widget.onBack,
|
||||
child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
|
||||
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)),
|
||||
Text(t.redeemCodeTitle, 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,
|
||||
if (_ok)
|
||||
Row(children: [
|
||||
Icon(PangolinIcons.checkCircle, size: 20, color: c.success),
|
||||
const SizedBox(width: 9),
|
||||
Text(t.redeemOk, 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),
|
||||
]),
|
||||
decoration: InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: const EdgeInsets.symmetric(vertical: 13), hintText: t.redeemPh, hintStyle: PangolinText.sm.copyWith(color: c.fg3)),
|
||||
onChanged: (_) => setState(() {}),
|
||||
),
|
||||
)),
|
||||
const SizedBox(width: 10),
|
||||
PangolinButton(label: t.redeemBtn, 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)),
|
||||
Text(t.buyTitle, 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)),
|
||||
Text(t.buySub, 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)),
|
||||
]),
|
||||
@@ -208,12 +229,7 @@ class _RedeemScreenState extends State<RedeemScreen> {
|
||||
onTap: () {},
|
||||
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,
|
||||
),
|
||||
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)),
|
||||
@@ -231,8 +247,9 @@ class _RedeemScreenState extends State<RedeemScreen> {
|
||||
|
||||
/// ── 联系我们 ──
|
||||
class ContactScreen extends StatelessWidget {
|
||||
const ContactScreen({super.key, this.zh = true, this.onBack});
|
||||
final bool zh; final VoidCallback? onBack;
|
||||
const ContactScreen({super.key, required this.t, this.onBack});
|
||||
final AppText t;
|
||||
final VoidCallback? onBack;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -240,15 +257,14 @@ class ContactScreen extends StatelessWidget {
|
||||
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),
|
||||
(icon: PangolinIcons.mail, name: t.contactEmail, sub: 'support@pangolin.vpn', accent: false),
|
||||
(icon: PangolinIcons.shoppingBag, name: t.contactStore, sub: 'shop.pangolin.vpn', accent: false),
|
||||
];
|
||||
return _SubScaffold(
|
||||
title: zh ? '联系我们' : 'Contact us',
|
||||
title: t.contactTitle,
|
||||
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)),
|
||||
Text(t.contactIntro, 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),
|
||||
@@ -256,9 +272,9 @@ class ContactScreen extends StatelessWidget {
|
||||
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)),
|
||||
Text(t.contactHoursTitle, 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)),
|
||||
Text(t.contactHours, style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
@@ -271,12 +287,7 @@ class ContactScreen extends StatelessWidget {
|
||||
onTap: () {},
|
||||
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,
|
||||
),
|
||||
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)),
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
// app_top_bar.dart — 页面顶栏(品牌锁版 + 可选右侧状态)
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../pangolin_theme.dart';
|
||||
import 'pangolin_logo.dart';
|
||||
|
||||
class AppTopBar extends StatelessWidget {
|
||||
const AppTopBar({super.key, required this.brand, this.trailing});
|
||||
final String brand;
|
||||
final Widget? trailing;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 6, 20, 14),
|
||||
child: Row(children: [
|
||||
PangolinBrandLockup(brand: brand, markSize: 24),
|
||||
const Spacer(),
|
||||
if (trailing != null) trailing!,
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 标题行(节点/统计/账户页用)。
|
||||
class PageTitle extends StatelessWidget {
|
||||
const PageTitle({super.key, required this.title});
|
||||
final String title;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
|
||||
child: Text(title, style: PangolinText.h2.copyWith(color: c.fg1)),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,18 @@
|
||||
// auth_screen.dart — 登录 / 注册页
|
||||
// auth_screen.dart — 登录 / 注册页(文案经 AppText 单显)
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import 'pangolin_icons.dart';
|
||||
import 'pangolin_button.dart';
|
||||
import 'pangolin_icons.dart';
|
||||
import 'pangolin_logo.dart';
|
||||
|
||||
enum _AuthMode { login, register }
|
||||
|
||||
class AuthScreen extends StatefulWidget {
|
||||
const AuthScreen({super.key, required this.onDone, this.zh = true});
|
||||
const AuthScreen({super.key, required this.onDone, required this.t});
|
||||
final VoidCallback onDone;
|
||||
final bool zh;
|
||||
final AppText t;
|
||||
|
||||
@override
|
||||
State<AuthScreen> createState() => _AuthScreenState();
|
||||
@@ -26,14 +28,18 @@ class _AuthScreenState extends State<AuthScreen> {
|
||||
|
||||
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(); }
|
||||
void dispose() {
|
||||
_email.dispose();
|
||||
_code.dispose();
|
||||
_pw.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
final t = widget.t;
|
||||
return Scaffold(
|
||||
backgroundColor: c.bg,
|
||||
body: SafeArea(
|
||||
@@ -45,26 +51,21 @@ class _AuthScreenState extends State<AuthScreen> {
|
||||
Column(children: [
|
||||
const PangolinMark(size: 52),
|
||||
const SizedBox(height: 12),
|
||||
Text(widget.zh ? '穿山甲' : 'Pangolin', style: PangolinText.h1.copyWith(color: c.fg1)),
|
||||
Text(t.brand, 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)),
|
||||
Text(t.authTagline, style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w600)),
|
||||
]),
|
||||
const SizedBox(height: 28),
|
||||
Row(children: [
|
||||
_tab(_AuthMode.login, _t('登录', 'Log in'), c),
|
||||
_tab(_AuthMode.register, _t('注册', 'Sign up'), c),
|
||||
_tab(_AuthMode.login, t.tabLogin, c),
|
||||
_tab(_AuthMode.register, t.tabRegister, c),
|
||||
]),
|
||||
Divider(height: 1, color: c.border),
|
||||
const SizedBox(height: 22),
|
||||
Expanded(child: _mode == _AuthMode.login ? _login(c) : _register(c)),
|
||||
Expanded(child: _mode == _AuthMode.login ? _login(c, t) : _register(c, t)),
|
||||
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),
|
||||
),
|
||||
child: Text(t.tos, textAlign: TextAlign.center, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -77,7 +78,11 @@ class _AuthScreenState extends State<AuthScreen> {
|
||||
final on = _mode == m;
|
||||
return Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () => setState(() { _mode = m; _step = 0; _sent = false; }),
|
||||
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))),
|
||||
@@ -99,57 +104,65 @@ class _AuthScreenState extends State<AuthScreen> {
|
||||
]);
|
||||
}
|
||||
|
||||
InputDecoration get _bare => const InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: EdgeInsets.symmetric(vertical: 12));
|
||||
InputDecoration get _bare =>
|
||||
const InputDecoration(border: InputBorder.none, isCollapsed: true, contentPadding: EdgeInsets.symmetric(vertical: 12));
|
||||
|
||||
Widget _login(PangolinScheme c) {
|
||||
Widget _login(PangolinScheme c, AppText t) {
|
||||
return Column(children: [
|
||||
_field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
|
||||
child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
|
||||
_field(c, icon: PangolinIcons.mail, label: t.emailLabel,
|
||||
child: TextField(controller: _email, decoration: _bare.copyWith(hintText: t.emailPh), 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)),
|
||||
)),
|
||||
_field(c, icon: PangolinIcons.lock, label: t.pwLabel,
|
||||
child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: t.pwPh), onChanged: (_) => setState(() {}))),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Text(t.forgotPw, 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),
|
||||
PangolinButton(label: t.doLogin, expand: true, onPressed: (_emailValid && _pw.text.isNotEmpty) ? widget.onDone : null),
|
||||
]);
|
||||
}
|
||||
|
||||
Widget _register(PangolinScheme c) {
|
||||
Widget _register(PangolinScheme c, AppText t) {
|
||||
if (_step == 0) {
|
||||
return Column(children: [
|
||||
_field(c, icon: PangolinIcons.mail, label: _t('邮箱', 'Email'),
|
||||
_field(c, icon: PangolinIcons.mail, label: t.emailLabel,
|
||||
child: Row(children: [
|
||||
Expanded(child: TextField(controller: _email, decoration: _bare.copyWith(hintText: 'your@email.com'), onChanged: (_) => setState(() {}))),
|
||||
Expanded(child: TextField(controller: _email, decoration: _bare.copyWith(hintText: t.emailPh), onChanged: (_) => setState(() {}))),
|
||||
GestureDetector(
|
||||
onTap: _emailValid ? () => setState(() => _sent = true) : null,
|
||||
child: Text(_sent ? _t('重新发送', 'Resend') : _t('发送验证码', 'Send code'),
|
||||
child: Text(_sent ? t.resend : t.sendCode,
|
||||
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)),
|
||||
])),
|
||||
if (_sent)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Row(children: [
|
||||
Icon(PangolinIcons.checkCircle, size: 14, color: c.success),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(child: Text(t.codeSentTo(_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'),
|
||||
_field(c, icon: PangolinIcons.shieldCheck, label: t.codeLabel,
|
||||
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),
|
||||
PangolinButton(label: t.doNext, 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(() {}))),
|
||||
_field(c, icon: PangolinIcons.lock, label: t.pwLabel,
|
||||
child: TextField(controller: _pw, obscureText: true, decoration: _bare.copyWith(hintText: t.setPwPh), onChanged: (_) => setState(() {}))),
|
||||
const SizedBox(height: 18),
|
||||
PangolinButton(label: _t('创建账户', 'Create account'), expand: true, onPressed: _pw.text.length >= 6 ? widget.onDone : null),
|
||||
PangolinButton(label: t.doCreate, expand: true, onPressed: _pw.text.length >= 6 ? widget.onDone : null),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+241
-289
@@ -1,326 +1,278 @@
|
||||
// home_shell.dart — 主框架(底部 4 Tab:连接 / 节点 / 统计 / 账户)
|
||||
// home_shell.dart — 主框架(4 Tab:连接 / 节点 / 统计 / 账户)
|
||||
//
|
||||
// 自适应断点:同一份页面代码,宽度 ≥900 时从底部 Tab 切换为左侧栏分栏
|
||||
// (LayoutBuilder 开关,不 fork 页面)。窄屏支持左右滑动切换 Tab。
|
||||
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;
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../pangolin_theme.dart';
|
||||
import '../screens/account_page.dart';
|
||||
import '../screens/connect_page.dart';
|
||||
import '../screens/nodes_page.dart';
|
||||
import '../screens/stats_page.dart';
|
||||
import '../state/app_providers.dart';
|
||||
import '../state/connection_provider.dart';
|
||||
import '../state/nodes_provider.dart';
|
||||
import 'pangolin_icons.dart';
|
||||
import 'pangolin_logo.dart';
|
||||
import 'tab_swipe.dart';
|
||||
|
||||
/// 宽屏断点(逻辑像素)。≥该值切侧栏分栏。
|
||||
const double kWideBreakpoint = 900;
|
||||
|
||||
class HomeShell extends ConsumerStatefulWidget {
|
||||
const HomeShell({super.key});
|
||||
@override
|
||||
State<HomeShell> createState() => _HomeShellState();
|
||||
ConsumerState<HomeShell> createState() => _HomeShellState();
|
||||
}
|
||||
|
||||
class _HomeShellState extends State<HomeShell> {
|
||||
class _HomeShellState extends ConsumerState<HomeShell> {
|
||||
int _tab = 0;
|
||||
VpnStatus _status = VpnStatus.off;
|
||||
ServerInfo _server = const ServerInfo(code: 'HK', name: '香港 · 流媒体', sub: 'Hong Kong', ping: 18);
|
||||
Timer? _timer;
|
||||
int _elapsed = 0;
|
||||
int _dir = 0;
|
||||
Timer? _dirReset;
|
||||
|
||||
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 _goTab(int i) {
|
||||
if (i == _tab) return;
|
||||
setState(() {
|
||||
_dir = i > _tab ? 1 : -1;
|
||||
_tab = i;
|
||||
});
|
||||
_dirReset?.cancel();
|
||||
_dirReset = Timer(const Duration(milliseconds: 260), () {
|
||||
if (mounted) setState(() => _dir = 0);
|
||||
});
|
||||
}
|
||||
|
||||
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++));
|
||||
});
|
||||
}
|
||||
}
|
||||
void _swipe(int delta) => _goTab((_tab + delta).clamp(0, 3));
|
||||
|
||||
@override
|
||||
void dispose() { _timer?.cancel(); super.dispose(); }
|
||||
void dispose() {
|
||||
_dirReset?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
List<Widget> _pages(bool isWide) => [
|
||||
ConnectPage(isWide: isWide, onOpenNodes: () => _goTab(1)),
|
||||
NodesPage(isWide: isWide, onPicked: () => _goTab(0)),
|
||||
StatsPage(isWide: isWide),
|
||||
AccountPage(isWide: isWide),
|
||||
];
|
||||
|
||||
@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)),
|
||||
body: LayoutBuilder(builder: (context, constraints) {
|
||||
final isWide = constraints.maxWidth >= kWideBreakpoint;
|
||||
final page = DirectionalTabSwitcher(index: _tab, direction: _dir, child: _pages(isWide)[_tab]);
|
||||
if (isWide) {
|
||||
return SafeArea(child: _WideLayout(tab: _tab, onTab: _goTab, child: page));
|
||||
}
|
||||
return SafeArea(
|
||||
bottom: false,
|
||||
child: Column(children: [
|
||||
Expanded(
|
||||
child: HorizontalSwipeArea(
|
||||
onSwipeLeft: () => _swipe(1),
|
||||
onSwipeRight: () => _swipe(-1),
|
||||
child: page,
|
||||
),
|
||||
),
|
||||
_BottomTab(index: _tab, onTap: _goTab),
|
||||
]),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// ── 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;
|
||||
/// ── 宽屏分栏:左侧栏导航 + 内容区 ──
|
||||
class _WideLayout extends ConsumerWidget {
|
||||
const _WideLayout({required this.tab, required this.onTab, required this.child});
|
||||
final int tab;
|
||||
final ValueChanged<int> onTab;
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final c = context.pangolin;
|
||||
final t = ref.watch(appTextProvider);
|
||||
final conn = ref.watch(connectionProvider);
|
||||
final node = ref.watch(effectiveNodeProvider);
|
||||
final titles = [t.tabConnect, t.tabServers, t.tabStats, t.tabMe];
|
||||
return Row(children: [
|
||||
_SideRail(tab: tab, onTab: onTab),
|
||||
Expanded(
|
||||
child: Column(children: [
|
||||
// 内容区顶栏:标题 + 在线状态
|
||||
SizedBox(
|
||||
height: 56,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 28),
|
||||
child: Row(children: [
|
||||
Text(titles[tab], style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
|
||||
const Spacer(),
|
||||
Text(
|
||||
conn.phase == VpnPhase.on ? '● ${node.code}' : '○',
|
||||
style: PangolinText.mono.copyWith(
|
||||
fontSize: 12.5,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: conn.phase == VpnPhase.on ? c.success : c.fg3),
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
Expanded(child: child),
|
||||
]),
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
class _SideRail extends ConsumerWidget {
|
||||
const _SideRail({required this.tab, required this.onTab});
|
||||
final int tab;
|
||||
final ValueChanged<int> onTab;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final c = context.pangolin;
|
||||
final t = ref.watch(appTextProvider);
|
||||
final isFree = ref.watch(isFreePlanProvider);
|
||||
final items = [
|
||||
(PangolinIcons.power, t.tabConnect),
|
||||
(PangolinIcons.globe, t.tabServers),
|
||||
(PangolinIcons.barChart, t.tabStats),
|
||||
(PangolinIcons.user, t.tabMe),
|
||||
];
|
||||
return Container(
|
||||
width: 232,
|
||||
decoration: BoxDecoration(color: c.bgSubtle, border: Border(right: BorderSide(color: c.border))),
|
||||
padding: const EdgeInsets.fromLTRB(14, 18, 14, 16),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
|
||||
// 品牌锁版
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 0, 8, 20),
|
||||
child: Row(children: [
|
||||
const PangolinMark(size: 30),
|
||||
const SizedBox(width: 10),
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
|
||||
Text(t.brand, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 17, height: 1)),
|
||||
const SizedBox(height: 3),
|
||||
Text('PANGOLIN', style: PangolinText.overline.copyWith(color: c.accent, fontSize: 9, letterSpacing: 1.8)),
|
||||
]),
|
||||
]),
|
||||
),
|
||||
for (var i = 0; i < items.length; i++)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 4),
|
||||
child: _RailItem(icon: items[i].$1, label: items[i].$2, active: i == tab, onTap: () => onTab(i)),
|
||||
),
|
||||
const Spacer(),
|
||||
// 套餐迷你卡
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: isFree ? c.surface : null,
|
||||
gradient: isFree
|
||||
? null
|
||||
: const LinearGradient(
|
||||
begin: Alignment.topLeft, end: Alignment.bottomRight,
|
||||
colors: [PangolinColors.clay600, PangolinColors.clay800]),
|
||||
border: isFree ? Border.all(color: c.border) : null,
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.lg),
|
||||
),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 32, height: 32,
|
||||
decoration: BoxDecoration(color: isFree ? c.bgSubtle : PangolinColors.white.withOpacity(0.18), shape: BoxShape.circle),
|
||||
child: Icon(isFree ? PangolinIcons.user : PangolinIcons.crown, size: 16, color: isFree ? c.fg2 : PangolinColors.white),
|
||||
),
|
||||
const SizedBox(width: 9),
|
||||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
|
||||
Text(isFree ? t.freePlanName : t.proMember,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: PangolinText.caption.copyWith(color: isFree ? c.fg1 : PangolinColors.white, fontWeight: FontWeight.w700, fontSize: 12.5)),
|
||||
Text(kDemoEmail,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: PangolinText.caption.copyWith(color: isFree ? c.fg3 : PangolinColors.white.withOpacity(0.7), fontSize: 10.5)),
|
||||
])),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RailItem extends StatelessWidget {
|
||||
const _RailItem({required this.icon, required this.label, required this.active, required this.onTap});
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final bool active;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Material(
|
||||
color: active ? c.accentSubtle : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.md),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: 48), // 触控尺寸 ≥48
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
|
||||
child: Row(children: [
|
||||
Icon(icon, size: 20, color: active ? c.accent : c.fg3),
|
||||
const SizedBox(width: 12),
|
||||
Text(label, style: PangolinText.body.copyWith(color: active ? c.accent : c.fg2, fontWeight: active ? FontWeight.w700 : FontWeight.w500)),
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// ── 底部 Tab 栏(窄屏)──
|
||||
class _BottomTab extends ConsumerWidget {
|
||||
const _BottomTab({required this.index, required this.onTap});
|
||||
final int index;
|
||||
final ValueChanged<int> onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final c = context.pangolin;
|
||||
final t = ref.watch(appTextProvider);
|
||||
final items = [
|
||||
(PangolinIcons.power, zh ? '连接' : 'Connect'),
|
||||
(PangolinIcons.globe, zh ? '节点' : 'Servers'),
|
||||
(PangolinIcons.barChart, zh ? '统计' : 'Stats'),
|
||||
(PangolinIcons.user, zh ? '账户' : 'Account'),
|
||||
(PangolinIcons.power, t.tabConnect),
|
||||
(PangolinIcons.globe, t.tabServers),
|
||||
(PangolinIcons.barChart, t.tabStats),
|
||||
(PangolinIcons.user, t.tabMe),
|
||||
];
|
||||
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.mono.copyWith(fontSize: 12, 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)),
|
||||
]))),
|
||||
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 ──
|
||||
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))])),
|
||||
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)),
|
||||
]),
|
||||
)),
|
||||
]),
|
||||
),
|
||||
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.mono.copyWith(fontSize: 12, 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 ──
|
||||
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: [
|
||||
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!,
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// onboarding_screen.dart — 首次引导页(3 屏可滑动)
|
||||
// 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';
|
||||
@@ -12,8 +13,9 @@ class OnboardingStep {
|
||||
}
|
||||
|
||||
class OnboardingScreen extends StatefulWidget {
|
||||
const OnboardingScreen({super.key, required this.onDone, this.steps});
|
||||
const OnboardingScreen({super.key, required this.onDone, required this.t, this.steps});
|
||||
final VoidCallback onDone;
|
||||
final AppText t;
|
||||
final List<OnboardingStep>? steps;
|
||||
|
||||
@override
|
||||
@@ -24,12 +26,15 @@ 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),
|
||||
];
|
||||
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(); }
|
||||
@@ -48,7 +53,7 @@ class _OnboardingScreenState extends State<OnboardingScreen> {
|
||||
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))),
|
||||
child: TextButton(onPressed: widget.onDone, child: Text(widget.t.obSkip, style: PangolinText.sm.copyWith(color: c.fg3, fontWeight: FontWeight.w600))),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
|
||||
@@ -12,6 +12,9 @@ class PangolinIcons {
|
||||
static const loader = LucideIcons.loader;
|
||||
static const zap = LucideIcons.zap;
|
||||
static const globe = LucideIcons.globe;
|
||||
static const clock = LucideIcons.clock;
|
||||
static const playCircle = LucideIcons.playCircle;
|
||||
static const wifi = LucideIcons.wifi;
|
||||
|
||||
// ── 导航 / 操作 ──
|
||||
static const settings = LucideIcons.settings;
|
||||
|
||||
@@ -41,18 +41,18 @@ class PangolinAppIcon extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 顶栏品牌锁版:标记 + 「穿山甲 / Pangolin」
|
||||
/// 顶栏品牌锁版:标记 + 品牌名(文案由 l10n 传入,单显)
|
||||
class PangolinBrandLockup extends StatelessWidget {
|
||||
const PangolinBrandLockup({super.key, this.zh = true, this.markSize = 26});
|
||||
final bool zh; final double markSize;
|
||||
const PangolinBrandLockup({super.key, required this.brand, this.markSize = 26});
|
||||
final String brand;
|
||||
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, fontWeight: FontWeight.w700)),
|
||||
Text(brand, style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700)),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
// pangolin_widgets.dart — 统一导出穿山甲 VPN 核心组件。
|
||||
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';
|
||||
// pangolin_widgets.dart — 统一导出穿山甲核心组件。
|
||||
export 'account_screens.dart';
|
||||
export 'app_top_bar.dart';
|
||||
export 'auth_screen.dart';
|
||||
export 'connect_button.dart';
|
||||
export 'country_code.dart';
|
||||
export 'home_shell.dart';
|
||||
export 'onboarding_screen.dart';
|
||||
export 'pangolin_button.dart';
|
||||
export 'pangolin_icons.dart';
|
||||
export 'pangolin_logo.dart';
|
||||
export 'plan_card.dart';
|
||||
export 'quota_card.dart';
|
||||
export 'server_tile.dart';
|
||||
export 'smart_select_card.dart';
|
||||
export 'status_pill.dart';
|
||||
export 'tab_swipe.dart';
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
// quota_card.dart — 免费版每日额度卡(纯展示)
|
||||
//
|
||||
// 今日剩余分钟 + 进度条(≤3 分钟切 warning 色)+「看广告开始使用」;
|
||||
// 解锁后变绿「已解锁 · 今日可用」。状态由 quota_provider 注入,本地仅展示。
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import '../state/quota_provider.dart';
|
||||
import 'pangolin_icons.dart';
|
||||
|
||||
class QuotaCard extends StatelessWidget {
|
||||
const QuotaCard({super.key, required this.quota, required this.t, required this.onWatchAd});
|
||||
|
||||
final FreeQuotaState quota;
|
||||
final AppText t;
|
||||
final VoidCallback onWatchAd;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
final barColor = quota.isLow ? c.warning : c.accent;
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
|
||||
decoration: BoxDecoration(
|
||||
color: c.surface,
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.lg),
|
||||
border: Border.all(color: c.border),
|
||||
boxShadow: PangolinShadow.sm,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(children: [
|
||||
Icon(PangolinIcons.clock, size: 15, color: c.accent),
|
||||
const SizedBox(width: 7),
|
||||
Text(t.quotaToday,
|
||||
style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w600, fontSize: 12)),
|
||||
const SizedBox(width: 7),
|
||||
Text('${quota.remainingMinutes} ${t.minutes}',
|
||||
style: PangolinText.mono.copyWith(color: c.fg1, fontSize: 14, fontWeight: FontWeight.w600)),
|
||||
const Spacer(),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3),
|
||||
decoration: BoxDecoration(color: c.bgSubtle, borderRadius: BorderRadius.circular(PangolinRadius.full)),
|
||||
child: Text(t.quotaFree,
|
||||
style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w600, fontSize: 10.5)),
|
||||
),
|
||||
]),
|
||||
const SizedBox(height: 9),
|
||||
// 进度条:剩余比例;≤3 分钟切 warning 色(满宽轨道 + 比例填充)
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
child: SizedBox(
|
||||
height: 6,
|
||||
child: Stack(children: [
|
||||
Positioned.fill(child: ColoredBox(color: c.bgSubtle)),
|
||||
FractionallySizedBox(
|
||||
alignment: Alignment.centerLeft,
|
||||
widthFactor: quota.progress,
|
||||
child: AnimatedContainer(
|
||||
duration: PangolinMotion.base,
|
||||
curve: PangolinMotion.easeOut,
|
||||
decoration: BoxDecoration(color: barColor, borderRadius: BorderRadius.circular(3)),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 11),
|
||||
if (quota.adUnlocked)
|
||||
SizedBox(
|
||||
height: 38,
|
||||
child: Center(
|
||||
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
||||
Icon(PangolinIcons.checkCircle, size: 16, color: c.success),
|
||||
const SizedBox(width: 7),
|
||||
Text(t.adUnlocked,
|
||||
style: PangolinText.sm.copyWith(color: c.success, fontWeight: FontWeight.w700, fontSize: 13)),
|
||||
]),
|
||||
),
|
||||
)
|
||||
else
|
||||
_WatchAdButton(t: t, onTap: onWatchAd),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _WatchAdButton extends StatelessWidget {
|
||||
const _WatchAdButton({required this.t, required this.onTap});
|
||||
final AppText t;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Material(
|
||||
color: c.accentSubtle,
|
||||
shape: StadiumBorder(side: BorderSide(color: c.accentBorder, width: 1.5)),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
height: 38,
|
||||
child: Center(
|
||||
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
||||
Icon(PangolinIcons.playCircle, size: 16, color: c.accent),
|
||||
const SizedBox(width: 7),
|
||||
Text(t.watchAd,
|
||||
style: PangolinText.sm.copyWith(color: c.accent, fontWeight: FontWeight.w700, fontSize: 13)),
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,23 @@
|
||||
// server_tile.dart — 服务器列表行
|
||||
// server_tile.dart — 节点列表行(国家码块 · 名称 · 延迟 · 信号条 · 选中态)
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../models/node.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;
|
||||
const ServerTile({
|
||||
super.key,
|
||||
required this.node,
|
||||
required this.lang,
|
||||
this.active = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
final Node node;
|
||||
final AppLang lang;
|
||||
final bool active;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
@@ -26,21 +31,24 @@ class ServerTile extends StatelessWidget {
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
child: Row(
|
||||
children: [
|
||||
CountryCode(code: server.code, active: active),
|
||||
CountryCode(code: node.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)),
|
||||
Text(node.localizedName(lang),
|
||||
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(node.localizedSub(lang),
|
||||
style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
|
||||
],
|
||||
),
|
||||
),
|
||||
Text('${server.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
|
||||
Text('${node.ping}ms', style: PangolinText.mono.copyWith(color: c.fg2, fontSize: 12)),
|
||||
const SizedBox(width: 8),
|
||||
SignalBars(ping: server.ping),
|
||||
SignalBars(ping: node.ping),
|
||||
if (active) ...[const SizedBox(width: 10), Icon(PangolinIcons.check, size: 18, color: c.accent)],
|
||||
],
|
||||
),
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
// smart_select_card.dart — 节点页置顶「智能选择」推荐卡(纯展示)
|
||||
//
|
||||
// accent-subtle 底 + clay 渐变 zap 图标 + 「推荐」胶囊 + 脱敏文案,默认选中。
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../l10n/app_text.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import 'pangolin_icons.dart';
|
||||
|
||||
class SmartSelectCard extends StatelessWidget {
|
||||
const SmartSelectCard({super.key, required this.t, required this.selected, required this.onTap});
|
||||
|
||||
final AppText t;
|
||||
final bool selected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final c = context.pangolin;
|
||||
return Material(
|
||||
color: c.accentSubtle,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.xl),
|
||||
side: BorderSide(color: selected ? c.accent : c.accentBorder, width: 1.5),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 15),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 42,
|
||||
height: 42,
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [PangolinColors.clay500, PangolinColors.clay700],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(PangolinRadius.md),
|
||||
),
|
||||
child: const Icon(PangolinIcons.zap, size: 21, color: PangolinColors.white),
|
||||
),
|
||||
const SizedBox(width: 13),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(children: [
|
||||
Flexible(
|
||||
child: Text(t.smartSelect,
|
||||
style: PangolinText.body
|
||||
.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 15.5)),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(color: c.accent, borderRadius: BorderRadius.circular(PangolinRadius.full)),
|
||||
child: Text(t.recommended,
|
||||
style: PangolinText.caption.copyWith(
|
||||
color: c.fgOnAccent, fontWeight: FontWeight.w700, fontSize: 10)),
|
||||
),
|
||||
]),
|
||||
const SizedBox(height: 3),
|
||||
Text(t.smartSub,
|
||||
style: PangolinText.caption.copyWith(color: c.fg2, fontWeight: FontWeight.w400, height: 1.5)),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (selected) ...[
|
||||
const SizedBox(width: 8),
|
||||
Icon(PangolinIcons.check, size: 19, color: c.accent),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
// tab_swipe.dart — Tab 左右滑动切换的手势仲裁组件
|
||||
//
|
||||
// 约定(design/CLAUDE.md §5):横向位移 >60px 且明显大于纵向时切换 Tab;
|
||||
// 子页内的纵向滚动区域不响应该手势。
|
||||
//
|
||||
// 仲裁机制:本组件只接 HorizontalDrag。纵向滚动由内部 ListView 的
|
||||
// VerticalDragGestureRecognizer 在手势竞技场中胜出,本组件的横向识别器
|
||||
// 自然落败——因此「滚动列表/纵向拖拽」永远不会误触发 Tab 切换,无需手写
|
||||
// dx/dy 比例判断。横向为主的拖拽才会进入本组件并按阈值判定方向。
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// 方向感知:1 = 向后(进入右侧 Tab),-1 = 向前(进入左侧 Tab)。
|
||||
typedef SwipeCallback = void Function();
|
||||
|
||||
class HorizontalSwipeArea extends StatefulWidget {
|
||||
const HorizontalSwipeArea({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.onSwipeLeft,
|
||||
this.onSwipeRight,
|
||||
this.threshold = 60,
|
||||
});
|
||||
|
||||
/// 包裹的内容(通常是当前 Tab 页)。
|
||||
final Widget child;
|
||||
|
||||
/// 向左滑(手指从右往左)→ 切到下一个 Tab。
|
||||
final VoidCallback? onSwipeLeft;
|
||||
|
||||
/// 向右滑(手指从左往右)→ 切到上一个 Tab。
|
||||
final VoidCallback? onSwipeRight;
|
||||
|
||||
/// 触发阈值(逻辑像素)。
|
||||
final double threshold;
|
||||
|
||||
@override
|
||||
State<HorizontalSwipeArea> createState() => _HorizontalSwipeAreaState();
|
||||
}
|
||||
|
||||
class _HorizontalSwipeAreaState extends State<HorizontalSwipeArea> {
|
||||
double _dx = 0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
// 仅接横向拖拽:纵向滚动交给内部可滚动组件(竞技场仲裁)。
|
||||
onHorizontalDragStart: (_) => _dx = 0,
|
||||
onHorizontalDragUpdate: (d) => _dx += d.delta.dx,
|
||||
onHorizontalDragEnd: (details) {
|
||||
final v = details.primaryVelocity ?? 0;
|
||||
// 位移过阈值,或带明显速度的快划。
|
||||
final left = _dx <= -widget.threshold || v < -300;
|
||||
final right = _dx >= widget.threshold || v > 300;
|
||||
if (left) {
|
||||
widget.onSwipeLeft?.call();
|
||||
} else if (right) {
|
||||
widget.onSwipeRight?.call();
|
||||
}
|
||||
_dx = 0;
|
||||
},
|
||||
child: widget.child,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 方向感知的页面切换动画:200ms 轻移淡入(对齐 React pg-in-l / pg-in-r)。
|
||||
class DirectionalTabSwitcher extends StatelessWidget {
|
||||
const DirectionalTabSwitcher({super.key, required this.index, required this.direction, required this.child});
|
||||
|
||||
/// 当前 Tab 索引(作为切换 key)。
|
||||
final int index;
|
||||
|
||||
/// 进入方向:1 从右进(下一个),-1 从左进(上一个),0 无动画。
|
||||
final int direction;
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
switchInCurve: PangolinMotionEaseOut.curve,
|
||||
transitionBuilder: (child, animation) {
|
||||
// 仅对「进入」的新页做方向位移 + 淡入;旧页直接淡出,避免回弹。
|
||||
final isIncoming = child.key == ValueKey<int>(index);
|
||||
if (direction == 0 || !isIncoming) {
|
||||
return FadeTransition(opacity: animation, child: child);
|
||||
}
|
||||
final begin = Offset(direction > 0 ? 0.06 : -0.06, 0);
|
||||
return FadeTransition(
|
||||
opacity: animation,
|
||||
child: SlideTransition(
|
||||
position: Tween<Offset>(begin: begin, end: Offset.zero).animate(animation),
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
},
|
||||
layoutBuilder: (currentChild, previousChildren) => Stack(
|
||||
alignment: Alignment.topCenter,
|
||||
children: [...previousChildren, if (currentChild != null) currentChild],
|
||||
),
|
||||
child: KeyedSubtree(key: ValueKey<int>(index), child: child),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 暴露 easeOut 曲线(避免在本文件 import 主题造成循环)。
|
||||
class PangolinMotionEaseOut {
|
||||
PangolinMotionEaseOut._();
|
||||
static const Curve curve = Cubic(0.22, 1, 0.36, 1);
|
||||
}
|
||||
@@ -13,6 +13,7 @@ dependencies:
|
||||
flutter_svg: ^2.0.10 # 加载 assets/ 下的矢量 logo
|
||||
lucide_icons: ^0.257.0 # Lucide 细线条图标
|
||||
google_fonts: ^6.2.1 # 运行时加载 Sora / Manrope / Noto Sans SC / JetBrains Mono
|
||||
flutter_riverpod: ^2.5.1 # 状态层(连接状态机 / 免费额度 / 节点选择 / 语言 / 主题)
|
||||
|
||||
dev_dependencies:
|
||||
flutter_test:
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
// components_golden_test.dart — 关键组件 golden(明/暗两主题)
|
||||
//
|
||||
// 覆盖:连接键三态、智能选择推荐卡、免费额度卡。
|
||||
// 首次生成基准图:`flutter test --update-goldens test/golden`。
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:pangolin_vpn/l10n/strings_zh.dart';
|
||||
import 'package:pangolin_vpn/state/connection_provider.dart';
|
||||
import 'package:pangolin_vpn/state/quota_provider.dart';
|
||||
import 'package:pangolin_vpn/widgets/connect_button.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();
|
||||
|
||||
Future<void> goldenOf(
|
||||
WidgetTester tester,
|
||||
Widget child,
|
||||
Finder finder,
|
||||
String name, {
|
||||
bool dark = false,
|
||||
Duration settle = Duration.zero,
|
||||
}) async {
|
||||
await tester.pumpWidget(wrapThemed(child, dark: dark));
|
||||
if (settle == Duration.zero) {
|
||||
await tester.pump();
|
||||
} else {
|
||||
await tester.pump(settle); // 固定帧,确保连接中旋转角确定
|
||||
}
|
||||
await expectLater(finder, matchesGoldenFile('goldens/$name.png'));
|
||||
}
|
||||
|
||||
ConnectButton btn(VpnPhase phase, {Duration elapsed = Duration.zero}) => ConnectButton(
|
||||
phase: phase,
|
||||
elapsed: elapsed,
|
||||
offLabel: t.connectNow,
|
||||
secureLabel: t.secure,
|
||||
onTap: () {},
|
||||
);
|
||||
|
||||
for (final dark in [false, true]) {
|
||||
final suffix = dark ? 'dark' : 'light';
|
||||
|
||||
testWidgets('连接键 off · $suffix', (tester) async {
|
||||
await goldenOf(tester, btn(VpnPhase.off), find.byType(ConnectButton), 'connect_off_$suffix', dark: dark);
|
||||
});
|
||||
|
||||
testWidgets('连接键 connecting · $suffix', (tester) async {
|
||||
await goldenOf(tester, btn(VpnPhase.connecting), find.byType(ConnectButton), 'connect_connecting_$suffix',
|
||||
dark: dark, settle: const Duration(milliseconds: 700));
|
||||
});
|
||||
|
||||
testWidgets('连接键 on · $suffix', (tester) async {
|
||||
await goldenOf(tester, btn(VpnPhase.on, elapsed: const Duration(seconds: 5)), find.byType(ConnectButton),
|
||||
'connect_on_$suffix', dark: dark);
|
||||
});
|
||||
|
||||
testWidgets('推荐卡 · $suffix', (tester) async {
|
||||
await goldenOf(tester, SmartSelectCard(t: t, selected: true, onTap: () {}), find.byType(SmartSelectCard),
|
||||
'smart_card_$suffix', dark: dark);
|
||||
});
|
||||
|
||||
testWidgets('额度卡(低额度警示)· $suffix', (tester) async {
|
||||
await goldenOf(
|
||||
tester,
|
||||
QuotaCard(quota: const FreeQuotaState(remainingMinutes: 2), t: t, onWatchAd: () {}),
|
||||
find.byType(QuotaCard),
|
||||
'quota_low_$suffix',
|
||||
dark: dark,
|
||||
);
|
||||
});
|
||||
|
||||
testWidgets('额度卡(已解锁)· $suffix', (tester) async {
|
||||
await goldenOf(
|
||||
tester,
|
||||
QuotaCard(quota: const FreeQuotaState(adUnlocked: true), t: t, onWatchAd: () {}),
|
||||
find.byType(QuotaCard),
|
||||
'quota_unlocked_$suffix',
|
||||
dark: dark,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// harness.dart — 测试公共脚手架
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:pangolin_vpn/pangolin_theme.dart';
|
||||
|
||||
/// 测试环境禁用 google_fonts 运行时网络拉取(离线确定化)。
|
||||
void disableGoogleFontsFetching() {
|
||||
GoogleFonts.config.allowRuntimeFetching = false;
|
||||
}
|
||||
|
||||
/// 用穿山甲明/暗主题包裹被测组件,并固定宽度便于 golden 对照。
|
||||
Widget wrapThemed(
|
||||
Widget child, {
|
||||
bool dark = false,
|
||||
double width = 360,
|
||||
List<Override> overrides = const [],
|
||||
}) {
|
||||
return ProviderScope(
|
||||
overrides: overrides,
|
||||
child: MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
theme: PangolinTheme.light,
|
||||
darkTheme: PangolinTheme.dark,
|
||||
themeMode: dark ? ThemeMode.dark : ThemeMode.light,
|
||||
home: Scaffold(
|
||||
body: Center(
|
||||
child: SizedBox(width: width, child: child),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// connection_controller_test.dart — 连接状态机:严格三态、禁乐观显示
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:pangolin_vpn/state/connection_provider.dart';
|
||||
|
||||
void main() {
|
||||
// 注入极短握手时长,用真实计时器走完状态流转。
|
||||
ConnectionController make() => ConnectionController(handshake: const Duration(milliseconds: 20));
|
||||
|
||||
test('初始为 off', () {
|
||||
final ctl = make();
|
||||
expect(ctl.state.phase, VpnPhase.off);
|
||||
ctl.dispose();
|
||||
});
|
||||
|
||||
test('connect: off → connecting → on', () async {
|
||||
final ctl = make();
|
||||
ctl.connect();
|
||||
expect(ctl.state.phase, VpnPhase.connecting);
|
||||
await Future<void>.delayed(const Duration(milliseconds: 60));
|
||||
expect(ctl.state.phase, VpnPhase.on);
|
||||
ctl.dispose();
|
||||
});
|
||||
|
||||
test('握手中再次 toggle 被忽略(禁止乐观回退)', () async {
|
||||
final ctl = make();
|
||||
ctl.toggle(); // off → connecting
|
||||
expect(ctl.state.phase, VpnPhase.connecting);
|
||||
ctl.toggle(); // connecting 中点击 → 仍 connecting
|
||||
expect(ctl.state.phase, VpnPhase.connecting);
|
||||
await Future<void>.delayed(const Duration(milliseconds: 60));
|
||||
expect(ctl.state.phase, VpnPhase.on);
|
||||
ctl.dispose();
|
||||
});
|
||||
|
||||
test('on 态 toggle → off', () async {
|
||||
final ctl = make();
|
||||
ctl.connect();
|
||||
await Future<void>.delayed(const Duration(milliseconds: 60));
|
||||
expect(ctl.state.phase, VpnPhase.on);
|
||||
ctl.toggle();
|
||||
expect(ctl.state.phase, VpnPhase.off);
|
||||
ctl.dispose();
|
||||
});
|
||||
|
||||
test('已连接时切换节点 → 重连(回到 connecting)', () async {
|
||||
final ctl = make();
|
||||
ctl.connect();
|
||||
await Future<void>.delayed(const Duration(milliseconds: 60));
|
||||
expect(ctl.state.phase, VpnPhase.on);
|
||||
ctl.onNodeChanged();
|
||||
expect(ctl.state.phase, VpnPhase.connecting);
|
||||
ctl.dispose();
|
||||
});
|
||||
|
||||
test('on 态计时累加', () async {
|
||||
final ctl = make();
|
||||
ctl.connect();
|
||||
await Future<void>.delayed(const Duration(milliseconds: 60));
|
||||
expect(ctl.state.elapsed, Duration.zero);
|
||||
await Future<void>.delayed(const Duration(milliseconds: 1100));
|
||||
expect(ctl.state.elapsed.inSeconds, greaterThanOrEqualTo(1));
|
||||
ctl.dispose();
|
||||
});
|
||||
|
||||
test('off 态切换节点不会自动连接', () {
|
||||
final ctl = make();
|
||||
ctl.onNodeChanged();
|
||||
expect(ctl.state.phase, VpnPhase.off);
|
||||
ctl.dispose();
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// nodes_provider_test.dart — 节点选择 / 智能选择派生
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:pangolin_vpn/l10n/app_text.dart';
|
||||
import 'package:pangolin_vpn/models/node.dart';
|
||||
import 'package:pangolin_vpn/state/nodes_provider.dart';
|
||||
|
||||
void main() {
|
||||
test('默认智能选择(AUTO)', () {
|
||||
final c = ProviderContainer();
|
||||
addTearDown(c.dispose);
|
||||
expect(c.read(selectedNodeCodeProvider), kSmartNodeCode);
|
||||
expect(c.read(isSmartSelectProvider), true);
|
||||
});
|
||||
|
||||
test('智能选择取延迟最小节点', () {
|
||||
final c = ProviderContainer();
|
||||
addTearDown(c.dispose);
|
||||
final node = c.read(effectiveNodeProvider);
|
||||
final minPing = kDemoNodes.map((n) => n.ping).reduce((a, b) => a < b ? a : b);
|
||||
expect(node.ping, minPing);
|
||||
});
|
||||
|
||||
test('选中具体节点后生效节点随之改变', () {
|
||||
final c = ProviderContainer();
|
||||
addTearDown(c.dispose);
|
||||
c.read(selectedNodeCodeProvider.notifier).state = 'JP';
|
||||
expect(c.read(isSmartSelectProvider), false);
|
||||
expect(c.read(effectiveNodeProvider).code, 'JP');
|
||||
});
|
||||
|
||||
test('localizedSub 不串语言:无标签用拉丁地名', () {
|
||||
const tw = Node(code: 'TW', nameZh: '台湾 台北', nameEn: 'Taipei', ping: 28);
|
||||
expect(tw.localizedSub(AppLang.zh), 'Taipei');
|
||||
expect(tw.localizedSub(AppLang.en), 'Taipei');
|
||||
const hk = Node(code: 'HK', nameZh: '香港 · 流媒体', nameEn: 'Hong Kong', ping: 18, tag: NodeTag.streaming);
|
||||
expect(hk.localizedSub(AppLang.zh), '流媒体优化');
|
||||
expect(hk.localizedSub(AppLang.en), 'Streaming');
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// quota_controller_test.dart — 免费额度状态机
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:pangolin_vpn/state/quota_provider.dart';
|
||||
|
||||
void main() {
|
||||
test('默认值:10 分钟总额 / 6 分钟剩余 / 未解锁', () {
|
||||
final ctl = QuotaController();
|
||||
expect(ctl.state.totalMinutes, 10);
|
||||
expect(ctl.state.remainingMinutes, 6);
|
||||
expect(ctl.state.adUnlocked, false);
|
||||
});
|
||||
|
||||
test('progress = 剩余/总额', () {
|
||||
final ctl = QuotaController(const FreeQuotaState(totalMinutes: 10, remainingMinutes: 5));
|
||||
expect(ctl.state.progress, closeTo(0.5, 1e-9));
|
||||
});
|
||||
|
||||
test('isLow:剩余 ≤3 分钟为真', () {
|
||||
expect(const FreeQuotaState(remainingMinutes: 3).isLow, true);
|
||||
expect(const FreeQuotaState(remainingMinutes: 4).isLow, false);
|
||||
});
|
||||
|
||||
test('watchAd 解锁今日使用', () {
|
||||
final ctl = QuotaController();
|
||||
expect(ctl.state.adUnlocked, false);
|
||||
ctl.watchAd();
|
||||
expect(ctl.state.adUnlocked, true);
|
||||
});
|
||||
|
||||
test('reset 回到未解锁初始态', () {
|
||||
final ctl = QuotaController()..watchAd();
|
||||
ctl.reset();
|
||||
expect(ctl.state.adUnlocked, false);
|
||||
expect(ctl.state.remainingMinutes, 6);
|
||||
});
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user