feat: 初始提交（仅核心代码，已排除大文件）
This commit is contained in:
yangxiangyuan
@@ -0,0 +1,416 @@
|
||||
/* 富贵吉祥主题 - 投资本金记录系统 */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=TsangerYuMo&display=swap');
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
/* 只保留渐变底色 */
|
||||
background: linear-gradient(135deg, rgba(255, 249, 230, 0.98) 0%, rgba(255, 235, 205, 0.98) 50%, rgba(248, 244, 230, 0.98) 100%);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("/images/xiangyun.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 250px auto;
|
||||
background-position: top left;
|
||||
opacity: 0.2;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
/* 标题波浪特效 */
|
||||
.lucky-header h1 .char {
|
||||
display: inline-block;
|
||||
animation: text-wave 2.5s ease-in-out infinite;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
@keyframes text-wave {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
.lucky-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gold-coin {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
opacity: 0.3;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.coin-1 { top: 20%; left: 10%; animation-delay: 0s; }
|
||||
.coin-2 { top: 60%; left: 80%; animation-delay: 2s; }
|
||||
.coin-3 { top: 30%; left: 70%; animation-delay: 4s; }
|
||||
.coin-4 { top: 80%; left: 20%; animation-delay: 1s; }
|
||||
|
||||
/* 右上角灯笼 */
|
||||
.lucky-lantern.right {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
font-size: 2.5rem;
|
||||
color: #C1272D;
|
||||
animation: swing 3s ease-in-out infinite;
|
||||
z-index: 1000;
|
||||
text-shadow: 2px 2px 4px rgba(193,39,45,0.4);
|
||||
}
|
||||
|
||||
.lantern-tassel {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: linear-gradient(to bottom, #FFD700, #D4AF37);
|
||||
animation: tassel-sway 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 左上角灯笼 */
|
||||
.lucky-lantern.left {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
font-size: 2.5rem;
|
||||
color: #C1272D;
|
||||
animation: swing 3s ease-in-out infinite;
|
||||
z-index: 1000;
|
||||
text-shadow: 2px 2px 4px rgba(193,39,45,0.4);
|
||||
}
|
||||
|
||||
@keyframes tassel-sway {
|
||||
0%, 100% { transform: translateX(-50%) rotate(-5deg); }
|
||||
50% { transform: translateX(-50%) rotate(5deg); }
|
||||
}
|
||||
|
||||
@keyframes fly {
|
||||
0%, 100% { transform: rotate(-45deg) translateY(0); }
|
||||
50% { transform: rotate(-45deg) translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(10deg); }
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.lucky-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.05));
|
||||
border-radius: 16px;
|
||||
border: 2px solid rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
.lucky-header h1 {
|
||||
font-family: 'Ma Shan Zheng', cursive;
|
||||
font-size: 2.5rem;
|
||||
color: #D4AF37;
|
||||
margin: 0;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.lucky-subtitle {
|
||||
font-family: 'TsangerYuMo', cursive;
|
||||
font-size: 1.3rem;
|
||||
margin: 10px 0 0 0;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(120deg, #8B4513 0%, #D4AF37 40%, #FFD700 50%, #D4AF37 60%, #8B4513 100%);
|
||||
background-size: 200% auto;
|
||||
color: #8B4513;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shine 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to { background-position: 200% center; }
|
||||
}
|
||||
|
||||
.toolbar, .add-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.07), rgba(255, 215, 0, 0.035));
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
|
||||
border: 2px solid rgba(212, 175, 55, 0.21);
|
||||
position: relative;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
padding: 0 18px;
|
||||
border: none;
|
||||
background: linear-gradient(145deg, #D4AF37, #FFD700);
|
||||
color: #2C2C2C;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 8px rgba(212, 175, 55, 0.4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: 'TsangerYuMo', cursive;
|
||||
font-size: 1.1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: linear-gradient(145deg, #C1272D, #D4AF37);
|
||||
color: #FFFFFF;
|
||||
transform: translateY(-1px) scale(1.03);
|
||||
box-shadow: 0 5px 12px rgba(193, 39, 45, 0.45);
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
#btn-add {
|
||||
background: linear-gradient(145deg, #2D8A57, #2AAE7A);
|
||||
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.28);
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
}
|
||||
|
||||
#btn-add:hover {
|
||||
background: linear-gradient(145deg, #277B4D, #239968);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
border: 2px solid #D4AF37;
|
||||
border-radius: 12px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #D4AF37 rgba(212, 175, 55, 0.1);
|
||||
}
|
||||
|
||||
input, select {
|
||||
border: 1px solid #D4AF37;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
transition: all 0.3s;
|
||||
font-family: inherit;
|
||||
color: #5d4037;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: #FFD700;
|
||||
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom, #D4AF37, #FFD700);
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(to bottom, #B8860B, #D4AF37);
|
||||
}
|
||||
|
||||
table.flows {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
table.flows th, table.flows td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #E8E6DF;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.flows tbody tr:nth-child(odd).in td { background: rgba(212, 175, 55, 0.06); }
|
||||
table.flows tbody tr:nth-child(even).in td { background: rgba(212, 175, 55, 0.035); }
|
||||
table.flows tbody tr:nth-child(odd).out td { background: rgba(193, 39, 45, 0.055); }
|
||||
table.flows tbody tr:nth-child(even).out td { background: rgba(193, 39, 45, 0.03); }
|
||||
|
||||
table.flows th {
|
||||
background: linear-gradient(145deg, #8B0000, #C1272D);
|
||||
color: #FFD700;
|
||||
font-weight: 600;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
table.flows tr {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
table.flows tr:hover td {
|
||||
background: rgba(212, 175, 55, 0.10) !important;
|
||||
}
|
||||
|
||||
table.flows tr.in {
|
||||
background: rgba(212, 175, 55, 0.08);
|
||||
border-left: 4px solid #D4AF37;
|
||||
}
|
||||
|
||||
table.flows tr.out {
|
||||
background: rgba(193, 39, 45, 0.08);
|
||||
border-left: 4px solid #C1272D;
|
||||
}
|
||||
|
||||
table.flows td.amount {
|
||||
font-weight: 700;
|
||||
color: #1A365D;
|
||||
}
|
||||
|
||||
table.flows td.ending {
|
||||
font-weight: 800;
|
||||
color: #D4AF37;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.stats {
|
||||
margin: 28px 0;
|
||||
padding: 24px 20px;
|
||||
border: 3px solid rgba(212, 175, 55, 0.21);
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.07), rgba(255, 215, 0, 0.035));
|
||||
backdrop-filter: blur(5px);
|
||||
font-weight: 700;
|
||||
color: #8B4513;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
|
||||
font-family: 'TsangerYuMo', cursive;
|
||||
font-size: 1.2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stats::after {
|
||||
content: '💰';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #D4AF37;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 16px 0;
|
||||
padding: 12px;
|
||||
border: 2px solid #FFD666;
|
||||
background: #FFFBE6;
|
||||
color: #8B6508;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.debug { margin: 12px 0; padding: 8px; border: 1px dashed #aaa; }
|
||||
.debug-actions { display: flex; gap: 8px; margin-bottom: 8px }
|
||||
.debug-output { height: 200px; overflow: auto; background: #f6f6f6; padding: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.toolbar, .add-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.toolbar input,
|
||||
.toolbar select,
|
||||
.add-bar input,
|
||||
.add-bar select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar .btn,
|
||||
#btn-add {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table.flows th, table.flows td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lucky-header h1 .char,
|
||||
.lucky-subtitle,
|
||||
.gold-coin,
|
||||
.lucky-lantern.right,
|
||||
.lucky-lantern.left {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.btn,
|
||||
input,
|
||||
select,
|
||||
table.flows tr {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
.toolbar, .add-bar, .stats {
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
const fmtCN = n => n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
const parseAmount = s => { const x = String(s||'').replace(/[,\s]/g,''); const v = Number(x); if (!Number.isFinite(v)) return null; return Math.round(v*100) }
|
||||
const centsToText = c => fmtCN((c||0)/100)
|
||||
const logBox = () => document.getElementById('fd-output')
|
||||
const logLocal = msg => { const b = logBox(); if (!b) return; const line = `${(window.fmtCNDateTime?fmtCNDateTime(new Date()):new Date().toLocaleString('zh-CN'))} ${msg}`; b.textContent = (b.textContent||'') + (b.textContent?"\n":"") + line; b.scrollTop = b.scrollHeight }
|
||||
|
||||
let editingId = null;
|
||||
|
||||
const loadFlags = async () => { try { const r = await fetch('/api/flags'); const d = await r.json(); if (d && d.debug && d.debug.funds) { const sec = document.getElementById('funds-debug'); if (sec) sec.style.display = '' } } catch {}
|
||||
}
|
||||
|
||||
const renderRows = rows => {
|
||||
const tb = document.getElementById('flows-body'); if (!tb) return
|
||||
tb.innerHTML = ''
|
||||
let sumIn = 0, sumOut = 0
|
||||
for (const r of rows) {
|
||||
const tr = document.createElement('tr')
|
||||
tr.className = r.type === 'in' ? 'in' : 'out'
|
||||
const tdDate = document.createElement('td'); tdDate.textContent = r.date
|
||||
const tdType = document.createElement('td'); tdType.textContent = r.type === 'in' ? '汇入' : '汇出'
|
||||
const tdAmt = document.createElement('td'); tdAmt.className='amount'; tdAmt.textContent = centsToText(r.amount_cents)
|
||||
const tdBank = document.createElement('td'); tdBank.textContent = r.bank_status || ''
|
||||
const tdEnd = document.createElement('td'); tdEnd.className='ending'; tdEnd.textContent = centsToText(r.ending_cents)
|
||||
const tdRemark = document.createElement('td'); tdRemark.textContent = r.remark || ''
|
||||
const tdOps = document.createElement('td')
|
||||
|
||||
const btnEdit = document.createElement('button');
|
||||
btnEdit.className='btn';
|
||||
btnEdit.textContent='修改';
|
||||
btnEdit.style.marginRight = '4px';
|
||||
btnEdit.addEventListener('click', () => {
|
||||
document.getElementById('new-date').value = r.date;
|
||||
document.getElementById('new-type').value = r.type;
|
||||
document.getElementById('new-amount').value = (r.amount_cents / 100).toFixed(2);
|
||||
document.getElementById('new-bank').value = r.bank_status || '';
|
||||
document.getElementById('new-remark').value = r.remark || '';
|
||||
|
||||
editingId = r.id;
|
||||
const btnAdd = document.getElementById('btn-add');
|
||||
if (btnAdd) {
|
||||
btnAdd.textContent = '保存修改';
|
||||
btnAdd.classList.add('btn-primary'); // Optional: highlight
|
||||
}
|
||||
// Scroll to top
|
||||
document.querySelector('.add-bar').scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
tdOps.appendChild(btnEdit);
|
||||
|
||||
const btnDel = document.createElement('button'); btnDel.className='btn'; btnDel.textContent='涤旧'; btnDel.addEventListener('click', async () => {
|
||||
const ok = window.confirm('确认涤旧该条流水？')
|
||||
if (!ok) return
|
||||
try { await fetch('/api/debug/event', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ source:'funds', action:'delete', id:r.id }) }) } catch {}
|
||||
logLocal(`funds.delete id=${r.id}`)
|
||||
await fetch(`/api/funds/flows/${r.id}`, { method:'DELETE' })
|
||||
await loadFlows()
|
||||
})
|
||||
tdOps.appendChild(btnDel)
|
||||
tr.appendChild(tdDate); tr.appendChild(tdType); tr.appendChild(tdAmt); tr.appendChild(tdBank); tr.appendChild(tdEnd); tr.appendChild(tdRemark); tr.appendChild(tdOps)
|
||||
tb.appendChild(tr)
|
||||
if (r.type==='in') sumIn += r.amount_cents; else sumOut += r.amount_cents
|
||||
}
|
||||
const st = document.getElementById('stats')
|
||||
if (st) st.textContent = `总汇入 ${centsToText(sumIn)} · 总汇出 ${centsToText(Math.abs(sumOut))} · 区间净变动 ${centsToText(sumIn + sumOut)} · 期末余额 ${rows.length?centsToText(rows[rows.length-1].ending_cents):centsToText(0)}`
|
||||
}
|
||||
|
||||
const loadFlows = async () => {
|
||||
const st = document.getElementById('funds-status')
|
||||
const btnQ = document.getElementById('btn-load')
|
||||
if (st) { st.style.display=''; st.textContent='正在查询...' }
|
||||
if (btnQ) btnQ.disabled = true
|
||||
const start = document.getElementById('date-start').value || ''
|
||||
const end = document.getElementById('date-end').value || ''
|
||||
const type = document.getElementById('type-filter').value || 'all'
|
||||
const kw = document.getElementById('kw').value || ''
|
||||
try {
|
||||
const r = await fetch(`/api/funds/flows?start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}&type=${encodeURIComponent(type)}&kw=${encodeURIComponent(kw)}`)
|
||||
const d = await r.json()
|
||||
if (d.ok) renderRows(d.rows)
|
||||
if (st) { st.style.display=''; st.textContent=`查询完成（${(d.rows||[]).length} 条）` }
|
||||
} catch (e) {
|
||||
if (st) { st.style.display=''; st.textContent=`查询失败：${String(e.message||e)}` }
|
||||
} finally {
|
||||
if (btnQ) btnQ.disabled = false
|
||||
setTimeout(()=>{ if (st) st.style.display='none' }, 1200)
|
||||
}
|
||||
}
|
||||
|
||||
const addFlow = async () => {
|
||||
const st = document.getElementById('funds-status')
|
||||
const btn = document.getElementById('btn-add')
|
||||
if (st) { st.style.display=''; st.textContent='正在新增...' }
|
||||
if (btn) btn.disabled = true
|
||||
const date = document.getElementById('new-date').value
|
||||
const type = document.getElementById('new-type').value
|
||||
const amtText = document.getElementById('new-amount').value
|
||||
const bank = document.getElementById('new-bank').value
|
||||
const remark = document.getElementById('new-remark').value
|
||||
if (!date || !type || !amtText || !bank || !remark) {
|
||||
if (st) { st.style.display=''; st.textContent='请完整填写日期、类型、金额、银行方/状态、备注' }
|
||||
if (btn) btn.disabled = false
|
||||
setTimeout(()=>{ if (st) st.style.display='none' }, 1800)
|
||||
return
|
||||
}
|
||||
const cents = parseAmount(amtText)
|
||||
if (cents === null) { logLocal('金额格式错误'); return }
|
||||
|
||||
if (!editingId) {
|
||||
try {
|
||||
const dupRes = await fetch(`/api/funds/flows?start=${encodeURIComponent(date)}&end=${encodeURIComponent(date)}&type=all`)
|
||||
const dupData = await dupRes.json()
|
||||
if (dupData.ok && Array.isArray(dupData.rows) && dupData.rows.length > 0) {
|
||||
const ok = window.confirm(`该日期已有 ${dupData.rows.length} 条记录，是否继续新增？`)
|
||||
if (!ok) { logLocal(`funds.add.cancel date=${date}`); return }
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const body = { date, type, amount_cents: type==='out' ? -Math.abs(cents) : Math.abs(cents), bank_status: bank, remark }
|
||||
|
||||
if (editingId) {
|
||||
try {
|
||||
await fetch(`/api/funds/flows/${editingId}`, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) })
|
||||
logLocal(`funds.update id=${editingId}`)
|
||||
if (st) { st.style.display=''; st.textContent='修改成功' }
|
||||
editingId = null;
|
||||
if (btn) btn.textContent = '新增';
|
||||
|
||||
await loadFlows()
|
||||
document.getElementById('new-amount').value=''
|
||||
document.getElementById('new-bank').value=''
|
||||
document.getElementById('new-remark').value=''
|
||||
} catch (e) {
|
||||
if (st) { st.style.display=''; st.textContent=`修改失败：${String(e.message||e)}` }
|
||||
} finally {
|
||||
if (btn) btn.disabled = false
|
||||
setTimeout(()=>{ if (st) st.style.display='none' }, 1200)
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try { await fetch('/api/debug/event', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ source:'funds', action:'add', date, type, amount:(cents/100) }) }) } catch {}
|
||||
logLocal(`funds.add ${JSON.stringify({ date, type, amount:(cents/100) })}`)
|
||||
try {
|
||||
await fetch('/api/funds/flows', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) })
|
||||
if (st) { st.style.display=''; st.textContent='新增成功' }
|
||||
await loadFlows()
|
||||
// clear inputs
|
||||
document.getElementById('new-amount').value=''
|
||||
document.getElementById('new-bank').value=''
|
||||
document.getElementById('new-remark').value=''
|
||||
} catch (e) {
|
||||
if (st) { st.style.display=''; st.textContent=`新增失败：${String(e.message||e)}` }
|
||||
} finally {
|
||||
if (btn) btn.disabled = false
|
||||
setTimeout(()=>{ if (st) st.style.display='none' }, 1200)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadFlags()
|
||||
const y = new Date().getFullYear()
|
||||
const d = new Date(y, 11, 31)
|
||||
const endOfYear = window.cnDateStr ? cnDateStr(d) : `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
||||
const ds = document.getElementById('date-start'); if (ds) ds.value = '2024-01-01'
|
||||
const de = document.getElementById('date-end'); if (de) de.value = endOfYear
|
||||
const bl = document.getElementById('btn-load'); if (bl) bl.addEventListener('click', loadFlows)
|
||||
const ba = document.getElementById('btn-add'); if (ba) ba.addEventListener('click', addFlow)
|
||||
const be = document.getElementById('btn-export'); if (be) be.addEventListener('click', async () => { const start = document.getElementById('date-start').value||''; const end = document.getElementById('date-end').value||''; location.href = `/api/funds/export.csv?start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}` })
|
||||
const bcp = document.getElementById('fd-btn-copy'); if (bcp) bcp.addEventListener('click', async () => { try { await navigator.clipboard.writeText((logBox()&&logBox().textContent)||'') } catch {} })
|
||||
const brf = document.getElementById('fd-btn-refresh'); if (brf) brf.addEventListener('click', async () => { try { const r = await fetch('/api/debug/logs?limit=5000&channel=funds'); const d = await r.json(); if (d.ok) { const b = logBox(); if (b) { b.textContent = (d.lines||[]).join('\n'); b.scrollTop = b.scrollHeight } } } catch {} })
|
||||
const bcl = document.getElementById('fd-btn-clear'); if (bcl) bcl.addEventListener('click', async () => { try { await fetch('/api/debug/clear?channel=funds', { method: 'POST' }) } catch {}; const b = logBox(); if (b) b.textContent='' })
|
||||
loadFlows()
|
||||
initTextEffect()
|
||||
})
|
||||
|
||||
const initTextEffect = () => {
|
||||
const h1 = document.querySelector('.lucky-header h1');
|
||||
if (!h1) return;
|
||||
const text = h1.textContent.trim();
|
||||
h1.innerHTML = '';
|
||||
[...text].forEach((char, i) => {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = char;
|
||||
span.className = 'char';
|
||||
if (char.trim() === '') {
|
||||
span.style.width = '0.5em';
|
||||
span.style.display = 'inline-block';
|
||||
} else {
|
||||
span.style.animationDelay = `${i * 0.15}s`;
|
||||
}
|
||||
h1.appendChild(span);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>财富好管家 · 本金变动池</title>
|
||||
<link rel="icon" href="/icons/funds.svg" type="image/svg+xml" />
|
||||
<link rel="stylesheet" href="/common/common.css" />
|
||||
<link rel="stylesheet" href="/tools/funds/funds.css" />
|
||||
|
||||
<!-- 吉祥字体 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=TsangerYuMo&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 吉祥装饰图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>财富好管家 · 本金变动池</title>
|
||||
<link rel="icon" href="/icons/funds.svg" type="image/svg+xml" />
|
||||
<link rel="stylesheet" href="/common/common.css" />
|
||||
<link rel="stylesheet" href="/tools/funds/funds.css" />
|
||||
|
||||
<!-- 吉祥字体 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=TsangerYuMo&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 吉祥装饰图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 吉祥背景装饰 -->
|
||||
<div class="lucky-bg">
|
||||
<div class="gold-coin coin-1">💰</div>
|
||||
<div class="gold-coin coin-2">💰</div>
|
||||
<div class="gold-coin coin-3">💰</div>
|
||||
<div class="gold-coin coin-4">💰</div>
|
||||
|
||||
<!-- 右上角灯笼 -->
|
||||
<div class="lucky-lantern right">
|
||||
<i class="fas fa-gift" style="color: #C1272D;"></i>
|
||||
<div class="lantern-tassel"></div>
|
||||
</div>
|
||||
|
||||
<!-- 左上角灯笼 -->
|
||||
<div class="lucky-lantern left">
|
||||
<i class="fas fa-gift" style="color: #C1272D;"></i>
|
||||
<div class="lantern-tassel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
<!-- 吉祥标题 -->
|
||||
<div class="lucky-header">
|
||||
<h1>💰 财富流转 · 生生不息</h1>
|
||||
<p class="lucky-subtitle">记录每一分财富的来去，汇聚八方财源</p>
|
||||
</div>
|
||||
<section class="toolbar">
|
||||
<input id="date-start" type="date" />
|
||||
<input id="date-end" type="date" />
|
||||
<select id="type-filter">
|
||||
<option value="all">全部</option>
|
||||
<option value="in">汇入</option>
|
||||
<option value="out">汇出</option>
|
||||
</select>
|
||||
<input id="kw" type="text" placeholder="银行/备注检索" />
|
||||
<button id="btn-load" class="btn">查询</button>
|
||||
<button id="btn-export" class="btn">导出CSV</button>
|
||||
<button id="btn-settings" class="btn">设置</button>
|
||||
</section>
|
||||
<div id="funds-status" class="status" style="display:none"></div>
|
||||
|
||||
<section class="add-bar">
|
||||
<input id="new-date" type="date" required />
|
||||
<select id="new-type" required>
|
||||
<option value="in">汇入</option>
|
||||
<option value="out">汇出</option>
|
||||
</select>
|
||||
<input id="new-amount" type="text" placeholder="金额（人民币），如 20,000.00 或 -5000" required />
|
||||
<input id="new-bank" type="text" placeholder="银行方/状态" required />
|
||||
<input id="new-remark" type="text" placeholder="备注" required />
|
||||
<button id="btn-add" class="btn">新增</button>
|
||||
</section>
|
||||
|
||||
<section class="stats" id="stats"></section>
|
||||
|
||||
<section class="table-wrap">
|
||||
<table class="flows" id="flows">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>日期</th>
|
||||
<th>类型</th>
|
||||
<th>金额（人民币）</th>
|
||||
<th>银行方/状态</th>
|
||||
<th>期末金额</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="flows-body"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="debug" id="funds-debug" style="display:none">
|
||||
<div class="debug-actions">
|
||||
<button id="fd-btn-copy" class="btn">复制调试信息</button>
|
||||
<button id="fd-btn-refresh" class="btn">刷新</button>
|
||||
<button id="fd-btn-clear" class="btn">清空</button>
|
||||
</div>
|
||||
<div id="fd-output" class="debug-output"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="/common/common.js"></script>
|
||||
<script src="/tools/funds/funds.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user