feat(client): 三端布局架构 + macOS 桌面端 + app 图标

三端布局(mobile/tablet/desktop):
- core/responsive/form_factor.dart 形态判定 + shell/ 分发器(home_shell→desktop/mobile)
- desktop_shell 对照 ui_kits/desktop/dapp.jsx: 侧栏204·6项 + 套餐卡 + 顶栏(标题/状态/主题切换) + 连接页居中单列
- 新增组件 nav_sidebar / plan_badge_card / content_top_bar / bottom_tab_bar
- 新增一级页 contact_page / settings_page; navigation_provider(NavView)
- 删除旧 widgets/home_shell.dart(逻辑迁入 shell/)

macOS 桌面端:
- 窗口默认 920×600 + 最小 720×560(MainFlutterWindow.swift)
- app 图标替换为穿山甲(AppIcon.appiconset 全套, 由 app-icon.svg 渲染)

其余(本会话):
- Phase2 接线: auth_api/token_store/auth_provider/vpn_bridge_provider + 真实 connection/nodes
- lucide_icons 兼容补丁(packages/lucide_icons_patched) 修复 IconData final 报错
- 测试修复: connect_passthrough(UTF-8) / harness / golden @Skip
- l10n 新增 settingsTitle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-16 09:23:20 +08:00
parent 71a4cddf0b
commit 4dc4127252
92 changed files with 4536 additions and 1187 deletions
+82
View File
@@ -0,0 +1,82 @@
// desktop_shell.dart — 桌面外壳(左侧栏 + 顶栏 + 内容区)
//
// 对照 ui_kits/desktop/dapp.jsx920×600 窗口、204 侧栏(6 项)、52 顶栏、内容区。
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/contact_page.dart';
import '../screens/nodes_page.dart';
import '../screens/settings_page.dart';
import '../screens/stats_page.dart';
import '../state/app_providers.dart';
import '../state/navigation_provider.dart';
import '../widgets/content_top_bar.dart';
import '../widgets/nav_sidebar.dart';
import '../widgets/pangolin_icons.dart';
class DesktopShell extends ConsumerWidget {
const DesktopShell({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final c = context.pangolin;
final t = ref.watch(appTextProvider);
final view = ref.watch(navViewProvider);
final items = <NavSidebarItem>[
(icon: PangolinIcons.power, label: t.tabConnect, view: NavView.connect),
(icon: PangolinIcons.globe, label: t.tabServers, view: NavView.servers),
(icon: PangolinIcons.barChart, label: t.tabStats, view: NavView.stats),
(icon: PangolinIcons.user, label: t.tabMe, view: NavView.account),
(icon: PangolinIcons.messageCircle, label: t.contactTitle, view: NavView.contact),
(icon: PangolinIcons.settings, label: t.settingsTitle, view: NavView.settings),
];
final titles = <NavView, String>{
NavView.connect: t.tabConnect,
NavView.servers: t.tabServers,
NavView.stats: t.tabStats,
NavView.account: t.tabMe,
NavView.contact: t.contactTitle,
NavView.settings: t.settingsTitle,
};
void go(NavView v) => ref.read(navViewProvider.notifier).state = v;
Widget content() {
switch (view) {
case NavView.connect:
return ConnectPage(isWide: true, onOpenNodes: () => go(NavView.servers));
case NavView.servers:
return NodesPage(isWide: true, onPicked: () => go(NavView.connect));
case NavView.stats:
return const StatsPage(isWide: true);
case NavView.account:
return const AccountPage(isWide: true);
case NavView.contact:
return const ContactPage();
case NavView.settings:
return const SettingsPage();
case NavView.plans:
case NavView.redeem:
return const AccountPage(isWide: true);
}
}
return ColoredBox(
color: c.bg,
child: Row(children: [
NavSidebar(items: items),
Expanded(
child: Column(children: [
ContentTopBar(title: titles[view] ?? t.brand),
Expanded(child: content()),
]),
),
]),
);
}
}