feat: 新增数据统计模块（商品分析、客户分析、订单分析、营销分析）

- 商品分析：销量排行、品类饼图、滞销预警
- 客户分析：新客/回头客趋势、RFM分层、流失预警、复购周期
- 订单分析：趋势折线图、时段热力图、渠道对比
- 营销分析：活动效果、优惠券统计、次卡分析、转化漏斗
- 侧边栏精简为4个子菜单，移除重复的经营报表和过碎的独立页

pages/stat-customer.html

@@ -0,0 +1,281 @@
+<!-- 客户分析 — stat-customer.html -->
+<style>
+  /* ---- page-private: sc- prefix ---- */
+  .sc-page { display:flex; flex-direction:column; gap:14px; }
+
+  /* 顶部统计卡片 */
+  .sc-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+  .sc-kpi {
+    background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border);
+    padding:18px 20px; box-shadow:var(--g-shadow-sm); transition:box-shadow var(--g-transition);
+  }
+  .sc-kpi:hover { box-shadow:var(--g-shadow-md); }
+  .sc-kpi-label { font-size:13px; color:var(--g-text-secondary); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
+  .sc-kpi-label i { width:16px; height:16px; }
+  .sc-kpi-val { font-size:28px; font-weight:700; color:var(--g-text); line-height:1.2; }
+  .sc-kpi-hint { font-size:11px; color:var(--g-text-muted); margin-top:6px; display:flex; align-items:center; gap:4px; }
+  .sc-kpi-hint .up { color:var(--g-success); font-weight:600; }
+  .sc-kpi-hint .down { color:var(--g-danger); font-weight:600; }
+
+  /* 分段Tab */
+  .sc-seg-wrap { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:14px 20px 0; box-shadow:var(--g-shadow-sm); }
+  .sc-tab-panel { display:none; padding:16px 0 20px; }
+  .sc-tab-panel.active { display:block; }
+
+  /* Section 标题 */
+  .sc-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* Tab1: 柱状图 */
+  .sc-chart-wrap { background:#fafafa; border-radius:var(--g-radius); padding:20px; margin-bottom:20px; }
+  .sc-bar-chart { display:flex; align-items:flex-end; gap:16px; height:220px; padding:10px 0; }
+  .sc-bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
+  .sc-bar-pair { display:flex; gap:4px; align-items:flex-end; height:180px; }
+  .sc-bar { width:24px; border-radius:4px 4px 0 0; transition:height 0.5s cubic-bezier(.2,0,0,1); position:relative; cursor:pointer; }
+  .sc-bar:hover { opacity:0.85; }
+  .sc-bar.new-c { background:linear-gradient(180deg,#1890ff,#69c0ff); }
+  .sc-bar.ret-c { background:linear-gradient(180deg,#52c41a,#95de64); }
+  .sc-bar-num { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--g-text-secondary); white-space:nowrap; font-weight:600; }
+  .sc-bar-label { font-size:12px; color:var(--g-text-muted); }
+  .sc-legend { display:flex; gap:16px; justify-content:center; margin-top:10px; font-size:12px; color:var(--g-text-muted); }
+  .sc-legend-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:middle; }
+
+  /* Tab2: RFM */
+  .sc-rfm-info {
+    background:color-mix(in srgb, var(--primary) 6%, #fff); border:1px solid color-mix(in srgb, var(--primary) 15%, #fff);
+    border-radius:var(--g-radius-sm); padding:10px 14px; font-size:12px; color:var(--g-text-secondary); margin-bottom:16px;
+    display:flex; align-items:center; gap:6px;
+  }
+  .sc-rfm-info i { width:16px; height:16px; color:var(--primary); flex-shrink:0; }
+  .sc-rfm-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
+  .sc-rfm-card {
+    border-radius:var(--g-radius); padding:18px; border:1px solid var(--g-border);
+    transition:box-shadow var(--g-transition); position:relative; overflow:hidden;
+  }
+  .sc-rfm-card:hover { box-shadow:var(--g-shadow-md); }
+  .sc-rfm-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
+  .sc-rfm-card.green::before { background:var(--g-success); }
+  .sc-rfm-card.blue::before { background:var(--primary); }
+  .sc-rfm-card.orange::before { background:var(--g-warning); }
+  .sc-rfm-card.red::before { background:var(--g-danger); }
+  .sc-rfm-card.cyan::before { background:#13c2c2; }
+  .sc-rfm-card.gray::before { background:#bfbfbf; }
+  .sc-rfm-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
+  .sc-rfm-desc { font-size:11px; color:var(--g-text-muted); margin-bottom:10px; }
+  .sc-rfm-num { font-size:22px; font-weight:700; color:var(--g-text); }
+  .sc-rfm-pct { font-size:12px; color:var(--g-text-secondary); margin-left:6px; }
+  .sc-rfm-link { font-size:12px; color:var(--primary); cursor:pointer; margin-top:10px; display:inline-block; }
+  .sc-rfm-link:hover { text-decoration:underline; }
+
+  /* Tab3: 流失预警 */
+  .sc-warn-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
+  .sc-warn-card {
+    background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border);
+    padding:16px 18px; text-align:center; box-shadow:var(--g-shadow-sm);
+  }
+  .sc-warn-card-val { font-size:24px; font-weight:700; margin:6px 0 4px; }
+  .sc-warn-card-val.low { color:var(--g-warning); }
+  .sc-warn-card-val.mid { color:#fa541c; }
+  .sc-warn-card-val.high { color:var(--g-danger); }
+  .sc-warn-card-label { font-size:13px; color:var(--g-text-secondary); }
+
+  /* Tab4: 复购周期 - 横向柱状图 */
+  .sc-hbar-wrap { margin-bottom:20px; }
+  .sc-hbar-item { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
+  .sc-hbar-label { width:70px; font-size:13px; color:var(--g-text-secondary); text-align:right; flex-shrink:0; }
+  .sc-hbar-track { flex:1; height:24px; background:#f5f5f5; border-radius:4px; overflow:hidden; position:relative; }
+  .sc-hbar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#1890ff,#69c0ff); transition:width 0.6s cubic-bezier(.2,0,0,1); display:flex; align-items:center; padding-left:8px; }
+  .sc-hbar-fill span { font-size:11px; color:#fff; font-weight:600; white-space:nowrap; }
+  .sc-hbar-val { width:90px; font-size:12px; color:var(--g-text-muted); flex-shrink:0; }
+  .sc-hbar-desc { font-size:12px; color:var(--g-text-muted); margin-bottom:16px; padding:8px 12px; background:#fafafa; border-radius:var(--g-radius-sm); }
+</style>
+
+<div class="sc-page">
+  <!-- 顶部统计卡片 -->
+  <div class="sc-kpi-row">
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="users"></i>累计客户</div>
+      <div class="sc-kpi-val">2,860</div>
+      <div class="sc-kpi-hint">较上月 +210</div>
+    </div>
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="user-plus"></i>本月新客</div>
+      <div class="sc-kpi-val">186</div>
+      <div class="sc-kpi-hint">环比 <span class="up">+12%</span></div>
+    </div>
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="repeat"></i>回头客占比</div>
+      <div class="sc-kpi-val">42.5%</div>
+      <div class="sc-kpi-hint">环比 <span class="up">+3.2%</span></div>
+    </div>
+    <div class="sc-kpi">
+      <div class="sc-kpi-label"><i data-lucide="calendar-clock"></i>平均消费频次</div>
+      <div class="sc-kpi-val">2.8<span style="font-size:14px;font-weight:400;color:var(--g-text-muted);margin-left:2px">次/月</span></div>
+      <div class="sc-kpi-hint">环比 <span class="up">+0.3</span></div>
+    </div>
+  </div>
+
+  <!-- 分段Tab -->
+  <div class="sc-seg-wrap">
+    <div class="g-seg" style="max-width:420px;">
+      <div class="g-seg-item active" onclick="switchScTab(this,'overview')">客户概览</div>
+      <div class="g-seg-item" onclick="switchScTab(this,'rfm')">RFM分层</div>
+      <div class="g-seg-item" onclick="switchScTab(this,'churn')">流失预警</div>
+      <div class="g-seg-item" onclick="switchScTab(this,'repurchase')">复购周期</div>
+    </div>
+
+    <!-- Tab1: 客户概览 -->
+    <div id="scTabOverview" class="sc-tab-panel active">
+      <div class="sc-section-hd">新客 vs 回头客趋势（近6个月）</div>
+      <div class="sc-chart-wrap">
+        <div class="sc-bar-chart">
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:40%;"><span class="sc-bar-num">120</span></div><div class="sc-bar ret-c" style="height:55%;"><span class="sc-bar-num">165</span></div></div><span class="sc-bar-label">8月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:48%;"><span class="sc-bar-num">145</span></div><div class="sc-bar ret-c" style="height:52%;"><span class="sc-bar-num">156</span></div></div><span class="sc-bar-label">9月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:55%;"><span class="sc-bar-num">168</span></div><div class="sc-bar ret-c" style="height:60%;"><span class="sc-bar-num">180</span></div></div><span class="sc-bar-label">10月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:45%;"><span class="sc-bar-num">138</span></div><div class="sc-bar ret-c" style="height:65%;"><span class="sc-bar-num">195</span></div></div><span class="sc-bar-label">11月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:52%;"><span class="sc-bar-num">158</span></div><div class="sc-bar ret-c" style="height:70%;"><span class="sc-bar-num">210</span></div></div><span class="sc-bar-label">12月</span></div>
+          <div class="sc-bar-group"><div class="sc-bar-pair"><div class="sc-bar new-c" style="height:60%;"><span class="sc-bar-num">186</span></div><div class="sc-bar ret-c" style="height:72%;"><span class="sc-bar-num">218</span></div></div><span class="sc-bar-label">1月</span></div>
+        </div>
+        <div class="sc-legend">
+          <span><span class="sc-legend-dot" style="background:#1890ff;"></span>新客</span>
+          <span><span class="sc-legend-dot" style="background:#52c41a;"></span>回头客</span>
+        </div>
+      </div>
+
+      <div class="sc-section-hd">客单价分布</div>
+      <table class="g-table">
+        <thead><tr><th>价格区间</th><th>客户数</th><th>占比</th><th>累计占比</th></tr></thead>
+        <tbody>
+          <tr><td>0 - 20 元</td><td>286</td><td>10.0%</td><td>10.0%</td></tr>
+          <tr><td>20 - 40 元</td><td>915</td><td>32.0%</td><td>42.0%</td></tr>
+          <tr><td>40 - 60 元</td><td>743</td><td>26.0%</td><td>68.0%</td></tr>
+          <tr><td>60 - 80 元</td><td>486</td><td>17.0%</td><td>85.0%</td></tr>
+          <tr><td>80 - 100 元</td><td>258</td><td>9.0%</td><td>94.0%</td></tr>
+          <tr><td>100 元以上</td><td>172</td><td>6.0%</td><td>100.0%</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab2: RFM分层 -->
+    <div id="scTabRfm" class="sc-tab-panel">
+      <div class="sc-section-hd">RFM 客户分层</div>
+      <div class="sc-rfm-info">
+        <i data-lucide="info"></i>
+        RFM 模型基于三个维度对客户进行分层：最近消费时间（Recency）、消费频率（Frequency）、消费金额（Monetary），帮助识别高价值客户并制定差异化运营策略。
+      </div>
+      <div class="sc-rfm-grid">
+        <div class="sc-rfm-card green">
+          <div class="sc-rfm-name">重要价值客户</div>
+          <div class="sc-rfm-desc">R高 F高 M高</div>
+          <div><span class="sc-rfm-num">320</span><span class="sc-rfm-pct">人，占 11.2%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card blue">
+          <div class="sc-rfm-name">重要发展客户</div>
+          <div class="sc-rfm-desc">R高 F低 M高</div>
+          <div><span class="sc-rfm-num">186</span><span class="sc-rfm-pct">人，占 6.5%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card orange">
+          <div class="sc-rfm-name">重要保持客户</div>
+          <div class="sc-rfm-desc">R低 F高 M高</div>
+          <div><span class="sc-rfm-num">245</span><span class="sc-rfm-pct">人，占 8.6%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card red">
+          <div class="sc-rfm-name">重要挽留客户</div>
+          <div class="sc-rfm-desc">R低 F低 M高</div>
+          <div><span class="sc-rfm-num">128</span><span class="sc-rfm-pct">人，占 4.5%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card cyan">
+          <div class="sc-rfm-name">一般价值客户</div>
+          <div class="sc-rfm-desc">R高 F高 M低</div>
+          <div><span class="sc-rfm-num">580</span><span class="sc-rfm-pct">人，占 20.3%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+        <div class="sc-rfm-card gray">
+          <div class="sc-rfm-name">一般客户</div>
+          <div class="sc-rfm-desc">其他组合</div>
+          <div><span class="sc-rfm-num">1,401</span><span class="sc-rfm-pct">人，占 49.0%</span></div>
+          <a class="sc-rfm-link">查看详情 &rarr;</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab3: 流失预警 -->
+    <div id="scTabChurn" class="sc-tab-panel">
+      <div class="sc-section-hd">流失预警</div>
+      <div class="sc-warn-row">
+        <div class="sc-warn-card">
+          <div class="sc-warn-card-label">30天未消费</div>
+          <div class="sc-warn-card-val low">186</div>
+          <div style="font-size:11px;color:var(--g-text-muted);">人</div>
+        </div>
+        <div class="sc-warn-card">
+          <div class="sc-warn-card-label">60天未消费</div>
+          <div class="sc-warn-card-val mid">95</div>
+          <div style="font-size:11px;color:var(--g-text-muted);">人</div>
+        </div>
+        <div class="sc-warn-card">
+          <div class="sc-warn-card-label">90天+未消费</div>
+          <div class="sc-warn-card-val high">42</div>
+          <div style="font-size:11px;color:var(--g-text-muted);">人</div>
+        </div>
+      </div>
+
+      <table class="g-table">
+        <thead>
+          <tr><th>客户名</th><th>手机号</th><th>最后消费时间</th><th>累计消费</th><th>未消费天数</th><th>流失风险</th><th>操作</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>张*明</td><td>138****6721</td><td>2025-11-02</td><td>&yen;1,280</td><td>92</td><td><span class="g-tag g-tag-red">高</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>李*华</td><td>159****3348</td><td>2025-11-18</td><td>&yen;860</td><td>76</td><td><span class="g-tag g-tag-red">高</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>王*</td><td>136****9012</td><td>2025-12-05</td><td>&yen;2,150</td><td>59</td><td><span class="g-tag g-tag-orange">中</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>赵*丽</td><td>188****4567</td><td>2025-12-12</td><td>&yen;560</td><td>52</td><td><span class="g-tag g-tag-orange">中</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>陈*</td><td>177****8901</td><td>2025-12-28</td><td>&yen;3,420</td><td>36</td><td><span class="g-tag g-tag-blue">低</span></td><td><a class="g-action">发券挽回</a></td></tr>
+          <tr><td>刘*强</td><td>155****2345</td><td>2026-01-03</td><td>&yen;720</td><td>30</td><td><span class="g-tag g-tag-blue">低</span></td><td><a class="g-action">发券挽回</a></td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab4: 复购周期 -->
+    <div id="scTabRepurchase" class="sc-tab-panel">
+      <div class="sc-section-hd">复购周期分布</div>
+      <div class="sc-hbar-desc">分析客户两次消费之间的间隔天数分布，帮助制定精准的复购提醒策略。</div>
+      <div class="sc-hbar-wrap">
+        <div class="sc-hbar-item"><span class="sc-hbar-label">1-3 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:65%;"><span>486人</span></div></div><span class="sc-hbar-val">占 32.4%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">4-7 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:50%;"><span>375人</span></div></div><span class="sc-hbar-val">占 25.0%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">8-14 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:30%;"><span>225人</span></div></div><span class="sc-hbar-val">占 15.0%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">15-30 天</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:25%;"><span>210人</span></div></div><span class="sc-hbar-val">占 14.0%</span></div>
+        <div class="sc-hbar-item"><span class="sc-hbar-label">30 天+</span><div class="sc-hbar-track"><div class="sc-hbar-fill" style="width:17%;background:linear-gradient(90deg,#fa8c16,#ffc069);"><span>204人</span></div></div><span class="sc-hbar-val">占 13.6%</span></div>
+      </div>
+
+      <div class="sc-section-hd">复购率趋势（近6个月）</div>
+      <table class="g-table">
+        <thead><tr><th>月份</th><th>总客户</th><th>复购客户</th><th>复购率</th><th>环比</th></tr></thead>
+        <tbody>
+          <tr><td>2025-08</td><td>680</td><td>245</td><td>36.0%</td><td>—</td></tr>
+          <tr><td>2025-09</td><td>720</td><td>268</td><td>37.2%</td><td><span style="color:var(--g-success)">+1.2%</span></td></tr>
+          <tr><td>2025-10</td><td>785</td><td>306</td><td>39.0%</td><td><span style="color:var(--g-success)">+1.8%</span></td></tr>
+          <tr><td>2025-11</td><td>810</td><td>324</td><td>40.0%</td><td><span style="color:var(--g-success)">+1.0%</span></td></tr>
+          <tr><td>2025-12</td><td>856</td><td>350</td><td>40.9%</td><td><span style="color:var(--g-success)">+0.9%</span></td></tr>
+          <tr><td>2026-01</td><td>892</td><td>379</td><td>42.5%</td><td><span style="color:var(--g-success)">+1.6%</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function switchScTab(el, tab) {
+    el.closest('.g-seg').querySelectorAll('.g-seg-item').forEach(function(s) { s.classList.remove('active'); });
+    el.classList.add('active');
+    document.querySelectorAll('.sc-tab-panel').forEach(function(p) { p.classList.remove('active'); });
+    var map = { overview:'scTabOverview', rfm:'scTabRfm', churn:'scTabChurn', repurchase:'scTabRepurchase' };
+    document.getElementById(map[tab]).classList.add('active');
+  }
+
+  /* Lucide Icons */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>

pages/stat-marketing.html

@@ -0,0 +1,475 @@
+<!-- 营销分析 -->
+<style>
+  .sma-page { display:flex; flex-direction:column; gap:16px; }
+
+  /* 顶部统计卡片 */
+  .sma-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
+  .sma-kpi { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:18px 20px; display:flex; flex-direction:column; gap:10px; transition:var(--g-transition); }
+  .sma-kpi:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
+  .sma-kpi-top { display:flex; align-items:center; justify-content:space-between; }
+  .sma-kpi-label { font-size:13px; color:var(--g-text-secondary); }
+  .sma-kpi-icon { width:36px; height:36px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+  .sma-kpi-icon.blue { background:hsl(212,100%,95%); color:hsl(212,100%,45%); }
+  .sma-kpi-icon.orange { background:#fffbeb; color:var(--g-warning); }
+  .sma-kpi-icon.green { background:#f0fdf4; color:var(--g-success); }
+  .sma-kpi-icon.purple { background:#f5f3ff; color:#7c3aed; }
+  .sma-kpi-value { font-size:26px; font-weight:800; color:var(--g-text); letter-spacing:-0.5px; }
+  .sma-kpi-sub { font-size:12px; color:var(--g-text-muted); }
+
+  /* Section 标题 */
+  .sma-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* Tab 内容区 */
+  .sma-tab-panel { display:none; }
+  .sma-tab-panel.active { display:block; }
+
+  /* 小统计卡片行 */
+  .sma-mini-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
+  .sma-mini { background:#f8f9fb; border-radius:var(--g-radius); padding:16px 20px; text-align:center; border:1px solid var(--g-border); }
+  .sma-mini-label { font-size:12px; color:var(--g-text-muted); margin-bottom:6px; }
+  .sma-mini-val { font-size:22px; font-weight:700; color:var(--g-text); }
+
+  /* ROI 颜色 */
+  .sma-roi-good { color:var(--g-success); font-weight:600; }
+  .sma-roi-bad { color:var(--g-danger); font-weight:600; }
+  .sma-roi-mid { color:var(--g-warning); font-weight:600; }
+
+  /* 核销率进度条 */
+  .sma-progress { display:flex; align-items:center; gap:8px; }
+  .sma-progress-bg { width:80px; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
+  .sma-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,hsl(212,100%,45%),hsl(212,100%,65%)); }
+
+  /* 漏斗图 */
+  .sma-funnel-wrap { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
+  .sma-funnel { display:flex; flex-direction:column; align-items:center; gap:0; padding:20px 0; }
+  .sma-funnel-step { display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:600; transition:var(--g-transition); position:relative; height:52px; border-radius:4px; }
+  .sma-funnel-step:hover { filter:brightness(1.08); }
+  .sma-funnel-step .sma-funnel-num { font-size:12px; font-weight:400; opacity:0.85; margin-left:6px; }
+  .sma-funnel-arrow { font-size:11px; color:var(--g-text-muted); padding:4px 0; display:flex; align-items:center; gap:4px; }
+  .sma-funnel-arrow i { color:var(--g-text-muted); }
+
+  /* 转化对比表 */
+  .sma-compare-title { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:12px; }
+  .sma-change-up { color:var(--g-success); font-size:12px; }
+  .sma-change-down { color:var(--g-danger); font-size:12px; }
+
+  /* 动画 */
+  @keyframes smaFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+  .sma-page > * { animation:smaFadeIn 0.4s ease both; }
+  .sma-page > *:nth-child(2) { animation-delay:0.05s; }
+  .sma-page > *:nth-child(3) { animation-delay:0.1s; }
+</style>
+
+<div class="sma-page">
+
+  <!-- 1. 顶部 KPI 卡片 -->
+  <div class="sma-kpi-row">
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">进行中活动</span>
+        <div class="sma-kpi-icon blue"><i data-lucide="megaphone" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">6</div>
+      <div class="sma-kpi-sub">较上月 +2 个</div>
+    </div>
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">本月优惠总额</span>
+        <div class="sma-kpi-icon orange"><i data-lucide="ticket" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">&yen;6,200</div>
+      <div class="sma-kpi-sub">覆盖 1,840 笔订单</div>
+    </div>
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">平均核销率</span>
+        <div class="sma-kpi-icon green"><i data-lucide="check-circle" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">68.5%</div>
+      <div class="sma-kpi-sub">行业均值 55%</div>
+    </div>
+    <div class="sma-kpi">
+      <div class="sma-kpi-top">
+        <span class="sma-kpi-label">营销 ROI</span>
+        <div class="sma-kpi-icon purple"><i data-lucide="trending-up" style="width:18px;height:18px"></i></div>
+      </div>
+      <div class="sma-kpi-value">3.2x</div>
+      <div class="sma-kpi-sub">每投入 1 元带来 3.2 元收入</div>
+    </div>
+  </div>
+
+  <!-- 2. 分段 Tab -->
+  <div class="g-card" style="padding:20px;">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
+      <div class="sma-section-hd" style="margin-bottom:0;">营销数据分析</div>
+      <div class="g-seg">
+        <div class="g-seg-item active" onclick="smaTab(this,0)">活动效果</div>
+        <div class="g-seg-item" onclick="smaTab(this,1)">优惠券统计</div>
+        <div class="g-seg-item" onclick="smaTab(this,2)">次卡分析</div>
+        <div class="g-seg-item" onclick="smaTab(this,3)">转化漏斗</div>
+      </div>
+    </div>
+
+    <!-- Tab1: 活动效果 -->
+    <div class="sma-tab-panel active" id="smaPanel0">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>活动名称</th>
+            <th>类型</th>
+            <th>时间范围</th>
+            <th>参与订单</th>
+            <th>优惠金额</th>
+            <th>带动销售额</th>
+            <th>ROI</th>
+            <th>状态</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>午市满减狂欢</td>
+            <td><span class="g-tag g-tag-blue">满减</span></td>
+            <td>02/01 - 02/28</td>
+            <td>520</td>
+            <td>&yen;1,560</td>
+            <td>&yen;6,240</td>
+            <td><span class="sma-roi-good">4.0x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>新品尝鲜第二份半价</td>
+            <td><span class="g-tag g-tag-purple">第二份半价</span></td>
+            <td>02/05 - 02/20</td>
+            <td>310</td>
+            <td>&yen;930</td>
+            <td>&yen;3,720</td>
+            <td><span class="sma-roi-good">4.0x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>情人节限时折扣</td>
+            <td><span class="g-tag g-tag-orange">限时折扣</span></td>
+            <td>02/13 - 02/15</td>
+            <td>280</td>
+            <td>&yen;840</td>
+            <td>&yen;2,800</td>
+            <td><span class="sma-roi-good">3.3x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>周末满赠甜品</td>
+            <td><span class="g-tag g-tag-green">满赠</span></td>
+            <td>02/01 - 02/28</td>
+            <td>190</td>
+            <td>&yen;570</td>
+            <td>&yen;1,900</td>
+            <td><span class="sma-roi-good">3.3x</span></td>
+            <td><span class="g-tag g-tag-green">进行中</span></td>
+          </tr>
+          <tr>
+            <td>春节秒杀专场</td>
+            <td><span class="g-tag g-tag-red">秒杀</span></td>
+            <td>01/28 - 02/02</td>
+            <td>450</td>
+            <td>&yen;1,350</td>
+            <td>&yen;3,600</td>
+            <td><span class="sma-roi-mid">2.7x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+          <tr>
+            <td>元旦满减回馈</td>
+            <td><span class="g-tag g-tag-blue">满减</span></td>
+            <td>12/30 - 01/03</td>
+            <td>380</td>
+            <td>&yen;1,140</td>
+            <td>&yen;3,420</td>
+            <td><span class="sma-roi-good">3.0x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+          <tr>
+            <td>冬季暖饮折扣</td>
+            <td><span class="g-tag g-tag-orange">限时折扣</span></td>
+            <td>12/15 - 01/15</td>
+            <td>620</td>
+            <td>&yen;1,860</td>
+            <td>&yen;4,960</td>
+            <td><span class="sma-roi-mid">2.7x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+          <tr>
+            <td>双12秒杀狂欢</td>
+            <td><span class="g-tag g-tag-red">秒杀</span></td>
+            <td>12/10 - 12/13</td>
+            <td>260</td>
+            <td>&yen;1,040</td>
+            <td>&yen;1,820</td>
+            <td><span class="sma-roi-bad">1.8x</span></td>
+            <td><span class="g-tag g-tag-gray">已结束</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab2: 优惠券统计 -->
+    <div class="sma-tab-panel" id="smaPanel1">
+      <div class="sma-mini-row">
+        <div class="sma-mini">
+          <div class="sma-mini-label">已发放</div>
+          <div class="sma-mini-val">1,200 张</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">已使用</div>
+          <div class="sma-mini-val">820 张</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">核销率</div>
+          <div class="sma-mini-val">68.3%</div>
+        </div>
+      </div>
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>券名称</th>
+            <th>类型</th>
+            <th>面值</th>
+            <th>发放数</th>
+            <th>使用数</th>
+            <th>核销率</th>
+            <th>带动消费</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>满50减10元券</td>
+            <td><span class="g-tag g-tag-blue">满减券</span></td>
+            <td>&yen;10</td>
+            <td>400</td>
+            <td>312</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:78%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">78.0%</span>
+              </div>
+            </td>
+            <td>&yen;18,720</td>
+          </tr>
+          <tr>
+            <td>8折优享券</td>
+            <td><span class="g-tag g-tag-purple">折扣券</span></td>
+            <td>8折</td>
+            <td>300</td>
+            <td>198</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:66%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">66.0%</span>
+              </div>
+            </td>
+            <td>&yen;11,880</td>
+          </tr>
+          <tr>
+            <td>新人免费甜品券</td>
+            <td><span class="g-tag g-tag-green">免费券</span></td>
+            <td>&yen;18</td>
+            <td>200</td>
+            <td>156</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:78%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">78.0%</span>
+              </div>
+            </td>
+            <td>&yen;6,240</td>
+          </tr>
+          <tr>
+            <td>满80减15元券</td>
+            <td><span class="g-tag g-tag-blue">满减券</span></td>
+            <td>&yen;15</td>
+            <td>200</td>
+            <td>108</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:54%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">54.0%</span>
+              </div>
+            </td>
+            <td>&yen;8,640</td>
+          </tr>
+          <tr>
+            <td>午市专享7折券</td>
+            <td><span class="g-tag g-tag-purple">折扣券</span></td>
+            <td>7折</td>
+            <td>100</td>
+            <td>46</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:46%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">46.0%</span>
+              </div>
+            </td>
+            <td>&yen;3,220</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab3: 次卡分析 -->
+    <div class="sma-tab-panel" id="smaPanel2">
+      <div class="sma-mini-row">
+        <div class="sma-mini">
+          <div class="sma-mini-label">在售次卡</div>
+          <div class="sma-mini-val">3 种</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">已售出</div>
+          <div class="sma-mini-val">156 张</div>
+        </div>
+        <div class="sma-mini">
+          <div class="sma-mini-label">总使用次数</div>
+          <div class="sma-mini-val">1,280 次</div>
+        </div>
+      </div>
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th>次卡名称</th>
+            <th>售价</th>
+            <th>已售</th>
+            <th>总使用次数</th>
+            <th>平均使用率</th>
+            <th>剩余未用次数</th>
+            <th>收入</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>咖啡月卡</td>
+            <td>&yen;128</td>
+            <td>86 张</td>
+            <td>720 次</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:83.7%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">83.7%</span>
+              </div>
+            </td>
+            <td>140 次</td>
+            <td>&yen;11,008</td>
+          </tr>
+          <tr>
+            <td>甜品5次卡</td>
+            <td>&yen;68</td>
+            <td>42 张</td>
+            <td>340 次</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:72%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">72.0%</span>
+              </div>
+            </td>
+            <td>60 次</td>
+            <td>&yen;2,856</td>
+          </tr>
+          <tr>
+            <td>午餐10次卡</td>
+            <td>&yen;188</td>
+            <td>28 张</td>
+            <td>220 次</td>
+            <td>
+              <div class="sma-progress">
+                <div class="sma-progress-bg"><div class="sma-progress-fill" style="width:78.6%"></div></div>
+                <span style="font-size:12px;color:var(--g-text-secondary)">78.6%</span>
+              </div>
+            </td>
+            <td>60 次</td>
+            <td>&yen;5,264</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab4: 转化漏斗 -->
+    <div class="sma-tab-panel" id="smaPanel3">
+      <div class="sma-funnel-wrap">
+        <!-- 左侧漏斗图 -->
+        <div>
+          <div class="sma-funnel">
+            <div class="sma-funnel-step" style="width:100%;background:linear-gradient(135deg,#1890ff,#096dd9);">浏览店铺 <span class="sma-funnel-num">12,000 (100%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 40.0%</div>
+            <div class="sma-funnel-step" style="width:82%;background:linear-gradient(135deg,#36a3f7,#1890ff);">加入购物车 <span class="sma-funnel-num">4,800 (40%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 75.0%</div>
+            <div class="sma-funnel-step" style="width:64%;background:linear-gradient(135deg,#52c41a,#389e0d);">提交订单 <span class="sma-funnel-num">3,600 (30%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 95.0%</div>
+            <div class="sma-funnel-step" style="width:52%;background:linear-gradient(135deg,#73d13d,#52c41a);">完成支付 <span class="sma-funnel-num">3,420 (28.5%)</span></div>
+            <div class="sma-funnel-arrow"><i data-lucide="chevron-down" style="width:14px;height:14px"></i> 转化率 42.4%</div>
+            <div class="sma-funnel-step" style="width:38%;background:linear-gradient(135deg,#faad14,#d48806);">复购 <span class="sma-funnel-num">1,450 (12.1%)</span></div>
+          </div>
+        </div>
+
+        <!-- 右侧转化率对比表 -->
+        <div>
+          <div class="sma-compare-title">转化率环比对比</div>
+          <table class="g-table">
+            <thead>
+              <tr>
+                <th>阶段</th>
+                <th>本月</th>
+                <th>上月</th>
+                <th>变化</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>浏览 → 加购</td>
+                <td>40.0%</td>
+                <td>36.5%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +3.5%</span></td>
+              </tr>
+              <tr>
+                <td>加购 → 下单</td>
+                <td>75.0%</td>
+                <td>72.0%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +3.0%</span></td>
+              </tr>
+              <tr>
+                <td>下单 → 支付</td>
+                <td>95.0%</td>
+                <td>93.8%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +1.2%</span></td>
+              </tr>
+              <tr>
+                <td>支付 → 复购</td>
+                <td>42.4%</td>
+                <td>44.1%</td>
+                <td><span class="sma-change-down"><i data-lucide="trending-down" style="width:12px;height:12px;vertical-align:middle"></i> -1.7%</span></td>
+              </tr>
+              <tr>
+                <td>整体转化</td>
+                <td>12.1%</td>
+                <td>10.8%</td>
+                <td><span class="sma-change-up"><i data-lucide="trending-up" style="width:12px;height:12px;vertical-align:middle"></i> +1.3%</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  /* Tab 切换 */
+  function smaTab(el, idx) {
+    var items = el.parentElement.querySelectorAll('.g-seg-item');
+    items.forEach(function(item) { item.classList.remove('active'); });
+    el.classList.add('active');
+    for (var i = 0; i < 4; i++) {
+      var panel = document.getElementById('smaPanel' + i);
+      if (panel) panel.classList.toggle('active', i === idx);
+    }
+  }
+
+  /* 初始化 Lucide 图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>

pages/stat-order.html

@@ -0,0 +1,299 @@
+<!-- 订单分析 stat-order -->
+<style>
+  .so-page { display:flex; flex-direction:column; gap:20px; }
+
+  /* 筛选栏 */
+  .so-filter { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
+  .so-date-input { height:34px; padding:0 10px; border:1px solid var(--g-border); border-radius:var(--g-radius-sm); font-size:13px; color:var(--g-text); outline:none; transition:var(--g-transition); }
+  .so-date-input:focus { border-color:var(--primary); }
+  .so-date-sep { color:var(--g-text-muted); font-size:13px; }
+  .so-quick-btns { display:flex; gap:6px; }
+  .so-quick-btn { height:30px; padding:0 12px; border:1px solid var(--g-border); border-radius:var(--g-radius-sm); background:#fff; font-size:12px; color:var(--g-text-secondary); cursor:pointer; transition:var(--g-transition); }
+  .so-quick-btn:hover { border-color:var(--primary); color:var(--primary); }
+  .so-quick-btn.active { background:var(--primary-light); border-color:var(--primary); color:var(--primary); font-weight:500; }
+  .so-channel-btns { display:flex; gap:0; margin-left:auto; }
+  .so-channel-btn { height:30px; padding:0 14px; border:1px solid var(--g-border); background:#fff; font-size:12px; color:var(--g-text-secondary); cursor:pointer; transition:var(--g-transition); }
+  .so-channel-btn:first-child { border-radius:var(--g-radius-sm) 0 0 var(--g-radius-sm); }
+  .so-channel-btn:last-child { border-radius:0 var(--g-radius-sm) var(--g-radius-sm) 0; }
+  .so-channel-btn + .so-channel-btn { border-left:none; }
+  .so-channel-btn:hover { color:var(--primary); }
+  .so-channel-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
+
+  /* 统计卡片 */
+  .so-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
+  .so-kpi { border-radius:var(--g-radius); padding:20px 24px; background:#fff; border:1px solid var(--g-border); transition:var(--g-transition); display:flex; flex-direction:column; gap:8px; }
+  .so-kpi:hover { box-shadow:var(--g-shadow-md); }
+  .so-kpi-label { font-size:13px; color:var(--g-text-muted); display:flex; align-items:center; gap:6px; }
+  .so-kpi-label i { width:16px; height:16px; }
+  .so-kpi-value { font-size:28px; font-weight:700; color:var(--g-text); letter-spacing:-0.5px; }
+  .so-kpi-sub { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
+  .so-kpi-sub .up { color:var(--g-success); font-weight:500; }
+  .so-kpi-sub .down { color:var(--g-danger); font-weight:500; }
+
+  /* Section 标题 */
+  .so-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
+
+  /* 趋势图 */
+  .so-chart-wrap { position:relative; }
+  .so-chart-svg { width:100%; height:220px; }
+  .so-chart-summary { display:flex; gap:32px; margin-top:12px; }
+  .so-chart-stat { font-size:13px; color:var(--g-text-secondary); }
+  .so-chart-stat strong { color:var(--g-text); font-weight:600; }
+
+  /* 热力图 */
+  .so-heat-wrap { display:flex; gap:20px; align-items:flex-start; }
+  .so-heat-grid { display:grid; grid-template-columns:48px repeat(14, 36px); gap:2px; }
+  .so-heat-header { font-size:11px; color:var(--g-text-muted); display:flex; align-items:center; justify-content:center; height:20px; }
+  .so-heat-row-label { font-size:12px; color:var(--g-text-secondary); display:flex; align-items:center; height:28px; }
+  .so-heat-cell { width:36px; height:28px; border-radius:3px; transition:var(--g-transition); cursor:default; }
+  .so-heat-cell:hover { outline:2px solid var(--primary); outline-offset:-1px; }
+  .so-heat-l0 { background:hsl(212,60%,95%); }
+  .so-heat-l1 { background:hsl(212,70%,82%); }
+  .so-heat-l2 { background:hsl(212,80%,65%); }
+  .so-heat-l3 { background:hsl(212,90%,45%); }
+  .so-heat-legend { display:flex; flex-direction:column; gap:6px; padding-top:24px; }
+  .so-heat-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--g-text-secondary); }
+  .so-heat-legend-dot { width:16px; height:12px; border-radius:2px; }
+
+  /* 渠道对比 */
+  .so-channel-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
+  .so-ch-card { border-radius:var(--g-radius); padding:24px; background:#fff; border:1px solid var(--g-border); transition:var(--g-transition); }
+  .so-ch-card:hover { box-shadow:var(--g-shadow-md); }
+  .so-ch-hd { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
+  .so-ch-icon { width:36px; height:36px; border-radius:var(--g-radius-sm); display:flex; align-items:center; justify-content:center; }
+  .so-ch-icon.waimai { background:hsl(212,100%,95%); color:var(--primary); }
+  .so-ch-icon.ziti { background:hsl(150,60%,94%); color:var(--g-success); }
+  .so-ch-icon.tangshi { background:hsl(30,90%,94%); color:var(--g-warning); }
+  .so-ch-name { font-size:15px; font-weight:600; color:var(--g-text); }
+  .so-ch-metrics { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
+  .so-ch-metric { display:flex; justify-content:space-between; font-size:13px; }
+  .so-ch-metric-label { color:var(--g-text-muted); }
+  .so-ch-metric-val { color:var(--g-text); font-weight:500; }
+  .so-ch-bar-bg { height:8px; background:#f0f0f0; border-radius:4px; overflow:hidden; }
+  .so-ch-bar-fill { height:100%; border-radius:4px; transition:width 0.6s cubic-bezier(.2,0,0,1); }
+  .so-ch-bar-fill.waimai { background:linear-gradient(90deg,#1890ff,#69c0ff); }
+  .so-ch-bar-fill.ziti { background:linear-gradient(90deg,#52c41a,#95de64); }
+  .so-ch-bar-fill.tangshi { background:linear-gradient(90deg,#fa8c16,#ffc069); }
+</style>
+
+<div class="so-page" style="padding:4px 0;">
+
+  <!-- 顶部筛选 -->
+  <div class="g-card" style="padding:16px 20px;">
+    <div class="so-filter">
+      <input type="date" class="so-date-input" value="2026-01-30">
+      <span class="so-date-sep">至</span>
+      <input type="date" class="so-date-input" value="2026-02-12">
+      <div class="so-quick-btns">
+        <button class="so-quick-btn" onclick="pickQuick(this)">今天</button>
+        <button class="so-quick-btn" onclick="pickQuick(this)">近7天</button>
+        <button class="so-quick-btn active" onclick="pickQuick(this)">近14天</button>
+        <button class="so-quick-btn" onclick="pickQuick(this)">本月</button>
+      </div>
+      <div class="so-channel-btns">
+        <button class="so-channel-btn active" onclick="pickChannel(this)">全部</button>
+        <button class="so-channel-btn" onclick="pickChannel(this)">外卖</button>
+        <button class="so-channel-btn" onclick="pickChannel(this)">自提</button>
+        <button class="so-channel-btn" onclick="pickChannel(this)">堂食</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 统计卡片 -->
+  <div class="so-kpi-row">
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="file-text" style="width:16px;height:16px;"></i> 总订单数</div>
+      <div class="so-kpi-value">3,420</div>
+      <div class="so-kpi-sub">较上期 <span class="up">+5.2%</span></div>
+    </div>
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="circle-check" style="width:16px;height:16px;"></i> 有效订单</div>
+      <div class="so-kpi-value">3,286</div>
+      <div class="so-kpi-sub">完成率 <strong style="color:var(--g-success);">96.1%</strong></div>
+    </div>
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="banknote" style="width:16px;height:16px;"></i> 总销售额</div>
+      <div class="so-kpi-value">¥128,600</div>
+      <div class="so-kpi-sub">较上期 <span class="up">+8.7%</span></div>
+    </div>
+    <div class="so-kpi">
+      <div class="so-kpi-label"><i data-lucide="receipt" style="width:16px;height:16px;"></i> 平均客单价</div>
+      <div class="so-kpi-value">¥39.1</div>
+      <div class="so-kpi-sub">环比 <span class="up">+2.3%</span></div>
+    </div>
+  </div>
+
+  <!-- 区块1: 订单趋势 -->
+  <div class="g-card" style="padding:20px 24px;">
+    <div class="so-section-hd">订单趋势</div>
+    <div class="so-chart-wrap">
+      <svg class="so-chart-svg" viewBox="0 0 700 200" preserveAspectRatio="none">
+        <!-- 网格线 -->
+        <line x1="40" y1="10" x2="40" y2="170" stroke="#f0f0f0" stroke-width="1"/>
+        <line x1="40" y1="170" x2="690" y2="170" stroke="#f0f0f0" stroke-width="1"/>
+        <line x1="40" y1="130" x2="690" y2="130" stroke="#f5f5f5" stroke-width="1" stroke-dasharray="4"/>
+        <line x1="40" y1="90" x2="690" y2="90" stroke="#f5f5f5" stroke-width="1" stroke-dasharray="4"/>
+        <line x1="40" y1="50" x2="690" y2="50" stroke="#f5f5f5" stroke-width="1" stroke-dasharray="4"/>
+        <!-- Y轴标签 -->
+        <text x="34" y="174" text-anchor="end" font-size="10" fill="#999">100</text>
+        <text x="34" y="134" text-anchor="end" font-size="10" fill="#999">200</text>
+        <text x="34" y="94" text-anchor="end" font-size="10" fill="#999">300</text>
+        <text x="34" y="54" text-anchor="end" font-size="10" fill="#999">400</text>
+        <!-- 面积 -->
+        <polygon points="87,98 133,106 180,112 226,118 273,130 319,148 366,138 412,78 459,92 505,102 552,96 598,108 645,104 690,100 690,170 87,170"
+          fill="url(#soGrad)" opacity="0.15"/>
+        <defs>
+          <linearGradient id="soGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="hsl(212,100%,45%)"/>
+            <stop offset="100%" stop-color="hsl(212,100%,45%)" stop-opacity="0"/>
+          </linearGradient>
+        </defs>
+        <!-- 折线 -->
+        <polyline points="87,98 133,106 180,112 226,118 273,130 319,148 366,138 412,78 459,92 505,102 552,96 598,108 645,104 690,100"
+          fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
+        <!-- 关键数据点 -->
+        <circle cx="319" cy="148" r="4" fill="#fff" stroke="var(--g-danger)" stroke-width="2"/>
+        <text x="319" y="164" text-anchor="middle" font-size="10" fill="var(--g-danger)">186</text>
+        <circle cx="412" cy="78" r="4" fill="#fff" stroke="var(--g-success)" stroke-width="2"/>
+        <text x="412" y="72" text-anchor="middle" font-size="10" fill="var(--g-success)">312</text>
+        <circle cx="690" cy="100" r="4" fill="#fff" stroke="var(--primary)" stroke-width="2"/>
+        <text x="690" y="94" text-anchor="middle" font-size="10" fill="var(--primary)">248</text>
+        <!-- X轴日期 -->
+        <text x="87" y="186" text-anchor="middle" font-size="10" fill="#999">1/30</text>
+        <text x="180" y="186" text-anchor="middle" font-size="10" fill="#999">2/1</text>
+        <text x="273" y="186" text-anchor="middle" font-size="10" fill="#999">2/3</text>
+        <text x="319" y="186" text-anchor="middle" font-size="10" fill="#999">2/5</text>
+        <text x="412" y="186" text-anchor="middle" font-size="10" fill="#999">2/8</text>
+        <text x="505" y="186" text-anchor="middle" font-size="10" fill="#999">2/10</text>
+        <text x="645" y="186" text-anchor="middle" font-size="10" fill="#999">2/11</text>
+        <text x="690" y="186" text-anchor="middle" font-size="10" fill="#999">2/12</text>
+      </svg>
+    </div>
+    <div class="so-chart-summary">
+      <div class="so-chart-stat">日均订单 <strong>244</strong></div>
+      <div class="so-chart-stat">峰值 <strong>312</strong>（2/8）</div>
+      <div class="so-chart-stat">谷值 <strong>186</strong>（2/5）</div>
+    </div>
+  </div>
+
+  <!-- 区块2: 时段分布热力图 -->
+  <div class="g-card" style="padding:20px 24px;">
+    <div class="so-section-hd">时段分布</div>
+    <div class="so-heat-wrap">
+      <div class="so-heat-grid" id="heatGrid"></div>
+      <div class="so-heat-legend">
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l0"></div>少</div>
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l1"></div>较少</div>
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l2"></div>较多</div>
+        <div class="so-heat-legend-item"><div class="so-heat-legend-dot so-heat-l3"></div>多</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 区块3: 渠道对比 -->
+  <div class="g-card" style="padding:20px 24px;">
+    <div class="so-section-hd">渠道对比</div>
+    <div class="so-channel-row">
+      <!-- 外卖 -->
+      <div class="so-ch-card">
+        <div class="so-ch-hd">
+          <div class="so-ch-icon waimai"><i data-lucide="bike" style="width:20px;height:20px;"></i></div>
+          <div class="so-ch-name">外卖</div>
+          <span class="g-tag g-tag-blue" style="margin-left:auto;">主力渠道</span>
+        </div>
+        <div class="so-ch-metrics">
+          <div class="so-ch-metric"><span class="so-ch-metric-label">订单数</span><span class="so-ch-metric-val">1,881</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">销售额</span><span class="so-ch-metric-val">¥70,730</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">客单价</span><span class="so-ch-metric-val">¥37.6</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">占比</span><span class="so-ch-metric-val">55%</span></div>
+        </div>
+        <div class="so-ch-bar-bg"><div class="so-ch-bar-fill waimai" style="width:55%;"></div></div>
+      </div>
+      <!-- 自提 -->
+      <div class="so-ch-card">
+        <div class="so-ch-hd">
+          <div class="so-ch-icon ziti"><i data-lucide="package" style="width:20px;height:20px;"></i></div>
+          <div class="so-ch-name">自提</div>
+        </div>
+        <div class="so-ch-metrics">
+          <div class="so-ch-metric"><span class="so-ch-metric-label">订单数</span><span class="so-ch-metric-val">855</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">销售额</span><span class="so-ch-metric-val">¥32,150</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">客单价</span><span class="so-ch-metric-val">¥37.6</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">占比</span><span class="so-ch-metric-val">25%</span></div>
+        </div>
+        <div class="so-ch-bar-bg"><div class="so-ch-bar-fill ziti" style="width:25%;"></div></div>
+      </div>
+      <!-- 堂食 -->
+      <div class="so-ch-card">
+        <div class="so-ch-hd">
+          <div class="so-ch-icon tangshi"><i data-lucide="utensils" style="width:20px;height:20px;"></i></div>
+          <div class="so-ch-name">堂食</div>
+        </div>
+        <div class="so-ch-metrics">
+          <div class="so-ch-metric"><span class="so-ch-metric-label">订单数</span><span class="so-ch-metric-val">684</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">销售额</span><span class="so-ch-metric-val">¥25,720</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">客单价</span><span class="so-ch-metric-val">¥37.6</span></div>
+          <div class="so-ch-metric"><span class="so-ch-metric-label">占比</span><span class="so-ch-metric-val">20%</span></div>
+        </div>
+        <div class="so-ch-bar-bg"><div class="so-ch-bar-fill tangshi" style="width:20%;"></div></div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<script>
+  /* 快捷日期按钮 */
+  function pickQuick(el) {
+    el.parentElement.querySelectorAll('.so-quick-btn').forEach(function(b){ b.classList.remove('active'); });
+    el.classList.add('active');
+  }
+  /* 渠道按钮 */
+  function pickChannel(el) {
+    el.parentElement.querySelectorAll('.so-channel-btn').forEach(function(b){ b.classList.remove('active'); });
+    el.classList.add('active');
+  }
+
+  /* 生成热力图 */
+  (function(){
+    var days = ['周一','周二','周三','周四','周五','周六','周日'];
+    var hours = [];
+    for(var h=9; h<=22; h++) hours.push(h+':00');
+    var grid = document.getElementById('heatGrid');
+    // 模拟数据：周末午晚高峰密度高
+    var data = [
+      [0,0,1,1,2,1,1,0,0,1,2,2,1,0],
+      [0,0,1,1,2,1,0,0,0,1,2,1,1,0],
+      [0,1,1,2,2,1,1,0,1,2,2,2,1,0],
+      [0,0,1,2,2,1,1,0,1,2,3,2,1,0],
+      [0,1,2,2,3,2,1,1,2,3,3,2,1,0],
+      [1,2,2,3,3,2,2,1,2,3,3,3,2,1],
+      [1,2,2,3,3,2,1,1,2,3,3,2,2,1]
+    ];
+    // 表头行
+    var blank = document.createElement('div');
+    blank.className = 'so-heat-header';
+    grid.appendChild(blank);
+    hours.forEach(function(h){
+      var hd = document.createElement('div');
+      hd.className = 'so-heat-header';
+      hd.textContent = h;
+      grid.appendChild(hd);
+    });
+    // 数据行
+    days.forEach(function(day, di){
+      var label = document.createElement('div');
+      label.className = 'so-heat-row-label';
+      label.textContent = day;
+      grid.appendChild(label);
+      data[di].forEach(function(v){
+        var cell = document.createElement('div');
+        cell.className = 'so-heat-cell so-heat-l' + v;
+        grid.appendChild(cell);
+      });
+    });
+  })();
+
+  /* Lucide 图标初始化 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>

pages/stat-product.html

@@ -0,0 +1,248 @@
+<!-- 商品分析 — stat-product.html -->
+<style>
+  /* ---- page-private: sp- prefix ---- */
+  .sp-page { display: flex; flex-direction: column; gap: 16px; font-size: 13px; color: var(--g-text); }
+
+  /* 顶部筛选栏 */
+  .sp-toolbar {
+    background: #fff; border-radius: var(--g-radius); padding: 14px 20px;
+    display: flex; align-items: center; justify-content: space-between;
+    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
+  }
+  .sp-month-picker {
+    display: flex; align-items: center; gap: 12px; user-select: none;
+  }
+  .sp-month-arrow {
+    width: 28px; height: 28px; border-radius: var(--g-radius-sm);
+    border: 1px solid var(--g-border); background: #fff;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: var(--g-transition); color: var(--g-text-secondary);
+  }
+  .sp-month-arrow:hover { border-color: var(--primary); color: var(--primary); }
+  .sp-month-text { font-size: 15px; font-weight: 600; min-width: 100px; text-align: center; }
+
+  /* 统计卡片行 */
+  .sp-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+  .sp-kpi-card {
+    background: #fff; border-radius: var(--g-radius); padding: 20px 22px;
+    border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm);
+    transition: var(--g-transition); display: flex; flex-direction: column; gap: 8px;
+  }
+  .sp-kpi-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
+  .sp-kpi-label { font-size: 12px; color: var(--g-text-muted); display: flex; align-items: center; gap: 6px; }
+  .sp-kpi-label i { width: 16px; height: 16px; }
+  .sp-kpi-val { font-size: 26px; font-weight: 700; color: var(--g-text); letter-spacing: -0.5px; }
+
+  /* 分段 + 内容区 */
+  .sp-content-card {
+    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
+    box-shadow: var(--g-shadow-sm); overflow: hidden;
+  }
+  .sp-content-hd { padding: 16px 20px 0; }
+  .sp-tab-panel { display: none; }
+  .sp-tab-panel.active { display: block; }
+
+  /* 排名高亮 */
+  .sp-rank-top { color: var(--primary); font-weight: 700; }
+  .sp-trend-up { color: var(--g-success); font-weight: 500; }
+  .sp-trend-down { color: var(--g-danger); font-weight: 500; }
+
+  /* 品类分析布局 */
+  .sp-category-wrap { display: flex; gap: 32px; padding: 20px; align-items: flex-start; }
+  .sp-donut-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
+  .sp-donut {
+    width: 180px; height: 180px; border-radius: 50%; position: relative;
+    background: conic-gradient(
+      var(--primary) 0deg 162deg,
+      #22c55e 162deg 252deg,
+      #f59e0b 252deg 316.8deg,
+      #a855f7 316.8deg 360deg
+    );
+  }
+  .sp-donut-center {
+    position: absolute; inset: 36px; background: #fff; border-radius: 50%;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+  }
+  .sp-donut-center .num { font-size: 22px; font-weight: 700; color: var(--g-text); }
+  .sp-donut-center .txt { font-size: 11px; color: var(--g-text-muted); }
+  .sp-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; }
+  .sp-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-text-secondary); }
+  .sp-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
+  .sp-category-table { flex: 1; min-width: 0; }
+
+  /* 滞销预警提示条 */
+  .sp-warn-bar {
+    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
+    background: #fffbe6; border: 1px solid #ffe58f; border-radius: var(--g-radius-sm);
+    margin: 16px 20px 0; font-size: 13px; color: #ad6800;
+  }
+  .sp-warn-bar i { width: 16px; height: 16px; flex-shrink: 0; }
+  .sp-low-sales { color: var(--g-danger); font-weight: 600; }
+</style>
+
+<div class="sp-page">
+  <!-- 顶部筛选栏 -->
+  <div class="sp-toolbar">
+    <div class="sp-month-picker">
+      <div class="sp-month-arrow" onclick="spChangeMonth(-1)"><i data-lucide="chevron-left" style="width:16px;height:16px;"></i></div>
+      <span class="sp-month-text" id="spMonthText">2026年2月</span>
+      <div class="sp-month-arrow" onclick="spChangeMonth(1)"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></div>
+    </div>
+    <select class="g-select" style="width:160px;">
+      <option>全部渠道</option>
+      <option>外卖</option>
+      <option>自提</option>
+      <option>堂食</option>
+    </select>
+  </div>
+
+  <!-- 统计卡片行 -->
+  <div class="sp-kpi-row">
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="package"></i> 在售商品数</div>
+      <div class="sp-kpi-val">86</div>
+    </div>
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="shopping-bag"></i> 本月销量</div>
+      <div class="sp-kpi-val">3,420</div>
+    </div>
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="banknote"></i> 销售额</div>
+      <div class="sp-kpi-val">¥45,680</div>
+    </div>
+    <div class="sp-kpi-card">
+      <div class="sp-kpi-label"><i data-lucide="receipt"></i> 平均客单价</div>
+      <div class="sp-kpi-val">¥38.5</div>
+    </div>
+  </div>
+
+  <!-- 分段Tab + 内容 -->
+  <div class="sp-content-card">
+    <div class="sp-content-hd">
+      <div class="g-seg">
+        <div class="g-seg-item active" onclick="spSwitchTab(this,'rank')">销量排行</div>
+        <div class="g-seg-item" onclick="spSwitchTab(this,'category')">品类分析</div>
+        <div class="g-seg-item" onclick="spSwitchTab(this,'slow')">滞销预警</div>
+      </div>
+    </div>
+
+    <!-- Tab1: 销量排行 -->
+    <div id="spTabRank" class="sp-tab-panel active">
+      <table class="g-table">
+        <thead>
+          <tr>
+            <th style="width:60px;">排名</th>
+            <th>商品名称</th>
+            <th>品类</th>
+            <th style="text-align:right;">销量</th>
+            <th style="text-align:right;">销售额</th>
+            <th style="text-align:right;">占比</th>
+            <th style="text-align:right;">趋势</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td class="sp-rank-top">1</td><td>招牌牛肉饭</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">520</td><td style="text-align:right;">¥7,800</td><td style="text-align:right;">15.2%</td><td style="text-align:right;" class="sp-trend-up">↑ 12.3%</td></tr>
+          <tr><td class="sp-rank-top">2</td><td>香辣鸡腿堡</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">468</td><td style="text-align:right;">¥6,552</td><td style="text-align:right;">13.7%</td><td style="text-align:right;" class="sp-trend-up">↑ 8.1%</td></tr>
+          <tr><td class="sp-rank-top">3</td><td>珍珠奶茶</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">412</td><td style="text-align:right;">¥4,944</td><td style="text-align:right;">12.0%</td><td style="text-align:right;" class="sp-trend-down">↓ 2.5%</td></tr>
+          <tr><td>4</td><td>黄焖鸡米饭</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">356</td><td style="text-align:right;">¥5,340</td><td style="text-align:right;">10.4%</td><td style="text-align:right;" class="sp-trend-up">↑ 5.6%</td></tr>
+          <tr><td>5</td><td>薯条（大份）</td><td><span class="g-tag g-tag-orange">小吃</span></td><td style="text-align:right;">298</td><td style="text-align:right;">¥2,980</td><td style="text-align:right;">8.7%</td><td style="text-align:right;" class="sp-trend-down">↓ 1.2%</td></tr>
+          <tr><td>6</td><td>冰美式咖啡</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">265</td><td style="text-align:right;">¥3,180</td><td style="text-align:right;">7.7%</td><td style="text-align:right;" class="sp-trend-up">↑ 15.8%</td></tr>
+          <tr><td>7</td><td>芒果千层蛋糕</td><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;">224</td><td style="text-align:right;">¥4,480</td><td style="text-align:right;">6.5%</td><td style="text-align:right;" class="sp-trend-up">↑ 3.2%</td></tr>
+          <tr><td>8</td><td>鸡米花</td><td><span class="g-tag g-tag-orange">小吃</span></td><td style="text-align:right;">198</td><td style="text-align:right;">¥1,584</td><td style="text-align:right;">5.8%</td><td style="text-align:right;" class="sp-trend-down">↓ 4.7%</td></tr>
+          <tr><td>9</td><td>麻辣烫套餐</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">176</td><td style="text-align:right;">¥3,520</td><td style="text-align:right;">5.1%</td><td style="text-align:right;" class="sp-trend-up">↑ 6.9%</td></tr>
+          <tr><td>10</td><td>柠檬茶</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">153</td><td style="text-align:right;">¥1,530</td><td style="text-align:right;">4.5%</td><td style="text-align:right;" class="sp-trend-down">↓ 0.8%</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Tab2: 品类分析 -->
+    <div id="spTabCategory" class="sp-tab-panel">
+      <div class="sp-category-wrap">
+        <div class="sp-donut-wrap">
+          <div class="sp-donut">
+            <div class="sp-donut-center">
+              <span class="num">3,420</span>
+              <span class="txt">总销量</span>
+            </div>
+          </div>
+          <div class="sp-legend">
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:var(--primary);"></span> 主食 45%</div>
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:#22c55e;"></span> 饮品 25%</div>
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:#f59e0b;"></span> 小吃 18%</div>
+            <div class="sp-legend-item"><span class="sp-legend-dot" style="background:#a855f7;"></span> 甜品 12%</div>
+          </div>
+        </div>
+        <div class="sp-category-table">
+          <table class="g-table">
+            <thead>
+              <tr>
+                <th>品类</th>
+                <th style="text-align:right;">商品数</th>
+                <th style="text-align:right;">销量</th>
+                <th style="text-align:right;">销售额</th>
+                <th style="text-align:right;">占比</th>
+                <th style="text-align:right;">环比变化</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;">32</td><td style="text-align:right;">1,539</td><td style="text-align:right;">¥23,085</td><td style="text-align:right;">45%</td><td style="text-align:right;" class="sp-trend-up">↑ 6.2%</td></tr>
+              <tr><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;">22</td><td style="text-align:right;">855</td><td style="text-align:right;">¥10,260</td><td style="text-align:right;">25%</td><td style="text-align:right;" class="sp-trend-down">↓ 1.8%</td></tr>
+              <tr><td><span class="g-tag g-tag-orange">小吃</span></td><td style="text-align:right;">18</td><td style="text-align:right;">616</td><td style="text-align:right;">¥6,160</td><td style="text-align:right;">18%</td><td style="text-align:right;" class="sp-trend-up">↑ 3.5%</td></tr>
+              <tr><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;">14</td><td style="text-align:right;">410</td><td style="text-align:right;">¥6,175</td><td style="text-align:right;">12%</td><td style="text-align:right;" class="sp-trend-up">↑ 9.1%</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab3: 滞销预警 -->
+    <div id="spTabSlow" class="sp-tab-panel">
+      <div class="sp-warn-bar">
+        <i data-lucide="alert-triangle"></i>
+        以下商品近30天销量低于5单，建议优化或下架
+      </div>
+      <table class="g-table" style="margin-top:0;">
+        <thead>
+          <tr>
+            <th>商品名称</th>
+            <th>品类</th>
+            <th style="text-align:right;">近30天销量</th>
+            <th style="text-align:right;">库存</th>
+            <th style="text-align:right;">上架天数</th>
+            <th style="text-align:center;">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>蓝莓慕斯</td><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;" class="sp-low-sales">2</td><td style="text-align:right;">15</td><td style="text-align:right;">120</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>抹茶拿铁</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;" class="sp-low-sales">3</td><td style="text-align:right;">28</td><td style="text-align:right;">90</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>芝士焗饭</td><td><span class="g-tag g-tag-blue">主食</span></td><td style="text-align:right;" class="sp-low-sales">1</td><td style="text-align:right;">8</td><td style="text-align:right;">180</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>杨枝甘露</td><td><span class="g-tag g-tag-green">饮品</span></td><td style="text-align:right;" class="sp-low-sales">4</td><td style="text-align:right;">20</td><td style="text-align:right;">60</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+          <tr><td>香草冰淇淋</td><td><span class="g-tag g-tag-purple">甜品</span></td><td style="text-align:right;" class="sp-low-sales">0</td><td style="text-align:right;">35</td><td style="text-align:right;">210</td><td style="text-align:center;"><a class="g-action">查看</a> <a class="g-action g-action-danger">下架</a></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  /* 分段Tab切换 */
+  function spSwitchTab(el, tab) {
+    el.parentElement.querySelectorAll('.g-seg-item').forEach(function(s) { s.classList.remove('active'); });
+    el.classList.add('active');
+    document.querySelectorAll('.sp-tab-panel').forEach(function(p) { p.classList.remove('active'); });
+    var map = { rank: 'spTabRank', category: 'spTabCategory', slow: 'spTabSlow' };
+    document.getElementById(map[tab]).classList.add('active');
+  }
+
+  /* 月份切换（纯展示） */
+  var spMonth = 2, spYear = 2026;
+  function spChangeMonth(dir) {
+    spMonth += dir;
+    if (spMonth > 12) { spMonth = 1; spYear++; }
+    if (spMonth < 1) { spMonth = 12; spYear--; }
+    document.getElementById('spMonthText').textContent = spYear + '年' + spMonth + '月';
+  }
+
+  /* 初始化图标 */
+  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
+</script>