wangjia
6f6cb97509
# Conflicts: # client/lib/widgets/connect_button.dart # client/lib/widgets/home_shell.dart # todo/todo.html # todo/todo.json
399 lines
16 KiB
Dart
399 lines
16 KiB
Dart
// home_shell.dart — 主框架(4 Tab:连接 / 节点 / 统计 / 账户)
|
|
//
|
|
// 自适应断点:同一份页面代码,宽度 ≥900 时从底部 Tab 切换为左侧栏分栏
|
|
// (LayoutBuilder 开关,不 fork 页面)。窄屏支持左右滑动切换 Tab。
|
|
import 'dart:async';
|
|
|
|
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
|
|
ConsumerState<HomeShell> createState() => _HomeShellState();
|
|
}
|
|
|
|
class _HomeShellState extends ConsumerState<HomeShell> {
|
|
int _tab = 0;
|
|
int _dir = 0;
|
|
Timer? _dirReset;
|
|
|
|
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 _swipe(int delta) => _goTab((_tab + delta).clamp(0, 3));
|
|
|
|
@override
|
|
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;
|
|
return Scaffold(
|
|
backgroundColor: c.bg,
|
|
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),
|
|
]),
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// ── 宽屏分栏:左侧栏导航 + 内容区 ──
|
|
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, 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',
|
|
VpnStatus.error => zh ? '连接错误' : 'Connection error',
|
|
};
|
|
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)),
|
|
]),
|
|
),
|
|
),
|
|
]),
|
|
);
|
|
}
|
|
}
|