refactor(client): Phase 1 照原型重建 app 外壳（顶栏两级品牌 + 主题器 + 通知铃 + 分组侧栏 + 状态栏）

照 shell.js/statusbar.js/atoms.css 把外壳从「旧单品牌+换色」彻底重建为原型样式：
- 顶栏：岩美酒库(线描山形 mark CustomPaint，软件品牌) │分隔│ 鼎晟酒行(门店字标+店名)；
  右侧 ThemePickerPill(主题器，从系统设置迁来，A/B/C 切换) + NotificationBell(通知)
- 侧栏(218w)：分组 单据/经营/系统(nav-label) + nav(active 高亮) + 底部 side-user(头像/姓名/店·角色→菜单)
- 状态栏：AppStatusBar(原型 .statusbar，AppChrome 主题无关色)：店号/操作员/登录/当前(走字) · 连接/版本/授权
- 保留全部既有行为：更新/强制更新/授权横幅与弹窗、离线横幅、心跳、apiMessage、窄屏 Drawer
- 新增 widgets/theme_picker_pill.dart · notification_bell.dart · app_status_bar.dart
- golden：加载真实 MaterialIcons 字体（消图标豆腐块，全 golden 受益）；
  app_shell golden 用 9 分支+冻结时钟(可测试缝)确定化，对齐原型数据(鼎晟酒行/王经理/库存激活)
- fidelity：外壳 vs 原型 diff 3.5% ≤ 阈，montage 目检 chrome 与原型一致

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSKEiHsvauyxYUW2itzUXX

client/lib/widgets/app_status_bar.dart

@@ -0,0 +1,164 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
+import '../core/auth/auth_state.dart';
+import '../core/config/license_copy.dart';
+import '../core/theme/app_chrome.g.dart';
+import '../providers/connectivity_provider.dart';
+import '../providers/license_provider.dart';
+import '../providers/update_provider.dart';
+
+/// 底部状态栏（原型 .statusbar，主题无关 chrome 条）。
+/// 左：门店编号 / 操作员 / 登录时间 / 当前时间（每秒走字）  右：连接 / 版本 / 授权。
+class AppStatusBar extends ConsumerStatefulWidget {
+  final String loginTime;
+  const AppStatusBar({super.key, required this.loginTime});
+
+  /// 时钟种子（可测试缝）：golden 测试覆盖为固定时间以确定化；走字默认关。
+  static DateTime Function() clock = DateTime.now;
+
+  /// 是否每秒走字（golden 测试关掉，避免时间变动造成像素抖动 / pending timer）。
+  static bool ticking = true;
+
+  @override
+  ConsumerState<AppStatusBar> createState() => _AppStatusBarState();
+}
+
+class _AppStatusBarState extends ConsumerState<AppStatusBar> {
+  Timer? _timer;
+  late String _now;
+
+  @override
+  void initState() {
+    super.initState();
+    _now = DateFormat('HH:mm:ss').format(AppStatusBar.clock());
+    if (AppStatusBar.ticking) {
+      _timer = Timer.periodic(const Duration(seconds: 1), (_) {
+        if (mounted) {
+          setState(() =>
+              _now = DateFormat('HH:mm:ss').format(AppStatusBar.clock()));
+        }
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _timer?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final user = ref.watch(authStateProvider).user;
+    final isOnline = ref.watch(connectivityProvider);
+    final version = ref.watch(appVersionProvider).valueOrNull ?? 'v1.0.0';
+    final lic = ref.watch(licenseProvider).valueOrNull;
+
+    return Container(
+      height: 34,
+      color: AppChrome.statusbarBg,
+      padding: const EdgeInsets.symmetric(horizontal: 6),
+      child: Row(
+        children: [
+          // 左组
+          _item(icon: Icons.storefront_outlined, strong: user?.shopNo ?? '—'),
+          _div(),
+          _item(
+              icon: Icons.person_outline,
+              text: (user == null || user.realName.isEmpty)
+                  ? (user?.username ?? '—')
+                  : user.realName),
+          _div(),
+          _item(icon: Icons.login, text: '登录 ', strong: widget.loginTime),
+          _div(),
+          _item(icon: Icons.schedule, text: '当前 ', strong: _now),
+          const Spacer(),
+          // 右组
+          _item(
+            icon: isOnline ? Icons.cloud_done_outlined : Icons.cloud_off_outlined,
+            text: isOnline ? '已连接' : '连接已断开',
+            ok: isOnline,
+          ),
+          _div(),
+          _item(icon: Icons.sell_outlined, strong: version, ok: true),
+          _div(),
+          _licenseItem(lic),
+        ],
+      ),
+    );
+  }
+
+  Widget _div() => Container(
+        width: 1,
+        height: 14,
+        color: AppChrome.statusbarDiv,
+        margin: const EdgeInsets.symmetric(horizontal: 0),
+      );
+
+  // 单项：图标 + 普通文字 + 强调文字（mono 强调色）。ok=true 用 statusbar-ok 绿。
+  Widget _item({
+    required IconData icon,
+    String? text,
+    String? strong,
+    bool ok = false,
+    Color? color,
+  }) {
+    final c = color ?? (ok ? AppChrome.statusbarOk : AppChrome.statusbarFg);
+    final iconC = ok ? AppChrome.statusbarOk : AppChrome.statusbarMuted;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 13),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(icon, size: 13, color: iconC),
+          const SizedBox(width: 6),
+          if (text != null)
+            Text(text, style: TextStyle(fontSize: 11, color: c)),
+          if (strong != null)
+            Text(
+              strong,
+              style: TextStyle(
+                fontSize: 11,
+                color: ok ? AppChrome.statusbarOk : AppChrome.statusbarStrong,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _licenseItem(LicenseInfo? lic) {
+    if (lic == null) {
+      return _item(icon: Icons.verified_user_outlined, text: '授权', ok: true);
+    }
+    final color = LicenseCopy.phaseColor(lic.phase);
+    final icon = LicenseCopy.phaseIcon(lic.phase);
+    final date = lic.expiresAt == null
+        ? ''
+        : DateFormat('yyyy-MM-dd').format(lic.expiresAt!);
+    final text = LicenseCopy.statusBar(lic, date);
+    final normal = lic.phase == 'normal';
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 13),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(icon,
+              size: 13, color: normal ? AppChrome.statusbarOk : color),
+          const SizedBox(width: 6),
+          Text(
+            text,
+            style: TextStyle(
+              fontSize: 11,
+              color: normal ? AppChrome.statusbarOk : color,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

client/lib/widgets/notification_bell.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import '../core/theme/context_tokens.dart';
+
+/// 顶栏通知铃（原型 .icon-btn + #i-bell）。通知中心为二期，暂点开「暂无通知」面板。
+class NotificationBell extends StatelessWidget {
+  const NotificationBell({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final t = context.tokens;
+    return PopupMenuButton<void>(
+      tooltip: '通知',
+      offset: const Offset(0, 40),
+      position: PopupMenuPosition.under,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      color: t.surface,
+      elevation: 8,
+      itemBuilder: (_) => [
+        PopupMenuItem<void>(
+          enabled: false,
+          child: SizedBox(
+            width: 200,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text('通知',
+                    style: TextStyle(
+                        fontSize: 13,
+                        fontWeight: FontWeight.w600,
+                        color: t.heading)),
+                const SizedBox(height: 10),
+                Row(
+                  children: [
+                    Icon(Icons.notifications_off_outlined,
+                        size: 16, color: t.faint),
+                    const SizedBox(width: 8),
+                    Text('暂无通知',
+                        style: TextStyle(fontSize: 13, color: t.muted)),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+      child: Container(
+        width: 34,
+        height: 34,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+        ),
+        alignment: Alignment.center,
+        child: Icon(Icons.notifications_outlined, size: 19, color: t.topFg),
+      ),
+    );
+  }
+}

client/lib/widgets/theme_picker_pill.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../core/theme/context_tokens.dart';
+import '../core/theme/theme_controller.dart';
+
+/// 顶栏主题选择器 pill（原型 .theme-pill）：衬衫图标 + 当前主题名 + ▾。
+/// 点开 A/B/C 菜单切换主题（持久化），从「系统设置」迁来的入口。
+class ThemePickerPill extends ConsumerWidget {
+  const ThemePickerPill({super.key});
+
+  // 主题键 → 中文名（与原型 shell.js THEMES 一致）。
+  static const _names = {'a': '经典蓝', 'b': '琥珀', 'c': '酒窖'};
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final t = context.tokens;
+    final key = ref.watch(themeControllerProvider);
+    final name = _names[key] ?? '经典蓝';
+
+    return PopupMenuButton<String>(
+      tooltip: '切换主题',
+      offset: const Offset(0, 38),
+      position: PopupMenuPosition.under,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
+      color: t.surface,
+      elevation: 8,
+      onSelected: (v) => ref.read(themeControllerProvider.notifier).set(v),
+      itemBuilder: (_) => _names.entries.map((e) {
+        final sel = e.key == key;
+        return PopupMenuItem<String>(
+          value: e.key,
+          height: 40,
+          child: Row(
+            children: [
+              SizedBox(
+                width: 18,
+                child: sel
+                    ? Icon(Icons.check, size: 16, color: t.primary)
+                    : null,
+              ),
+              const SizedBox(width: 4),
+              Text(
+                '${e.key.toUpperCase()} · ${e.value}',
+                style: TextStyle(
+                  fontSize: 13,
+                  color: sel ? t.primary : t.text,
+                  fontWeight: sel ? FontWeight.w600 : FontWeight.w400,
+                ),
+              ),
+            ],
+          ),
+        );
+      }).toList(),
+      child: Container(
+        height: 30,
+        padding: const EdgeInsets.symmetric(horizontal: 11),
+        decoration: BoxDecoration(
+          color: t.topControl,
+          border: Border.all(color: t.topBorder),
+          borderRadius: BorderRadius.circular(999),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(Icons.checkroom, size: 15, color: t.sideFg),
+            const SizedBox(width: 7),
+            Text(name, style: TextStyle(fontSize: 12, color: t.topFg)),
+            const SizedBox(width: 7),
+            Icon(Icons.keyboard_arrow_down, size: 14, color: t.topFg),
+          ],
+        ),
+      ),
+    );
+  }
+}

client/test/golden/app_shell_golden_test.dart

@@ -12,10 +12,13 @@ import 'package:jiu_client/providers/update_provider.dart';
 import 'package:jiu_client/providers/connectivity_provider.dart';
 import 'package:jiu_client/providers/session_heartbeat.dart';
 import 'package:jiu_client/screens/shell/app_shell.dart';
+import 'package:jiu_client/widgets/app_status_bar.dart';
 
-/// design-distill 阶段4：app 外壳（顶栏 + 侧栏 + 内容区）golden × 三主题。
-/// 锁住导航 chrome 随主题换色——这是最显眼的主题面，之前各屏 golden 都不含外壳。
-/// 需 MaterialApp.router（外壳依赖 StatefulNavigationShell），故为自定义 golden。
+import '../support/golden_harness.dart';
+
+/// design-distill 阶段4：app 外壳（顶栏两级品牌 + 主题器 + 通知铃 + 分组侧栏 + 状态栏）
+/// golden × 三主题。照原型 shell.js/statusbar.js 重建后的回归基准 + 与原型保真比对基准。
+/// 与原型对齐：门店=鼎晟酒行/DSJH-001、用户=王经理(管理员)、版本 v1.0.72、库存页激活。
 /// 更新基准：flutter test --update-goldens test/golden/app_shell_golden_test.dart
 
 class _FakeAuth extends AuthNotifier {
@@ -23,7 +26,7 @@ class _FakeAuth extends AuthNotifier {
     state = const AuthState(
       user: AuthUser(
           accessToken: 't', refreshToken: 'r', id: 1, username: 'wang',
-          realName: '王经理', shopNo: 'DBZB-001', shopId: 1, role: 'admin'),
+          realName: '王经理', shopNo: 'DSJH-001', shopId: 1, role: 'admin'),
     );
   }
 }
@@ -39,7 +42,7 @@ class _FakeLicense extends LicenseNotifier {
 }
 
 const _shop = ShopInfo(
-    id: 1, code: 'DBZB-001', name: '鼎昌酒行',
+    id: 1, code: 'DSJH-001', name: '鼎晟酒行',
     address: '浙江省杭州市', phone: '0571-88886666', managerName: '王经理');
 
 List<Override> _overrides() => [
@@ -55,17 +58,27 @@ List<Override> _overrides() => [
       isReadonlyProvider.overrideWithValue(false),
     ];
 
+// 外壳 nav 引用 9 个分支序号（入/出库·库存·财务·往来·基础数据·设备·设置·关于）。
+// 全部空白内容，仅供外壳渲染；初始定位库存（index 2）以匹配原型激活态。
+StatefulShellBranch _branch(String path) => StatefulShellBranch(routes: [
+      GoRoute(path: path, builder: (_, __) => const SizedBox.expand()),
+    ]);
+
 GoRouter _router() => GoRouter(
       initialLocation: '/inventory',
       routes: [
         StatefulShellRoute.indexedStack(
           builder: (ctx, state, shell) => AppShell(navigationShell: shell),
           branches: [
-            StatefulShellBranch(routes: [
-              GoRoute(
-                  path: '/inventory',
-                  builder: (_, __) => const SizedBox.expand()),
-            ]),
+            _branch('/stock-in'),
+            _branch('/stock-out'),
+            _branch('/inventory'),
+            _branch('/finance'),
+            _branch('/partners'),
+            _branch('/products'),
+            _branch('/devices'),
+            _branch('/settings'),
+            _branch('/about'),
           ],
         ),
       ],
@@ -74,10 +87,14 @@ GoRouter _router() => GoRouter(
 void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
   SharedPreferences.setMockInitialValues({});
+  // 冻结状态栏时钟，确定化 golden（关走字，避免像素抖动 / pending timer）。
+  AppStatusBar.clock = () => DateTime(2026, 7, 13, 9, 30, 15);
+  AppStatusBar.ticking = false;
 
   for (final theme in const ['a', 'b', 'c']) {
     testWidgets('app shell · theme $theme', (tester) async {
-      tester.view.physicalSize = const Size(2560, 1600);
+      await ensureGoldenFonts();
+      tester.view.physicalSize = const Size(2560, 1800); // 1280×900 @2x
       tester.view.devicePixelRatio = 2.0;
       addTearDown(tester.view.resetPhysicalSize);
       addTearDown(tester.view.resetDevicePixelRatio);
@@ -86,7 +103,7 @@ void main() {
         overrides: _overrides(),
         child: MaterialApp.router(
           debugShowCheckedModeBanner: false,
-          theme: buildTheme(theme),
+          theme: withGoldenFont(buildTheme(theme)),
           routerConfig: _router(),
         ),
       ));

client/test/support/golden_harness.dart

@@ -12,6 +12,17 @@ Future<void> ensureGoldenFonts() async {
   final loader = FontLoader('NotoSansSC')
     ..addFont(rootBundle.load('assets/fonts/NotoSansSC.ttf'));
   await loader.load();
+  // 真实 Material 图标字体（否则 golden 里图标渲染成豆腐块 □）。
+  for (final key in const [
+    'fonts/MaterialIcons-Regular.otf',
+    'packages/flutter/fonts/MaterialIcons-Regular.otf',
+  ]) {
+    try {
+      final f = FontLoader('MaterialIcons')..addFont(rootBundle.load(key));
+      await f.load();
+      break;
+    } catch (_) {/* 换下一个 asset key */}
+  }
   _fontsLoaded = true;
 }