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>
2026-06-16 09:23:20 +08:00
parent 71a4cddf0b
commit 4dc4127252
92 changed files with 4536 additions and 1187 deletions
@@ -0,0 +1,102 @@
+// nav_sidebar.dart — desktop/tablet 左侧栏导航
+//
+// 对照 ui_kits/desktop/dapp.jsx：宽 204、bgSubtle 底 + 右边框；
+// 品牌区(mark28 + 穿山甲 + PANGOLIN) → NavItem 列表 → Spacer → 套餐卡。
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../pangolin_theme.dart';
+import '../state/app_providers.dart';
+import '../state/navigation_provider.dart';
+import 'pangolin_icons.dart';
+import 'pangolin_logo.dart';
+import 'plan_badge_card.dart';
+
+typedef NavSidebarItem = ({IconData icon, String label, NavView view});
+
+class NavSidebar extends ConsumerWidget {
+  const NavSidebar({super.key, required this.items, this.width = 204});
+
+  final List<NavSidebarItem> items;
+  final double width;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final c = context.pangolin;
+    final t = ref.watch(appTextProvider);
+    final current = ref.watch(navViewProvider);
+
+    return Container(
+      width: width,
+      decoration: BoxDecoration(
+        color: c.bgSubtle,
+        border: Border(right: BorderSide(color: c.border)),
+      ),
+      padding: const EdgeInsets.fromLTRB(12, 14, 12, 14),
+      child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+        // 品牌区
+        Padding(
+          padding: const EdgeInsets.fromLTRB(6, 2, 6, 16),
+          child: Row(children: [
+            const PangolinMark(size: 28),
+            const SizedBox(width: 9),
+            Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+              Text(t.brand,
+                  style: PangolinText.h3.copyWith(color: c.fg1, fontWeight: FontWeight.w700, fontSize: 16, height: 1)),
+              const SizedBox(height: 3),
+              Text('PANGOLIN',
+                  style: PangolinText.caption.copyWith(
+                      color: c.accent, fontWeight: FontWeight.w600, fontSize: 9, letterSpacing: 1.6)),
+            ]),
+          ]),
+        ),
+        // Nav 列表
+        for (final item in items)
+          Padding(
+            padding: const EdgeInsets.only(bottom: 3),
+            child: _NavItem(
+              icon: item.icon,
+              label: item.label,
+              active: current == item.view,
+              onTap: () => ref.read(navViewProvider.notifier).state = item.view,
+            ),
+          ),
+        const Spacer(),
+        const PlanBadgeCard(),
+      ]),
+    );
+  }
+}
+
+class _NavItem extends StatelessWidget {
+  const _NavItem({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: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 9),
+          child: Row(children: [
+            Icon(icon, size: 18, color: active ? c.accent : c.fg3),
+            const SizedBox(width: 11),
+            Text(label,
+                style: PangolinText.sm.copyWith(
+                    color: active ? c.accent : c.fg2,
+                    fontSize: 13.5,
+                    fontWeight: active ? FontWeight.w600 : FontWeight.w500)),
+          ]),
+        ),
+      ),
+    );
+  }
+}