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

- 新组件 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

.superpowers/prototype/atoms.css

@@ -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

@@ -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(); }); }