docs(design): 移动出入库工具栏全图标化(新增去文字、状态去文字箭头)

- 新增按钮只留 + 图标(primary 方钮,title 提示)
- 状态筛选改纯图标钮:默认漏斗,选中某状态后按钮图标切换为该状态的
  BADGE_ICON 代表图标并转 primary 高亮,取消回漏斗 ghost

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 09:57:41 +08:00
parent 6cadc276bd
commit 0d43c43c29
2 changed files with 10 additions and 10 deletions
@@ -22,9 +22,9 @@
<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="m-select" id="stSel" style="height:auto;flex:none" onclick="openStatusSheet()"><span id="stVal">全部</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></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" onclick="location.href='m-stock-in.html'"><svg viewBox="0 0 24 24"><use href="#i-plus"/></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>
@@ -79,9 +79,9 @@ function filtered(){ return ORDERS.filter(o=>{
return true; }); }
function render(){
const n=advCount();
document.getElementById('stVal').textContent=state.status;
document.getElementById('stSel').style.borderColor=state.status==='全部'?'':'var(--primary)';
document.getElementById('stSel').style.color=state.status==='全部'?'':'var(--primary)';
document.getElementById('stIcon').innerHTML='<use href="#'+(state.status==='全部'?'i-ic22':STICON[state.status])+'"/>';
const ss=document.getElementById('stSel');
ss.classList.toggle('primary',state.status!=='全部'); ss.classList.toggle('ghost',state.status==='全部');
const ab=document.getElementById('advBtn');
ab.classList.toggle('primary',n>0); ab.classList.toggle('ghost',n===0);
const rows=filtered();
@@ -22,9 +22,9 @@
<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="m-select" id="stSel" style="height:auto;flex:none" onclick="openStatusSheet()"><span id="stVal">全部</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></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" onclick="location.href='m-stock-out.html'"><svg viewBox="0 0 24 24"><use href="#i-plus"/></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>
@@ -78,9 +78,9 @@ function filtered(){ return ORDERS.filter(o=>{
return true; }); }
function render(){
const n=advCount();
document.getElementById('stVal').textContent=state.status;
document.getElementById('stSel').style.borderColor=state.status==='全部'?'':'var(--primary)';
document.getElementById('stSel').style.color=state.status==='全部'?'':'var(--primary)';
document.getElementById('stIcon').innerHTML='<use href="#'+(state.status==='全部'?'i-ic22':STICON[state.status])+'"/>';
const ss=document.getElementById('stSel');
ss.classList.toggle('primary',state.status!=='全部'); ss.classList.toggle('ghost',state.status==='全部');
const ab=document.getElementById('advBtn');
ab.classList.toggle('primary',n>0); ab.classList.toggle('ghost',n===0);
const rows=filtered();