feat(client): tablet 外壳 + 视觉 diff 工作流文档

- tablet_shell: 侧栏 232·4 项触控(minHeight 48, 字号 15) + 顶栏无主题切换 + 连接页双栏对照 ui_kits/tablet/tabapp.jsx；home_shell 分发 tablet→TabletShell - nav_sidebar 加 dense 参数(desktop 紧凑 / tablet 触控) - content_top_bar 加 showThemeToggle + titleSize 参数 - tool/visual-diff.md: 截图 diff 工作流(design-distill 工具)+ 实现侧三路径现状(golden 被 google_fonts 阻塞 / screencapture 受 macOS chrome 限制)+ 推荐注: tablet 形态在 macOS 桌面平台不触发(只 desktop/mobile)，运行验证需 iPad。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-16 09:38:18 +08:00
parent 4dc4127252
commit 281a6261fb
5 changed files with 159 additions and 31 deletions
@@ -0,0 +1,70 @@
+// tablet_shell.dart — 平板外壳（侧栏 4 项触控 + 内容区），对照 ui_kits/tablet/tabapp.jsx
+//
+// 与 desktop 区别：侧栏 232 触控尺寸、4 项（无联系/设置）、顶栏无主题切换；
+// 连接页自动走双栏（connect_page 在 formFactor==tablet 时进 isWide 分支）。
+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/navigation_provider.dart';
+import '../widgets/content_top_bar.dart';
+import '../widgets/nav_sidebar.dart';
+import '../widgets/pangolin_icons.dart';
+
+class TabletShell extends ConsumerWidget {
+  const TabletShell({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),
+    ];
+
+    final titles = <NavView, String>{
+      NavView.connect: t.tabConnect,
+      NavView.servers: t.tabServers,
+      NavView.stats: t.tabStats,
+      NavView.account: t.tabMe,
+    };
+
+    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);
+        default: // account / contact / settings / plans / redeem → 账户（tablet 一级只 4 项）
+          return const AccountPage(isWide: true);
+      }
+    }
+
+    return ColoredBox(
+      color: c.bg,
+      child: Row(children: [
+        NavSidebar(items: items, width: 232, dense: false),
+        Expanded(
+          child: Column(children: [
+            ContentTopBar(title: titles[view] ?? t.tabMe, showThemeToggle: false, titleSize: 19),
+            Expanded(child: content()),
+          ]),
+        ),
+      ]),
+    );
+  }
+}