feat(client): 初版 Flutter UI 框架，仿照参考截图实现
- 蓝色顶栏（#1565C0）+ 深蓝侧边栏（#0D47A1），含折叠/展开 - 底部状态栏：门店编号、登录用户、登录时间、实时时钟、版本号 - 登录页：居中卡片，支持密码显示/隐藏 - 入库单列表：筛选/搜索/日期选择/分页，三个 Tab（入库单/查询/审核） - 新建入库单：基本信息 + 商品明细动态增删，实时计算合计金额 - 出库单列表：同入库单风格 - 库存查询：4 张统计卡片 + 颜色高亮缺货/预警行，库存预警 Tab - 往来单位、财务、商品、系统设置（用户/仓库/编号规则/系统参数） - 使用 Riverpod 状态管理 + go_router 路由 + Dio HTTP Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -0,0 +1,139 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../core/theme/app_theme.dart';
|
||||
|
||||
class DataTableCard extends StatelessWidget {
|
||||
final List<DataColumn> columns;
|
||||
final List<DataRow> rows;
|
||||
final Widget? toolbar;
|
||||
final int? totalCount;
|
||||
final int page;
|
||||
final int pageSize;
|
||||
final ValueChanged<int>? onPageChanged;
|
||||
|
||||
const DataTableCard({
|
||||
super.key,
|
||||
required this.columns,
|
||||
required this.rows,
|
||||
this.toolbar,
|
||||
this.totalCount,
|
||||
this.page = 1,
|
||||
this.pageSize = 20,
|
||||
this.onPageChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
if (toolbar != null)
|
||||
Container(
|
||||
height: 52,
|
||||
color: AppTheme.surface,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: toolbar!,
|
||||
),
|
||||
if (toolbar != null) const Divider(height: 1),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
child: SizedBox(
|
||||
width: double.infinity,
|
||||
child: DataTable(
|
||||
headingRowColor: WidgetStateProperty.all(
|
||||
const Color(0xFFF0F4FF)),
|
||||
headingTextStyle: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppTheme.primaryDark,
|
||||
),
|
||||
dataTextStyle: const TextStyle(
|
||||
fontSize: 13, color: AppTheme.textPrimary),
|
||||
columnSpacing: 24,
|
||||
horizontalMargin: 16,
|
||||
dataRowMinHeight: 40,
|
||||
dataRowMaxHeight: 48,
|
||||
dividerThickness: 0.5,
|
||||
columns: columns,
|
||||
rows: rows,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Pagination
|
||||
if (totalCount != null)
|
||||
Container(
|
||||
height: 48,
|
||||
color: AppTheme.surface,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
'共 $totalCount 条记录',
|
||||
style: const TextStyle(
|
||||
fontSize: 13, color: AppTheme.textSecondary),
|
||||
),
|
||||
const Spacer(),
|
||||
_PaginationBar(
|
||||
page: page,
|
||||
total: totalCount!,
|
||||
pageSize: pageSize,
|
||||
onPageChanged: onPageChanged,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PaginationBar extends StatelessWidget {
|
||||
final int page;
|
||||
final int total;
|
||||
final int pageSize;
|
||||
final ValueChanged<int>? onPageChanged;
|
||||
|
||||
const _PaginationBar({
|
||||
required this.page,
|
||||
required this.total,
|
||||
required this.pageSize,
|
||||
this.onPageChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final totalPages = (total / pageSize).ceil().clamp(1, 9999);
|
||||
return Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.first_page, size: 18),
|
||||
onPressed: page > 1 ? () => onPageChanged?.call(1) : null,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.chevron_left, size: 18),
|
||||
onPressed: page > 1 ? () => onPageChanged?.call(page - 1) : null,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
Text('$page / $totalPages',
|
||||
style: const TextStyle(fontSize: 13)),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.chevron_right, size: 18),
|
||||
onPressed:
|
||||
page < totalPages ? () => onPageChanged?.call(page + 1) : null,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.last_page, size: 18),
|
||||
onPressed: page < totalPages
|
||||
? () => onPageChanged?.call(totalPages)
|
||||
: null,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../core/theme/app_theme.dart';
|
||||
|
||||
/// Generic dialog wrapper for forms
|
||||
class FormDialog extends StatelessWidget {
|
||||
final String title;
|
||||
final Widget content;
|
||||
final String confirmLabel;
|
||||
final VoidCallback? onConfirm;
|
||||
final bool loading;
|
||||
final double width;
|
||||
|
||||
const FormDialog({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.content,
|
||||
this.confirmLabel = '保存',
|
||||
this.onConfirm,
|
||||
this.loading = false,
|
||||
this.width = 560,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Dialog(
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
|
||||
child: SizedBox(
|
||||
width: width,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Title bar
|
||||
Container(
|
||||
height: 48,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppTheme.primary,
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(4),
|
||||
topRight: Radius.circular(4),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w500),
|
||||
),
|
||||
const Spacer(),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close, color: Colors.white, size: 18),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(minWidth: 28, minHeight: 28),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Content
|
||||
Flexible(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: content,
|
||||
),
|
||||
),
|
||||
// Action bar
|
||||
const Divider(height: 1),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
OutlinedButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('取消'),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
ElevatedButton(
|
||||
onPressed: loading ? null : onConfirm,
|
||||
child: loading
|
||||
? const SizedBox(
|
||||
width: 16,
|
||||
height: 16,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2, color: Colors.white))
|
||||
: Text(confirmLabel),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Show a form dialog and return the result
|
||||
Future<T?> showFormDialog<T>({
|
||||
required BuildContext context,
|
||||
required String title,
|
||||
required Widget content,
|
||||
String confirmLabel = '保存',
|
||||
VoidCallback? onConfirm,
|
||||
double width = 560,
|
||||
}) {
|
||||
return showDialog<T>(
|
||||
context: context,
|
||||
builder: (_) => FormDialog(
|
||||
title: title,
|
||||
content: content,
|
||||
confirmLabel: confirmLabel,
|
||||
onConfirm: onConfirm,
|
||||
width: width,
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../core/theme/app_theme.dart';
|
||||
|
||||
class PageScaffold extends StatelessWidget {
|
||||
final String title;
|
||||
final List<Widget> tabs;
|
||||
final List<Widget> tabViews;
|
||||
final int initialTab;
|
||||
|
||||
const PageScaffold({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.tabs,
|
||||
required this.tabViews,
|
||||
this.initialTab = 0,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DefaultTabController(
|
||||
length: tabs.length,
|
||||
initialIndex: initialTab,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
color: AppTheme.surface,
|
||||
child: TabBar(
|
||||
isScrollable: true,
|
||||
tabAlignment: TabAlignment.start,
|
||||
labelColor: AppTheme.primary,
|
||||
unselectedLabelColor: AppTheme.textSecondary,
|
||||
indicatorColor: AppTheme.primary,
|
||||
indicatorWeight: 2,
|
||||
labelStyle:
|
||||
const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
|
||||
tabs: tabs,
|
||||
),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
Expanded(
|
||||
child: TabBarView(children: tabViews),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../core/theme/app_theme.dart';
|
||||
|
||||
enum OrderStatus { draft, pending, approved, rejected }
|
||||
|
||||
extension OrderStatusLabel on OrderStatus {
|
||||
String get label {
|
||||
switch (this) {
|
||||
case OrderStatus.draft:
|
||||
return '草稿';
|
||||
case OrderStatus.pending:
|
||||
return '待审核';
|
||||
case OrderStatus.approved:
|
||||
return '已审核';
|
||||
case OrderStatus.rejected:
|
||||
return '已拒绝';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class StatusBadge extends StatelessWidget {
|
||||
final OrderStatus status;
|
||||
const StatusBadge(this.status, {super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Color bg;
|
||||
final Color fg;
|
||||
switch (status) {
|
||||
case OrderStatus.draft:
|
||||
bg = const Color(0xFFF5F5F5);
|
||||
fg = AppTheme.textSecondary;
|
||||
break;
|
||||
case OrderStatus.pending:
|
||||
bg = const Color(0xFFFFF3E0);
|
||||
fg = AppTheme.accent;
|
||||
break;
|
||||
case OrderStatus.approved:
|
||||
bg = const Color(0xFFE8F5E9);
|
||||
fg = AppTheme.success;
|
||||
break;
|
||||
case OrderStatus.rejected:
|
||||
bg = const Color(0xFFFFEBEE);
|
||||
fg = AppTheme.danger;
|
||||
break;
|
||||
}
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: bg,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
status.label,
|
||||
style: TextStyle(
|
||||
color: fg, fontSize: 12, fontWeight: FontWeight.w500),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user