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

feat(client): 登录/注册页照原型重建，ds 真相源组件族统一全部屏

Browse Source 
- 登录/注册（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
2026-07-03 09:58:14 +08:00
parent ca7595b113
commit 6238b86dcb
286 changed files with 16831 additions and 11136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/lib/screens/auth/auth_shared.dart
+125
View File
@@ -0,0 +1,125 @@
// screens/auth/auth_shared.dart — 登录/注册两屏共用的原型 1:1 骨架。
// 对应 login.html / register.html 的公共部分：
// body：--page 底、居中、pad 24；
// 主题切换：主界面同款小衣服 ThemePickerPill（onSurface 浅色变体），
// 放表单面板右上角（2026-07-03 用户拍板，替代原型的 A/B/C 圆钮）；
// .auth：两栏卡片（surface / 1px border / r-xl / sh-3，overflow hidden）；
// .brand：左侧品牌渐变面板 linear-gradient(150deg, side-bg, side-active-bg)。
// 窄屏（≤ context.isMobile）折叠为单列，隐藏 pts/steps（原型 @media 760px 同构，
// 断点遵项目规则统一走 isMobile）。
import 'package:flutter/material.dart';
import '../../core/responsive/responsive.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';
import '../../widgets/theme_picker_pill.dart';
/// 整页骨架：page 底 + 居中滚动 + 两栏卡片 + 右上角主题切换器。
/// [brand]/[form] 为两栏内容；宽屏按 [brandWidth]/[formWidth] 定宽
/// （其一为 null 表示该栏弹性 1fr），窄屏纵向堆叠。
class AuthPageScaffold extends StatelessWidget {
final Widget brand;
final Widget form;
final double maxWidth;
final double narrowMaxWidth;
final double? brandWidth; // null = 弹性栏
final double? formWidth; // null = 弹性栏
const AuthPageScaffold({
super.key,
required this.brand,
required this.form,
required this.maxWidth,
required this.narrowMaxWidth,
this.brandWidth,
this.formWidth,
});
@override
Widget build(BuildContext context) {
final t = context.tokens;
final narrow = context.isMobile;
// 表单面板右上角叠主题小衣服（宽/窄屏都落在白底表单区上）
final formWithPill = Stack(
children: [
form,
const Positioned(
top: 14, right: 16, child: ThemePickerPill(onSurface: true)),
],
);
final card = Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: t.surface,
border: Border.all(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rXl),
boxShadow: [
BoxShadow(
color: t.shadow, offset: const Offset(0, 12), blurRadius: 34),
],
),
child: narrow
? Column(
mainAxisSize: MainAxisSize.min, children: [brand, formWithPill])
: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (brandWidth != null)
SizedBox(width: brandWidth, child: brand)
else
Expanded(child: brand),
if (formWidth != null)
SizedBox(width: formWidth, child: formWithPill)
else
Expanded(child: formWithPill),
],
),
),
);
return Scaffold(
backgroundColor: t.page,
body: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height - 48),
child: Center(
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: narrow ? narrowMaxWidth : maxWidth),
child: card,
),
),
),
),
);
}
}
/// 品牌渐变面板容器（.brand）：linear-gradient(150deg, side-bg, side-active-bg)。
class AuthBrandPanel extends StatelessWidget {
final EdgeInsets padding;
final double? minHeight;
final Widget child;
const AuthBrandPanel(
{super.key, required this.padding, this.minHeight, required this.child});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return Container(
constraints:
minHeight != null ? BoxConstraints(minHeight: minHeight!) : null,
padding: padding,
decoration: BoxDecoration(
// 150deg ≈ 从左上偏上往右下（CSS 角度顺时针自 12 点起）
gradient: LinearGradient(
begin: const Alignment(-0.5, -1),
end: const Alignment(0.5, 1),
colors: [t.sideBg, t.sideActiveBg],
),
),
child: child,
);
}
}
client/lib/screens/auth/login_screen.dart
+457 -459
View File
File diff suppressed because it is too large Load Diff
client/lib/screens/auth/register_screen.dart
+313 -208
View File
@@ -1,14 +1,29 @@
// screens/auth/register_screen.dart — 自助注册新门店，照原型 register.html 1:1 重建。
// 结构：--page 底居中 .auth 两栏卡片（左 .brand 380px：logo+开通门店+tag+三步时间线；
// 右 .form：h1/lead + grid2 门店字段 + 分隔线 + grid2 管理员字段 + 协议 + 主按钮 + foot）
// + 右上角 A/B/C 主题切换器。窄屏折叠单列、隐藏步骤时间线。
// 与原型的差异（记 design/CONTRACT.md）：
// · 无「门店编号」「授权兑换券」字段——后端 RegisterInput 暂不支持（编号自动分配、
// 兑换券注册后在 系统设置·授权兑换券 激活，与 step3 文案一致）；
// · 门店地址为必填（后端 binding:required；原型为选填）；密码下限 6 位（后端 min=6）。
// 校验为原型式：提交时逐项 toast。对应后端 POST /api/v1/register。
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../core/responsive/responsive.dart';
import '../../core/theme/context_tokens.dart';
import '../../core/theme/app_chrome.g.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/app_fonts.dart';
import '../../core/theme/context_tokens.dart';
import '../../repositories/auth_repository.dart';
import '../../widgets/brand_mark.dart';
import '../../widgets/ds/ds_atoms.dart';
import '../../widgets/ds/ds_toast.dart';
import 'auth_shared.dart';
/// 应用内自助注册新门店（公开页）。提交后创建门店 + 管理员账号，
/// 返回门店编号引导去登录。对应后端 POST /api/v1/register。
class RegisterScreen extends ConsumerStatefulWidget {
const RegisterScreen({super.key});
@@ -17,7 +32,6 @@ class RegisterScreen extends ConsumerStatefulWidget {
}
class _RegisterScreenState extends ConsumerState<RegisterScreen> {
final _formKey = GlobalKey<FormState>();
final _shopName = TextEditingController();
final _phone = TextEditingController();
final _address = TextEditingController();
@@ -25,14 +39,20 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
final _username = TextEditingController();
final _password = TextEditingController();
final _confirm = TextEditingController();
bool _agree = false;
bool _agree = true;
bool _obscure = true;
bool _submitting = false;
@override
void dispose() {
for (final c in [
_shopName, _phone, _address, _manager, _username, _password, _confirm
_shopName,
_phone,
_address,
_manager,
_username,
_password,
_confirm
]) {
c.dispose();
}
@@ -40,11 +60,33 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
}
Future<void> _submit() async {
if (!(_formKey.currentState?.validate() ?? false)) return;
// 原型 submitReg 式校验：逐项 toast（无内联错误文案）
if (_shopName.text.trim().isEmpty) {
showDsToast(context, '请填写门店名称');
return;
}
if (_phone.text.trim().isEmpty) {
showDsToast(context, '请填写联系电话');
return;
}
if (_address.text.trim().isEmpty) {
showDsToast(context, '请填写门店地址');
return;
}
if (_manager.text.trim().isEmpty || _username.text.trim().isEmpty) {
showDsToast(context, '请填写管理员姓名与登录账号');
return;
}
if (_password.text.length < 6) {
showDsToast(context, '密码至少 6 位');
return;
}
if (_password.text != _confirm.text) {
showDsToast(context, '两次密码不一致');
return;
}
if (!_agree) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('请先阅读并同意服务条款与隐私政策')),
);
showDsToast(context, '请先同意服务条款与隐私政策');
return;
}
setState(() => _submitting = true);
@@ -70,33 +112,29 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
Text('门店「${r.shopName}」已创建。'),
const SizedBox(height: 12),
Text('门店编号（登录时需用）：',
style: TextStyle(color: context.tokens.muted, fontSize: 13)),
style: TextStyle(
color: context.tokens.muted, fontSize: AppDims.fsBody)),
const SizedBox(height: 4),
SelectableText(r.shopCode,
style: const TextStyle(
fontFamily: 'monospace',
fontFamily: AppFonts.mono,
fontFamilyFallback: AppFonts.monoFallback,
fontSize: 18,
fontWeight: FontWeight.w700)),
],
),
actions: [
ElevatedButton(
onPressed: () {
Navigator.of(ctx).pop();
context.go('/login');
},
child: const Text('去登录'),
),
DsButton('去登录', variant: DsBtnVariant.primary, onPressed: () {
Navigator.of(ctx).pop();
context.go('/login');
}),
],
),
);
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(e.toString().replaceFirst('AuthException: ', '')),
backgroundColor: context.tokens.danger),
);
showDsToast(context, e.toString().replaceFirst('AuthException: ', ''),
bg: context.tokens.danger);
}
} finally {
if (mounted) setState(() => _submitting = false);
@@ -105,207 +143,274 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
@override
Widget build(BuildContext context) {
final t = context.tokens;
final wide = !context.isMobile;
return Scaffold(
backgroundColor: t.page,
body: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 920, maxHeight: 720),
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppDims.rXl)),
child: Row(
children: [
if (wide) SizedBox(width: 320, child: _brandPanel(t)),
Expanded(child: _formPanel(t)),
],
),
),
),
),
return AuthPageScaffold(
maxWidth: 940,
narrowMaxWidth: 480,
brandWidth: 380, // 原型 grid：minmax(0,380px) minmax(0,1fr)
brand: _brand(context),
form: _form(context),
);
}
Widget _brandPanel(t) {
Widget step(int n, String title, String sub) => Padding(
padding: const EdgeInsets.only(bottom: 18),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 24,
height: 24,
alignment: Alignment.center,
decoration: BoxDecoration(
color: t.onPrimary.withValues(alpha: 0.18),
shape: BoxShape.circle),
child: Text('$n',
style: TextStyle(
color: t.onPrimary,
fontSize: 12,
fontWeight: FontWeight.w700)),
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: TextStyle(
color: t.onPrimary,
fontSize: AppDims.fsBody,
fontWeight: FontWeight.w600)),
Text(sub,
style: TextStyle(
color: t.onPrimary.withValues(alpha: 0.72),
fontSize: AppDims.fsSm)),
],
),
),
],
),
);
return Container(
color: t.primary,
padding: const EdgeInsets.all(28),
// ── 左栏 .brand：logo + 开通门店 + tag + 三步时间线 ───────────────────────
Widget _brand(BuildContext context) {
final t = context.tokens;
final narrow = context.isMobile;
return AuthBrandPanel(
padding: narrow
? const EdgeInsets.symmetric(horizontal: 32, vertical: 34)
: const EdgeInsets.symmetric(horizontal: 38, vertical: 46),
minHeight: narrow ? null : 560,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.local_bar, color: t.onPrimary, size: 32),
const SizedBox(height: 16),
const BrandMark(size: 60),
const SizedBox(height: 22),
Text('开通门店',
style: TextStyle(
color: t.onPrimary,
fontSize: AppDims.fsH1,
fontWeight: FontWeight.w700)),
fontSize: AppDims.fsDisplay,
fontWeight: FontWeight.w800,
letterSpacing: 1,
color: t.sideActiveFg)),
const SizedBox(height: 8),
Text('几分钟创建你的酒水进销存门店，立即开始入库出库',
style: TextStyle(
color: t.onPrimary.withValues(alpha: 0.78),
fontSize: AppDims.fsSm,
height: 1.6)),
const SizedBox(height: 28),
step(1, '填写门店信息', '店名、编号与联系人'),
step(2, '创建管理员账号', '用于登录与管理成员'),
step(3, '开始使用', '入库录单即自动建档'),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 260),
child: Text('几分钟创建你的酒水进销存门店，立即开始入库出库',
style: TextStyle(
fontSize: AppDims.fsBody, color: t.sideFg, height: 1.7)),
),
if (!narrow) ...[
const SizedBox(height: 36),
const _Step(
n: 1,
done: true,
title: '填写门店信息',
sub: '店名、编号与联系人',
last: false),
const _Step(
n: 2,
done: false,
title: '创建管理员账号',
sub: '用于登录与管理成员',
last: false),
const _Step(
n: 3,
done: false,
title: '激活授权',
sub: '输入兑换券，或先试用',
last: true),
],
],
),
);
}
Widget _formPanel(t) {
return SingleChildScrollView(
padding: const EdgeInsets.all(28),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('注册新门店',
style: TextStyle(
fontSize: AppDims.fsH2, fontWeight: FontWeight.w700)),
const Spacer(),
TextButton(
onPressed: () => context.go('/login'),
child: const Text('已有门店？直接登录 →'),
),
],
),
const SizedBox(height: 16),
_field(_shopName, '门店名称 *', '例如 鼎昌酒行', required: true),
_row2(
_field(_phone, '联系电话 *', '11 位手机号',
required: true, keyboard: TextInputType.phone),
_field(_address, '门店地址 *', '省 / 市 / 区 详细地址', required: true),
),
_field(_manager, '管理员姓名 *', '例如 王经理', required: true),
_row2(
_field(_username, '登录账号 *', '字母 / 数字', required: true),
const SizedBox.shrink(),
),
_row2(
_field(_password, '登录密码 *', '至少 6 位',
required: true, obscure: _obscure, minLen: 6),
_field(_confirm, '确认密码 *', '再次输入',
required: true,
obscure: _obscure,
validator: (v) =>
v != _password.text ? '两次密码不一致' : null),
),
CheckboxListTile(
value: _agree,
onChanged: (v) => setState(() => _agree = v ?? false),
controlAffinity: ListTileControlAffinity.leading,
contentPadding: EdgeInsets.zero,
dense: true,
title: Text('我已阅读并同意 服务条款 与 隐私政策',
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
),
const SizedBox(height: 12),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: _submitting ? null : _submit,
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 14)),
child: _submitting
? const SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
strokeWidth: 2, color: Colors.white))
: const Text('创建门店并进入'),
),
),
],
),
),
);
}
Widget _row2(Widget a, Widget b) => Row(
// ── 右栏 .form ───────────────────────────────────────────────────────────
Widget _form(BuildContext context) {
final t = context.tokens;
final narrow = context.isMobile;
Widget input(TextEditingController c, String hint,
{bool obscure = false, TextInputType? keyboard}) =>
DsInput(
controller: c,
hintText: hint,
obscureText: obscure,
keyboardType: keyboard);
// grid2：宽屏两列 gap14，窄屏单列
Widget row2(Widget a, Widget b) => narrow
? Column(children: [a, const SizedBox(height: 14), b])
: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Expanded(child: a),
const SizedBox(width: 14),
Expanded(child: b),
]);
return Padding(
padding: narrow
? const EdgeInsets.symmetric(horizontal: 30, vertical: 32)
: const EdgeInsets.symmetric(horizontal: 42, vertical: 44),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: a),
const SizedBox(width: 12),
Expanded(child: b),
],
);
Text('注册新门店',
style: TextStyle(
fontSize: AppDims.fsH1,
fontWeight: FontWeight.w700,
color: t.heading)),
const SizedBox(height: 6),
Text.rich(
TextSpan(
text: '已有门店账号？',
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted),
children: [
TextSpan(
text: '直接登录 →',
style: TextStyle(
color: t.primary, fontWeight: FontWeight.w600),
recognizer: TapGestureRecognizer()
..onTap = () => context.go('/login'),
),
]),
),
const SizedBox(height: 24),
Widget _field(
TextEditingController ctrl,
String label,
String hint, {
bool required = false,
bool obscure = false,
int? minLen,
TextInputType? keyboard,
String? Function(String?)? validator,
}) {
return Padding(
padding: const EdgeInsets.only(bottom: 14),
child: TextFormField(
controller: ctrl,
obscureText: obscure,
keyboardType: keyboard,
decoration: InputDecoration(
labelText: label,
hintText: hint,
isDense: true,
border: const OutlineInputBorder(),
),
validator: validator ??
(v) {
if (required && (v == null || v.trim().isEmpty)) return '必填';
if (minLen != null && (v?.length ?? 0) < minLen) {
return '至少 $minLen 位';
}
return null;
},
// 门店信息
DsField('门店名称', required: true, input: input(_shopName, '例如 鼎晟酒行')),
const SizedBox(height: 14),
row2(
DsField('联系电话',
required: true,
input: input(_phone, '11 位手机号', keyboard: TextInputType.phone)),
DsField('门店地址',
required: true, input: input(_address, '省 / 市 / 区 详细地址')),
),
const SizedBox(height: 6),
Container(height: 1, color: t.borderSubtle),
const SizedBox(height: 16),
// 管理员账号
row2(
DsField('管理员姓名', required: true, input: input(_manager, '例如 王经理')),
DsField('登录账号', required: true, input: input(_username, '字母 / 数字')),
),
const SizedBox(height: 14),
row2(
DsField('登录密码',
required: true,
input: DsInput(
controller: _password,
hintText: '至少 6 位',
obscureText: _obscure,
suffix: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () => setState(() => _obscure = !_obscure),
child: Icon(
_obscure ? LucideIcons.eyeOff : LucideIcons.eye,
size: 16,
color: t.muted),
),
),
)),
DsField('确认密码',
required: true,
input: input(_confirm, '再次输入', obscure: _obscure)),
),
// .agree：协议勾选（margin 6 0 20）
const SizedBox(height: 16),
DsCheck(
value: _agree,
alignTop: true,
onChanged: (v) => setState(() => _agree = v),
label: Text.rich(
TextSpan(
text: '我已阅读并同意 ',
style: TextStyle(fontSize: AppDims.fsSm, color: t.text),
children: [
TextSpan(
text: '服务条款',
style: TextStyle(color: t.primary),
recognizer: TapGestureRecognizer()
..onTap = () => showDsToast(context, '服务条款请见官网底部链接')),
const TextSpan(text: ' 与 '),
TextSpan(
text: '隐私政策',
style: TextStyle(color: t.primary),
recognizer: TapGestureRecognizer()
..onTap = () => showDsToast(context, '隐私政策请见官网底部链接')),
]),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: DsButton(_submitting ? '创建中…' : '创建门店并进入',
variant: DsBtnVariant.primary,
large: true,
onPressed: _submitting ? null : _submit),
),
const SizedBox(height: 20),
Center(
child: Text('创建即代表你将成为该门店的管理员',
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
),
],
),
);
}
}
/// 原型 .step：29px 序号圆（done=side-active-fg 底反色）+ 标题/副文案 +
/// 节点间 2px hero-glass 连接线（padding-bottom 22）。
class _Step extends StatelessWidget {
final int n;
final bool done;
final String title;
final String sub;
final bool last;
const _Step(
{required this.n,
required this.done,
required this.title,
required this.sub,
required this.last});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
width: 29,
child: Column(children: [
Container(
width: 29,
height: 29,
alignment: Alignment.center,
decoration: BoxDecoration(
color: done ? t.sideActiveFg : AppChrome.heroGlass,
shape: BoxShape.circle,
),
child: Text('$n',
style: TextStyle(
fontSize: AppDims.fsBody,
fontWeight: FontWeight.w700,
color: done ? t.sideActiveBg : t.sideActiveFg)),
),
if (!last)
Expanded(
child: Center(
child: Container(width: 2, color: AppChrome.heroGlass)),
),
]),
),
const SizedBox(width: 13),
Expanded(
child: Padding(
padding: EdgeInsets.only(bottom: last ? 0 : 22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: TextStyle(
fontSize: AppDims.fsBody,
fontWeight: FontWeight.w600,
color: t.sideActiveFg,
height: 1.45)),
Text(sub,
style: TextStyle(
fontSize: AppDims.fsSm,
color: t.sideFg,
height: 1.45)),
],
),
),
),
],
),
);
}