feat(client): 登录/注册页照原型重建，ds 真相源组件族统一全部屏
- 登录/注册（login.html/register.html 1:1）：两栏卡片+品牌渐变面板+主题小衣服 pill（onSurface 变体）+记住我（记录并预填最近账号）+原型式 toast 校验； 登录 fidelity 1.4–2.1% 三主题全绿；注册暂不入闸（少 门店编号/兑换券 字段， 已记 CONTRACT，screens.mjs 留存根） - ds 原子补齐：DsToast（.toast 单例）/DsCheck（.check/.agree）/DsButton lg 档/ DsSelect 替换全部旧 DropdownButton/DsField label 在上/DsInput 后缀与密码形态 - 全屏统一：对话框按钮全 DsButton、盒式输入主题钉死（visualDensity.standard、 h38、InputDecorationTheme 渗漏修复）、图标全 lucide、JetBrains Mono 三端同源、 BrandMark 真相源 logo、只读模式写操作全量守卫（WriteGuard+DsToast） - 出入库列表：版式对齐原型（卡片对齐+搜索框居中）、KPI 近30天滚动、结清后 失效财务应收应付表；商品编辑抽屉介绍库改搜索下拉、图片双击全屏预览 - 删除旧 UI 死代码：DataTableCard/FormDialog/PageScaffold/SearchChip/ SelectProductDialog/tabStateProvider - golden/fidelity：stock-in/out 补注册（9%）、login 入册（8%）、goldens 全量重打； 修复 pubspec flutter_web_plugins 非法声明（CI pub get 阻断） Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
@@ -0,0 +1,149 @@
|
||||
// widgets/ds/ds_bar_chart.dart — 原型 finance.html 收支趋势分组柱状图（镜像 .barchart）。
|
||||
// 度量照原型：图高 180 / 柱宽 26 / pair 内 gap 6 / 列间 gap 18 / 柱顶 mono 数值标签
|
||||
// （top:-17）/ 顶圆角 r-sm；收入柱=primary、支出柱=brand400；含图例（.chart-legend）。
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../core/theme/app_dims.g.dart';
|
||||
import '../../core/theme/context_tokens.dart';
|
||||
import '../../core/theme/app_fonts.dart';
|
||||
|
||||
class DsBarGroup {
|
||||
final String label; // 列底标签（如 1月）
|
||||
final double a; // 收入（primary 柱）
|
||||
final double b; // 支出（brand400 柱）
|
||||
const DsBarGroup(this.label, this.a, this.b);
|
||||
}
|
||||
|
||||
class DsBarChart extends StatelessWidget {
|
||||
final List<DsBarGroup> groups;
|
||||
final String legendA;
|
||||
final String legendB;
|
||||
|
||||
/// 柱顶数值标签格式化（原型显示「万元」整数）。
|
||||
final String Function(double v) format;
|
||||
|
||||
const DsBarChart({
|
||||
super.key,
|
||||
required this.groups,
|
||||
this.legendA = '收入',
|
||||
this.legendB = '支出',
|
||||
required this.format,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final t = context.tokens;
|
||||
var max = 0.0;
|
||||
for (final g in groups) {
|
||||
if (g.a > max) max = g.a;
|
||||
if (g.b > max) max = g.b;
|
||||
}
|
||||
if (max <= 0) max = 1;
|
||||
|
||||
return Container(
|
||||
// 原型 .chart-card：surface / border / r-lg / padding 18 20 14
|
||||
padding: const EdgeInsets.fromLTRB(20, 18, 20, 14),
|
||||
decoration: BoxDecoration(
|
||||
color: t.surface,
|
||||
border: Border.all(color: t.border),
|
||||
borderRadius: BorderRadius.circular(AppDims.rLg),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// .chart-legend
|
||||
Row(children: [
|
||||
_legend(t, t.primary, legendA),
|
||||
const SizedBox(width: 18),
|
||||
_legend(t, t.brand400, legendB),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
// .barchart：高 180 + 顶部标签余量 6
|
||||
SizedBox(
|
||||
height: 186,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
for (var i = 0; i < groups.length; i++) ...[
|
||||
if (i > 0) const SizedBox(width: 18),
|
||||
Expanded(child: _col(t, groups[i], max)),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _legend(dynamic t, Color color, String label) =>
|
||||
Row(mainAxisSize: MainAxisSize.min, children: [
|
||||
Container(
|
||||
width: 11,
|
||||
height: 11,
|
||||
decoration: BoxDecoration(
|
||||
color: color, borderRadius: BorderRadius.circular(3))),
|
||||
const SizedBox(width: 7),
|
||||
Text(label, style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
|
||||
]);
|
||||
|
||||
Widget _col(dynamic t, DsBarGroup g, double max) {
|
||||
return LayoutBuilder(builder: (ctx, cons) {
|
||||
// 原型柱宽 26；窄屏（列宽不足）按列宽收缩，防横向溢出
|
||||
final barW = ((cons.maxWidth - 6) / 2).clamp(8.0, 26.0);
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
_bar(t, g.a, max, t.primary, barW),
|
||||
const SizedBox(width: 6),
|
||||
_bar(t, g.b, max, t.brand400, barW),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(g.label,
|
||||
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Widget _bar(dynamic t, double v, double max, Color color, double barW) {
|
||||
// 最高柱 140 + 顶标签 ~18 ≈ 原型 .bar-pair 可用高（180 - 月份标签行）
|
||||
final h = (v / max * 140).clamp(2.0, 140.0);
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// .bv 柱顶数值（mono fs-xs muted；原型绝对定位悬浮 → 布局占柱宽、绘制可溢出）
|
||||
SizedBox(
|
||||
width: barW,
|
||||
child: Center(
|
||||
child: Text(format(v),
|
||||
softWrap: false,
|
||||
overflow: TextOverflow.visible,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsXs,
|
||||
color: t.muted,
|
||||
fontFamily: AppFonts.mono,
|
||||
fontFamilyFallback: AppFonts.monoFallback)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
Container(
|
||||
width: barW,
|
||||
height: h,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius:
|
||||
const BorderRadius.vertical(top: Radius.circular(AppDims.rSm)),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user