Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 39a2f14e0b | |||
| 2c25bbfd85 | |||
| b20be72155 | |||
| fb8337b156 | |||
| 05203a9b5b | |||
| d1b7e8e2e9 | |||
| 21a4a8cab7 | |||
| 8912b8ef7f | |||
| 33987faa9b | |||
| 7328d85912 | |||
| d7782cc048 | |||
| dd447b8b32 | |||
| e0d9b8ab09 | |||
| c7f36b2d72 | |||
| e012f6e02b |
@@ -40,7 +40,7 @@ export PATH="/opt/homebrew/bin:$PATH"
|
||||
```
|
||||
- **client**:
|
||||
```bash
|
||||
cd client && flutter analyze --no-fatal-infos --no-fatal-warnings
|
||||
cd client && flutter analyze --no-fatal-infos --no-fatal-warnings && flutter test
|
||||
```
|
||||
- **site**:
|
||||
```bash
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
name: Design Source Checks
|
||||
|
||||
# 设计真相源检查(治理规则见 CLAUDE.md「设计真相源分层」):
|
||||
# PR 与合并 main 时自动跑四道闸,全部纯静态检查(node + dart format),
|
||||
# 不跑 golden/fidelity(重型像素闸维持「定期体检」定位,本地手动跑)。
|
||||
# PR 与合并 main 时自动跑:四道静态闸(node + dart format)+ flutter test
|
||||
# (单测 + golden ×3 主题回归自比,2026-07-07 纳入——此前 DoD 写了但无闸)。
|
||||
# fidelity 重型像素闸维持「定期体检」定位,本地手动跑。
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
@@ -23,7 +24,7 @@ jobs:
|
||||
run: sh scripts/ci/provision-mac.sh
|
||||
|
||||
- name: 原型设计系统闸(check-ds 12 道)
|
||||
run: node .superpowers/prototype/tools/check-ds.mjs
|
||||
run: node design/prototype/tools/check-ds.mjs
|
||||
|
||||
- name: L1 真相源同源闸(tokens 快照 / icons / 官网 token 值 / web hex)
|
||||
run: node tools/check-l1-sync.mjs
|
||||
@@ -37,3 +38,8 @@ jobs:
|
||||
node tool/gen_tokens.mjs
|
||||
dart format lib/core/theme/app_tokens.g.dart lib/core/theme/app_dims.g.dart lib/core/theme/app_chrome.g.dart
|
||||
git diff --exit-code -- lib/core/theme/app_tokens.g.dart lib/core/theme/app_dims.g.dart lib/core/theme/app_chrome.g.dart
|
||||
|
||||
- name: Flutter 测试(单测 + golden ×3 主题回归自比)
|
||||
run: |
|
||||
cd client
|
||||
flutter test
|
||||
|
||||
@@ -67,10 +67,8 @@ backend/gencode
|
||||
# iOS 证书私钥(绝不入库)
|
||||
.ios-certs/
|
||||
|
||||
# superpowers 工作目录:brainstorm/sdd 是草稿不入库;
|
||||
# prototype 是设计像素真源 + 设计系统守门闸(check-ds.mjs),入库供 CI 跑。
|
||||
.superpowers/*
|
||||
!.superpowers/prototype/
|
||||
# superpowers 工作目录(草稿不入库)。原型已迁 design/prototype/(2026-07-07)。
|
||||
.superpowers/
|
||||
|
||||
# design-distill 保真目检对比图(可重生,见 tools/ds-compare.mjs)
|
||||
design/_compare/
|
||||
|
||||
@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [1.1.8] - 2026-07-10
|
||||
|
||||
### 新功能
|
||||
- 库存列表(手机端)商品名称后新增生产日期小字,一眼区分同名不同批次的商品。
|
||||
- 商品详情抽屉新增「生产日期」信息行。
|
||||
|
||||
## [1.1.7] - 2026-07-07
|
||||
|
||||
### 新功能
|
||||
- 库存列表列头排序:点击 库存 / 成本价 / 总价 / 生产日期 / 入库时间 列头
|
||||
即可全局排序(升序 ↑ / 降序 ↓ / 再点恢复默认)。
|
||||
|
||||
### 改进
|
||||
- 库存筛选全部移到工具栏(与出库管理同一形式):规格 / 系列 / 仓库 / 状态
|
||||
改为工具栏下拉标签,可单独清除;列头不再放筛选漏斗。
|
||||
|
||||
## [1.1.6] - 2026-07-07
|
||||
|
||||
### 新功能
|
||||
|
||||
@@ -5,6 +5,12 @@
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [1.1.11] - 2026-07-07
|
||||
|
||||
### 新功能
|
||||
- 库存列表支持按 库存 / 成本价 / 总价 / 生产日期 / 入库时间 排序,
|
||||
全局生效(跨分页),成本类按显示口径排序结果一致。
|
||||
|
||||
## [1.1.10] - 2026-07-07
|
||||
|
||||
### 新功能
|
||||
|
||||
@@ -257,7 +257,7 @@ cd client && flutter test
|
||||
|
||||
### 设计真相源分层(原型漂移治理,2026-07-04 拍板)
|
||||
|
||||
原型(`.superpowers/prototype/`)与真实页面**不追求全量永久同步**,按层分治:
|
||||
原型(`design/prototype/`)与真实页面**不追求全量永久同步**,按层分治:
|
||||
|
||||
- **L1 设计系统层**(`tokens.css` / `atoms.css` / `mobile-atoms.css` / `icons.js` + `index.html` 登记):原型是**单一真源**。新增颜色/组件/图标必须**先登记原型再同步**代码与官网(如 `web/_includes/icons.njk`)。闸:pre-commit `check-ds.mjs` 12 道(本地钩子,新机器先跑 `sh scripts/hooks/install.sh`)+ 代码侧 `client/tool/check_ds_code.mjs`。
|
||||
- **L2 屏级三态**(台账 = `design/CONTRACT.md` 块 4「真相源」列):
|
||||
@@ -268,16 +268,16 @@ cd client && flutter test
|
||||
- **漂移体检**:不逐提交强制同步;大版本/整屏改版前跑 `node tools/fidelity.mjs`,按报告逐屏决定「重新对齐原型」或「降级快照」,结果回填 CONTRACT。
|
||||
- **CI 闸**(`.gitea/workflows/checks.yml`,PR + main push 自动跑):① `check-ds.mjs` 原型 12 道;② `tools/check-l1-sync.mjs` L1 同源四道(tokens 快照逐字节 / icons 两端同集同内容 / 官网 token 值对齐原型主题 A / web 硬编码 hex,白名单 #fff、#1677ff,`ds-allow` 可豁免);③ `client/tool/check_ds_code.mjs` Flutter 颜色单源;④ codegen 新鲜度(regen→`dart format`→与入库产物零 diff)。本地可直接跑同名命令。
|
||||
|
||||
### 表格与列头筛选(ds 真相源)
|
||||
- 列表屏统一 `DsTable`(`widgets/ds/ds_table.dart`:toolbar+表格+pager 连成一卡),列定义 `DsColumn`,可筛选列走其列头漏斗(`filtered` 态高亮),可隐藏列走列设置菜单
|
||||
- 不要在 toolbar 放独立筛选按钮,筛选入口内嵌列头或工具栏 `DsChip`
|
||||
### 表格与筛选/排序(ds 真相源)
|
||||
- 列表屏统一 `DsTable`(`widgets/ds/ds_table.dart`:toolbar+表格+pager 连成一卡),列定义 `DsColumn`,可隐藏列走列设置菜单
|
||||
- **筛选统一放工具栏 `DsChip`**(2026-07-07 用户口径,形式参照出库管理:单选/多选 chip + 选中值/N 项摘要 + × 单清);列头**只放排序** `DsSortHeader`(点击循环 无→升→降→无,服务端全局排序)。列头漏斗 `DsFilterHeader` 已退役删除
|
||||
- 旧 `FilterableColumnHeader`/`multi_select_dropdown.dart` 仅存量引用,勿在新屏使用
|
||||
|
||||
### 响应式 / 移动端适配
|
||||
- 断点判定统一用 `context.isMobile`(`client/lib/core/responsive/responsive.dart`,宽度 < 600 为窄屏/手机),**禁止**在各处散落 `MediaQuery.width < 600` 这类魔法数
|
||||
- **列表屏**:统一用 `DsTable`(`widgets/ds/ds_table.dart`,真相源表格:toolbar+列+pager);窄屏卡片流复用 `MobileListCard` / `MobileCardField`(`widgets/mobile_list_card.dart`)。旧 `DataTableCard` 已删除(2026-07-03),勿再引用
|
||||
- **列表屏**:统一用 `DsTable`(`widgets/ds/ds_table.dart`,真相源表格:toolbar+列+pager);窄屏卡片流用 `MCard`(`widgets/ds/m_card.dart`,镜像原型 mobile-atoms)。旧 `MobileListCard` 为 legacy 仅存量引用(迁移在 todo),旧 `DataTableCard` 已删除(2026-07-03),勿再引用
|
||||
- **弹窗固定宽度**:一律用 `context.dialogWidth(X)`(≤ 屏宽 92%),**禁止**裸写 `width: <固定值>` 导致窄屏溢出
|
||||
- **导航**:窄屏(手机)用 Drawer 抽屉(`app_shell.dart`),宽屏保持侧边栏;新增页面无需单独处理,挂在 shell 下即可
|
||||
- **导航**:窄屏(手机)= 底部 5 tab(库存/入库/出库/财务/我的)+「我的」hub 聚合二级屏(`app_shell.dart` + `m_tab_bar.dart`,2026-07-04 起,Drawer 已退役);宽屏保持侧边栏;一切弹层窄屏统一走 `showMSheet` 底部 sheet
|
||||
- 平台判断仍遵守上面「前端平台判断」规则(`kIsWeb` 先于 `dart:io`)
|
||||
|
||||
### 权限中间件(已全局挂载)
|
||||
|
||||
@@ -158,6 +158,23 @@ func (h *InventoryHandler) List(c *gin.Context) {
|
||||
return
|
||||
}
|
||||
|
||||
// 排序(2026-07-07 列头排序):白名单列 → SQL 表达式,防注入;带 id 兜底保证分页稳定。
|
||||
// cost/price/prod_date 用与 SELECT 相同的 COALESCE 口径,排序结果与显示一致。
|
||||
orderExpr := "inv.id DESC"
|
||||
if sortCol, ok := map[string]string{
|
||||
"qty": "inv.quantity",
|
||||
"cost": "COALESCE(sii.cost_price, inv.unit_price, p.purchase_price)",
|
||||
"price": "inv.quantity * COALESCE(sii.cost_price, inv.unit_price, p.purchase_price)",
|
||||
"prod_date": "COALESCE(DATE(sii.production_date), DATE(inv.production_date))",
|
||||
"in_time": "inv.created_at",
|
||||
}[c.Query("sort_by")]; ok {
|
||||
dir := "ASC"
|
||||
if c.Query("sort_dir") == "desc" {
|
||||
dir = "DESC"
|
||||
}
|
||||
orderExpr = sortCol + " " + dir + ", inv.id DESC"
|
||||
}
|
||||
|
||||
// Data query
|
||||
dataSQL := `
|
||||
SELECT
|
||||
@@ -183,7 +200,7 @@ func (h *InventoryHandler) List(c *gin.Context) {
|
||||
LEFT JOIN products p ON p.id = inv.product_id AND p.deleted_at IS NULL
|
||||
LEFT JOIN warehouses w ON w.id = inv.warehouse_id
|
||||
WHERE ` + baseWhere + `
|
||||
ORDER BY inv.id DESC
|
||||
ORDER BY ` + orderExpr + `
|
||||
LIMIT ? OFFSET ?`
|
||||
|
||||
dataArgs := append(args, pageSize, (page-1)*pageSize)
|
||||
|
||||
@@ -3,6 +3,7 @@ package handler
|
||||
import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
"net/http/httptest"
|
||||
"testing"
|
||||
"time"
|
||||
|
||||
@@ -525,3 +526,44 @@ func TestInventoryHandler_StatusTenantIsolation(t *testing.T) {
|
||||
require.NoError(t, db.Where("id = ?", invB.ID).First(&got).Error)
|
||||
assert.Equal(t, "stock", got.Status)
|
||||
}
|
||||
|
||||
// 列头排序(2026-07-07):白名单列全局排序,非法列忽略回默认
|
||||
func TestInventoryHandler_ListSort(t *testing.T) {
|
||||
db := testutil.SetupTestDB()
|
||||
shop := testutil.CreateTestShop(db, "INV_SORT")
|
||||
user := testutil.CreateTestUser(db, shop.ID, "admin", "pass", "admin")
|
||||
wh := testutil.CreateTestWarehouse(db, shop.ID, "仓")
|
||||
token := getAuthToken(user.ID, shop.ID, "admin")
|
||||
r := setupProtectedRouter(db)
|
||||
|
||||
for i, qty := range []float64{5, 20, 10} {
|
||||
p := testutil.CreateTestProduct(db, shop.ID, fmt.Sprintf("酒%d", i))
|
||||
price := float64(100 * (i + 1))
|
||||
require.NoError(t, db.Create(&model.Inventory{
|
||||
ShopID: shop.ID, WarehouseID: &wh.ID, ProductID: &p.ID,
|
||||
Quantity: qty, UnitPrice: &price,
|
||||
}).Error)
|
||||
}
|
||||
|
||||
qtys := func(w *httptest.ResponseRecorder) []float64 {
|
||||
rows := parseResponse(w)["data"].([]interface{})
|
||||
out := make([]float64, len(rows))
|
||||
for i, r := range rows {
|
||||
out[i] = r.(map[string]interface{})["quantity"].(float64)
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
// qty 升序
|
||||
w := makeRequest(r, "GET", "/api/v1/inventory?sort_by=qty&sort_dir=asc", token, nil)
|
||||
assert.Equal(t, []float64{5, 10, 20}, qtys(w))
|
||||
// qty 降序
|
||||
w = makeRequest(r, "GET", "/api/v1/inventory?sort_by=qty&sort_dir=desc", token, nil)
|
||||
assert.Equal(t, []float64{20, 10, 5}, qtys(w))
|
||||
// 总价 = qty×进价:5×100=500, 20×200=4000, 10×300=3000 → 升序 5,10,20
|
||||
w = makeRequest(r, "GET", "/api/v1/inventory?sort_by=price&sort_dir=asc", token, nil)
|
||||
assert.Equal(t, []float64{5, 10, 20}, qtys(w))
|
||||
// 非法列忽略 → 默认 id 倒序(最后插入的 qty=10 在前)
|
||||
w = makeRequest(r, "GET", "/api/v1/inventory?sort_by=evil;drop", token, nil)
|
||||
assert.Equal(t, []float64{10, 20, 5}, qtys(w))
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<title>{{.PageTitle}}</title>{{.OGTags}}
|
||||
<style>
|
||||
/* 设计系统单一真源:变量名与三主题(a 经典蓝浅 / b 琥珀深 / c 酒窖暖浅)色值
|
||||
逐字取自 .superpowers/prototype/tokens.css。SSR 页自包含无法直接引 tokens.css,
|
||||
逐字取自 design/prototype/tokens.css。SSR 页自包含无法直接引 tokens.css,
|
||||
改配色须先改原型令牌再同步此处。--glow/--seal-bg 为本页派生变量(主色低透明度/表面高透明度)。 */
|
||||
:root{
|
||||
--r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.PageTitle}}</title>{{.OGTags}}
|
||||
<style>
|
||||
/* 设计系统单一真源:变量名与三主题(a/b/c)色值逐字取自 .superpowers/prototype/tokens.css。
|
||||
/* 设计系统单一真源:变量名与三主题(a/b/c)色值逐字取自 design/prototype/tokens.css。
|
||||
与商品公开页同族;改配色须先改原型令牌再同步此处。--glow 为本页派生变量(主色低透明度)。 */
|
||||
:root{
|
||||
--r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
|
||||
|
||||
@@ -14,6 +14,8 @@ class Product {
|
||||
final double? purchasePrice;
|
||||
final double? salePrice;
|
||||
final int? minStock;
|
||||
// 生产日期(YYYY-MM-DD,后端 Date 序列化,空串=未填)
|
||||
final String? productionDate;
|
||||
final String? description;
|
||||
final String? remark;
|
||||
final Map<String, dynamic>? customFields;
|
||||
@@ -41,6 +43,7 @@ class Product {
|
||||
this.purchasePrice,
|
||||
this.salePrice,
|
||||
this.minStock,
|
||||
this.productionDate,
|
||||
this.description,
|
||||
this.remark,
|
||||
this.customFields,
|
||||
@@ -75,6 +78,7 @@ class Product {
|
||||
minStock: json['min_stock'] != null
|
||||
? (json['min_stock'] as num).toInt()
|
||||
: null,
|
||||
productionDate: json['production_date'] as String?,
|
||||
description: json['description'] as String?,
|
||||
remark: json['remark'] as String?,
|
||||
customFields: json['custom_fields'] as Map<String, dynamic>?,
|
||||
|
||||
@@ -31,6 +31,8 @@ class InventoryListNotifier extends AsyncNotifier<PageResult<Inventory>> {
|
||||
String _keyword = '';
|
||||
String _code = ''; // 商品编码独立筛选(原型 codeInput)
|
||||
String _status = ''; // 三态筛选(空=后端默认排除已售)
|
||||
String _sortBy = ''; // 列头排序(空=默认 id 倒序)
|
||||
bool _sortAsc = true;
|
||||
List<String> _series = [];
|
||||
List<String> _spec = [];
|
||||
PageResult<Inventory>? _cache;
|
||||
@@ -55,6 +57,8 @@ class InventoryListNotifier extends AsyncNotifier<PageResult<Inventory>> {
|
||||
keyword: _keyword.isEmpty ? null : _keyword,
|
||||
code: _code.isEmpty ? null : _code,
|
||||
status: _status.isEmpty ? null : _status,
|
||||
sortBy: _sortBy.isEmpty ? null : _sortBy,
|
||||
sortAsc: _sortAsc,
|
||||
series: _series.isEmpty ? null : _series,
|
||||
spec: _spec.isEmpty ? null : _spec,
|
||||
page: _page,
|
||||
@@ -97,6 +101,13 @@ class InventoryListNotifier extends AsyncNotifier<PageResult<Inventory>> {
|
||||
reload();
|
||||
}
|
||||
|
||||
void setSort(String sortBy, bool asc) {
|
||||
_sortBy = sortBy;
|
||||
_sortAsc = asc;
|
||||
_page = 1;
|
||||
reload();
|
||||
}
|
||||
|
||||
void setSeries(List<String> series) {
|
||||
_series = series;
|
||||
_page = 1;
|
||||
|
||||
@@ -17,6 +17,8 @@ class InventoryRepository {
|
||||
List<String>? series,
|
||||
List<String>? spec,
|
||||
String? status, // 三态筛选:stock/on_sale/sold(逗号可多值);空=后端默认(排除已售)
|
||||
String? sortBy, // 列头排序:qty/cost/price/prod_date/in_time(后端白名单)
|
||||
bool sortAsc = true,
|
||||
int page = 1,
|
||||
int pageSize = 50,
|
||||
}) async {
|
||||
@@ -31,6 +33,10 @@ class InventoryRepository {
|
||||
if (series != null && series.isNotEmpty) 'series': series.join(','),
|
||||
if (spec != null && spec.isNotEmpty) 'spec': spec.join(','),
|
||||
if (status != null && status.isNotEmpty) 'status': status,
|
||||
if (sortBy != null && sortBy.isNotEmpty) ...{
|
||||
'sort_by': sortBy,
|
||||
'sort_dir': sortAsc ? 'asc' : 'desc',
|
||||
},
|
||||
};
|
||||
final resp = await _client.get('/inventory', params: params);
|
||||
return PageResult.fromJson(
|
||||
|
||||
@@ -141,6 +141,34 @@ class _InventoryListScreenState extends ConsumerState<InventoryListScreen> {
|
||||
.setStatus(_statusParam[label] ?? '');
|
||||
}
|
||||
|
||||
// ── 列头排序(点击循环 无→升→降→无,服务端全局排序) ──
|
||||
String _sortBy = ''; // 列 key(屏内),空=未排序
|
||||
bool _sortAsc = true;
|
||||
static const _sortParam = {
|
||||
'qty': 'qty',
|
||||
'cost': 'cost',
|
||||
'price': 'price',
|
||||
'prodDate': 'prod_date',
|
||||
'inTime': 'in_time',
|
||||
};
|
||||
|
||||
void _toggleSort(String key) {
|
||||
setState(() {
|
||||
if (_sortBy != key) {
|
||||
_sortBy = key;
|
||||
_sortAsc = true;
|
||||
} else if (_sortAsc) {
|
||||
_sortAsc = false;
|
||||
} else {
|
||||
_sortBy = '';
|
||||
_sortAsc = true;
|
||||
}
|
||||
});
|
||||
ref
|
||||
.read(inventoryListProvider.notifier)
|
||||
.setSort(_sortBy.isEmpty ? '' : _sortParam[_sortBy]!, _sortAsc);
|
||||
}
|
||||
|
||||
// 成本仅管理员可见(与出库同口径):非管理员隐藏成本价/总价列、卡片单价、货值 KPI。
|
||||
bool get _isAdmin => ref.watch(isAdminProvider);
|
||||
bool _colAllowed(ColDef c) =>
|
||||
@@ -178,7 +206,25 @@ class _InventoryListScreenState extends ConsumerState<InventoryListScreen> {
|
||||
if (v != null && mounted) _applyStatusFilter(v);
|
||||
}
|
||||
|
||||
// ── 多选漏斗(规格/系列/仓库) ──
|
||||
// ── 工具栏多选 chip(规格/系列/仓库,2026-07-07 从列头漏斗上移) ──
|
||||
Widget _multiChip(String label, List<String> options, Set<String> selected,
|
||||
ValueChanged<Set<String>> onChanged) {
|
||||
return Builder(
|
||||
builder: (chipCtx) => DsChip(
|
||||
label: label,
|
||||
value: selected.isEmpty
|
||||
? null
|
||||
: selected.length == 1
|
||||
? selected.first
|
||||
: '${selected.length} 项',
|
||||
onTap: () => _openMultiFilter(chipCtx,
|
||||
options: options, selected: selected, onChanged: onChanged),
|
||||
onClear: () => onChanged({}),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ── 多选菜单(规格/系列/仓库,chip 锚定) ──
|
||||
void _openMultiFilter(
|
||||
BuildContext anchorContext, {
|
||||
required List<String> options,
|
||||
@@ -567,6 +613,8 @@ class _InventoryListScreenState extends ConsumerState<InventoryListScreen> {
|
||||
return MCard(
|
||||
onTap: item.productId != null ? () => _openEditor(item) : null,
|
||||
nm: item.productName.isEmpty ? '-' : item.productName,
|
||||
// 生产日期小字缀在品名后(原型 .mc-date,2026-07-10 用户口径)
|
||||
nmSuffix: (item.productionDate ?? '').isEmpty ? null : item.productionDate,
|
||||
sub: sub.isEmpty ? null : sub,
|
||||
badges: [DsTextIconBadge(status)],
|
||||
amtWidget: Text.rich(
|
||||
@@ -880,11 +928,40 @@ class _InventoryListScreenState extends ConsumerState<InventoryListScreen> {
|
||||
);
|
||||
}
|
||||
|
||||
// 桌面 toolbar:合一搜索框 + 重置
|
||||
// (状态筛选 chip 已按用户口径删除,状态列漏斗保留)
|
||||
// 桌面 toolbar:搜索 + 筛选 chips + 重置
|
||||
// (2026-07-07 用户口径反转:筛选全部上移工具栏,形式
|
||||
// 参照出库管理;列头只留排序,漏斗退役)
|
||||
return Row(
|
||||
children: [
|
||||
SizedBox(width: 260, child: searchField),
|
||||
const SizedBox(width: AppDims.sp2),
|
||||
_multiChip('规格', specOptions, _filterSpec, (v) {
|
||||
setState(() => _filterSpec = v);
|
||||
ref
|
||||
.read(inventoryListProvider.notifier)
|
||||
.setSpec(v.toList());
|
||||
}),
|
||||
const SizedBox(width: AppDims.sp2),
|
||||
_multiChip('系列', seriesOptions, _filterSeries, (v) {
|
||||
setState(() => _filterSeries = v);
|
||||
ref
|
||||
.read(inventoryListProvider.notifier)
|
||||
.setSeries(v.toList());
|
||||
}),
|
||||
const SizedBox(width: AppDims.sp2),
|
||||
_multiChip('仓库', warehouseOptions, _filterWarehouse,
|
||||
(v) => setState(() => _filterWarehouse = v)),
|
||||
const SizedBox(width: AppDims.sp2),
|
||||
Builder(
|
||||
builder: (chipCtx) => DsChip(
|
||||
label: '状态',
|
||||
value: _statusFilter == '全部'
|
||||
? null
|
||||
: _statusFilter,
|
||||
onTap: () => _openStatusMenu(chipCtx),
|
||||
onClear: () => _applyStatusFilter('全部'),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
DsButton('重置', small: true, onPressed: _clearFilters),
|
||||
],
|
||||
@@ -899,45 +976,18 @@ class _InventoryListScreenState extends ConsumerState<InventoryListScreen> {
|
||||
},
|
||||
emptyText: '没有匹配的商品 · 试试调整筛选或搜索',
|
||||
columns: visibleCols.map((c) {
|
||||
// 筛选已全部上移工具栏 chips(2026-07-07),列头只留排序。
|
||||
final Widget? header = switch (c.key) {
|
||||
'spec' => DsFilterHeader(
|
||||
// 可排序列(原型 COLS sort:true,服务端全局排序)
|
||||
'qty' ||
|
||||
'cost' ||
|
||||
'price' ||
|
||||
'prodDate' ||
|
||||
'inTime' =>
|
||||
DsSortHeader(
|
||||
label: c.label,
|
||||
filtered: _filterSpec.isNotEmpty,
|
||||
onOpen: (bctx) => _openMultiFilter(bctx,
|
||||
options: specOptions,
|
||||
selected: _filterSpec, onChanged: (v) {
|
||||
setState(() => _filterSpec = v);
|
||||
ref
|
||||
.read(inventoryListProvider.notifier)
|
||||
.setSpec(v.toList());
|
||||
}),
|
||||
),
|
||||
'series' => DsFilterHeader(
|
||||
label: c.label,
|
||||
filtered: _filterSeries.isNotEmpty,
|
||||
onOpen: (bctx) => _openMultiFilter(bctx,
|
||||
options: seriesOptions,
|
||||
selected: _filterSeries, onChanged: (v) {
|
||||
setState(() => _filterSeries = v);
|
||||
ref
|
||||
.read(inventoryListProvider.notifier)
|
||||
.setSeries(v.toList());
|
||||
}),
|
||||
),
|
||||
'warehouse' => DsFilterHeader(
|
||||
label: c.label,
|
||||
filtered: _filterWarehouse.isNotEmpty,
|
||||
onOpen: (bctx) => _openMultiFilter(bctx,
|
||||
options: warehouseOptions,
|
||||
selected: _filterWarehouse,
|
||||
onChanged: (v) =>
|
||||
setState(() => _filterWarehouse = v)),
|
||||
),
|
||||
// 原型 COLS 里带 filter 的列只有状态(单选)。
|
||||
'status' => DsFilterHeader(
|
||||
label: c.label,
|
||||
filtered: _statusFilter != '全部',
|
||||
onOpen: _openStatusMenu,
|
||||
ascending: _sortBy == c.key ? _sortAsc : null,
|
||||
onTap: () => _toggleSort(c.key),
|
||||
),
|
||||
_ => null,
|
||||
};
|
||||
|
||||
@@ -479,38 +479,49 @@ class _DsTableState extends State<DsTable> {
|
||||
}
|
||||
}
|
||||
|
||||
/// 原型 thead th .fh 漏斗列头:label + funnel(12, sw1.6),有筛选值时整体 primary。
|
||||
/// 点击回调携带列头自身 BuildContext(供 showDsMenu 锚定)。
|
||||
class DsFilterHeader extends StatelessWidget {
|
||||
/// 原型 thead th .sh 排序列头(2026-07-07 登记):label + 方向箭头。
|
||||
/// 未排序 = 淡 chevron-down 暗示可排;激活整体 primary,asc=↑ / desc=↓。
|
||||
/// 点击由调用方循环 无→升→降→无(服务端全局排序)。
|
||||
class DsSortHeader extends StatelessWidget {
|
||||
final String label;
|
||||
final bool filtered;
|
||||
final void Function(BuildContext anchorContext) onOpen;
|
||||
const DsFilterHeader(
|
||||
{super.key,
|
||||
required this.label,
|
||||
required this.filtered,
|
||||
required this.onOpen});
|
||||
|
||||
/// null = 未按本列排序;true = 升序;false = 降序
|
||||
final bool? ascending;
|
||||
final VoidCallback onTap;
|
||||
const DsSortHeader(
|
||||
{super.key, required this.label, this.ascending, required this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final t = context.tokens;
|
||||
final color = filtered ? t.primary : t.muted;
|
||||
return Builder(
|
||||
builder: (bctx) => InkWell(
|
||||
onTap: () => onOpen(bctx),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(label,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsSm,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: color)),
|
||||
const SizedBox(width: 5),
|
||||
Icon(LucideIcons.funnel, size: 12, color: color),
|
||||
],
|
||||
),
|
||||
final on = ascending != null;
|
||||
final color = on ? t.primary : t.muted;
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(label,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsSm,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: color)),
|
||||
const SizedBox(width: 4),
|
||||
Opacity(
|
||||
opacity: on ? 1 : .45,
|
||||
child: Icon(
|
||||
ascending == true
|
||||
? LucideIcons.chevronUp
|
||||
: LucideIcons.chevronDown,
|
||||
size: 12,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// DsFilterHeader(列头漏斗筛选)已于 2026-07-07 退役删除:筛选统一上移工具栏
|
||||
// chips(用户口径,形式参照出库管理),列头仅保留 DsSortHeader 排序。
|
||||
|
||||
@@ -101,6 +101,9 @@ class MCard extends StatelessWidget {
|
||||
/// mc-nm 标题(600 heading)。
|
||||
final String nm;
|
||||
|
||||
/// mc-date 标题后缀(原型 .mc-nm .mc-date:xs muted mono,左距 8);null 不渲染。
|
||||
final String? nmSuffix;
|
||||
|
||||
/// mc-sub 副行(xs muted mono);null 不渲染。
|
||||
final String? sub;
|
||||
|
||||
@@ -119,6 +122,7 @@ class MCard extends StatelessWidget {
|
||||
const MCard({
|
||||
super.key,
|
||||
required this.nm,
|
||||
this.nmSuffix,
|
||||
this.sub,
|
||||
this.badges = const [],
|
||||
this.amt,
|
||||
@@ -151,13 +155,32 @@ class MCard extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(nm,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsBody,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: t.heading)),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.baseline,
|
||||
textBaseline: TextBaseline.alphabetic,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(nm,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsBody,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: t.heading)),
|
||||
),
|
||||
if (nmSuffix != null) ...[
|
||||
const SizedBox(width: 8),
|
||||
Text(nmSuffix!,
|
||||
style: TextStyle(
|
||||
fontSize: AppDims.fsXs,
|
||||
color: t.muted,
|
||||
fontFamily: AppFonts.mono,
|
||||
fontFamilyFallback:
|
||||
AppFonts.monoFallback)),
|
||||
],
|
||||
],
|
||||
),
|
||||
if (sub != null) ...[
|
||||
const SizedBox(height: 3),
|
||||
Text(sub!,
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../core/theme/context_tokens.dart';
|
||||
|
||||
// ⚠️ LEGACY(2026-07-07 标注):本组件为旧移动卡片范式(label:value 竖排字段),
|
||||
// 新范式 = widgets/ds/m_card.dart 的 MCard(镜像原型 mobile-atoms .m-card,
|
||||
// 图标徽章 + 双栏紧凑)。**新屏禁用本组件,一律用 MCard**;存量 6 屏
|
||||
// (出入库录单/往来/盘点/基础数据/财务)迁移已登记 todo,迁完删除本文件。
|
||||
|
||||
/// 移动端列表卡片的单个字段(label: value)。
|
||||
class MobileCardField {
|
||||
final String label;
|
||||
|
||||
@@ -394,6 +394,9 @@ class _ProductEditorDrawerState extends ConsumerState<_ProductEditorDrawer> {
|
||||
if ((p.series ?? '').isNotEmpty) rows.add(('系列', b(p.series!)));
|
||||
if ((p.spec ?? '').isNotEmpty) rows.add(('规格', b(p.spec!)));
|
||||
if ((p.categoryName ?? '').isNotEmpty) rows.add(('分类', b(p.categoryName!)));
|
||||
if ((p.productionDate ?? '').isNotEmpty) {
|
||||
rows.add(('生产日期', b(p.productionDate!, mono: true)));
|
||||
}
|
||||
if (widget.qty != null) {
|
||||
rows.add((
|
||||
'当前库存',
|
||||
|
||||
|
Before Width: | Height: | Size: 416 KiB After Width: | Height: | Size: 420 KiB |
|
Before Width: | Height: | Size: 410 KiB After Width: | Height: | Size: 414 KiB |
|
Before Width: | Height: | Size: 417 KiB After Width: | Height: | Size: 422 KiB |
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 235 KiB |
|
Before Width: | Height: | Size: 205 KiB After Width: | Height: | Size: 229 KiB |
|
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 237 KiB |
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 156 KiB |
@@ -52,6 +52,8 @@ class _FakeInvRepo implements InventoryRepository {
|
||||
List<String>? series,
|
||||
List<String>? spec,
|
||||
String? status,
|
||||
String? sortBy,
|
||||
bool sortAsc = true,
|
||||
int page = 1,
|
||||
int pageSize = 50,
|
||||
}) async =>
|
||||
|
||||
|
Before Width: | Height: | Size: 393 KiB After Width: | Height: | Size: 394 KiB |
|
Before Width: | Height: | Size: 389 KiB After Width: | Height: | Size: 389 KiB |
|
Before Width: | Height: | Size: 445 KiB After Width: | Height: | Size: 443 KiB |
|
Before Width: | Height: | Size: 434 KiB After Width: | Height: | Size: 438 KiB |
|
Before Width: | Height: | Size: 423 KiB After Width: | Height: | Size: 426 KiB |
|
Before Width: | Height: | Size: 435 KiB After Width: | Height: | Size: 439 KiB |
|
Before Width: | Height: | Size: 383 KiB After Width: | Height: | Size: 384 KiB |
|
Before Width: | Height: | Size: 373 KiB After Width: | Height: | Size: 374 KiB |
|
Before Width: | Height: | Size: 385 KiB After Width: | Height: | Size: 386 KiB |
|
Before Width: | Height: | Size: 277 KiB After Width: | Height: | Size: 276 KiB |
|
Before Width: | Height: | Size: 271 KiB After Width: | Height: | Size: 271 KiB |
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 278 KiB |
|
Before Width: | Height: | Size: 438 KiB After Width: | Height: | Size: 438 KiB |
|
Before Width: | Height: | Size: 426 KiB After Width: | Height: | Size: 426 KiB |
|
Before Width: | Height: | Size: 439 KiB After Width: | Height: | Size: 439 KiB |
|
Before Width: | Height: | Size: 383 KiB After Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 374 KiB After Width: | Height: | Size: 379 KiB |
|
Before Width: | Height: | Size: 384 KiB After Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 362 KiB After Width: | Height: | Size: 362 KiB |
|
Before Width: | Height: | Size: 354 KiB After Width: | Height: | Size: 355 KiB |
|
Before Width: | Height: | Size: 362 KiB After Width: | Height: | Size: 363 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 191 KiB |
|
Before Width: | Height: | Size: 194 KiB After Width: | Height: | Size: 194 KiB |
|
Before Width: | Height: | Size: 402 KiB After Width: | Height: | Size: 405 KiB |
|
Before Width: | Height: | Size: 392 KiB After Width: | Height: | Size: 394 KiB |
|
Before Width: | Height: | Size: 404 KiB After Width: | Height: | Size: 407 KiB |
|
Before Width: | Height: | Size: 400 KiB After Width: | Height: | Size: 402 KiB |
|
Before Width: | Height: | Size: 388 KiB After Width: | Height: | Size: 391 KiB |
|
Before Width: | Height: | Size: 401 KiB After Width: | Height: | Size: 404 KiB |
|
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 216 KiB |
|
Before Width: | Height: | Size: 212 KiB After Width: | Height: | Size: 212 KiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
@@ -100,6 +100,8 @@ class _FakeInventoryRepository extends InventoryRepository {
|
||||
List<String>? series,
|
||||
List<String>? spec,
|
||||
String? status,
|
||||
String? sortBy,
|
||||
bool sortAsc = true,
|
||||
int page = 1,
|
||||
int pageSize = 50,
|
||||
}) async {
|
||||
|
||||
@@ -11,11 +11,11 @@
|
||||
|
||||
| 项 | 位置 | 说明 |
|
||||
|---|---|---|
|
||||
| token 单源 | `.superpowers/prototype/tokens.css` | 三主题 `[data-theme=a/b/c]`,已 snapshot 到 `client/lib/core/theme/token_source/tokens.css` |
|
||||
| token 单源 | `design/prototype/tokens.css` | 三主题 `[data-theme=a/b/c]`,已 snapshot 到 `client/lib/core/theme/token_source/tokens.css` |
|
||||
| token codegen | `client/lib/core/theme/tool/gen_tokens.mjs` → `app_tokens.g.dart` | 单源生成,**禁手改**;`kTokensA/B/C` + `appTokensOf(key)` |
|
||||
| 实现层 | `themes.dart`(buildTheme)+ `context_tokens.dart`(`context.tokens`) | AppTokens ThemeExtension 挂三 ThemeData |
|
||||
| 原型清单 | `.superpowers/prototype/screens/*.html` | 桌面 + `m-*` 移动;viewport 桌面 1280×860 / 移动 390×844 |
|
||||
| 设计铁律 | `.superpowers/prototype/index.html`(atoms 注册)+ `tools/check-ds.mjs` 闸 | 颜色只走 token;组件出自已登记 atoms |
|
||||
| 原型清单 | `design/prototype/screens/*.html` | 桌面 + `m-*` 移动;viewport 桌面 1280×860 / 移动 390×844 |
|
||||
| 设计铁律 | `design/prototype/index.html`(atoms 注册)+ `tools/check-ds.mjs` 闸 | 颜色只走 token;组件出自已登记 atoms |
|
||||
| 验收工具 | `~/.claude/skills/design-distill/tools/{shoot-prototype,diff}.mjs` | prototype shoot 已验证三主题可出图 |
|
||||
|
||||
### 主题
|
||||
@@ -206,7 +206,7 @@ AppTokens 目前**仅颜色**。原型还驱动:
|
||||
> - 关于:旧版 帮助文档/扫码防伪/系统信息 卡删除,构建号并入版本 cell;更新日志走 `/public/release`(与官网时间线同源),接口不可达回退只显当前版本。
|
||||
|
||||
**验收法(HTML→Flutter 特例)**:HTML(Chromium) 与 Flutter 渲染器不同,**严格 0.1% pixelmatch 不适用跨渲染器**(见 design-distill `references/flutter-golden.md`)。本项目双闸:
|
||||
1. **保真闸(人工目检)**:`node tools/ds-compare.mjs --html .superpowers/prototype/screens/<screen>.html --prefix <prefix>` → 截原型基准 + 与 Flutter golden 用 montage 并排 → `design/_compare/`。
|
||||
1. **保真闸(人工目检)**:`node tools/ds-compare.mjs --html design/prototype/screens/<screen>.html --prefix <prefix>` → 截原型基准 + 与 Flutter golden 用 montage 并排 → `design/_compare/`。
|
||||
2. **回归闸(自动)**:`test/golden/<screen>_golden_test.dart` 走 `pumpGolden`/`goldenAcrossThemes`(`test/support/golden_harness.dart`)出 A/B/C 三主题 golden,入库随 `flutter test` 同渲染器自比,抓串色/漏 token。
|
||||
3. token 残留闸:`grep 0xFF…` 该屏为 0(颜色全走 `context.tokens`)。
|
||||
|
||||
|
||||
@@ -135,6 +135,12 @@ th.act,td.act{width:78px;}
|
||||
thead th .fh{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
|
||||
thead th .fh.filtered{color:var(--primary);}
|
||||
.funnel{width:12px; height:12px; stroke-width:1.6;}
|
||||
/* 列头排序(2026-07-07):label+方向箭头;未排序淡 chevron-down 暗示可排,激活整体 primary。
|
||||
点击循环 无→升→降→无(服务端全局排序)。 */
|
||||
thead th .sh{display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none;}
|
||||
thead th .sh.on{color:var(--primary);}
|
||||
.sort-ic{width:12px; height:12px; stroke-width:2;}
|
||||
thead th .sh:not(.on) .sort-ic{opacity:.45;}
|
||||
tbody td{padding:12px 14px; font-size:var(--fs-body); border-bottom:1px solid var(--border-subtle); color:var(--text); white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr.click{cursor:pointer;} tbody tr:hover{background:var(--row-hover);}
|
||||
@@ -437,7 +437,7 @@
|
||||
<section class="section" id="m-comp">
|
||||
<h2>移动专属组件 .m-*</h2><p class="desc">来自 <code>mobile-atoms.css</code> 的移动专属原子,由 <code>mobile-shell.js</code> 装配外壳。<b>复用上方公用原子</b>(按钮/徽章/分段/输入),此处只展示移动新增的 <code>.m-*</code>。</p>
|
||||
<div style="margin:0 0 16px"><a class="btn ghost" href="screens/mobile-kit.html"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg>打开移动 UI Kit · 全部 .m-* 实机展示</a></div>
|
||||
<div class="pcard"><div class="pcard-h"><h3>移动壳 + 列表(实机预览)</h3><span class="tk">.m-top · .m-tabbar · .m-page · .m-kpi · .m-search · .m-filters/.m-pill · .m-card/.m-row · .m-fab</span></div>
|
||||
<div class="pcard"><div class="pcard-h"><h3>移动壳 + 列表(实机预览)</h3><span class="tk">.m-top · .m-tabbar · .m-page · .m-kpi · .m-search · .m-filters/.m-pill · .m-card/.m-row(.mc-nm 可带 .mc-date 日期后缀)· .m-fab</span></div>
|
||||
<div class="pcard-b" style="align-items:flex-start"><div class="mdemo">
|
||||
<div class="mphone">
|
||||
<div class="m-top"><div class="m-title">库存</div><div class="m-actions"><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-shirt"/></svg></div><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg><span class="m-dot">3</span></div><div class="m-av">王</div></div></div>
|
||||
@@ -451,7 +451,7 @@
|
||||
<div class="m-search" style="margin-top:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="商品名 / 拼音 / 编码"></div>
|
||||
<div class="m-filters"><div class="m-pill on">全部</div><div class="m-pill">酱香</div><div class="m-pill">浓香</div><div class="m-pill">清香</div></div>
|
||||
<div class="m-section">商品 · 共 10</div>
|
||||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">茅台 飞天 53°</div><div class="mc-sub">MT-FT-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-在售">在售</span><span class="mc-amt">128 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">茅台 飞天 53°<span class="mc-date">2024-07-11</span></div><div class="mc-sub">MT-FT-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-在售">在售</span><span class="mc-amt">128 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">剑南春 水晶剑</div><div class="mc-sub">JNC-SJ-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-缺货">缺货</span><span class="mc-amt">8 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||||
</div></div>
|
||||
<nav class="m-tabbar">
|
||||
@@ -42,6 +42,7 @@
|
||||
.m-row{display:flex; align-items:center; gap:12px;}
|
||||
.m-row .mc-main{min-width:0; flex:1;}
|
||||
.m-row .mc-nm{font-weight:600; color:var(--heading); font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||||
.m-row .mc-nm .mc-date{font-weight:400; font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono); margin-left:8px;}
|
||||
.m-row .mc-sub{font-size:var(--fs-xs); color:var(--muted); margin-top:3px; font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||||
.m-row .mc-right{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none;}
|
||||
.m-row .mc-amt{font-weight:700; color:var(--heading); font-size:var(--fs-body); font-family:var(--font-mono);}
|
||||
@@ -57,8 +57,12 @@
|
||||
<div class="kpi alert click" onclick="filterStatus('已售')"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="t">已售 · 点击筛选</div><div class="v">17</div><div class="d down">需补货 6 项</div></div>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="商品名 / 拼音" oninput="state.q=this.value; state.page=1; render()"></div>
|
||||
<div class="searchbox code"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="codeInput" placeholder="商品编码" oninput="state.code=this.value; state.page=1; render()"></div>
|
||||
<!-- 搜索合一(2026-07-07 用户口径):名称/拼音/编码同框,与 Flutter 实现一致 -->
|
||||
<div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="商品名 / 拼音 / 编码" oninput="state.q=this.value; state.page=1; render()"></div>
|
||||
<!-- 2026-07-07 用户口径:筛选全部上移工具栏(参照出库管理),列头漏斗退役、只留排序 -->
|
||||
<div class="chip" id="chipSpec" onclick="openDimFilter('spec',this)">规格 <span class="cv" id="specVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
|
||||
<div class="chip" id="chipSeries" onclick="openDimFilter('series',this)">系列 <span class="cv" id="seriesVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
|
||||
<div class="chip" id="chipWh" onclick="openDimFilter('wh',this)">仓库 <span class="cv" id="whVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
|
||||
<div class="chip" id="chipStatus">状态 <span class="cv" id="statusVal"></span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
|
||||
<div class="sp"></div>
|
||||
<div class="btn ghost sm" onclick="clearFilters()">重置</div>
|
||||
@@ -113,19 +117,20 @@ const ITEMS=[
|
||||
{name:'水井坊 井台',code:'SJF-JT-500',spec:'500ml×6',series:'井台',batch:'PZ231209',cat:'浓香',qty:6,unit:'件',cost:'¥680',price:'¥4,080',prodDate:'2023-12-09',inDate:'2026-05-20',supplier:'四川水井坊',value:'¥4,100',status:'已售'},
|
||||
];
|
||||
const STATUS=['全部','在售','库存','已售'];
|
||||
const COLS=[{key:'product',label:'商品',fixed:true},{key:'spec',label:'规格'},{key:'series',label:'系列'},{key:'batch',label:'批次号'},{key:'qty',label:'库存',num:true},{key:'cost',label:'成本价',num:true},{key:'price',label:'总价',num:true},{key:'prodDate',label:'生产日期'},{key:'inDate',label:'入库时间'},{key:'supplier',label:'供应商'},{key:'status',label:'状态',filter:'status'},{key:'act',label:'操作',fixed:true}];
|
||||
const state={q:'',code:'',status:'全部',page:1,perPage:10,hidden:new Set()};
|
||||
const COLS=[{key:'product',label:'商品',fixed:true},{key:'spec',label:'规格'},{key:'series',label:'系列'},{key:'batch',label:'批次号'},{key:'qty',label:'库存',num:true,sort:true},{key:'cost',label:'成本价',num:true,sort:true},{key:'price',label:'总价',num:true,sort:true},{key:'prodDate',label:'生产日期',sort:true},{key:'inDate',label:'入库时间',sort:true},{key:'supplier',label:'供应商'},{key:'status',label:'状态'},{key:'act',label:'操作',fixed:true}];
|
||||
const state={q:'',code:'',status:'全部',page:1,perPage:10,hidden:new Set(),sortBy:null,sortAsc:true};
|
||||
|
||||
function setActive(k){ document.querySelectorAll('.nav[data-k]').forEach(e=>e.classList.toggle('active',e.dataset.k===k)); }
|
||||
function navTo(k){ setActive(k); const inv=document.querySelector('[data-view="inventory"]'), ph=document.querySelector('[data-view="placeholder"]'); if(k==='inventory'){inv.classList.add('active');ph.classList.remove('active');return;} inv.classList.remove('active');ph.classList.add('active'); const nav=NAVS.find(n=>n.k===k); document.getElementById('phTitle').textContent=nav.label; document.getElementById('phIcon').innerHTML=navSvg(nav.d); }
|
||||
|
||||
function visibleCols(){ return COLS.filter(c=>!state.hidden.has(c.key)); }
|
||||
function filtered(){ return ITEMS.filter(it=>{ if(state.status!=='全部'&&it.status!==state.status)return false; if(state.q){const q=state.q.toLowerCase(); if(!it.name.toLowerCase().includes(q))return false;} if(state.code){const c=state.code.toLowerCase(); if(!it.code.toLowerCase().includes(c))return false;} return true; }); }
|
||||
function filtered(){ const rows=ITEMS.filter(it=>{ if(state.status!=='全部'&&it.status!==state.status)return false; if(state.spec&&it.spec!==state.spec)return false; if(state.series&&it.series!==state.series)return false; if(state.wh&&it.supplier!==state.wh)return false; if(state.q){const q=state.q.toLowerCase(); if(!it.name.toLowerCase().includes(q)&&!it.code.toLowerCase().includes(q))return false;} return true; }); if(state.sortBy&&SORT_VAL[state.sortBy]){const v=SORT_VAL[state.sortBy];rows.sort((a,b)=>{const x=v(a),y=v(b);return (x<y?-1:x>y?1:0)*(state.sortAsc?1:-1);});} return rows; }
|
||||
function render(){
|
||||
document.getElementById('statusVal').textContent=state.status==='全部'?'':state.status;
|
||||
[['spec','chipSpec','specVal'],['series','chipSeries','seriesVal'],['wh','chipWh','whVal']].forEach(([k,cid,vid])=>{ document.getElementById(vid).textContent=state[k]||''; document.getElementById(cid).classList.toggle('on',!!state[k]); });
|
||||
document.getElementById('chipStatus').classList.toggle('on',state.status!=='全部');
|
||||
const cols=visibleCols();
|
||||
document.getElementById('thead').innerHTML='<tr>'+cols.map(c=>{ const cls=(c.num?'num ':'')+(c.key==='act'?'act ':''); if(c.filter){const on=state.status!=='全部'; return `<th class="${cls}"><span class="fh ${on?'filtered':''}" onclick="openFilter('${c.filter}',this)">${c.label} <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic22"/></svg></span></th>`;} return `<th class="${cls}">${c.label}</th>`; }).join('')+'</tr>';
|
||||
document.getElementById('thead').innerHTML='<tr>'+cols.map(c=>{ const cls=(c.num?'num ':'')+(c.key==='act'?'act ':''); if(c.filter){const on=state.status!=='全部'; return `<th class="${cls}"><span class="fh ${on?'filtered':''}" onclick="openFilter('${c.filter}',this)">${c.label} <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic22"/></svg></span></th>`;} if(c.sort){const on=state.sortBy===c.key; const ic=!on?'i-chevron-down':(state.sortAsc?'i-ic51':'i-chevron-down'); return `<th class="${cls}"><span class="sh ${on?'on':''}" onclick="toggleSort('${c.key}')">${c.label} <svg class="sort-ic" viewBox="0 0 24 24"><use href="#${ic}"/></svg></span></th>`;} return `<th class="${cls}">${c.label}</th>`; }).join('')+'</tr>';
|
||||
const rows=filtered(); const start=(state.page-1)*state.perPage; const pageRows=rows.slice(start,start+state.perPage); const tb=document.getElementById('tbody');
|
||||
if(rows.length===0){ tb.innerHTML=`<tr><td colspan="${cols.length}"><div class="empty">没有匹配的商品 · 试试调整筛选或搜索</div></td></tr>`; }
|
||||
else { tb.innerHTML=pageRows.map(it=>{ const idx=ITEMS.indexOf(it); return '<tr class="click" onclick="openProduct('+idx+')">'+cols.map(c=>{ if(c.key==='product')return `<td><div class="pname">${it.name}</div><div class="pcode">${it.code}</div></td>`; if(c.key==='qty')return `<td class="num"><span class="qty ${it.qty<=10?'low':''}">${it.qty}</span></td>`; if(c.key==='prodDate')return `<td style="font-family:var(--font-mono);color:var(--text)">${it.prodDate}</td>`; if(c.key==='inDate')return `<td style="font-family:var(--font-mono);color:var(--muted)">${it.inDate}</td>`; if(c.key==='status')return `<td><span class="badge b-${it.status}">${it.status}</span></td>`; if(c.key==='act')return `<td class="act"><div class="row-act" onclick="event.stopPropagation()"><svg viewBox="0 0 24 24" onclick="openProduct(${idx})"><use href="#i-eye"/></svg></div></td>`; return `<td class="${c.num?'num':''}">${it[c.key]}</td>`; }).join('')+'</tr>'; }).join(''); }
|
||||
@@ -138,9 +143,15 @@ const PAGE_SIZES=[10,20,50,100];
|
||||
function openPageSize(e){ openMenu(e.currentTarget, PAGE_SIZES.map(n=>({v:String(n),label:String(n),sel:n===state.perPage})), v=>{ closeMenus(); setPerPage(v); }, 'pgsize-menu', 88); }
|
||||
function setPerPage(v){ state.perPage=+v; state.page=1; const el=document.getElementById('pageSizeVal'); if(el)el.textContent=v; render(); }
|
||||
function filterStatus(s){ state.status=s; state.page=1; navTo('inventory'); render(); }
|
||||
function clearFilters(){ state.q='';state.code='';state.status='全部';state.page=1; document.getElementById('searchInput').value=''; document.getElementById('codeInput').value=''; render(); }
|
||||
// 列头排序:无→升→降→无 循环(真实实现为服务端全局排序)
|
||||
function toggleSort(k){ if(state.sortBy!==k){state.sortBy=k;state.sortAsc=true;} else if(state.sortAsc){state.sortAsc=false;} else {state.sortBy=null;state.sortAsc=true;} state.page=1; render(); }
|
||||
const SORT_VAL={qty:it=>it.qty,cost:it=>parseFloat(String(it.cost).replace(/[¥,]/g,''))||0,price:it=>parseFloat(String(it.price).replace(/[¥,]/g,''))||0,prodDate:it=>it.prodDate||'',inDate:it=>it.inDate||''};
|
||||
function clearFilters(){ state.q='';state.status='全部';state.spec=null;state.series=null;state.wh=null;state.page=1; document.getElementById('searchInput').value=''; render(); }
|
||||
|
||||
function openFilter(kind,t){ openMenu(t,STATUS.map(v=>({v,label:v,sel:v===state.status})),v=>{ state.status=v; state.page=1; closeMenus(); render(); }); }
|
||||
// 维度筛选 chip(规格/系列/仓库,2026-07-07 从列头漏斗上移;真实实现为多选)
|
||||
const DIM_KEY={spec:'spec',series:'series',wh:'supplier'};
|
||||
function openDimFilter(dim,t){ const key=DIM_KEY[dim]; const opts=['全部',...new Set(ITEMS.map(it=>it[key]).filter(Boolean))]; openMenu(t,opts.map(v=>({v,label:v,sel:(state[dim]||'全部')===v})),v=>{ state[dim]=v==='全部'?null:v; state.page=1; closeMenus(); render(); }); }
|
||||
document.getElementById('chipStatus').onclick=e=>openFilter('status',e.currentTarget);
|
||||
const COL_KEY='jiu-inv-hidden';
|
||||
function saveHidden(){ try{ localStorage.setItem(COL_KEY, JSON.stringify([...state.hidden])); }catch(e){} }
|
||||
@@ -36,16 +36,16 @@
|
||||
<script src="mobile-shell.js"></script>
|
||||
<script>
|
||||
const ITEMS=[
|
||||
{name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',qty:128,unit:'件',cost:'¥2,680',supplier:'贵州茅台经销',status:'在售'},
|
||||
{name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',qty:64,unit:'件',cost:'¥1,050',supplier:'宜宾五粮液',status:'在售'},
|
||||
{name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',qty:8,unit:'件',cost:'¥438',supplier:'绵竹剑南春',status:'已售'},
|
||||
{name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',qty:42,unit:'件',cost:'¥980',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'550ml×6',series:'梦之蓝M6',batch:'PZ240520',qty:23,unit:'件',cost:'¥620',supplier:'洋河股份',status:'库存'},
|
||||
{name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',qty:156,unit:'件',cost:'¥320',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',qty:31,unit:'件',cost:'¥760',supplier:'贵州习酒',status:'在售'},
|
||||
{name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',qty:0,unit:'件',cost:'¥420',supplier:'山西杏花村',status:'已售'},
|
||||
{name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',qty:54,unit:'件',cost:'¥560',supplier:'四川郎酒',status:'在售'},
|
||||
{name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',qty:88,unit:'件',cost:'¥280',supplier:'陕西西凤',status:'在售'},
|
||||
{name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',prod:'2024-07-11',qty:128,unit:'件',cost:'¥2,680',supplier:'贵州茅台经销',status:'在售'},
|
||||
{name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',prod:'2024-04-28',qty:64,unit:'件',cost:'¥1,050',supplier:'宜宾五粮液',status:'在售'},
|
||||
{name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',prod:'2023-11-15',qty:8,unit:'件',cost:'¥438',supplier:'绵竹剑南春',status:'已售'},
|
||||
{name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',prod:'2024-02-08',qty:42,unit:'件',cost:'¥980',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'550ml×6',series:'梦之蓝M6',batch:'PZ240520',prod:'2024-05-20',qty:23,unit:'件',cost:'¥620',supplier:'洋河股份',status:'库存'},
|
||||
{name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',prod:'2024-06-30',qty:156,unit:'件',cost:'¥320',supplier:'泸州老窖',status:'在售'},
|
||||
{name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',prod:'2023-09-18',qty:31,unit:'件',cost:'¥760',supplier:'贵州习酒',status:'在售'},
|
||||
{name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',prod:'2024-01-12',qty:0,unit:'件',cost:'¥420',supplier:'山西杏花村',status:'已售'},
|
||||
{name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',prod:'2024-03-25',qty:54,unit:'件',cost:'¥560',supplier:'四川郎酒',status:'在售'},
|
||||
{name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',prod:'2024-06-14',qty:88,unit:'件',cost:'¥280',supplier:'陕西西凤',status:'在售'},
|
||||
];
|
||||
const state={q:''};
|
||||
|
||||
@@ -57,7 +57,7 @@ function render(){
|
||||
if(!rows.length){ L.innerHTML=`<div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>没有匹配的商品 · 调整筛选或搜索</div>`; return; }
|
||||
L.innerHTML=rows.map((it,i)=>`<a class="m-card" onclick="openItem(${ITEMS.indexOf(it)})">
|
||||
<div class="m-row">
|
||||
<div class="mc-main"><div class="mc-nm">${it.name}</div><div class="mc-sub">${it.code} · ${it.spec} · ${it.cost}</div></div><!-- 单价=成本进价,仅管理员可见(2026-07-06) -->
|
||||
<div class="mc-main"><div class="mc-nm">${it.name}<span class="mc-date">${it.prod}</span></div><div class="mc-sub">${it.code} · ${it.spec} · ${it.cost}</div></div><!-- 单价=成本进价,仅管理员可见(2026-07-06) -->
|
||||
<div class="mc-right"><span class="badge b-${it.status}">${it.status}</span><span class="mc-amt"><span class="${it.qty<=10?'qty-low':''}">${it.qty}</span> ${it.unit}</span></div>
|
||||
<div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
|
||||
</div>
|
||||
@@ -66,7 +66,7 @@ function render(){
|
||||
function openItem(idx){ const it=ITEMS[idx];
|
||||
if(!peEdit||peEdit.idx!==idx) peEdit={idx,imgs:[PE_SAMPLE[0],'',''],introName:'',introBody:''};
|
||||
const hasIntro=!!peEdit.introName;
|
||||
openSheet(it.name, `<div class="drow"><span>编码</span><b style="font-family:var(--font-mono)">${it.code}</b></div><div class="drow"><span>规格</span><b>${it.spec}</b></div><div class="drow"><span>系列</span><b>${it.series}</b></div><div class="drow"><span>批次号</span><b style="font-family:var(--font-mono)">${it.batch}</b></div><div class="drow"><span>当前库存</span><b>${it.qty} ${it.unit}</b></div><div class="drow"><span>成本价</span><b>${it.cost}</b></div><div class="drow"><span>供应商</span><b>${it.supplier}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b style="display:flex;align-items:center;gap:10px"><span class="badge b-${it.status}">${it.status}</span>${it.status==='已售'?'':`<button class="switch ${it.status==='在售'?'on':''}" aria-label="挂售切换" onclick="this.classList.toggle('on');const b=this.previousElementSibling;const on=this.classList.contains('on');b.textContent=on?'在售':'库存';b.className='badge '+(on?'b-在售':'b-库存');"></button>`}</b></div>
|
||||
openSheet(it.name, `<div class="drow"><span>编码</span><b style="font-family:var(--font-mono)">${it.code}</b></div><div class="drow"><span>规格</span><b>${it.spec}</b></div><div class="drow"><span>系列</span><b>${it.series}</b></div><div class="drow"><span>批次号</span><b style="font-family:var(--font-mono)">${it.batch}</b></div><div class="drow"><span>生产日期</span><b style="font-family:var(--font-mono)">${it.prod}</b></div><div class="drow"><span>当前库存</span><b>${it.qty} ${it.unit}</b></div><div class="drow"><span>成本价</span><b>${it.cost}</b></div><div class="drow"><span>供应商</span><b>${it.supplier}</b></div><div class="drow" style="border-bottom:none"><span>状态</span><b style="display:flex;align-items:center;gap:10px"><span class="badge b-${it.status}">${it.status}</span>${it.status==='已售'?'':`<button class="switch ${it.status==='在售'?'on':''}" aria-label="挂售切换" onclick="this.classList.toggle('on');const b=this.previousElementSibling;const on=this.classList.contains('on');b.textContent=on?'在售':'库存';b.className='badge '+(on?'b-在售':'b-库存');"></button>`}</b></div>
|
||||
<div class="pe-card" style="margin-top:14px"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic27"/></svg></span>商品图片</div>
|
||||
<div class="pe-b"><div class="pe-gallery" id="mGallery"></div><div class="pe-note">建议主图为白底产品图,可再加细节图(瓶身/防伪)与场景图。</div></div></div>
|
||||
<div class="pe-card"><div class="pe-h"><span class="pe-ic"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg></span>商品介绍 / 卖点</div>
|
||||