TakeoutSaaS.Prototypes/pages/inv-soldout.html

<!-- 估清管理页 -->
<style>
  .ivs-page { max-width:1000px; display:flex; flex-direction:column; gap:16px; font-size:13px; color:var(--g-text); }

  /* 顶部自动估清卡片 */
  .ivs-auto-card { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .ivs-auto-left { flex:1; min-width:200px; }
  .ivs-auto-title { font-size:15px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
  .ivs-auto-desc { font-size:12px; color:var(--g-text-secondary); }
  .ivs-auto-hint { font-size:12px; color:var(--g-text-muted); margin-top:12px; width:100%; padding-top:10px; border-top:1px solid var(--g-border); display:flex; align-items:center; gap:4px; }

  /* 统计卡片 */
  .ivs-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .ivs-stat-card { background:#fff; border-radius:var(--g-radius); padding:18px 20px; box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); transition:var(--g-transition); }
  .ivs-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
  .ivs-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
  .ivs-stat-label i { width:14px; height:14px; }
  .ivs-stat-value { font-size:28px; font-weight:700; color:var(--g-text); }
  .ivs-stat-value span { font-size:13px; font-weight:400; color:var(--g-text-secondary); margin-left:2px; }
  .ivs-stat-sub { font-size:11px; color:var(--g-text-muted); margin-top:4px; }
  .ivs-stat-card.danger .ivs-stat-value { color:var(--g-danger); }
  .ivs-stat-card.warning .ivs-stat-value { color:var(--g-warning); }

  /* Section 标题 */
  .ivs-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }

  /* 表格微调 */
  .ivs-page .g-table { font-size:13px; }
  .ivs-page .g-table th { background:#f8f9fb; }
  .ivs-page .g-table td { vertical-align:middle; }
  .ivs-dishes { display:flex; flex-wrap:wrap; gap:4px; }
  .ivs-dish-tag { background:color-mix(in srgb, var(--primary) 8%, #fff); color:var(--primary); font-size:11px; padding:2px 8px; border-radius:10px; white-space:nowrap; }
  .ivs-more-tag { background:#f3f4f6; color:var(--g-text-muted); font-size:11px; padding:2px 8px; border-radius:10px; cursor:pointer; }

  /* 手动估清操作区 */
  .ivs-manual-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .ivs-manual-bar select { height:36px; padding:0 12px; border:1px solid #e5e7eb; border-radius:var(--g-radius-sm); font-size:13px; outline:none; min-width:240px; transition:var(--g-transition); }
  .ivs-manual-bar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }

  .ivs-section-desc { font-size:12px; color:var(--g-text-muted); margin-bottom:14px; display:flex; align-items:center; gap:4px; }
  .ivs-section-desc i { width:14px; height:14px; }
</style>

<div class="ivs-page">

  <!-- 顶部：自动估清开关 -->
  <div class="g-card" style="padding:18px 20px;">
    <div class="ivs-auto-card">
      <div class="ivs-auto-left">
        <div class="ivs-auto-title">自动估清</div>
        <div class="ivs-auto-desc">当原料库存为 0 时，自动将关联菜品标记为售罄</div>
      </div>
      <div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div>
    </div>
    <div class="ivs-auto-hint"><i data-lucide="link" style="width:13px;height:13px;"></i>已关联 28 个原料 &rarr; 56 道菜品</div>
  </div>

  <!-- 统计卡片 -->
  <div class="ivs-stats">
    <div class="ivs-stat-card danger">
      <div class="ivs-stat-label"><i data-lucide="ban"></i>当前售罄菜品</div>
      <div class="ivs-stat-value">3<span>道</span></div>
      <div class="ivs-stat-sub">其中自动估清 2 道</div>
    </div>
    <div class="ivs-stat-card warning">
      <div class="ivs-stat-label"><i data-lucide="alert-triangle"></i>低库存预警菜品</div>
      <div class="ivs-stat-value">5<span>道</span></div>
      <div class="ivs-stat-sub">原料即将耗尽</div>
    </div>
    <div class="ivs-stat-card">
      <div class="ivs-stat-label"><i data-lucide="hand"></i>今日手动估清</div>
      <div class="ivs-stat-value">1<span>道</span></div>
      <div class="ivs-stat-sub">操作人：张经理</div>
    </div>
  </div>

  <!-- Section 1: 当前已估清菜品 -->
  <div class="g-card" style="padding:18px 20px;">
    <div class="ivs-section-hd">当前已估清菜品</div>
    <table class="g-table">
      <thead><tr><th>菜品名称</th><th>估清原因</th><th>关联原料</th><th>原料库存</th><th>估清时间</th><th style="width:80px;">操作</th></tr></thead>
      <tbody>
        <tr>
          <td style="font-weight:500;">红烧牛腩</td>
          <td><span class="g-tag g-tag-orange">自动</span></td>
          <td>牛腩</td>
          <td><span style="color:var(--g-danger);font-weight:600;">0 kg</span></td>
          <td>2026-02-12 09:15</td>
          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
        </tr>
        <tr>
          <td style="font-weight:500;">鸡胸肉沙拉</td>
          <td><span class="g-tag g-tag-orange">自动</span></td>
          <td>鸡胸肉</td>
          <td><span style="color:var(--g-warning);font-weight:600;">0.3 kg</span></td>
          <td>2026-02-12 10:30</td>
          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
        </tr>
        <tr>
          <td style="font-weight:500;">芒果冰沙</td>
          <td><span class="g-tag g-tag-blue">手动</span></td>
          <td>—</td>
          <td>—</td>
          <td>2026-02-12 11:00</td>
          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
        </tr>
        <tr>
          <td style="font-weight:500;">牛肉汉堡</td>
          <td><span class="g-tag g-tag-orange">自动</span></td>
          <td>牛腩</td>
          <td><span style="color:var(--g-danger);font-weight:600;">0 kg</span></td>
          <td>2026-02-12 09:15</td>
          <td><span class="g-action" onclick="alert('已恢复上架')">恢复上架</span></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Section 2: 原料→菜品关联映射 -->
  <div class="g-card" style="padding:18px 20px;">
    <div class="ivs-section-hd">原料 &rarr; 菜品关联映射</div>
    <div class="ivs-section-desc"><i data-lucide="info"></i>设置原料与菜品的关联关系，当原料库存归零时自动估清关联菜品</div>
    <table class="g-table">
      <thead><tr><th>原料名称</th><th>当前库存</th><th>安全库存</th><th>关联菜品数</th><th>关联菜品</th><th style="width:80px;">自动估清</th></tr></thead>
      <tbody>
        <tr>
          <td style="font-weight:500;">牛腩</td>
          <td><span style="color:var(--g-danger);font-weight:600;">0 kg</span></td>
          <td>5 kg</td>
          <td>3</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">红烧牛腩</span><span class="ivs-dish-tag">牛肉汉堡</span><span class="ivs-more-tag">+1</span></div></td>
          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
        <tr>
          <td style="font-weight:500;">鸡胸肉</td>
          <td><span style="color:var(--g-warning);font-weight:600;">0.3 kg</span></td>
          <td>3 kg</td>
          <td>2</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">鸡胸肉沙拉</span><span class="ivs-dish-tag">照烧鸡排饭</span></div></td>
          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
        <tr>
          <td style="font-weight:500;">三文鱼</td>
          <td>2.5 kg</td>
          <td>2 kg</td>
          <td>2</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">三文鱼刺身</span><span class="ivs-dish-tag">三文鱼寿司</span></div></td>
          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
        <tr>
          <td style="font-weight:500;">芒果</td>
          <td>8 个</td>
          <td>5 个</td>
          <td>3</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">芒果冰沙</span><span class="ivs-dish-tag">杨枝甘露</span><span class="ivs-more-tag">+1</span></div></td>
          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
        <tr>
          <td style="font-weight:500;">虾仁</td>
          <td>1.2 kg</td>
          <td>2 kg</td>
          <td>4</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">虾仁炒饭</span><span class="ivs-dish-tag">鲜虾云吞</span><span class="ivs-more-tag">+2</span></div></td>
          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
        <tr>
          <td style="font-weight:500;">豆腐</td>
          <td>15 块</td>
          <td>10 块</td>
          <td>2</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">麻婆豆腐</span><span class="ivs-dish-tag">皮蛋豆腐</span></div></td>
          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
        <tr>
          <td style="font-weight:500;">培根</td>
          <td>3 kg</td>
          <td>2 kg</td>
          <td>3</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">培根披萨</span><span class="ivs-dish-tag">培根意面</span><span class="ivs-more-tag">+1</span></div></td>
          <td><div class="g-toggle" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
        <tr>
          <td style="font-weight:500;">鳗鱼</td>
          <td>1 kg</td>
          <td>1.5 kg</td>
          <td>1</td>
          <td><div class="ivs-dishes"><span class="ivs-dish-tag">鳗鱼饭</span></div></td>
          <td><div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-dot"></div></div></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Section 3: 手动估清 -->
  <div class="g-card" style="padding:18px 20px;">
    <div class="ivs-section-hd">手动估清</div>
    <div class="ivs-manual-bar" style="margin-bottom:16px;">
      <select>
        <option value="">请选择要估清的菜品...</option>
        <option>宫保鸡丁</option>
        <option>鱼香肉丝</option>
        <option>水煮牛肉</option>
        <option>糖醋排骨</option>
        <option>蒜蓉西兰花</option>
        <option>番茄鸡蛋汤</option>
      </select>
      <button class="g-btn g-btn-primary g-btn-sm" onclick="handleManualSoldout()"><i data-lucide="x-circle" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>标记售罄</button>
    </div>

    <div style="font-size:12px;color:var(--g-text-muted);margin-bottom:10px;">今日手动估清记录</div>
    <table class="g-table">
      <thead><tr><th>菜品</th><th>操作人</th><th>时间</th><th style="width:80px;">操作</th></tr></thead>
      <tbody id="manualRecords">
        <tr>
          <td style="font-weight:500;">芒果冰沙</td>
          <td>张经理</td>
          <td>2026-02-12 11:00</td>
          <td><span class="g-action" onclick="alert('已恢复上架')">恢复</span></td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

<script>
function toggleSwitch(el) {
  el.classList.toggle('on');
}

function handleManualSoldout() {
  var sel = document.querySelector('.ivs-manual-bar select');
  var name = sel.value;
  if (!name) { alert('请先选择菜品'); return; }
  var tbody = document.getElementById('manualRecords');
  var now = new Date();
  var ts = now.getFullYear() + '-' +
    String(now.getMonth()+1).padStart(2,'0') + '-' +
    String(now.getDate()).padStart(2,'0') + ' ' +
    String(now.getHours()).padStart(2,'0') + ':' +
    String(now.getMinutes()).padStart(2,'0');
  var tr = document.createElement('tr');
  tr.innerHTML = '<td style="font-weight:500;">' + name + '</td><td>当前用户</td><td>' + ts + '</td><td><span class="g-action" onclick="alert(\'已恢复上架\')">恢复</span></td>';
  tbody.insertBefore(tr, tbody.firstChild);
  sel.value = '';
  alert('已将「' + name + '」标记为售罄');
}

if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>