wangjia/jiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 130 Wiki Activity

feat(client): ds 组件库地基（镜像 atoms.css 原子，屏重写前置）

Browse Source 
按「先建单一组件源、屏只组合不重写样式」重立组件层：
- 新建 widgets/ds/：DsButton(.btn ghost/primary/danger/sm) · DsBadge(.badge+圆点) ·
  DsChip(.chip 状态筹码) · DsSearchBox(.searchbox) · DsKpi(.kpi 含 .ic 右上块+环比 .d)
- 每个组件一对一对照 atoms.css 尺寸/间距/圆角/字号，颜色/尺寸全引 token（0 硬编码，颜色闸过）
- 现有 KpiCard/StatusPill 等逐步迁入 ds/ 废弃

下一步：建 DsTable（表格+列头漏斗+分页+状态徽章用 DsBadge）→ 用 ds 组件重写库存屏。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSKEiHsvauyxYUW2itzUXX
This commit is contained in:
wangjia
2026-06-25 21:30:59 +08:00
parent 7623a4c702
commit 9ce8934412
2 changed files with 330 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/lib/widgets/ds/ds_atoms.dart
+215
View File
@@ -0,0 +1,215 @@
// widgets/ds/ds_atoms.dart
// Flutter 组件库（ds=design-system）——一对一镜像原型 atoms.css 的原子。
// 单一组件源：尺寸/间距/圆角/字号全引 AppDims，颜色全引 context.tokens（禁硬编码）。
// 屏只组合这些组件，不再自己堆样式（见代码端真相源闸 check_ds_code）。
import 'package:flutter/material.dart';
import '../../core/theme/context_tokens.dart';
import '../../core/theme/app_dims.g.dart';
// ── .btn ──────────────────────────────────────────────────────────────────
enum DsBtnVariant { ghost, primary, danger }
/// 原型 .btn：h38 / pad 0 16 / r-md / fs-body / fw600 / gap7，图标 16。
/// ghost=surface+border / primary=primary+on-primary / danger=danger+白。
class DsButton extends StatelessWidget {
final String label;
final IconData? icon;
final VoidCallback? onPressed;
final DsBtnVariant variant;
final bool small; // .btn.sm：h32 / pad 0 12 / fs-sm
const DsButton(
this.label, {
super.key,
this.icon,
this.onPressed,
this.variant = DsBtnVariant.ghost,
this.small = false,
});
@override
Widget build(BuildContext context) {
final t = context.tokens;
final (bg, fg, border) = switch (variant) {
DsBtnVariant.ghost => (t.surface, t.text, t.border),
DsBtnVariant.primary => (t.primary, t.onPrimary, t.primary),
DsBtnVariant.danger => (t.danger, t.onPrimary, t.danger),
};
return Material(
color: bg,
borderRadius: BorderRadius.circular(AppDims.rMd),
child: InkWell(
onTap: onPressed,
borderRadius: BorderRadius.circular(AppDims.rMd),
child: Container(
height: small ? 32 : 38,
padding: EdgeInsets.symmetric(horizontal: small ? 12 : 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppDims.rMd),
border: Border.all(color: border),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (icon != null) ...[
Icon(icon, size: 16, color: fg),
const SizedBox(width: 7),
],
Text(label,
style: TextStyle(
color: fg,
fontSize: small ? AppDims.fsSm : AppDims.fsBody,
fontWeight: FontWeight.w600)),
],
),
),
),
);
}
}
// ── .badge ────────────────────────────────────────────────────────────────
enum DsBadgeTone { ok, danger, warn, info, accent, muted }
/// 原型 .badge：h22 / pad 0 9 / r-pill / fs-sm fw600 + 前导圆点(6px, currentColor)。
class DsBadge extends StatelessWidget {
final String label;
final DsBadgeTone tone;
const DsBadge(this.label, {super.key, this.tone = DsBadgeTone.ok});
@override
Widget build(BuildContext context) {
final t = context.tokens;
final (bg, fg) = switch (tone) {
DsBadgeTone.ok => (t.successBg, t.success),
DsBadgeTone.danger => (t.dangerBg, t.danger),
DsBadgeTone.warn => (t.warnBg, t.warn),
DsBadgeTone.info => (t.infoSoft, t.primary),
DsBadgeTone.accent => (t.accentSoft, t.accent),
DsBadgeTone.muted => (t.borderSubtle, t.muted),
};
return Container(
height: 22,
padding: const EdgeInsets.symmetric(horizontal: 9),
decoration:
BoxDecoration(color: bg, borderRadius: BorderRadius.circular(AppDims.rPill)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 6,
height: 6,
decoration: BoxDecoration(color: fg, shape: BoxShape.circle)),
const SizedBox(width: 5),
Text(label,
style: TextStyle(
color: fg,
fontSize: AppDims.fsSm,
fontWeight: FontWeight.w600)),
],
),
);
}
}
// ── .chip ─────────────────────────────────────────────────────────────────
/// 原型 .chip：h34 / pad 0 12 / border r-md / surface / fs-sm / gap7。
/// 选中值用 .cv（primary fw600）；激活(on)边框 primary。配 PopupMenuButton 用。
class DsChip extends StatelessWidget {
final String label;
final String? value; // 选中值（.cv）；非空即 on 态
final VoidCallback? onTap;
const DsChip({super.key, required this.label, this.value, this.onTap});
@override
Widget build(BuildContext context) {
final t = context.tokens;
final on = value != null && value!.isNotEmpty;
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(AppDims.rMd),
child: Container(
height: 34,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: t.surface,
border: Border.all(color: on ? t.primary : t.border),
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(label,
style: TextStyle(fontSize: AppDims.fsSm, color: t.text)),
if (on) ...[
const SizedBox(width: 7),
Text(value!,
style: TextStyle(
fontSize: AppDims.fsSm,
color: t.primary,
fontWeight: FontWeight.w600)),
],
const SizedBox(width: 7),
Icon(Icons.keyboard_arrow_down, size: 14, color: t.faint),
],
),
),
);
}
}
// ── .searchbox ──────────────────────────────────────────────────────────────
/// 原型 .searchbox：h34 / bg / border r-md / gap8 / pad 0 11，前导放大镜 14(faint)。
class DsSearchBox extends StatelessWidget {
final TextEditingController? controller;
final String hint;
final ValueChanged<String>? onChanged;
final ValueChanged<String>? onSubmitted;
final double? width;
const DsSearchBox({
super.key,
this.controller,
this.hint = '',
this.onChanged,
this.onSubmitted,
this.width,
});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return SizedBox(
width: width,
height: 34,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 11),
decoration: BoxDecoration(
color: t.bg,
border: Border.all(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: Row(
children: [
Icon(Icons.search, size: 14, color: t.faint),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: controller,
onChanged: onChanged,
onSubmitted: onSubmitted,
style: TextStyle(fontSize: AppDims.fsBody, color: t.text),
decoration: InputDecoration(
isCollapsed: true,
border: InputBorder.none,
hintText: hint,
hintStyle:
TextStyle(fontSize: AppDims.fsBody, color: t.faint),
),
),
),
],
),
),
);
}
}
client/lib/widgets/ds/ds_kpi.dart
+115
View File
@@ -0,0 +1,115 @@
// widgets/ds/ds_kpi.dart — 原型 .kpi 卡（镜像 atoms.css）。
import 'package:flutter/material.dart';
import '../../core/theme/context_tokens.dart';
import '../../core/theme/app_dims.g.dart';
/// 图标块 .ic 变体（软底 + 前景色）。
enum DsKpiTone { info, ok, blue, alert }
/// 环比方向 .d.up/.down（绿/红），neutral=纯文案(muted)。
enum DsKpiDelta { up, down, neutral }
/// 原型 .kpi：surface/border/r-lg/pad 15 16；右上 .ic(30×30 r-md)；
/// .t(fs-sm muted) / .v(24 fw700 heading mono，alert→accent) / .d(fs-xs，up绿/down红)。
class DsKpi extends StatelessWidget {
final String title;
final String value;
final IconData icon;
final DsKpiTone tone;
final String? delta;
final DsKpiDelta deltaTone;
final VoidCallback? onTap;
const DsKpi({
super.key,
required this.title,
required this.value,
required this.icon,
this.tone = DsKpiTone.info,
this.delta,
this.deltaTone = DsKpiDelta.neutral,
this.onTap,
});
@override
Widget build(BuildContext context) {
final t = context.tokens;
final (icBg, icFg) = switch (tone) {
DsKpiTone.info => (t.infoSoft, t.primary),
DsKpiTone.ok => (t.okSoft, t.success),
DsKpiTone.blue => (t.infoSoft, t.brand400),
DsKpiTone.alert => (t.accentSoft, t.accent),
};
final deltaColor = switch (deltaTone) {
DsKpiDelta.up => t.success,
DsKpiDelta.down => t.danger,
DsKpiDelta.neutral => t.muted,
};
final card = Container(
padding: const EdgeInsets.fromLTRB(16, 15, 16, 15),
decoration: BoxDecoration(
color: t.surface,
border: Border.all(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rLg),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 2),
child: Text(title,
style: TextStyle(
fontSize: AppDims.fsSm, color: t.muted)),
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: icBg,
borderRadius: BorderRadius.circular(AppDims.rMd)),
alignment: Alignment.center,
child: Icon(icon, size: 17, color: icFg),
),
],
),
const SizedBox(height: 7),
Text(value,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w700,
letterSpacing: 0.3,
fontFamily: 'monospace',
color: tone == DsKpiTone.alert ? t.accent : t.heading)),
if (delta != null) ...[
const SizedBox(height: 5),
Row(
mainAxisSize: MainAxisSize.min,
children: [
if (deltaTone != DsKpiDelta.neutral)
Icon(
deltaTone == DsKpiDelta.up
? Icons.arrow_drop_up
: Icons.arrow_drop_down,
size: 14,
color: deltaColor),
Text(delta!,
style: TextStyle(fontSize: AppDims.fsXs, color: deltaColor)),
],
),
],
],
),
);
if (onTap == null) return card;
return MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(onTap: onTap, child: card),
);
}
}