Files
TakeoutSaaS.Prototypes/pages/fin-cost.html

307 lines
20 KiB
HTML

<!-- 成本管理页 -->
<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>