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

feat(client): 账户子页 desktop 内容区下钻（档1）

Browse Source 
- desktop 上套餐选择/兑换购买/设备管理改为内容区下钻（侧栏保留、shell 顶栏带
  返回箭头），不再全屏 push 盖住侧栏；mobile/tablet 仍全屏 push
- _SubScaffold 加 embedded 参数(true 只返回内容)，PlansScreen/DevicesScreen/
  RedeemScreen 透传；NavView 加 devices + kAccountSubViews 集合
- desktop_shell 渲染子页(embedded) + 顶栏 onBack→account；account_page 按
  formFactor 选下钻(切 navView)或 push
- desktop 整页 golden 补 套餐/兑换/设备 三子页(共 8 页)

测试: flutter test 84 通过(+3 子页 golden), analyze 0 error

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-16 12:36:14 +08:00
parent 4886416e8b
commit fe16f89bc3
8 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/lib/screens/account_page.dart
+15 -6
View File
@@ -2,9 +2,11 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../core/responsive/form_factor.dart';
import '../l10n/app_text.dart';
import '../pangolin_theme.dart';
import '../state/app_providers.dart';
import '../state/navigation_provider.dart';
import '../widgets/account_screens.dart';
import '../widgets/app_top_bar.dart';
import '../widgets/pangolin_icons.dart';
@@ -24,13 +26,20 @@ class AccountPage extends ConsumerWidget {
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));
// desktop 在内容区下钻（切 navView）；mobile/tablet 全屏 push。
final isDesktop = context.formFactor == FormFactor.desktop;
void open(NavView v, Widget mobilePage) {
if (isDesktop) {
ref.read(navViewProvider.notifier).state = v;
} else {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => mobilePage));
}
}
final body = ListView(
padding: EdgeInsets.fromLTRB(pad, isWide ? 6 : 0, pad, 24),
children: [
_PlanBanner(t: t, isFree: isFree, onUpgrade: () => push(PlansScreen(t: t))),
_PlanBanner(t: t, isFree: isFree, onUpgrade: () => open(NavView.plans, PlansScreen(t: t))),
const SizedBox(height: 18),
// 账户信息
_SectionLabel(text: t.accInfoTitle),
@@ -42,11 +51,11 @@ class AccountPage extends ConsumerWidget {
const SizedBox(height: 16),
// 设备 / 兑换 / 联系
_Card(children: [
_NavRow(icon: PangolinIcons.monitorSmartphone, title: t.myDevices, onTap: () => push(DevicesScreen(t: t))),
_NavRow(icon: PangolinIcons.monitorSmartphone, title: t.myDevices, onTap: () => open(NavView.devices, DevicesScreen(t: t))),
Divider(height: 1, color: c.border),
_NavRow(icon: PangolinIcons.shoppingBag, title: t.redeemEntry, onTap: () => push(RedeemScreen(t: t))),
_NavRow(icon: PangolinIcons.shoppingBag, title: t.redeemEntry, onTap: () => open(NavView.redeem, RedeemScreen(t: t))),
Divider(height: 1, color: c.border),
_NavRow(icon: PangolinIcons.messageCircle, title: t.contactEntry, onTap: () => push(ContactScreen(t: t))),
_NavRow(icon: PangolinIcons.messageCircle, title: t.contactEntry, onTap: () => open(NavView.contact, ContactScreen(t: t))),
]),
const SizedBox(height: 16),
// 语言 / 主题 / 协议
client/lib/shell/desktop_shell.dart
+14 -2
View File
@@ -13,6 +13,7 @@ import '../screens/settings_page.dart';
import '../screens/stats_page.dart';
import '../state/app_providers.dart';
import '../state/navigation_provider.dart';
import '../widgets/account_screens.dart';
import '../widgets/content_top_bar.dart';
import '../widgets/nav_sidebar.dart';
import '../widgets/pangolin_icons.dart';
@@ -42,6 +43,9 @@ class DesktopShell extends ConsumerWidget {
NavView.account: t.tabMe,
NavView.contact: t.contactTitle,
NavView.settings: t.settingsTitle,
NavView.plans: t.choosePlan,
NavView.redeem: t.redeemTitle,
NavView.devices: t.myDevices,
};
void go(NavView v) => ref.read(navViewProvider.notifier).state = v;
@@ -60,19 +64,27 @@ class DesktopShell extends ConsumerWidget {
return const ContactPage();
case NavView.settings:
return const SettingsPage();
// 账户下钻子页（内容区，顶栏带返回）
case NavView.plans:
return PlansScreen(t: t, embedded: true, onChoose: (_) => go(NavView.redeem));
case NavView.redeem:
return const AccountPage(isWide: true);
return RedeemScreen(t: t, embedded: true);
case NavView.devices:
return DevicesScreen(t: t, embedded: true);
}
}
final isSub = kAccountSubViews.contains(view);
return ColoredBox(
color: c.bg,
child: Row(children: [
NavSidebar(items: items),
Expanded(
child: Column(children: [
ContentTopBar(title: titles[view] ?? t.brand),
ContentTopBar(
title: titles[view] ?? t.brand,
onBack: isSub ? () => go(NavView.account) : null,
),
Expanded(child: content()),
]),
),
client/lib/state/navigation_provider.dart
+4 -1
View File
@@ -4,7 +4,10 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
/// 一级视图 + 账户子页。
/// desktop 侧栏暴露 6 个一级项（connect..settings）；mobile/tablet 取前 4 项，
/// contact/settings 在 mobile 走账户子页。plans/redeem 是 account 的下钻页。
enum NavView { connect, servers, stats, account, contact, settings, plans, redeem }
enum NavView { connect, servers, stats, account, contact, settings, plans, redeem, devices }
/// 账户下钻子页（desktop 在内容区切换、顶栏带返回；mobile/tablet 走全屏 push）。
const Set<NavView> kAccountSubViews = {NavView.plans, NavView.redeem, NavView.devices};
/// 当前视图。
final navViewProvider = StateProvider<NavView>((ref) => NavView.connect);
client/lib/widgets/account_screens.dart
+14 -5
View File
@@ -10,15 +10,18 @@ import 'pangolin_button.dart';
import 'pangolin_icons.dart';
import 'plan_card.dart';
/// 通用:带返回箭头的子页骨架
/// 通用:带返回箭头的子页骨架。embedded=true 时只返回内容（desktop 内容区下钻，
/// 返回/标题由外层 shell 顶栏提供），否则整页 Scaffold（mobile/tablet 全屏 push）。
class _SubScaffold extends StatelessWidget {
const _SubScaffold({required this.title, required this.child, this.onBack});
const _SubScaffold({required this.title, required this.child, this.onBack, this.embedded = false});
final String title;
final Widget child;
final VoidCallback? onBack;
final bool embedded;
@override
Widget build(BuildContext context) {
final c = context.pangolin;
if (embedded) return child;
return Scaffold(
backgroundColor: c.bg,
body: SafeArea(
@@ -42,10 +45,11 @@ class _SubScaffold extends StatelessWidget {
/// ── 套餐选择 ──
class PlansScreen extends StatelessWidget {
const PlansScreen({super.key, required this.t, this.onChoose, this.onBack});
const PlansScreen({super.key, required this.t, this.onChoose, this.onBack, this.embedded = false});
final AppText t;
final ValueChanged<String>? onChoose;
final VoidCallback? onBack;
final bool embedded;
@override
Widget build(BuildContext context) {
@@ -57,6 +61,7 @@ class PlansScreen extends StatelessWidget {
return _SubScaffold(
title: t.choosePlan,
onBack: onBack,
embedded: embedded,
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 14, 20, 24),
children: [
@@ -84,9 +89,10 @@ class DeviceItem {
}
class DevicesScreen extends StatefulWidget {
const DevicesScreen({super.key, required this.t, this.onBack});
const DevicesScreen({super.key, required this.t, this.onBack, this.embedded = false});
final AppText t;
final VoidCallback? onBack;
final bool embedded;
@override
State<DevicesScreen> createState() => _DevicesScreenState();
}
@@ -104,6 +110,7 @@ class _DevicesScreenState extends State<DevicesScreen> {
return _SubScaffold(
title: widget.t.myDevices,
onBack: widget.onBack,
embedded: widget.embedded,
child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
Text(widget.t.devicesSub, style: PangolinText.caption.copyWith(color: c.fg3, fontWeight: FontWeight.w400)),
const SizedBox(height: 12),
@@ -152,9 +159,10 @@ class _DevicesScreenState extends State<DevicesScreen> {
/// ── 兑换 & 购买 ──
class RedeemScreen extends StatefulWidget {
const RedeemScreen({super.key, required this.t, this.onBack});
const RedeemScreen({super.key, required this.t, this.onBack, this.embedded = false});
final AppText t;
final VoidCallback? onBack;
final bool embedded;
@override
State<RedeemScreen> createState() => _RedeemScreenState();
}
@@ -182,6 +190,7 @@ class _RedeemScreenState extends State<RedeemScreen> {
return _SubScaffold(
title: t.redeemTitle,
onBack: widget.onBack,
embedded: widget.embedded,
child: ListView(padding: const EdgeInsets.fromLTRB(20, 4, 20, 24), children: [
Container(
padding: const EdgeInsets.all(18),
client/test/golden/desktop_pages_golden_test.dart
+4
View File
@@ -61,4 +61,8 @@ void main() {
testWidgets('desktop 账户页', (t) => _shoot(t, NavView.account, 'desktop_account'));
testWidgets('desktop 联系页', (t) => _shoot(t, NavView.contact, 'desktop_contact'));
testWidgets('desktop 设置页', (t) => _shoot(t, NavView.settings, 'desktop_settings'));
// 账户下钻子页（内容区 + 顶栏返回）
testWidgets('desktop 套餐选择', (t) => _shoot(t, NavView.plans, 'desktop_plans'));
testWidgets('desktop 兑换购买', (t) => _shoot(t, NavView.redeem, 'desktop_redeem'));
testWidgets('desktop 设备管理', (t) => _shoot(t, NavView.devices, 'desktop_devices'));
}
client/test/golden/goldens/desktop_devices.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

client/test/golden/goldens/desktop_plans.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

client/test/golden/goldens/desktop_redeem.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB