qiukai/opc-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统计卡片统一为 metric-card 样式 + 增加图标
Some checks failed
Deploy / deploy (push) Failing after 1s
Details

Browse Source 
- 经营管理/重点工作台账卡片改用 .metric-card 类（与首页一致）
- 卡片增加 lucide 图标（签约/金额/任务/状态等）
- 布局：左对齐、text-2xl、图标+标签
This commit is contained in:
mac
2026-06-23 22:49:55 +08:00
parent 25da1453be
commit 361359ee32
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/modules/finance.js
View File

@@ -102,10 +102,10 @@ function renderFinance() {
document.querySelector("#finance").innerHTML = `<div class="grid gap-4">
<div class="grid grid-cols-6 gap-3">
${[["已签项目","" + signed.length],["签约金额",money(sumSign)],["流程项目","" + inContract.length],["流程金额",money(sumContract)],["待签项目","" + pending.length],["待签金额",money(sumPending)]].map(([l,v]) => `<div class="bg-white rounded-lg border border-slate-200 p-3 text-center"><p class="text-xs text-slate-500">${l}</p><p class="text-xl font-bold text-slate-800">${v}</p></div>`).join("")}
${[["已签项目","" + signed.length,"file-sign"],["签约金额",money(sumSign),"coins"],["流程项目","" + inContract.length,"file-clock"],["流程金额",money(sumContract),"clock"],["待签项目","" + pending.length,"file-question"],["待签金额",money(sumPending),"hourglass"]].map(([l,v,icon]) => `<div class="metric-card"><span class="flex items-center gap-2 text-xs text-slate-500"><i data-lucide="${icon}" style="width:14px;height:14px"></i>${l}</span><strong class="mt-2 block text-2xl">${v}</strong></div>`).join("")}
</div>
<div class="grid grid-cols-5 gap-3">
${[["本月确收",money(thisMonthRev)],["本月毛利",money(thisMonthGross)],["本月回款",money(monthPayment)],["本月费用",money(monthCost)],["本月现金流",money(monthCashflow)]].map(([l,v]) => `<div class="bg-white rounded-lg border border-slate-200 p-3 text-center"><p class="text-xs text-slate-500">${l}</p><p class="text-xl font-bold text-slate-800">${v}</p></div>`).join("")}
${[["本月确收",money(thisMonthRev),"trending-up"],["本月毛利",money(thisMonthGross),"percent"],["本月回款",money(monthPayment),"wallet"],["本月费用",money(monthCost),"receipt"],["本月现金流",money(monthCashflow),"repeat"]].map(([l,v,icon]) => `<div class="metric-card"><span class="flex items-center gap-2 text-xs text-slate-500"><i data-lucide="${icon}" style="width:14px;height:14px"></i>${l}</span><strong class="mt-2 block text-2xl">${v}</strong></div>`).join("")}
</div>
<div class="flex justify-between items-center"><div class="flex items-center gap-1" id="finViewToggle"><button class="btn btn-sm ${state.finView !== 'cashflow' ? 'btn-primary' : 'btn-ghost'} p-1.5" data-view="rev" onclick="setFinView('rev')" title="确收/毛利视图"><i data-lucide="trending-up" style="width:16px;height:16px"></i></button><button class="btn btn-sm ${state.finView === 'cashflow' ? 'btn-primary' : 'btn-ghost'} p-1.5" data-view="cashflow" onclick="setFinView('cashflow')" title="回款/费用视图"><i data-lucide="wallet" style="width:16px;height:16px"></i></button></div><button class="btn btn-primary btn-sm" onclick="openFinanceModal()"><i data-lucide="plus"></i>新增财务项目</button></div>
<div id="financeModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="closeFinanceModal()"><div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl mx-4 max-h-[92vh] overflow-y-auto" onclick="event.stopPropagation()"><div class="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-slate-100 px-8 py-5 flex items-center justify-between"><div><h3 class="text-xl font-bold text-slate-800" id="financeModalTitle">新增项目财务</h3><p class="text-xs text-slate-400 mt-0.5">填写项目财务信息与月度预算</p></div><div class="flex items-center gap-2"><button class="btn btn-ghost btn-sm text-red-600 hidden" id="financeDeleteBtn" onclick="deleteFinanceItem()"><i data-lucide="trash-2"></i>删除</button><button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="closeFinanceModal()"><i data-lucide="x"></i></button></div></div>

14
static/modules/projects.js
View File

@@ -197,13 +197,13 @@ function renderProjects() {
document.querySelector("#projects").innerHTML = /*html*/`
<div class="grid grid-cols-5 gap-3 mb-4">
${[
["项目总数", items.length],
["任务总数", taskStats.total],
["进行中", taskStats.ongoing],
["已结束", taskStats.done],
["未开始", taskStats.pending],
].map(([label, value]) => `
<div class="bg-white rounded-lg border border-slate-200 p-3 text-center"><p class="text-xs text-slate-500">${label}</p><p class="text-xl font-bold text-slate-800">${value}</p></div>
["项目总数", items.length, "folder"],
["任务总数", taskStats.total, "list-checks"],
["进行中", taskStats.ongoing, "play-circle"],
["已结束", taskStats.done, "check-circle"],
["未开始", taskStats.pending, "circle"],
].map(([label, value, icon]) => `
<div class="metric-card"><span class="flex items-center gap-2 text-xs text-slate-500"><i data-lucide="${icon}" style="width:14px;height:14px"></i>${label}</span><strong class="mt-2 block text-2xl">${value}</strong></div>
`).join("")}
</div>
<div class="flex justify-between items-center mb-3">