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

docs(design): 移动出入库回归纯文字工具栏与徽章（用户拍板），搜索行移至 KPI 下

Browse Source 
- 新增（+）按钮移除：移动端暂不支持建单
- 搜索/状态/详细搜索 一行移到 KPI 卡之下；状态与详细搜索改纯文字按钮
  （无图标无箭头，选中/激活转 primary，详细搜索带条件计数）
- 卡片徽章弃纯图标圆钮，改纯文字 .bi 徽章（无圆点无图标，可换行右对齐）；
  详情 sheet 徽章同步纯文字；卡片右侧 › 箭头移除
- 全局 BADGE_ICON 图标化机制保留（桌面端及其他屏不受影响，.bi 自动跳过）

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-04 10:04:42 +08:00
parent 6e19373382
commit 5036c0ba42
2 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/prototype/screens/m-stock-in-list.html
+12 -14
View File
@@ -20,18 +20,17 @@
<div class="m-top" data-m-top data-title="入库管理"></div>
<div class="m-page has-tabs">
<div class="m-scroll">
<div style="display:flex;gap:8px;align-items:stretch;margin-bottom:10px">
<div class="m-search" style="flex:1;min-width:0"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="搜索单号 / 供应商 / 酒名" oninput="state.q=this.value;render()"></div>
<div class="btn ghost" id="stSel" style="height:auto;flex:none;padding:0 12px" onclick="openStatusSheet()" title="状态筛选"><svg viewBox="0 0 24 24" id="stIcon"><use href="#i-ic22"/></svg></div>
<div class="btn ghost" id="advBtn" style="height:auto;flex:none;padding:0 12px" onclick="openAdv()" title="详细搜索"><svg viewBox="0 0 24 24"><use href="#i-ic21"/></svg></div>
<div class="btn primary" style="height:auto;flex:none;padding:0 12px" onclick="location.href='m-stock-in.html'" title="新增"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
</div>
<div class="m-kpi" style="margin-bottom:10px">
<div class="k" onclick="setSt('全部')"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg>近30天入库笔数</div><div class="kv">28</div><div class="kd up">▲ 12% 较上期</div></div>
<div class="k"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg>近30天入库金额</div><div class="kv">¥186万</div><div class="kd up">▲ 8.4% 较上期</div></div>
<div class="k" onclick="setSt('待审核')"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg>待审核 · 点击筛选</div><div class="kv">4</div><div class="kd warn">需尽快处理</div></div>
<div class="k" onclick="setSt('草稿')"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg>草稿 · 点击筛选</div><div class="kv">2</div><div class="kd">待提交审核</div></div>
</div>
<div style="display:flex;gap:8px;align-items:stretch;margin:10px 0">
<div class="m-search" style="flex:1;min-width:0"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="搜索单号 / 供应商 / 酒名" oninput="state.q=this.value;render()"></div>
<div class="btn ghost" id="stSel" style="height:auto;flex:none" onclick="openStatusSheet()"><span id="stVal">全部</span></div>
<div class="btn ghost" id="advBtn" style="height:auto;flex:none" onclick="openAdv()"><span id="advTxt">详细搜索</span></div>
</div>
<div class="m-section" id="cnt">入库单</div>
<div id="list"></div>
</div>
@@ -57,10 +56,9 @@ const OPS=['全部','王经理','李采购'];
const REVIEWERS=['全部','张主管','王经理'];
const DATES=['全部时间','近 7 天','近 30 天','本月'];
const state={q:'',status:'全部'};
/* ---- 状态代表图标（徽章图标化 2026-07-04：移动纯图标 .ico / 桌面图标+文字 .bi） ---- */
const STICON={'草稿':'i-ic06','待审核':'i-ic04','已审核':'i-check','已拒绝':'i-close','部分退单':'i-undo','已退单':'i-undo','待定价':'i-yen'};
function icoB(v){ return `<span class="badge ico b-${v}" title="${v}"><svg class="ic"><use href="#${STICON[v]}"/></svg></span>`; }
function biB(v){ return `<span class="badge bi b-${v}"><svg class="ic"><use href="#${STICON[v]}"/></svg>${v}</span>`; }
/* ---- 徽章：纯文字（2026-07-04 用户拍板移动端不用图标；.bi 抑制圆点，enhancer 跳过） ---- */
function icoB(v){ return `<span class="badge bi b-${v}">${v}</span>`; }
function biB(v){ return `<span class="badge bi b-${v}">${v}</span>`; }
/* ---- 详细搜索条件（与 Flutter _AdvSearchDialog 同一字段集，移动为竖排简化版） ---- */
const ADV_DEF={no:'',product:'',batch:'',party:'全部',series:'全部',spec:'全部',op:'全部',reviewer:'全部',status:'全部',date:'全部时间'};
let adv={...ADV_DEF};
@@ -79,9 +77,10 @@ function filtered(){ return ORDERS.filter(o=>{
return true; }); }
function render(){
const n=advCount();
document.getElementById('stIcon').innerHTML='<use href="#'+(state.status==='全部'?'i-ic22':STICON[state.status])+'"/>';
document.getElementById('stVal').textContent=state.status;
const ss=document.getElementById('stSel');
ss.classList.toggle('primary',state.status!=='全部'); ss.classList.toggle('ghost',state.status==='全部');
document.getElementById('advTxt').textContent='详细搜索'+(n?' · '+n:'');
const ab=document.getElementById('advBtn');
ab.classList.toggle('primary',n>0); ab.classList.toggle('ghost',n===0);
const rows=filtered();
@@ -91,8 +90,7 @@ function render(){
L.innerHTML=rows.map(o=>`<a class="m-card" onclick="openOrder('${o.no}')">
<div class="m-row">
<div class="mc-main"><div class="mc-nm">${o.no}</div><div class="mc-sub">${o.party} · ${o.items} 项</div></div>
<div class="mc-right"><div style="display:flex;gap:5px">${icoB(o.status)}${o.ret?icoB(o.ret):''}${o.pending?icoB('待定价'):''}</div><span class="mc-amt">${o.amount}</span></div>
<div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
<div class="mc-right"><div style="display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end">${icoB(o.status)}${o.ret?icoB(o.ret):''}${o.pending?icoB('待定价'):''}</div><span class="mc-amt">${o.amount}</span></div>
</div>
<div class="mc-foot"><svg width="13" height="13" viewBox="0 0 24 24" stroke-width="1.9" style="color:var(--muted)"><use href="#i-info"/></svg>${o.date} · 经手人 ${o.by}${o.auditor?' · 审核 '+o.auditor:''}</div>
</a>`).join('');
@@ -100,7 +98,7 @@ function render(){
function setSt(s){ state.status=s; render(); }
/* ---- 状态下拉（底部选项 sheet） ---- */
function openStatusSheet(){
openSheet('状态筛选', ST.map(s=>`<div class="m-opt ${s===state.status?'sel':''}" onclick="setSt('${s}');closeSheet()">${s!=='全部'?`<span class="badge ico b-${s}"><svg class="ic"><use href="#${STICON[s]}"/></svg></span>`:''}${s}<svg class="ck" viewBox="0 0 24 24"><use href="#i-check"/></svg></div>`).join(''));
openSheet('状态筛选', ST.map(s=>`<div class="m-opt ${s===state.status?'sel':''}" onclick="setSt('${s}');closeSheet()">${s}<svg class="ck" viewBox="0 0 24 24"><use href="#i-check"/></svg></div>`).join(''));
}
/* ==================== 详细搜索（底部 sheet，竖排单列） ==================== */
.superpowers/prototype/screens/m-stock-out-list.html
+12 -14
View File
@@ -20,18 +20,17 @@
<div class="m-top" data-m-top data-title="出库管理"></div>
<div class="m-page has-tabs">
<div class="m-scroll">
<div style="display:flex;gap:8px;align-items:stretch;margin-bottom:10px">
<div class="m-search" style="flex:1;min-width:0"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="搜索单号 / 客户 / 酒名" oninput="state.q=this.value;render()"></div>
<div class="btn ghost" id="stSel" style="height:auto;flex:none;padding:0 12px" onclick="openStatusSheet()" title="状态筛选"><svg viewBox="0 0 24 24" id="stIcon"><use href="#i-ic22"/></svg></div>
<div class="btn ghost" id="advBtn" style="height:auto;flex:none;padding:0 12px" onclick="openAdv()" title="详细搜索"><svg viewBox="0 0 24 24"><use href="#i-ic21"/></svg></div>
<div class="btn primary" style="height:auto;flex:none;padding:0 12px" onclick="location.href='m-stock-out.html'" title="新增"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
</div>
<div class="m-kpi" style="margin-bottom:10px">
<div class="k" onclick="setSt('全部')"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg>近30天出库笔数</div><div class="kv">35</div><div class="kd up">▲ 9.2% 较上期</div></div>
<div class="k"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg>近30天出库金额</div><div class="kv">¥216万</div><div class="kd up">▲ 6.8% 较上期</div></div>
<div class="k" onclick="setSt('待审核')"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg>待审核 · 点击筛选</div><div class="kv">3</div><div class="kd warn">需尽快处理</div></div>
<div class="k" onclick="setSt('草稿')"><div class="kl"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg>草稿 · 点击筛选</div><div class="kv">1</div><div class="kd">待提交审核</div></div>
</div>
<div style="display:flex;gap:8px;align-items:stretch;margin:10px 0">
<div class="m-search" style="flex:1;min-width:0"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="q" placeholder="搜索单号 / 客户 / 酒名" oninput="state.q=this.value;render()"></div>
<div class="btn ghost" id="stSel" style="height:auto;flex:none" onclick="openStatusSheet()"><span id="stVal">全部</span></div>
<div class="btn ghost" id="advBtn" style="height:auto;flex:none" onclick="openAdv()"><span id="advTxt">详细搜索</span></div>
</div>
<div class="m-section" id="cnt">出库单</div>
<div id="list"></div>
</div>
@@ -56,10 +55,9 @@ const OPS=['全部','王经理','李销售'];
const REVIEWERS=['全部','张主管','王经理'];
const DATES=['全部时间','近 7 天','近 30 天','本月'];
const state={q:'',status:'全部'};
/* ---- 状态代表图标（徽章图标化 2026-07-04：移动纯图标 .ico / 桌面图标+文字 .bi） ---- */
const STICON={'草稿':'i-ic06','待审核':'i-ic04','已审核':'i-check','已拒绝':'i-close','部分退单':'i-undo','已退单':'i-undo','待定价':'i-yen'};
function icoB(v){ return `<span class="badge ico b-${v}" title="${v}"><svg class="ic"><use href="#${STICON[v]}"/></svg></span>`; }
function biB(v){ return `<span class="badge bi b-${v}"><svg class="ic"><use href="#${STICON[v]}"/></svg>${v}</span>`; }
/* ---- 徽章：纯文字（2026-07-04 用户拍板移动端不用图标；.bi 抑制圆点，enhancer 跳过） ---- */
function icoB(v){ return `<span class="badge bi b-${v}">${v}</span>`; }
function biB(v){ return `<span class="badge bi b-${v}">${v}</span>`; }
/* ---- 详细搜索条件（与 Flutter _AdvancedSearchDialog 同一字段集，移动为竖排简化版） ---- */
const ADV_DEF={no:'',product:'',batch:'',party:'全部',series:'全部',spec:'全部',op:'全部',reviewer:'全部',status:'全部',date:'全部时间'};
let adv={...ADV_DEF};
@@ -78,9 +76,10 @@ function filtered(){ return ORDERS.filter(o=>{
return true; }); }
function render(){
const n=advCount();
document.getElementById('stIcon').innerHTML='<use href="#'+(state.status==='全部'?'i-ic22':STICON[state.status])+'"/>';
document.getElementById('stVal').textContent=state.status;
const ss=document.getElementById('stSel');
ss.classList.toggle('primary',state.status!=='全部'); ss.classList.toggle('ghost',state.status==='全部');
document.getElementById('advTxt').textContent='详细搜索'+(n?' · '+n:'');
const ab=document.getElementById('advBtn');
ab.classList.toggle('primary',n>0); ab.classList.toggle('ghost',n===0);
const rows=filtered();
@@ -90,8 +89,7 @@ function render(){
L.innerHTML=rows.map(o=>`<a class="m-card" onclick="openOrder('${o.no}')">
<div class="m-row">
<div class="mc-main"><div class="mc-nm">${o.no}</div><div class="mc-sub">${o.party} · ${o.items} 项</div></div>
<div class="mc-right"><div style="display:flex;gap:5px">${icoB(o.status)}${o.ret?icoB(o.ret):''}${o.pending?icoB('待定价'):''}</div><span class="mc-amt">${o.amount}</span></div>
<div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div>
<div class="mc-right"><div style="display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end">${icoB(o.status)}${o.ret?icoB(o.ret):''}${o.pending?icoB('待定价'):''}</div><span class="mc-amt">${o.amount}</span></div>
</div>
<div class="mc-foot"><svg width="13" height="13" viewBox="0 0 24 24" stroke-width="1.9" style="color:var(--muted)"><use href="#i-info"/></svg>${o.date} · 经手人 ${o.by}${o.auditor?' · 审核 '+o.auditor:''}</div>
</a>`).join('');
@@ -99,7 +97,7 @@ function render(){
function setSt(s){ state.status=s; render(); }
/* ---- 状态下拉（底部选项 sheet） ---- */
function openStatusSheet(){
openSheet('状态筛选', ST.map(s=>`<div class="m-opt ${s===state.status?'sel':''}" onclick="setSt('${s}');closeSheet()">${s!=='全部'?`<span class="badge ico b-${s}"><svg class="ic"><use href="#${STICON[s]}"/></svg></span>`:''}${s}<svg class="ck" viewBox="0 0 24 24"><use href="#i-check"/></svg></div>`).join(''));
openSheet('状态筛选', ST.map(s=>`<div class="m-opt ${s===state.status?'sel':''}" onclick="setSt('${s}');closeSheet()">${s}<svg class="ck" viewBox="0 0 24 24"><use href="#i-check"/></svg></div>`).join(''));
}
/* ==================== 详细搜索（底部 sheet，竖排单列） ==================== */