lizhilun/accountbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端UI标题栏优化与配置更新

Browse Source 
- 更新.gitignore，添加frontend/.next/忽略
- 优化RecordModal、index、recurring、search、stats页面标题栏样式
- 新增frontend/lib/utils.js工具函数
- 更新useCategories.js钩子
- 添加代码优化计划文档

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Developer
2026-03-18 16:33:29 +08:00
co-authored by Claude
parent ad6387e49e
commit 127f491167
9 changed files with 2350 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -15,6 +15,7 @@ node_modules/
# Build output
dist/
build/
frontend/.next/
# IDE
.idea/
docs/superpowers/plans/2026-03-18-code-optimization.md
+2238
View File
File diff suppressed because it is too large Load Diff
frontend/components/RecordModal.js
+2 -5
View File
@@ -24,11 +24,8 @@ export default function RecordModal({
return (
<div className="modal-overlay modal-overlay--fullscreen" onClick={onClose}>
<div className="modal modal--fullscreen" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<div>
<p className="eyebrow">{editingRecord ? '编辑记录' : '新增记录'}</p>
{editingRecord ? <h2>更新账目</h2> : null}
</div>
<div className="modal-header" style={{minHeight: 56, height: 56, padding: 'calc(var(--safe-top) + 8px) 16px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', boxSizing: 'border-box'}}>
<h2 style={{margin: 0, fontSize: '1.1rem'}}>{editingRecord ? '编辑记录' : '新增记录'}</h2>
<button
type="button"
className="icon-button icon-button--ghost"
frontend/hooks/useCategories.js
+3 -1
View File
@@ -5,6 +5,7 @@ import { DEFAULT_CATEGORIES } from '../lib/categories';
export function useCategories() {
const [categories, setCategories] = useState(DEFAULT_CATEGORIES);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
if (!isLoggedIn()) {
@@ -33,6 +34,7 @@ export function useCategories() {
}
} catch (err) {
console.error(err);
setError(err);
} finally {
setLoading(false);
}
@@ -41,5 +43,5 @@ export function useCategories() {
loadCategories();
}, []);
return { categories, loading };
return { categories, loading, error };
}
frontend/lib/utils.js
+28
View File
@@ -0,0 +1,28 @@
// Date utilities
export const getMonthStr = (date) =>
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
export const formatMonth = (date) =>
`${date.getFullYear()}年${date.getMonth() + 1}月`;
export const formatMoney = (num) => (num || 0).toFixed(2);
// Parse date-time string 'YYYY-MM-DD HH:MM' into date and time parts
export const parseDateTime = (dateTimeStr) => {
if (!dateTimeStr) return { datePart: '', timePart: '00:00' };
const [datePart, timePart] = dateTimeStr.split(' ');
return { datePart, timePart: timePart || '00:00' };
};
// Extract date part from 'YYYY-MM-DD HH:MM'
export const getDatePart = (dateTimeStr) => {
if (!dateTimeStr) return '';
return dateTimeStr.split(' ')[0];
};
// Transaction type constants
export const TRANSACTION_TYPES = {
EXPENSE: 'expense',
INCOME: 'income',
ALL: 'all',
};
frontend/pages/index.js
+33 -27
View File
@@ -1,12 +1,13 @@
import { useState, useEffect, useMemo } from 'react';
import { useRouter } from 'next/router';
import { isLoggedIn, getRecords, getStats, createRecord, updateRecord, deleteRecord, getCategories } from '../lib/api';
import { DEFAULT_CATEGORIES } from '../lib/categories';
import { isLoggedIn, getRecords, getStats, createRecord, updateRecord, deleteRecord } from '../lib/api';
import AppShell from '../components/AppShell';
import { Icon } from '../components/icons';
import RecordModal from '../components/RecordModal';
import { useToast } from '../components/ToastProvider';
import { useConfirm } from '../components/ConfirmProvider';
import { useCategories } from '../hooks/useCategories';
import { getMonthStr, formatMoney, formatMonth, parseDateTime, getDatePart } from '../lib/utils';
export default function Home() {
const router = useRouter();
@@ -22,7 +23,14 @@ export default function Home() {
const [submitting, setSubmitting] = useState(false);
const [deleting, setDeleting] = useState(false);
const [formError, setFormError] = useState('');
const [categories, setCategories] = useState(DEFAULT_CATEGORIES);
const { categories, error: categoriesError } = useCategories();
// 显示分类加载错误
useEffect(() => {
if (categoriesError) {
showToast('分类加载失败', { tone: 'error' });
}
}, [categoriesError]);
const [formData, setFormData] = useState({
type: 'expense',
amount: '',
@@ -40,9 +48,6 @@ export default function Home() {
loadData();
}, [router, currentMonth, typeFilter]);
const getMonthStr = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
const formatMoney = (num) => (num || 0).toFixed(2);
const formatMonth = (date) => `${date.getFullYear()}年${date.getMonth() + 1}月`;
const resetForm = () => ({
type: 'expense',
@@ -53,27 +58,26 @@ export default function Home() {
note: '',
});
// Memoized category lookup map for O(1) icon retrieval
const categoryIconMap = useMemo(() => {
const icons = {};
for (const type of ['expense', 'income']) {
for (const cat of categories[type] || []) {
icons[`${type}:${cat.name}`] = cat.icon;
}
}
return icons;
}, [categories]);
const loadData = async () => {
setLoading(true);
try {
const [recordsData, statsData, categoriesData] = await Promise.all([
const [recordsData, statsData] = await Promise.all([
getRecords(getMonthStr(currentMonth), typeFilter),
getStats(getMonthStr(currentMonth)),
getCategories(),
]);
setRecords(recordsData);
setStats(statsData);
// 合并默认分类和自定义分类
setCategories({
expense: [
...DEFAULT_CATEGORIES.expense,
...(categoriesData.expense || []).filter(c => !DEFAULT_CATEGORIES.expense.some(d => d.name === c.name))
],
income: [
...DEFAULT_CATEGORIES.income,
...(categoriesData.income || []).filter(c => !DEFAULT_CATEGORIES.income.some(d => d.name === c.name))
],
});
} catch (err) {
console.error(err);
showToast(err.message, { tone: 'error' });
@@ -106,14 +110,14 @@ export default function Home() {
};
const openEditModal = (record) => {
const [datePart, timePart] = record.date.split(' ');
const { datePart, timePart } = parseDateTime(record.date);
setEditingRecord(record);
setFormData({
type: record.type,
amount: record.amount.toString(),
category: record.category,
date: datePart,
time: timePart || '00:00',
time: timePart,
note: record.note || '',
});
setFormError('');
@@ -146,14 +150,16 @@ export default function Home() {
};
if (editingRecord) {
const updated = { ...editingRecord, ...data, amount: parseFloat(data.amount) };
await updateRecord(editingRecord.id, data);
setRecords(prev => prev.map(r => r.id === editingRecord.id ? updated : r));
showToast('记录已更新', { tone: 'success' });
} else {
await createRecord(data);
const newRecord = await createRecord(data);
setRecords(prev => [...prev, newRecord]);
showToast('记录已添加', { tone: 'success' });
}
closeModal();
await loadData();
} catch (err) {
setFormError(err.message);
showToast(err.message, { tone: 'error' });
@@ -174,9 +180,9 @@ export default function Home() {
setDeleting(true);
try {
await deleteRecord(editingRecord.id);
setRecords(prev => prev.filter(r => r.id !== editingRecord.id));
closeModal();
showToast('记录已删除', { tone: 'success' });
await loadData();
} catch (err) {
setFormError(err.message);
showToast(err.message, { tone: 'error' });
@@ -187,7 +193,7 @@ export default function Home() {
const groupedRecords = useMemo(() => {
return records.reduce((groups, record) => {
const date = record.date.split(' ')[0];
const date = getDatePart(record.date);
if (!groups[date]) groups[date] = [];
groups[date].push(record);
return groups;
@@ -293,11 +299,11 @@ export default function Home() {
<span className="day-expense">支出 {formatMoney(getDayExpense(date))}</span>
</div>
{groupedRecords[date].map((record) => {
const cat = categories[record.type]?.find((item) => item.name === record.category) || { icon: '📝' };
const icon = categoryIconMap[`${record.type}:${record.category}`] || '📝';
return (
<button key={record.id} type="button" className="record-item" onClick={() => openEditModal(record)}>
<div className="record-left">
<div className="record-icon">{cat.icon}</div>
<div className="record-icon">{icon}</div>
<div className="record-info">
<div className="record-category">{record.category}</div>
{record.note && <div className="record-note">{record.note}</div>}
frontend/pages/recurring.js
+11 -4
View File
@@ -7,11 +7,20 @@ import { useToast } from '../components/ToastProvider';
import { useConfirm } from '../components/ConfirmProvider';
import { useCategories } from '../hooks/useCategories';
const DAYS = Array.from({ length: 28 }, (_, i) => i + 1);
export default function Recurring() {
const router = useRouter();
const { showToast } = useToast();
const { confirm } = useConfirm();
const { categories } = useCategories();
const { categories, error: categoriesError } = useCategories();
// 显示分类加载错误
useEffect(() => {
if (categoriesError) {
showToast('分类加载失败', { tone: 'error' });
}
}, [categoriesError]);
const [bills, setBills] = useState([]);
const [modalOpen, setModalOpen] = useState(false);
const [editingBill, setEditingBill] = useState(null);
@@ -170,8 +179,6 @@ export default function Recurring() {
}
};
const days = Array.from({ length: 28 }, (_, index) => index + 1);
const actions = (
<button type="button" className="icon-button" aria-label="设置" onClick={() => router.push('/settings')}>
<Icon name="settings" size={18} />
@@ -322,7 +329,7 @@ export default function Recurring() {
<div className="form-group">
<label htmlFor="bill-day">日期（每月几号）</label>
<select id="bill-day" value={formData.day} onChange={(e) => setFormData({ ...formData, day: e.target.value })} disabled={submitting || deleting}>
{days.map((day) => (
{DAYS.map((day) => (
<option key={day} value={day}>{day} 日</option>
))}
</select>
frontend/pages/search.js
+14 -6
View File
@@ -7,12 +7,20 @@ import RecordModal from '../components/RecordModal';
import { useToast } from '../components/ToastProvider';
import { useConfirm } from '../components/ConfirmProvider';
import { useCategories } from '../hooks/useCategories';
import { formatMoney, parseDateTime, getDatePart } from '../lib/utils';
export default function Search() {
const router = useRouter();
const { showToast } = useToast();
const confirm = useConfirm();
const { categories } = useCategories();
const { categories, error: categoriesError } = useCategories();
// 显示分类加载错误
useEffect(() => {
if (categoriesError) {
showToast('分类加载失败', { tone: 'error' });
}
}, [categoriesError]);
const [keyword, setKeyword] = useState('');
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
@@ -40,6 +48,8 @@ export default function Search() {
useEffect(() => {
if (router.isReady && router.query.q) {
const q = decodeURIComponent(router.query.q);
// Skip if already have results for this keyword (prevents double API call)
if (keyword === q && results.length > 0) return;
setKeyword(q);
// 自动搜索
const doSearch = async () => {
@@ -56,7 +66,7 @@ export default function Search() {
};
doSearch();
}
}, [router.isReady, router.query.q]);
}, [router.isReady, router.query.q, keyword, results]);
const handleSearch = async (e) => {
e.preventDefault();
@@ -81,7 +91,7 @@ export default function Search() {
};
const openEditModal = (record) => {
const [datePart, timePart] = record.date.split(' ');
const { datePart, timePart } = parseDateTime(record.date);
setEditingRecord(record);
setFormData({
type: record.type,
@@ -165,12 +175,10 @@ export default function Search() {
}
};
const formatMoney = (num) => (num || 0).toFixed(2);
const groupedResults = useMemo(() => {
if (!Array.isArray(results)) return {};
return results.reduce((groups, record) => {
const date = record.date.split(' ')[0];
const date = getDatePart(record.date);
if (!groups[date]) groups[date] = [];
groups[date].push(record);
return groups;
frontend/pages/stats.js
+20 -5
View File
@@ -1,12 +1,30 @@
import { useState, useEffect, useRef, useMemo } from 'react';
import { useRouter } from 'next/router';
import { isLoggedIn, getTrendStats, getCategoryStats } from '../lib/api';
import { Chart, registerables } from 'chart.js';
import {
Chart,
LineController,
LineElement,
PointElement,
LinearScale,
CategoryScale,
Filler,
Legend,
} from 'chart.js';
import AppShell from '../components/AppShell';
import { Icon } from '../components/icons';
import { getMonthStr, formatMonth } from '../lib/utils';
import { useToast } from '../components/ToastProvider';
Chart.register(...registerables);
Chart.register(
LineController,
LineElement,
PointElement,
LinearScale,
CategoryScale,
Filler,
Legend
);
export default function Stats() {
const router = useRouter();
@@ -35,9 +53,6 @@ export default function Stats() {
loadCategoryData();
}, [router, currentMonth, categoryType]);
const getMonthStr = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
const formatMonth = (date) => `${date.getFullYear()}年${date.getMonth() + 1}月`;
const loadTrendData = async () => {
setTrendLoading(true);
try {