|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>个人记账系统</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/sql-wasm.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.fade-enter-active, .fade-leave-active { |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.fade-enter, .fade-leave-to { |
|
|
opacity: 0; |
|
|
} |
|
|
.chart-container { |
|
|
height: 300px; |
|
|
} |
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.scrollbar-hide { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="min-h-screen flex flex-col" id="app"> |
|
|
|
|
|
<header class="bg-blue-600 text-white shadow-md"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-wallet text-2xl"></i> |
|
|
<h1 class="text-xl font-bold">个人记账系统</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button @click="showAddModal = true" class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-blue-50 transition"> |
|
|
<i class="fas fa-plus mr-1"></i> 添加记录 |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button @click="userMenuOpen = !userMenuOpen" class="flex items-center space-x-2 focus:outline-none"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</button> |
|
|
<div v-if="userMenuOpen" @click.away="userMenuOpen = false" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">个人资料</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">设置</a> |
|
|
<div class="border-t border-gray-200"></div> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">退出</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 container mx-auto px-4 py-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">总收入</p> |
|
|
<p class="text-2xl font-bold text-green-500">¥ {{ formatCurrency(totalIncome) }}</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-arrow-up text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">总支出</p> |
|
|
<p class="text-2xl font-bold text-red-500">¥ {{ formatCurrency(totalExpense) }}</p> |
|
|
</div> |
|
|
<div class="bg-red-100 p-3 rounded-full"> |
|
|
<i class="fas fa-arrow-down text-red-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">结余</p> |
|
|
<p class="text-2xl font-bold text-blue-500">¥ {{ formatCurrency(totalIncome - totalExpense) }}</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-balance-scale text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold">收支分析</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button @click="chartType = 'bar'" :class="{'bg-blue-100 text-blue-600': chartType === 'bar'}" class="px-3 py-1 rounded text-sm">柱状图</button> |
|
|
<button @click="chartType = 'pie'" :class="{'bg-blue-100 text-blue-600': chartType === 'pie'}" class="px-3 py-1 rounded text-sm">饼图</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="financeChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">分类统计</h2> |
|
|
<div class="space-y-4"> |
|
|
<div v-for="category in expenseCategories" :key="category.name" class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center" :class="category.color"> |
|
|
<i :class="category.icon"></i> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>{{ category.name }}</span> |
|
|
<span class="font-medium">¥ {{ formatCurrency(category.amount) }}</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-blue-600 h-1.5 rounded-full" :style="`width: ${(category.amount / totalExpense) * 100}%`"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<h2 class="text-lg font-semibold">交易记录</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="relative"> |
|
|
<select v-model="filterType" class="appearance-none bg-gray-100 border-0 py-1 pl-3 pr-8 rounded-full text-sm focus:outline-none"> |
|
|
<option value="all">所有类型</option> |
|
|
<option value="income">收入</option> |
|
|
<option value="expense">支出</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<select v-model="filterCategory" class="appearance-none bg-gray-100 border-0 py-1 pl-3 pr-8 rounded-full text-sm focus:outline-none"> |
|
|
<option value="all">所有分类</option> |
|
|
<option v-for="cat in allCategories" :value="cat.name">{{ cat.name }}</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="overflow-x-auto scrollbar-hide"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr v-for="record in filteredRecords" :key="record.id"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(record.date) }}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span :class="record.type === 'income' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"> |
|
|
{{ record.type === 'income' ? '收入' : '支出' }} |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-5 h-5 rounded-full flex items-center justify-center mr-2" :class="getCategoryColor(record.category)"> |
|
|
<i :class="getCategoryIcon(record.category)" class="text-xs"></i> |
|
|
</div> |
|
|
{{ record.category }} |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm" :class="record.type === 'income' ? 'text-green-600 font-medium' : 'text-red-600 font-medium'"> |
|
|
¥ {{ formatCurrency(record.amount) }} |
|
|
</td> |
|
|
<td class="px-6 py-4 text-sm text-gray-500">{{ record.note || '-' }}</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button @click="editRecord(record)" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button @click="deleteRecord(record.id)" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr v-if="filteredRecords.length === 0"> |
|
|
<td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">暂无记录</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div v-if="showAddModal" class="fixed inset-0 overflow-y-auto z-50"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<transition name="fade"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
</transition> |
|
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
|
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
{{ editingRecord ? '编辑记录' : '添加新记录' }} |
|
|
</h3> |
|
|
<div class="mt-2 space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">类型</label> |
|
|
<div class="flex space-x-4"> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="radio" v-model="newRecord.type" value="income" class="form-radio h-4 w-4 text-green-600"> |
|
|
<span class="ml-2">收入</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="radio" v-model="newRecord.type" value="expense" class="form-radio h-4 w-4 text-red-600"> |
|
|
<span class="ml-2">支出</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="category" class="block text-sm font-medium text-gray-700 mb-1">分类</label> |
|
|
<select id="category" v-model="newRecord.category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
|
<option v-for="cat in (newRecord.type === 'income' ? incomeCategories : expenseCategories)" :value="cat.name">{{ cat.name }}</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="amount" class="block text-sm font-medium text-gray-700 mb-1">金额</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500 sm:text-sm">¥</span> |
|
|
</div> |
|
|
<input type="number" id="amount" v-model="newRecord.amount" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="date" class="block text-sm font-medium text-gray-700 mb-1">日期</label> |
|
|
<input type="date" id="date" v-model="newRecord.date" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="note" class="block text-sm font-medium text-gray-700 mb-1">备注</label> |
|
|
<textarea id="note" v-model="newRecord.note" rows="2" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button @click="saveRecord" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
保存 |
|
|
</button> |
|
|
<button @click="showAddModal = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
取消 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> |
|
|
<script> |
|
|
|
|
|
const config = { |
|
|
locateFile: filename => `https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/${filename}` |
|
|
}; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => { |
|
|
try { |
|
|
|
|
|
const SQL = await initSqlJs(config); |
|
|
|
|
|
|
|
|
const db = new SQL.Database(); |
|
|
|
|
|
|
|
|
db.run(` |
|
|
CREATE TABLE IF NOT EXISTS records ( |
|
|
id INTEGER PRIMARY KEY AUTOINCREMENT, |
|
|
type TEXT NOT NULL, |
|
|
category TEXT NOT NULL, |
|
|
amount REAL NOT NULL, |
|
|
date TEXT NOT NULL, |
|
|
note TEXT |
|
|
); |
|
|
`); |
|
|
|
|
|
|
|
|
new Vue({ |
|
|
el: '#app', |
|
|
data: { |
|
|
db: db, |
|
|
records: [], |
|
|
newRecord: { |
|
|
type: 'expense', |
|
|
category: '餐饮', |
|
|
amount: '', |
|
|
date: new Date().toISOString().split('T')[0], |
|
|
note: '' |
|
|
}, |
|
|
editingRecord: null, |
|
|
showAddModal: false, |
|
|
userMenuOpen: false, |
|
|
filterType: 'all', |
|
|
filterCategory: 'all', |
|
|
chartType: 'bar', |
|
|
chart: null, |
|
|
incomeCategories: [ |
|
|
{ name: '工资', icon: 'fas fa-money-bill-wave', color: 'bg-green-100 text-green-600' }, |
|
|
{ name: '奖金', icon: 'fas fa-gift', color: 'bg-blue-100 text-blue-600' }, |
|
|
{ name: '投资', icon: 'fas fa-chart-line', color: 'bg-purple-100 text-purple-600' }, |
|
|
{ name: '其他收入', icon: 'fas fa-coins', color: 'bg-yellow-100 text-yellow-600' } |
|
|
], |
|
|
expenseCategories: [ |
|
|
{ name: '餐饮', icon: 'fas fa-utensils', color: 'bg-red-100 text-red-600' }, |
|
|
{ name: '购物', icon: 'fas fa-shopping-bag', color: 'bg-pink-100 text-pink-600' }, |
|
|
{ name: '交通', icon: 'fas fa-bus', color: 'bg-indigo-100 text-indigo-600' }, |
|
|
{ name: '娱乐', icon: 'fas fa-gamepad', color: 'bg-purple-100 text-purple-600' }, |
|
|
{ name: '住房', icon: 'fas fa-home', color: 'bg-blue-100 text-blue-600' }, |
|
|
{ name: '医疗', icon: 'fas fa-heartbeat', color: 'bg-green-100 text-green-600' }, |
|
|
{ name: '教育', icon: 'fas fa-book', color: 'bg-yellow-100 text-yellow-600' }, |
|
|
{ name: '其他支出', icon: 'fas fa-ellipsis-h', color: 'bg-gray-100 text-gray-600' } |
|
|
] |
|
|
}, |
|
|
computed: { |
|
|
allCategories() { |
|
|
return [...this.incomeCategories, ...this.expenseCategories]; |
|
|
}, |
|
|
filteredRecords() { |
|
|
let filtered = this.records; |
|
|
|
|
|
if (this.filterType !== 'all') { |
|
|
filtered = filtered.filter(r => r.type === this.filterType); |
|
|
} |
|
|
|
|
|
if (this.filterCategory !== 'all') { |
|
|
filtered = filtered.filter(r => r.category === this.filterCategory); |
|
|
} |
|
|
|
|
|
return filtered.sort((a, b) => new Date(b.date) - new Date(a.date)); |
|
|
}, |
|
|
totalIncome() { |
|
|
return this.records |
|
|
.filter(r => r.type === 'income') |
|
|
.reduce((sum, r) => sum + r.amount, 0); |
|
|
}, |
|
|
totalExpense() { |
|
|
return this.records |
|
|
.filter(r => r.type === 'expense') |
|
|
.reduce((sum, r) => sum + r.amount, 0); |
|
|
}, |
|
|
categorizedExpenses() { |
|
|
const result = {}; |
|
|
this.expenseCategories.forEach(cat => { |
|
|
result[cat.name] = 0; |
|
|
}); |
|
|
|
|
|
this.records |
|
|
.filter(r => r.type === 'expense') |
|
|
.forEach(r => { |
|
|
if (result[r.category] !== undefined) { |
|
|
result[r.category] += r.amount; |
|
|
} else { |
|
|
result['其他支出'] += r.amount; |
|
|
} |
|
|
}); |
|
|
|
|
|
return this.expenseCategories.map(cat => ({ |
|
|
...cat, |
|
|
amount: result[cat.name] |
|
|
})); |
|
|
} |
|
|
}, |
|
|
methods: { |
|
|
loadRecords() { |
|
|
const stmt = this.db.prepare('SELECT * FROM records ORDER BY date DESC'); |
|
|
const records = []; |
|
|
while (stmt.step()) { |
|
|
records.push(stmt.getAsObject()); |
|
|
} |
|
|
stmt.free(); |
|
|
this.records = records; |
|
|
this.updateChart(); |
|
|
}, |
|
|
saveRecord() { |
|
|
if (!this.newRecord.amount || isNaN(this.newRecord.amount)) { |
|
|
alert('请输入有效的金额'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const amount = parseFloat(this.newRecord.amount); |
|
|
if (amount <= 0) { |
|
|
alert('金额必须大于0'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!this.newRecord.date) { |
|
|
alert('请选择日期'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (this.editingRecord) { |
|
|
|
|
|
const stmt = this.db.prepare( |
|
|
'UPDATE records SET type = ?, category = ?, amount = ?, date = ?, note = ? WHERE id = ?' |
|
|
); |
|
|
stmt.bind([ |
|
|
this.newRecord.type, |
|
|
this.newRecord.category, |
|
|
amount, |
|
|
this.newRecord.date, |
|
|
this.newRecord.note || null, |
|
|
this.editingRecord.id |
|
|
]); |
|
|
stmt.step(); |
|
|
stmt.free(); |
|
|
} else { |
|
|
|
|
|
const stmt = this.db.prepare( |
|
|
'INSERT INTO records (type, category, amount, date, note) VALUES (?, ?, ?, ?, ?)' |
|
|
); |
|
|
stmt.bind([ |
|
|
this.newRecord.type, |
|
|
this.newRecord.category, |
|
|
amount, |
|
|
this.newRecord.date, |
|
|
this.newRecord.note || null |
|
|
]); |
|
|
stmt.step(); |
|
|
stmt.free(); |
|
|
} |
|
|
|
|
|
this.loadRecords(); |
|
|
this.resetForm(); |
|
|
this.showAddModal = false; |
|
|
}, |
|
|
editRecord(record) { |
|
|
this.editingRecord = record; |
|
|
this.newRecord = { |
|
|
type: record.type, |
|
|
category: record.category, |
|
|
amount: record.amount, |
|
|
date: record.date, |
|
|
note: record.note || '' |
|
|
}; |
|
|
this.showAddModal = true; |
|
|
}, |
|
|
deleteRecord(id) { |
|
|
if (confirm('确定要删除这条记录吗？')) { |
|
|
const stmt = this.db.prepare('DELETE FROM records WHERE id = ?'); |
|
|
stmt.bind([id]); |
|
|
stmt.step(); |
|
|
stmt.free(); |
|
|
this.loadRecords(); |
|
|
} |
|
|
}, |
|
|
resetForm() { |
|
|
this.newRecord = { |
|
|
type: 'expense', |
|
|
category: '餐饮', |
|
|
amount: '', |
|
|
date: new Date().toISOString().split('T')[0], |
|
|
note: '' |
|
|
}; |
|
|
this.editingRecord = null; |
|
|
}, |
|
|
formatCurrency(value) { |
|
|
return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); |
|
|
}, |
|
|
formatDate(dateStr) { |
|
|
const date = new Date(dateStr); |
|
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`; |
|
|
}, |
|
|
getCategoryIcon(categoryName) { |
|
|
const category = this.allCategories.find(c => c.name === categoryName); |
|
|
return category ? category.icon : 'fas fa-question-circle'; |
|
|
}, |
|
|
getCategoryColor(categoryName) { |
|
|
const category = this.allCategories.find(c => c.name === categoryName); |
|
|
return category ? category.color : 'bg-gray-100 text-gray-600'; |
|
|
}, |
|
|
updateChart() { |
|
|
if (!window.Chart) { |
|
|
|
|
|
setTimeout(this.updateChart, 100); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (this.chart) { |
|
|
this.chart.destroy(); |
|
|
} |
|
|
|
|
|
const ctx = document.getElementById('financeChart').getContext('2d'); |
|
|
|
|
|
if (this.chartType === 'bar') { |
|
|
|
|
|
const last7Days = this.getLastNDays(7); |
|
|
const incomeData = last7Days.map(day => { |
|
|
return this.records |
|
|
.filter(r => r.type === 'income' && r.date === day) |
|
|
.reduce((sum, r) => sum + r.amount, 0); |
|
|
}); |
|
|
const expenseData = last7Days.map(day => { |
|
|
return this.records |
|
|
.filter(r => r.type === 'expense' && r.date === day) |
|
|
.reduce((sum, r) => sum + r.amount, 0); |
|
|
}); |
|
|
|
|
|
this.chart = new window.Chart(ctx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: last7Days.map(day => day.split('-').slice(1).join('-')), |
|
|
datasets: [ |
|
|
{ |
|
|
label: '收入', |
|
|
data: incomeData, |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.7)', |
|
|
borderColor: 'rgba(16, 185, 129, 1)', |
|
|
borderWidth: 1 |
|
|
}, |
|
|
{ |
|
|
label: '支出', |
|
|
data: expenseData, |
|
|
backgroundColor: 'rgba(239, 68, 68, 0.7)', |
|
|
borderColor: 'rgba(239, 68, 68, 1)', |
|
|
borderWidth: 1 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
ticks: { |
|
|
callback: value => '¥' + value |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: context => { |
|
|
return context.dataset.label + ': ¥' + context.raw.toFixed(2); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} else { |
|
|
|
|
|
const data = this.categorizedExpenses |
|
|
.filter(cat => cat.amount > 0) |
|
|
.map(cat => ({ |
|
|
name: cat.name, |
|
|
value: cat.amount, |
|
|
color: cat.color.split(' ')[1].replace('text-', '') |
|
|
})); |
|
|
|
|
|
this.chart = new window |
|
|
</html> |
