feat(client): 库存三态 UI——抽屉挂售 switch + 三态徽章/筛选/已售 KPI 卡

- 新组件 DsSwitch（原型 atoms .switch 对照，L1 已登记：38×22 pill，on=primary）
- 商品抽屉状态行：三态徽章后跟挂售 switch（在售⇄库存 即时生效，已售只读，
  readonly 禁用），桌面 drawer / 移动 sheet 同组件
- 列表状态列/卡片徽章三态化（在售绿/库存蓝/已售灰，icons BADGE_ICON 补两词）；
  状态筛选改「全部/在售/库存/已售」走服务端；预警缺货退出状态维度由数量染色承担
- KPI 第四卡「缺货预警」→「已售」（sold_count，点击筛选已售）
- 原型同步：atoms/index 登记 switch 与 b-库存/b-已售、inventory 两屏三态数据、
  抽屉状态行 switch；12 道 ds 闸 + L1 同源闸全过
- golden 重录 ×9（三态徽章 + 已售卡形态）

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o

.superpowers/prototype/atoms.css

@@ -32,6 +32,13 @@ svg{fill:none; stroke:currentColor;}
 .searchbox svg{width:14px; height:14px; stroke-width:2; color:var(--faint); flex:none;}
 .searchbox input{border:none; background:transparent; outline:none; font-size:var(--fs-body); color:var(--text); width:100%; font-family:var(--font);}
 .searchbox input::placeholder{color:var(--faint);}
+/* ---- Switch 开关（2026-07-07 新增：库存⇄在售 挂售切换等布尔即时生效场景） ----
+   38×22 pill 轨道 + 18px 圆点滑块；on=primary，off=border；disabled 半透明。 */
+.switch{position:relative; width:38px; height:22px; border-radius:var(--r-pill); background:var(--border); border:none; padding:0; cursor:pointer; transition:background-color .18s; flex:none;}
+.switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:var(--sh-1); transition:transform .18s;}
+.switch.on{background:var(--primary);}
+.switch.on::after{transform:translateX(16px);}
+.switch:disabled{opacity:.45; cursor:default;}
 
 /* ---- 日期字段（触发器）+ 滚轮日期选择器（年月日，单据/生产/明细共用） ---- */
 .datefield{height:38px; width:100%; box-sizing:border-box; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:0 11px; display:flex; align-items:center; gap:8px; cursor:pointer; outline:none; transition:border-color .15s,box-shadow .15s;}
@@ -79,6 +86,9 @@ svg{fill:none; stroke:currentColor;}
 .b-在售{background:var(--success-bg); color:var(--success);}
 .b-缺货{background:var(--danger-bg); color:var(--danger);}
 .b-预警{background:var(--warn-bg); color:var(--warn);}
+/* 库存三态（2026-07-07 落库）：库存=在库不公开 / 已售=卖光留痕 */
+.b-库存{background:var(--info-soft); color:var(--primary);}
+.b-已售{background:var(--border-subtle); color:var(--muted);}
 /* 单据状态 */
 .b-草稿{background:var(--info-soft); color:var(--muted);}
 .b-待审核{background:var(--warn-bg); color:var(--warn);}