msumshk/TakeoutSaaS.Prototypes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成财务中心模块并适配不碰资金商业模式

Browse Source 
- 新增6个财务页面：财务概览、交易流水、到账查询、成本管理、发票管理、经营报表
- 移除提现管理，结算管理简化为到账查询（T+1渠道到账记录）
- 交易流水去掉手续费/实收/提现，优化快捷日期、备注列、汇总行
- 成本管理去掉平台费用列
- 侧边栏和pageMap同步更新
This commit is contained in:
MSuMshk
2026-02-12 16:49:37 +08:00
parent e16c30791e
commit c74889932e
7 changed files with 1779 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@@ -680,9 +680,12 @@
<i data-lucide="chevron-right" class="menu-arrow"></i>
</div>
<div class="menu-sub" id="menu-finance">
<div class="menu-item" data-tab="收入明细" onclick="switchTab(this, '收入明细')"><span class="menu-label">收入明细</span></div>
<div class="menu-item" data-tab="提现管理" onclick="switchTab(this, '提现管理')"><span class="menu-label">提现管理</span></div>
<div class="menu-item" data-tab="对账单" onclick="switchTab(this, '对账单')"><span class="menu-label">对账单</span></div>
<div class="menu-item" data-tab="财务概览" onclick="switchTab(this, '财务概览')"><span class="menu-label">财务概览</span></div>
<div class="menu-item" data-tab="交易流水" onclick="switchTab(this, '交易流水')"><span class="menu-label">交易流水</span></div>
<div class="menu-item" data-tab="到账查询" onclick="switchTab(this, '到账查询')"><span class="menu-label">到账查询</span></div>
<div class="menu-item" data-tab="成本管理" onclick="switchTab(this, '成本管理')"><span class="menu-label">成本管理</span></div>
<div class="menu-item" data-tab="发票管理" onclick="switchTab(this, '发票管理')"><span class="menu-label">发票管理</span></div>
<div class="menu-item" data-tab="经营报表" onclick="switchTab(this, '经营报表')"><span class="menu-label">经营报表</span></div>
</div>
</div>
@@ -1189,6 +1192,12 @@
'积分商城': 'pages/mbr-points.html',
'客户画像': 'pages/mbr-customers.html',
'消息触达': 'pages/mbr-messaging.html',
'财务概览': 'pages/fin-overview.html',
'交易流水': 'pages/fin-transactions.html',
'到账查询': 'pages/fin-settlement.html',
'成本管理': 'pages/fin-cost.html',
'发票管理': 'pages/fin-invoice.html',
'经营报表': 'pages/fin-reports.html',
};
// Page cache

306
pages/fin-cost.html Normal file
View File

@@ -0,0 +1,306 @@
<!-- 成本管理页 -->
<style>
.fc-page { max-width:1000px; }
.fc-seg { display:flex; background:#f8f9fb; border-radius:var(--g-radius); padding:3px; gap:2px; width:fit-content; margin-bottom:20px; }
.fc-seg-item { padding:7px 28px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--g-text-secondary); transition:var(--g-transition); border:none; background:none; font-weight:500; }
.fc-seg-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
/* 月份选择器 */
.fc-month-picker { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.fc-month-arrow { width:32px; height:32px; border-radius:var(--g-radius); border:1px solid #e5e7eb; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--g-transition); }
.fc-month-arrow:hover { border-color:var(--primary); color:var(--primary); }
.fc-month-title { font-size:16px; font-weight:700; color:var(--g-text); min-width:120px; text-align:center; }
/* 成本卡片 */
.fc-cost-card { margin-bottom:16px; }
.fc-cost-hd { display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; user-select:none; }
.fc-cost-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fc-cost-icon.food { background:#eff6ff; color:#2563eb; }
.fc-cost-icon.labor { background:#f0fdf4; color:#16a34a; }
.fc-cost-icon.fixed { background:#fefce8; color:#ca8a04; }
.fc-cost-icon.pack { background:#fdf2f8; color:#db2777; }
.fc-cost-name { font-size:14px; font-weight:600; color:var(--g-text); }
.fc-cost-pct { font-size:12px; color:var(--g-text-muted); margin-left:4px; }
.fc-cost-total { margin-left:auto; display:flex; align-items:center; gap:8px; }
.fc-cost-total .fc-yen { font-size:13px; color:var(--g-text-secondary); }
.fc-cost-input { width:120px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:6px; font-size:14px; font-weight:600; text-align:right; outline:none; transition:var(--g-transition); }
.fc-cost-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.fc-expand-btn { font-size:12px; color:var(--primary); cursor:pointer; display:flex; align-items:center; gap:4px; transition:var(--g-transition); white-space:nowrap; }
.fc-expand-btn:hover { opacity:.7; }
/* 明细区域 */
.fc-detail { display:none; padding:0 20px 16px; }
.fc-detail.open { display:block; }
.fc-detail-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f3f4f6; font-size:13px; }
.fc-detail-row:last-child { border-bottom:none; }
.fc-detail-name { width:120px; color:var(--g-text); font-weight:500; }
.fc-detail-val { width:100px; }
.fc-detail-val input { width:100%; height:30px; padding:0 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; text-align:right; outline:none; transition:var(--g-transition); }
.fc-detail-val input:focus { border-color:var(--primary); }
.fc-detail-extra { font-size:12px; color:var(--g-text-muted); }
.fc-detail-sub { font-size:13px; font-weight:600; color:var(--g-text); width:80px; text-align:right; }
.fc-add-row { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--primary); cursor:pointer; margin-top:8px; transition:var(--g-transition); }
.fc-add-row:hover { opacity:.7; }
.fc-del-row { color:#ef4444; cursor:pointer; margin-left:6px; transition:var(--g-transition); }
.fc-del-row:hover { opacity:.7; }
/* 汇总行 */
.fc-summary { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#f8f9fb; border-radius:var(--g-radius); margin-top:8px; }
.fc-summary-label { font-size:15px; font-weight:700; color:var(--g-text); }
.fc-summary-val { font-size:22px; font-weight:800; color:var(--primary); }
/* 分析 - 统计卡片 */
.fc-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.fc-stat-card { padding:18px; border-radius:10px; background:#fff; border:1px solid #f0f0f0; transition:var(--g-transition); }
.fc-stat-card:hover { box-shadow:var(--g-shadow-md); }
.fc-stat-label { font-size:12px; color:var(--g-text-muted); margin-bottom:8px; }
.fc-stat-val { font-size:22px; font-weight:800; color:var(--g-text); }
.fc-stat-val .fc-up { color:#ef4444; font-size:13px; font-weight:600; }
.fc-stat-val .fc-down { color:var(--g-success); font-size:13px; font-weight:600; }
/* 趋势图占位 */
.fc-chart-placeholder { height:220px; border:2px dashed #e5e7eb; border-radius:var(--g-radius); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--g-text-muted); gap:8px; margin-bottom:20px; background:#fafafa; }
.fc-chart-placeholder .fc-chart-title { font-size:14px; font-weight:600; color:var(--g-text-secondary); }
.fc-chart-bars { display:flex; align-items:flex-end; gap:16px; height:100px; }
.fc-chart-bar { width:40px; border-radius:4px 4px 0 0; background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff), color-mix(in srgb, var(--primary) 40%, #fff)); }
/* 饼图 */
.fc-pie-section { display:flex; gap:24px; align-items:center; margin-bottom:20px; }
.fc-donut { width:160px; height:160px; border-radius:50%; position:relative; flex-shrink:0; background:conic-gradient(#2563eb 0% 44%, #16a34a 44% 72%, #ca8a04 72% 92%, #db2777 92% 100%); }
.fc-donut-center { position:absolute; inset:32px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fc-donut-center .num { font-size:18px; font-weight:800; color:var(--g-text); }
.fc-donut-center .txt { font-size:11px; color:var(--g-text-muted); }
.fc-legend { display:flex; flex-direction:column; gap:12px; }
.fc-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-text); }
.fc-legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.fc-legend-pct { margin-left:auto; font-weight:600; min-width:40px; text-align:right; }
/* 明细表格 */
.fc-table { width:100%; border-collapse:collapse; font-size:13px; }
.fc-table th { background:#f8f9fb; padding:10px 12px; text-align:right; font-weight:600; color:var(--g-text-secondary); border-bottom:1px solid #e5e7eb; }
.fc-table th:first-child { text-align:left; }
.fc-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:var(--g-text); text-align:right; }
.fc-table td:first-child { text-align:left; font-weight:500; }
.fc-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
.fc-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
</style>
<div class="fc-page">
<!-- 分段Tab -->
<div class="fc-seg">
<button class="fc-seg-item active" onclick="fcSwitchTab(this,'fc-tab-entry')">成本录入</button>
<button class="fc-seg-item" onclick="fcSwitchTab(this,'fc-tab-analysis')">成本分析</button>
</div>
<!-- Tab1: 成本录入 -->
<div id="fc-tab-entry">
<!-- 月份选择器 -->
<div class="fc-month-picker">
<div class="fc-month-arrow" onclick="fcChangeMonth(-1)"><i data-lucide="chevron-left" style="width:16px;height:16px;"></i></div>
<div class="fc-month-title" id="fcMonthTitle">2026年2月</div>
<div class="fc-month-arrow" onclick="fcChangeMonth(1)"><i data-lucide="chevron-right" style="width:16px;height:16px;"></i></div>
</div>
<!-- 食材原料 -->
<div class="g-card fc-cost-card">
<div class="fc-cost-hd" onclick="fcToggleDetail('food')">
<div class="fc-cost-icon food"><i data-lucide="utensils-crossed" style="width:20px;height:20px;"></i></div>
<div>
<div class="fc-cost-name">食材原料 <span class="fc-cost-pct">43.8%</span></div>
</div>
<div class="fc-cost-total">
<span class="fc-yen">¥</span>
<input class="fc-cost-input" type="number" value="18500" placeholder="请输入金额">
</div>
<div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowFood"></i>明细</div>
</div>
<div class="fc-detail" id="fcDetailFood">
<div class="fc-detail-row"><span class="fc-detail-name">肉类</span><div class="fc-detail-val"><input value="8200" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">蔬菜</span><div class="fc-detail-val"><input value="4800" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">调料</span><div class="fc-detail-val"><input value="3000" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">饮品原料</span><div class="fc-detail-val"><input value="2500" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加品类</div>
</div>
</div>
<!-- 人工成本 -->
<div class="g-card fc-cost-card">
<div class="fc-cost-hd" onclick="fcToggleDetail('labor')">
<div class="fc-cost-icon labor"><i data-lucide="users" style="width:20px;height:20px;"></i></div>
<div>
<div class="fc-cost-name">人工成本 <span class="fc-cost-pct">28.4%</span></div>
</div>
<div class="fc-cost-total">
<span class="fc-yen">¥</span>
<input class="fc-cost-input" type="number" value="12000" placeholder="请输入金额">
</div>
<div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowLabor"></i>明细</div>
</div>
<div class="fc-detail" id="fcDetailLabor">
<div class="fc-detail-row"><span class="fc-detail-name">厨师</span><div class="fc-detail-val"><input value="2" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="4000" placeholder="月薪"></div><div class="fc-detail-sub">¥8,000</div></div>
<div class="fc-detail-row"><span class="fc-detail-name">服务员</span><div class="fc-detail-val"><input value="1" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="2000" placeholder="月薪"></div><div class="fc-detail-sub">¥2,000</div></div>
<div class="fc-detail-row"><span class="fc-detail-name">配送员</span><div class="fc-detail-val"><input value="1" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="1000" placeholder="月薪"></div><div class="fc-detail-sub">¥1,000</div></div>
<div class="fc-detail-row"><span class="fc-detail-name">管理</span><div class="fc-detail-val"><input value="1" placeholder="人数" style="width:50px;"></div><div class="fc-detail-val"><input value="1000" placeholder="月薪"></div><div class="fc-detail-sub">¥1,000</div></div>
<div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加岗位</div>
</div>
</div>
<!-- 固定费用 -->
<div class="g-card fc-cost-card">
<div class="fc-cost-hd" onclick="fcToggleDetail('fixed')">
<div class="fc-cost-icon fixed"><i data-lucide="building" style="width:20px;height:20px;"></i></div>
<div>
<div class="fc-cost-name">固定费用 <span class="fc-cost-pct">20.1%</span></div>
</div>
<div class="fc-cost-total">
<span class="fc-yen">¥</span>
<input class="fc-cost-input" type="number" value="8500" placeholder="请输入金额">
</div>
<div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowFixed"></i>明细</div>
</div>
<div class="fc-detail" id="fcDetailFixed">
<div class="fc-detail-row"><span class="fc-detail-name">房租</span><div class="fc-detail-val"><input value="5000" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">水电</span><div class="fc-detail-val"><input value="1500" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">设备折旧</span><div class="fc-detail-val"><input value="2000" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加项目</div>
</div>
</div>
<!-- 包装耗材 -->
<div class="g-card fc-cost-card">
<div class="fc-cost-hd" onclick="fcToggleDetail('pack')">
<div class="fc-cost-icon pack"><i data-lucide="package" style="width:20px;height:20px;"></i></div>
<div>
<div class="fc-cost-name">包装耗材 <span class="fc-cost-pct">7.6%</span></div>
</div>
<div class="fc-cost-total">
<span class="fc-yen">¥</span>
<input class="fc-cost-input" type="number" value="3200" placeholder="请输入金额">
</div>
<div class="fc-expand-btn"><i data-lucide="chevron-down" style="width:14px;height:14px;" id="fcArrowPack"></i>明细</div>
</div>
<div class="fc-detail" id="fcDetailPack">
<div class="fc-detail-row"><span class="fc-detail-name">外卖盒</span><div class="fc-detail-val"><input value="1800" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">袋子</span><div class="fc-detail-val"><input value="600" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">餐具</span><div class="fc-detail-val"><input value="500" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-detail-row"><span class="fc-detail-name">其他</span><div class="fc-detail-val"><input value="300" placeholder="金额"></div><span class="fc-del-row"><i data-lucide="x" style="width:14px;height:14px;"></i></span></div>
<div class="fc-add-row" onclick="void(0)"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加项目</div>
</div>
</div>
<!-- 汇总 -->
<div class="fc-summary">
<div class="fc-summary-label">本月总成本</div>
<div style="display:flex;align-items:center;gap:16px;">
<div class="fc-summary-val">¥42,200</div>
<button class="g-btn g-btn-primary">保存</button>
</div>
</div>
</div>
<!-- Tab2: 成本分析 -->
<div id="fc-tab-analysis" style="display:none;">
<!-- 统计卡片 -->
<div class="fc-stat-row">
<div class="fc-stat-card">
<div class="fc-stat-label">本月总成本</div>
<div class="fc-stat-val">¥42,200</div>
</div>
<div class="fc-stat-card">
<div class="fc-stat-label">食材成本率</div>
<div class="fc-stat-val">38.5%</div>
</div>
<div class="fc-stat-card">
<div class="fc-stat-label">单均成本</div>
<div class="fc-stat-val">¥12.4</div>
</div>
<div class="fc-stat-card">
<div class="fc-stat-label">环比变化</div>
<div class="fc-stat-val"><span class="fc-up">&#8593; 3.2%</span></div>
</div>
</div>
<!-- 月度趋势 -->
<div class="g-card" style="padding:20px; margin-bottom:20px;">
<div class="fc-section-hd">近6个月成本趋势</div>
<div class="fc-chart-placeholder">
<div class="fc-chart-bars">
<div style="text-align:center;"><div class="fc-chart-bar" style="height:65px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">9月</div></div>
<div style="text-align:center;"><div class="fc-chart-bar" style="height:72px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">10月</div></div>
<div style="text-align:center;"><div class="fc-chart-bar" style="height:80px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">11月</div></div>
<div style="text-align:center;"><div class="fc-chart-bar" style="height:68px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">12月</div></div>
<div style="text-align:center;"><div class="fc-chart-bar" style="height:75px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">1月</div></div>
<div style="text-align:center;"><div class="fc-chart-bar" style="height:88px;"></div><div style="font-size:11px;color:var(--g-text-muted);margin-top:6px;">2月</div></div>
</div>
<div style="font-size:12px;color:var(--g-text-muted);">成本趋势图表区域</div>
</div>
</div>
<!-- 成本构成饼图 -->
<div class="g-card" style="padding:20px; margin-bottom:20px;">
<div class="fc-section-hd">成本构成</div>
<div class="fc-pie-section">
<div class="fc-donut">
<div class="fc-donut-center">
<div class="num">¥42.2k</div>
<div class="txt">总成本</div>
</div>
</div>
<div class="fc-legend">
<div class="fc-legend-item"><span class="fc-legend-dot" style="background:#2563eb;"></span>食材原料<span class="fc-legend-pct">44%</span></div>
<div class="fc-legend-item"><span class="fc-legend-dot" style="background:#16a34a;"></span>人工成本<span class="fc-legend-pct">28%</span></div>
<div class="fc-legend-item"><span class="fc-legend-dot" style="background:#ca8a04;"></span>固定费用<span class="fc-legend-pct">20%</span></div>
<div class="fc-legend-item"><span class="fc-legend-dot" style="background:#db2777;"></span>包装耗材<span class="fc-legend-pct">8%</span></div>
</div>
</div>
</div>
<!-- 成本明细表格 -->
<div class="g-card" style="padding:20px;">
<div class="fc-section-hd">成本明细</div>
<table class="fc-table">
<thead>
<tr><th>月份</th><th>食材</th><th>人工</th><th>固定</th><th>包装</th><th>总计</th><th>成本率</th></tr>
</thead>
<tbody>
<tr><td>2026-02</td><td>¥18,500</td><td>¥12,000</td><td>¥8,500</td><td>¥3,200</td><td>¥42,200</td><td>38.5%</td></tr>
<tr><td>2026-01</td><td>¥17,800</td><td>¥12,000</td><td>¥8,500</td><td>¥3,100</td><td>¥41,400</td><td>37.8%</td></tr>
<tr><td>2025-12</td><td>¥19,200</td><td>¥11,500</td><td>¥8,500</td><td>¥3,400</td><td>¥42,600</td><td>39.2%</td></tr>
<tr><td>2025-11</td><td>¥16,500</td><td>¥11,500</td><td>¥8,500</td><td>¥2,900</td><td>¥39,400</td><td>36.5%</td></tr>
<tr><td>2025-10</td><td>¥15,800</td><td>¥11,000</td><td>¥8,500</td><td>¥2,800</td><td>¥38,100</td><td>35.9%</td></tr>
<tr><td>2025-09</td><td>¥14,600</td><td>¥11,000</td><td>¥8,500</td><td>¥2,600</td><td>¥36,700</td><td>34.8%</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// Tab切换
function fcSwitchTab(el, tabId) {
document.querySelectorAll('.fc-seg-item').forEach(b => b.classList.remove('active'));
el.classList.add('active');
document.getElementById('fc-tab-entry').style.display = tabId === 'fc-tab-entry' ? '' : 'none';
document.getElementById('fc-tab-analysis').style.display = tabId === 'fc-tab-analysis' ? '' : 'none';
}
// 月份切换
var fcMonth = 2, fcYear = 2026;
function fcChangeMonth(dir) {
fcMonth += dir;
if (fcMonth > 12) { fcMonth = 1; fcYear++; }
if (fcMonth < 1) { fcMonth = 12; fcYear--; }
document.getElementById('fcMonthTitle').textContent = fcYear + '年' + fcMonth + '月';
}
// 展开/收起明细
function fcToggleDetail(type) {
var map = { food: 'fcDetailFood', labor: 'fcDetailLabor', fixed: 'fcDetailFixed', pack: 'fcDetailPack' };
var el = document.getElementById(map[type]);
if (el) el.classList.toggle('open');
}
// 初始化Lucide图标
if (typeof lucide !== 'undefined') lucide.createIcons();
</script>

268
pages/fin-invoice.html Normal file
View File

@@ -0,0 +1,268 @@
<!-- 发票管理页 -->
<style>
.fi-seg-wrap{margin-bottom:16px;}
.fi-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.fi-stat-card{background:#fff;border-radius:var(--g-radius);padding:18px 20px;box-shadow:var(--g-shadow-sm);transition:var(--g-transition);}
.fi-stat-card:hover{box-shadow:var(--g-shadow-md);}
.fi-stat-label{font-size:13px;color:var(--g-text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.fi-stat-label i{width:16px;height:16px;}
.fi-stat-val{font-size:24px;font-weight:700;color:var(--g-text);}
.fi-stat-sub{font-size:12px;color:var(--g-text-muted);margin-top:4px;}
.fi-stat-card.warn .fi-stat-val{color:var(--g-warning);}
.fi-stat-card.danger .fi-stat-val{color:var(--g-danger);}
.fi-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;background:#fff;padding:12px 16px;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);flex-wrap:wrap;}
.fi-toolbar input[type=date],.fi-toolbar select{height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;outline:none;background:#fff;transition:var(--g-transition);}
.fi-toolbar input[type=date]:focus,.fi-toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);}
.fi-toolbar .fi-search{height:34px;padding:0 10px 0 32px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;outline:none;width:200px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 10px center no-repeat;transition:var(--g-transition);}
.fi-toolbar .fi-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);}
.fi-date-sep{color:var(--g-text-muted);font-size:13px;}
.fi-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;}
.fi-tag-purple{background:#f9f0ff;color:#722ed1;}
.fi-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;}
.fi-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
.fi-toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.fi-toggle-label{font-size:13px;font-weight:500;color:var(--g-text);}
.fi-toggle-hint{font-size:12px;color:var(--g-text-muted);margin-left:4px;}
.fi-save-bar{margin-top:20px;display:flex;justify-content:flex-end;gap:8px;}
@media(max-width:768px){.fi-stats{grid-template-columns:1fr;}.fi-form-grid{grid-template-columns:1fr;}}
</style>
<!-- 分段控制器 -->
<div class="fi-seg-wrap">
<div class="g-seg">
<div class="g-seg-item active" onclick="switchFiTab(this)" data-tab="records">开票记录</div>
<div class="g-seg-item" onclick="switchFiTab(this)" data-tab="settings">发票设置</div>
</div>
</div>
<!-- Tab1: 开票记录 -->
<div id="fiTabRecords">
<!-- 统计卡片 -->
<div class="fi-stats">
<div class="fi-stat-card">
<div class="fi-stat-label"><i data-lucide="receipt-text"></i>本月开票</div>
<div class="fi-stat-val">&yen;12,400</div>
<div class="fi-stat-sub">共 32 张</div>
</div>
<div class="fi-stat-card warn">
<div class="fi-stat-label"><i data-lucide="clock"></i>待开票</div>
<div class="fi-stat-val">5</div>
<div class="fi-stat-sub">张待处理</div>
</div>
<div class="fi-stat-card danger">
<div class="fi-stat-label"><i data-lucide="ban"></i>已作废</div>
<div class="fi-stat-val">2</div>
<div class="fi-stat-sub">张已作废</div>
</div>
</div>
<!-- 筛选工具栏 -->
<div class="fi-toolbar">
<input type="date" value="2026-01-01" />
<span class="fi-date-sep">至</span>
<input type="date" value="2026-01-31" />
<select>
<option>全部状态</option>
<option>待开票</option>
<option>已开票</option>
<option>已作废</option>
</select>
<select>
<option>全部类型</option>
<option>普通发票</option>
<option>专用发票</option>
</select>
<div style="flex:1;"></div>
<input class="fi-search" type="text" placeholder="搜索发票号码/公司名" />
</div>
<!-- 发票记录表格 -->
<div class="g-card" style="padding:0;">
<table class="g-table">
<thead>
<tr>
<th>发票号码</th>
<th>申请人 / 公司名</th>
<th>发票类型</th>
<th>金额</th>
<th>关联订单</th>
<th>状态</th>
<th>申请时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="fi-mono">INV20260115001</span></td>
<td>北京鼎盛餐饮有限公司</td>
<td><span class="g-tag g-tag-blue">普票</span></td>
<td>&yen;860.00</td>
<td><span class="fi-mono">ORD20260115032</span></td>
<td><span class="g-tag g-tag-orange">待开票</span></td>
<td>2026-01-15 14:30</td>
<td><a class="g-action" href="javascript:;">开票</a></td>
</tr>
<tr>
<td><span class="fi-mono">INV20260114008</span></td>
<td>上海云帆科技有限公司</td>
<td><span class="g-tag fi-tag-purple">专票</span></td>
<td>&yen;2,400.00</td>
<td><span class="fi-mono">ORD20260114021</span></td>
<td><span class="g-tag g-tag-green">已开票</span></td>
<td>2026-01-14 10:15</td>
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
</tr>
<tr>
<td><span class="fi-mono">INV20260113005</span></td>
<td>张伟</td>
<td><span class="g-tag g-tag-blue">普票</span></td>
<td>&yen;156.00</td>
<td><span class="fi-mono">ORD20260113044</span></td>
<td><span class="g-tag g-tag-green">已开票</span></td>
<td>2026-01-13 18:42</td>
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
</tr>
<tr>
<td><span class="fi-mono">INV20260112003</span></td>
<td>深圳市万达商贸有限公司</td>
<td><span class="g-tag fi-tag-purple">专票</span></td>
<td>&yen;5,200.00</td>
<td><span class="fi-mono">ORD20260112018</span></td>
<td><span class="g-tag g-tag-orange">待开票</span></td>
<td>2026-01-12 09:20</td>
<td><a class="g-action" href="javascript:;">开票</a></td>
</tr>
<tr>
<td><span class="fi-mono">INV20260111007</span></td>
<td>李明</td>
<td><span class="g-tag g-tag-blue">普票</span></td>
<td>&yen;88.50</td>
<td><span class="fi-mono">ORD20260111055</span></td>
<td><span class="g-tag g-tag-gray">已作废</span></td>
<td>2026-01-11 20:10</td>
<td><a class="g-action" href="javascript:;">查看</a></td>
</tr>
<tr>
<td><span class="fi-mono">INV20260110002</span></td>
<td>广州天河餐饮管理有限公司</td>
<td><span class="g-tag g-tag-blue">普票</span></td>
<td>&yen;1,320.00</td>
<td><span class="fi-mono">ORD20260110009</span></td>
<td><span class="g-tag g-tag-green">已开票</span></td>
<td>2026-01-10 11:35</td>
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
</tr>
<tr>
<td><span class="fi-mono">INV20260109006</span></td>
<td>王芳</td>
<td><span class="g-tag g-tag-blue">普票</span></td>
<td>&yen;45.00</td>
<td><span class="fi-mono">ORD20260109071</span></td>
<td><span class="g-tag g-tag-gray">已作废</span></td>
<td>2026-01-09 16:50</td>
<td><a class="g-action" href="javascript:;">查看</a></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="g-pagination" style="margin-top:16px;">
<button class="g-page-btn" disabled>&laquo;</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">&raquo;</button>
</div>
</div>
<!-- Tab2: 发票设置 -->
<div id="fiTabSettings" style="display:none;">
<!-- 企业信息 -->
<div class="g-card" style="margin-bottom:16px;">
<div class="fi-section-hd">企业开票信息</div>
<div class="fi-form-grid">
<div class="g-form-group">
<label class="g-form-label required">企业名称</label>
<input class="g-input" value="北京老三家餐饮管理有限公司" placeholder="请输入企业全称" />
</div>
<div class="g-form-group">
<label class="g-form-label required">纳税人识别号</label>
<input class="g-input" value="91110105MA01ABCD5X" placeholder="请输入统一社会信用代码" />
</div>
<div class="g-form-group">
<label class="g-form-label">注册地址</label>
<input class="g-input" value="北京市朝阳区建国路88号" placeholder="请输入注册地址" />
</div>
<div class="g-form-group">
<label class="g-form-label">注册电话</label>
<input class="g-input" value="010-88886666" placeholder="请输入注册电话" />
</div>
<div class="g-form-group">
<label class="g-form-label">开户银行</label>
<input class="g-input" value="中国工商银行北京朝阳支行" placeholder="请输入开户银行名称" />
</div>
<div class="g-form-group">
<label class="g-form-label">银行账号</label>
<input class="g-input" value="0200 0461 1920 1234 567" placeholder="请输入银行账号" />
</div>
</div>
</div>
<!-- 发票类型设置 -->
<div class="g-card" style="margin-bottom:16px;">
<div class="fi-section-hd">发票类型设置</div>
<div class="fi-toggle-row">
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
<span class="fi-toggle-label">电子普通发票</span>
</div>
<div class="fi-toggle-row">
<button class="g-toggle" onclick="toggleSwitch(this)"></button>
<span class="fi-toggle-label">电子专用发票</span>
<span class="fi-toggle-hint">（需先完成税务资质认证）</span>
</div>
</div>
<!-- 自动开票设置 -->
<div class="g-card" style="margin-bottom:16px;">
<div class="fi-section-hd">自动开票设置</div>
<div class="fi-toggle-row">
<button class="g-toggle" onclick="toggleSwitch(this)"></button>
<span class="fi-toggle-label">自动开票</span>
<span class="fi-toggle-hint">开启后，顾客申请发票将自动开具</span>
</div>
<div class="g-divider" style="margin:14px 0;"></div>
<div class="g-form-group" style="max-width:320px;">
<label class="g-form-label">单张发票最大金额</label>
<div style="display:flex;align-items:center;gap:6px;">
<span style="font-size:13px;color:var(--g-text-secondary);">&yen;</span>
<input class="g-input" type="number" value="10000" placeholder="如：10000" />
</div>
<span class="g-hint">超过此金额的发票需人工审核后开具</span>
</div>
</div>
<!-- 保存按钮 -->
<div class="fi-save-bar">
<button class="g-btn">重置</button>
<button class="g-btn g-btn-primary">保存设置</button>
</div>
</div>
<script>
function switchFiTab(el) {
var tab = el.getAttribute('data-tab');
el.parentElement.querySelectorAll('.g-seg-item').forEach(function(item) {
item.classList.remove('active');
});
el.classList.add('active');
document.getElementById('fiTabRecords').style.display = tab === 'records' ? '' : 'none';
document.getElementById('fiTabSettings').style.display = tab === 'settings' ? '' : 'none';
}
function toggleSwitch(el) {
el.classList.toggle('on');
}
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>

330
pages/fin-overview.html Normal file
View File

@@ -0,0 +1,330 @@
<!-- 财务概览驾驶舱 -->
<style>
.fo-page { display:flex; flex-direction:column; gap:16px; }
/* KPI 指标卡片行 */
.fo-kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.fo-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); }
.fo-kpi:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
.fo-kpi-top { display:flex; align-items:center; justify-content:space-between; }
.fo-kpi-label { font-size:13px; color:var(--g-text-secondary); }
.fo-kpi-icon { width:36px; height:36px; border-radius:var(--g-radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fo-kpi-icon.blue { background:hsl(212,100%,95%); color:hsl(212,100%,45%); }
.fo-kpi-icon.green { background:#f0fdf4; color:var(--g-success); }
.fo-kpi-icon.red { background:#fef2f2; color:var(--g-danger); }
.fo-kpi-icon.purple { background:#f5f3ff; color:#7c3aed; }
.fo-kpi-icon.orange { background:#fffbeb; color:var(--g-warning); }
.fo-kpi-value { font-size:26px; font-weight:800; color:var(--g-text); letter-spacing:-0.5px; }
.fo-kpi-change { font-size:12px; display:flex; align-items:center; gap:4px; }
.fo-kpi-change.up { color:var(--g-success); }
.fo-kpi-change.down { color:var(--g-danger); }
/* 区块标题 */
.fo-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); }
.fo-hd-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
/* Pill 切换 */
.fo-pills { display:flex; gap:6px; }
.fo-pill { padding:4px 14px; border-radius:20px; font-size:12px; color:var(--g-text-secondary); background:#f5f5f5; cursor:pointer; border:none; transition:var(--g-transition); }
.fo-pill.active { background:var(--primary); color:#fff; }
/* 折线图占位 */
.fo-chart-area { position:relative; height:200px; background:linear-gradient(180deg,hsl(212,100%,97%) 0%,#fff 100%); border-radius:var(--g-radius); border:1px dashed var(--g-border); overflow:hidden; }
.fo-chart-line { position:absolute; bottom:0; left:0; right:0; height:100%; }
.fo-chart-svg { width:100%; height:100%; }
.fo-chart-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:13px; color:var(--g-text-muted); pointer-events:none; }
.fo-chart-x { display:flex; justify-content:space-between; padding:8px 12px 0; font-size:11px; color:var(--g-text-muted); }
/* 两列布局 */
.fo-two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* 圆环图 */
.fo-donut-wrap { display:flex; align-items:center; gap:28px; padding:8px 0; }
.fo-donut { width:150px; height:150px; border-radius:50%; position:relative; flex-shrink:0; }
.fo-donut-center { position:absolute; inset:32px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fo-donut-center .num { font-size:18px; font-weight:700; color:var(--g-text); }
.fo-donut-center .txt { font-size:11px; color:var(--g-text-muted); }
.fo-legend { display:flex; flex-direction:column; gap:10px; flex:1; }
.fo-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-text); }
.fo-legend-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.fo-legend-val { margin-left:auto; font-weight:600; font-size:13px; }
.fo-legend-pct { color:var(--g-text-muted); font-size:12px; width:36px; text-align:right; }
/* 利润走势 */
.fo-profit-area { position:relative; height:180px; background:linear-gradient(180deg,hsl(212,100%,97%) 0%,#fff 100%); border-radius:var(--g-radius); border:1px dashed var(--g-border); overflow:hidden; }
.fo-profit-legend { display:flex; gap:20px; margin-top:10px; }
.fo-profit-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--g-text-secondary); }
.fo-profit-legend-line { width:20px; height:3px; border-radius:2px; }
/* TOP10 表格 */
.fo-rank-table { width:100%; border-collapse:collapse; }
.fo-rank-table th { text-align:left; font-size:12px; color:var(--g-text-muted); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--g-border); background:#fafafa; }
.fo-rank-table th:first-child { border-radius:var(--g-radius) 0 0 0; }
.fo-rank-table th:last-child { border-radius:0 var(--g-radius) 0 0; }
.fo-rank-table td { padding:10px 12px; font-size:13px; color:var(--g-text); border-bottom:1px solid #f5f5f5; }
.fo-rank-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
.fo-rank-num { width:22px; height:22px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.fo-rank-num.t1 { background:linear-gradient(135deg,#ef4444,#f97316); }
.fo-rank-num.t2 { background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.fo-rank-num.t3 { background:linear-gradient(135deg,#1890ff,#69c0ff); }
.fo-rank-num.tn { background:#e5e7eb; color:#4b5563; }
.fo-progress-bg { width:100%; max-width:120px; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.fo-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,hsl(212,100%,45%),hsl(212,100%,65%)); }
@keyframes foFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.fo-page > * { animation:foFadeIn 0.4s ease both; }
.fo-page > *:nth-child(2) { animation-delay:0.05s; }
.fo-page > *:nth-child(3) { animation-delay:0.1s; }
.fo-page > *:nth-child(4) { animation-delay:0.15s; }
.fo-page > *:nth-child(5) { animation-delay:0.2s; }
</style>
<div class="fo-page">
<!-- 1. 核心指标卡片 -->
<div class="fo-kpi-row">
<div class="fo-kpi">
<div class="fo-kpi-top">
<span class="fo-kpi-label">今日营业额</span>
<div class="fo-kpi-icon blue"><i data-lucide="coins" style="width:18px;height:18px"></i></div>
</div>
<div class="fo-kpi-value">&yen;8,620</div>
<div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 12% 较昨日</div>
</div>
<div class="fo-kpi">
<div class="fo-kpi-top">
<span class="fo-kpi-label">实收</span>
<div class="fo-kpi-icon green"><i data-lucide="badge-check" style="width:18px;height:18px"></i></div>
</div>
<div class="fo-kpi-value">&yen;7,980</div>
<div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 8% 较昨日</div>
</div>
<div class="fo-kpi">
<div class="fo-kpi-top">
<span class="fo-kpi-label">退款</span>
<div class="fo-kpi-icon red"><i data-lucide="undo-2" style="width:18px;height:18px"></i></div>
</div>
<div class="fo-kpi-value">&yen;640</div>
<div class="fo-kpi-change down"><i data-lucide="trending-down" style="width:14px;height:14px"></i> 3% 较昨日</div>
</div>
<div class="fo-kpi">
<div class="fo-kpi-top">
<span class="fo-kpi-label">净收入</span>
<div class="fo-kpi-icon purple"><i data-lucide="wallet" style="width:18px;height:18px"></i></div>
</div>
<div class="fo-kpi-value">&yen;6,850</div>
<div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 5% 较昨日</div>
</div>
<div class="fo-kpi">
<div class="fo-kpi-top">
<span class="fo-kpi-label">可提现余额</span>
<div class="fo-kpi-icon orange"><i data-lucide="landmark" style="width:18px;height:18px"></i></div>
</div>
<div class="fo-kpi-value">&yen;32,400</div>
<div class="fo-kpi-change up"><i data-lucide="trending-up" style="width:14px;height:14px"></i> 15% 较上周</div>
</div>
</div>
<!-- 2. 收入趋势 -->
<div class="g-card" style="padding:20px">
<div class="fo-hd-row">
<div class="fo-section-hd">收入趋势</div>
<div class="fo-pills">
<button class="fo-pill active" onclick="foSwitchPill(this)">近7天</button>
<button class="fo-pill" onclick="foSwitchPill(this)">近30天</button>
</div>
</div>
<div class="fo-chart-area">
<svg class="fo-chart-svg" viewBox="0 0 700 200" preserveAspectRatio="none">
<defs>
<linearGradient id="foGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(212,100%,45%)" stop-opacity="0.2"/>
<stop offset="100%" stop-color="hsl(212,100%,45%)" stop-opacity="0.02"/>
</linearGradient>
</defs>
<polyline fill="url(#foGrad)" stroke="none" points="0,200 0,140 100,100 200,120 300,60 400,80 500,40 600,70 700,30 700,200"/>
<polyline fill="none" stroke="hsl(212,100%,45%)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" points="0,140 100,100 200,120 300,60 400,80 500,40 600,70 700,30"/>
<circle cx="0" cy="140" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
<circle cx="100" cy="100" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
<circle cx="200" cy="120" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
<circle cx="300" cy="60" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
<circle cx="400" cy="80" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
<circle cx="500" cy="40" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
<circle cx="600" cy="70" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
<circle cx="700" cy="30" r="4" fill="#fff" stroke="hsl(212,100%,45%)" stroke-width="2"/>
</svg>
</div>
<div class="fo-chart-x">
<span>02/06</span><span>02/07</span><span>02/08</span><span>02/09</span><span>02/10</span><span>02/11</span><span>02/12</span>
</div>
</div>
<!-- 3. 收入构成 + 成本占比 -->
<div class="fo-two-col">
<!-- 收入构成 -->
<div class="g-card" style="padding:20px">
<div class="fo-section-hd" style="margin-bottom:16px">收入构成</div>
<div class="fo-donut-wrap">
<div class="fo-donut" style="background:conic-gradient(hsl(212,100%,45%) 0% 58%,#22c55e 58% 83%,#f59e0b 83% 100%)">
<div class="fo-donut-center">
<span class="num">&yen;7,980</span>
<span class="txt">总实收</span>
</div>
</div>
<div class="fo-legend">
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:hsl(212,100%,45%)"></span>
外卖
<span class="fo-legend-pct">58%</span>
<span class="fo-legend-val">&yen;4,628</span>
</div>
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:#22c55e"></span>
自提
<span class="fo-legend-pct">25%</span>
<span class="fo-legend-val">&yen;1,995</span>
</div>
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:#f59e0b"></span>
堂食
<span class="fo-legend-pct">17%</span>
<span class="fo-legend-val">&yen;1,357</span>
</div>
</div>
</div>
</div>
<!-- 成本占比 -->
<div class="g-card" style="padding:20px">
<div class="fo-section-hd" style="margin-bottom:16px">成本占比</div>
<div class="fo-donut-wrap">
<div class="fo-donut" style="background:conic-gradient(#ef4444 0% 42%,#f59e0b 42% 70%,#8b5cf6 70% 88%,#06b6d4 88% 95%,#94a3b8 95% 100%)">
<div class="fo-donut-center">
<span class="num">&yen;1,130</span>
<span class="txt">总成本</span>
</div>
</div>
<div class="fo-legend">
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:#ef4444"></span>
食材
<span class="fo-legend-pct">42%</span>
<span class="fo-legend-val">&yen;475</span>
</div>
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:#f59e0b"></span>
人工
<span class="fo-legend-pct">28%</span>
<span class="fo-legend-val">&yen;316</span>
</div>
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:#8b5cf6"></span>
固定
<span class="fo-legend-pct">18%</span>
<span class="fo-legend-val">&yen;203</span>
</div>
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:#06b6d4"></span>
包装
<span class="fo-legend-pct">7%</span>
<span class="fo-legend-val">&yen;79</span>
</div>
<div class="fo-legend-item">
<span class="fo-legend-dot" style="background:#94a3b8"></span>
平台
<span class="fo-legend-pct">5%</span>
<span class="fo-legend-val">&yen;57</span>
</div>
</div>
</div>
</div>
</div>
<!-- 4. 利润走势 -->
<div class="g-card" style="padding:20px">
<div class="fo-hd-row">
<div class="fo-section-hd">利润走势</div>
<div class="fo-pills">
<button class="fo-pill active" onclick="foSwitchPill(this)">近7天</button>
<button class="fo-pill" onclick="foSwitchPill(this)">近30天</button>
</div>
</div>
<div class="fo-profit-area">
<svg class="fo-chart-svg" viewBox="0 0 700 180" preserveAspectRatio="none">
<!-- 营收线 -->
<polyline fill="none" stroke="hsl(212,100%,45%)" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" points="0,120 100,90 200,100 300,50 400,65 500,35 600,55 700,25"/>
<!-- 成本线 -->
<polyline fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="6,3" stroke-linejoin="round" stroke-linecap="round" points="0,150 100,140 200,145 300,125 400,130 500,120 600,128 700,115"/>
<!-- 净利润线 -->
<polyline fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" points="0,160 100,145 200,150 300,120 400,128 500,108 600,118 700,95"/>
</svg>
</div>
<div class="fo-chart-x">
<span>02/06</span><span>02/07</span><span>02/08</span><span>02/09</span><span>02/10</span><span>02/11</span><span>02/12</span>
</div>
<div class="fo-profit-legend">
<div class="fo-profit-legend-item"><span class="fo-profit-legend-line" style="background:hsl(212,100%,45%)"></span>营收</div>
<div class="fo-profit-legend-item"><span class="fo-profit-legend-line" style="background:#ef4444"></span>成本</div>
<div class="fo-profit-legend-item"><span class="fo-profit-legend-line" style="background:#22c55e"></span>净利润</div>
</div>
</div>
<!-- 5. TOP10 商品营收排行 -->
<div class="g-card" style="padding:20px">
<div class="fo-section-hd" style="margin-bottom:16px">TOP10 商品营收排行</div>
<table class="fo-rank-table">
<thead>
<tr>
<th style="width:60px">排名</th>
<th>商品名称</th>
<th style="width:80px">销量</th>
<th style="width:100px">营收</th>
<th style="width:160px">占比</th>
</tr>
</thead>
<tbody id="foRankBody"></tbody>
</table>
</div>
</div>
<script>
(function(){
// TOP10 数据
var items = [
{ name:'招牌黄焖鸡米饭', sales:186, revenue:5580, pct:18.2 },
{ name:'香辣鸡腿堡套餐', sales:152, revenue:4560, pct:14.9 },
{ name:'麻辣小龙虾拌面', sales:134, revenue:4020, pct:13.1 },
{ name:'经典牛肉面', sales:128, revenue:3200, pct:10.4 },
{ name:'鱼香肉丝盖饭', sales:115, revenue:2875, pct:9.4 },
{ name:'宫保鸡丁套餐', sales:98, revenue:2450, pct:8.0 },
{ name:'番茄鸡蛋面', sales:92, revenue:1840, pct:6.0 },
{ name:'红烧排骨饭', sales:85, revenue:2550, pct:8.3 },
{ name:'皮蛋瘦肉粥', sales:76, revenue:1140, pct:3.7 },
{ name:'冰柠檬水', sales:210, revenue:1260, pct:4.1 }
];
var maxPct = items[0].pct;
var tbody = document.getElementById('foRankBody');
items.forEach(function(it, i){
var cls = i === 0 ? 't1' : i === 1 ? 't2' : i === 2 ? 't3' : 'tn';
var tr = document.createElement('tr');
tr.innerHTML =
'<td><span class="fo-rank-num ' + cls + '">' + (i+1) + '</span></td>' +
'<td>' + it.name + '</td>' +
'<td>' + it.sales + '</td>' +
'<td style="font-weight:600">&yen;' + it.revenue.toLocaleString() + '</td>' +
'<td><div style="display:flex;align-items:center;gap:8px"><div class="fo-progress-bg"><div class="fo-progress-fill" style="width:' + (it.pct / maxPct * 100) + '%"></div></div><span style="font-size:12px;color:var(--g-text-muted)">' + it.pct + '%</span></div></td>';
tbody.appendChild(tr);
});
})();
// Pill 切换
function foSwitchPill(el) {
var siblings = el.parentElement.querySelectorAll('.fo-pill');
siblings.forEach(function(s){ s.classList.remove('active'); });
el.classList.add('active');
}
// Lucide 图标初始化
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>

311
pages/fin-reports.html Normal file
View File

@@ -0,0 +1,311 @@
<!-- 经营报表 — 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>

297
pages/fin-settlement.html Normal file
View File

@@ -0,0 +1,297 @@
<!-- 到账查询 — fin-settlement.html -->
<style>
/* ---- page-private: fst- prefix ---- */
.fst-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
.fst-stat-card {
background: #fff; border-radius: var(--g-radius); padding: 18px 20px;
border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm);
transition: box-shadow var(--g-transition);
}
.fst-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
.fst-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.fst-stat-label i { width: 16px; height: 16px; }
.fst-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
/* 账户信息条 */
.fst-account-bar {
display: flex; align-items: center; gap: 16px; padding: 14px 20px; margin-bottom: 16px;
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
box-shadow: var(--g-shadow-sm); font-size: 13px; color: var(--g-text-secondary);
}
.fst-account-bar i { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.fst-account-bar strong { color: var(--g-text); font-weight: 600; }
.fst-account-sep { width: 1px; height: 20px; background: var(--g-border); }
.fst-toolbar {
background: #fff; border-radius: var(--g-radius); padding: 14px 18px;
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
}
.fst-toolbar .g-input,
.fst-toolbar .g-select { height: 32px; font-size: 13px; }
.fst-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
.fst-table-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
overflow: hidden; margin-bottom: 16px;
}
.fst-table-card .g-table th { white-space: nowrap; }
.fst-table-card .g-table td { vertical-align: middle; font-size: 13px; }
.fst-amount { font-weight: 600; white-space: nowrap; }
/* 展开明细行 */
.fst-detail-row { display: none; }
.fst-detail-row.open { display: table-row; }
.fst-detail-row td { padding: 0 !important; background: #f8f9fb; }
.fst-detail-wrap { padding: 14px 20px 14px 40px; }
.fst-detail-title { font-size: 13px; font-weight: 600; color: var(--g-text); margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--primary); }
.fst-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fst-mini-table th {
text-align: left; padding: 8px 10px; font-weight: 500;
color: var(--g-text-muted); background: #fff; border-bottom: 1px solid var(--g-border);
}
.fst-mini-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: var(--g-text); }
.fst-mini-table tr:last-child td { border-bottom: none; }
.fst-channel-icon { display: inline-flex; align-items: center; gap: 6px; }
.fst-channel-dot { width: 8px; height: 8px; border-radius: 50%; }
</style>
<!-- 统计卡片 -->
<div class="fst-stats">
<div class="fst-stat-card">
<div class="fst-stat-label"><i data-lucide="circle-check"></i>今日到账</div>
<div class="fst-stat-val" style="color:var(--g-success);">&yen;4,670</div>
</div>
<div class="fst-stat-card">
<div class="fst-stat-label"><i data-lucide="calendar-minus"></i>昨日到账</div>
<div class="fst-stat-val">&yen;4,940</div>
</div>
<div class="fst-stat-card">
<div class="fst-stat-label"><i data-lucide="calendar-check"></i>本月累计到账</div>
<div class="fst-stat-val">&yen;42,800</div>
</div>
<div class="fst-stat-card">
<div class="fst-stat-label"><i data-lucide="receipt"></i>本月交易笔数</div>
<div class="fst-stat-val">1,286</div>
</div>
</div>
<!-- 结算账户信息 -->
<div class="fst-account-bar">
<i data-lucide="landmark"></i>
<span>结算账户：<strong>招商银行 ****1234</strong></span>
<span class="fst-account-sep"></span>
<span>微信商户号：<strong>15xxxxxxxx</strong></span>
<span class="fst-account-sep"></span>
<span>支付宝PID：<strong>2088xxxxxxxxxxxx</strong></span>
<span class="fst-account-sep"></span>
<span>结算周期：<strong>T+1 自动到账</strong></span>
</div>
<!-- 筛选工具栏 -->
<div class="fst-toolbar">
<input type="date" class="g-input" style="width:145px;" value="2026-02-01">
<span class="fst-date-sep">~</span>
<input type="date" class="g-input" style="width:145px;" value="2026-02-12">
<select class="g-select" style="width:130px;">
<option>全部渠道</option>
<option>微信支付</option>
<option>支付宝</option>
</select>
<div style="flex:1;"></div>
<button class="g-btn g-btn-sm"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
</div>
<!-- 到账记录表格 -->
<div class="fst-table-card">
<table class="g-table">
<thead>
<tr>
<th style="width:36px;"></th>
<th>到账日期</th>
<th>支付渠道</th>
<th>交易笔数</th>
<th style="text-align:right;">到账金额</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr>
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d1')"></i></td>
<td>2026-02-12</td>
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
<td>86</td>
<td style="text-align:right;" class="fst-amount">&yen;3,420.00</td>
</tr>
<tr class="fst-detail-row" id="fst-d1">
<td colspan="5">
<div class="fst-detail-wrap">
<div class="fst-detail-title">交易明细（部分）</div>
<table class="fst-mini-table">
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
<tbody>
<tr><td>ORD20260212001</td><td>¥58.00</td><td>12:35</td></tr>
<tr><td>ORD20260212005</td><td>¥126.00</td><td>11:22</td></tr>
<tr><td>ORD20260212011</td><td>¥42.50</td><td>10:08</td></tr>
<tr><td>ORD20260212015</td><td>¥89.00</td><td>09:15</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- 2 -->
<tr>
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d2')"></i></td>
<td>2026-02-12</td>
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
<td>32</td>
<td style="text-align:right;" class="fst-amount">&yen;1,250.00</td>
</tr>
<tr class="fst-detail-row" id="fst-d2">
<td colspan="5">
<div class="fst-detail-wrap">
<div class="fst-detail-title">交易明细（部分）</div>
<table class="fst-mini-table">
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
<tbody>
<tr><td>ORD20260212003</td><td>¥126.00</td><td>11:22</td></tr>
<tr><td>ORD20260212009</td><td>¥68.00</td><td>10:30</td></tr>
<tr><td>ORD20260212014</td><td>¥35.50</td><td>09:45</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- 3 -->
<tr>
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d3')"></i></td>
<td>2026-02-11</td>
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
<td>92</td>
<td style="text-align:right;" class="fst-amount">&yen;3,860.00</td>
</tr>
<tr class="fst-detail-row" id="fst-d3">
<td colspan="5">
<div class="fst-detail-wrap">
<div class="fst-detail-title">交易明细（部分）</div>
<table class="fst-mini-table">
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
<tbody>
<tr><td>ORD20260211042</td><td>¥89.00</td><td>20:15</td></tr>
<tr><td>ORD20260211038</td><td>¥56.00</td><td>19:30</td></tr>
<tr><td>ORD20260211035</td><td>¥72.00</td><td>18:45</td></tr>
<tr><td>ORD20260211031</td><td>¥38.50</td><td>17:20</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- 4 -->
<tr>
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d4')"></i></td>
<td>2026-02-11</td>
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
<td>28</td>
<td style="text-align:right;" class="fst-amount">&yen;1,080.00</td>
</tr>
<tr class="fst-detail-row" id="fst-d4">
<td colspan="5">
<div class="fst-detail-wrap">
<div class="fst-detail-title">交易明细（部分）</div>
<table class="fst-mini-table">
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
<tbody>
<tr><td>ORD20260211040</td><td>¥45.00</td><td>19:50</td></tr>
<tr><td>ORD20260211036</td><td>¥62.00</td><td>18:10</td></tr>
<tr><td>ORD20260211033</td><td>¥33.00</td><td>16:40</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- 5 -->
<tr>
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d5')"></i></td>
<td>2026-02-10</td>
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#07c160;"></span>微信支付</span></td>
<td>78</td>
<td style="text-align:right;" class="fst-amount">&yen;3,150.00</td>
</tr>
<tr class="fst-detail-row" id="fst-d5">
<td colspan="5">
<div class="fst-detail-wrap">
<div class="fst-detail-title">交易明细（部分）</div>
<table class="fst-mini-table">
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
<tbody>
<tr><td>ORD20260210028</td><td>¥52.00</td><td>20:30</td></tr>
<tr><td>ORD20260210025</td><td>¥41.50</td><td>19:15</td></tr>
<tr><td>ORD20260210022</td><td>¥67.00</td><td>18:00</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
<!-- 6 -->
<tr>
<td><i data-lucide="chevron-right" style="width:14px;height:14px;cursor:pointer;color:var(--g-text-muted);transition:var(--g-transition);" onclick="toggleFstDetail(this,'fst-d6')"></i></td>
<td>2026-02-10</td>
<td><span class="fst-channel-icon"><span class="fst-channel-dot" style="background:#1677ff;"></span>支付宝</span></td>
<td>25</td>
<td style="text-align:right;" class="fst-amount">&yen;960.00</td>
</tr>
<tr class="fst-detail-row" id="fst-d6">
<td colspan="5">
<div class="fst-detail-wrap">
<div class="fst-detail-title">交易明细（部分）</div>
<table class="fst-mini-table">
<thead><tr><th>订单号</th><th>金额</th><th>时间</th></tr></thead>
<tbody>
<tr><td>ORD20260210026</td><td>¥48.00</td><td>19:40</td></tr>
<tr><td>ORD20260210023</td><td>¥55.00</td><td>17:55</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="g-pagination">
<span>共 68 条</span>
<select style="height:28px;padding:0 6px;border:1px solid #e5e7eb;border-radius:4px;font-size:12px;margin-right:4px;">
<option>20条/页</option>
<option>50条/页</option>
<option>100条/页</option>
</select>
<button class="g-page-btn" disabled>&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>
<script>
function toggleFstDetail(iconEl, rowId) {
var row = document.getElementById(rowId);
var isOpen = row.classList.contains('open');
row.classList.toggle('open');
var parentTr = row.previousElementSibling;
var icon = parentTr.querySelector('td:first-child i');
if (icon) {
icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(90deg)';
}
}
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>

255
pages/fin-transactions.html Normal file
View File

@@ -0,0 +1,255 @@
<!-- 交易流水 — fin-transactions.html -->
<style>
/* ---- page-private: ft- prefix ---- */
.ft-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
}
.ft-stat-card {
background: #fff; border-radius: var(--g-radius); padding: 18px 20px;
box-shadow: var(--g-shadow-sm); transition: var(--g-transition);
}
.ft-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
.ft-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ft-stat-label i { width: 16px; height: 16px; }
.ft-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
.ft-stat-val.green { color: var(--g-success); }
.ft-stat-val.red { color: var(--g-danger); }
.ft-stat-val.orange { color: var(--g-warning); }
.ft-toolbar {
background: #fff; border-radius: var(--g-radius); padding: 14px 18px;
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border); margin-bottom: 16px;
}
.ft-toolbar select,
.ft-toolbar input {
height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: var(--g-radius-sm, 6px);
font-size: 13px; outline: none; transition: var(--g-transition); background: #fff; color: var(--g-text);
}
.ft-toolbar select:focus,
.ft-toolbar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.ft-toolbar select { min-width: 110px; }
.ft-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }
.ft-search-wrap { position: relative; width: 180px; }
.ft-search-wrap input { padding-left: 30px; width: 100%; }
.ft-search-wrap i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--g-text-muted); pointer-events: none; }
.ft-toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ft-table-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
overflow: hidden;
}
.ft-table-card .g-table th { white-space: nowrap; }
.ft-table-card .g-table td { vertical-align: middle; font-size: 13px; }
.ft-mono { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 12px; color: var(--g-text-secondary); }
.ft-amount { font-weight: 600; white-space: nowrap; }
.ft-amount.income { color: var(--g-success); }
.ft-amount.expense { color: var(--g-danger); }
.ft-amount.neutral { color: var(--g-text); }
.ft-time { font-size: 12px; color: var(--g-text-muted); white-space: nowrap; }
/* 快捷日期 */
.ft-quick-dates { display:flex; gap:4px; }
.ft-quick-dates button {
padding:4px 10px; font-size:12px; border:1px solid #e5e7eb; border-radius:4px;
background:#fff; color:var(--g-text-secondary); cursor:pointer; transition:all var(--g-transition);
}
.ft-quick-dates button:hover { border-color:var(--primary); color:var(--primary); }
.ft-quick-dates button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
/* 汇总行 */
.ft-summary td { background:#f8f9fb; font-weight:600; font-size:13px; color:var(--g-text); border-top:2px solid #e5e7eb; }
.ft-remark { font-size:12px; color:var(--g-text-muted); max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
</style>
<!-- 汇总指标 -->
<div class="ft-stats">
<div class="ft-stat-card">
<div class="ft-stat-label"><i data-lucide="trending-up"></i>总收入</div>
<div class="ft-stat-val green">&yen;45,680</div>
</div>
<div class="ft-stat-card">
<div class="ft-stat-label"><i data-lucide="undo-2"></i>总退款</div>
<div class="ft-stat-val red">&yen;3,200</div>
</div>
<div class="ft-stat-card">
<div class="ft-stat-label"><i data-lucide="receipt"></i>交易笔数</div>
<div class="ft-stat-val">256</div>
</div>
</div>
<!-- 筛选工具栏 -->
<div class="ft-toolbar">
<input type="date" value="2026-02-01">
<span class="ft-date-sep">至</span>
<input type="date" value="2026-02-12">
<div class="ft-quick-dates">
<button onclick="ftQuickDate(this,'today')" class="active">今天</button>
<button onclick="ftQuickDate(this,'yesterday')">昨天</button>
<button onclick="ftQuickDate(this,'7d')">近7天</button>
<button onclick="ftQuickDate(this,'30d')">近30天</button>
<button onclick="ftQuickDate(this,'month')">本月</button>
</div>
<select>
<option>全部类型</option>
<option>收入</option>
<option>退款</option>
<option>储值充值</option>
<option>积分抵扣</option>
</select>
<select>
<option>全部渠道</option>
<option>外卖</option>
<option>自提</option>
<option>堂食</option>
</select>
<select>
<option>全部支付方式</option>
<option>微信</option>
<option>支付宝</option>
<option>现金</option>
<option>储值余额</option>
</select>
<div class="ft-search-wrap">
<i data-lucide="search" style="width:14px;height:14px;"></i>
<input type="text" placeholder="搜索流水号/订单号">
</div>
<div class="ft-toolbar-right">
<button class="g-btn g-btn-sm" onclick="this.textContent='导出中…';setTimeout(()=>{this.innerHTML='<i data-lucide=\'download\' style=\'width:14px;height:14px;margin-right:4px;vertical-align:-2px;\'></i>已导出';lucide.createIcons();setTimeout(()=>{this.innerHTML='<i data-lucide=\'download\' style=\'width:14px;height:14px;margin-right:4px;vertical-align:-2px;\'></i>导出';lucide.createIcons();},1500);},800)"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
</div>
</div>
<!-- 交易流水表格 -->
<div class="ft-table-card">
<table class="g-table">
<thead>
<tr>
<th>流水号</th>
<th>关联订单</th>
<th>类型</th>
<th>渠道</th>
<th>支付方式</th>
<th style="text-align:right;">金额</th>
<th>交易时间</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ft-mono">TXN20260212001</td>
<td><a class="g-action ft-mono">#ORD20260212001</a></td>
<td><span class="g-tag g-tag-green">收入</span></td>
<td>外卖</td>
<td>微信</td>
<td style="text-align:right;" class="ft-amount income">+&yen;58.00</td>
<td class="ft-time">2026-02-12 12:35:00</td>
<td class="ft-remark" title="外卖平台订单">外卖平台订单</td>
</tr>
<tr>
<td class="ft-mono">TXN20260212002</td>
<td><a class="g-action ft-mono">#ORD20260212003</a></td>
<td><span class="g-tag g-tag-red">退款</span></td>
<td>外卖</td>
<td>微信</td>
<td style="text-align:right;" class="ft-amount expense">-&yen;32.00</td>
<td class="ft-time">2026-02-12 11:50:22</td>
<td class="ft-remark" title="顾客申请退款-菜品不符">顾客申请退款-菜品不符</td>
</tr>
<tr>
<td class="ft-mono">TXN20260212003</td>
<td><a class="g-action ft-mono">#ORD20260212005</a></td>
<td><span class="g-tag g-tag-green">收入</span></td>
<td>堂食</td>
<td>支付宝</td>
<td style="text-align:right;" class="ft-amount income">+&yen;126.00</td>
<td class="ft-time">2026-02-12 11:22:10</td>
<td class="ft-remark">—</td>
</tr>
<tr>
<td class="ft-mono">TXN20260212004</td>
<td class="ft-mono">—</td>
<td><span class="g-tag g-tag-blue">储值充值</span></td>
<td>—</td>
<td>微信</td>
<td style="text-align:right;" class="ft-amount income">+&yen;500.00</td>
<td class="ft-time">2026-02-12 10:45:33</td>
<td class="ft-remark" title="会员张女士充值">会员张女士充值</td>
</tr>
<tr>
<td class="ft-mono">TXN20260212005</td>
<td><a class="g-action ft-mono">#ORD20260212008</a></td>
<td><span class="g-tag g-tag-orange">积分抵扣</span></td>
<td>自提</td>
<td>储值余额</td>
<td style="text-align:right;" class="ft-amount income">+&yen;45.00</td>
<td class="ft-time">2026-02-12 10:12:05</td>
<td class="ft-remark" title="抵扣200积分">抵扣200积分</td>
</tr>
<tr>
<td class="ft-mono">TXN20260212006</td>
<td><a class="g-action ft-mono">#ORD20260212010</a></td>
<td><span class="g-tag g-tag-green">收入</span></td>
<td>自提</td>
<td>现金</td>
<td style="text-align:right;" class="ft-amount income">+&yen;28.00</td>
<td class="ft-time">2026-02-12 09:38:17</td>
<td class="ft-remark">—</td>
</tr>
<tr>
<td class="ft-mono">TXN20260212007</td>
<td><a class="g-action ft-mono">#ORD20260211042</a></td>
<td><span class="g-tag g-tag-green">收入</span></td>
<td>堂食</td>
<td>微信</td>
<td style="text-align:right;" class="ft-amount income">+&yen;89.00</td>
<td class="ft-time">2026-02-11 20:15:44</td>
<td class="ft-remark">—</td>
</tr>
<!-- 汇总行 -->
<tr class="ft-summary">
<td colspan="5" style="text-align:right;">本页合计</td>
<td style="text-align:right;">收入 &yen;846.00 / 退款 &yen;32.00</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="g-pagination">
<span>共 256 条</span>
<select style="height:28px;padding:0 6px;border:1px solid #e5e7eb;border-radius:4px;font-size:12px;margin-right:4px;">
<option>20条/页</option>
<option>50条/页</option>
<option>100条/页</option>
</select>
<button class="g-page-btn" disabled>&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">5</button>
<button class="g-page-btn">&gt;</button>
</div>
<script>
/* 快捷日期切换 */
function ftQuickDate(btn, range) {
btn.closest('.ft-quick-dates').querySelectorAll('button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
var today = new Date('2026-02-12');
var inputs = document.querySelectorAll('.ft-toolbar input[type="date"]');
var fmt = d => d.toISOString().slice(0,10);
var start = today, end = today;
if (range === 'today') { start = end = today; }
else if (range === 'yesterday') { start = end = new Date(today - 86400000); }
else if (range === '7d') { start = new Date(today - 6 * 86400000); }
else if (range === '30d') { start = new Date(today - 29 * 86400000); }
else if (range === 'month') { start = new Date('2026-02-01'); }
inputs[0].value = fmt(start);
inputs[1].value = fmt(end);
}
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>