Files
jiu/client/lib/widgets/app_status_bar.dart
wangjia 1b43dfc75d 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
2026-06-25 18:02:38 +08:00

165 lines
5.2 KiB
Dart

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,
),
),
],
),
);
}
}