TakeoutSaaS.Prototypes/pages/fin-reports.html

<!-- 经营报表 — fin-reports.html -->
<style>
  /* ---- page-private: frp- prefix ---- */
  .frp-toolbar {
    background: #fff; border-radius: var(--g-radius); padding: 16px 20px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
  }
  .frp-toolbar-right { margin-left: auto; display: flex; gap: 8px; }

  .frp-table-card {
    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
    margin-top: 12px; overflow: hidden;
  }
  .frp-table-card .g-table th { white-space: nowrap; }
  .frp-table-card .g-table td { vertical-align: middle; white-space: nowrap; }
  .frp-amount { font-weight: 600; }

  /* 预览抽屉 */
  .frp-drawer { width: 560px; }

  /* 抽屉内区块 */
  .frp-section { margin-bottom: 22px; }
  .frp-section-hd {
    font-size: 15px; font-weight: 600; color: var(--g-text);
    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
  }

  /* 关键指标网格 */
  .frp-kpi-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  }
  .frp-kpi-item {
    background: #f8f9fb; border-radius: var(--g-radius-sm); padding: 14px 16px;
    border: 1px solid var(--g-border);
  }
  .frp-kpi-label { font-size: 12px; color: var(--g-text-muted); margin-bottom: 6px; }
  .frp-kpi-val { font-size: 20px; font-weight: 700; color: var(--g-text); }
  .frp-kpi-change { font-size: 12px; margin-top: 4px; display: flex; gap: 8px; }
  .frp-kpi-up { color: var(--g-success); }
  .frp-kpi-down { color: var(--g-danger); }

  /* 明细行 */
  .frp-detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px;
  }
  .frp-detail-row:last-child { border-bottom: none; }
  .frp-detail-name { color: var(--g-text); }
  .frp-detail-right { display: flex; gap: 16px; align-items: center; }
  .frp-detail-amount { font-weight: 600; color: var(--g-text); min-width: 80px; text-align: right; }
  .frp-detail-pct { color: var(--g-text-muted); font-size: 12px; min-width: 50px; text-align: right; }

  .frp-divider { height: 1px; background: linear-gradient(90deg, var(--g-border), transparent); margin: 20px 0; }
</style>

<!-- 顶部工具栏 -->
<div class="frp-toolbar">
  <!-- 分段控制器 -->
  <div class="g-seg">
    <div class="g-seg-item active" onclick="switchFrpTab(this,'daily')">日报</div>
    <div class="g-seg-item" onclick="switchFrpTab(this,'weekly')">周报</div>
    <div class="g-seg-item" onclick="switchFrpTab(this,'monthly')">月报</div>
  </div>
  <select class="g-select" style="width:200px;">
    <option>全部门店</option>
    <option>老三家外卖（朝阳店）</option>
    <option>老三家外卖（海淀店）</option>
    <option>老三家外卖（望京店）</option>
  </select>
  <div class="frp-toolbar-right">
    <button class="g-btn g-btn-sm"><i data-lucide="download" style="width:14px;height:14px;"></i> 批量导出</button>
  </div>
</div>

<!-- ========== 日报 Tab ========== -->
<div id="frpTabDaily" class="frp-tab-panel">
  <div class="frp-table-card">
    <table class="g-table">
      <thead>
        <tr>
          <th>日期</th><th>营业额</th><th>订单数</th><th>客单价</th><th>退款率</th><th>成本总额</th><th>净利润</th><th>利润率</th><th>状态</th><th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>2026-02-12</td><td class="frp-amount">&yen;8,620</td><td>186单</td><td>&yen;46.3</td><td>7.4%</td><td>&yen;5,280</td><td class="frp-amount" style="color:var(--g-success);">&yen;3,340</td><td>38.7%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月12日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2026-02-11</td><td class="frp-amount">&yen;9,150</td><td>198单</td><td>&yen;46.2</td><td>5.2%</td><td>&yen;5,610</td><td class="frp-amount" style="color:var(--g-success);">&yen;3,540</td><td>38.7%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月11日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2026-02-10</td><td class="frp-amount">&yen;7,830</td><td>172单</td><td>&yen;45.5</td><td>6.1%</td><td>&yen;4,920</td><td class="frp-amount" style="color:var(--g-success);">&yen;2,910</td><td>37.2%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月10日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2026-02-09</td><td class="frp-amount">&yen;10,240</td><td>221单</td><td>&yen;46.3</td><td>4.8%</td><td>&yen;6,150</td><td class="frp-amount" style="color:var(--g-success);">&yen;4,090</td><td>39.9%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月9日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2026-02-08</td><td class="frp-amount">&yen;11,380</td><td>245单</td><td>&yen;46.4</td><td>3.9%</td><td>&yen;6,830</td><td class="frp-amount" style="color:var(--g-success);">&yen;4,550</td><td>40.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月8日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2026-02-07</td><td class="frp-amount">&yen;10,560</td><td>228单</td><td>&yen;46.3</td><td>5.7%</td><td>&yen;6,440</td><td class="frp-amount" style="color:var(--g-success);">&yen;4,120</td><td>39.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月7日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2026-02-06</td><td class="frp-amount">&yen;8,970</td><td>194单</td><td>&yen;46.2</td><td>6.3%</td><td>&yen;5,490</td><td class="frp-amount" style="color:var(--g-success);">&yen;3,480</td><td>38.8%</td><td><span class="g-tag g-tag-blue">生成中</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月6日 经营日报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
      </tbody>
    </table>
  </div>
  <div class="g-pagination">
    <button class="g-page-btn">&lt;</button>
    <button class="g-page-btn active">1</button>
    <button class="g-page-btn">2</button>
    <button class="g-page-btn">3</button>
    <button class="g-page-btn">4</button>
    <button class="g-page-btn">&gt;</button>
  </div>
</div>

<!-- ========== 周报 Tab ========== -->
<div id="frpTabWeekly" class="frp-tab-panel" style="display:none;">
  <div class="frp-table-card">
    <table class="g-table">
      <thead>
        <tr>
          <th>日期</th><th>营业额</th><th>订单数</th><th>客单价</th><th>退款率</th><th>成本总额</th><th>净利润</th><th>利润率</th><th>状态</th><th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>02-10 ~ 02-16</td><td class="frp-amount">&yen;62,450</td><td>1,348单</td><td>&yen;46.3</td><td>5.8%</td><td>&yen;38,120</td><td class="frp-amount" style="color:var(--g-success);">&yen;24,330</td><td>39.0%</td><td><span class="g-tag g-tag-blue">生成中</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第7周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>02-03 ~ 02-09</td><td class="frp-amount">&yen;68,750</td><td>1,486单</td><td>&yen;46.3</td><td>4.9%</td><td>&yen;41,250</td><td class="frp-amount" style="color:var(--g-success);">&yen;27,500</td><td>40.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第6周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>01-27 ~ 02-02</td><td class="frp-amount">&yen;59,320</td><td>1,282单</td><td>&yen;46.3</td><td>6.2%</td><td>&yen;36,780</td><td class="frp-amount" style="color:var(--g-success);">&yen;22,540</td><td>38.0%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第5周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>01-20 ~ 01-26</td><td class="frp-amount">&yen;55,180</td><td>1,192单</td><td>&yen;46.3</td><td>5.5%</td><td>&yen;34,410</td><td class="frp-amount" style="color:var(--g-success);">&yen;20,770</td><td>37.6%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年第4周 经营周报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
      </tbody>
    </table>
  </div>
  <div class="g-pagination">
    <button class="g-page-btn">&lt;</button>
    <button class="g-page-btn active">1</button>
    <button class="g-page-btn">2</button>
    <button class="g-page-btn">&gt;</button>
  </div>
</div>

<!-- ========== 月报 Tab ========== -->
<div id="frpTabMonthly" class="frp-tab-panel" style="display:none;">
  <div class="frp-table-card">
    <table class="g-table">
      <thead>
        <tr>
          <th>日期</th><th>营业额</th><th>订单数</th><th>客单价</th><th>退款率</th><th>成本总额</th><th>净利润</th><th>利润率</th><th>状态</th><th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>2026年2月</td><td class="frp-amount">&yen;131,200</td><td>2,834单</td><td>&yen;46.3</td><td>5.4%</td><td>&yen;79,370</td><td class="frp-amount" style="color:var(--g-success);">&yen;51,830</td><td>39.5%</td><td><span class="g-tag g-tag-blue">生成中</span></td><td><a class="g-action" onclick="openFrpPreview('2026年2月 经营月报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2026年1月</td><td class="frp-amount">&yen;278,600</td><td>6,022单</td><td>&yen;46.3</td><td>5.1%</td><td>&yen;170,150</td><td class="frp-amount" style="color:var(--g-success);">&yen;108,450</td><td>38.9%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2026年1月 经营月报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
        <tr><td>2025年12月</td><td class="frp-amount">&yen;265,400</td><td>5,736单</td><td>&yen;46.3</td><td>5.6%</td><td>&yen;163,920</td><td class="frp-amount" style="color:var(--g-success);">&yen;101,480</td><td>38.2%</td><td><span class="g-tag g-tag-green">已生成</span></td><td><a class="g-action" onclick="openFrpPreview('2025年12月 经营月报')">预览</a> <a class="g-action">下载PDF</a> <a class="g-action">下载Excel</a></td></tr>
      </tbody>
    </table>
  </div>
  <div class="g-pagination">
    <button class="g-page-btn">&lt;</button>
    <button class="g-page-btn active">1</button>
    <button class="g-page-btn">2</button>
    <button class="g-page-btn">&gt;</button>
  </div>
</div>

<!-- ========== 预览抽屉 ========== -->
<div class="g-drawer-mask" id="frpDrawerMask" onclick="closeFrpPreview()"></div>
<div class="g-drawer frp-drawer" id="frpDrawer">
  <div class="g-drawer-hd">
    <span class="g-drawer-title" id="frpDrawerTitle">2026年2月12日 经营日报</span>
    <button class="g-drawer-close" onclick="closeFrpPreview()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
  </div>
  <div class="g-drawer-bd">

    <!-- 关键指标 -->
    <div class="frp-section">
      <div class="frp-section-hd">关键指标</div>
      <div class="frp-kpi-grid">
        <div class="frp-kpi-item">
          <div class="frp-kpi-label">营业额</div>
          <div class="frp-kpi-val">&yen;8,620</div>
          <div class="frp-kpi-change">
            <span class="frp-kpi-down">同比 ↓3.2%</span>
            <span class="frp-kpi-up">环比 ↑5.8%</span>
          </div>
        </div>
        <div class="frp-kpi-item">
          <div class="frp-kpi-label">订单数</div>
          <div class="frp-kpi-val">186</div>
          <div class="frp-kpi-change">
            <span class="frp-kpi-up">同比 ↑2.1%</span>
            <span class="frp-kpi-down">环比 ↓1.4%</span>
          </div>
        </div>
        <div class="frp-kpi-item">
          <div class="frp-kpi-label">客单价</div>
          <div class="frp-kpi-val">&yen;46.3</div>
          <div class="frp-kpi-change">
            <span class="frp-kpi-down">同比 ↓0.8%</span>
            <span class="frp-kpi-up">环比 ↑1.2%</span>
          </div>
        </div>
        <div class="frp-kpi-item">
          <div class="frp-kpi-label">退款率</div>
          <div class="frp-kpi-val">7.4%</div>
          <div class="frp-kpi-change">
            <span class="frp-kpi-down">同比 ↑2.1%</span>
            <span class="frp-kpi-up">环比 ↓0.6%</span>
          </div>
        </div>
        <div class="frp-kpi-item">
          <div class="frp-kpi-label">净利润</div>
          <div class="frp-kpi-val" style="color:var(--g-success);">&yen;3,340</div>
          <div class="frp-kpi-change">
            <span class="frp-kpi-up">同比 ↑4.5%</span>
            <span class="frp-kpi-up">环比 ↑6.2%</span>
          </div>
        </div>
        <div class="frp-kpi-item">
          <div class="frp-kpi-label">利润率</div>
          <div class="frp-kpi-val">38.7%</div>
          <div class="frp-kpi-change">
            <span class="frp-kpi-up">同比 ↑1.3%</span>
            <span class="frp-kpi-up">环比 ↑0.9%</span>
          </div>
        </div>
      </div>
    </div>

    <div class="frp-divider"></div>

    <!-- 收入明细 -->
    <div class="frp-section">
      <div class="frp-section-hd">收入明细（按渠道）</div>
      <div class="frp-detail-row">
        <span class="frp-detail-name"><i data-lucide="bike" style="width:14px;height:14px;vertical-align:-2px;color:var(--primary);margin-right:6px;"></i>外卖</span>
        <div class="frp-detail-right">
          <span class="frp-detail-pct">58.3%</span>
          <span class="frp-detail-amount">&yen;5,025</span>
        </div>
      </div>
      <div class="frp-detail-row">
        <span class="frp-detail-name"><i data-lucide="shopping-bag" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-success);margin-right:6px;"></i>自提</span>
        <div class="frp-detail-right">
          <span class="frp-detail-pct">26.1%</span>
          <span class="frp-detail-amount">&yen;2,250</span>
        </div>
      </div>
      <div class="frp-detail-row">
        <span class="frp-detail-name"><i data-lucide="utensils" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-warning);margin-right:6px;"></i>堂食</span>
        <div class="frp-detail-right">
          <span class="frp-detail-pct">15.6%</span>
          <span class="frp-detail-amount">&yen;1,345</span>
        </div>
      </div>
    </div>

    <div class="frp-divider"></div>

    <!-- 成本明细 -->
    <div class="frp-section">
      <div class="frp-section-hd">成本明细（按类别）</div>
      <div class="frp-detail-row">
        <span class="frp-detail-name"><i data-lucide="carrot" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-warning);margin-right:6px;"></i>食材成本</span>
        <div class="frp-detail-right">
          <span class="frp-detail-pct">56.8%</span>
          <span class="frp-detail-amount">&yen;3,000</span>
        </div>
      </div>
      <div class="frp-detail-row">
        <span class="frp-detail-name"><i data-lucide="users" style="width:14px;height:14px;vertical-align:-2px;color:var(--primary);margin-right:6px;"></i>人工成本</span>
        <div class="frp-detail-right">
          <span class="frp-detail-pct">26.5%</span>
          <span class="frp-detail-amount">&yen;1,400</span>
        </div>
      </div>
      <div class="frp-detail-row">
        <span class="frp-detail-name"><i data-lucide="building-2" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-text-muted);margin-right:6px;"></i>固定成本</span>
        <div class="frp-detail-right">
          <span class="frp-detail-pct">11.4%</span>
          <span class="frp-detail-amount">&yen;600</span>
        </div>
      </div>
      <div class="frp-detail-row">
        <span class="frp-detail-name"><i data-lucide="package" style="width:14px;height:14px;vertical-align:-2px;color:var(--g-success);margin-right:6px;"></i>包装成本</span>
        <div class="frp-detail-right">
          <span class="frp-detail-pct">5.3%</span>
          <span class="frp-detail-amount">&yen;280</span>
        </div>
      </div>
    </div>

  </div>
  <div class="g-drawer-ft">
    <button class="g-btn" onclick="closeFrpPreview()">关闭</button>
    <button class="g-btn g-btn-primary"><i data-lucide="file-text" style="width:14px;height:14px;"></i> 下载PDF</button>
    <button class="g-btn"><i data-lucide="table" style="width:14px;height:14px;"></i> 下载Excel</button>
  </div>
</div>

<script>
  /* Tab 切换 */
  function switchFrpTab(el, tab) {
    document.querySelectorAll('.g-seg-item').forEach(function(s) { s.classList.remove('active'); });
    el.classList.add('active');
    document.querySelectorAll('.frp-tab-panel').forEach(function(p) { p.style.display = 'none'; });
    var map = { daily: 'frpTabDaily', weekly: 'frpTabWeekly', monthly: 'frpTabMonthly' };
    document.getElementById(map[tab]).style.display = '';
  }

  /* 预览抽屉 */
  function openFrpPreview(title) {
    document.getElementById('frpDrawerTitle').textContent = title || '报表预览';
    document.getElementById('frpDrawerMask').classList.add('open');
    document.getElementById('frpDrawer').classList.add('open');
    if (typeof lucide !== 'undefined') lucide.createIcons();
  }
  function closeFrpPreview() {
    document.getElementById('frpDrawerMask').classList.remove('open');
    document.getElementById('frpDrawer').classList.remove('open');
  }
</script>