zkxw/docs/unused-material-demos/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登记未用完物料 · 弹窗样式选型</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="_shared.css" />
  </head>
  <body>
    <div class="index-hero">
      <h1>登记未用完物料 · 弹窗样式 Demo</h1>
      <p>
        针对【库存盘点 → 登记未用完】弹窗，当前实现为每行一张 5 列栅格卡片（17+ 字段、28px
        控件），多条时密集难填。以下 5 套方案对齐 Fresh Mint（<code>#10b981</code>），模拟
        10 条明细，侧重<strong>批量登记效率</strong>与<strong>视觉层次</strong>。选定后可落地到
        <code>QcMaterialStockCheckTab.vue</code>。
      </p>
    </div>

    <div class="index-grid">
      <a class="index-card" href="01-inline-table.html">
        <h2>01 · 可编辑表格</h2>
        <p>固定表头 + 横向滚动；批次信息只读列 + 核心字段 inline 编辑。类似 Excel，适合 10～50 条快速扫填。</p>
        <span class="card-tag card-tag--rec">推荐 · 批量效率最高</span>
        <div class="preview-strip">| # | 物料 | 批号 | … | 数量▾ | 持有人 | × |</div>
      </a>

      <a class="index-card" href="02-split-panel.html">
        <h2>02 · 左右分栏</h2>
        <p>左侧紧凑列表（可搜索）+ 右侧完整表单。一次专注编辑一条，字段清晰，适合需要核对全部信息的场景。</p>
        <span class="card-tag card-tag--rec">推荐 · 单条精度高</span>
        <div class="preview-strip">[列表 40%] | [详情表单 60%]</div>
      </a>

      <a class="index-card" href="03-collapsible.html">
        <h2>03 · 折叠摘要行</h2>
        <p>默认一行摘要 + 行内改数量；点击展开完整字段。兼顾扫视与深度编辑，改动量适中。</p>
        <span class="card-tag">平衡方案</span>
        <div class="preview-strip">▸ 胎牛血清 · 2瓶 · 张三 [展开]</div>
      </a>

      <a class="index-card" href="04-quick-add.html">
        <h2>04 · 检索优先 + 精简表</h2>
        <p>顶部突出批次检索添加入口；表格仅保留 6～8 列核心字段，手工登记走侧滑/弹层。</p>
        <span class="card-tag">批次驱动工作流</span>
        <div class="preview-strip">🔍 检索批次并添加 → 精简表格</div>
      </a>

      <a class="index-card" href="05-current-baseline.html">
        <h2>05 · 现状基线（优化版）</h2>
        <p>保留卡片栅格结构，加大控件、分区展示批次/登记字段，便于与现实现状对比。</p>
        <span class="card-tag">现状对照</span>
        <div class="preview-strip">[卡片] 6列栅格 × N 行（当前方案）</div>
      </a>
    </div>
  </body>
</html>