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
@@ -0,0 +1,82 @@
|
||||
// desktop_shell.dart — 桌面外壳（左侧栏 + 顶栏 + 内容区）
|
||||
//
|
||||
// 对照 ui_kits/desktop/dapp.jsx：920×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()),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// home_shell.dart — 主框架分发器（按 formFactor 选三端外壳）
|
||||
//
|
||||
// desktop → 侧栏 6 项 + 顶栏（对照 ui_kits/desktop）
|
||||
// tablet → 暂用 MobileShell（TODO: TabletShell 侧栏双栏，对照 ui_kits/tablet）
|
||||
// mobile → 底 Tab + 滑动（对照 ui_kits/mobile）
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../core/responsive/form_factor.dart';
|
||||
import '../pangolin_theme.dart';
|
||||
import 'desktop_shell.dart';
|
||||
import 'mobile_shell.dart';
|
||||
|
||||
class HomeShell extends ConsumerWidget {
|
||||
const HomeShell({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final c = context.pangolin;
|
||||
final Widget body = switch (context.formFactor) {
|
||||
FormFactor.desktop => const DesktopShell(),
|
||||
FormFactor.tablet => const MobileShell(), // TODO: TabletShell
|
||||
FormFactor.mobile => const MobileShell(),
|
||||
};
|
||||
return Scaffold(backgroundColor: c.bg, body: body);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
// mobile_shell.dart — 移动外壳（底 Tab + 左右滑动），对照 ui_kits/mobile
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../screens/account_page.dart';
|
||||
import '../screens/connect_page.dart';
|
||||
import '../screens/nodes_page.dart';
|
||||
import '../screens/stats_page.dart';
|
||||
import '../state/navigation_provider.dart';
|
||||
import '../widgets/bottom_tab_bar.dart';
|
||||
import '../widgets/tab_swipe.dart';
|
||||
|
||||
class MobileShell extends ConsumerStatefulWidget {
|
||||
const MobileShell({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<MobileShell> createState() => _MobileShellState();
|
||||
}
|
||||
|
||||
class _MobileShellState extends ConsumerState<MobileShell> {
|
||||
int _dir = 0;
|
||||
Timer? _dirReset;
|
||||
|
||||
int _indexOf(NavView v) {
|
||||
final i = kPrimaryNav.indexOf(v);
|
||||
return i < 0 ? 3 : i; // contact/settings/plans/redeem 归到账户
|
||||
}
|
||||
|
||||
void _goTo(NavView v) {
|
||||
final cur = _indexOf(ref.read(navViewProvider));
|
||||
final next = _indexOf(v);
|
||||
if (next == cur) return;
|
||||
setState(() => _dir = next > cur ? 1 : -1);
|
||||
ref.read(navViewProvider.notifier).state = v;
|
||||
_dirReset?.cancel();
|
||||
_dirReset = Timer(const Duration(milliseconds: 260), () {
|
||||
if (mounted) setState(() => _dir = 0);
|
||||
});
|
||||
}
|
||||
|
||||
void _swipe(int delta) {
|
||||
final cur = _indexOf(ref.read(navViewProvider));
|
||||
_goTo(kPrimaryNav[(cur + delta).clamp(0, kPrimaryNav.length - 1)]);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_dirReset?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final view = ref.watch(navViewProvider);
|
||||
final index = _indexOf(view);
|
||||
final pages = <Widget>[
|
||||
ConnectPage(isWide: false, onOpenNodes: () => _goTo(NavView.servers)),
|
||||
NodesPage(isWide: false, onPicked: () => _goTo(NavView.connect)),
|
||||
const StatsPage(isWide: false),
|
||||
const AccountPage(isWide: false),
|
||||
];
|
||||
|
||||
return SafeArea(
|
||||
bottom: false,
|
||||
child: Column(children: [
|
||||
Expanded(
|
||||
child: HorizontalSwipeArea(
|
||||
onSwipeLeft: () => _swipe(1),
|
||||
onSwipeRight: () => _swipe(-1),
|
||||
child: DirectionalTabSwitcher(index: index, direction: _dir, child: pages[index]),
|
||||
),
|
||||
),
|
||||
BottomTabBar(current: kPrimaryNav[index], onTap: _goTo),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user