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

feat(client): 库存表格列头排序 UI——DsSortHeader 点击循环 升/降/无

Browse Source 
- 新组件 DsSortHeader（原型 thead .sh 对照，L1 已登记）：未排序淡箭头暗示
  可排，激活 primary + 方向箭头（↑升/↓降）
- 库存屏 5 列（库存/成本价/总价/生产日期/入库时间）接线，排序走服务端
  全局生效（跨分页），点击循环 无→升→降→无
- 原型 inventory.html COLS sort:true + toggleSort 交互 + atoms .sh 样式登记
- 桌面库存 golden 重录 ×3（列头带排序箭头）

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-07 16:45:39 +08:00
parent e012f6e02b
commit c7f36b2d72
11 changed files with 117 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/prototype/atoms.css
+6
View File
@@ -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);}
.superpowers/prototype/screens/inventory.html
+7 -4
View File
@@ -113,19 +113,19 @@ 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:'状态',filter:'status'},{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.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; }); 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;
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,6 +138,9 @@ 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 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.code='';state.status='全部';state.page=1; document.getElementById('searchInput').value=''; document.getElementById('codeInput').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(); }); }
client/lib/providers/inventory_provider.dart
+11
View File
@@ -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;
client/lib/repositories/inventory_repository.dart
+6
View File
@@ -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(
client/lib/screens/inventory/inventory_list_screen.dart
+39
View File
@@ -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) =>
@@ -939,6 +967,17 @@ class _InventoryListScreenState extends ConsumerState<InventoryListScreen> {
filtered: _statusFilter != '全部',
onOpen: _openStatusMenu,
),
// 可排序列（原型 COLS sort:true，服务端全局排序）
'qty' ||
'cost' ||
'price' ||
'prodDate' ||
'inTime' =>
DsSortHeader(
label: c.label,
ascending: _sortBy == c.key ? _sortAsc : null,
onTap: () => _toggleSort(c.key),
),
_ => null,
};
return DsColumn(c.key, c.label,
client/lib/widgets/ds/ds_table.dart
+44
View File
@@ -479,6 +479,50 @@ class _DsTableState extends State<DsTable> {
}
}
/// 原型 thead th .sh 排序列头（2026-07-07 登记）：label + 方向箭头。
/// 未排序 = 淡 chevron-down 暗示可排；激活整体 primary，asc=↑ / desc=↓。
/// 点击由调用方循环 无→升→降→无（服务端全局排序）。
class DsSortHeader extends StatelessWidget {
final String label;
/// 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 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,
),
),
],
),
);
}
}
/// 原型 thead th .fh 漏斗列头：label + funnel(12, sw1.6)，有筛选值时整体 primary。
/// 点击回调携带列头自身 BuildContext（供 showDsMenu 锚定）。
class DsFilterHeader extends StatelessWidget {
client/test/golden/goldens/inventory_list_a.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 416 KiB

After

Width:  |  Height:  |  Size: 414 KiB

client/test/golden/goldens/inventory_list_b.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 410 KiB

After

Width:  |  Height:  |  Size: 409 KiB

client/test/golden/goldens/inventory_list_c.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 KiB

After

Width:  |  Height:  |  Size: 415 KiB

client/test/golden/product_detail_golden_test.dart
+2
View File
@@ -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 =>
client/test/stock_out_insufficient_stock_flow_test.dart
+2
View File
@@ -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 {