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
This commit is contained in:
wangjia
File diff suppressed because it is too large
Load Diff
@@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user