diff --git a/apps/backend/api/finance/accounts.get.ts b/apps/backend/api/finance/accounts.get.ts
index 7ab1c47a..603ad851 100644
--- a/apps/backend/api/finance/accounts.get.ts
+++ b/apps/backend/api/finance/accounts.get.ts
@@ -1,5 +1,4 @@
 import { getQuery } from 'h3';
-
 import { listAccounts } from '~/utils/finance-metadata';
 import { useResponseSuccess } from '~/utils/response';
 
diff --git a/apps/backend/api/finance/categories.get.ts b/apps/backend/api/finance/categories.get.ts
index 40d335c5..a0af081e 100644
--- a/apps/backend/api/finance/categories.get.ts
+++ b/apps/backend/api/finance/categories.get.ts
@@ -1,11 +1,10 @@
 import { getQuery } from 'h3';
-
 import { fetchCategories } from '~/utils/finance-repository';
 import { useResponseSuccess } from '~/utils/response';
 
 export default defineEventHandler(async (event) => {
   const query = getQuery(event);
-  const type = query.type as 'income' | 'expense' | undefined;
+  const type = query.type as 'expense' | 'income' | undefined;
 
   const categories = fetchCategories({ type });
 
diff --git a/apps/backend/api/finance/categories.post.ts b/apps/backend/api/finance/categories.post.ts
index d6a8f22d..73056169 100644
--- a/apps/backend/api/finance/categories.post.ts
+++ b/apps/backend/api/finance/categories.post.ts
@@ -1,5 +1,4 @@
 import { readBody } from 'h3';
-
 import { createCategoryRecord } from '~/utils/finance-metadata';
 import { useResponseError, useResponseSuccess } from '~/utils/response';
 
diff --git a/apps/backend/api/finance/categories/[id].delete.ts b/apps/backend/api/finance/categories/[id].delete.ts
index 7e3b82a9..80e845d1 100644
--- a/apps/backend/api/finance/categories/[id].delete.ts
+++ b/apps/backend/api/finance/categories/[id].delete.ts
@@ -1,5 +1,4 @@
 import { getRouterParam } from 'h3';
-
 import { deleteCategoryRecord } from '~/utils/finance-metadata';
 import { useResponseError, useResponseSuccess } from '~/utils/response';
 
diff --git a/apps/backend/api/finance/categories/[id].put.ts b/apps/backend/api/finance/categories/[id].put.ts
index 37f5c6c0..5c8bbc22 100644
--- a/apps/backend/api/finance/categories/[id].put.ts
+++ b/apps/backend/api/finance/categories/[id].put.ts
@@ -1,5 +1,4 @@
 import { getRouterParam, readBody } from 'h3';
-
 import { updateCategoryRecord } from '~/utils/finance-metadata';
 import { useResponseError, useResponseSuccess } from '~/utils/response';
 
diff --git a/apps/backend/api/finance/exchange-rates.get.ts b/apps/backend/api/finance/exchange-rates.get.ts
index 98840c4e..ccf26437 100644
--- a/apps/backend/api/finance/exchange-rates.get.ts
+++ b/apps/backend/api/finance/exchange-rates.get.ts
@@ -1,5 +1,4 @@
 import { getQuery } from 'h3';
-
 import { listExchangeRates } from '~/utils/finance-metadata';
 import { useResponseSuccess } from '~/utils/response';
 
@@ -22,7 +21,10 @@ export default defineEventHandler(async (event) => {
   if (date) {
     rates = rates.filter((rate) => rate.date === date);
   } else if (rates.length > 0) {
-    const latestDate = rates.reduce((max, rate) => (rate.date > max ? rate.date : max), rates[0].date);
+    const latestDate = rates.reduce(
+      (max, rate) => Math.max(rate.date, max),
+      rates[0].date,
+    );
     rates = rates.filter((rate) => rate.date === latestDate);
   }
 
diff --git a/apps/backend/api/finance/transactions.get.ts b/apps/backend/api/finance/transactions.get.ts
index 269fc2f5..8323ba6d 100644
--- a/apps/backend/api/finance/transactions.get.ts
+++ b/apps/backend/api/finance/transactions.get.ts
@@ -1,5 +1,4 @@
 import { getQuery } from 'h3';
-
 import { fetchTransactions } from '~/utils/finance-repository';
 import { useResponseSuccess } from '~/utils/response';
 
diff --git a/apps/backend/api/finance/transactions.post.ts b/apps/backend/api/finance/transactions.post.ts
index 4aad3532..c0087e7e 100644
--- a/apps/backend/api/finance/transactions.post.ts
+++ b/apps/backend/api/finance/transactions.post.ts
@@ -1,5 +1,4 @@
 import { readBody } from 'h3';
-
 import { createTransaction } from '~/utils/finance-repository';
 import { useResponseError, useResponseSuccess } from '~/utils/response';
 
diff --git a/apps/backend/api/finance/transactions/[id].delete.ts b/apps/backend/api/finance/transactions/[id].delete.ts
index d0121787..0abee8ba 100644
--- a/apps/backend/api/finance/transactions/[id].delete.ts
+++ b/apps/backend/api/finance/transactions/[id].delete.ts
@@ -1,5 +1,4 @@
 import { getRouterParam } from 'h3';
-
 import { softDeleteTransaction } from '~/utils/finance-repository';
 import { useResponseError, useResponseSuccess } from '~/utils/response';
 
diff --git a/apps/backend/api/finance/transactions/[id].put.ts b/apps/backend/api/finance/transactions/[id].put.ts
index c01f1747..d2488497 100644
--- a/apps/backend/api/finance/transactions/[id].put.ts
+++ b/apps/backend/api/finance/transactions/[id].put.ts
@@ -1,6 +1,8 @@
 import { getRouterParam, readBody } from 'h3';
-
-import { restoreTransaction, updateTransaction } from '~/utils/finance-repository';
+import {
+  restoreTransaction,
+  updateTransaction,
+} from '~/utils/finance-repository';
 import { useResponseError, useResponseSuccess } from '~/utils/response';
 
 export default defineEventHandler(async (event) => {
@@ -30,10 +32,12 @@ export default defineEventHandler(async (event) => {
     payload.amount = amount;
   }
   if (body?.currency) payload.currency = body.currency;
-  if (body?.categoryId !== undefined) payload.categoryId = body.categoryId ?? null;
+  if (body?.categoryId !== undefined)
+    payload.categoryId = body.categoryId ?? null;
   if (body?.accountId !== undefined) payload.accountId = body.accountId ?? null;
   if (body?.transactionDate) payload.transactionDate = body.transactionDate;
-  if (body?.description !== undefined) payload.description = body.description ?? '';
+  if (body?.description !== undefined)
+    payload.description = body.description ?? '';
   if (body?.project !== undefined) payload.project = body.project ?? null;
   if (body?.memo !== undefined) payload.memo = body.memo ?? null;
   if (body?.isDeleted !== undefined) payload.isDeleted = body.isDeleted;
diff --git a/apps/backend/scripts/import-finance-data.js b/apps/backend/scripts/import-finance-data.js
index 1f784e70..2bac3f86 100644
--- a/apps/backend/scripts/import-finance-data.js
+++ b/apps/backend/scripts/import-finance-data.js
@@ -1,6 +1,7 @@
 #!/usr/bin/env node
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
+
 const Database = require('better-sqlite3');
 
 const args = process.argv.slice(2);
@@ -110,7 +111,7 @@ db.exec(`
   );
 `);
 
-const RAW_TEXT = fs.readFileSync(inputPath, 'utf-8').replace(/^\ufeff/, '');
+const RAW_TEXT = fs.readFileSync(inputPath, 'utf8').replace(/^\uFEFF/, '');
 const lines = RAW_TEXT.split(/\r?\n/).filter((line) => line.trim().length > 0);
 if (lines.length <= 1) {
   console.error('CSV 文件内容为空');
@@ -126,7 +127,14 @@ const ACCOUNT_IDX = header.indexOf('支出人');
 const CATEGORY_IDX = header.indexOf('计入');
 const SHARE_IDX = header.indexOf('阿德应得分红');
 
-if (DATE_IDX === -1 || PROJECT_IDX === -1 || TYPE_IDX === -1 || AMOUNT_IDX === -1 || ACCOUNT_IDX === -1 || CATEGORY_IDX === -1) {
+if (
+  DATE_IDX === -1 ||
+  PROJECT_IDX === -1 ||
+  TYPE_IDX === -1 ||
+  AMOUNT_IDX === -1 ||
+  ACCOUNT_IDX === -1 ||
+  CATEGORY_IDX === -1
+) {
   console.error('CSV 表头缺少必需字段');
   process.exit(1);
 }
@@ -138,9 +146,27 @@ const CURRENCIES = [
 ];
 
 const EXCHANGE_RATES = [
-  { fromCurrency: 'CNY', toCurrency: 'CNY', rate: 1, date: `${baseYear}-01-01`, source: 'system' },
-  { fromCurrency: 'USD', toCurrency: 'CNY', rate: 7.14, date: `${baseYear}-01-01`, source: 'manual' },
-  { fromCurrency: 'THB', toCurrency: 'CNY', rate: 0.2, date: `${baseYear}-01-01`, source: 'manual' },
+  {
+    fromCurrency: 'CNY',
+    toCurrency: 'CNY',
+    rate: 1,
+    date: `${baseYear}-01-01`,
+    source: 'system',
+  },
+  {
+    fromCurrency: 'USD',
+    toCurrency: 'CNY',
+    rate: 7.14,
+    date: `${baseYear}-01-01`,
+    source: 'manual',
+  },
+  {
+    fromCurrency: 'THB',
+    toCurrency: 'CNY',
+    rate: 0.2,
+    date: `${baseYear}-01-01`,
+    source: 'manual',
+  },
 ];
 
 const DEFAULT_EXPENSE_CATEGORY = '未分类支出';
@@ -178,7 +204,12 @@ function inferCurrency(accountName, amountText) {
   const name = accountName ?? '';
   const text = `${name}${amountText ?? ''}`;
   const lower = text.toLowerCase();
-  if (lower.includes('美金') || lower.includes('usd') || lower.includes('u$') || lower.includes('u ')) {
+  if (
+    lower.includes('美金') ||
+    lower.includes('usd') ||
+    lower.includes('u$') ||
+    lower.includes('u ')
+  ) {
     return 'USD';
   }
   if (lower.includes('泰铢') || lower.includes('thb')) {
@@ -190,7 +221,9 @@ function inferCurrency(accountName, amountText) {
 function parseAmount(raw) {
   if (!raw) return 0;
   const matches = String(raw)
-    .replace(/[^0-9.+-]/g, (char) => (char === '+' || char === '-' ? char : ' '))
+    .replaceAll(/[^0-9.+-]/g, (char) =>
+      char === '+' || char === '-' ? char : ' ',
+    )
     .match(/[-+]?\d+(?:\.\d+)?/g);
   if (!matches) return 0;
   return matches.map(Number).reduce((sum, value) => sum + value, 0);
@@ -205,10 +238,18 @@ function normalizeDate(value, monthTracker) {
   const month = Number(match[1]);
   const day = Number(match[2]);
   let year = baseYear;
-  if (monthTracker.lastMonth !== null && month > monthTracker.lastMonth && monthTracker.wrapped) {
+  if (
+    monthTracker.lastMonth !== null &&
+    month > monthTracker.lastMonth &&
+    monthTracker.wrapped
+  ) {
     year -= 1;
   }
-  if (monthTracker.lastMonth !== null && month < monthTracker.lastMonth && !monthTracker.wrapped) {
+  if (
+    monthTracker.lastMonth !== null &&
+    month < monthTracker.lastMonth &&
+    !monthTracker.wrapped
+  ) {
     monthTracker.wrapped = true;
   }
   monthTracker.lastMonth = month;
@@ -231,12 +272,25 @@ const insertCategory = db.prepare(`
 
 db.transaction(() => {
   if (!categoryMap.has(`${DEFAULT_INCOME_CATEGORY}-income`)) {
-    const info = insertCategory.run({ name: DEFAULT_INCOME_CATEGORY, type: 'income', icon: '💰', color: '#10b981' });
+    const info = insertCategory.run({
+      name: DEFAULT_INCOME_CATEGORY,
+      type: 'income',
+      icon: '💰',
+      color: '#10b981',
+    });
     categoryMap.set(`${DEFAULT_INCOME_CATEGORY}-income`, info.lastInsertRowid);
   }
   if (!categoryMap.has(`${DEFAULT_EXPENSE_CATEGORY}-expense`)) {
-    const info = insertCategory.run({ name: DEFAULT_EXPENSE_CATEGORY, type: 'expense', icon: '🏷️', color: '#6366f1' });
-    categoryMap.set(`${DEFAULT_EXPENSE_CATEGORY}-expense`, info.lastInsertRowid);
+    const info = insertCategory.run({
+      name: DEFAULT_EXPENSE_CATEGORY,
+      type: 'expense',
+      icon: '🏷️',
+      color: '#6366f1',
+    });
+    categoryMap.set(
+      `${DEFAULT_EXPENSE_CATEGORY}-expense`,
+      info.lastInsertRowid,
+    );
   }
 })();
 
@@ -261,20 +315,26 @@ for (let i = 1; i < lines.length; i += 1) {
   const amountRaw = row[AMOUNT_IDX].trim();
   const accountNameRaw = row[ACCOUNT_IDX].trim();
   const categoryRaw = row[CATEGORY_IDX].trim();
-  const shareRaw = SHARE_IDX >= 0 ? row[SHARE_IDX].trim() : '';
+  const shareRaw = SHARE_IDX === -1 ? '' : row[SHARE_IDX].trim();
 
   const amount = parseAmount(amountRaw);
   if (!amount) {
     continue;
   }
 
-  const normalizedType = typeText.includes('收') && !typeText.includes('支') ? 'income' : 'expense';
+  const normalizedType =
+    typeText.includes('收') && !typeText.includes('支') ? 'income' : 'expense';
   const accountName = accountNameRaw || '美金现金';
   const currency = inferCurrency(accountNameRaw, amountRaw);
 
   if (!accountMap.has(accountName)) {
     const icon = currency === 'USD' ? '💵' : currency === 'THB' ? '💱' : '💰';
-    const color = currency === 'USD' ? '#1677ff' : currency === 'THB' ? '#22c55e' : '#6366f1';
+    const color =
+      currency === 'USD'
+        ? '#1677ff'
+        : currency === 'THB'
+          ? '#22c55e'
+          : '#6366f1';
     const info = insertAccount.run({
       name: accountName,
       currency,
@@ -285,7 +345,11 @@ for (let i = 1; i < lines.length; i += 1) {
     accountMap.set(accountName, Number(info.lastInsertRowid));
   }
 
-  const categoryName = categoryRaw || (normalizedType === 'income' ? DEFAULT_INCOME_CATEGORY : DEFAULT_EXPENSE_CATEGORY);
+  const categoryName =
+    categoryRaw ||
+    (normalizedType === 'income'
+      ? DEFAULT_INCOME_CATEGORY
+      : DEFAULT_EXPENSE_CATEGORY);
   const categoryKey = `${categoryName}-${normalizedType}`;
   if (!categoryMap.has(categoryKey)) {
     const icon = normalizedType === 'income' ? '💰' : '🏷️';
@@ -360,4 +424,6 @@ const insertMany = db.transaction((items) => {
 
 insertMany(transactions);
 
-console.log(`已导入 ${transactions.length} 条交易，账户 ${accountMap.size} 个，分类 ${categoryMap.size} 个。`);
+console.log(
+  `已导入 ${transactions.length} 条交易，账户 ${accountMap.size} 个，分类 ${categoryMap.size} 个。`,
+);
diff --git a/apps/backend/utils/finance-metadata.ts b/apps/backend/utils/finance-metadata.ts
index 07ea54c4..5fbb752e 100644
--- a/apps/backend/utils/finance-metadata.ts
+++ b/apps/backend/utils/finance-metadata.ts
@@ -1,4 +1,10 @@
-import { MOCK_ACCOUNTS, MOCK_BUDGETS, MOCK_CATEGORIES, MOCK_CURRENCIES, MOCK_EXCHANGE_RATES } from './mock-data';
+import {
+  MOCK_ACCOUNTS,
+  MOCK_BUDGETS,
+  MOCK_CATEGORIES,
+  MOCK_CURRENCIES,
+  MOCK_EXCHANGE_RATES,
+} from './mock-data';
 
 export function listAccounts() {
   return MOCK_ACCOUNTS;
@@ -31,7 +37,7 @@ export function createCategoryRecord(category: any) {
 }
 
 export function updateCategoryRecord(id: number, category: any) {
-  const index = MOCK_CATEGORIES.findIndex(c => c.id === id);
+  const index = MOCK_CATEGORIES.findIndex((c) => c.id === id);
   if (index !== -1) {
     MOCK_CATEGORIES[index] = { ...MOCK_CATEGORIES[index], ...category };
     return MOCK_CATEGORIES[index];
@@ -40,7 +46,7 @@ export function updateCategoryRecord(id: number, category: any) {
 }
 
 export function deleteCategoryRecord(id: number) {
-  const index = MOCK_CATEGORIES.findIndex(c => c.id === id);
+  const index = MOCK_CATEGORIES.findIndex((c) => c.id === id);
   if (index !== -1) {
     MOCK_CATEGORIES.splice(index, 1);
     return true;
diff --git a/apps/backend/utils/finance-repository.ts b/apps/backend/utils/finance-repository.ts
index 67141654..d4427399 100644
--- a/apps/backend/utils/finance-repository.ts
+++ b/apps/backend/utils/finance-repository.ts
@@ -9,27 +9,27 @@ interface TransactionRow {
   currency: string;
   exchange_rate_to_base: number;
   amount_in_base: number;
-  category_id: number | null;
-  account_id: number | null;
+  category_id: null | number;
+  account_id: null | number;
   transaction_date: string;
-  description: string | null;
-  project: string | null;
-  memo: string | null;
+  description: null | string;
+  project: null | string;
+  memo: null | string;
   created_at: string;
   is_deleted: number;
-  deleted_at: string | null;
+  deleted_at: null | string;
 }
 
 interface TransactionPayload {
   type: string;
   amount: number;
   currency: string;
-  categoryId?: number | null;
-  accountId?: number | null;
+  categoryId?: null | number;
+  accountId?: null | number;
   transactionDate: string;
   description?: string;
-  project?: string | null;
-  memo?: string | null;
+  project?: null | string;
+  memo?: null | string;
   createdAt?: string;
   isDeleted?: boolean;
 }
@@ -41,7 +41,7 @@ function getExchangeRateToBase(currency: string) {
   const stmt = db.prepare(
     `SELECT rate FROM finance_exchange_rates WHERE from_currency = ? AND to_currency = ? ORDER BY date DESC LIMIT 1`,
   );
-  const row = stmt.get(currency, BASE_CURRENCY) as { rate: number } | undefined;
+  const row = stmt.get(currency, BASE_CURRENCY) as undefined | { rate: number };
   return row?.rate ?? 1;
 }
 
@@ -49,7 +49,7 @@ function mapTransaction(row: TransactionRow) {
   return {
     id: row.id,
     userId: 1,
-    type: row.type as 'income' | 'expense' | 'transfer',
+    type: row.type as 'expense' | 'income' | 'transfer',
     amount: row.amount,
     currency: row.currency,
     exchangeRateToBase: row.exchange_rate_to_base,
@@ -66,7 +66,9 @@ function mapTransaction(row: TransactionRow) {
   };
 }
 
-export function fetchTransactions(options: { type?: string; includeDeleted?: boolean } = {}) {
+export function fetchTransactions(
+  options: { includeDeleted?: boolean; type?: string } = {},
+) {
   const clauses: string[] = [];
   const params: Record<string, unknown> = {};
 
@@ -78,7 +80,7 @@ export function fetchTransactions(options: { type?: string; includeDeleted?: boo
     params.type = options.type;
   }
 
-  const where = clauses.length ? `WHERE ${clauses.join(' AND ')}` : '';
+  const where = clauses.length > 0 ? `WHERE ${clauses.join(' AND ')}` : '';
 
   const stmt = db.prepare<TransactionRow>(
     `SELECT id, type, amount, currency, exchange_rate_to_base, amount_in_base, category_id, account_id, transaction_date, description, project, memo, created_at, is_deleted, deleted_at FROM finance_transactions ${where} ORDER BY transaction_date DESC, id DESC`,
@@ -98,7 +100,10 @@ export function getTransactionById(id: number) {
 export function createTransaction(payload: TransactionPayload) {
   const exchangeRate = getExchangeRateToBase(payload.currency);
   const amountInBase = +(payload.amount * exchangeRate).toFixed(2);
-  const createdAt = payload.createdAt && payload.createdAt.length ? payload.createdAt : new Date().toISOString();
+  const createdAt =
+    payload.createdAt && payload.createdAt.length > 0
+      ? payload.createdAt
+      : new Date().toISOString();
 
   const stmt = db.prepare(
     `INSERT INTO finance_transactions (type, amount, currency, exchange_rate_to_base, amount_in_base, category_id, account_id, transaction_date, description, project, memo, created_at, is_deleted) VALUES (@type, @amount, @currency, @exchangeRateToBase, @amountInBase, @categoryId, @accountId, @transactionDate, @description, @project, @memo, @createdAt, 0)`,
@@ -171,29 +176,35 @@ export function updateTransaction(id: number, payload: TransactionPayload) {
 }
 
 export function softDeleteTransaction(id: number) {
-  const stmt = db.prepare(`UPDATE finance_transactions SET is_deleted = 1, deleted_at = @deletedAt WHERE id = @id`);
+  const stmt = db.prepare(
+    `UPDATE finance_transactions SET is_deleted = 1, deleted_at = @deletedAt WHERE id = @id`,
+  );
   stmt.run({ id, deletedAt: new Date().toISOString() });
   return getTransactionById(id);
 }
 
 export function restoreTransaction(id: number) {
-  const stmt = db.prepare(`UPDATE finance_transactions SET is_deleted = 0, deleted_at = NULL WHERE id = @id`);
+  const stmt = db.prepare(
+    `UPDATE finance_transactions SET is_deleted = 0, deleted_at = NULL WHERE id = @id`,
+  );
   stmt.run({ id });
   return getTransactionById(id);
 }
 
-export function replaceAllTransactions(rows: Array<{
-  type: string;
-  amount: number;
-  currency: string;
-  categoryId: number | null;
-  accountId: number | null;
-  transactionDate: string;
-  description: string;
-  project?: string | null;
-  memo?: string | null;
-  createdAt?: string;
-}>) {
+export function replaceAllTransactions(
+  rows: Array<{
+    accountId: null | number;
+    amount: number;
+    categoryId: null | number;
+    createdAt?: string;
+    currency: string;
+    description: string;
+    memo?: null | string;
+    project?: null | string;
+    transactionDate: string;
+    type: string;
+  }>,
+) {
   db.prepare('DELETE FROM finance_transactions').run();
 
   const insert = db.prepare(
@@ -206,7 +217,7 @@ export function replaceAllTransactions(rows: Array<{
 
   const insertMany = db.transaction((items: Array<any>) => {
     for (const item of items) {
-      const row = getRate.get(item.currency) as { rate: number } | undefined;
+      const row = getRate.get(item.currency) as undefined | { rate: number };
       const rate = row?.rate ?? 1;
       const amountInBase = +(item.amount * rate).toFixed(2);
       insert.run({
@@ -215,7 +226,9 @@ export function replaceAllTransactions(rows: Array<{
         amountInBase,
         project: item.project ?? null,
         memo: item.memo ?? null,
-        createdAt: item.createdAt ?? new Date(`${item.transactionDate}T00:00:00Z`).toISOString(),
+        createdAt:
+          item.createdAt ??
+          new Date(`${item.transactionDate}T00:00:00Z`).toISOString(),
       });
     }
   });
@@ -228,9 +241,9 @@ interface CategoryRow {
   id: number;
   name: string;
   type: string;
-  icon: string | null;
-  color: string | null;
-  user_id: number | null;
+  icon: null | string;
+  color: null | string;
+  user_id: null | number;
   is_active: number;
 }
 
@@ -239,7 +252,7 @@ function mapCategory(row: CategoryRow) {
     id: row.id,
     userId: row.user_id ?? null,
     name: row.name,
-    type: row.type as 'income' | 'expense',
+    type: row.type as 'expense' | 'income',
     icon: row.icon ?? '📝',
     color: row.color ?? '#dfe4ea',
     sortOrder: row.id,
@@ -248,8 +261,10 @@ function mapCategory(row: CategoryRow) {
   };
 }
 
-export function fetchCategories(options: { type?: 'income' | 'expense' } = {}) {
-  const where = options.type ? `WHERE type = @type AND is_active = 1` : 'WHERE is_active = 1';
+export function fetchCategories(options: { type?: 'expense' | 'income' } = {}) {
+  const where = options.type
+    ? `WHERE type = @type AND is_active = 1`
+    : 'WHERE is_active = 1';
   const params = options.type ? { type: options.type } : {};
 
   const stmt = db.prepare<CategoryRow>(
diff --git a/apps/backend/utils/sqlite.ts b/apps/backend/utils/sqlite.ts
index b9cc9236..39191230 100644
--- a/apps/backend/utils/sqlite.ts
+++ b/apps/backend/utils/sqlite.ts
@@ -1,5 +1,6 @@
-import Database from 'better-sqlite3';
 import { mkdirSync } from 'node:fs';
+
+import Database from 'better-sqlite3';
 import { dirname, join } from 'pathe';
 
 const dbFile = join(process.cwd(), 'storage', 'finance.db');
diff --git a/apps/web-antd/index.html b/apps/web-antd/index.html
index 9b94619f..28127eda 100644
--- a/apps/web-antd/index.html
+++ b/apps/web-antd/index.html
@@ -32,7 +32,7 @@
     <div id="app"></div>
     <script>
       // Flatten FinWise Pro menu - Remove parent menu and show children directly
-      (function() {
+      (function () {
         console.log('[FinWise] Script loaded');
 
         function flattenFinWiseProMenu() {
@@ -41,7 +41,7 @@
           console.log('[FinWise] Found submenus:', submenus.length);
           let finwiseMenu = null;
 
-          submenus.forEach(menu => {
+          submenus.forEach((menu) => {
             const titleEl = menu.querySelector('.vben-sub-menu-content__title');
             if (titleEl && titleEl.textContent) {
               console.log('[FinWise] Menu title:', titleEl.textContent.trim());
@@ -74,7 +74,7 @@
           // Move all children to the parent menu
           const children = Array.from(childrenUL.children);
           console.log('[FinWise] Moving', children.length, 'children');
-          children.forEach(child => {
+          children.forEach((child) => {
             parentMenu.insertBefore(child, finwiseMenu);
           });
 
@@ -84,28 +84,30 @@
         }
 
         // Run after DOM loads
-        const delays = [500, 1000, 1500, 2000, 2500, 3000, 4000, 5000, 6000, 7000, 8000];
+        const delays = [
+          500, 1000, 1500, 2000, 2500, 3000, 4000, 5000, 6000, 7000, 8000,
+        ];
         console.log('[FinWise] Setting up delays:', delays);
 
         if (document.readyState === 'loading') {
           console.log('[FinWise] Waiting for DOMContentLoaded');
-          document.addEventListener('DOMContentLoaded', function() {
+          document.addEventListener('DOMContentLoaded', function () {
             console.log('[FinWise] DOMContentLoaded fired');
-            delays.forEach(delay => {
+            delays.forEach((delay) => {
               setTimeout(flattenFinWiseProMenu, delay);
             });
           });
         } else {
           console.log('[FinWise] DOM already loaded');
-          delays.forEach(delay => {
+          delays.forEach((delay) => {
             setTimeout(flattenFinWiseProMenu, delay);
           });
         }
 
         // Watch for DOM changes
-        setTimeout(function() {
+        setTimeout(function () {
           console.log('[FinWise] Setting up MutationObserver');
-          const observer = new MutationObserver(function() {
+          const observer = new MutationObserver(function () {
             setTimeout(flattenFinWiseProMenu, 200);
           });
 
@@ -113,7 +115,7 @@
           if (body) {
             observer.observe(body, {
               childList: true,
-              subtree: true
+              subtree: true,
             });
             console.log('[FinWise] MutationObserver active');
           }
diff --git a/apps/web-antd/scripts/add-category-to-csv.ts b/apps/web-antd/scripts/add-category-to-csv.ts
index 8ab3706e..351746c4 100644
--- a/apps/web-antd/scripts/add-category-to-csv.ts
+++ b/apps/web-antd/scripts/add-category-to-csv.ts
@@ -1,14 +1,19 @@
 import * as fs from 'node:fs';
 
-const INPUT_CSV = '/Users/fuwuqi/Downloads/Telegram Desktop/控天-控天_完全修正.csv';
-const OUTPUT_CSV = '/Users/fuwuqi/Downloads/Telegram Desktop/控天-控天_完全修正_带分类.csv';
+const INPUT_CSV =
+  '/Users/fuwuqi/Downloads/Telegram Desktop/控天-控天_完全修正.csv';
+const OUTPUT_CSV =
+  '/Users/fuwuqi/Downloads/Telegram Desktop/控天-控天_完全修正_带分类.csv';
 
 // 智能分类函数
 function getCategory(project: string): string {
   const desc = project.toLowerCase();
 
   // 工资
-  if (desc.includes('工资') || desc.match(/amy|天天|碧桂园|皇|香缇卡|财务|客服|小哥|代理ip|sy|超鹏|小白/)) {
+  if (
+    desc.includes('工资') ||
+    /amy|天天|碧桂园|皇|香缇卡|财务|客服|小哥|代理ip|sy|超鹏|小白/.test(desc)
+  ) {
     return '工资';
   }
 
@@ -23,22 +28,34 @@ function getCategory(project: string): string {
   }
 
   // 服务器/技术
-  if (desc.match(/服务器|技术|chatgpt|openai|ai|接口|ip|nat|宝塔|cdn|oss|google|翻译|openrouter|deepseek|claude|cursor|bolt|硅基|chatwoot/)) {
+  if (
+    /服务器|技术|chatgpt|openai|ai|接口|ip|nat|宝塔|cdn|oss|google|翻译|openrouter|deepseek|claude|cursor|bolt|硅基|chatwoot/.test(
+      desc,
+    )
+  ) {
     return '服务器/技术';
   }
 
   // 广告推广
-  if (desc.match(/广告|推广|地推|投放|打流量/)) {
+  if (/广告|推广|地推|投放|打流量/.test(desc)) {
     return '广告推广';
   }
 
   // 软件/工具
-  if (desc.match(/会员|007|u盘|processon|飞机|虚拟卡|小红卡|信用卡|cloudflare|uizard|esim/)) {
+  if (
+    /会员|007|u盘|processon|飞机|虚拟卡|小红卡|信用卡|cloudflare|uizard|esim/.test(
+      desc,
+    )
+  ) {
     return '软件/工具';
   }
 
   // 固定资产
-  if (desc.match(/买车|电脑|笔记本|显示器|rog|硬盘|服务器.*购买|iphone|路由器|展示屏/)) {
+  if (
+    /买车|电脑|笔记本|显示器|rog|硬盘|服务器.*购买|iphone|路由器|展示屏/.test(
+      desc,
+    )
+  ) {
     return '固定资产';
   }
 
@@ -48,7 +65,11 @@ function getCategory(project: string): string {
   }
 
   // 借款/转账
-  if (desc.match(/借|转给|龙腾|投资款|换.*铢|换美金|换现金|报销|房租|生活费|办公室|出差|接待|保关|测试|开工红包/)) {
+  if (
+    /借|转给|龙腾|投资款|换.*铢|换美金|换现金|报销|房租|生活费|办公室|出差|接待|保关|测试|开工红包/.test(
+      desc,
+    )
+  ) {
     return '借款/转账';
   }
 
@@ -57,12 +78,12 @@ function getCategory(project: string): string {
 }
 
 // 读取并处理CSV
-const content = fs.readFileSync(INPUT_CSV, 'utf-8');
+const content = fs.readFileSync(INPUT_CSV, 'utf8');
 const lines = content.split('\n');
 
 // 修改表头，添加"分类"列
 const header = lines[0];
-const newHeader = header.trimEnd() + ',分类\n';
+const newHeader = `${header.trimEnd()},分类\n`;
 
 // 处理每一行数据
 const newLines = [newHeader];
@@ -84,7 +105,7 @@ for (let i = 1; i < lines.length; i++) {
   const category = getCategory(project);
 
   // 添加分类列
-  const newLine = line.trimEnd() + ',' + category + '\n';
+  const newLine = `${line.trimEnd()},${category}\n`;
   newLines.push(newLine);
 }
 
diff --git a/apps/web-antd/scripts/import-csv.ts b/apps/web-antd/scripts/import-csv.ts
index 62e115a7..046281d8 100644
--- a/apps/web-antd/scripts/import-csv.ts
+++ b/apps/web-antd/scripts/import-csv.ts
@@ -1,7 +1,7 @@
 import * as fs from 'node:fs';
-import * as path from 'node:path';
 
-const CSV_FILE = '/Users/fuwuqi/Downloads/Telegram Desktop/控天-控天_完全修正_带分类.csv';
+const CSV_FILE =
+  '/Users/fuwuqi/Downloads/Telegram Desktop/控天-控天_完全修正_带分类.csv';
 const API_URL = 'http://localhost:3000/api/finance/transactions';
 
 interface CSVRow {
@@ -59,11 +59,7 @@ function parseDate(dateStr: string, previousDate: string = ''): string {
       const prevMonth = Number.parseInt(previousDate.split('-')[1]);
 
       // 如果月份从大变小（例如12月->2月，或7月->8月），说明跨年了
-      if (month < prevMonth) {
-        year = prevYear + 1;
-      } else {
-        year = prevYear;
-      }
+      year = month < prevMonth ? prevYear + 1 : prevYear;
     } else if (month >= 8) {
       // 第一条记录，8-12月是2024年
       year = 2024;
@@ -85,11 +81,7 @@ function parseDate(dateStr: string, previousDate: string = ''): string {
       const prevYear = Number.parseInt(previousDate.split('-')[0]);
       const prevMonth = Number.parseInt(previousDate.split('-')[1]);
 
-      if (month < prevMonth) {
-        year = prevYear + 1;
-      } else {
-        year = prevYear;
-      }
+      year = month < prevMonth ? prevYear + 1 : prevYear;
     } else if (month >= 8) {
       year = 2024;
     } else {
@@ -109,12 +101,12 @@ function parseAmount(amountStr: string): number {
   const cleaned = amountStr.trim();
 
   // 如果包含乘号（*或×或x），先处理乘法
-  if (cleaned.match(/[*×x]/)) {
+  if (/[*×x]/.test(cleaned)) {
     // 提取乘法表达式，如 "200*3=600" 或 "200*3"
     const mulMatch = cleaned.match(/(\d+(?:\.\d+)?)\s*[*×x]\s*(\d+(?:\.\d+)?)/);
     if (mulMatch) {
-      const num1 = parseFloat(mulMatch[1]);
-      const num2 = parseFloat(mulMatch[2]);
+      const num1 = Number.parseFloat(mulMatch[1]);
+      const num2 = Number.parseFloat(mulMatch[2]);
       if (!isNaN(num1) && !isNaN(num2)) {
         return num1 * num2;
       }
@@ -126,7 +118,7 @@ function parseAmount(amountStr: string): number {
     const parts = cleaned.split('+');
     let sum = 0;
     for (const part of parts) {
-      const num = parseFloat(part.replace(/[^\d.]/g, ''));
+      const num = Number.parseFloat(part.replaceAll(/[^\d.]/g, ''));
       if (!isNaN(num)) {
         sum += num;
       }
@@ -135,22 +127,22 @@ function parseAmount(amountStr: string): number {
   }
 
   // 否则直接解析
-  return parseFloat(cleaned.replace(/[^\d.]/g, '')) || 0;
+  return Number.parseFloat(cleaned.replaceAll(/[^\d.]/g, '')) || 0;
 }
 
 // 根据分类名称获取分类ID
 function getCategoryIdByName(categoryName: string): number {
   const categoryMap: Record<string, number> = {
-    '工资': 5,
+    工资: 5,
     '佣金/返佣': 6,
-    '分红': 7,
+    分红: 7,
     '服务器/技术': 8,
-    '广告推广': 9,
+    广告推广: 9,
     '软件/工具': 10,
-    '固定资产': 11,
-    '退款': 12,
+    固定资产: 11,
+    退款: 12,
     '借款/转账': 13,
-    '其他支出': 14,
+    其他支出: 14,
   };
 
   return categoryMap[categoryName] || 2; // 默认未分类支出
@@ -158,7 +150,7 @@ function getCategoryIdByName(categoryName: string): number {
 
 // 批量导入
 async function importTransactions() {
-  const content = fs.readFileSync(CSV_FILE, 'utf-8');
+  const content = fs.readFileSync(CSV_FILE, 'utf8');
   const rows = parseCSV(content);
 
   console.log(`共解析到 ${rows.length} 条记录`);
@@ -202,14 +194,16 @@ async function importTransactions() {
 
       if (response.ok) {
         imported++;
-        console.log(`✓ 导入成功 [${imported}/${rows.length}]: ${row.project} - $${amount}`);
+        console.log(
+          `✓ 导入成功 [${imported}/${rows.length}]: ${row.project} - $${amount}`,
+        );
       } else {
         failed++;
         console.error(`✗ 导入失败: ${row.project}`, await response.text());
       }
 
       // 避免请求过快
-      await new Promise(resolve => setTimeout(resolve, 10));
+      await new Promise((resolve) => setTimeout(resolve, 10));
     } catch (error) {
       failed++;
       console.error(`✗ 处理失败: ${row.project}`, error);
diff --git a/apps/web-antd/src/api/core/finance.ts b/apps/web-antd/src/api/core/finance.ts
index 77c3ee1d..915de53f 100644
--- a/apps/web-antd/src/api/core/finance.ts
+++ b/apps/web-antd/src/api/core/finance.ts
@@ -13,9 +13,9 @@ export namespace FinanceApi {
   // 分类
   export interface Category {
     id: number;
-    userId?: number | null;
+    userId?: null | number;
     name: string;
-    type: 'income' | 'expense';
+    type: 'expense' | 'income';
     icon: string;
     color: string;
     sortOrder?: number;
@@ -28,7 +28,14 @@ export namespace FinanceApi {
     id: number;
     userId?: number;
     name: string;
-    type: 'cash' | 'bank' | 'alipay' | 'wechat' | 'virtual_wallet' | 'investment' | 'credit_card';
+    type:
+      | 'alipay'
+      | 'bank'
+      | 'cash'
+      | 'credit_card'
+      | 'investment'
+      | 'virtual_wallet'
+      | 'wechat';
     currency: string;
     balance?: number;
     icon?: string;
@@ -43,20 +50,20 @@ export namespace FinanceApi {
     toCurrency: string;
     rate: number;
     date: string;
-    source: 'manual' | 'api' | 'system';
+    source: 'api' | 'manual' | 'system';
   }
 
   // 交易
   export interface Transaction {
     id: number;
     userId: number;
-    type: 'income' | 'expense' | 'transfer';
+    type: 'expense' | 'income' | 'transfer';
     amount: number;
     currency: string;
     exchangeRateToBase: number;
     amountInBase: number;
-    categoryId?: number | null;
-    accountId?: number | null;
+    categoryId?: null | number;
+    accountId?: null | number;
     transactionDate: string;
     description: string;
     project?: string;
@@ -68,7 +75,7 @@ export namespace FinanceApi {
 
   // 创建交易的参数
   export interface CreateTransactionParams {
-    type: 'income' | 'expense' | 'transfer';
+    type: 'expense' | 'income' | 'transfer';
     amount: number;
     currency: string;
     categoryId?: number;
@@ -92,7 +99,7 @@ export namespace FinanceApi {
     remaining: number;
     percentage: number;
     currency: string;
-    period: 'monthly' | 'weekly' | 'quarterly' | 'yearly';
+    period: 'monthly' | 'quarterly' | 'weekly' | 'yearly';
     alertThreshold: number;
     description?: string;
     autoRenew: boolean;
@@ -114,7 +121,7 @@ export namespace FinanceApi {
     remaining?: number;
     percentage?: number;
     currency: string;
-    period: 'monthly' | 'weekly' | 'quarterly' | 'yearly';
+    period: 'monthly' | 'quarterly' | 'weekly' | 'yearly';
     alertThreshold: number;
     description?: string;
     autoRenew: boolean;
@@ -133,7 +140,9 @@ export namespace FinanceApi {
   /**
    * 获取分类
    */
-  export async function getCategories(params?: { type?: 'income' | 'expense' | 'transfer' }) {
+  export async function getCategories(params?: {
+    type?: 'expense' | 'income' | 'transfer';
+  }) {
     return requestClient.get<Category[]>('/finance/categories', { params });
   }
 
@@ -141,10 +150,10 @@ export namespace FinanceApi {
    * 创建分类
    */
   export async function createCategory(data: {
-    name: string;
-    type: 'income' | 'expense';
-    icon?: string;
     color?: string;
+    icon?: string;
+    name: string;
+    type: 'expense' | 'income';
   }) {
     return requestClient.post<Category | null>('/finance/categories', data);
   }
@@ -155,13 +164,16 @@ export namespace FinanceApi {
   export async function updateCategory(
     id: number,
     data: {
-      name?: string;
-      icon?: string;
       color?: string;
+      icon?: string;
+      name?: string;
       sortOrder?: number;
     },
   ) {
-    return requestClient.put<Category | null>(`/finance/categories/${id}`, data);
+    return requestClient.put<Category | null>(
+      `/finance/categories/${id}`,
+      data,
+    );
   }
 
   /**
@@ -184,9 +196,9 @@ export namespace FinanceApi {
    * 获取汇率
    */
   export async function getExchangeRates(params?: {
+    date?: string;
     from?: string;
     to?: string;
-    date?: string;
   }) {
     return requestClient.get<ExchangeRate[]>('/finance/exchange-rates', {
       params,
@@ -197,7 +209,7 @@ export namespace FinanceApi {
    * 获取交易列表
    */
   export async function getTransactions(params?: {
-    type?: 'income' | 'expense' | 'transfer';
+    type?: 'expense' | 'income' | 'transfer';
   }) {
     return requestClient.get<Transaction[]>('/finance/transactions', {
       params,
diff --git a/apps/web-antd/src/app.vue b/apps/web-antd/src/app.vue
index 7dfb2a2f..eb8c5f09 100644
--- a/apps/web-antd/src/app.vue
+++ b/apps/web-antd/src/app.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, watch } from 'vue';
+import { computed, onMounted } from 'vue';
 
 import { useAntdDesignTokens } from '@vben/hooks';
 import { preferences, usePreferences } from '@vben/preferences';
@@ -34,7 +34,7 @@ const flattenFinWiseProMenu = () => {
   const submenus = document.querySelectorAll('.vben-sub-menu');
   let finwiseMenu: Element | null = null;
 
-  submenus.forEach(menu => {
+  submenus.forEach((menu) => {
     const titleEl = menu.querySelector('.vben-sub-menu-content__title');
     if (titleEl?.textContent?.includes('FinWise Pro')) {
       finwiseMenu = menu;
@@ -49,16 +49,17 @@ const flattenFinWiseProMenu = () => {
   if (!childrenUL || !parentMenu) return;
 
   // Check if already processed
-  if ((finwiseMenu as HTMLElement).getAttribute('data-hide-finwise') === 'true') return;
+  if ((finwiseMenu as HTMLElement).dataset.hideFinwise === 'true')
+    return;
 
   // Move all children to the parent menu
-  const children = Array.from(childrenUL.children);
-  children.forEach(child => {
-    parentMenu.insertBefore(child, finwiseMenu);
+  const children = [...childrenUL.children];
+  children.forEach((child) => {
+    finwiseMenu.before(child);
   });
 
   // Mark for hiding via CSS and hide directly
-  (finwiseMenu as HTMLElement).setAttribute('data-hide-finwise', 'true');
+  (finwiseMenu as HTMLElement).dataset.hideFinwise = 'true';
   (finwiseMenu as HTMLElement).style.display = 'none';
 };
 
@@ -66,7 +67,12 @@ const flattenFinWiseProMenu = () => {
 onMounted(() => {
   // 强制修复sidebar设置，防止被用户UI操作覆盖
   const fixSidebarPreferences = () => {
-    const prefsKey = Object.keys(localStorage).find(k => k.includes('preferences') && !k.includes('locale') && !k.includes('theme'));
+    const prefsKey = Object.keys(localStorage).find(
+      (k) =>
+        k.includes('preferences') &&
+        !k.includes('locale') &&
+        !k.includes('theme'),
+    );
     if (prefsKey) {
       try {
         const prefs = JSON.parse(localStorage.getItem(prefsKey) || '{}');
@@ -78,8 +84,8 @@ onMounted(() => {
           prefs.value.sidebar.collapsedWidth = 230;
           localStorage.setItem(prefsKey, JSON.stringify(prefs));
         }
-      } catch(e) {
-        console.error('Failed to fix sidebar preferences:', e);
+      } catch (error) {
+        console.error('Failed to fix sidebar preferences:', error);
       }
     }
   };
@@ -89,7 +95,7 @@ onMounted(() => {
 
   // Run multiple times with increasing delays to catch menu rendering
   const delays = [100, 300, 500, 1000, 1500, 2000, 2500, 3000, 4000, 5000];
-  delays.forEach(delay => {
+  delays.forEach((delay) => {
     setTimeout(flattenFinWiseProMenu, delay);
   });
 
@@ -104,7 +110,7 @@ onMounted(() => {
     if (body) {
       observer.observe(body, {
         childList: true,
-        subtree: true
+        subtree: true,
       });
     }
   }, 100);
@@ -112,7 +118,9 @@ onMounted(() => {
   // 防止侧边栏自动收起
   setTimeout(() => {
     const preventSidebarCollapse = () => {
-      const sidebar = document.querySelector('[class*="sidebar"]') || document.querySelector('aside');
+      const sidebar =
+        document.querySelector('[class*="sidebar"]') ||
+        document.querySelector('aside');
 
       if (!sidebar) return;
 
@@ -120,7 +128,7 @@ onMounted(() => {
       const sidebarObserver = new MutationObserver(() => {
         const currentWidth = window.getComputedStyle(sidebar).width;
         // 如果宽度小于200px，说明可能被收起了，强制恢复
-        if (parseInt(currentWidth) < 200) {
+        if (Number.parseInt(currentWidth) < 200) {
           (sidebar as HTMLElement).style.width = '230px';
         }
       });
@@ -128,7 +136,7 @@ onMounted(() => {
       // 开始观察
       sidebarObserver.observe(sidebar, {
         attributes: true,
-        attributeFilter: ['class', 'style']
+        attributeFilter: ['class', 'style'],
       });
 
       // 强制设置初始宽度
diff --git a/apps/web-antd/src/custom.css b/apps/web-antd/src/custom.css
index 4bb156b0..b9357926 100644
--- a/apps/web-antd/src/custom.css
+++ b/apps/web-antd/src/custom.css
@@ -1,5 +1,7 @@
 /* Hide FinWise Pro parent menu and move children */
-.vben-sub-menu:has(.vben-sub-menu-content__title:is(:contains("FinWise Pro"), :contains("💎"))) {
+.vben-sub-menu:has(
+  .vben-sub-menu-content__title:is(:contains('FinWise Pro'), :contains('💎'))
+) {
   display: none !important;
 }
 
@@ -9,6 +11,6 @@
 }
 
 /* Mark submenu for hiding */
-.vben-sub-menu[data-hide-finwise="true"] {
+.vben-sub-menu[data-hide-finwise='true'] {
   display: none !important;
 }
diff --git a/apps/web-antd/src/main.ts b/apps/web-antd/src/main.ts
index 6c5cd801..b7e0613d 100644
--- a/apps/web-antd/src/main.ts
+++ b/apps/web-antd/src/main.ts
@@ -2,6 +2,7 @@ import { initPreferences } from '@vben/preferences';
 import { unmountGlobalLoading } from '@vben/utils';
 
 import { overridesPreferences } from './preferences';
+
 import './custom.css';
 
 /**
@@ -36,7 +37,7 @@ function flattenFinWiseProMenu() {
   const submenus = document.querySelectorAll('.vben-sub-menu');
   let finwiseMenu: Element | null = null;
 
-  submenus.forEach(menu => {
+  submenus.forEach((menu) => {
     const titleEl = menu.querySelector('.vben-sub-menu-content__title');
     if (titleEl?.textContent?.includes('FinWise Pro')) {
       finwiseMenu = menu;
@@ -51,16 +52,17 @@ function flattenFinWiseProMenu() {
   if (!childrenUL || !parentMenu) return;
 
   // Check if already processed
-  if ((finwiseMenu as HTMLElement).getAttribute('data-hide-finwise') === 'true') return;
+  if ((finwiseMenu as HTMLElement).dataset.hideFinwise === 'true')
+    return;
 
   // Move all children to the parent menu
-  const children = Array.from(childrenUL.children);
-  children.forEach(child => {
-    parentMenu.insertBefore(child, finwiseMenu);
+  const children = [...childrenUL.children];
+  children.forEach((child) => {
+    finwiseMenu.before(child);
   });
 
   // Mark for hiding via CSS and hide directly
-  (finwiseMenu as HTMLElement).setAttribute('data-hide-finwise', 'true');
+  (finwiseMenu as HTMLElement).dataset.hideFinwise = 'true';
   (finwiseMenu as HTMLElement).style.display = 'none';
 }
 
@@ -91,7 +93,7 @@ setTimeout(() => {
   if (body) {
     observer.observe(body, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
 }, 500);
diff --git a/apps/web-antd/src/router/index.ts b/apps/web-antd/src/router/index.ts
index 5d391f6c..cf8240ad 100644
--- a/apps/web-antd/src/router/index.ts
+++ b/apps/web-antd/src/router/index.ts
@@ -40,7 +40,7 @@ router.afterEach(() => {
     const submenus = document.querySelectorAll('.vben-sub-menu');
     let finwiseMenu: Element | null = null;
 
-    submenus.forEach(menu => {
+    submenus.forEach((menu) => {
       const titleEl = menu.querySelector('.vben-sub-menu-content__title');
       if (titleEl?.textContent?.includes('FinWise Pro')) {
         finwiseMenu = menu;
@@ -55,16 +55,19 @@ router.afterEach(() => {
     if (!childrenUL || !parentMenu) return;
 
     // Check if already processed
-    if ((finwiseMenu as HTMLElement).getAttribute('data-hide-finwise') === 'true') return;
+    if (
+      (finwiseMenu as HTMLElement).dataset.hideFinwise === 'true'
+    )
+      return;
 
     // Move all children to the parent menu
-    const children = Array.from(childrenUL.children);
-    children.forEach(child => {
-      parentMenu.insertBefore(child, finwiseMenu);
+    const children = [...childrenUL.children];
+    children.forEach((child) => {
+      finwiseMenu.before(child);
     });
 
     // Mark for hiding via CSS and hide directly
-    (finwiseMenu as HTMLElement).setAttribute('data-hide-finwise', 'true');
+    (finwiseMenu as HTMLElement).dataset.hideFinwise = 'true';
     (finwiseMenu as HTMLElement).style.display = 'none';
   };
 
diff --git a/apps/web-antd/src/store/finance.ts b/apps/web-antd/src/store/finance.ts
index f3b00aed..8d2e3f7a 100644
--- a/apps/web-antd/src/store/finance.ts
+++ b/apps/web-antd/src/store/finance.ts
@@ -1,6 +1,7 @@
-import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
+import { defineStore } from 'pinia';
+
 import { FinanceApi } from '#/api/core/finance';
 
 export const useFinanceStore = defineStore('finance', () => {
@@ -50,10 +51,10 @@ export const useFinanceStore = defineStore('finance', () => {
 
   // 创建分类
   async function createCategory(data: {
-    name: string;
-    type: 'income' | 'expense';
-    icon?: string;
     color?: string;
+    icon?: string;
+    name: string;
+    type: 'expense' | 'income';
   }) {
     const category = await FinanceApi.createCategory(data);
     if (!category) {
@@ -71,9 +72,9 @@ export const useFinanceStore = defineStore('finance', () => {
   async function updateCategory(
     id: number,
     data: {
-      name?: string;
-      icon?: string;
       color?: string;
+      icon?: string;
+      name?: string;
       sortOrder?: number;
     },
   ) {
@@ -97,13 +98,13 @@ export const useFinanceStore = defineStore('finance', () => {
     await FinanceApi.deleteCategory(id);
     // 从本地列表中移除
     let index = incomeCategories.value.findIndex((c) => c.id === id);
-    if (index !== -1) {
-      incomeCategories.value.splice(index, 1);
-    } else {
+    if (index === -1) {
       index = expenseCategories.value.findIndex((c) => c.id === id);
       if (index !== -1) {
         expenseCategories.value.splice(index, 1);
       }
+    } else {
+      incomeCategories.value.splice(index, 1);
     }
   }
 
diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue
index 3c03f903..1bf498df 100644
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/apps/web-antd/src/views/_core/authentication/login.vue
@@ -2,9 +2,9 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { BasicOption } from '@vben/types';
 
-import { computed, markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { AuthenticationLogin, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
diff --git a/apps/web-antd/src/views/_core/fallback/not-found.vue b/apps/web-antd/src/views/_core/fallback/not-found.vue
index 205dca03..6e00ed6c 100644
--- a/apps/web-antd/src/views/_core/fallback/not-found.vue
+++ b/apps/web-antd/src/views/_core/fallback/not-found.vue
@@ -11,13 +11,17 @@ function handleBackHome() {
 </script>
 
 <template>
-  <div class="flex h-screen w-screen flex-col items-center justify-center bg-background">
-    <h1 class="mb-4 text-6xl font-bold text-foreground">404</h1>
-    <h2 class="mb-2 text-2xl font-semibold text-foreground">哎呀！未找到页面</h2>
-    <p class="mb-8 text-muted-foreground">抱歉，我们无法找到您要找的页面。</p>
+  <div
+    class="bg-background flex h-screen w-screen flex-col items-center justify-center"
+  >
+    <h1 class="text-foreground mb-4 text-6xl font-bold">404</h1>
+    <h2 class="text-foreground mb-2 text-2xl font-semibold">
+      哎呀！未找到页面
+    </h2>
+    <p class="text-muted-foreground mb-8">抱歉，我们无法找到您要找的页面。</p>
     <button
       @click="handleBackHome"
-      class="rounded-md bg-primary px-6 py-2 text-primary-foreground hover:bg-primary/90 transition-colors"
+      class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-6 py-2 transition-colors"
     >
       返回首页
     </button>
diff --git a/apps/web-antd/src/views/dashboard/workspace/index.vue b/apps/web-antd/src/views/dashboard/workspace/index.vue
index eadc41d7..9597bca9 100644
--- a/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -21,7 +21,20 @@ import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
-import { Modal, Form, Input, Select, DatePicker, InputNumber, message, Radio, Space, Button, Row, Col, Switch } from 'ant-design-vue';
+import {
+  Button,
+  Col,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Modal,
+  Radio,
+  Row,
+  Select,
+  Switch,
+} from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useFinanceStore } from '#/store/finance';
@@ -38,7 +51,7 @@ onMounted(async () => {
 
 // 快速记账弹窗
 const quickAddVisible = ref(false);
-const transactionType = ref<'income' | 'expense'>('expense');
+const transactionType = ref<'expense' | 'income'>('expense');
 const formRef = ref();
 const formState = ref({
   currency: 'CNY', // 默认人民币
@@ -57,7 +70,9 @@ const formState = ref({
 const useQuantityMode = ref(false);
 
 // 当前选中的日期类型
-const selectedDateType = ref<'today' | 'yesterday' | 'week' | 'month' | 'custom'>('today');
+const selectedDateType = ref<
+  'custom' | 'month' | 'today' | 'week' | 'yesterday'
+>('today');
 
 // 字段触摸状态（用于判断是否显示验证提示）
 const touchedFields = ref({
@@ -67,11 +82,14 @@ const touchedFields = ref({
 });
 
 // 监听单价和数量变化，自动计算总金额
-watch([() => formState.value.unitPrice, () => formState.value.quantity], ([unitPrice, quantity]) => {
-  if (useQuantityMode.value && unitPrice && quantity) {
-    formState.value.amount = unitPrice * quantity;
-  }
-});
+watch(
+  [() => formState.value.unitPrice, () => formState.value.quantity],
+  ([unitPrice, quantity]) => {
+    if (useQuantityMode.value && unitPrice && quantity) {
+      formState.value.amount = unitPrice * quantity;
+    }
+  },
+);
 
 // 切换计算模式
 const toggleQuantityMode = (enabled: boolean) => {
@@ -79,7 +97,8 @@ const toggleQuantityMode = (enabled: boolean) => {
   if (enabled) {
     // 如果当前有金额，反推单价
     if (formState.value.amount && formState.value.quantity) {
-      formState.value.unitPrice = formState.value.amount / formState.value.quantity;
+      formState.value.unitPrice =
+        formState.value.amount / formState.value.quantity;
     }
   } else {
     // 关闭模式时清空单价和数量
@@ -107,30 +126,38 @@ const currentCurrencySymbol = computed(() => {
 });
 
 // 监听货币变化,重置账户选择
-watch(() => formState.value.currency, () => {
-  formState.value.account = undefined;
-  touchedFields.value.account = true; // 标记账户字段为已触摸
-});
+watch(
+  () => formState.value.currency,
+  () => {
+    formState.value.account = undefined;
+    touchedFields.value.account = true; // 标记账户字段为已触摸
+  },
+);
 
 // 监听账户变化，保存到localStorage
-watch(() => formState.value.account, (newAccountId) => {
-  if (newAccountId && transactionType.value) {
-    const storageKey = transactionType.value === 'income'
-      ? 'lastWorkspaceIncomeAccountId'
-      : 'lastWorkspaceExpenseAccountId';
-    localStorage.setItem(storageKey, String(newAccountId));
-  }
-});
+watch(
+  () => formState.value.account,
+  (newAccountId) => {
+    if (newAccountId && transactionType.value) {
+      const storageKey =
+        transactionType.value === 'income'
+          ? 'lastWorkspaceIncomeAccountId'
+          : 'lastWorkspaceExpenseAccountId';
+      localStorage.setItem(storageKey, String(newAccountId));
+    }
+  },
+);
 
 // 打开快速记账弹窗
-const openQuickAdd = (type: 'income' | 'expense') => {
+const openQuickAdd = (type: 'expense' | 'income') => {
   transactionType.value = type;
   quickAddVisible.value = true;
 
   // 读取上次选择的账户
-  const storageKey = type === 'income'
-    ? 'lastWorkspaceIncomeAccountId'
-    : 'lastWorkspaceExpenseAccountId';
+  const storageKey =
+    type === 'income'
+      ? 'lastWorkspaceIncomeAccountId'
+      : 'lastWorkspaceExpenseAccountId';
   const lastAccountId = localStorage.getItem(storageKey);
   const accountId = lastAccountId ? Number(lastAccountId) : undefined;
 
@@ -160,54 +187,61 @@ const openQuickAdd = (type: 'income' | 'expense') => {
 };
 
 // 日期快捷方式
-const setDate = (type: 'today' | 'yesterday' | 'week' | 'month') => {
+const setDate = (type: 'month' | 'today' | 'week' | 'yesterday') => {
   selectedDateType.value = type;
   switch (type) {
-    case 'today':
-      formState.value.date = dayjs();
-      break;
-    case 'yesterday':
-      formState.value.date = dayjs().subtract(1, 'day');
-      break;
-    case 'week':
-      formState.value.date = dayjs().startOf('week');
-      break;
-    case 'month':
+    case 'month': {
       formState.value.date = dayjs().startOf('month');
       break;
+    }
+    case 'today': {
+      formState.value.date = dayjs();
+      break;
+    }
+    case 'week': {
+      formState.value.date = dayjs().startOf('week');
+      break;
+    }
+    case 'yesterday': {
+      formState.value.date = dayjs().subtract(1, 'day');
+      break;
+    }
   }
 };
 
 // 监听日期手动变化，设置为自定义
-watch(() => formState.value.date, (newDate) => {
-  if (!newDate) return;
+watch(
+  () => formState.value.date,
+  (newDate) => {
+    if (!newDate) return;
 
-  const today = dayjs();
-  const yesterday = dayjs().subtract(1, 'day');
-  const weekStart = dayjs().startOf('week');
-  const monthStart = dayjs().startOf('month');
+    const today = dayjs();
+    const yesterday = dayjs().subtract(1, 'day');
+    const weekStart = dayjs().startOf('week');
+    const monthStart = dayjs().startOf('month');
 
-  if (newDate.isSame(today, 'day')) {
-    selectedDateType.value = 'today';
-  } else if (newDate.isSame(yesterday, 'day')) {
-    selectedDateType.value = 'yesterday';
-  } else if (newDate.isSame(weekStart, 'day')) {
-    selectedDateType.value = 'week';
-  } else if (newDate.isSame(monthStart, 'day')) {
-    selectedDateType.value = 'month';
-  } else {
-    selectedDateType.value = 'custom';
-  }
-});
+    if (newDate.isSame(today, 'day')) {
+      selectedDateType.value = 'today';
+    } else if (newDate.isSame(yesterday, 'day')) {
+      selectedDateType.value = 'yesterday';
+    } else if (newDate.isSame(weekStart, 'day')) {
+      selectedDateType.value = 'week';
+    } else if (newDate.isSame(monthStart, 'day')) {
+      selectedDateType.value = 'month';
+    } else {
+      selectedDateType.value = 'custom';
+    }
+  },
+);
 
 // 获取日期类型对应的颜色
 const getDateTypeColor = (type: string) => {
   const colors = {
-    today: '#52c41a',     // 绿色 - 今天
+    today: '#52c41a', // 绿色 - 今天
     yesterday: '#1890ff', // 蓝色 - 昨天
-    week: '#722ed1',      // 紫色 - 本周
-    month: '#fa8c16',     // 橙色 - 本月
-    custom: '#8c8c8c',    // 灰色 - 自定义
+    week: '#722ed1', // 紫色 - 本周
+    month: '#fa8c16', // 橙色 - 本月
+    custom: '#8c8c8c', // 灰色 - 自定义
   };
   return colors[type] || colors.custom;
 };
@@ -216,7 +250,9 @@ const getDateTypeColor = (type: string) => {
 const fieldErrors = computed(() => ({
   category: touchedFields.value.category && !formState.value.category,
   account: touchedFields.value.account && !formState.value.account,
-  amount: touchedFields.value.amount && (!formState.value.amount || formState.value.amount <= 0),
+  amount:
+    touchedFields.value.amount &&
+    (!formState.value.amount || formState.value.amount <= 0),
 }));
 
 // 提交记账
@@ -246,7 +282,9 @@ const handleQuickAdd = async () => {
     });
 
     console.log('交易创建成功:', transaction);
-    message.success(`${transactionType.value === 'income' ? '收入' : '支出'}记录成功！`);
+    message.success(
+      `${transactionType.value === 'income' ? '收入' : '支出'}记录成功！`,
+    );
     quickAddVisible.value = false;
 
     // 重置表单
@@ -385,31 +423,31 @@ const todoItems = ref<WorkbenchTodoItem[]>([
   {
     completed: false,
     content: `记录本月的水电费、房租等固定支出`,
-    date: new Date().toLocaleDateString() + ' 18:00:00',
+    date: `${new Date().toLocaleDateString()} 18:00:00`,
     title: '录入本月固定支出',
   },
   {
     completed: false,
     content: `查看并调整各类别的预算设置，确保支出在可控范围内`,
-    date: new Date().toLocaleDateString() + ' 20:00:00',
+    date: `${new Date().toLocaleDateString()} 20:00:00`,
     title: '检查月度预算执行情况',
   },
   {
     completed: true,
     content: `完成本周的收入记录，包括工资和其他收入来源`,
-    date: new Date().toLocaleDateString() + ' 10:00:00',
+    date: `${new Date().toLocaleDateString()} 10:00:00`,
     title: '记录本周收入',
   },
   {
     completed: false,
     content: `核对银行账户余额，确保系统数据与实际一致`,
-    date: new Date().toLocaleDateString() + ' 15:00:00',
+    date: `${new Date().toLocaleDateString()} 15:00:00`,
     title: '对账核对',
   },
   {
     completed: false,
     content: `分析上月的支出报表，找出可以节省开支的地方`,
-    date: new Date().toLocaleDateString() + ' 16:00:00',
+    date: `${new Date().toLocaleDateString()} 16:00:00`,
     title: '生成月度财务报表',
   },
 ]);
@@ -521,18 +559,28 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
 
     <div class="mt-5 flex flex-col lg:flex-row">
       <div class="mr-4 w-full lg:w-3/5">
-        <WorkbenchProject :items="projectItems" title="财务功能快捷入口" @click="navTo" />
-        <WorkbenchTrends :items="trendItems" class="mt-5" title="最近财务活动" />
+        <WorkbenchProject
+          :items="projectItems"
+          title="财务功能快捷入口"
+          @click="navTo"
+        />
+        <WorkbenchTrends
+          :items="trendItems"
+          class="mt-5"
+          title="最近财务活动"
+        />
       </div>
       <div class="w-full lg:w-2/5">
         <WorkbenchQuickNav
           :items="quickNavItems"
           class="mt-5 lg:mt-0"
           title="快捷操作"
-          @click="(item) => {
-            console.log('WorkbenchQuickNav click事件触发:', item);
-            navTo(item);
-          }"
+          @click="
+            (item) => {
+              console.log('WorkbenchQuickNav click事件触发:', item);
+              navTo(item);
+            }
+          "
         />
         <WorkbenchTodo :items="todoItems" class="mt-5" title="财务待办事项" />
         <AnalysisChartCard class="mt-5" title="本月收支概览">
@@ -547,15 +595,18 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
       :title="transactionType === 'income' ? '💰 添加收入' : '💸 添加支出'"
       :width="900"
       @ok="handleQuickAdd"
-      @cancel="() => { quickAddVisible = false; }"
-      @update:open="(val) => { quickAddVisible = val; }"
+      @cancel="
+        () => {
+          quickAddVisible = false;
+        }
+      "
+      @update:open="
+        (val) => {
+          quickAddVisible = val;
+        }
+      "
     >
-      <Form
-        ref="formRef"
-        :model="formState"
-        layout="vertical"
-        class="mt-4"
-      >
+      <Form ref="formRef" :model="formState" layout="vertical" class="mt-4">
         <Row :gutter="16">
           <!-- 分类 -->
           <Col :span="14">
@@ -567,7 +618,15 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
               :help="fieldErrors.category ? '⚠️ 请选择一个分类' : ''"
             >
               <div
-                :style="fieldErrors.category ? { border: '2px solid #ff4d4f', borderRadius: '6px', padding: '8px' } : {}"
+                :style="
+                  fieldErrors.category
+                    ? {
+                        border: '2px solid #ff4d4f',
+                        borderRadius: '6px',
+                        padding: '8px',
+                      }
+                    : {}
+                "
               >
                 <Radio.Group
                   v-model:value="formState.category"
@@ -590,10 +649,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
 
           <!-- 项目名称 -->
           <Col :span="10">
-            <Form.Item
-              label="项目名称"
-              name="description"
-            >
+            <Form.Item label="项目名称" name="description">
               <Input.TextArea
                 v-model:value="formState.description"
                 placeholder="请输入项目名称..."
@@ -605,11 +661,13 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
         </Row>
 
         <!-- 货币类型、账户和金额（放在一起） -->
-        <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg mb-4">
+        <div class="mb-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
           <Row :gutter="16">
             <Col :span="12">
               <div class="mb-4">
-                <label class="block text-sm font-medium mb-2">货币类型 <span class="text-red-500">*</span></label>
+                <label class="mb-2 block text-sm font-medium"
+                  >货币类型 <span class="text-red-500">*</span></label
+                >
                 <Radio.Group
                   v-model:value="formState.currency"
                   size="large"
@@ -629,7 +687,10 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
             <Col :span="12">
               <div class="mb-4 flex items-center justify-between">
                 <label class="text-sm font-medium">按数量×单价计算</label>
-                <Switch v-model:checked="useQuantityMode" @change="toggleQuantityMode" />
+                <Switch
+                  v-model:checked="useQuantityMode"
+                  @change="toggleQuantityMode"
+                />
               </div>
             </Col>
           </Row>
@@ -637,7 +698,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
           <!-- 数量×单价模式 -->
           <Row v-if="useQuantityMode" :gutter="16" class="mb-4">
             <Col :span="8">
-              <label class="block text-sm font-medium mb-2">数量</label>
+              <label class="mb-2 block text-sm font-medium">数量</label>
               <InputNumber
                 v-model:value="formState.quantity"
                 :min="0.01"
@@ -648,7 +709,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
               />
             </Col>
             <Col :span="8">
-              <label class="block text-sm font-medium mb-2">单价</label>
+              <label class="mb-2 block text-sm font-medium">单价</label>
               <InputNumber
                 v-model:value="formState.unitPrice"
                 :min="0"
@@ -661,12 +722,24 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
               </InputNumber>
             </Col>
             <Col :span="8">
-              <label class="block text-sm font-medium mb-2">
+              <label class="mb-2 block text-sm font-medium">
                 总金额 <span class="text-red-500">*</span>
-                <span v-if="fieldErrors.amount" class="text-red-500 text-xs ml-1">⚠️</span>
+                <span
+                  v-if="fieldErrors.amount"
+                  class="ml-1 text-xs text-red-500"
+                  >⚠️</span
+                >
               </label>
               <div
-                :style="fieldErrors.amount ? { border: '2px solid #ff4d4f', borderRadius: '6px', padding: '2px' } : {}"
+                :style="
+                  fieldErrors.amount
+                    ? {
+                        border: '2px solid #ff4d4f',
+                        borderRadius: '6px',
+                        padding: '2px',
+                      }
+                    : {}
+                "
               >
                 <InputNumber
                   v-model:value="formState.amount"
@@ -687,12 +760,24 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
           <!-- 直接输入金额模式 -->
           <Row v-else :gutter="16" class="mb-4">
             <Col :span="24">
-              <label class="block text-sm font-medium mb-2">
+              <label class="mb-2 block text-sm font-medium">
                 金额 <span class="text-red-500">*</span>
-                <span v-if="fieldErrors.amount" class="text-red-500 text-xs ml-2">⚠️ 请输入金额</span>
+                <span
+                  v-if="fieldErrors.amount"
+                  class="ml-2 text-xs text-red-500"
+                  >⚠️ 请输入金额</span
+                >
               </label>
               <div
-                :style="fieldErrors.amount ? { border: '2px solid #ff4d4f', borderRadius: '6px', padding: '2px' } : {}"
+                :style="
+                  fieldErrors.amount
+                    ? {
+                        border: '2px solid #ff4d4f',
+                        borderRadius: '6px',
+                        padding: '2px',
+                      }
+                    : {}
+                "
               >
                 <InputNumber
                   v-model:value="formState.amount"
@@ -712,7 +797,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
           <!-- 重量（可选） -->
           <Row :gutter="16" class="mb-4">
             <Col :span="16">
-              <label class="block text-sm font-medium mb-2">重量（可选）</label>
+              <label class="mb-2 block text-sm font-medium">重量（可选）</label>
               <InputNumber
                 v-model:value="formState.weight"
                 :min="0"
@@ -722,7 +807,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
               />
             </Col>
             <Col :span="8">
-              <label class="block text-sm font-medium mb-2">单位</label>
+              <label class="mb-2 block text-sm font-medium">单位</label>
               <Select v-model:value="formState.weightUnit" style="width: 100%">
                 <Select.Option value="kg">千克(kg)</Select.Option>
                 <Select.Option value="g">克(g)</Select.Option>
@@ -733,12 +818,23 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
           </Row>
 
           <div>
-            <label class="block text-sm font-medium mb-2">
-              {{ transactionType === 'income' ? '收入账户' : '支出账户' }} <span class="text-red-500">*</span>
-              <span v-if="fieldErrors.account" class="text-red-500 text-xs ml-2">⚠️ 请选择账户</span>
+            <label class="mb-2 block text-sm font-medium">
+              {{ transactionType === 'income' ? '收入账户' : '支出账户' }}
+              <span class="text-red-500">*</span>
+              <span v-if="fieldErrors.account" class="ml-2 text-xs text-red-500"
+                >⚠️ 请选择账户</span
+              >
             </label>
             <div
-              :style="fieldErrors.account ? { border: '2px solid #ff4d4f', borderRadius: '6px', padding: '8px' } : {}"
+              :style="
+                fieldErrors.account
+                  ? {
+                      border: '2px solid #ff4d4f',
+                      borderRadius: '6px',
+                      padding: '8px',
+                    }
+                  : {}
+              "
             >
               <Radio.Group
                 v-model:value="formState.account"
@@ -766,15 +862,35 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
               <div class="flex flex-col space-y-2">
                 <Button
                   :type="selectedDateType === 'today' ? 'primary' : 'default'"
-                  :style="{ backgroundColor: selectedDateType === 'today' ? getDateTypeColor('today') : undefined, borderColor: selectedDateType === 'today' ? getDateTypeColor('today') : undefined }"
+                  :style="{
+                    backgroundColor:
+                      selectedDateType === 'today'
+                        ? getDateTypeColor('today')
+                        : undefined,
+                    borderColor:
+                      selectedDateType === 'today'
+                        ? getDateTypeColor('today')
+                        : undefined,
+                  }"
                   @click="setDate('today')"
                   block
                 >
                   今天
                 </Button>
                 <Button
-                  :type="selectedDateType === 'yesterday' ? 'primary' : 'default'"
-                  :style="{ backgroundColor: selectedDateType === 'yesterday' ? getDateTypeColor('yesterday') : undefined, borderColor: selectedDateType === 'yesterday' ? getDateTypeColor('yesterday') : undefined }"
+                  :type="
+                    selectedDateType === 'yesterday' ? 'primary' : 'default'
+                  "
+                  :style="{
+                    backgroundColor:
+                      selectedDateType === 'yesterday'
+                        ? getDateTypeColor('yesterday')
+                        : undefined,
+                    borderColor:
+                      selectedDateType === 'yesterday'
+                        ? getDateTypeColor('yesterday')
+                        : undefined,
+                  }"
                   @click="setDate('yesterday')"
                   block
                 >
@@ -782,7 +898,16 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
                 </Button>
                 <Button
                   :type="selectedDateType === 'week' ? 'primary' : 'default'"
-                  :style="{ backgroundColor: selectedDateType === 'week' ? getDateTypeColor('week') : undefined, borderColor: selectedDateType === 'week' ? getDateTypeColor('week') : undefined }"
+                  :style="{
+                    backgroundColor:
+                      selectedDateType === 'week'
+                        ? getDateTypeColor('week')
+                        : undefined,
+                    borderColor:
+                      selectedDateType === 'week'
+                        ? getDateTypeColor('week')
+                        : undefined,
+                  }"
                   @click="setDate('week')"
                   block
                 >
@@ -790,7 +915,16 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
                 </Button>
                 <Button
                   :type="selectedDateType === 'month' ? 'primary' : 'default'"
-                  :style="{ backgroundColor: selectedDateType === 'month' ? getDateTypeColor('month') : undefined, borderColor: selectedDateType === 'month' ? getDateTypeColor('month') : undefined }"
+                  :style="{
+                    backgroundColor:
+                      selectedDateType === 'month'
+                        ? getDateTypeColor('month')
+                        : undefined,
+                    borderColor:
+                      selectedDateType === 'month'
+                        ? getDateTypeColor('month')
+                        : undefined,
+                  }"
                   @click="setDate('month')"
                   block
                 >
@@ -800,16 +934,13 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
             </Form.Item>
           </Col>
           <Col :span="14">
-            <Form.Item
-              label="选择日期"
-              name="date"
-            >
+            <Form.Item label="选择日期" name="date">
               <div
                 class="date-picker-wrapper"
                 :style="{
                   border: `2px solid ${getDateTypeColor(selectedDateType)}`,
                   borderRadius: '6px',
-                  padding: '4px'
+                  padding: '4px',
                 }"
               >
                 <DatePicker
@@ -846,10 +977,15 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
   border-radius: 6px !important;
 }
 
-:deep(.category-radio-group .ant-radio-button-wrapper:not(:first-child)::before),
-:deep(.currency-radio-group .ant-radio-button-wrapper:not(:first-child)::before),
-:deep(.account-radio-group .ant-radio-button-wrapper:not(:first-child)::before) {
+:deep(
+  .category-radio-group .ant-radio-button-wrapper:not(:first-child)::before
+),
+:deep(
+  .currency-radio-group .ant-radio-button-wrapper:not(:first-child)::before
+),
+:deep(
+  .account-radio-group .ant-radio-button-wrapper:not(:first-child)::before
+) {
   display: none;
 }
-
 </style>
diff --git a/apps/web-antd/src/views/finance/accounts/index.vue b/apps/web-antd/src/views/finance/accounts/index.vue
index 3ffe38f9..01eb77fc 100644
--- a/apps/web-antd/src/views/finance/accounts/index.vue
+++ b/apps/web-antd/src/views/finance/accounts/index.vue
@@ -1,330 +1,22 @@
-<template>
-  <div class="p-6">
-    <div class="mb-6">
-      <h1 class="text-3xl font-bold text-gray-900 mb-2">🏦 账户管理</h1>
-      <p class="text-gray-600">管理银行账户、电子钱包和投资账户</p>
-    </div>
-
-    <!-- 账户概览 -->
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-      <Card class="text-center">
-        <div class="space-y-2">
-          <div class="text-3xl">💰</div>
-          <p class="text-sm text-gray-500">总资产</p>
-          <p class="text-2xl font-bold text-green-600">{{ formatCurrency(totalAssets) }}</p>
-        </div>
-      </Card>
-      <Card class="text-center">
-        <div class="space-y-2">
-          <div class="text-3xl">🔴</div>
-          <p class="text-sm text-gray-500">总负债</p>
-          <p class="text-2xl font-bold text-red-600">{{ formatCurrency(Math.abs(totalLiabilities)) }}</p>
-        </div>
-      </Card>
-      <Card class="text-center">
-        <div class="space-y-2">
-          <div class="text-3xl">📊</div>
-          <p class="text-sm text-gray-500">净资产</p>
-          <p class="text-2xl font-bold text-blue-600">{{ formatCurrency(netWorth) }}</p>
-        </div>
-      </Card>
-      <Card class="text-center">
-        <div class="space-y-2">
-          <div class="text-3xl">🏪</div>
-          <p class="text-sm text-gray-500">账户数</p>
-          <p class="text-2xl font-bold text-purple-600">{{ accounts.length }}个</p>
-        </div>
-      </Card>
-    </div>
-
-    <!-- 账户列表 -->
-    <div v-if="accounts.length === 0" class="text-center py-12">
-      <div class="text-8xl mb-6">🏦</div>
-      <h3 class="text-xl font-medium text-gray-800 mb-2">暂无账户信息</h3>
-      <p class="text-gray-500 mb-6">添加您的银行账户、电子钱包等开始管理财务</p>
-      <Button type="primary" size="large" @click="openAddAccountModal">
-        ➕ 添加第一个账户
-      </Button>
-    </div>
-    
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      <Card v-for="account in accounts" :key="account.id" class="hover:shadow-lg transition-shadow">
-        <template #title>
-          <div class="flex items-center space-x-2">
-            <span class="text-xl">{{ account.icon }}</span>
-            <span>{{ account.name }}</span>
-          </div>
-        </template>
-        <template #extra>
-          <Dropdown :trigger="['click']">
-            <template #overlay>
-              <Menu>
-                <Menu.Item @click="editAccount(account)">✏️ 编辑</Menu.Item>
-                <Menu.Item @click="deleteAccount(account)" class="text-red-600">🗑️ 删除</Menu.Item>
-              </Menu>
-            </template>
-            <Button type="text" size="small">⚙️</Button>
-          </Dropdown>
-        </template>
-
-        <div class="space-y-4">
-          <div class="text-center">
-            <p class="text-2xl font-bold" :class="account.balance >= 0 ? 'text-green-600' : 'text-red-600'">
-              {{ getCurrencySymbol(account.currency) }}{{ account.balance.toLocaleString() }}
-            </p>
-            <p class="text-sm text-gray-500">{{ getAccountTypeText(account.type) }}</p>
-            <p class="text-xs text-blue-500 mt-1">{{ account.currency }}</p>
-          </div>
-
-          <div class="flex space-x-2">
-            <Button type="primary" size="small" block @click="transfer(account)">💸 转账</Button>
-            <Button size="small" block @click="viewDetails(account)">📊 明细</Button>
-          </div>
-        </div>
-      </Card>
-    </div>
-
-    <!-- 添加/编辑账户模态框 -->
-    <Modal
-      v-model:open="showAddModal"
-      :title="isEditing ? '✏️ 编辑账户' : '➕ 添加新账户'"
-      @ok="submitAccount"
-      @cancel="cancelAdd"
-      width="500px"
-    >
-      <Form ref="formRef" :model="accountForm" :rules="rules" layout="vertical">
-        <Form.Item label="账户名称" name="name" required>
-          <Input 
-            v-model:value="accountForm.name" 
-            placeholder="请输入账户名称，如：工商银行储蓄卡"
-            size="large"
-          />
-        </Form.Item>
-        
-        <Row :gutter="16">
-          <Col :span="8">
-            <Form.Item label="账户类型" name="type" required>
-              <Select v-model:value="accountForm.type" placeholder="选择类型" size="large" @change="handleTypeChange">
-                <Select.Option value="savings">
-                  <span>🏦 储蓄账户</span>
-                </Select.Option>
-                <Select.Option value="checking">
-                  <span>📝 支票账户</span>
-                </Select.Option>
-                <Select.Option value="credit">
-                  <span>💳 信用卡</span>
-                </Select.Option>
-                <Select.Option value="investment">
-                  <span>📈 投资账户</span>
-                </Select.Option>
-                <Select.Option value="ewallet">
-                  <span>📱 电子钱包</span>
-                </Select.Option>
-                <Select.Option value="CUSTOM">
-                  <span>➕ 自定义类型</span>
-                </Select.Option>
-              </Select>
-            </Form.Item>
-          </Col>
-          <Col :span="8">
-            <Form.Item label="初始余额" name="balance">
-              <InputNumber
-                v-model:value="accountForm.balance"
-                :precision="2"
-                style="width: 100%"
-                placeholder="0.00"
-                size="large"
-              />
-            </Form.Item>
-          </Col>
-          <Col :span="8">
-            <Form.Item label="余额币种" name="currency">
-              <Select v-model:value="accountForm.currency" placeholder="选择币种" size="large" @change="handleCurrencyChange">
-                <Select.Option value="CNY">🇨🇳 人民币</Select.Option>
-                <Select.Option value="USD">🇺🇸 美元</Select.Option>
-                <Select.Option value="EUR">🇪🇺 欧元</Select.Option>
-                <Select.Option value="JPY">🇯🇵 日元</Select.Option>
-                <Select.Option value="GBP">🇬🇧 英镑</Select.Option>
-                <Select.Option value="HKD">🇭🇰 港币</Select.Option>
-                <Select.Option value="KRW">🇰🇷 韩元</Select.Option>
-                <Select.Option value="CUSTOM">➕ 自定义币种</Select.Option>
-              </Select>
-            </Form.Item>
-          </Col>
-        </Row>
-
-        <!-- 自定义账户类型输入 -->
-        <div v-if="accountForm.type === 'CUSTOM'" class="mb-4">
-          <Form.Item label="自定义账户类型" required>
-            <Input v-model:value="accountForm.customTypeName" placeholder="请输入账户类型，如: 基金账户、股票账户等" />
-          </Form.Item>
-        </div>
-
-        <!-- 自定义币种输入 -->
-        <div v-if="accountForm.currency === 'CUSTOM'" class="mb-4">
-          <Row :gutter="16">
-            <Col :span="12">
-              <Form.Item label="币种代码" required>
-                <Input v-model:value="accountForm.customCurrencyCode" placeholder="如: THB, AUD 等" style="text-transform: uppercase" />
-              </Form.Item>
-            </Col>
-            <Col :span="12">
-              <Form.Item label="币种名称" required>
-                <Input v-model:value="accountForm.customCurrencyName" placeholder="如: 泰铢, 澳元 等" />
-              </Form.Item>
-            </Col>
-          </Row>
-        </div>
-        
-        <Form.Item label="银行/机构">
-          <Select v-model:value="accountForm.bank" placeholder="选择银行或机构（可选）" allow-clear @change="handleBankChange">
-            <Select.Option value="工商银行">🏦 工商银行</Select.Option>
-            <Select.Option value="建设银行">🏗️ 建设银行</Select.Option>
-            <Select.Option value="招商银行">💼 招商银行</Select.Option>
-            <Select.Option value="农业银行">🌾 农业银行</Select.Option>
-            <Select.Option value="中国银行">🏛️ 中国银行</Select.Option>
-            <Select.Option value="交通银行">🚄 交通银行</Select.Option>
-            <Select.Option value="支付宝">💙 支付宝</Select.Option>
-            <Select.Option value="微信支付">💚 微信支付</Select.Option>
-            <Select.Option value="CUSTOM">➕ 自定义银行</Select.Option>
-          </Select>
-        </Form.Item>
-
-        <!-- 自定义银行输入 -->
-        <div v-if="accountForm.bank === 'CUSTOM'" class="mb-4">
-          <Form.Item label="自定义银行/机构名称" required>
-            <Input v-model:value="accountForm.customBankName" placeholder="请输入银行或机构名称，如: 民生银行、京东金融等" />
-          </Form.Item>
-        </div>
-
-        <Form.Item label="账户描述">
-          <Input.TextArea 
-            v-model:value="accountForm.description" 
-            :rows="3" 
-            placeholder="账户备注信息..."
-          />
-        </Form.Item>
-
-        <Form.Item label="账户颜色">
-          <div class="flex space-x-2">
-            <div 
-              v-for="color in accountColors" 
-              :key="color"
-              class="w-8 h-8 rounded-full cursor-pointer border-2 hover:scale-110 transition-all"
-              :class="accountForm.color === color ? 'border-gray-800 scale-110' : 'border-gray-300'"
-              :style="{ backgroundColor: color }"
-              @click="accountForm.color = color"
-            ></div>
-          </div>
-        </Form.Item>
-      </Form>
-    </Modal>
-
-    <!-- 转账模态框 -->
-    <Modal
-      v-model:open="showTransferModal"
-      title="💸 转账"
-      @ok="submitTransfer"
-      width="500px"
-    >
-      <Form layout="vertical">
-        <Form.Item label="转出账户">
-          <Select v-model:value="transferForm.fromAccount" disabled>
-            <Select.Option
-              v-for="account in accounts"
-              :key="account.id"
-              :value="account.id"
-            >
-              {{ account.icon }} {{ account.name }} ({{ getCurrencySymbol(account.currency) }}{{ account.balance.toLocaleString() }})
-            </Select.Option>
-          </Select>
-        </Form.Item>
-
-        <Form.Item label="转入账户" required>
-          <Select v-model:value="transferForm.toAccount" placeholder="选择转入账户">
-            <Select.Option
-              v-for="account in accounts.filter(a => a.id !== transferForm.fromAccount)"
-              :key="account.id"
-              :value="account.id"
-            >
-              {{ account.icon }} {{ account.name }} ({{ getCurrencySymbol(account.currency) }}{{ account.balance.toLocaleString() }})
-            </Select.Option>
-          </Select>
-        </Form.Item>
-
-        <Form.Item label="转账金额" required>
-          <InputNumber
-            v-model:value="transferForm.amount"
-            :min="0"
-            :precision="2"
-            style="width: 100%"
-            placeholder="请输入转账金额"
-            size="large"
-          />
-        </Form.Item>
-
-        <Form.Item label="备注">
-          <Input.TextArea
-            v-model:value="transferForm.description"
-            :rows="3"
-            placeholder="转账备注（可选）"
-          />
-        </Form.Item>
-      </Form>
-    </Modal>
-
-    <!-- 账户明细模态框 -->
-    <Modal
-      v-model:open="showDetailsModal"
-      :title="`📊 ${currentAccount?.name || ''} - 交易明细`"
-      width="900px"
-      :footer="null"
-    >
-      <div v-if="accountTransactions.length === 0" class="text-center py-12">
-        <div class="text-8xl mb-6">📊</div>
-        <h3 class="text-xl font-medium text-gray-800 mb-2">暂无交易记录</h3>
-        <p class="text-gray-500">该账户还没有任何交易记录</p>
-      </div>
-      <Table
-        v-else
-        :columns="[
-          { title: '日期', dataIndex: 'transactionDate', key: 'transactionDate', width: 120 },
-          { title: '类型', dataIndex: 'type', key: 'type', width: 80 },
-          { title: '描述', dataIndex: 'description', key: 'description' },
-          { title: '分类', dataIndex: 'categoryId', key: 'categoryId', width: 120 },
-          { title: '金额', dataIndex: 'amount', key: 'amount', width: 150 }
-        ]"
-        :dataSource="accountTransactions"
-        :pagination="{ pageSize: 10 }"
-        :rowKey="record => record.id"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.dataIndex === 'type'">
-            <Tag :color="record.type === 'income' ? 'green' : 'red'">
-              {{ record.type === 'income' ? '📈 收入' : '📉 支出' }}
-            </Tag>
-          </template>
-          <template v-else-if="column.dataIndex === 'amount'">
-            <span :class="record.type === 'income' ? 'text-green-600 font-bold' : 'text-red-600 font-bold'">
-              {{ record.type === 'income' ? '+' : '-' }}{{ getCurrencySymbol(record.currency) }}{{ Math.abs(record.amount).toLocaleString() }}
-            </span>
-          </template>
-          <template v-else-if="column.dataIndex === 'categoryId'">
-            <Tag>{{ getCategoryName(record.categoryId) }}</Tag>
-          </template>
-        </template>
-      </Table>
-    </Modal>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+
 import {
-  Card, Button, Modal, Form, Input, Select, Row, Col,
-  InputNumber, notification, Dropdown, Menu, Table, Tag, Space
+  Button,
+  Card,
+  Col,
+  Dropdown,
+  Form,
+  Input,
+  InputNumber,
+  Menu,
+  Modal,
+  notification,
+  Row,
+  Select,
+  Table,
+  Tag,
 } from 'ant-design-vue';
-import dayjs from 'dayjs';
 
 import { useFinanceStore } from '#/store/finance';
 
@@ -349,21 +41,21 @@ const formRef = ref();
 const currentAccount = ref<any>(null);
 const accountTransactions = computed(() => {
   if (!currentAccount.value) return [];
-  return financeStore.transactions.filter(t =>
-    t.accountId === currentAccount.value.id && !t.isDeleted
+  return financeStore.transactions.filter(
+    (t) => t.accountId === currentAccount.value.id && !t.isDeleted,
   );
 });
 
 // 计算属性
 const totalAssets = computed(() => {
   return accounts.value
-    .filter(account => account.balance > 0)
+    .filter((account) => account.balance > 0)
     .reduce((sum, account) => sum + account.balance, 0);
 });
 
 const totalLiabilities = computed(() => {
   return accounts.value
-    .filter(account => account.balance < 0)
+    .filter((account) => account.balance < 0)
     .reduce((sum, account) => sum + account.balance, 0);
 });
 
@@ -375,7 +67,7 @@ const netWorth = computed(() => {
 const formatCurrency = (amount: number) => {
   return new Intl.NumberFormat('zh-CN', {
     style: 'currency',
-    currency: 'CNY'
+    currency: 'CNY',
   }).format(amount);
 };
 
@@ -391,7 +83,7 @@ const accountForm = ref({
   bank: '',
   customBankName: '',
   description: '',
-  color: '#1890ff'
+  color: '#1890ff',
 });
 
 // 转账表单数据
@@ -400,27 +92,41 @@ const transferForm = ref({
   toAccount: '',
   amount: null,
   description: '',
-  date: null
+  date: null,
 });
 
 // 账户颜色选项
 const accountColors = ref([
-  '#1890ff', '#52c41a', '#fa541c', '#722ed1', '#eb2f96', '#13c2c2',
-  '#f5222d', '#fa8c16', '#fadb14', '#a0d911', '#52c41a', '#13a8a8'
+  '#1890ff',
+  '#52c41a',
+  '#fa541c',
+  '#722ed1',
+  '#eb2f96',
+  '#13c2c2',
+  '#f5222d',
+  '#fa8c16',
+  '#fadb14',
+  '#a0d911',
+  '#52c41a',
+  '#13a8a8',
 ]);
 
 // 表单验证规则
 const rules = {
   name: [
     { required: true, message: '请输入账户名称', trigger: 'blur' },
-    { min: 2, max: 50, message: '账户名称长度在2-50个字符', trigger: 'blur' }
-  ],
-  type: [
-    { required: true, message: '请选择账户类型', trigger: 'change' }
+    { min: 2, max: 50, message: '账户名称长度在2-50个字符', trigger: 'blur' },
   ],
+  type: [{ required: true, message: '请选择账户类型', trigger: 'change' }],
   balance: [
-    { type: 'number', min: -999999999, max: 999999999, message: '请输入有效的金额', trigger: 'blur' }
-  ]
+    {
+      type: 'number',
+      min: -999_999_999,
+      max: 999_999_999,
+      message: '请输入有效的金额',
+      trigger: 'blur',
+    },
+  ],
 };
 
 // 功能方法
@@ -435,21 +141,26 @@ const submitAccount = async () => {
     await formRef.value.validate();
 
     // 处理自定义字段
-    const finalType = accountForm.value.type === 'CUSTOM'
-      ? accountForm.value.customTypeName
-      : getAccountTypeText(accountForm.value.type);
+    const finalType =
+      accountForm.value.type === 'CUSTOM'
+        ? accountForm.value.customTypeName
+        : getAccountTypeText(accountForm.value.type);
 
-    const finalCurrency = accountForm.value.currency === 'CUSTOM'
-      ? `${accountForm.value.customCurrencyCode} (${accountForm.value.customCurrencyName})`
-      : accountForm.value.currency;
+    const finalCurrency =
+      accountForm.value.currency === 'CUSTOM'
+        ? `${accountForm.value.customCurrencyCode} (${accountForm.value.customCurrencyName})`
+        : accountForm.value.currency;
 
-    const finalBank = accountForm.value.bank === 'CUSTOM'
-      ? accountForm.value.customBankName
-      : accountForm.value.bank;
+    const finalBank =
+      accountForm.value.bank === 'CUSTOM'
+        ? accountForm.value.customBankName
+        : accountForm.value.bank;
 
     if (isEditing.value && editingAccount.value) {
       // 编辑现有账户
-      const index = accounts.value.findIndex(a => a.id === editingAccount.value.id);
+      const index = accounts.value.findIndex(
+        (a) => a.id === editingAccount.value.id,
+      );
       if (index !== -1) {
         accounts.value[index] = {
           ...accounts.value[index],
@@ -461,12 +172,12 @@ const submitAccount = async () => {
           description: accountForm.value.description,
           color: accountForm.value.color,
           icon: getAccountEmoji(accountForm.value.type),
-          updatedAt: new Date().toISOString()
+          updatedAt: new Date().toISOString(),
         };
 
         notification.success({
           message: '账户更新成功',
-          description: `账户 "${accountForm.value.name}" 已更新`
+          description: `账户 "${accountForm.value.name}" 已更新`,
         });
       }
     } else {
@@ -482,7 +193,7 @@ const submitAccount = async () => {
         color: accountForm.value.color,
         icon: getAccountEmoji(accountForm.value.type),
         createdAt: new Date().toISOString(),
-        status: 'active'
+        status: 'active',
       };
 
       // 添加到账户列表
@@ -490,7 +201,7 @@ const submitAccount = async () => {
 
       notification.success({
         message: '账户添加成功',
-        description: `账户 "${newAccount.name}" 已成功创建`
+        description: `账户 "${newAccount.name}" 已成功创建`,
       });
 
       console.log('新增账户:', newAccount);
@@ -501,12 +212,11 @@ const submitAccount = async () => {
     isEditing.value = false;
     editingAccount.value = null;
     resetForm();
-
   } catch (error) {
     console.error('表单验证失败:', error);
     notification.error({
       message: isEditing.value ? '更新失败' : '添加失败',
-      description: '请检查表单信息是否正确'
+      description: '请检查表单信息是否正确',
     });
   }
 };
@@ -552,48 +262,48 @@ const resetForm = () => {
     bank: '',
     customBankName: '',
     description: '',
-    color: '#1890ff'
+    color: '#1890ff',
   };
 };
 
 const getCurrencySymbol = (currency: string) => {
   const symbolMap: Record<string, string> = {
-    'CNY': '¥',
-    'THB': '฿',
-    'USD': '$',
-    'EUR': '€',
-    'JPY': '¥',
-    'GBP': '£',
-    'HKD': 'HK$',
-    'KRW': '₩'
+    CNY: '¥',
+    THB: '฿',
+    USD: '$',
+    EUR: '€',
+    JPY: '¥',
+    GBP: '£',
+    HKD: 'HK$',
+    KRW: '₩',
   };
-  return symbolMap[currency] || currency + ' ';
+  return symbolMap[currency] || `${currency} `;
 };
 
 const getAccountTypeText = (type: string) => {
   const typeMap: Record<string, string> = {
-    'cash': '现金',
-    'bank': '银行卡',
-    'alipay': '支付宝',
-    'wechat': '微信',
-    'virtual_wallet': '虚拟钱包',
-    'investment': '投资账户',
-    'credit_card': '信用卡',
-    'savings': '储蓄账户',
-    'checking': '支票账户',
-    'credit': '信用卡',
-    'ewallet': '电子钱包'
+    cash: '现金',
+    bank: '银行卡',
+    alipay: '支付宝',
+    wechat: '微信',
+    virtual_wallet: '虚拟钱包',
+    investment: '投资账户',
+    credit_card: '信用卡',
+    savings: '储蓄账户',
+    checking: '支票账户',
+    credit: '信用卡',
+    ewallet: '电子钱包',
   };
   return typeMap[type] || type;
 };
 
 const getAccountEmoji = (type: string) => {
   const emojiMap = {
-    'savings': '🏦',
-    'checking': '📝',
-    'credit': '💳',
-    'investment': '📈',
-    'ewallet': '📱'
+    savings: '🏦',
+    checking: '📝',
+    credit: '💳',
+    investment: '📈',
+    ewallet: '📱',
   };
   return emojiMap[type] || '🏦';
 };
@@ -609,20 +319,49 @@ const editAccount = (account: any) => {
   // 填充表单
   accountForm.value = {
     name: account.name,
-    type: account.type === '储蓄账户' ? 'savings' :
-          account.type === '支票账户' ? 'checking' :
-          account.type === '信用卡' ? 'credit' :
-          account.type === '投资账户' ? 'investment' :
-          account.type === '电子钱包' ? 'ewallet' : 'CUSTOM',
-    customTypeName: ['储蓄账户', '支票账户', '信用卡', '投资账户', '电子钱包'].includes(account.type) ? '' : account.type,
+    type:
+      account.type === '储蓄账户'
+        ? 'savings'
+        : account.type === '支票账户'
+          ? 'checking'
+          : account.type === '信用卡'
+            ? 'credit'
+            : account.type === '投资账户'
+              ? 'investment'
+              : account.type === '电子钱包'
+                ? 'ewallet'
+                : 'CUSTOM',
+    customTypeName: [
+      '信用卡',
+      '储蓄账户',
+      '投资账户',
+      '支票账户',
+      '电子钱包',
+    ].includes(account.type)
+      ? ''
+      : account.type,
     balance: account.balance,
-    currency: ['CNY', 'USD', 'EUR', 'JPY', 'GBP', 'HKD', 'KRW'].includes(account.currency) ? account.currency : 'CUSTOM',
-    customCurrencyCode: ['CNY', 'USD', 'EUR', 'JPY', 'GBP', 'HKD', 'KRW'].includes(account.currency) ? '' : account.currency,
+    currency: ['CNY', 'EUR', 'GBP', 'HKD', 'JPY', 'KRW', 'USD'].includes(
+      account.currency,
+    )
+      ? account.currency
+      : 'CUSTOM',
+    customCurrencyCode: [
+      'CNY',
+      'EUR',
+      'GBP',
+      'HKD',
+      'JPY',
+      'KRW',
+      'USD',
+    ].includes(account.currency)
+      ? ''
+      : account.currency,
     customCurrencyName: '',
     bank: account.bank || '',
     customBankName: '',
     description: account.description || '',
-    color: account.color || '#1890ff'
+    color: account.color || '#1890ff',
   };
 
   showAddModal.value = true;
@@ -630,12 +369,12 @@ const editAccount = (account: any) => {
 
 const deleteAccount = (account: any) => {
   console.log('删除账户:', account);
-  const index = accounts.value.findIndex(a => a.id === account.id);
+  const index = accounts.value.findIndex((a) => a.id === account.id);
   if (index !== -1) {
     accounts.value.splice(index, 1);
     notification.success({
       message: '账户已删除',
-      description: `账户 "${account.name}" 已删除`
+      description: `账户 "${account.name}" 已删除`,
     });
   }
 };
@@ -648,7 +387,7 @@ const transfer = (account: any) => {
     toAccount: '',
     amount: null,
     description: '',
-    date: new Date()
+    date: new Date(),
   };
   showTransferModal.value = true;
 };
@@ -658,7 +397,7 @@ const submitTransfer = async () => {
     if (!transferForm.value.toAccount || !transferForm.value.amount) {
       notification.error({
         message: '转账失败',
-        description: '请填写完整的转账信息'
+        description: '请填写完整的转账信息',
       });
       return;
     }
@@ -666,18 +405,22 @@ const submitTransfer = async () => {
     if (transferForm.value.fromAccount === transferForm.value.toAccount) {
       notification.error({
         message: '转账失败',
-        description: '转出和转入账户不能相同'
+        description: '转出和转入账户不能相同',
       });
       return;
     }
 
-    const fromAccount = financeStore.getAccountById(Number(transferForm.value.fromAccount));
-    const toAccount = financeStore.getAccountById(Number(transferForm.value.toAccount));
+    const fromAccount = financeStore.getAccountById(
+      Number(transferForm.value.fromAccount),
+    );
+    const toAccount = financeStore.getAccountById(
+      Number(transferForm.value.toAccount),
+    );
 
     if (!fromAccount || !toAccount) {
       notification.error({
         message: '转账失败',
-        description: '账户不存在'
+        description: '账户不存在',
       });
       return;
     }
@@ -689,7 +432,7 @@ const submitTransfer = async () => {
       currency: fromAccount.currency,
       accountId: Number(transferForm.value.fromAccount),
       transactionDate: new Date().toISOString().split('T')[0],
-      description: `转账至 ${toAccount.name}${transferForm.value.description ? ' - ' + transferForm.value.description : ''}`
+      description: `转账至 ${toAccount.name}${transferForm.value.description ? ` - ${transferForm.value.description}` : ''}`,
     });
 
     // 创建转入交易（收入）
@@ -699,12 +442,12 @@ const submitTransfer = async () => {
       currency: toAccount.currency,
       accountId: Number(transferForm.value.toAccount),
       transactionDate: new Date().toISOString().split('T')[0],
-      description: `从 ${fromAccount.name} 转入${transferForm.value.description ? ' - ' + transferForm.value.description : ''}`
+      description: `从 ${fromAccount.name} 转入${transferForm.value.description ? ` - ${transferForm.value.description}` : ''}`,
     });
 
     notification.success({
       message: '转账成功',
-      description: `已从 ${fromAccount.name} 转账 ${getCurrencySymbol(fromAccount.currency)}${transferForm.value.amount} 到 ${toAccount.name}`
+      description: `已从 ${fromAccount.name} 转账 ${getCurrencySymbol(fromAccount.currency)}${transferForm.value.amount} 到 ${toAccount.name}`,
     });
 
     showTransferModal.value = false;
@@ -713,13 +456,13 @@ const submitTransfer = async () => {
       toAccount: '',
       amount: null,
       description: '',
-      date: null
+      date: null,
     };
   } catch (error) {
     console.error('转账失败:', error);
     notification.error({
       message: '转账失败',
-      description: '转账时出错，请稍后重试'
+      description: '转账时出错，请稍后重试',
     });
   }
 };
@@ -730,13 +473,423 @@ const viewDetails = (account: any) => {
   showDetailsModal.value = true;
 };
 
-const getCategoryName = (categoryId: number | null) => {
+const getCategoryName = (categoryId: null | number) => {
   if (!categoryId) return '未分类';
   const category = financeStore.getCategoryById(categoryId);
   return category ? `${category.icon} ${category.name}` : '未知分类';
 };
 </script>
 
+<template>
+  <div class="p-6">
+    <div class="mb-6">
+      <h1 class="mb-2 text-3xl font-bold text-gray-900">🏦 账户管理</h1>
+      <p class="text-gray-600">管理银行账户、电子钱包和投资账户</p>
+    </div>
+
+    <!-- 账户概览 -->
+    <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+      <Card class="text-center">
+        <div class="space-y-2">
+          <div class="text-3xl">💰</div>
+          <p class="text-sm text-gray-500">总资产</p>
+          <p class="text-2xl font-bold text-green-600">
+            {{ formatCurrency(totalAssets) }}
+          </p>
+        </div>
+      </Card>
+      <Card class="text-center">
+        <div class="space-y-2">
+          <div class="text-3xl">🔴</div>
+          <p class="text-sm text-gray-500">总负债</p>
+          <p class="text-2xl font-bold text-red-600">
+            {{ formatCurrency(Math.abs(totalLiabilities)) }}
+          </p>
+        </div>
+      </Card>
+      <Card class="text-center">
+        <div class="space-y-2">
+          <div class="text-3xl">📊</div>
+          <p class="text-sm text-gray-500">净资产</p>
+          <p class="text-2xl font-bold text-blue-600">
+            {{ formatCurrency(netWorth) }}
+          </p>
+        </div>
+      </Card>
+      <Card class="text-center">
+        <div class="space-y-2">
+          <div class="text-3xl">🏪</div>
+          <p class="text-sm text-gray-500">账户数</p>
+          <p class="text-2xl font-bold text-purple-600">
+            {{ accounts.length }}个
+          </p>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 账户列表 -->
+    <div v-if="accounts.length === 0" class="py-12 text-center">
+      <div class="mb-6 text-8xl">🏦</div>
+      <h3 class="mb-2 text-xl font-medium text-gray-800">暂无账户信息</h3>
+      <p class="mb-6 text-gray-500">添加您的银行账户、电子钱包等开始管理财务</p>
+      <Button type="primary" size="large" @click="openAddAccountModal">
+        ➕ 添加第一个账户
+      </Button>
+    </div>
+
+    <div v-else class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <Card
+        v-for="account in accounts"
+        :key="account.id"
+        class="transition-shadow hover:shadow-lg"
+      >
+        <template #title>
+          <div class="flex items-center space-x-2">
+            <span class="text-xl">{{ account.icon }}</span>
+            <span>{{ account.name }}</span>
+          </div>
+        </template>
+        <template #extra>
+          <Dropdown :trigger="['click']">
+            <template #overlay>
+              <Menu>
+                <Menu.Item @click="editAccount(account)">✏️ 编辑</Menu.Item>
+                <Menu.Item @click="deleteAccount(account)" class="text-red-600">
+                  🗑️ 删除
+                </Menu.Item>
+              </Menu>
+            </template>
+            <Button type="text" size="small">⚙️</Button>
+          </Dropdown>
+        </template>
+
+        <div class="space-y-4">
+          <div class="text-center">
+            <p
+              class="text-2xl font-bold"
+              :class="account.balance >= 0 ? 'text-green-600' : 'text-red-600'"
+            >
+              {{ getCurrencySymbol(account.currency)
+              }}{{ account.balance.toLocaleString() }}
+            </p>
+            <p class="text-sm text-gray-500">
+              {{ getAccountTypeText(account.type) }}
+            </p>
+            <p class="mt-1 text-xs text-blue-500">{{ account.currency }}</p>
+          </div>
+
+          <div class="flex space-x-2">
+            <Button
+              type="primary"
+              size="small"
+              block
+              @click="transfer(account)"
+            >
+              💸 转账
+            </Button>
+            <Button size="small" block @click="viewDetails(account)">
+              📊 明细
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 添加/编辑账户模态框 -->
+    <Modal
+      v-model:open="showAddModal"
+      :title="isEditing ? '✏️ 编辑账户' : '➕ 添加新账户'"
+      @ok="submitAccount"
+      @cancel="cancelAdd"
+      width="500px"
+    >
+      <Form ref="formRef" :model="accountForm" :rules="rules" layout="vertical">
+        <Form.Item label="账户名称" name="name" required>
+          <Input
+            v-model:value="accountForm.name"
+            placeholder="请输入账户名称，如：工商银行储蓄卡"
+            size="large"
+          />
+        </Form.Item>
+
+        <Row :gutter="16">
+          <Col :span="8">
+            <Form.Item label="账户类型" name="type" required>
+              <Select
+                v-model:value="accountForm.type"
+                placeholder="选择类型"
+                size="large"
+                @change="handleTypeChange"
+              >
+                <Select.Option value="savings">
+                  <span>🏦 储蓄账户</span>
+                </Select.Option>
+                <Select.Option value="checking">
+                  <span>📝 支票账户</span>
+                </Select.Option>
+                <Select.Option value="credit">
+                  <span>💳 信用卡</span>
+                </Select.Option>
+                <Select.Option value="investment">
+                  <span>📈 投资账户</span>
+                </Select.Option>
+                <Select.Option value="ewallet">
+                  <span>📱 电子钱包</span>
+                </Select.Option>
+                <Select.Option value="CUSTOM">
+                  <span>➕ 自定义类型</span>
+                </Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+          <Col :span="8">
+            <Form.Item label="初始余额" name="balance">
+              <InputNumber
+                v-model:value="accountForm.balance"
+                :precision="2"
+                style="width: 100%"
+                placeholder="0.00"
+                size="large"
+              />
+            </Form.Item>
+          </Col>
+          <Col :span="8">
+            <Form.Item label="余额币种" name="currency">
+              <Select
+                v-model:value="accountForm.currency"
+                placeholder="选择币种"
+                size="large"
+                @change="handleCurrencyChange"
+              >
+                <Select.Option value="CNY">🇨🇳 人民币</Select.Option>
+                <Select.Option value="USD">🇺🇸 美元</Select.Option>
+                <Select.Option value="EUR">🇪🇺 欧元</Select.Option>
+                <Select.Option value="JPY">🇯🇵 日元</Select.Option>
+                <Select.Option value="GBP">🇬🇧 英镑</Select.Option>
+                <Select.Option value="HKD">🇭🇰 港币</Select.Option>
+                <Select.Option value="KRW">🇰🇷 韩元</Select.Option>
+                <Select.Option value="CUSTOM">➕ 自定义币种</Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <!-- 自定义账户类型输入 -->
+        <div v-if="accountForm.type === 'CUSTOM'" class="mb-4">
+          <Form.Item label="自定义账户类型" required>
+            <Input
+              v-model:value="accountForm.customTypeName"
+              placeholder="请输入账户类型，如: 基金账户、股票账户等"
+            />
+          </Form.Item>
+        </div>
+
+        <!-- 自定义币种输入 -->
+        <div v-if="accountForm.currency === 'CUSTOM'" class="mb-4">
+          <Row :gutter="16">
+            <Col :span="12">
+              <Form.Item label="币种代码" required>
+                <Input
+                  v-model:value="accountForm.customCurrencyCode"
+                  placeholder="如: THB, AUD 等"
+                  style="text-transform: uppercase"
+                />
+              </Form.Item>
+            </Col>
+            <Col :span="12">
+              <Form.Item label="币种名称" required>
+                <Input
+                  v-model:value="accountForm.customCurrencyName"
+                  placeholder="如: 泰铢, 澳元 等"
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+        </div>
+
+        <Form.Item label="银行/机构">
+          <Select
+            v-model:value="accountForm.bank"
+            placeholder="选择银行或机构（可选）"
+            allow-clear
+            @change="handleBankChange"
+          >
+            <Select.Option value="工商银行">🏦 工商银行</Select.Option>
+            <Select.Option value="建设银行">🏗️ 建设银行</Select.Option>
+            <Select.Option value="招商银行">💼 招商银行</Select.Option>
+            <Select.Option value="农业银行">🌾 农业银行</Select.Option>
+            <Select.Option value="中国银行">🏛️ 中国银行</Select.Option>
+            <Select.Option value="交通银行">🚄 交通银行</Select.Option>
+            <Select.Option value="支付宝">💙 支付宝</Select.Option>
+            <Select.Option value="微信支付">💚 微信支付</Select.Option>
+            <Select.Option value="CUSTOM">➕ 自定义银行</Select.Option>
+          </Select>
+        </Form.Item>
+
+        <!-- 自定义银行输入 -->
+        <div v-if="accountForm.bank === 'CUSTOM'" class="mb-4">
+          <Form.Item label="自定义银行/机构名称" required>
+            <Input
+              v-model:value="accountForm.customBankName"
+              placeholder="请输入银行或机构名称，如: 民生银行、京东金融等"
+            />
+          </Form.Item>
+        </div>
+
+        <Form.Item label="账户描述">
+          <Input.TextArea
+            v-model:value="accountForm.description"
+            :rows="3"
+            placeholder="账户备注信息..."
+          />
+        </Form.Item>
+
+        <Form.Item label="账户颜色">
+          <div class="flex space-x-2">
+            <div
+              v-for="color in accountColors"
+              :key="color"
+              class="h-8 w-8 cursor-pointer rounded-full border-2 transition-all hover:scale-110"
+              :class="
+                accountForm.color === color
+                  ? 'scale-110 border-gray-800'
+                  : 'border-gray-300'
+              "
+              :style="{ backgroundColor: color }"
+              @click="accountForm.color = color"
+            ></div>
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
+
+    <!-- 转账模态框 -->
+    <Modal
+      v-model:open="showTransferModal"
+      title="💸 转账"
+      @ok="submitTransfer"
+      width="500px"
+    >
+      <Form layout="vertical">
+        <Form.Item label="转出账户">
+          <Select v-model:value="transferForm.fromAccount" disabled>
+            <Select.Option
+              v-for="account in accounts"
+              :key="account.id"
+              :value="account.id"
+            >
+              {{ account.icon }} {{ account.name }} ({{
+                getCurrencySymbol(account.currency)
+              }}{{ account.balance.toLocaleString() }})
+            </Select.Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item label="转入账户" required>
+          <Select
+            v-model:value="transferForm.toAccount"
+            placeholder="选择转入账户"
+          >
+            <Select.Option
+              v-for="account in accounts.filter(
+                (a) => a.id !== transferForm.fromAccount,
+              )"
+              :key="account.id"
+              :value="account.id"
+            >
+              {{ account.icon }} {{ account.name }} ({{
+                getCurrencySymbol(account.currency)
+              }}{{ account.balance.toLocaleString() }})
+            </Select.Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item label="转账金额" required>
+          <InputNumber
+            v-model:value="transferForm.amount"
+            :min="0"
+            :precision="2"
+            style="width: 100%"
+            placeholder="请输入转账金额"
+            size="large"
+          />
+        </Form.Item>
+
+        <Form.Item label="备注">
+          <Input.TextArea
+            v-model:value="transferForm.description"
+            :rows="3"
+            placeholder="转账备注（可选）"
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+
+    <!-- 账户明细模态框 -->
+    <Modal
+      v-model:open="showDetailsModal"
+      :title="`📊 ${currentAccount?.name || ''} - 交易明细`"
+      width="900px"
+      :footer="null"
+    >
+      <div v-if="accountTransactions.length === 0" class="py-12 text-center">
+        <div class="mb-6 text-8xl">📊</div>
+        <h3 class="mb-2 text-xl font-medium text-gray-800">暂无交易记录</h3>
+        <p class="text-gray-500">该账户还没有任何交易记录</p>
+      </div>
+      <Table
+        v-else
+        :columns="[
+          {
+            title: '日期',
+            dataIndex: 'transactionDate',
+            key: 'transactionDate',
+            width: 120,
+          },
+          { title: '类型', dataIndex: 'type', key: 'type', width: 80 },
+          { title: '描述', dataIndex: 'description', key: 'description' },
+          {
+            title: '分类',
+            dataIndex: 'categoryId',
+            key: 'categoryId',
+            width: 120,
+          },
+          { title: '金额', dataIndex: 'amount', key: 'amount', width: 150 },
+        ]"
+        :data-source="accountTransactions"
+        :pagination="{ pageSize: 10 }"
+        :row-key="(record) => record.id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'type'">
+            <Tag :color="record.type === 'income' ? 'green' : 'red'">
+              {{ record.type === 'income' ? '📈 收入' : '📉 支出' }}
+            </Tag>
+          </template>
+          <template v-else-if="column.dataIndex === 'amount'">
+            <span
+              :class="
+                record.type === 'income'
+                  ? 'font-bold text-green-600'
+                  : 'font-bold text-red-600'
+              "
+            >
+              {{ record.type === 'income' ? '+' : '-'
+              }}{{ getCurrencySymbol(record.currency)
+              }}{{ Math.abs(record.amount).toLocaleString() }}
+            </span>
+          </template>
+          <template v-else-if="column.dataIndex === 'categoryId'">
+            <Tag>{{ getCategoryName(record.categoryId) }}</Tag>
+          </template>
+        </template>
+      </Table>
+    </Modal>
+  </div>
+</template>
+
 <style scoped>
-.grid { display: grid; }
-</style>
\ No newline at end of file
+.grid {
+  display: grid;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/budgets/index.vue b/apps/web-antd/src/views/finance/budgets/index.vue
index be617196..c6006065 100644
--- a/apps/web-antd/src/views/finance/budgets/index.vue
+++ b/apps/web-antd/src/views/finance/budgets/index.vue
@@ -1,55 +1,373 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+import {
+  Button,
+  Card,
+  Col,
+  Dropdown,
+  Form,
+  Input,
+  InputNumber,
+  Menu,
+  Modal,
+  notification,
+  Progress,
+  Row,
+  Select,
+  Slider,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+import { useFinanceStore } from '#/store/finance';
+
+defineOptions({ name: 'BudgetManagement' });
+
+const financeStore = useFinanceStore();
+const budgets = computed(() =>
+  financeStore.budgets.filter((b) => !b.isDeleted),
+);
+const showAddModal = ref(false);
+const formRef = ref();
+
+// 表单数据
+const budgetForm = ref({
+  category: '',
+  customCategoryName: '',
+  customCategoryIcon: '',
+  limit: null,
+  currency: 'CNY',
+  customCurrencyCode: '',
+  customCurrencyName: '',
+  period: 'monthly',
+  alertThreshold: 80,
+  description: '',
+  autoRenew: true,
+  overspendAlert: true,
+  dailyReminder: false,
+});
+
+// 表单验证规则
+const rules = {
+  category: [{ required: true, message: '请选择预算分类', trigger: 'change' }],
+  limit: [
+    { required: true, message: '请输入预算金额', trigger: 'blur' },
+    {
+      type: 'number',
+      min: 0.01,
+      message: '预算金额必须大于0',
+      trigger: 'blur',
+    },
+  ],
+  currency: [{ required: true, message: '请选择币种', trigger: 'change' }],
+  period: [{ required: true, message: '请选择预算周期', trigger: 'change' }],
+};
+
+// 计算属性
+const totalBudget = computed(() => {
+  return budgets.value.reduce((sum, budget) => sum + budget.limit, 0);
+});
+
+const totalSpent = computed(() => {
+  return budgets.value.reduce((sum, budget) => sum + budget.spent, 0);
+});
+
+const totalRemaining = computed(() => {
+  return budgets.value.reduce((sum, budget) => sum + budget.remaining, 0);
+});
+
+const averageUsage = computed(() => {
+  if (budgets.value.length === 0) return 0;
+  return (
+    budgets.value.reduce((sum, budget) => sum + budget.percentage, 0) /
+    budgets.value.length
+  );
+});
+
+// 功能方法
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('zh-CN', {
+    style: 'currency',
+    currency: 'CNY',
+  }).format(amount);
+};
+
+const formatCurrencyWithCode = (amount: number, currencyCode: string) => {
+  // 如果是自定义币种（包含括号），直接显示数字 + 币种代码
+  if (currencyCode && currencyCode.includes('(')) {
+    return `${amount.toLocaleString()} ${currencyCode}`;
+  }
+
+  // 对于标准币种，使用格式化
+  try {
+    return new Intl.NumberFormat('zh-CN', {
+      style: 'currency',
+      currency: currencyCode || 'CNY',
+    }).format(amount);
+  } catch {
+    // 如果币种代码不被支持，则直接显示数字 + 代码
+    return `${amount.toLocaleString()} ${currencyCode || 'CNY'}`;
+  }
+};
+
+const getProgressColor = (percentage: number) => {
+  if (percentage > 100) return '#ff4d4f';
+  if (percentage > 90) return '#faad14';
+  if (percentage > 75) return '#1890ff';
+  return '#52c41a';
+};
+
+const getAmountColor = (percentage: number) => {
+  if (percentage > 100) return 'text-red-600';
+  if (percentage > 90) return 'text-orange-600';
+  if (percentage > 75) return 'text-blue-600';
+  return 'text-green-600';
+};
+
+const getCategoryEmoji = (category: string) => {
+  const emojiMap = {
+    food: '🍽️',
+    transport: '🚗',
+    shopping: '🛒',
+    entertainment: '🎮',
+    medical: '🏥',
+    housing: '🏠',
+    education: '📚',
+    travel: '✈️',
+  };
+  return emojiMap[category] || '🎯';
+};
+
+const getCategoryName = (category: string) => {
+  const nameMap = {
+    food: '餐饮',
+    transport: '交通',
+    shopping: '购物',
+    entertainment: '娱乐',
+    medical: '医疗',
+    housing: '住房',
+    education: '教育',
+    travel: '旅游',
+  };
+  return nameMap[category] || category;
+};
+
+const openAddBudgetModal = () => {
+  showAddModal.value = true;
+  resetForm();
+};
+
+const submitBudget = async () => {
+  try {
+    // 表单验证
+    await formRef.value.validate();
+
+    // 处理自定义字段
+    const finalCategory =
+      budgetForm.value.category === 'CUSTOM'
+        ? budgetForm.value.customCategoryName
+        : getCategoryName(budgetForm.value.category);
+
+    const finalEmoji =
+      budgetForm.value.category === 'CUSTOM'
+        ? budgetForm.value.customCategoryIcon
+        : getCategoryEmoji(budgetForm.value.category);
+
+    const finalCurrency =
+      budgetForm.value.currency === 'CUSTOM'
+        ? `${budgetForm.value.customCurrencyCode} (${budgetForm.value.customCurrencyName})`
+        : budgetForm.value.currency;
+
+    // 检查分类是否已有预算
+    const existingBudget = budgets.value.find(
+      (b) => b.category === finalCategory,
+    );
+    if (existingBudget) {
+      notification.error({
+        message: '添加失败',
+        description: '该分类已存在预算设置',
+      });
+      return;
+    }
+
+    // 创建新预算
+    await financeStore.createBudget({
+      category: finalCategory,
+      emoji: finalEmoji,
+      limit: budgetForm.value.limit,
+      currency: finalCurrency,
+      spent: 0,
+      remaining: budgetForm.value.limit,
+      percentage: 0,
+      period: budgetForm.value.period,
+      alertThreshold: budgetForm.value.alertThreshold,
+      description: budgetForm.value.description,
+      autoRenew: budgetForm.value.autoRenew,
+      overspendAlert: budgetForm.value.overspendAlert,
+      dailyReminder: budgetForm.value.dailyReminder,
+      monthlyTrend: 0,
+    });
+
+    notification.success({
+      message: '预算设置成功',
+      description: `${finalCategory} 预算已成功创建`,
+    });
+
+    // 关闭模态框
+    showAddModal.value = false;
+    resetForm();
+  } catch (error) {
+    console.error('表单验证失败:', error);
+    notification.error({
+      message: '添加失败',
+      description: '请检查表单信息是否正确',
+    });
+  }
+};
+
+const cancelAdd = () => {
+  showAddModal.value = false;
+  resetForm();
+};
+
+const resetForm = () => {
+  budgetForm.value = {
+    category: '',
+    customCategoryName: '',
+    customCategoryIcon: '',
+    limit: null,
+    currency: 'CNY',
+    customCurrencyCode: '',
+    customCurrencyName: '',
+    period: 'monthly',
+    alertThreshold: 80,
+    description: '',
+    autoRenew: true,
+    overspendAlert: true,
+    dailyReminder: false,
+  };
+};
+
+const handleCategoryChange = (category: string) => {
+  console.log('分类选择:', category);
+  if (category !== 'CUSTOM') {
+    budgetForm.value.customCategoryName = '';
+    budgetForm.value.customCategoryIcon = '';
+  }
+};
+
+const handleCurrencyChange = (currency: string) => {
+  console.log('币种选择:', currency);
+  if (currency !== 'CUSTOM') {
+    budgetForm.value.customCurrencyCode = '';
+    budgetForm.value.customCurrencyName = '';
+  }
+};
+
+// 预算操作方法
+const editBudget = (budget: any) => {
+  console.log('编辑预算:', budget);
+  notification.info({
+    message: '编辑预算',
+    description: `编辑 ${budget.category} 预算设置`,
+  });
+};
+
+const adjustBudget = (budget: any) => {
+  console.log('调整预算额度:', budget);
+  notification.info({
+    message: '调整额度',
+    description: `调整 ${budget.category} 预算额度`,
+  });
+};
+
+const viewHistory = (budget: any) => {
+  console.log('查看预算历史:', budget);
+  notification.info({
+    message: '历史记录',
+    description: `查看 ${budget.category} 预算历史`,
+  });
+};
+
+const deleteBudget = async (budget: any) => {
+  console.log('删除预算:', budget);
+  await financeStore.deleteBudget(budget.id);
+  notification.success({
+    message: '预算已删除',
+    description: `${budget.category} 预算已删除`,
+  });
+};
+
+onMounted(async () => {
+  await financeStore.fetchBudgets();
+});
+</script>
+
 <template>
   <div class="p-6">
     <div class="mb-6">
-      <h1 class="text-3xl font-bold text-gray-900 mb-2">🎯 预算管理</h1>
+      <h1 class="mb-2 text-3xl font-bold text-gray-900">🎯 预算管理</h1>
       <p class="text-gray-600">设置和监控各类别的预算执行情况</p>
     </div>
-    
-    <div v-if="budgets.length === 0" class="text-center py-12">
-      <div class="text-8xl mb-6">🎯</div>
-      <h3 class="text-xl font-medium text-gray-800 mb-2">暂无预算设置</h3>
-      <p class="text-gray-500 mb-6">设置预算帮助您更好地控制支出</p>
+
+    <div v-if="budgets.length === 0" class="py-12 text-center">
+      <div class="mb-6 text-8xl">🎯</div>
+      <h3 class="mb-2 text-xl font-medium text-gray-800">暂无预算设置</h3>
+      <p class="mb-6 text-gray-500">设置预算帮助您更好地控制支出</p>
       <Button type="primary" size="large" @click="openAddBudgetModal">
         ➕ 设置第一个预算
       </Button>
     </div>
-    
+
     <div v-else>
       <!-- 预算概览统计 -->
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+      <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
         <Card class="text-center">
           <div class="space-y-2">
             <div class="text-3xl">💰</div>
             <p class="text-sm text-gray-500">总预算</p>
-            <p class="text-xl font-bold text-blue-600">{{ formatCurrency(totalBudget) }}</p>
+            <p class="text-xl font-bold text-blue-600">
+              {{ formatCurrency(totalBudget) }}
+            </p>
           </div>
         </Card>
         <Card class="text-center">
           <div class="space-y-2">
             <div class="text-3xl">📊</div>
             <p class="text-sm text-gray-500">已使用</p>
-            <p class="text-xl font-bold text-orange-600">{{ formatCurrency(totalSpent) }}</p>
+            <p class="text-xl font-bold text-orange-600">
+              {{ formatCurrency(totalSpent) }}
+            </p>
           </div>
         </Card>
         <Card class="text-center">
           <div class="space-y-2">
             <div class="text-3xl">🎯</div>
             <p class="text-sm text-gray-500">剩余预算</p>
-            <p class="text-xl font-bold text-green-600">{{ formatCurrency(totalRemaining) }}</p>
+            <p class="text-xl font-bold text-green-600">
+              {{ formatCurrency(totalRemaining) }}
+            </p>
           </div>
         </Card>
         <Card class="text-center">
           <div class="space-y-2">
             <div class="text-3xl">⚡</div>
             <p class="text-sm text-gray-500">执行率</p>
-            <p class="text-xl font-bold text-purple-600">{{ averageUsage.toFixed(1) }}%</p>
+            <p class="text-xl font-bold text-purple-600">
+              {{ averageUsage.toFixed(1) }}%
+            </p>
           </div>
         </Card>
       </div>
 
       <!-- 预算卡片列表 -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
-        <Card v-for="budget in budgets" :key="budget.id" class="relative hover:shadow-lg transition-shadow">
+      <div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card
+          v-for="budget in budgets"
+          :key="budget.id"
+          class="relative transition-shadow hover:shadow-lg"
+        >
           <template #title>
             <div class="flex items-center justify-between">
               <div class="flex items-center space-x-2">
@@ -60,9 +378,18 @@
                 <template #overlay>
                   <Menu>
                     <Menu.Item @click="editBudget(budget)">✏️ 编辑</Menu.Item>
-                    <Menu.Item @click="adjustBudget(budget)">📊 调整额度</Menu.Item>
-                    <Menu.Item @click="viewHistory(budget)">📈 历史记录</Menu.Item>
-                    <Menu.Item @click="deleteBudget(budget)" class="text-red-600">🗑️ 删除</Menu.Item>
+                    <Menu.Item @click="adjustBudget(budget)">
+                      📊 调整额度
+                    </Menu.Item>
+                    <Menu.Item @click="viewHistory(budget)">
+                      📈 历史记录
+                    </Menu.Item>
+                    <Menu.Item
+                      @click="deleteBudget(budget)"
+                      class="text-red-600"
+                    >
+                      🗑️ 删除
+                    </Menu.Item>
                   </Menu>
                 </template>
                 <Button type="text" size="small">⚙️</Button>
@@ -73,22 +400,38 @@
           <!-- 预算进度 -->
           <div class="space-y-4">
             <div class="text-center">
-              <p class="text-2xl font-bold" :class="getAmountColor(budget.percentage)">
-                {{ formatCurrencyWithCode(budget.spent, budget.currency) }} / {{ formatCurrencyWithCode(budget.limit, budget.currency) }}
+              <p
+                class="text-2xl font-bold"
+                :class="getAmountColor(budget.percentage)"
+              >
+                {{ formatCurrencyWithCode(budget.spent, budget.currency) }} /
+                {{ formatCurrencyWithCode(budget.limit, budget.currency) }}
               </p>
               <p class="text-sm text-gray-500">已用 / 预算</p>
             </div>
 
-            <Progress 
-              :percent="budget.percentage" 
+            <Progress
+              :percent="budget.percentage"
               :stroke-color="getProgressColor(budget.percentage)"
             />
 
             <div class="flex justify-between text-sm">
-              <span :class="budget.remaining >= 0 ? 'text-green-600' : 'text-red-600'">
-                {{ budget.remaining >= 0 ? '剩余' : '超支' }}: {{ formatCurrencyWithCode(Math.abs(budget.remaining), budget.currency) }}
+              <span
+                :class="
+                  budget.remaining >= 0 ? 'text-green-600' : 'text-red-600'
+                "
+              >
+                {{ budget.remaining >= 0 ? '剩余' : '超支' }}:
+                {{
+                  formatCurrencyWithCode(
+                    Math.abs(budget.remaining),
+                    budget.currency,
+                  )
+                }}
               </span>
-              <span class="text-gray-500">{{ budget.percentage.toFixed(1) }}%</span>
+              <span class="text-gray-500"
+                >{{ budget.percentage.toFixed(1) }}%</span
+              >
             </div>
 
             <!-- 预算状态标签 -->
@@ -102,25 +445,32 @@
               <Tag v-else-if="budget.percentage > 75" color="blue">
                 ℹ️ 使用正常
               </Tag>
-              <Tag v-else color="green">
-                ✅ 控制良好
-              </Tag>
+              <Tag v-else color="green"> ✅ 控制良好 </Tag>
             </div>
 
             <!-- 月度趋势 -->
             <div v-if="budget.monthlyTrend" class="text-center">
               <p class="text-xs text-gray-500">相比上月</p>
-              <p :class="budget.monthlyTrend >= 0 ? 'text-red-500' : 'text-green-500'" class="font-medium">
-                {{ budget.monthlyTrend >= 0 ? '↗️' : '↘️' }} {{ Math.abs(budget.monthlyTrend).toFixed(1) }}%
+              <p
+                :class="
+                  budget.monthlyTrend >= 0 ? 'text-red-500' : 'text-green-500'
+                "
+                class="font-medium"
+              >
+                {{ budget.monthlyTrend >= 0 ? '↗️' : '↘️' }}
+                {{ Math.abs(budget.monthlyTrend).toFixed(1) }}%
               </p>
             </div>
           </div>
         </Card>
 
         <!-- 添加预算卡片 -->
-        <Card class="border-2 border-dashed border-gray-300 hover:border-blue-400 cursor-pointer transition-all" @click="openAddBudgetModal">
-          <div class="text-center py-12">
-            <div class="text-6xl mb-4">➕</div>
+        <Card
+          class="cursor-pointer border-2 border-dashed border-gray-300 transition-all hover:border-blue-400"
+          @click="openAddBudgetModal"
+        >
+          <div class="py-12 text-center">
+            <div class="mb-4 text-6xl">➕</div>
             <h3 class="font-medium text-gray-800">添加新预算</h3>
             <p class="text-sm text-gray-500">为分类设置预算控制</p>
           </div>
@@ -129,16 +479,21 @@
     </div>
 
     <!-- 添加预算模态框 -->
-    <Modal 
-      v-model:open="showAddModal" 
-      title="➕ 设置新预算" 
+    <Modal
+      v-model:open="showAddModal"
+      title="➕ 设置新预算"
       @ok="submitBudget"
       @cancel="cancelAdd"
       width="500px"
     >
       <Form ref="formRef" :model="budgetForm" :rules="rules" layout="vertical">
         <Form.Item label="预算分类" name="category" required>
-          <Select v-model:value="budgetForm.category" placeholder="选择分类" size="large" @change="handleCategoryChange">
+          <Select
+            v-model:value="budgetForm.category"
+            placeholder="选择分类"
+            size="large"
+            @change="handleCategoryChange"
+          >
             <Select.Option value="food">🍽️ 餐饮</Select.Option>
             <Select.Option value="transport">🚗 交通</Select.Option>
             <Select.Option value="shopping">🛒 购物</Select.Option>
@@ -156,17 +511,23 @@
           <Row :gutter="16">
             <Col :span="12">
               <Form.Item label="分类名称" required>
-                <Input v-model:value="budgetForm.customCategoryName" placeholder="请输入分类名称，如: 宝贝用品、理财等" />
+                <Input
+                  v-model:value="budgetForm.customCategoryName"
+                  placeholder="请输入分类名称，如: 宝贝用品、理财等"
+                />
               </Form.Item>
             </Col>
             <Col :span="12">
               <Form.Item label="分类图标" required>
-                <Input v-model:value="budgetForm.customCategoryIcon" placeholder="请输入图标，如: 👶, 💹 等" />
+                <Input
+                  v-model:value="budgetForm.customCategoryIcon"
+                  placeholder="请输入图标，如: 👶, 💹 等"
+                />
               </Form.Item>
             </Col>
           </Row>
         </div>
-        
+
         <Row :gutter="16">
           <Col :span="8">
             <Form.Item label="预算金额" name="limit" required>
@@ -182,7 +543,12 @@
           </Col>
           <Col :span="8">
             <Form.Item label="金额币种" name="currency" required>
-              <Select v-model:value="budgetForm.currency" placeholder="选择币种" size="large" @change="handleCurrencyChange">
+              <Select
+                v-model:value="budgetForm.currency"
+                placeholder="选择币种"
+                size="large"
+                @change="handleCurrencyChange"
+              >
                 <Select.Option value="CNY">🇨🇳 人民币</Select.Option>
                 <Select.Option value="USD">🇺🇸 美元</Select.Option>
                 <Select.Option value="EUR">🇪🇺 欧元</Select.Option>
@@ -211,12 +577,19 @@
           <Row :gutter="16">
             <Col :span="12">
               <Form.Item label="币种代码" required>
-                <Input v-model:value="budgetForm.customCurrencyCode" placeholder="如: THB, AUD 等" style="text-transform: uppercase" />
+                <Input
+                  v-model:value="budgetForm.customCurrencyCode"
+                  placeholder="如: THB, AUD 等"
+                  style="text-transform: uppercase"
+                />
               </Form.Item>
             </Col>
             <Col :span="12">
               <Form.Item label="币种名称" required>
-                <Input v-model:value="budgetForm.customCurrencyName" placeholder="如: 泰铢, 澳元 等" />
+                <Input
+                  v-model:value="budgetForm.customCurrencyName"
+                  placeholder="如: 泰铢, 澳元 等"
+                />
               </Form.Item>
             </Col>
           </Row>
@@ -231,29 +604,31 @@
               :step="5"
               :marks="{ 50: '50%', 75: '75%', 90: '90%', 100: '100%' }"
             />
-            <p class="text-sm text-gray-500">当支出达到预算的 {{ budgetForm.alertThreshold }}% 时发出预警</p>
+            <p class="text-sm text-gray-500">
+              当支出达到预算的 {{ budgetForm.alertThreshold }}% 时发出预警
+            </p>
           </div>
         </Form.Item>
 
         <Form.Item label="预算描述">
-          <Input.TextArea 
-            v-model:value="budgetForm.description" 
-            :rows="3" 
+          <Input.TextArea
+            v-model:value="budgetForm.description"
+            :rows="3"
             placeholder="预算用途和目标..."
           />
         </Form.Item>
 
         <Form.Item label="预算设置">
           <div class="space-y-3">
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <span>自动续期</span>
               <Switch v-model:checked="budgetForm.autoRenew" />
             </div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <span>超支提醒</span>
               <Switch v-model:checked="budgetForm.overspendAlert" />
             </div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <span>每日提醒</span>
               <Switch v-model:checked="budgetForm.dailyReminder" />
             </div>
@@ -264,289 +639,8 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import {
-  Card, Progress, Button, Modal, Form, Input, Select, Row, Col,
-  InputNumber, Slider, Switch, Tag, notification, Dropdown, Menu
-} from 'ant-design-vue';
-
-import { useFinanceStore } from '#/store/finance';
-
-defineOptions({ name: 'BudgetManagement' });
-
-const financeStore = useFinanceStore();
-const budgets = computed(() => financeStore.budgets.filter(b => !b.isDeleted));
-const showAddModal = ref(false);
-const formRef = ref();
-
-// 表单数据
-const budgetForm = ref({
-  category: '',
-  customCategoryName: '',
-  customCategoryIcon: '',
-  limit: null,
-  currency: 'CNY',
-  customCurrencyCode: '',
-  customCurrencyName: '',
-  period: 'monthly',
-  alertThreshold: 80,
-  description: '',
-  autoRenew: true,
-  overspendAlert: true,
-  dailyReminder: false
-});
-
-// 表单验证规则
-const rules = {
-  category: [
-    { required: true, message: '请选择预算分类', trigger: 'change' }
-  ],
-  limit: [
-    { required: true, message: '请输入预算金额', trigger: 'blur' },
-    { type: 'number', min: 0.01, message: '预算金额必须大于0', trigger: 'blur' }
-  ],
-  currency: [
-    { required: true, message: '请选择币种', trigger: 'change' }
-  ],
-  period: [
-    { required: true, message: '请选择预算周期', trigger: 'change' }
-  ]
-};
-
-// 计算属性
-const totalBudget = computed(() => {
-  return budgets.value.reduce((sum, budget) => sum + budget.limit, 0);
-});
-
-const totalSpent = computed(() => {
-  return budgets.value.reduce((sum, budget) => sum + budget.spent, 0);
-});
-
-const totalRemaining = computed(() => {
-  return budgets.value.reduce((sum, budget) => sum + budget.remaining, 0);
-});
-
-const averageUsage = computed(() => {
-  if (budgets.value.length === 0) return 0;
-  return budgets.value.reduce((sum, budget) => sum + budget.percentage, 0) / budgets.value.length;
-});
-
-// 功能方法
-const formatCurrency = (amount: number) => {
-  return new Intl.NumberFormat('zh-CN', {
-    style: 'currency',
-    currency: 'CNY'
-  }).format(amount);
-};
-
-const formatCurrencyWithCode = (amount: number, currencyCode: string) => {
-  // 如果是自定义币种（包含括号），直接显示数字 + 币种代码
-  if (currencyCode && currencyCode.includes('(')) {
-    return `${amount.toLocaleString()} ${currencyCode}`;
-  }
-  
-  // 对于标准币种，使用格式化
-  try {
-    return new Intl.NumberFormat('zh-CN', {
-      style: 'currency',
-      currency: currencyCode || 'CNY'
-    }).format(amount);
-  } catch {
-    // 如果币种代码不被支持，则直接显示数字 + 代码
-    return `${amount.toLocaleString()} ${currencyCode || 'CNY'}`;
-  }
-};
-
-const getProgressColor = (percentage: number) => {
-  if (percentage > 100) return '#ff4d4f';
-  if (percentage > 90) return '#faad14';
-  if (percentage > 75) return '#1890ff';
-  return '#52c41a';
-};
-
-const getAmountColor = (percentage: number) => {
-  if (percentage > 100) return 'text-red-600';
-  if (percentage > 90) return 'text-orange-600';
-  if (percentage > 75) return 'text-blue-600';
-  return 'text-green-600';
-};
-
-const getCategoryEmoji = (category: string) => {
-  const emojiMap = {
-    'food': '🍽️',
-    'transport': '🚗',
-    'shopping': '🛒',
-    'entertainment': '🎮',
-    'medical': '🏥',
-    'housing': '🏠',
-    'education': '📚',
-    'travel': '✈️'
-  };
-  return emojiMap[category] || '🎯';
-};
-
-const getCategoryName = (category: string) => {
-  const nameMap = {
-    'food': '餐饮',
-    'transport': '交通',
-    'shopping': '购物',
-    'entertainment': '娱乐',
-    'medical': '医疗',
-    'housing': '住房',
-    'education': '教育',
-    'travel': '旅游'
-  };
-  return nameMap[category] || category;
-};
-
-const openAddBudgetModal = () => {
-  showAddModal.value = true;
-  resetForm();
-};
-
-const submitBudget = async () => {
-  try {
-    // 表单验证
-    await formRef.value.validate();
-
-    // 处理自定义字段
-    const finalCategory = budgetForm.value.category === 'CUSTOM'
-      ? budgetForm.value.customCategoryName
-      : getCategoryName(budgetForm.value.category);
-
-    const finalEmoji = budgetForm.value.category === 'CUSTOM'
-      ? budgetForm.value.customCategoryIcon
-      : getCategoryEmoji(budgetForm.value.category);
-
-    const finalCurrency = budgetForm.value.currency === 'CUSTOM'
-      ? `${budgetForm.value.customCurrencyCode} (${budgetForm.value.customCurrencyName})`
-      : budgetForm.value.currency;
-
-    // 检查分类是否已有预算
-    const existingBudget = budgets.value.find(b => b.category === finalCategory);
-    if (existingBudget) {
-      notification.error({
-        message: '添加失败',
-        description: '该分类已存在预算设置'
-      });
-      return;
-    }
-
-    // 创建新预算
-    await financeStore.createBudget({
-      category: finalCategory,
-      emoji: finalEmoji,
-      limit: budgetForm.value.limit,
-      currency: finalCurrency,
-      spent: 0,
-      remaining: budgetForm.value.limit,
-      percentage: 0,
-      period: budgetForm.value.period,
-      alertThreshold: budgetForm.value.alertThreshold,
-      description: budgetForm.value.description,
-      autoRenew: budgetForm.value.autoRenew,
-      overspendAlert: budgetForm.value.overspendAlert,
-      dailyReminder: budgetForm.value.dailyReminder,
-      monthlyTrend: 0,
-    });
-
-    notification.success({
-      message: '预算设置成功',
-      description: `${finalCategory} 预算已成功创建`
-    });
-
-    // 关闭模态框
-    showAddModal.value = false;
-    resetForm();
-
-  } catch (error) {
-    console.error('表单验证失败:', error);
-    notification.error({
-      message: '添加失败',
-      description: '请检查表单信息是否正确'
-    });
-  }
-};
-
-const cancelAdd = () => {
-  showAddModal.value = false;
-  resetForm();
-};
-
-const resetForm = () => {
-  budgetForm.value = {
-    category: '',
-    customCategoryName: '',
-    customCategoryIcon: '',
-    limit: null,
-    currency: 'CNY',
-    customCurrencyCode: '',
-    customCurrencyName: '',
-    period: 'monthly',
-    alertThreshold: 80,
-    description: '',
-    autoRenew: true,
-    overspendAlert: true,
-    dailyReminder: false
-  };
-};
-
-const handleCategoryChange = (category: string) => {
-  console.log('分类选择:', category);
-  if (category !== 'CUSTOM') {
-    budgetForm.value.customCategoryName = '';
-    budgetForm.value.customCategoryIcon = '';
-  }
-};
-
-const handleCurrencyChange = (currency: string) => {
-  console.log('币种选择:', currency);
-  if (currency !== 'CUSTOM') {
-    budgetForm.value.customCurrencyCode = '';
-    budgetForm.value.customCurrencyName = '';
-  }
-};
-
-// 预算操作方法
-const editBudget = (budget: any) => {
-  console.log('编辑预算:', budget);
-  notification.info({
-    message: '编辑预算',
-    description: `编辑 ${budget.category} 预算设置`
-  });
-};
-
-const adjustBudget = (budget: any) => {
-  console.log('调整预算额度:', budget);
-  notification.info({
-    message: '调整额度',
-    description: `调整 ${budget.category} 预算额度`
-  });
-};
-
-const viewHistory = (budget: any) => {
-  console.log('查看预算历史:', budget);
-  notification.info({
-    message: '历史记录',
-    description: `查看 ${budget.category} 预算历史`
-  });
-};
-
-const deleteBudget = async (budget: any) => {
-  console.log('删除预算:', budget);
-  await financeStore.deleteBudget(budget.id);
-  notification.success({
-    message: '预算已删除',
-    description: `${budget.category} 预算已删除`
-  });
-};
-
-onMounted(async () => {
-  await financeStore.fetchBudgets();
-});
-</script>
-
 <style scoped>
-.grid { display: grid; }
-</style>
\ No newline at end of file
+.grid {
+  display: grid;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/categories/index.vue b/apps/web-antd/src/views/finance/categories/index.vue
index 694ebd12..57646393 100644
--- a/apps/web-antd/src/views/finance/categories/index.vue
+++ b/apps/web-antd/src/views/finance/categories/index.vue
@@ -1,300 +1,18 @@
-<template>
-  <div class="p-6">
-    <div class="mb-6">
-      <h1 class="text-3xl font-bold text-gray-900 mb-2">🏷️ 分类管理</h1>
-      <p class="text-gray-600">管理收支分类，支持层级结构</p>
-    </div>
-    
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <Card title="📁 分类树结构">
-        <div v-if="categories.length === 0" class="text-center py-8">
-          <div class="text-6xl mb-4">🏷️</div>
-          <p class="text-gray-500 mb-4">暂无分类数据</p>
-          <Button type="primary" @click="openAddCategoryModal">➕ 添加分类</Button>
-        </div>
-        <div v-else class="space-y-3">
-          <div v-for="category in categories" :key="category.id" class="p-4 border rounded-lg hover:shadow-md transition-shadow">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center space-x-3">
-                <span class="text-2xl">{{ category.icon }}</span>
-                <div>
-                  <span class="font-medium text-lg">{{ category.name }}</span>
-                  <div class="flex items-center space-x-2 mt-1">
-                    <Tag :color="category.type === 'income' ? 'green' : 'red'" size="small">
-                      {{ category.type === 'income' ? '📈 收入' : '📉 支出' }}
-                    </Tag>
-                    <Tag v-if="category.isSystem" color="blue" size="small">系统分类</Tag>
-                  </div>
-                </div>
-              </div>
-              <div class="text-right">
-                <div class="space-x-2">
-                  <Button type="link" size="small" @click="editCategory(category)">✏️ 编辑</Button>
-                  <Button type="link" size="small" danger @click="deleteCategory(category)" :disabled="category.isSystem">🗑️ 删除</Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Card>
-      
-      <Card title="📊 分类统计">
-        <div v-if="categories.length === 0" class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
-          <div class="text-center">
-            <div class="text-4xl mb-2">📈</div>
-            <p class="text-gray-600">添加分类后查看统计</p>
-          </div>
-        </div>
-        <div v-else class="space-y-4">
-          <!-- 分类统计数据 -->
-          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div class="text-center p-3 bg-blue-50 rounded-lg">
-              <p class="text-sm text-gray-500">总分类数</p>
-              <p class="text-xl font-bold text-blue-600">{{ categoryStats.total }}</p>
-            </div>
-            <div class="text-center p-3 bg-green-50 rounded-lg">
-              <p class="text-sm text-gray-500">收入分类</p>
-              <p class="text-xl font-bold text-green-600">{{ categoryStats.income }}</p>
-            </div>
-            <div class="text-center p-3 bg-red-50 rounded-lg">
-              <p class="text-sm text-gray-500">支出分类</p>
-              <p class="text-xl font-bold text-red-600">{{ categoryStats.expense }}</p>
-            </div>
-            <div class="text-center p-3 bg-purple-50 rounded-lg">
-              <p class="text-sm text-gray-500">预算总额</p>
-              <p class="text-xl font-bold text-purple-600">¥{{ categoryStats.budgetTotal.toLocaleString() }}</p>
-            </div>
-          </div>
-
-          <!-- 分类列表 -->
-          <div class="space-y-2">
-            <h4 class="font-medium">📈 收入分类</h4>
-            <div class="space-y-2">
-              <div v-for="category in incomeCategories" :key="category.id"
-                   class="flex items-center justify-between p-2 bg-green-50 rounded">
-                <div class="flex items-center space-x-2">
-                  <span>{{ category.icon }}</span>
-                  <span>{{ category.name }}</span>
-                </div>
-                <Tag :color="category.color" size="small">{{ category.isSystem ? '系统' : '自定义' }}</Tag>
-              </div>
-              <div v-if="incomeCategories.length === 0" class="text-center text-gray-500 py-2">
-                暂无收入分类
-              </div>
-            </div>
-
-            <h4 class="font-medium mt-4">📉 支出分类</h4>
-            <div class="space-y-2">
-              <div v-for="category in expenseCategories" :key="category.id"
-                   class="flex items-center justify-between p-2 bg-red-50 rounded">
-                <div class="flex items-center space-x-2">
-                  <span>{{ category.icon }}</span>
-                  <span>{{ category.name }}</span>
-                </div>
-                <Tag :color="category.color" size="small">{{ category.isSystem ? '系统' : '自定义' }}</Tag>
-              </div>
-              <div v-if="expenseCategories.length === 0" class="text-center text-gray-500 py-2">
-                暂无支出分类
-              </div>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-
-    <!-- 编辑分类模态框 -->
-    <Modal
-      v-model:open="showEditModal"
-      title="✏️ 编辑分类"
-      @ok="submitEditCategory"
-      @cancel="() => { showEditModal = false; editingCategory = null; }"
-      width="500px"
-    >
-      <Form
-        ref="editFormRef"
-        :model="editForm"
-        :rules="rules"
-        layout="vertical"
-        class="mt-4"
-      >
-        <Form.Item label="分类名称" name="name" required>
-          <Input
-            v-model:value="editForm.name"
-            placeholder="请输入分类名称"
-            size="large"
-          />
-        </Form.Item>
-
-        <Form.Item label="图标" name="icon">
-          <Select v-model:value="editForm.icon" placeholder="选择图标" size="large">
-            <Select.Option value="🍽️">🍽️ 餐饮</Select.Option>
-            <Select.Option value="🚗">🚗 交通</Select.Option>
-            <Select.Option value="🛒">🛒 购物</Select.Option>
-            <Select.Option value="🎮">🎮 娱乐</Select.Option>
-            <Select.Option value="💻">💻 软件订阅</Select.Option>
-            <Select.Option value="📊">📊 投资</Select.Option>
-            <Select.Option value="🏥">🏥 医疗</Select.Option>
-            <Select.Option value="🏠">🏠 住房</Select.Option>
-            <Select.Option value="📚">📚 教育</Select.Option>
-            <Select.Option value="💰">💰 工资</Select.Option>
-            <Select.Option value="🎁">🎁 奖金</Select.Option>
-            <Select.Option value="💼">💼 副业</Select.Option>
-            <Select.Option value="CUSTOM">➕ 自定义图标</Select.Option>
-          </Select>
-        </Form.Item>
-
-        <!-- 自定义图标输入 -->
-        <div v-if="editForm.icon === 'CUSTOM'" class="mb-4">
-          <Form.Item label="自定义图标" required>
-            <Input v-model:value="editForm.customIcon" placeholder="请输入一个表情符号，如: 🍕, 🎬, 📚 等" />
-          </Form.Item>
-        </div>
-
-        <Form.Item label="分类颜色">
-          <div class="flex space-x-2">
-            <div
-              v-for="color in categoryColors"
-              :key="color"
-              class="w-8 h-8 rounded-full cursor-pointer border-2 hover:scale-110 transition-all"
-              :class="editForm.color === color ? 'border-gray-800 scale-110' : 'border-gray-300'"
-              :style="{ backgroundColor: color }"
-              @click="editForm.color = color"
-            ></div>
-          </div>
-        </Form.Item>
-      </Form>
-    </Modal>
-
-    <!-- 添加分类模态框 -->
-    <Modal
-      v-model:open="showAddModal"
-      title="➕ 添加新分类"
-      @ok="submitCategory"
-      @cancel="cancelAdd"
-      width="500px"
-    >
-      <Form ref="formRef" :model="categoryForm" :rules="rules" layout="vertical">
-        <Form.Item label="分类名称" name="name" required>
-          <Input 
-            v-model:value="categoryForm.name" 
-            placeholder="请输入分类名称，如：餐饮、交通等"
-            size="large"
-          />
-        </Form.Item>
-        
-        <Row :gutter="16">
-          <Col :span="12">
-            <Form.Item label="分类类型" name="type" required>
-              <Select v-model:value="categoryForm.type" placeholder="选择类型" size="large">
-                <Select.Option value="income">
-                  <span>📈 收入分类</span>
-                </Select.Option>
-                <Select.Option value="expense">
-                  <span>📉 支出分类</span>
-                </Select.Option>
-              </Select>
-            </Form.Item>
-          </Col>
-          <Col :span="12">
-            <Form.Item label="图标" name="icon">
-              <Select v-model:value="categoryForm.icon" placeholder="选择图标" size="large" @change="handleIconChange">
-                <Select.Option value="🍽️">🍽️ 餐饮</Select.Option>
-                <Select.Option value="🚗">🚗 交通</Select.Option>
-                <Select.Option value="🛒">🛒 购物</Select.Option>
-                <Select.Option value="🎮">🎮 娱乐</Select.Option>
-                <Select.Option value="🏥">🏥 医疗</Select.Option>
-                <Select.Option value="🏠">🏠 住房</Select.Option>
-                <Select.Option value="💰">💰 工资</Select.Option>
-                <Select.Option value="📈">📈 投资</Select.Option>
-                <Select.Option value="🎁">🎁 奖金</Select.Option>
-                <Select.Option value="💼">💼 兼职</Select.Option>
-                <Select.Option value="CUSTOM">➕ 自定义图标</Select.Option>
-              </Select>
-            </Form.Item>
-          </Col>
-        </Row>
-
-        <!-- 自定义图标输入 -->
-        <div v-if="categoryForm.icon === 'CUSTOM'" class="mb-4">
-          <Form.Item label="自定义图标" required>
-            <Input v-model:value="categoryForm.customIcon" placeholder="请输入一个表情符号，如: 🍕, 🎬, 📚 等" />
-          </Form.Item>
-        </div>
-
-        <Row :gutter="16">
-          <Col :span="12">
-            <Form.Item label="月度预算" name="budget">
-              <InputNumber
-                v-model:value="categoryForm.budget"
-                :precision="2"
-                style="width: 100%"
-                placeholder="0.00"
-                :min="0"
-              />
-            </Form.Item>
-          </Col>
-          <Col :span="12">
-            <Form.Item label="预算币种" name="budgetCurrency">
-              <Select v-model:value="categoryForm.budgetCurrency" placeholder="选择币种" size="large" @change="handleBudgetCurrencyChange">
-                <Select.Option value="CNY">🇨🇳 人民币</Select.Option>
-                <Select.Option value="USD">🇺🇸 美元</Select.Option>
-                <Select.Option value="EUR">🇪🇺 欧元</Select.Option>
-                <Select.Option value="JPY">🇯🇵 日元</Select.Option>
-                <Select.Option value="GBP">🇬🇧 英镑</Select.Option>
-                <Select.Option value="HKD">🇭🇰 港币</Select.Option>
-                <Select.Option value="KRW">🇰🇷 韩元</Select.Option>
-                <Select.Option value="CUSTOM">➕ 自定义币种</Select.Option>
-              </Select>
-            </Form.Item>
-          </Col>
-        </Row>
-
-        <!-- 自定义币种输入 -->
-        <div v-if="categoryForm.budgetCurrency === 'CUSTOM'" class="mb-4">
-          <Row :gutter="16">
-            <Col :span="12">
-              <Form.Item label="币种代码" required>
-                <Input v-model:value="categoryForm.customCurrencyCode" placeholder="如: THB, AUD 等" style="text-transform: uppercase" />
-              </Form.Item>
-            </Col>
-            <Col :span="12">
-              <Form.Item label="币种名称" required>
-                <Input v-model:value="categoryForm.customCurrencyName" placeholder="如: 泰铢, 澳元 等" />
-              </Form.Item>
-            </Col>
-          </Row>
-        </div>
-        
-        <Form.Item label="分类描述">
-          <Input.TextArea 
-            v-model:value="categoryForm.description" 
-            :rows="3" 
-            placeholder="分类用途描述..."
-          />
-        </Form.Item>
-
-        <Form.Item label="分类颜色">
-          <div class="flex space-x-2">
-            <div 
-              v-for="color in categoryColors" 
-              :key="color"
-              class="w-8 h-8 rounded-full cursor-pointer border-2 hover:scale-110 transition-all"
-              :class="categoryForm.color === color ? 'border-gray-800 scale-110' : 'border-gray-300'"
-              :style="{ backgroundColor: color }"
-              @click="categoryForm.color = color"
-            ></div>
-          </div>
-        </Form.Item>
-      </Form>
-    </Modal>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+
 import {
-  Card, Tag, Button, Modal, Form, Input, Select, Row, Col,
-  InputNumber, notification
+  Button,
+  Card,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  notification,
+  Row,
+  Select,
+  Tag,
 } from 'ant-design-vue';
 
 import { useFinanceStore } from '#/store/finance';
@@ -329,7 +47,7 @@ const categoryForm = ref({
   customCurrencyCode: '',
   customCurrencyName: '',
   description: '',
-  color: '#1890ff'
+  color: '#1890ff',
 });
 
 // 编辑表单数据
@@ -337,46 +55,56 @@ const editForm = ref({
   name: '',
   icon: '🏷️',
   customIcon: '',
-  color: '#1890ff'
+  color: '#1890ff',
 });
 
 // 分类颜色选项
 const categoryColors = ref([
-  '#1890ff', '#52c41a', '#fa541c', '#722ed1', '#eb2f96', '#13c2c2',
-  '#f5222d', '#fa8c16', '#fadb14', '#a0d911', '#36cfc9', '#b37feb'
+  '#1890ff',
+  '#52c41a',
+  '#fa541c',
+  '#722ed1',
+  '#eb2f96',
+  '#13c2c2',
+  '#f5222d',
+  '#fa8c16',
+  '#fadb14',
+  '#a0d911',
+  '#36cfc9',
+  '#b37feb',
 ]);
 
 // 表单验证规则
 const rules = {
   name: [
     { required: true, message: '请输入分类名称', trigger: 'blur' },
-    { min: 2, max: 20, message: '分类名称长度在2-20个字符', trigger: 'blur' }
+    { min: 2, max: 20, message: '分类名称长度在2-20个字符', trigger: 'blur' },
   ],
-  type: [
-    { required: true, message: '请选择分类类型', trigger: 'change' }
-  ]
+  type: [{ required: true, message: '请选择分类类型', trigger: 'change' }],
 };
 
 // 计算统计
 const categoryStats = computed(() => {
-  const incomeCategories = categories.value.filter(c => c.type === 'income');
-  const expenseCategories = categories.value.filter(c => c.type === 'expense');
+  const incomeCategories = categories.value.filter((c) => c.type === 'income');
+  const expenseCategories = categories.value.filter(
+    (c) => c.type === 'expense',
+  );
 
   return {
     total: categories.value.length,
     income: incomeCategories.length,
     expense: expenseCategories.length,
-    budgetTotal: 0 // 预算功能待实现
+    budgetTotal: 0, // 预算功能待实现
   };
 });
 
 // 分类分组
 const incomeCategories = computed(() => {
-  return categories.value.filter(c => c.type === 'income');
+  return categories.value.filter((c) => c.type === 'income');
 });
 
 const expenseCategories = computed(() => {
-  return categories.value.filter(c => c.type === 'expense');
+  return categories.value.filter((c) => c.type === 'expense');
 });
 
 // 功能方法
@@ -391,9 +119,10 @@ const submitCategory = async () => {
     await formRef.value.validate();
 
     // 处理自定义图标
-    const finalIcon = categoryForm.value.icon === 'CUSTOM'
-      ? categoryForm.value.customIcon
-      : categoryForm.value.icon;
+    const finalIcon =
+      categoryForm.value.icon === 'CUSTOM'
+        ? categoryForm.value.customIcon
+        : categoryForm.value.icon;
 
     // 调用 store 创建分类
     await financeStore.createCategory({
@@ -405,18 +134,17 @@ const submitCategory = async () => {
 
     notification.success({
       message: '分类添加成功',
-      description: `分类 "${categoryForm.value.name}" 已成功创建`
+      description: `分类 "${categoryForm.value.name}" 已成功创建`,
     });
 
     // 关闭模态框
     showAddModal.value = false;
     resetForm();
-
   } catch (error) {
     console.error('创建分类失败:', error);
     notification.error({
       message: '添加失败',
-      description: '请检查表单信息是否正确'
+      description: '请检查表单信息是否正确',
     });
   }
 };
@@ -437,7 +165,7 @@ const resetForm = () => {
     customCurrencyCode: '',
     customCurrencyName: '',
     description: '',
-    color: '#1890ff'
+    color: '#1890ff',
   };
 };
 
@@ -472,9 +200,10 @@ const submitEditCategory = async () => {
     await editFormRef.value?.validate();
 
     // 处理自定义图标
-    const finalIcon = editForm.value.icon === 'CUSTOM'
-      ? editForm.value.customIcon
-      : editForm.value.icon;
+    const finalIcon =
+      editForm.value.icon === 'CUSTOM'
+        ? editForm.value.customIcon
+        : editForm.value.icon;
 
     // 调用 store 更新分类
     await financeStore.updateCategory(editingCategory.value.id, {
@@ -485,17 +214,16 @@ const submitEditCategory = async () => {
 
     notification.success({
       message: '分类更新成功',
-      description: `分类 "${editForm.value.name}" 已更新`
+      description: `分类 "${editForm.value.name}" 已更新`,
     });
 
     showEditModal.value = false;
     editingCategory.value = null;
-
   } catch (error) {
     console.error('更新分类失败:', error);
     notification.error({
       message: '更新失败',
-      description: '请检查表单信息是否正确'
+      description: '请检查表单信息是否正确',
     });
   }
 };
@@ -505,7 +233,7 @@ const deleteCategory = (category: any) => {
   if (category.isSystem) {
     notification.warning({
       message: '无法删除',
-      description: '系统分类不允许删除'
+      description: '系统分类不允许删除',
     });
     return;
   }
@@ -521,16 +249,16 @@ const deleteCategory = (category: any) => {
         await financeStore.deleteCategory(category.id);
         notification.success({
           message: '分类已删除',
-          description: `分类 "${category.name}" 已删除`
+          description: `分类 "${category.name}" 已删除`,
         });
       } catch (error) {
         console.error('删除分类失败:', error);
         notification.error({
           message: '删除失败',
-          description: '删除分类时出错，请稍后重试'
+          description: '删除分类时出错，请稍后重试',
         });
       }
-    }
+    },
   });
 };
 
@@ -538,11 +266,406 @@ const setBudget = (category: any) => {
   console.log('设置预算:', category);
   notification.info({
     message: '预算设置',
-    description: `为分类 "${category.name}" 设置预算`
+    description: `为分类 "${category.name}" 设置预算`,
   });
 };
 </script>
 
+<template>
+  <div class="p-6">
+    <div class="mb-6">
+      <h1 class="mb-2 text-3xl font-bold text-gray-900">🏷️ 分类管理</h1>
+      <p class="text-gray-600">管理收支分类，支持层级结构</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <Card title="📁 分类树结构">
+        <div v-if="categories.length === 0" class="py-8 text-center">
+          <div class="mb-4 text-6xl">🏷️</div>
+          <p class="mb-4 text-gray-500">暂无分类数据</p>
+          <Button type="primary" @click="openAddCategoryModal">
+            ➕ 添加分类
+          </Button>
+        </div>
+        <div v-else class="space-y-3">
+          <div
+            v-for="category in categories"
+            :key="category.id"
+            class="rounded-lg border p-4 transition-shadow hover:shadow-md"
+          >
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-3">
+                <span class="text-2xl">{{ category.icon }}</span>
+                <div>
+                  <span class="text-lg font-medium">{{ category.name }}</span>
+                  <div class="mt-1 flex items-center space-x-2">
+                    <Tag
+                      :color="category.type === 'income' ? 'green' : 'red'"
+                      size="small"
+                    >
+                      {{ category.type === 'income' ? '📈 收入' : '📉 支出' }}
+                    </Tag>
+                    <Tag v-if="category.isSystem" color="blue" size="small">
+                      系统分类
+                    </Tag>
+                  </div>
+                </div>
+              </div>
+              <div class="text-right">
+                <div class="space-x-2">
+                  <Button
+                    type="link"
+                    size="small"
+                    @click="editCategory(category)"
+                  >
+                    ✏️ 编辑
+                  </Button>
+                  <Button
+                    type="link"
+                    size="small"
+                    danger
+                    @click="deleteCategory(category)"
+                    :disabled="category.isSystem"
+                  >
+                    🗑️ 删除
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      <Card title="📊 分类统计">
+        <div
+          v-if="categories.length === 0"
+          class="flex h-64 items-center justify-center rounded-lg bg-gray-50"
+        >
+          <div class="text-center">
+            <div class="mb-2 text-4xl">📈</div>
+            <p class="text-gray-600">添加分类后查看统计</p>
+          </div>
+        </div>
+        <div v-else class="space-y-4">
+          <!-- 分类统计数据 -->
+          <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+            <div class="rounded-lg bg-blue-50 p-3 text-center">
+              <p class="text-sm text-gray-500">总分类数</p>
+              <p class="text-xl font-bold text-blue-600">
+                {{ categoryStats.total }}
+              </p>
+            </div>
+            <div class="rounded-lg bg-green-50 p-3 text-center">
+              <p class="text-sm text-gray-500">收入分类</p>
+              <p class="text-xl font-bold text-green-600">
+                {{ categoryStats.income }}
+              </p>
+            </div>
+            <div class="rounded-lg bg-red-50 p-3 text-center">
+              <p class="text-sm text-gray-500">支出分类</p>
+              <p class="text-xl font-bold text-red-600">
+                {{ categoryStats.expense }}
+              </p>
+            </div>
+            <div class="rounded-lg bg-purple-50 p-3 text-center">
+              <p class="text-sm text-gray-500">预算总额</p>
+              <p class="text-xl font-bold text-purple-600">
+                ¥{{ categoryStats.budgetTotal.toLocaleString() }}
+              </p>
+            </div>
+          </div>
+
+          <!-- 分类列表 -->
+          <div class="space-y-2">
+            <h4 class="font-medium">📈 收入分类</h4>
+            <div class="space-y-2">
+              <div
+                v-for="category in incomeCategories"
+                :key="category.id"
+                class="flex items-center justify-between rounded bg-green-50 p-2"
+              >
+                <div class="flex items-center space-x-2">
+                  <span>{{ category.icon }}</span>
+                  <span>{{ category.name }}</span>
+                </div>
+                <Tag :color="category.color" size="small">
+                  {{ category.isSystem ? '系统' : '自定义' }}
+                </Tag>
+              </div>
+              <div
+                v-if="incomeCategories.length === 0"
+                class="py-2 text-center text-gray-500"
+              >
+                暂无收入分类
+              </div>
+            </div>
+
+            <h4 class="mt-4 font-medium">📉 支出分类</h4>
+            <div class="space-y-2">
+              <div
+                v-for="category in expenseCategories"
+                :key="category.id"
+                class="flex items-center justify-between rounded bg-red-50 p-2"
+              >
+                <div class="flex items-center space-x-2">
+                  <span>{{ category.icon }}</span>
+                  <span>{{ category.name }}</span>
+                </div>
+                <Tag :color="category.color" size="small">
+                  {{ category.isSystem ? '系统' : '自定义' }}
+                </Tag>
+              </div>
+              <div
+                v-if="expenseCategories.length === 0"
+                class="py-2 text-center text-gray-500"
+              >
+                暂无支出分类
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 编辑分类模态框 -->
+    <Modal
+      v-model:open="showEditModal"
+      title="✏️ 编辑分类"
+      @ok="submitEditCategory"
+      @cancel="
+        () => {
+          showEditModal = false;
+          editingCategory = null;
+        }
+      "
+      width="500px"
+    >
+      <Form
+        ref="editFormRef"
+        :model="editForm"
+        :rules="rules"
+        layout="vertical"
+        class="mt-4"
+      >
+        <Form.Item label="分类名称" name="name" required>
+          <Input
+            v-model:value="editForm.name"
+            placeholder="请输入分类名称"
+            size="large"
+          />
+        </Form.Item>
+
+        <Form.Item label="图标" name="icon">
+          <Select
+            v-model:value="editForm.icon"
+            placeholder="选择图标"
+            size="large"
+          >
+            <Select.Option value="🍽️">🍽️ 餐饮</Select.Option>
+            <Select.Option value="🚗">🚗 交通</Select.Option>
+            <Select.Option value="🛒">🛒 购物</Select.Option>
+            <Select.Option value="🎮">🎮 娱乐</Select.Option>
+            <Select.Option value="💻">💻 软件订阅</Select.Option>
+            <Select.Option value="📊">📊 投资</Select.Option>
+            <Select.Option value="🏥">🏥 医疗</Select.Option>
+            <Select.Option value="🏠">🏠 住房</Select.Option>
+            <Select.Option value="📚">📚 教育</Select.Option>
+            <Select.Option value="💰">💰 工资</Select.Option>
+            <Select.Option value="🎁">🎁 奖金</Select.Option>
+            <Select.Option value="💼">💼 副业</Select.Option>
+            <Select.Option value="CUSTOM">➕ 自定义图标</Select.Option>
+          </Select>
+        </Form.Item>
+
+        <!-- 自定义图标输入 -->
+        <div v-if="editForm.icon === 'CUSTOM'" class="mb-4">
+          <Form.Item label="自定义图标" required>
+            <Input
+              v-model:value="editForm.customIcon"
+              placeholder="请输入一个表情符号，如: 🍕, 🎬, 📚 等"
+            />
+          </Form.Item>
+        </div>
+
+        <Form.Item label="分类颜色">
+          <div class="flex space-x-2">
+            <div
+              v-for="color in categoryColors"
+              :key="color"
+              class="h-8 w-8 cursor-pointer rounded-full border-2 transition-all hover:scale-110"
+              :class="
+                editForm.color === color
+                  ? 'scale-110 border-gray-800'
+                  : 'border-gray-300'
+              "
+              :style="{ backgroundColor: color }"
+              @click="editForm.color = color"
+            ></div>
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
+
+    <!-- 添加分类模态框 -->
+    <Modal
+      v-model:open="showAddModal"
+      title="➕ 添加新分类"
+      @ok="submitCategory"
+      @cancel="cancelAdd"
+      width="500px"
+    >
+      <Form
+        ref="formRef"
+        :model="categoryForm"
+        :rules="rules"
+        layout="vertical"
+      >
+        <Form.Item label="分类名称" name="name" required>
+          <Input
+            v-model:value="categoryForm.name"
+            placeholder="请输入分类名称，如：餐饮、交通等"
+            size="large"
+          />
+        </Form.Item>
+
+        <Row :gutter="16">
+          <Col :span="12">
+            <Form.Item label="分类类型" name="type" required>
+              <Select
+                v-model:value="categoryForm.type"
+                placeholder="选择类型"
+                size="large"
+              >
+                <Select.Option value="income">
+                  <span>📈 收入分类</span>
+                </Select.Option>
+                <Select.Option value="expense">
+                  <span>📉 支出分类</span>
+                </Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+          <Col :span="12">
+            <Form.Item label="图标" name="icon">
+              <Select
+                v-model:value="categoryForm.icon"
+                placeholder="选择图标"
+                size="large"
+                @change="handleIconChange"
+              >
+                <Select.Option value="🍽️">🍽️ 餐饮</Select.Option>
+                <Select.Option value="🚗">🚗 交通</Select.Option>
+                <Select.Option value="🛒">🛒 购物</Select.Option>
+                <Select.Option value="🎮">🎮 娱乐</Select.Option>
+                <Select.Option value="🏥">🏥 医疗</Select.Option>
+                <Select.Option value="🏠">🏠 住房</Select.Option>
+                <Select.Option value="💰">💰 工资</Select.Option>
+                <Select.Option value="📈">📈 投资</Select.Option>
+                <Select.Option value="🎁">🎁 奖金</Select.Option>
+                <Select.Option value="💼">💼 兼职</Select.Option>
+                <Select.Option value="CUSTOM">➕ 自定义图标</Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <!-- 自定义图标输入 -->
+        <div v-if="categoryForm.icon === 'CUSTOM'" class="mb-4">
+          <Form.Item label="自定义图标" required>
+            <Input
+              v-model:value="categoryForm.customIcon"
+              placeholder="请输入一个表情符号，如: 🍕, 🎬, 📚 等"
+            />
+          </Form.Item>
+        </div>
+
+        <Row :gutter="16">
+          <Col :span="12">
+            <Form.Item label="月度预算" name="budget">
+              <InputNumber
+                v-model:value="categoryForm.budget"
+                :precision="2"
+                style="width: 100%"
+                placeholder="0.00"
+                :min="0"
+              />
+            </Form.Item>
+          </Col>
+          <Col :span="12">
+            <Form.Item label="预算币种" name="budgetCurrency">
+              <Select
+                v-model:value="categoryForm.budgetCurrency"
+                placeholder="选择币种"
+                size="large"
+                @change="handleBudgetCurrencyChange"
+              >
+                <Select.Option value="CNY">🇨🇳 人民币</Select.Option>
+                <Select.Option value="USD">🇺🇸 美元</Select.Option>
+                <Select.Option value="EUR">🇪🇺 欧元</Select.Option>
+                <Select.Option value="JPY">🇯🇵 日元</Select.Option>
+                <Select.Option value="GBP">🇬🇧 英镑</Select.Option>
+                <Select.Option value="HKD">🇭🇰 港币</Select.Option>
+                <Select.Option value="KRW">🇰🇷 韩元</Select.Option>
+                <Select.Option value="CUSTOM">➕ 自定义币种</Select.Option>
+              </Select>
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <!-- 自定义币种输入 -->
+        <div v-if="categoryForm.budgetCurrency === 'CUSTOM'" class="mb-4">
+          <Row :gutter="16">
+            <Col :span="12">
+              <Form.Item label="币种代码" required>
+                <Input
+                  v-model:value="categoryForm.customCurrencyCode"
+                  placeholder="如: THB, AUD 等"
+                  style="text-transform: uppercase"
+                />
+              </Form.Item>
+            </Col>
+            <Col :span="12">
+              <Form.Item label="币种名称" required>
+                <Input
+                  v-model:value="categoryForm.customCurrencyName"
+                  placeholder="如: 泰铢, 澳元 等"
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+        </div>
+
+        <Form.Item label="分类描述">
+          <Input.TextArea
+            v-model:value="categoryForm.description"
+            :rows="3"
+            placeholder="分类用途描述..."
+          />
+        </Form.Item>
+
+        <Form.Item label="分类颜色">
+          <div class="flex space-x-2">
+            <div
+              v-for="color in categoryColors"
+              :key="color"
+              class="h-8 w-8 cursor-pointer rounded-full border-2 transition-all hover:scale-110"
+              :class="
+                categoryForm.color === color
+                  ? 'scale-110 border-gray-800'
+                  : 'border-gray-300'
+              "
+              :style="{ backgroundColor: color }"
+              @click="categoryForm.color = color"
+            ></div>
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
 <style scoped>
-.grid { display: grid; }
-</style>
\ No newline at end of file
+.grid {
+  display: grid;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/dashboard/index.vue b/apps/web-antd/src/views/finance/dashboard/index.vue
index bf32fdac..c129f605 100644
--- a/apps/web-antd/src/views/finance/dashboard/index.vue
+++ b/apps/web-antd/src/views/finance/dashboard/index.vue
@@ -1,370 +1,21 @@
-<template>
-  <div class="p-6">
-    <div class="mb-6">
-      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
-        {{ isEnglish ? 'Financial Dashboard' : '📊 财务仪表板' }}
-      </h1>
-      <p class="text-gray-600">
-        {{ isEnglish ? 'Comprehensive financial data overview and real-time monitoring' : '智能财务数据概览与实时监控' }}
-      </p>
-    </div>
-
-    <!-- 核心指标卡片 -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-      <Card v-for="metric in keyMetrics" :key="metric.title" class="hover:shadow-lg transition-shadow">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm text-gray-500 mb-1">{{ metric.title }}</p>
-            <p class="text-2xl font-bold" :class="metric.color">{{ metric.value }}</p>
-            <p class="text-xs" :class="metric.trend > 0 ? 'text-green-500' : 'text-red-500'">
-              {{ metric.trend > 0 ? '↗️' : '↘️' }} {{ Math.abs(metric.trend) }}%
-            </p>
-          </div>
-          <div :class="metric.iconBg" class="w-12 h-12 rounded-lg flex items-center justify-center">
-            <span class="text-2xl text-white">{{ metric.iconEmoji }}</span>
-          </div>
-        </div>
-      </Card>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-      <!-- 收支趋势图 -->
-      <Card class="lg:col-span-2" title="📈 收支趋势分析">
-        <div class="space-y-6">
-          <div class="flex flex-wrap items-center gap-2">
-            <Button
-              v-for="option in trendRangeOptions"
-              :key="option.value"
-              :type="trendRange === option.value ? 'primary' : 'default'"
-              size="small"
-              @click="setTrendRange(option.value)"
-            >
-              {{ isEnglish ? option.labelEn : option.labelZh }}
-            </Button>
-          </div>
-
-          <div v-if="trendChartData.hasData" class="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
-            <EchartsUI ref="trendChartRef" height="320px" />
-          </div>
-          <div v-else class="flex h-80 flex-col items-center justify-center rounded-lg bg-gray-50 text-gray-500 dark:bg-gray-800">
-            <div class="text-4xl mb-2">📭</div>
-            <p class="font-medium">{{ isEnglish ? 'No transactions in the selected range' : '选定时间范围内暂无交易数据' }}</p>
-            <p class="text-sm text-gray-400">{{ isEnglish ? 'Record transactions or adjust the range to view trends' : '新增交易或更换时间范围后可查看趋势' }}</p>
-          </div>
-
-          <div class="space-y-6">
-            <div>
-              <div class="flex items-center justify-between mb-2">
-                <span class="text-sm font-medium text-gray-700">
-                  📈 {{ isEnglish ? `Income (${selectedRangeLabel})` : `${selectedRangeLabel}收入` }}
-                </span>
-                <span class="text-sm font-bold text-green-600">{{ formatCurrency(rangeIncome) }}</span>
-              </div>
-              <div class="w-full bg-gray-200 dark:bg-gray-700 h-3 rounded-full overflow-hidden">
-                <div
-                  class="bg-gradient-to-r from-green-400 to-green-600 h-3 rounded-full transition-all duration-500"
-                  :style="{ width: rangeIncomePercentage + '%' }"
-                ></div>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex items-center justify-between mb-2">
-                <span class="text-sm font-medium text-gray-700">
-                  📉 {{ isEnglish ? `Expense (${selectedRangeLabel})` : `${selectedRangeLabel}支出` }}
-                </span>
-                <span class="text-sm font-bold text-red-600">{{ formatCurrency(rangeExpense) }}</span>
-              </div>
-              <div class="w-full bg-gray-200 dark:bg-gray-700 h-3 rounded-full overflow-hidden">
-                <div
-                  class="bg-gradient-to-r from-red-400 to-red-600 h-3 rounded-full transition-all duration-500"
-                  :style="{ width: rangeExpensePercentage + '%' }"
-                ></div>
-              </div>
-            </div>
-
-            <div class="flex items-center justify-between border-t pt-4">
-              <span class="text-sm font-medium text-gray-700">
-                💎 {{ isEnglish ? `Net Income (${selectedRangeLabel})` : `${selectedRangeLabel}净收入` }}
-              </span>
-              <span class="text-lg font-bold" :class="rangeNetIncome >= 0 ? 'text-purple-600' : 'text-red-600'">
-                {{ formatCurrency(rangeNetIncome) }}
-              </span>
-            </div>
-
-            <div class="grid grid-cols-3 gap-4 border-t pt-4">
-              <div class="text-center">
-                <div class="text-2xl font-bold text-blue-600">{{ rangeTransactionCount }}</div>
-                <div class="text-xs text-gray-500">{{ isEnglish ? 'Total Records' : '总笔数' }}</div>
-              </div>
-              <div class="text-center">
-                <div class="text-2xl font-bold text-green-600">{{ rangeIncomeCount }}</div>
-                <div class="text-xs text-gray-500">{{ isEnglish ? 'Income Records' : '收入笔数' }}</div>
-              </div>
-              <div class="text-center">
-                <div class="text-2xl font-bold text-red-600">{{ rangeExpenseCount }}</div>
-                <div class="text-xs text-gray-500">{{ isEnglish ? 'Expense Records' : '支出笔数' }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Card>
-
-      <!-- 支出分类分析 -->
-      <Card title="🥧 支出分类分布">
-        <div class="space-y-4">
-          <div v-if="categoryChartData.hasData" class="rounded-lg bg-gray-50 p-2 dark:bg-gray-800">
-            <EchartsUI ref="categoryChartRef" height="260px" />
-          </div>
-          <div v-else class="flex h-64 flex-col items-center justify-center rounded-lg bg-gray-50 text-gray-500 dark:bg-gray-800">
-            <div class="text-4xl mb-2">🥱</div>
-            <p class="font-medium">{{ isEnglish ? 'No expense records for the selected range' : '选定范围内暂无支出记录' }}</p>
-            <p class="text-sm text-gray-400">{{ isEnglish ? 'Record expenses to view category breakdown' : '新增支出后即可查看分类占比' }}</p>
-          </div>
-
-          <div v-if="categoryChartData.hasData" class="space-y-3 overflow-y-auto max-h-72 pr-1">
-            <div
-              v-for="item in expenseByCategory"
-              :key="item.categoryId"
-              class="rounded-lg border border-gray-200 bg-white p-3 transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
-            >
-              <div class="flex items-center justify-between mb-2">
-                <span class="font-medium">{{ item.categoryName }}</span>
-                <span class="text-sm font-bold text-red-600">{{ formatCurrency(item.amount) }}</span>
-              </div>
-              <div class="flex items-center space-x-2">
-                <div class="flex-1 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-                  <div
-                    class="h-2 rounded-full bg-gradient-to-r from-red-400 to-red-600 transition-all duration-500"
-                    :style="{ width: item.percentage + '%' }"
-                  ></div>
-                </div>
-                <span class="w-12 text-right text-xs text-gray-500">{{ item.percentage }}%</span>
-              </div>
-              <div class="text-xs text-gray-500 mt-1">
-                {{ item.count }} {{ isEnglish ? 'records' : '笔交易' }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-
-    <!-- 最近交易和账户余额 -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
-      <!-- 最近交易 -->
-      <Card title="🕒 最近交易记录">
-        <template #extra>
-          <Button type="link" @click="$router.push('/finance/transactions')">查看全部</Button>
-        </template>
-        <div v-if="recentTransactions.length === 0" class="text-center py-8">
-          <div class="text-6xl mb-4">📝</div>
-          <p class="text-gray-500 mb-4">暂无交易记录</p>
-          <Button type="primary" @click="$router.push('/finance/transactions')">
-            ➕ 添加第一笔交易
-          </Button>
-        </div>
-        <div v-else class="space-y-3">
-          <div v-for="transaction in recentTransactions" :key="transaction.id" 
-               class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-            <div class="flex items-center space-x-3">
-              <span class="text-lg">{{ transaction.emoji }}</span>
-              <div>
-                <p class="font-medium">{{ transaction.description }}</p>
-                <p class="text-sm text-gray-500">{{ transaction.date }} · {{ transaction.category }}</p>
-              </div>
-            </div>
-            <span class="font-semibold" :class="transaction.amount > 0 ? 'text-green-600' : 'text-red-600'">
-              {{ transaction.amount > 0 ? '+' : '' }}{{ formatCurrency(transaction.amount) }}
-            </span>
-          </div>
-        </div>
-      </Card>
-
-      <!-- 账户余额 -->
-      <Card title="🏦 账户余额">
-        <template #extra>
-          <Button type="link" @click="$router.push('/finance/accounts')">管理账户</Button>
-        </template>
-        <div v-if="accounts.length === 0" class="text-center py-8">
-          <div class="text-6xl mb-4">🏦</div>
-          <p class="text-gray-500 mb-4">暂无账户信息</p>
-          <Button type="primary" @click="$router.push('/finance/accounts')">
-            ➕ 添加第一个账户
-          </Button>
-        </div>
-        <div v-else class="space-y-3">
-          <div v-for="account in accounts" :key="account.id"
-               class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-            <div class="flex items-center space-x-3">
-              <span class="text-lg">{{ account.icon }}</span>
-              <span class="font-medium">{{ account.name }}</span>
-            </div>
-            <div class="text-right">
-              <p class="font-semibold" :class="account.balance >= 0 ? 'text-green-600' : 'text-red-600'">
-                {{ formatCurrency(account.balance) }}
-              </p>
-              <p class="text-xs text-gray-500">{{ account.currency }}</p>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-
-    <!-- 快速操作 -->
-    <Card class="mt-6" :title="isEnglish ? '⚡ Quick Actions' : '⚡ 快速操作'">
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <Button type="primary" block size="large" @click="quickAddIncome">
-          <span class="text-lg mr-2">💰</span>
-          {{ isEnglish ? 'Add Income' : '添加收入' }}
-        </Button>
-        <Button block size="large" @click="quickAddExpense">
-          <span class="text-lg mr-2">💸</span>
-          {{ isEnglish ? 'Add Expense' : '添加支出' }}
-        </Button>
-        <Button block size="large" @click="$router.push('/finance/budgets')">
-          <span class="text-lg mr-2">🎯</span>
-          {{ isEnglish ? 'View Budgets' : '查看预算' }}
-        </Button>
-        <Button block size="large" @click="$router.push('/finance/reports')">
-          <span class="text-lg mr-2">📊</span>
-          {{ isEnglish ? 'Reports' : '生成报表' }}
-        </Button>
-      </div>
-    </Card>
-
-    <!-- 快速添加收入模态框 -->
-    <Modal v-model:open="showIncomeModal" :title="isEnglish ? '💰 Quick Add Income' : '💰 快速添加收入'" @ok="submitIncome" width="600px">
-      <Form :model="quickIncomeForm" layout="vertical">
-        <Form.Item :label="isEnglish ? 'Category' : '分类'" required>
-          <Select v-model:value="quickIncomeForm.category" :placeholder="isEnglish ? 'Select category' : '选择分类'" size="large">
-            <Select.Option
-              v-for="category in financeStore.incomeCategories"
-              :key="category.id"
-              :value="category.name"
-            >
-              {{ category.icon }} {{ category.name }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Project Name' : '项目名称'">
-          <Input.TextArea v-model:value="quickIncomeForm.description" :placeholder="isEnglish ? 'Enter project name...' : '请输入项目名称...'" :rows="2" />
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Currency' : '货币类型'" required>
-          <Select v-model:value="selectedIncomeCurrency" disabled size="large">
-            <Select.Option :value="selectedIncomeCurrency">
-              {{ selectedIncomeCurrency }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Amount' : '金额'" required>
-          <InputNumber v-model:value="quickIncomeForm.amount" :precision="2" style="width: 100%" :placeholder="isEnglish ? 'Enter amount' : '请输入金额'" size="large" />
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Account' : '收入账户'" required>
-          <Select v-model:value="quickIncomeForm.accountId" :placeholder="isEnglish ? 'Select account' : '选择账户'" size="large">
-            <Select.Option
-              v-for="account in financeStore.accounts"
-              :key="account.id"
-              :value="account.id"
-            >
-              {{ account.icon }} {{ account.name }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Date' : '日期'" required>
-          <div class="space-y-2">
-            <div class="flex space-x-2 mb-2">
-              <Button size="small" @click="setIncomeDate('today')">今天</Button>
-              <Button size="small" @click="setIncomeDate('yesterday')">昨天</Button>
-              <Button size="small" @click="setIncomeDate('week')">本周</Button>
-              <Button size="small" @click="setIncomeDate('month')">本月</Button>
-            </div>
-            <DatePicker v-model:value="quickIncomeForm.date" style="width: 100%" format="YYYY-MM-DD" />
-          </div>
-        </Form.Item>
-      </Form>
-    </Modal>
-
-    <!-- 快速添加支出模态框 -->
-    <Modal v-model:open="showExpenseModal" :title="isEnglish ? '💸 Quick Add Expense' : '💸 快速添加支出'" @ok="submitExpense" width="600px">
-      <Form :model="quickExpenseForm" layout="vertical">
-        <Form.Item :label="isEnglish ? 'Category' : '分类'" required>
-          <Select v-model:value="quickExpenseForm.category" :placeholder="isEnglish ? 'Select category' : '选择分类'" size="large">
-            <Select.Option
-              v-for="category in financeStore.expenseCategories"
-              :key="category.id"
-              :value="category.name"
-            >
-              {{ category.icon }} {{ category.name }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Project Name' : '项目名称'">
-          <Input.TextArea v-model:value="quickExpenseForm.description" :placeholder="isEnglish ? 'Enter project name...' : '请输入项目名称...'" :rows="2" />
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Currency' : '货币类型'" required>
-          <Select v-model:value="selectedExpenseCurrency" disabled size="large">
-            <Select.Option :value="selectedExpenseCurrency">
-              {{ selectedExpenseCurrency }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Amount' : '金额'" required>
-          <InputNumber v-model:value="quickExpenseForm.amount" :precision="2" style="width: 100%" :placeholder="isEnglish ? 'Enter amount' : '请输入金额'" size="large" />
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Account' : '支出账户'" required>
-          <Select v-model:value="quickExpenseForm.accountId" :placeholder="isEnglish ? 'Select account' : '选择账户'" size="large">
-            <Select.Option
-              v-for="account in financeStore.accounts"
-              :key="account.id"
-              :value="account.id"
-            >
-              {{ account.icon }} {{ account.name }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Date' : '日期'" required>
-          <div class="space-y-2">
-            <div class="flex space-x-2 mb-2">
-              <Button size="small" @click="setExpenseDate('today')">今天</Button>
-              <Button size="small" @click="setExpenseDate('yesterday')">昨天</Button>
-              <Button size="small" @click="setExpenseDate('week')">本周</Button>
-              <Button size="small" @click="setExpenseDate('month')">本月</Button>
-            </div>
-            <DatePicker v-model:value="quickExpenseForm.date" style="width: 100%" format="YYYY-MM-DD" />
-          </div>
-        </Form.Item>
-      </Form>
-    </Modal>
-
-    <!-- 快速添加账户模态框 -->
-    <Modal v-model:open="showAccountModal" :title="isEnglish ? '🏦 Add Account' : '🏦 添加账户'" @ok="submitAccount">
-      <Form :model="quickAccountForm" layout="vertical">
-        <Form.Item :label="isEnglish ? 'Account Name' : '账户名称'" required>
-          <Input v-model:value="quickAccountForm.name" :placeholder="isEnglish ? 'Enter account name' : '请输入账户名称'" />
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Account Type' : '账户类型'">
-          <Select v-model:value="quickAccountForm.type" style="width: 100%">
-            <Select.Option value="savings">{{ isEnglish ? 'Savings Account' : '储蓄账户' }}</Select.Option>
-            <Select.Option value="checking">{{ isEnglish ? 'Checking Account' : '支票账户' }}</Select.Option>
-            <Select.Option value="credit">{{ isEnglish ? 'Credit Card' : '信用卡' }}</Select.Option>
-            <Select.Option value="investment">{{ isEnglish ? 'Investment Account' : '投资账户' }}</Select.Option>
-            <Select.Option value="ewallet">{{ isEnglish ? 'E-Wallet' : '电子钱包' }}</Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item :label="isEnglish ? 'Initial Balance' : '初始余额'">
-          <InputNumber v-model:value="quickAccountForm.initialBalance" :precision="2" style="width: 100%" :placeholder="isEnglish ? 'Enter initial balance' : '请输入初始余额'" />
-        </Form.Item>
-      </Form>
-    </Modal>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
-import { Card, Button, Select, Modal, Form, InputNumber, Input, notification, DatePicker } from 'ant-design-vue';
 import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import {
+  Button,
+  Card,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  notification,
+  Select,
+} from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useFinanceStore } from '#/store/finance';
@@ -384,13 +35,13 @@ const showAccountModal = ref(false);
 // 多语言支持
 const isEnglish = computed(() => currentLanguage.value === 'en-US');
 
-type TrendRangeValue = 'month' | '3month' | '6month' | 'year';
+type TrendRangeValue = '3month' | '6month' | 'month' | 'year';
 
 const trendRangeOptions: Array<{
-  value: TrendRangeValue;
   days: number;
-  labelZh: string;
   labelEn: string;
+  labelZh: string;
+  value: TrendRangeValue;
 }> = [
   { value: 'month', days: 30, labelZh: '本月', labelEn: 'This Month' },
   { value: '3month', days: 90, labelZh: '近3月', labelEn: 'Last 3 Months' },
@@ -400,12 +51,14 @@ const trendRangeOptions: Array<{
 
 const trendRange = ref<TrendRangeValue>('month');
 
-const selectedRangeOption = computed(() =>
-  trendRangeOptions.find((option) => option.value === trendRange.value)!,
+const selectedRangeOption = computed(
+  () => trendRangeOptions.find((option) => option.value === trendRange.value)!,
 );
 
 const selectedRangeLabel = computed(() =>
-  isEnglish.value ? selectedRangeOption.value.labelEn : selectedRangeOption.value.labelZh,
+  isEnglish.value
+    ? selectedRangeOption.value.labelEn
+    : selectedRangeOption.value.labelZh,
 );
 
 const setTrendRange = (value: TrendRangeValue) => {
@@ -418,7 +71,9 @@ const { renderEcharts: renderTrendChart } = useEcharts(trendChartRef);
 const { renderEcharts: renderCategoryChart } = useEcharts(categoryChartRef);
 
 // 从 financeStore 获取数据
-const allTransactions = computed(() => financeStore.transactions.filter(t => !t.isDeleted));
+const allTransactions = computed(() =>
+  financeStore.transactions.filter((t) => !t.isDeleted),
+);
 const accounts = computed(() => financeStore.accounts);
 
 // 快速添加表单
@@ -427,7 +82,7 @@ const quickIncomeForm = ref({
   description: '',
   category: '',
   accountId: null,
-  date: dayjs()
+  date: dayjs(),
 });
 
 const quickExpenseForm = ref({
@@ -435,13 +90,13 @@ const quickExpenseForm = ref({
   description: '',
   category: '',
   accountId: null,
-  date: dayjs()
+  date: dayjs(),
 });
 
 const quickAccountForm = ref({
   name: '',
   type: 'savings',
-  initialBalance: 0
+  initialBalance: 0,
 });
 
 // 选中账户的货币
@@ -456,20 +111,28 @@ const selectedExpenseCurrency = computed(() => {
 });
 
 // 监听账户变化，保存到 localStorage
-watch(() => quickIncomeForm.value.accountId, (newAccountId) => {
-  if (newAccountId) {
-    localStorage.setItem('lastIncomeAccountId', String(newAccountId));
-  }
-});
+watch(
+  () => quickIncomeForm.value.accountId,
+  (newAccountId) => {
+    if (newAccountId) {
+      localStorage.setItem('lastIncomeAccountId', String(newAccountId));
+    }
+  },
+);
 
-watch(() => quickExpenseForm.value.accountId, (newAccountId) => {
-  if (newAccountId) {
-    localStorage.setItem('lastExpenseAccountId', String(newAccountId));
-  }
-});
+watch(
+  () => quickExpenseForm.value.accountId,
+  (newAccountId) => {
+    if (newAccountId) {
+      localStorage.setItem('lastExpenseAccountId', String(newAccountId));
+    }
+  },
+);
 
 const baseCurrencySymbol = computed(() => {
-  const baseCurrency = financeStore.currencies.find((currency) => currency.isBase);
+  const baseCurrency = financeStore.currencies.find(
+    (currency) => currency.isBase,
+  );
   return baseCurrency?.symbol || '¥';
 });
 
@@ -489,7 +152,8 @@ const rangeTransactions = computed(() => {
     .format('YYYY-MM-DD');
   return allTransactions.value.filter(
     (transaction) =>
-      transaction.transactionDate >= startDate && transaction.transactionDate <= endDate,
+      transaction.transactionDate >= startDate &&
+      transaction.transactionDate <= endDate,
   );
 });
 
@@ -515,7 +179,7 @@ const trendChartData = computed(() => {
     }
   }
 
-  const bucketMap = new Map<string, { income: number; expense: number }>();
+  const bucketMap = new Map<string, { expense: number; income: number }>();
   rangeTransactions.value.forEach((transaction) => {
     const bucketKey = dayjs(transaction.transactionDate).format(
       useMonthlyBucket ? 'YYYY-MM' : 'YYYY-MM-DD',
@@ -539,9 +203,9 @@ const trendChartData = computed(() => {
   bucketKeys.forEach((key) => {
     const bucket = bucketMap.get(key) ?? { income: 0, expense: 0 };
     const label = useMonthlyBucket
-      ? english
+      ? (english
         ? dayjs(key).format('MMM')
-        : dayjs(key).format('MM月')
+        : dayjs(key).format('MM月'))
       : dayjs(key).format('MM-DD');
     labels.push(label);
     const income = Number(bucket.income.toFixed(2));
@@ -554,8 +218,12 @@ const trendChartData = computed(() => {
   const totalIncome = incomeSeries.reduce((sum, value) => sum + value, 0);
   const totalExpense = expenseSeries.reduce((sum, value) => sum + value, 0);
   const netIncome = Number((totalIncome - totalExpense).toFixed(2));
-  const incomeCount = rangeTransactions.value.filter((t) => t.type === 'income').length;
-  const expenseCount = rangeTransactions.value.filter((t) => t.type === 'expense').length;
+  const incomeCount = rangeTransactions.value.filter(
+    (t) => t.type === 'income',
+  ).length;
+  const expenseCount = rangeTransactions.value.filter(
+    (t) => t.type === 'expense',
+  ).length;
 
   return {
     labels,
@@ -576,26 +244,39 @@ const trendChartData = computed(() => {
 const rangeIncome = computed(() => trendChartData.value.totalIncome);
 const rangeExpense = computed(() => trendChartData.value.totalExpense);
 const rangeNetIncome = computed(() => trendChartData.value.netIncome);
-const rangeTransactionCount = computed(() => trendChartData.value.totalTransactions);
+const rangeTransactionCount = computed(
+  () => trendChartData.value.totalTransactions,
+);
 const rangeIncomeCount = computed(() => trendChartData.value.incomeCount);
 const rangeExpenseCount = computed(() => trendChartData.value.expenseCount);
 
 const rangeTotalAmount = computed(() => rangeIncome.value + rangeExpense.value);
 const rangeIncomePercentage = computed(() => {
   if (rangeTotalAmount.value === 0) return 0;
-  return Math.min(100, Math.round((rangeIncome.value / rangeTotalAmount.value) * 100));
+  return Math.min(
+    100,
+    Math.round((rangeIncome.value / rangeTotalAmount.value) * 100),
+  );
 });
 const rangeExpensePercentage = computed(() => {
   if (rangeTotalAmount.value === 0) return 0;
-  return Math.min(100, Math.round((rangeExpense.value / rangeTotalAmount.value) * 100));
+  return Math.min(
+    100,
+    Math.round((rangeExpense.value / rangeTotalAmount.value) * 100),
+  );
 });
 
 const expenseByCategory = computed(() => {
-  const expenseTransactions = rangeTransactions.value.filter((t) => t.type === 'expense');
+  const expenseTransactions = rangeTransactions.value.filter(
+    (t) => t.type === 'expense',
+  );
   if (expenseTransactions.length === 0) return [];
 
   const english = isEnglish.value;
-  const categoryMap = new Map<number, { categoryId: number; categoryName: string; amount: number; count: number }>();
+  const categoryMap = new Map<
+    number,
+    { amount: number; categoryId: number; categoryName: string; count: number }
+  >();
 
   expenseTransactions.forEach((transaction) => {
     const categoryId = transaction.categoryId ?? 0;
@@ -603,7 +284,8 @@ const expenseByCategory = computed(() => {
       categoryMap.set(categoryId, {
         categoryId,
         categoryName:
-          financeStore.getCategoryById(categoryId)?.name || (english ? 'Uncategorized' : '未分类'),
+          financeStore.getCategoryById(categoryId)?.name ||
+          (english ? 'Uncategorized' : '未分类'),
         amount: 0,
         count: 0,
       });
@@ -613,10 +295,13 @@ const expenseByCategory = computed(() => {
     bucket.count += 1;
   });
 
-  return Array.from(categoryMap.values())
+  return [...categoryMap.values()]
     .map((item) => {
       const amount = Number(item.amount.toFixed(2));
-      const percentage = rangeExpense.value === 0 ? 0 : Math.round((amount / rangeExpense.value) * 100);
+      const percentage =
+        rangeExpense.value === 0
+          ? 0
+          : Math.round((amount / rangeExpense.value) * 100);
       return {
         ...item,
         amount,
@@ -673,7 +358,10 @@ watch(
           }
           const header = items[0]?.axisValueLabel ?? '';
           const rows = items
-            .map((item) => `${item.marker}${item.seriesName}: ${formatCurrency(Number(item.data ?? 0))}`)
+            .map(
+              (item) =>
+                `${item.marker}${item.seriesName}: ${formatCurrency(Number(item.data ?? 0))}`,
+            )
             .join('<br />');
           return `${header}<br />${rows}`;
         },
@@ -772,13 +460,13 @@ watch(
 // 计算总收入、总支出（所有交易）
 const totalIncome = computed(() => {
   return allTransactions.value
-    .filter(t => t.type === 'income')
+    .filter((t) => t.type === 'income')
     .reduce((sum, t) => sum + t.amountInBase, 0);
 });
 
 const totalExpense = computed(() => {
   return allTransactions.value
-    .filter(t => t.type === 'expense')
+    .filter((t) => t.type === 'expense')
     .reduce((sum, t) => sum + t.amountInBase, 0);
 });
 
@@ -794,7 +482,7 @@ const keyMetrics = computed(() => [
     trend: 0,
     color: 'text-green-600',
     iconEmoji: '📈',
-    iconBg: 'bg-green-500'
+    iconBg: 'bg-green-500',
   },
   {
     title: isEnglish.value ? 'Total Expense' : '总支出',
@@ -802,7 +490,7 @@ const keyMetrics = computed(() => [
     trend: 0,
     color: 'text-red-600',
     iconEmoji: '📉',
-    iconBg: 'bg-red-500'
+    iconBg: 'bg-red-500',
   },
   {
     title: isEnglish.value ? 'Net Income' : '净收入',
@@ -810,7 +498,7 @@ const keyMetrics = computed(() => [
     trend: 0,
     color: totalNetIncome.value >= 0 ? 'text-purple-600' : 'text-red-600',
     iconEmoji: '💎',
-    iconBg: totalNetIncome.value >= 0 ? 'bg-purple-500' : 'bg-red-500'
+    iconBg: totalNetIncome.value >= 0 ? 'bg-purple-500' : 'bg-red-500',
   },
   {
     title: isEnglish.value ? 'Transactions' : '交易笔数',
@@ -818,22 +506,26 @@ const keyMetrics = computed(() => [
     trend: 0,
     color: 'text-blue-600',
     iconEmoji: '📊',
-    iconBg: 'bg-blue-500'
-  }
+    iconBg: 'bg-blue-500',
+  },
 ]);
 
 // 最近交易（最多显示5条）
 const recentTransactions = computed(() => {
   return allTransactions.value
-    .sort((a, b) => new Date(b.transactionDate).getTime() - new Date(a.transactionDate).getTime())
+    .sort(
+      (a, b) =>
+        new Date(b.transactionDate).getTime() -
+        new Date(a.transactionDate).getTime(),
+    )
     .slice(0, 5)
-    .map(t => ({
+    .map((t) => ({
       id: t.id,
       emoji: t.type === 'income' ? '📈' : '📉',
       description: t.description || '无描述',
       date: t.transactionDate,
       category: financeStore.getCategoryById(t.categoryId)?.name || '未分类',
-      amount: t.type === 'income' ? t.amountInBase : -t.amountInBase
+      amount: t.type === 'income' ? t.amountInBase : -t.amountInBase,
     }));
 });
 
@@ -843,14 +535,15 @@ const changeLanguage = (lang: string) => {
   // 实际应用中这里应该调用Vben的语言切换API
   notification.success({
     message: lang === 'en-US' ? 'Language Changed' : '语言已切换',
-    description: lang === 'en-US' ? 'Language switched to English' : '语言已切换为中文'
+    description:
+      lang === 'en-US' ? 'Language switched to English' : '语言已切换为中文',
   });
 };
 
 const toggleTheme = () => {
   isDark.value = !isDark.value;
   console.log('切换主题到:', isDark.value ? 'dark' : 'light');
-  
+
   // 实际切换页面主题
   const html = document.documentElement;
   if (isDark.value) {
@@ -858,10 +551,12 @@ const toggleTheme = () => {
   } else {
     html.classList.remove('dark');
   }
-  
+
   notification.info({
     message: isEnglish.value ? 'Theme Switched' : '主题已切换',
-    description: isEnglish.value ? `Switched to ${isDark.value ? 'Dark' : 'Light'} theme` : `已切换到${isDark.value ? '深色' : '浅色'}主题`
+    description: isEnglish.value
+      ? `Switched to ${isDark.value ? 'Dark' : 'Light'} theme`
+      : `已切换到${isDark.value ? '深色' : '浅色'}主题`,
   });
 };
 
@@ -869,15 +564,17 @@ const refreshData = async () => {
   refreshing.value = true;
   try {
     // 模拟数据刷新
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    await new Promise((resolve) => setTimeout(resolve, 1000));
     notification.success({
       message: isEnglish.value ? 'Data Refreshed' : '数据已刷新',
-      description: isEnglish.value ? 'All data has been updated' : '所有数据已更新'
+      description: isEnglish.value
+        ? 'All data has been updated'
+        : '所有数据已更新',
     });
-  } catch (error) {
+  } catch {
     notification.error({
       message: isEnglish.value ? 'Refresh Failed' : '刷新失败',
-      description: isEnglish.value ? 'Failed to refresh data' : '数据刷新失败'
+      description: isEnglish.value ? 'Failed to refresh data' : '数据刷新失败',
     });
   } finally {
     refreshing.value = false;
@@ -887,14 +584,16 @@ const refreshData = async () => {
 const quickAddIncome = () => {
   // 读取上次选择的账户
   const lastAccountId = localStorage.getItem('lastIncomeAccountId');
-  const accountId = lastAccountId ? Number(lastAccountId) : accounts.value[0]?.id;
+  const accountId = lastAccountId
+    ? Number(lastAccountId)
+    : accounts.value[0]?.id;
 
   quickIncomeForm.value = {
     amount: null,
     description: '',
     category: '',
     accountId: accountId || null,
-    date: dayjs()
+    date: dayjs(),
   };
   showIncomeModal.value = true;
 };
@@ -902,14 +601,16 @@ const quickAddIncome = () => {
 const quickAddExpense = () => {
   // 读取上次选择的账户
   const lastAccountId = localStorage.getItem('lastExpenseAccountId');
-  const accountId = lastAccountId ? Number(lastAccountId) : accounts.value[0]?.id;
+  const accountId = lastAccountId
+    ? Number(lastAccountId)
+    : accounts.value[0]?.id;
 
   quickExpenseForm.value = {
     amount: null,
     description: '',
     category: '',
     accountId: accountId || null,
-    date: dayjs()
+    date: dayjs(),
   };
   showExpenseModal.value = true;
 };
@@ -917,36 +618,44 @@ const quickAddExpense = () => {
 // 日期快捷方式 - 收入
 const setIncomeDate = (type: string) => {
   switch (type) {
-    case 'today':
-      quickIncomeForm.value.date = dayjs();
-      break;
-    case 'yesterday':
-      quickIncomeForm.value.date = dayjs().subtract(1, 'day');
-      break;
-    case 'week':
-      quickIncomeForm.value.date = dayjs().startOf('week');
-      break;
-    case 'month':
+    case 'month': {
       quickIncomeForm.value.date = dayjs().startOf('month');
       break;
+    }
+    case 'today': {
+      quickIncomeForm.value.date = dayjs();
+      break;
+    }
+    case 'week': {
+      quickIncomeForm.value.date = dayjs().startOf('week');
+      break;
+    }
+    case 'yesterday': {
+      quickIncomeForm.value.date = dayjs().subtract(1, 'day');
+      break;
+    }
   }
 };
 
 // 日期快捷方式 - 支出
 const setExpenseDate = (type: string) => {
   switch (type) {
-    case 'today':
-      quickExpenseForm.value.date = dayjs();
-      break;
-    case 'yesterday':
-      quickExpenseForm.value.date = dayjs().subtract(1, 'day');
-      break;
-    case 'week':
-      quickExpenseForm.value.date = dayjs().startOf('week');
-      break;
-    case 'month':
+    case 'month': {
       quickExpenseForm.value.date = dayjs().startOf('month');
       break;
+    }
+    case 'today': {
+      quickExpenseForm.value.date = dayjs();
+      break;
+    }
+    case 'week': {
+      quickExpenseForm.value.date = dayjs().startOf('week');
+      break;
+    }
+    case 'yesterday': {
+      quickExpenseForm.value.date = dayjs().subtract(1, 'day');
+      break;
+    }
   }
 };
 
@@ -956,26 +665,34 @@ const addAccount = () => {
 
 const submitIncome = async () => {
   try {
-    if (!quickIncomeForm.value.amount || !quickIncomeForm.value.category || !quickIncomeForm.value.accountId) {
+    if (
+      !quickIncomeForm.value.amount ||
+      !quickIncomeForm.value.category ||
+      !quickIncomeForm.value.accountId
+    ) {
       notification.error({
         message: '添加失败',
-        description: '请填写完整信息'
+        description: '请填写完整信息',
       });
       return;
     }
 
     // 获取选中的账户
-    const account = financeStore.getAccountById(quickIncomeForm.value.accountId);
+    const account = financeStore.getAccountById(
+      quickIncomeForm.value.accountId,
+    );
     if (!account) {
       notification.error({
         message: '添加失败',
-        description: '请选择有效的账户'
+        description: '请选择有效的账户',
       });
       return;
     }
 
     // 获取对应的收入分类
-    const category = financeStore.incomeCategories.find(c => c.name === quickIncomeForm.value.category);
+    const category = financeStore.incomeCategories.find(
+      (c) => c.name === quickIncomeForm.value.category,
+    );
 
     await financeStore.createTransaction({
       type: 'income',
@@ -984,45 +701,53 @@ const submitIncome = async () => {
       categoryId: category?.id,
       accountId: account.id,
       transactionDate: quickIncomeForm.value.date.format('YYYY-MM-DD'),
-      description: quickIncomeForm.value.description || '快速添加收入'
+      description: quickIncomeForm.value.description || '快速添加收入',
     });
 
     notification.success({
       message: '收入已添加',
-      description: '收入记录已保存'
+      description: '收入记录已保存',
     });
     showIncomeModal.value = false;
   } catch (error) {
     console.error('添加收入失败:', error);
     notification.error({
       message: '添加失败',
-      description: '添加收入时出错，请稍后重试'
+      description: '添加收入时出错，请稍后重试',
     });
   }
 };
 
 const submitExpense = async () => {
   try {
-    if (!quickExpenseForm.value.amount || !quickExpenseForm.value.category || !quickExpenseForm.value.accountId) {
+    if (
+      !quickExpenseForm.value.amount ||
+      !quickExpenseForm.value.category ||
+      !quickExpenseForm.value.accountId
+    ) {
       notification.error({
         message: '添加失败',
-        description: '请填写完整信息'
+        description: '请填写完整信息',
       });
       return;
     }
 
     // 获取选中的账户
-    const account = financeStore.getAccountById(quickExpenseForm.value.accountId);
+    const account = financeStore.getAccountById(
+      quickExpenseForm.value.accountId,
+    );
     if (!account) {
       notification.error({
         message: '添加失败',
-        description: '请选择有效的账户'
+        description: '请选择有效的账户',
       });
       return;
     }
 
     // 获取对应的支出分类
-    const category = financeStore.expenseCategories.find(c => c.name === quickExpenseForm.value.category);
+    const category = financeStore.expenseCategories.find(
+      (c) => c.name === quickExpenseForm.value.category,
+    );
 
     await financeStore.createTransaction({
       type: 'expense',
@@ -1031,19 +756,19 @@ const submitExpense = async () => {
       categoryId: category?.id,
       accountId: account.id,
       transactionDate: quickExpenseForm.value.date.format('YYYY-MM-DD'),
-      description: quickExpenseForm.value.description || '快速添加支出'
+      description: quickExpenseForm.value.description || '快速添加支出',
     });
 
     notification.success({
       message: '支出已添加',
-      description: '支出记录已保存'
+      description: '支出记录已保存',
     });
     showExpenseModal.value = false;
   } catch (error) {
     console.error('添加支出失败:', error);
     notification.error({
       message: '添加失败',
-      description: '添加支出时出错，请稍后重试'
+      description: '添加支出时出错，请稍后重试',
     });
   }
 };
@@ -1052,13 +777,14 @@ const submitAccount = () => {
   console.log('添加账户:', quickAccountForm.value);
   notification.success({
     message: isEnglish.value ? 'Account Added' : '账户已添加',
-    description: isEnglish.value ? 'New account has been created' : '新账户已创建'
+    description: isEnglish.value
+      ? 'New account has been created'
+      : '新账户已创建',
   });
   showAccountModal.value = false;
   resetAccountForm();
 };
 
-
 const resetAccountForm = () => {
   quickAccountForm.value = { name: '', type: 'savings', initialBalance: 0 };
 };
@@ -1073,6 +799,580 @@ onMounted(async () => {
 });
 </script>
 
+<template>
+  <div class="p-6">
+    <div class="mb-6">
+      <h1 class="mb-2 text-3xl font-bold text-gray-900 dark:text-gray-100">
+        {{ isEnglish ? 'Financial Dashboard' : '📊 财务仪表板' }}
+      </h1>
+      <p class="text-gray-600">
+        {{
+          isEnglish
+            ? 'Comprehensive financial data overview and real-time monitoring'
+            : '智能财务数据概览与实时监控'
+        }}
+      </p>
+    </div>
+
+    <!-- 核心指标卡片 -->
+    <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <Card
+        v-for="metric in keyMetrics"
+        :key="metric.title"
+        class="transition-shadow hover:shadow-lg"
+      >
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="mb-1 text-sm text-gray-500">{{ metric.title }}</p>
+            <p class="text-2xl font-bold" :class="metric.color">
+              {{ metric.value }}
+            </p>
+            <p
+              class="text-xs"
+              :class="metric.trend > 0 ? 'text-green-500' : 'text-red-500'"
+            >
+              {{ metric.trend > 0 ? '↗️' : '↘️' }} {{ Math.abs(metric.trend) }}%
+            </p>
+          </div>
+          <div
+            :class="metric.iconBg"
+            class="flex h-12 w-12 items-center justify-center rounded-lg"
+          >
+            <span class="text-2xl text-white">{{ metric.iconEmoji }}</span>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <!-- 收支趋势图 -->
+      <Card class="lg:col-span-2" title="📈 收支趋势分析">
+        <div class="space-y-6">
+          <div class="flex flex-wrap items-center gap-2">
+            <Button
+              v-for="option in trendRangeOptions"
+              :key="option.value"
+              :type="trendRange === option.value ? 'primary' : 'default'"
+              size="small"
+              @click="setTrendRange(option.value)"
+            >
+              {{ isEnglish ? option.labelEn : option.labelZh }}
+            </Button>
+          </div>
+
+          <div
+            v-if="trendChartData.hasData"
+            class="rounded-lg bg-gray-50 p-2 dark:bg-gray-800"
+          >
+            <EchartsUI ref="trendChartRef" height="320px" />
+          </div>
+          <div
+            v-else
+            class="flex h-80 flex-col items-center justify-center rounded-lg bg-gray-50 text-gray-500 dark:bg-gray-800"
+          >
+            <div class="mb-2 text-4xl">📭</div>
+            <p class="font-medium">
+              {{
+                isEnglish
+                  ? 'No transactions in the selected range'
+                  : '选定时间范围内暂无交易数据'
+              }}
+            </p>
+            <p class="text-sm text-gray-400">
+              {{
+                isEnglish
+                  ? 'Record transactions or adjust the range to view trends'
+                  : '新增交易或更换时间范围后可查看趋势'
+              }}
+            </p>
+          </div>
+
+          <div class="space-y-6">
+            <div>
+              <div class="mb-2 flex items-center justify-between">
+                <span class="text-sm font-medium text-gray-700">
+                  📈
+                  {{
+                    isEnglish
+                      ? `Income (${selectedRangeLabel})`
+                      : `${selectedRangeLabel}收入`
+                  }}
+                </span>
+                <span class="text-sm font-bold text-green-600">{{
+                  formatCurrency(rangeIncome)
+                }}</span>
+              </div>
+              <div
+                class="h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+              >
+                <div
+                  class="h-3 rounded-full bg-gradient-to-r from-green-400 to-green-600 transition-all duration-500"
+                  :style="{ width: `${rangeIncomePercentage}%` }"
+                ></div>
+              </div>
+            </div>
+
+            <div>
+              <div class="mb-2 flex items-center justify-between">
+                <span class="text-sm font-medium text-gray-700">
+                  📉
+                  {{
+                    isEnglish
+                      ? `Expense (${selectedRangeLabel})`
+                      : `${selectedRangeLabel}支出`
+                  }}
+                </span>
+                <span class="text-sm font-bold text-red-600">{{
+                  formatCurrency(rangeExpense)
+                }}</span>
+              </div>
+              <div
+                class="h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+              >
+                <div
+                  class="h-3 rounded-full bg-gradient-to-r from-red-400 to-red-600 transition-all duration-500"
+                  :style="{ width: `${rangeExpensePercentage}%` }"
+                ></div>
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between border-t pt-4">
+              <span class="text-sm font-medium text-gray-700">
+                💎
+                {{
+                  isEnglish
+                    ? `Net Income (${selectedRangeLabel})`
+                    : `${selectedRangeLabel}净收入`
+                }}
+              </span>
+              <span
+                class="text-lg font-bold"
+                :class="
+                  rangeNetIncome >= 0 ? 'text-purple-600' : 'text-red-600'
+                "
+              >
+                {{ formatCurrency(rangeNetIncome) }}
+              </span>
+            </div>
+
+            <div class="grid grid-cols-3 gap-4 border-t pt-4">
+              <div class="text-center">
+                <div class="text-2xl font-bold text-blue-600">
+                  {{ rangeTransactionCount }}
+                </div>
+                <div class="text-xs text-gray-500">
+                  {{ isEnglish ? 'Total Records' : '总笔数' }}
+                </div>
+              </div>
+              <div class="text-center">
+                <div class="text-2xl font-bold text-green-600">
+                  {{ rangeIncomeCount }}
+                </div>
+                <div class="text-xs text-gray-500">
+                  {{ isEnglish ? 'Income Records' : '收入笔数' }}
+                </div>
+              </div>
+              <div class="text-center">
+                <div class="text-2xl font-bold text-red-600">
+                  {{ rangeExpenseCount }}
+                </div>
+                <div class="text-xs text-gray-500">
+                  {{ isEnglish ? 'Expense Records' : '支出笔数' }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      <!-- 支出分类分析 -->
+      <Card title="🥧 支出分类分布">
+        <div class="space-y-4">
+          <div
+            v-if="categoryChartData.hasData"
+            class="rounded-lg bg-gray-50 p-2 dark:bg-gray-800"
+          >
+            <EchartsUI ref="categoryChartRef" height="260px" />
+          </div>
+          <div
+            v-else
+            class="flex h-64 flex-col items-center justify-center rounded-lg bg-gray-50 text-gray-500 dark:bg-gray-800"
+          >
+            <div class="mb-2 text-4xl">🥱</div>
+            <p class="font-medium">
+              {{
+                isEnglish
+                  ? 'No expense records for the selected range'
+                  : '选定范围内暂无支出记录'
+              }}
+            </p>
+            <p class="text-sm text-gray-400">
+              {{
+                isEnglish
+                  ? 'Record expenses to view category breakdown'
+                  : '新增支出后即可查看分类占比'
+              }}
+            </p>
+          </div>
+
+          <div
+            v-if="categoryChartData.hasData"
+            class="max-h-72 space-y-3 overflow-y-auto pr-1"
+          >
+            <div
+              v-for="item in expenseByCategory"
+              :key="item.categoryId"
+              class="rounded-lg border border-gray-200 bg-white p-3 transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
+            >
+              <div class="mb-2 flex items-center justify-between">
+                <span class="font-medium">{{ item.categoryName }}</span>
+                <span class="text-sm font-bold text-red-600">{{
+                  formatCurrency(item.amount)
+                }}</span>
+              </div>
+              <div class="flex items-center space-x-2">
+                <div
+                  class="h-2 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+                >
+                  <div
+                    class="h-2 rounded-full bg-gradient-to-r from-red-400 to-red-600 transition-all duration-500"
+                    :style="{ width: `${item.percentage}%` }"
+                  ></div>
+                </div>
+                <span class="w-12 text-right text-xs text-gray-500">{{ item.percentage }}%</span>
+              </div>
+              <div class="mt-1 text-xs text-gray-500">
+                {{ item.count }} {{ isEnglish ? 'records' : '笔交易' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 最近交易和账户余额 -->
+    <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <!-- 最近交易 -->
+      <Card title="🕒 最近交易记录">
+        <template #extra>
+          <Button type="link" @click="$router.push('/finance/transactions')">
+            查看全部
+          </Button>
+        </template>
+        <div v-if="recentTransactions.length === 0" class="py-8 text-center">
+          <div class="mb-4 text-6xl">📝</div>
+          <p class="mb-4 text-gray-500">暂无交易记录</p>
+          <Button type="primary" @click="$router.push('/finance/transactions')">
+            ➕ 添加第一笔交易
+          </Button>
+        </div>
+        <div v-else class="space-y-3">
+          <div
+            v-for="transaction in recentTransactions"
+            :key="transaction.id"
+            class="flex items-center justify-between rounded-lg bg-gray-50 p-3"
+          >
+            <div class="flex items-center space-x-3">
+              <span class="text-lg">{{ transaction.emoji }}</span>
+              <div>
+                <p class="font-medium">{{ transaction.description }}</p>
+                <p class="text-sm text-gray-500">
+                  {{ transaction.date }} · {{ transaction.category }}
+                </p>
+              </div>
+            </div>
+            <span
+              class="font-semibold"
+              :class="
+                transaction.amount > 0 ? 'text-green-600' : 'text-red-600'
+              "
+            >
+              {{ transaction.amount > 0 ? '+' : ''
+              }}{{ formatCurrency(transaction.amount) }}
+            </span>
+          </div>
+        </div>
+      </Card>
+
+      <!-- 账户余额 -->
+      <Card title="🏦 账户余额">
+        <template #extra>
+          <Button type="link" @click="$router.push('/finance/accounts')">
+            管理账户
+          </Button>
+        </template>
+        <div v-if="accounts.length === 0" class="py-8 text-center">
+          <div class="mb-4 text-6xl">🏦</div>
+          <p class="mb-4 text-gray-500">暂无账户信息</p>
+          <Button type="primary" @click="$router.push('/finance/accounts')">
+            ➕ 添加第一个账户
+          </Button>
+        </div>
+        <div v-else class="space-y-3">
+          <div
+            v-for="account in accounts"
+            :key="account.id"
+            class="flex items-center justify-between rounded-lg bg-gray-50 p-3"
+          >
+            <div class="flex items-center space-x-3">
+              <span class="text-lg">{{ account.icon }}</span>
+              <span class="font-medium">{{ account.name }}</span>
+            </div>
+            <div class="text-right">
+              <p
+                class="font-semibold"
+                :class="
+                  account.balance >= 0 ? 'text-green-600' : 'text-red-600'
+                "
+              >
+                {{ formatCurrency(account.balance) }}
+              </p>
+              <p class="text-xs text-gray-500">{{ account.currency }}</p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 快速操作 -->
+    <Card class="mt-6" :title="isEnglish ? '⚡ Quick Actions' : '⚡ 快速操作'">
+      <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+        <Button type="primary" block size="large" @click="quickAddIncome">
+          <span class="mr-2 text-lg">💰</span>
+          {{ isEnglish ? 'Add Income' : '添加收入' }}
+        </Button>
+        <Button block size="large" @click="quickAddExpense">
+          <span class="mr-2 text-lg">💸</span>
+          {{ isEnglish ? 'Add Expense' : '添加支出' }}
+        </Button>
+        <Button block size="large" @click="$router.push('/finance/budgets')">
+          <span class="mr-2 text-lg">🎯</span>
+          {{ isEnglish ? 'View Budgets' : '查看预算' }}
+        </Button>
+        <Button block size="large" @click="$router.push('/finance/reports')">
+          <span class="mr-2 text-lg">📊</span>
+          {{ isEnglish ? 'Reports' : '生成报表' }}
+        </Button>
+      </div>
+    </Card>
+
+    <!-- 快速添加收入模态框 -->
+    <Modal
+      v-model:open="showIncomeModal"
+      :title="isEnglish ? '💰 Quick Add Income' : '💰 快速添加收入'"
+      @ok="submitIncome"
+      width="600px"
+    >
+      <Form :model="quickIncomeForm" layout="vertical">
+        <Form.Item :label="isEnglish ? 'Category' : '分类'" required>
+          <Select
+            v-model:value="quickIncomeForm.category"
+            :placeholder="isEnglish ? 'Select category' : '选择分类'"
+            size="large"
+          >
+            <Select.Option
+              v-for="category in financeStore.incomeCategories"
+              :key="category.id"
+              :value="category.name"
+            >
+              {{ category.icon }} {{ category.name }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Project Name' : '项目名称'">
+          <Input.TextArea
+            v-model:value="quickIncomeForm.description"
+            :placeholder="
+              isEnglish ? 'Enter project name...' : '请输入项目名称...'
+            "
+            :rows="2"
+          />
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Currency' : '货币类型'" required>
+          <Select v-model:value="selectedIncomeCurrency" disabled size="large">
+            <Select.Option :value="selectedIncomeCurrency">
+              {{ selectedIncomeCurrency }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Amount' : '金额'" required>
+          <InputNumber
+            v-model:value="quickIncomeForm.amount"
+            :precision="2"
+            style="width: 100%"
+            :placeholder="isEnglish ? 'Enter amount' : '请输入金额'"
+            size="large"
+          />
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Account' : '收入账户'" required>
+          <Select
+            v-model:value="quickIncomeForm.accountId"
+            :placeholder="isEnglish ? 'Select account' : '选择账户'"
+            size="large"
+          >
+            <Select.Option
+              v-for="account in financeStore.accounts"
+              :key="account.id"
+              :value="account.id"
+            >
+              {{ account.icon }} {{ account.name }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Date' : '日期'" required>
+          <div class="space-y-2">
+            <div class="mb-2 flex space-x-2">
+              <Button size="small" @click="setIncomeDate('today')">今天</Button>
+              <Button size="small" @click="setIncomeDate('yesterday')">
+                昨天
+              </Button>
+              <Button size="small" @click="setIncomeDate('week')">本周</Button>
+              <Button size="small" @click="setIncomeDate('month')">本月</Button>
+            </div>
+            <DatePicker
+              v-model:value="quickIncomeForm.date"
+              style="width: 100%"
+              format="YYYY-MM-DD"
+            />
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
+
+    <!-- 快速添加支出模态框 -->
+    <Modal
+      v-model:open="showExpenseModal"
+      :title="isEnglish ? '💸 Quick Add Expense' : '💸 快速添加支出'"
+      @ok="submitExpense"
+      width="600px"
+    >
+      <Form :model="quickExpenseForm" layout="vertical">
+        <Form.Item :label="isEnglish ? 'Category' : '分类'" required>
+          <Select
+            v-model:value="quickExpenseForm.category"
+            :placeholder="isEnglish ? 'Select category' : '选择分类'"
+            size="large"
+          >
+            <Select.Option
+              v-for="category in financeStore.expenseCategories"
+              :key="category.id"
+              :value="category.name"
+            >
+              {{ category.icon }} {{ category.name }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Project Name' : '项目名称'">
+          <Input.TextArea
+            v-model:value="quickExpenseForm.description"
+            :placeholder="
+              isEnglish ? 'Enter project name...' : '请输入项目名称...'
+            "
+            :rows="2"
+          />
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Currency' : '货币类型'" required>
+          <Select v-model:value="selectedExpenseCurrency" disabled size="large">
+            <Select.Option :value="selectedExpenseCurrency">
+              {{ selectedExpenseCurrency }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Amount' : '金额'" required>
+          <InputNumber
+            v-model:value="quickExpenseForm.amount"
+            :precision="2"
+            style="width: 100%"
+            :placeholder="isEnglish ? 'Enter amount' : '请输入金额'"
+            size="large"
+          />
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Account' : '支出账户'" required>
+          <Select
+            v-model:value="quickExpenseForm.accountId"
+            :placeholder="isEnglish ? 'Select account' : '选择账户'"
+            size="large"
+          >
+            <Select.Option
+              v-for="account in financeStore.accounts"
+              :key="account.id"
+              :value="account.id"
+            >
+              {{ account.icon }} {{ account.name }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Date' : '日期'" required>
+          <div class="space-y-2">
+            <div class="mb-2 flex space-x-2">
+              <Button size="small" @click="setExpenseDate('today')">
+                今天
+              </Button>
+              <Button size="small" @click="setExpenseDate('yesterday')">
+                昨天
+              </Button>
+              <Button size="small" @click="setExpenseDate('week')">本周</Button>
+              <Button size="small" @click="setExpenseDate('month')">
+                本月
+              </Button>
+            </div>
+            <DatePicker
+              v-model:value="quickExpenseForm.date"
+              style="width: 100%"
+              format="YYYY-MM-DD"
+            />
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
+
+    <!-- 快速添加账户模态框 -->
+    <Modal
+      v-model:open="showAccountModal"
+      :title="isEnglish ? '🏦 Add Account' : '🏦 添加账户'"
+      @ok="submitAccount"
+    >
+      <Form :model="quickAccountForm" layout="vertical">
+        <Form.Item :label="isEnglish ? 'Account Name' : '账户名称'" required>
+          <Input
+            v-model:value="quickAccountForm.name"
+            :placeholder="isEnglish ? 'Enter account name' : '请输入账户名称'"
+          />
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Account Type' : '账户类型'">
+          <Select v-model:value="quickAccountForm.type" style="width: 100%">
+            <Select.Option value="savings">
+              {{ isEnglish ? 'Savings Account' : '储蓄账户' }}
+            </Select.Option>
+            <Select.Option value="checking">
+              {{ isEnglish ? 'Checking Account' : '支票账户' }}
+            </Select.Option>
+            <Select.Option value="credit">
+              {{ isEnglish ? 'Credit Card' : '信用卡' }}
+            </Select.Option>
+            <Select.Option value="investment">
+              {{ isEnglish ? 'Investment Account' : '投资账户' }}
+            </Select.Option>
+            <Select.Option value="ewallet">
+              {{ isEnglish ? 'E-Wallet' : '电子钱包' }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item :label="isEnglish ? 'Initial Balance' : '初始余额'">
+          <InputNumber
+            v-model:value="quickAccountForm.initialBalance"
+            :precision="2"
+            style="width: 100%"
+            :placeholder="
+              isEnglish ? 'Enter initial balance' : '请输入初始余额'
+            "
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
 <style scoped>
 .grid {
   display: grid;
diff --git a/apps/web-antd/src/views/finance/reports/index.vue b/apps/web-antd/src/views/finance/reports/index.vue
index 3437768b..623c8e67 100644
--- a/apps/web-antd/src/views/finance/reports/index.vue
+++ b/apps/web-antd/src/views/finance/reports/index.vue
@@ -1,242 +1,18 @@
-<template>
-  <div class="p-6">
-    <div class="mb-6 flex items-center justify-between">
-      <div>
-        <h1 class="text-3xl font-bold text-gray-900 mb-2">📈 财务报表</h1>
-        <p class="text-gray-600">全面的财务数据分析与报表生成</p>
-      </div>
-      <div class="flex space-x-2">
-        <Button @click="showImportModal = true">
-          📤 导入报表
-        </Button>
-        <Button @click="showExportModal = true" type="primary">
-          📥 导出报表
-        </Button>
-        <Button @click="printReport">
-          🖨️ 打印报表
-        </Button>
-      </div>
-    </div>
-
-    <!-- 时间筛选 -->
-    <Card class="mb-6">
-      <div class="flex items-center space-x-4">
-        <span class="font-medium">报表周期：</span>
-        <Radio.Group v-model:value="period" button-style="solid">
-          <Radio.Button value="month">本月</Radio.Button>
-          <Radio.Button value="quarter">本季度</Radio.Button>
-          <Radio.Button value="year">本年</Radio.Button>
-          <Radio.Button value="all">全部</Radio.Button>
-        </Radio.Group>
-        <RangePicker v-if="period === 'custom'" v-model:value="customRange" />
-      </div>
-    </Card>
-
-    <!-- 核心指标汇总 -->
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="text-3xl mb-2">💰</div>
-        <p class="text-sm text-gray-500">总收入</p>
-        <p class="text-2xl font-bold text-green-600">
-          ¥{{ periodIncome.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-        </p>
-      </Card>
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="text-3xl mb-2">💸</div>
-        <p class="text-sm text-gray-500">总支出</p>
-        <p class="text-2xl font-bold text-red-600">
-          ¥{{ periodExpense.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-        </p>
-      </Card>
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="text-3xl mb-2">💎</div>
-        <p class="text-sm text-gray-500">净收入</p>
-        <p class="text-2xl font-bold" :class="periodNet >= 0 ? 'text-purple-600' : 'text-red-600'">
-          {{ periodNet >= 0 ? '+' : '' }}¥{{ periodNet.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-        </p>
-      </Card>
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="text-3xl mb-2">📊</div>
-        <p class="text-sm text-gray-500">交易笔数</p>
-        <p class="text-2xl font-bold text-blue-600">{{ periodTransactions.length }}</p>
-      </Card>
-    </div>
-
-    <!-- 详细报表 -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-      <!-- 收入分析 -->
-      <Card title="📈 收入分析">
-        <div class="space-y-3">
-          <div v-if="incomeByCategory.length === 0" class="text-center py-8">
-            <p class="text-gray-500">暂无收入数据</p>
-          </div>
-          <div v-else v-for="item in incomeByCategory" :key="item.categoryId" class="p-3 bg-gray-50 rounded-lg">
-            <div class="flex justify-between items-center mb-2">
-              <span class="font-medium">{{ item.categoryName }}</span>
-              <span class="text-sm font-bold text-green-600">
-                ¥{{ item.amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-              </span>
-            </div>
-            <div class="flex items-center space-x-2">
-              <div class="flex-1 bg-gray-200 rounded-full h-2">
-                <div
-                  class="bg-gradient-to-r from-green-400 to-green-600 h-2 rounded-full transition-all duration-500"
-                  :style="{ width: item.percentage + '%' }"
-                ></div>
-              </div>
-              <span class="text-xs text-gray-500 w-12 text-right">{{ item.percentage }}%</span>
-            </div>
-            <p class="text-xs text-gray-500 mt-1">{{ item.count }} 笔 · 平均 ¥{{ (item.amount / item.count).toFixed(2) }}</p>
-          </div>
-        </div>
-      </Card>
-
-      <!-- 支出分析 -->
-      <Card title="📉 支出分析">
-        <div class="space-y-3">
-          <div v-if="expenseByCategory.length === 0" class="text-center py-8">
-            <p class="text-gray-500">暂无支出数据</p>
-          </div>
-          <div v-else v-for="item in expenseByCategory" :key="item.categoryId" class="p-3 bg-gray-50 rounded-lg">
-            <div class="flex justify-between items-center mb-2">
-              <span class="font-medium">{{ item.categoryName }}</span>
-              <span class="text-sm font-bold text-red-600">
-                ¥{{ item.amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-              </span>
-            </div>
-            <div class="flex items-center space-x-2">
-              <div class="flex-1 bg-gray-200 rounded-full h-2">
-                <div
-                  class="bg-gradient-to-r from-red-400 to-red-600 h-2 rounded-full transition-all duration-500"
-                  :style="{ width: item.percentage + '%' }"
-                ></div>
-              </div>
-              <span class="text-xs text-gray-500 w-12 text-right">{{ item.percentage }}%</span>
-            </div>
-            <p class="text-xs text-gray-500 mt-1">{{ item.count }} 笔 · 平均 ¥{{ (item.amount / item.count).toFixed(2) }}</p>
-          </div>
-        </div>
-      </Card>
-    </div>
-
-    <!-- 交易明细表 -->
-    <Card title="📋 交易明细">
-      <Table
-        :columns="columns"
-        :dataSource="periodTransactions"
-        :pagination="{ pageSize: 20 }"
-        :rowKey="record => record.id"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.dataIndex === 'type'">
-            <Tag :color="record.type === 'income' ? 'green' : 'red'">
-              {{ record.type === 'income' ? '📈 收入' : '📉 支出' }}
-            </Tag>
-          </template>
-          <template v-else-if="column.dataIndex === 'amount'">
-            <span :class="record.type === 'income' ? 'text-green-600 font-bold' : 'text-red-600 font-bold'">
-              {{ record.type === 'income' ? '+' : '-' }}¥{{ Math.abs(record.amount).toLocaleString() }}
-            </span>
-          </template>
-          <template v-else-if="column.dataIndex === 'categoryId'">
-            <Tag>{{ getCategoryName(record.categoryId) }}</Tag>
-          </template>
-          <template v-else-if="column.dataIndex === 'accountId'">
-            {{ getAccountName(record.accountId) }}
-          </template>
-        </template>
-      </Table>
-    </Card>
-
-    <!-- 导出报表模态框 -->
-    <Modal v-model:open="showExportModal" title="📥 导出财务报表" @ok="handleExportReport" width="600px">
-      <Form layout="vertical">
-        <Form.Item label="导出格式" required>
-          <Radio.Group v-model:value="exportOptions.format" size="large">
-            <Radio.Button value="pdf">📄 PDF 格式</Radio.Button>
-            <Radio.Button value="excel">📊 Excel 格式</Radio.Button>
-            <Radio.Button value="csv">📋 CSV 格式</Radio.Button>
-          </Radio.Group>
-        </Form.Item>
-
-        <Form.Item label="包含内容">
-          <div class="space-y-2">
-            <label class="flex items-center">
-              <input type="checkbox" v-model="exportOptions.includeSummary" class="mr-2" /> 核心指标汇总
-            </label>
-            <label class="flex items-center">
-              <input type="checkbox" v-model="exportOptions.includeIncome" class="mr-2" /> 收入分析
-            </label>
-            <label class="flex items-center">
-              <input type="checkbox" v-model="exportOptions.includeExpense" class="mr-2" /> 支出分析
-            </label>
-            <label class="flex items-center">
-              <input type="checkbox" v-model="exportOptions.includeTransactions" class="mr-2" /> 交易明细
-            </label>
-          </div>
-        </Form.Item>
-
-        <Form.Item label="报表标题">
-          <Input v-model:value="exportOptions.title" placeholder="财务报表" />
-        </Form.Item>
-      </Form>
-    </Modal>
-
-    <!-- 导入报表模态框 -->
-    <Modal v-model:open="showImportModal" title="📤 导入财务报表数据" @ok="handleImportReport" width="700px">
-      <Form layout="vertical">
-        <Form.Item label="上传文件" required>
-          <input
-            type="file"
-            accept=".xlsx,.xls,.csv,.json"
-            @change="handleReportFileUpload"
-            class="block w-full text-sm text-gray-500
-              file:mr-4 file:py-2 file:px-4
-              file:rounded-full file:border-0
-              file:text-sm file:font-semibold
-              file:bg-blue-50 file:text-blue-700
-              hover:file:bg-blue-100"
-          />
-          <p class="text-sm text-gray-500 mt-2">支持 Excel (.xlsx, .xls)、CSV 和 JSON 格式</p>
-        </Form.Item>
-
-        <div v-if="importPreviewData.length > 0">
-          <Form.Item label="数据预览">
-            <div class="border rounded-lg overflow-auto max-h-60">
-              <table class="w-full text-sm">
-                <thead class="bg-gray-50 sticky top-0">
-                  <tr>
-                    <th class="px-4 py-2 text-left">日期</th>
-                    <th class="px-4 py-2 text-left">类型</th>
-                    <th class="px-4 py-2 text-left">分类</th>
-                    <th class="px-4 py-2 text-left">金额</th>
-                    <th class="px-4 py-2 text-left">描述</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(row, idx) in importPreviewData.slice(0, 5)" :key="idx" class="border-t">
-                    <td class="px-4 py-2">{{ row.date || row['日期'] }}</td>
-                    <td class="px-4 py-2">{{ row.type || row['类型'] }}</td>
-                    <td class="px-4 py-2">{{ row.category || row['分类'] }}</td>
-                    <td class="px-4 py-2">{{ row.amount || row['金额'] }}</td>
-                    <td class="px-4 py-2">{{ row.description || row['描述'] || row['项目名称'] }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <p class="text-sm text-gray-500 mt-2">
-              预览前 5 条数据，共 {{ importPreviewData.length }} 条待导入
-            </p>
-          </Form.Item>
-        </div>
-      </Form>
-    </Modal>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { Card, Button, Radio, DatePicker, Table, Tag, notification, Modal, Form, Input } from 'ant-design-vue';
+import { computed, onMounted, ref } from 'vue';
+
+import {
+  Button,
+  Card,
+  DatePicker,
+  Form,
+  Input,
+  Modal,
+  notification,
+  Radio,
+  Table,
+  Tag,
+} from 'ant-design-vue';
 import dayjs from 'dayjs';
 import * as XLSX from 'xlsx';
 
@@ -256,12 +32,12 @@ const showImportModal = ref(false);
 const importPreviewData = ref<any[]>([]);
 
 const exportOptions = ref({
-  format: 'excel' as 'pdf' | 'excel' | 'csv',
+  format: 'excel' as 'csv' | 'excel' | 'pdf',
   includeSummary: true,
   includeIncome: true,
   includeExpense: true,
   includeTransactions: true,
-  title: '财务报表'
+  title: '财务报表',
 });
 
 // 获取周期内的交易
@@ -270,37 +46,42 @@ const periodTransactions = computed(() => {
   let startDate: dayjs.Dayjs;
 
   switch (period.value) {
-    case 'month':
+    case 'all': {
+      return financeStore.transactions.filter((t) => !t.isDeleted);
+    }
+    case 'month': {
       startDate = now.startOf('month');
       break;
-    case 'quarter':
+    }
+    case 'quarter': {
       startDate = now.startOf('quarter');
       break;
-    case 'year':
+    }
+    case 'year': {
       startDate = now.startOf('year');
       break;
-    case 'all':
-      return financeStore.transactions.filter(t => !t.isDeleted);
-    default:
-      return financeStore.transactions.filter(t => !t.isDeleted);
+    }
+    default: {
+      return financeStore.transactions.filter((t) => !t.isDeleted);
+    }
   }
 
-  return financeStore.transactions.filter(t =>
-    !t.isDeleted && dayjs(t.transactionDate).isAfter(startDate)
+  return financeStore.transactions.filter(
+    (t) => !t.isDeleted && dayjs(t.transactionDate).isAfter(startDate),
   );
 });
 
 // 周期收入
 const periodIncome = computed(() => {
   return periodTransactions.value
-    .filter(t => t.type === 'income')
+    .filter((t) => t.type === 'income')
     .reduce((sum, t) => sum + t.amountInBase, 0);
 });
 
 // 周期支出
 const periodExpense = computed(() => {
   return periodTransactions.value
-    .filter(t => t.type === 'expense')
+    .filter((t) => t.type === 'expense')
     .reduce((sum, t) => sum + t.amountInBase, 0);
 });
 
@@ -309,18 +90,21 @@ const periodNet = computed(() => periodIncome.value - periodExpense.value);
 
 // 按分类统计收入
 const incomeByCategory = computed(() => {
-  const incomeTransactions = periodTransactions.value.filter(t => t.type === 'income');
+  const incomeTransactions = periodTransactions.value.filter(
+    (t) => t.type === 'income',
+  );
   if (incomeTransactions.length === 0) return [];
 
   const categoryMap = new Map();
-  incomeTransactions.forEach(t => {
+  incomeTransactions.forEach((t) => {
     const categoryId = t.categoryId || 0;
     if (!categoryMap.has(categoryId)) {
       categoryMap.set(categoryId, {
         categoryId,
-        categoryName: financeStore.getCategoryById(categoryId)?.name || '未分类',
+        categoryName:
+          financeStore.getCategoryById(categoryId)?.name || '未分类',
         amount: 0,
-        count: 0
+        count: 0,
       });
     }
     const category = categoryMap.get(categoryId);
@@ -328,28 +112,31 @@ const incomeByCategory = computed(() => {
     category.count += 1;
   });
 
-  return Array.from(categoryMap.values())
-    .map(item => ({
+  return [...categoryMap.values()]
+    .map((item) => ({
       ...item,
-      percentage: Math.round((item.amount / periodIncome.value) * 100)
+      percentage: Math.round((item.amount / periodIncome.value) * 100),
     }))
     .sort((a, b) => b.amount - a.amount);
 });
 
 // 按分类统计支出
 const expenseByCategory = computed(() => {
-  const expenseTransactions = periodTransactions.value.filter(t => t.type === 'expense');
+  const expenseTransactions = periodTransactions.value.filter(
+    (t) => t.type === 'expense',
+  );
   if (expenseTransactions.length === 0) return [];
 
   const categoryMap = new Map();
-  expenseTransactions.forEach(t => {
+  expenseTransactions.forEach((t) => {
     const categoryId = t.categoryId || 0;
     if (!categoryMap.has(categoryId)) {
       categoryMap.set(categoryId, {
         categoryId,
-        categoryName: financeStore.getCategoryById(categoryId)?.name || '未分类',
+        categoryName:
+          financeStore.getCategoryById(categoryId)?.name || '未分类',
         amount: 0,
-        count: 0
+        count: 0,
       });
     }
     const category = categoryMap.get(categoryId);
@@ -357,25 +144,30 @@ const expenseByCategory = computed(() => {
     category.count += 1;
   });
 
-  return Array.from(categoryMap.values())
-    .map(item => ({
+  return [...categoryMap.values()]
+    .map((item) => ({
       ...item,
-      percentage: Math.round((item.amount / periodExpense.value) * 100)
+      percentage: Math.round((item.amount / periodExpense.value) * 100),
     }))
     .sort((a, b) => b.amount - a.amount);
 });
 
 // 表格列
 const columns = [
-  { title: '日期', dataIndex: 'transactionDate', key: 'transactionDate', width: 120 },
+  {
+    title: '日期',
+    dataIndex: 'transactionDate',
+    key: 'transactionDate',
+    width: 120,
+  },
   { title: '类型', dataIndex: 'type', key: 'type', width: 100 },
   { title: '描述', dataIndex: 'description', key: 'description' },
   { title: '分类', dataIndex: 'categoryId', key: 'categoryId', width: 120 },
   { title: '金额', dataIndex: 'amount', key: 'amount', width: 150 },
-  { title: '账户', dataIndex: 'accountId', key: 'accountId', width: 120 }
+  { title: '账户', dataIndex: 'accountId', key: 'accountId', width: 120 },
 ];
 
-const getCategoryName = (categoryId: number | null) => {
+const getCategoryName = (categoryId: null | number) => {
   if (!categoryId) return '未分类';
   const category = financeStore.getCategoryById(categoryId);
   return category ? `${category.icon} ${category.name}` : '未知分类';
@@ -392,21 +184,32 @@ const handleExportReport = () => {
     const timestamp = new Date().toISOString().split('T')[0];
     const title = exportOptions.value.title || '财务报表';
 
-    if (exportOptions.value.format === 'excel') {
-      exportToExcel(title, timestamp);
-    } else if (exportOptions.value.format === 'csv') {
-      exportToCSV(title, timestamp);
-    } else if (exportOptions.value.format === 'pdf') {
-      notification.info({
-        message: 'PDF 格式',
-        description: 'PDF 导出功能开发中，暂时使用 Excel 代替'
-      });
-      exportToExcel(title, timestamp);
+    switch (exportOptions.value.format) {
+      case 'csv': {
+        exportToCSV(title, timestamp);
+
+        break;
+      }
+      case 'excel': {
+        exportToExcel(title, timestamp);
+
+        break;
+      }
+      case 'pdf': {
+        notification.info({
+          message: 'PDF 格式',
+          description: 'PDF 导出功能开发中，暂时使用 Excel 代替',
+        });
+        exportToExcel(title, timestamp);
+
+        break;
+      }
+      // No default
     }
 
     notification.success({
       message: '导出成功',
-      description: `报表已成功导出`
+      description: `报表已成功导出`,
     });
 
     showExportModal.value = false;
@@ -414,7 +217,7 @@ const handleExportReport = () => {
     console.error('导出失败:', error);
     notification.error({
       message: '导出失败',
-      description: '报表导出过程中出现错误'
+      description: '报表导出过程中出现错误',
     });
   }
 };
@@ -428,10 +231,25 @@ const exportToExcel = (title: string, timestamp: string) => {
     const summaryData = [
       ['核心指标汇总', '', '', ''],
       ['指标', '金额', '', ''],
-      ['总收入', `¥${periodIncome.value.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`, '', ''],
-      ['总支出', `¥${periodExpense.value.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`, '', ''],
-      ['净收入', `¥${periodNet.value.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`, '', ''],
-      ['交易笔数', periodTransactions.value.length, '', '']
+      [
+        '总收入',
+        `¥${periodIncome.value.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`,
+        '',
+        '',
+      ],
+      [
+        '总支出',
+        `¥${periodExpense.value.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`,
+        '',
+        '',
+      ],
+      [
+        '净收入',
+        `¥${periodNet.value.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`,
+        '',
+        '',
+      ],
+      ['交易笔数', periodTransactions.value.length, '', ''],
     ];
     const summarySheet = XLSX.utils.aoa_to_sheet(summaryData);
     XLSX.utils.book_append_sheet(workbook, summarySheet, '核心指标');
@@ -439,40 +257,46 @@ const exportToExcel = (title: string, timestamp: string) => {
 
   // 收入分析
   if (exportOptions.value.includeIncome && incomeByCategory.value.length > 0) {
-    const incomeData = incomeByCategory.value.map(item => ({
-      '分类': item.categoryName,
-      '金额': item.amount,
-      '笔数': item.count,
-      '平均': (item.amount / item.count).toFixed(2),
-      '占比': `${item.percentage}%`
+    const incomeData = incomeByCategory.value.map((item) => ({
+      分类: item.categoryName,
+      金额: item.amount,
+      笔数: item.count,
+      平均: (item.amount / item.count).toFixed(2),
+      占比: `${item.percentage}%`,
     }));
     const incomeSheet = XLSX.utils.json_to_sheet(incomeData);
     XLSX.utils.book_append_sheet(workbook, incomeSheet, '收入分析');
   }
 
   // 支出分析
-  if (exportOptions.value.includeExpense && expenseByCategory.value.length > 0) {
-    const expenseData = expenseByCategory.value.map(item => ({
-      '分类': item.categoryName,
-      '金额': item.amount,
-      '笔数': item.count,
-      '平均': (item.amount / item.count).toFixed(2),
-      '占比': `${item.percentage}%`
+  if (
+    exportOptions.value.includeExpense &&
+    expenseByCategory.value.length > 0
+  ) {
+    const expenseData = expenseByCategory.value.map((item) => ({
+      分类: item.categoryName,
+      金额: item.amount,
+      笔数: item.count,
+      平均: (item.amount / item.count).toFixed(2),
+      占比: `${item.percentage}%`,
     }));
     const expenseSheet = XLSX.utils.json_to_sheet(expenseData);
     XLSX.utils.book_append_sheet(workbook, expenseSheet, '支出分析');
   }
 
   // 交易明细
-  if (exportOptions.value.includeTransactions && periodTransactions.value.length > 0) {
-    const transactionsData = periodTransactions.value.map(t => ({
-      '日期': t.transactionDate,
-      '类型': t.type === 'income' ? '收入' : '支出',
-      '描述': t.description || '',
-      '分类': getCategoryName(t.categoryId),
-      '金额': t.amount,
-      '币种': t.currency,
-      '账户': getAccountName(t.accountId)
+  if (
+    exportOptions.value.includeTransactions &&
+    periodTransactions.value.length > 0
+  ) {
+    const transactionsData = periodTransactions.value.map((t) => ({
+      日期: t.transactionDate,
+      类型: t.type === 'income' ? '收入' : '支出',
+      描述: t.description || '',
+      分类: getCategoryName(t.categoryId),
+      金额: t.amount,
+      币种: t.currency,
+      账户: getAccountName(t.accountId),
     }));
     const transactionsSheet = XLSX.utils.json_to_sheet(transactionsData);
     XLSX.utils.book_append_sheet(workbook, transactionsSheet, '交易明细');
@@ -497,17 +321,22 @@ const exportToCSV = (title: string, timestamp: string) => {
   }
 
   // 交易明细
-  if (exportOptions.value.includeTransactions && periodTransactions.value.length > 0) {
+  if (
+    exportOptions.value.includeTransactions &&
+    periodTransactions.value.length > 0
+  ) {
     csvContent += '交易明细\n';
     csvContent += '日期,类型,描述,分类,金额,币种,账户\n';
-    periodTransactions.value.forEach(t => {
+    periodTransactions.value.forEach((t) => {
       csvContent += `${t.transactionDate},${t.type === 'income' ? '收入' : '支出'},"${t.description || ''}",${getCategoryName(t.categoryId)},${t.amount},${t.currency},${getAccountName(t.accountId)}\n`;
     });
   }
 
   // 下载文件
   const BOM = '\uFEFF';
-  const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
+  const blob = new Blob([BOM + csvContent], {
+    type: 'text/csv;charset=utf-8;',
+  });
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = url;
@@ -523,17 +352,18 @@ const printReport = () => {
     if (!printWindow) {
       notification.error({
         message: '打印失败',
-        description: '无法打开打印窗口，请检查浏览器设置'
+        description: '无法打开打印窗口，请检查浏览器设置',
       });
       return;
     }
 
-    const periodText = {
-      month: '本月',
-      quarter: '本季度',
-      year: '本年',
-      all: '全部'
-    }[period.value] || '自定义';
+    const periodText =
+      {
+        month: '本月',
+        quarter: '本季度',
+        year: '本年',
+        all: '全部',
+      }[period.value] || '自定义';
 
     printWindow.document.write(`
       <!DOCTYPE html>
@@ -587,10 +417,14 @@ const printReport = () => {
           </div>
         </div>
 
-        ${incomeByCategory.value.length > 0 ? `
+        ${
+          incomeByCategory.value.length > 0
+            ? `
         <h2>收入分析</h2>
         <div>
-          ${incomeByCategory.value.map(item => `
+          ${incomeByCategory.value
+            .map(
+              (item) => `
             <div class="category-item">
               <span class="category-name">${item.categoryName}</span>
               <span class="category-amount income">¥${item.amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}</span>
@@ -598,14 +432,22 @@ const printReport = () => {
                 ${item.count} 笔 · 平均 ¥${(item.amount / item.count).toFixed(2)} · ${item.percentage}%
               </div>
             </div>
-          `).join('')}
+          `,
+            )
+            .join('')}
         </div>
-        ` : ''}
+        `
+            : ''
+        }
 
-        ${expenseByCategory.value.length > 0 ? `
+        ${
+          expenseByCategory.value.length > 0
+            ? `
         <h2>支出分析</h2>
         <div>
-          ${expenseByCategory.value.map(item => `
+          ${expenseByCategory.value
+            .map(
+              (item) => `
             <div class="category-item">
               <span class="category-name">${item.categoryName}</span>
               <span class="category-amount expense">¥${item.amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}</span>
@@ -613,11 +455,17 @@ const printReport = () => {
                 ${item.count} 笔 · 平均 ¥${(item.amount / item.count).toFixed(2)} · ${item.percentage}%
               </div>
             </div>
-          `).join('')}
+          `,
+            )
+            .join('')}
         </div>
-        ` : ''}
+        `
+            : ''
+        }
 
-        ${periodTransactions.value.length > 0 ? `
+        ${
+          periodTransactions.value.length > 0
+            ? `
         <h2>交易明细</h2>
         <table>
           <thead>
@@ -631,7 +479,9 @@ const printReport = () => {
             </tr>
           </thead>
           <tbody>
-            ${periodTransactions.value.map(t => `
+            ${periodTransactions.value
+              .map(
+                (t) => `
               <tr>
                 <td>${t.transactionDate}</td>
                 <td>${t.type === 'income' ? '📈 收入' : '📉 支出'}</td>
@@ -642,10 +492,14 @@ const printReport = () => {
                 </td>
                 <td>${getAccountName(t.accountId)}</td>
               </tr>
-            `).join('')}
+            `,
+              )
+              .join('')}
           </tbody>
         </table>
-        ` : ''}
+        `
+            : ''
+        }
 
         <div class="no-print" style="text-align: center; margin-top: 40px;">
           <button onclick="window.print()" style="padding: 10px 30px; font-size: 16px; cursor: pointer;">🖨️ 打印</button>
@@ -659,7 +513,7 @@ const printReport = () => {
     console.error('打印失败:', error);
     notification.error({
       message: '打印失败',
-      description: '生成打印预览时出现错误'
+      description: '生成打印预览时出现错误',
     });
   }
 };
@@ -672,38 +526,54 @@ const handleReportFileUpload = async (event: Event) => {
   try {
     const fileExtension = file.name.split('.').pop()?.toLowerCase();
 
-    if (fileExtension === 'json') {
-      const text = await file.text();
-      const data = JSON.parse(text);
-      importPreviewData.value = Array.isArray(data) ? data : [data];
-    } else if (fileExtension === 'csv') {
-      const text = await file.text();
-      const lines = text.split('\n').filter(line => line.trim());
-      if (lines.length < 2) throw new Error('CSV 文件格式不正确');
+    switch (fileExtension) {
+      case 'csv': {
+        const text = await file.text();
+        const lines = text.split('\n').filter((line) => line.trim());
+        if (lines.length < 2) throw new Error('CSV 文件格式不正确');
 
-      const headers = lines[0].split(',').map(h => h.trim().replace(/^"|"$/g, ''));
-      const data = lines.slice(1).map(line => {
-        const values = line.split(',').map(v => v.trim().replace(/^"|"$/g, ''));
-        const row: any = {};
-        headers.forEach((header, index) => {
-          row[header] = values[index] || '';
+        const headers = lines[0]
+          .split(',')
+          .map((h) => h.trim().replaceAll(/^"|"$/g, ''));
+        const data = lines.slice(1).map((line) => {
+          const values = line
+            .split(',')
+            .map((v) => v.trim().replaceAll(/^"|"$/g, ''));
+          const row: any = {};
+          headers.forEach((header, index) => {
+            row[header] = values[index] || '';
+          });
+          return row;
         });
-        return row;
-      });
-      importPreviewData.value = data;
-    } else if (fileExtension === 'xlsx' || fileExtension === 'xls') {
-      const arrayBuffer = await file.arrayBuffer();
-      const workbook = XLSX.read(arrayBuffer, { type: 'array' });
-      const firstSheetName = workbook.SheetNames[0];
-      const worksheet = workbook.Sheets[firstSheetName];
-      const data = XLSX.utils.sheet_to_json(worksheet);
-      importPreviewData.value = data;
+        importPreviewData.value = data;
+
+        break;
+      }
+      case 'json': {
+        const text = await file.text();
+        const data = JSON.parse(text);
+        importPreviewData.value = Array.isArray(data) ? data : [data];
+
+        break;
+      }
+      case 'xls':
+      case 'xlsx': {
+        const arrayBuffer = await file.arrayBuffer();
+        const workbook = XLSX.read(arrayBuffer, { type: 'array' });
+        const firstSheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[firstSheetName];
+        const data = XLSX.utils.sheet_to_json(worksheet);
+        importPreviewData.value = data;
+
+        break;
+      }
+      // No default
     }
   } catch (error) {
     console.error('文件解析失败:', error);
     notification.error({
       message: '文件解析失败',
-      description: '请检查文件格式是否正确'
+      description: '请检查文件格式是否正确',
     });
   }
 };
@@ -714,7 +584,7 @@ const handleImportReport = async () => {
     if (importPreviewData.value.length === 0) {
       notification.warning({
         message: '无数据',
-        description: '请先上传文件'
+        description: '请先上传文件',
       });
       return;
     }
@@ -725,17 +595,24 @@ const handleImportReport = async () => {
     for (const row of importPreviewData.value) {
       try {
         const type = row.type || row['类型'];
-        const typeValue = type === '收入' || type === 'income' ? 'income' : 'expense';
+        const typeValue =
+          type === '收入' || type === 'income' ? 'income' : 'expense';
 
         // 查找分类
-        const categoryName = (row.category || row['分类'] || '').replace(/[^\u4e00-\u9fa5a-zA-Z]/g, '');
-        const categories = typeValue === 'income'
-          ? financeStore.incomeCategories
-          : financeStore.expenseCategories;
-        const category = categories.find(c => c.name === categoryName);
+        const categoryName = (row.category || row['分类'] || '').replaceAll(
+          /[^\u4E00-\u9FA5a-z]/gi,
+          '',
+        );
+        const categories =
+          typeValue === 'income'
+            ? financeStore.incomeCategories
+            : financeStore.expenseCategories;
+        const category = categories.find((c) => c.name === categoryName);
 
         // 查找账户 - 使用默认账户
-        const defaultAccount = financeStore.accounts.find(a => a.currency === (row.currency || row['币种'] || 'CNY'));
+        const defaultAccount = financeStore.accounts.find(
+          (a) => a.currency === (row.currency || row['币种'] || 'CNY'),
+        );
 
         if (!defaultAccount) {
           failCount++;
@@ -749,7 +626,7 @@ const handleImportReport = async () => {
           categoryId: category?.id,
           accountId: defaultAccount.id,
           transactionDate: row.date || row['日期'],
-          description: row.description || row['描述'] || row['项目名称'] || ''
+          description: row.description || row['描述'] || row['项目名称'] || '',
         });
 
         successCount++;
@@ -761,7 +638,7 @@ const handleImportReport = async () => {
 
     notification.success({
       message: '导入完成',
-      description: `成功导入 ${successCount} 条，失败 ${failCount} 条`
+      description: `成功导入 ${successCount} 条，失败 ${failCount} 条`,
     });
 
     showImportModal.value = false;
@@ -770,7 +647,7 @@ const handleImportReport = async () => {
     console.error('导入失败:', error);
     notification.error({
       message: '导入失败',
-      description: '数据导入过程中出现错误'
+      description: '数据导入过程中出现错误',
     });
   }
 };
@@ -783,6 +660,322 @@ onMounted(async () => {
 });
 </script>
 
+<template>
+  <div class="p-6">
+    <div class="mb-6 flex items-center justify-between">
+      <div>
+        <h1 class="mb-2 text-3xl font-bold text-gray-900">📈 财务报表</h1>
+        <p class="text-gray-600">全面的财务数据分析与报表生成</p>
+      </div>
+      <div class="flex space-x-2">
+        <Button @click="showImportModal = true"> 📤 导入报表 </Button>
+        <Button @click="showExportModal = true" type="primary">
+          📥 导出报表
+        </Button>
+        <Button @click="printReport"> 🖨️ 打印报表 </Button>
+      </div>
+    </div>
+
+    <!-- 时间筛选 -->
+    <Card class="mb-6">
+      <div class="flex items-center space-x-4">
+        <span class="font-medium">报表周期：</span>
+        <Radio.Group v-model:value="period" button-style="solid">
+          <Radio.Button value="month">本月</Radio.Button>
+          <Radio.Button value="quarter">本季度</Radio.Button>
+          <Radio.Button value="year">本年</Radio.Button>
+          <Radio.Button value="all">全部</Radio.Button>
+        </Radio.Group>
+        <RangePicker v-if="period === 'custom'" v-model:value="customRange" />
+      </div>
+    </Card>
+
+    <!-- 核心指标汇总 -->
+    <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="mb-2 text-3xl">💰</div>
+        <p class="text-sm text-gray-500">总收入</p>
+        <p class="text-2xl font-bold text-green-600">
+          ¥{{
+            periodIncome.toLocaleString('zh-CN', { minimumFractionDigits: 2 })
+          }}
+        </p>
+      </Card>
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="mb-2 text-3xl">💸</div>
+        <p class="text-sm text-gray-500">总支出</p>
+        <p class="text-2xl font-bold text-red-600">
+          ¥{{
+            periodExpense.toLocaleString('zh-CN', { minimumFractionDigits: 2 })
+          }}
+        </p>
+      </Card>
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="mb-2 text-3xl">💎</div>
+        <p class="text-sm text-gray-500">净收入</p>
+        <p
+          class="text-2xl font-bold"
+          :class="periodNet >= 0 ? 'text-purple-600' : 'text-red-600'"
+        >
+          {{ periodNet >= 0 ? '+' : '' }}¥{{
+            periodNet.toLocaleString('zh-CN', { minimumFractionDigits: 2 })
+          }}
+        </p>
+      </Card>
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="mb-2 text-3xl">📊</div>
+        <p class="text-sm text-gray-500">交易笔数</p>
+        <p class="text-2xl font-bold text-blue-600">
+          {{ periodTransactions.length }}
+        </p>
+      </Card>
+    </div>
+
+    <!-- 详细报表 -->
+    <div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <!-- 收入分析 -->
+      <Card title="📈 收入分析">
+        <div class="space-y-3">
+          <div v-if="incomeByCategory.length === 0" class="py-8 text-center">
+            <p class="text-gray-500">暂无收入数据</p>
+          </div>
+          <div
+            v-else
+            v-for="item in incomeByCategory"
+            :key="item.categoryId"
+            class="rounded-lg bg-gray-50 p-3"
+          >
+            <div class="mb-2 flex items-center justify-between">
+              <span class="font-medium">{{ item.categoryName }}</span>
+              <span class="text-sm font-bold text-green-600">
+                ¥{{
+                  item.amount.toLocaleString('zh-CN', {
+                    minimumFractionDigits: 2,
+                  })
+                }}
+              </span>
+            </div>
+            <div class="flex items-center space-x-2">
+              <div class="h-2 flex-1 rounded-full bg-gray-200">
+                <div
+                  class="h-2 rounded-full bg-gradient-to-r from-green-400 to-green-600 transition-all duration-500"
+                  :style="{ width: `${item.percentage}%` }"
+                ></div>
+              </div>
+              <span class="w-12 text-right text-xs text-gray-500"
+                >{{ item.percentage }}%</span
+              >
+            </div>
+            <p class="mt-1 text-xs text-gray-500">
+              {{ item.count }} 笔 · 平均 ¥{{
+                (item.amount / item.count).toFixed(2)
+              }}
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <!-- 支出分析 -->
+      <Card title="📉 支出分析">
+        <div class="space-y-3">
+          <div v-if="expenseByCategory.length === 0" class="py-8 text-center">
+            <p class="text-gray-500">暂无支出数据</p>
+          </div>
+          <div
+            v-else
+            v-for="item in expenseByCategory"
+            :key="item.categoryId"
+            class="rounded-lg bg-gray-50 p-3"
+          >
+            <div class="mb-2 flex items-center justify-between">
+              <span class="font-medium">{{ item.categoryName }}</span>
+              <span class="text-sm font-bold text-red-600">
+                ¥{{
+                  item.amount.toLocaleString('zh-CN', {
+                    minimumFractionDigits: 2,
+                  })
+                }}
+              </span>
+            </div>
+            <div class="flex items-center space-x-2">
+              <div class="h-2 flex-1 rounded-full bg-gray-200">
+                <div
+                  class="h-2 rounded-full bg-gradient-to-r from-red-400 to-red-600 transition-all duration-500"
+                  :style="{ width: `${item.percentage}%` }"
+                ></div>
+              </div>
+              <span class="w-12 text-right text-xs text-gray-500"
+                >{{ item.percentage }}%</span
+              >
+            </div>
+            <p class="mt-1 text-xs text-gray-500">
+              {{ item.count }} 笔 · 平均 ¥{{
+                (item.amount / item.count).toFixed(2)
+              }}
+            </p>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 交易明细表 -->
+    <Card title="📋 交易明细">
+      <Table
+        :columns="columns"
+        :data-source="periodTransactions"
+        :pagination="{ pageSize: 20 }"
+        :row-key="(record) => record.id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'type'">
+            <Tag :color="record.type === 'income' ? 'green' : 'red'">
+              {{ record.type === 'income' ? '📈 收入' : '📉 支出' }}
+            </Tag>
+          </template>
+          <template v-else-if="column.dataIndex === 'amount'">
+            <span
+              :class="
+                record.type === 'income'
+                  ? 'font-bold text-green-600'
+                  : 'font-bold text-red-600'
+              "
+            >
+              {{ record.type === 'income' ? '+' : '-' }}¥{{
+                Math.abs(record.amount).toLocaleString()
+              }}
+            </span>
+          </template>
+          <template v-else-if="column.dataIndex === 'categoryId'">
+            <Tag>{{ getCategoryName(record.categoryId) }}</Tag>
+          </template>
+          <template v-else-if="column.dataIndex === 'accountId'">
+            {{ getAccountName(record.accountId) }}
+          </template>
+        </template>
+      </Table>
+    </Card>
+
+    <!-- 导出报表模态框 -->
+    <Modal
+      v-model:open="showExportModal"
+      title="📥 导出财务报表"
+      @ok="handleExportReport"
+      width="600px"
+    >
+      <Form layout="vertical">
+        <Form.Item label="导出格式" required>
+          <Radio.Group v-model:value="exportOptions.format" size="large">
+            <Radio.Button value="pdf">📄 PDF 格式</Radio.Button>
+            <Radio.Button value="excel">📊 Excel 格式</Radio.Button>
+            <Radio.Button value="csv">📋 CSV 格式</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+
+        <Form.Item label="包含内容">
+          <div class="space-y-2">
+            <label class="flex items-center">
+              <input
+                type="checkbox"
+                v-model="exportOptions.includeSummary"
+                class="mr-2"
+              />
+              核心指标汇总
+            </label>
+            <label class="flex items-center">
+              <input
+                type="checkbox"
+                v-model="exportOptions.includeIncome"
+                class="mr-2"
+              />
+              收入分析
+            </label>
+            <label class="flex items-center">
+              <input
+                type="checkbox"
+                v-model="exportOptions.includeExpense"
+                class="mr-2"
+              />
+              支出分析
+            </label>
+            <label class="flex items-center">
+              <input
+                type="checkbox"
+                v-model="exportOptions.includeTransactions"
+                class="mr-2"
+              />
+              交易明细
+            </label>
+          </div>
+        </Form.Item>
+
+        <Form.Item label="报表标题">
+          <Input v-model:value="exportOptions.title" placeholder="财务报表" />
+        </Form.Item>
+      </Form>
+    </Modal>
+
+    <!-- 导入报表模态框 -->
+    <Modal
+      v-model:open="showImportModal"
+      title="📤 导入财务报表数据"
+      @ok="handleImportReport"
+      width="700px"
+    >
+      <Form layout="vertical">
+        <Form.Item label="上传文件" required>
+          <input
+            type="file"
+            accept=".xlsx,.xls,.csv,.json"
+            @change="handleReportFileUpload"
+            class="block w-full text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100"
+          />
+          <p class="mt-2 text-sm text-gray-500">
+            支持 Excel (.xlsx, .xls)、CSV 和 JSON 格式
+          </p>
+        </Form.Item>
+
+        <div v-if="importPreviewData.length > 0">
+          <Form.Item label="数据预览">
+            <div class="max-h-60 overflow-auto rounded-lg border">
+              <table class="w-full text-sm">
+                <thead class="sticky top-0 bg-gray-50">
+                  <tr>
+                    <th class="px-4 py-2 text-left">日期</th>
+                    <th class="px-4 py-2 text-left">类型</th>
+                    <th class="px-4 py-2 text-left">分类</th>
+                    <th class="px-4 py-2 text-left">金额</th>
+                    <th class="px-4 py-2 text-left">描述</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(row, idx) in importPreviewData.slice(0, 5)"
+                    :key="idx"
+                    class="border-t"
+                  >
+                    <td class="px-4 py-2">{{ row.date || row['日期'] }}</td>
+                    <td class="px-4 py-2">{{ row.type || row['类型'] }}</td>
+                    <td class="px-4 py-2">{{ row.category || row['分类'] }}</td>
+                    <td class="px-4 py-2">{{ row.amount || row['金额'] }}</td>
+                    <td class="px-4 py-2">
+                      {{ row.description || row['描述'] || row['项目名称'] }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p class="mt-2 text-sm text-gray-500">
+              预览前 5 条数据，共 {{ importPreviewData.length }} 条待导入
+            </p>
+          </Form.Item>
+        </div>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
 <style scoped>
-.grid { display: grid; }
+.grid {
+  display: grid;
+}
 </style>
diff --git a/apps/web-antd/src/views/finance/settings/index.vue b/apps/web-antd/src/views/finance/settings/index.vue
index 97add301..c424fc85 100644
--- a/apps/web-antd/src/views/finance/settings/index.vue
+++ b/apps/web-antd/src/views/finance/settings/index.vue
@@ -1,71 +1,406 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import {
+  Button,
+  Card,
+  Divider,
+  Form,
+  Modal,
+  notification,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+defineOptions({ name: 'FinanceSettings' });
+
+// 系统设置
+const settings = ref({
+  defaultCurrency: 'CNY',
+  notifications: {
+    budget: true,
+    bills: true,
+    investment: false,
+  },
+  autoBackup: true,
+  compactMode: false,
+  autoLock: false,
+  analytics: true,
+});
+
+// 操作加载状态
+const operationLoading = ref({
+  backup: false,
+  import: false,
+  cache: false,
+  reset: false,
+});
+
+// 功能方法
+const saveCurrencySettings = (currency: string) => {
+  console.log('货币设置更改为:', currency);
+  localStorage.setItem('app-currency', currency);
+  notification.success({
+    message: '货币设置已更新',
+    description: `默认货币已设置为 ${currency}`,
+  });
+};
+
+const saveNotificationSettings = () => {
+  console.log('通知设置已保存:', settings.value.notifications);
+  localStorage.setItem(
+    'app-notifications',
+    JSON.stringify(settings.value.notifications),
+  );
+  notification.info({
+    message: '通知设置已保存',
+    description: '通知偏好设置已更新',
+  });
+};
+
+const toggleAutoBackup = (enabled: boolean) => {
+  console.log('自动备份:', enabled);
+  localStorage.setItem('app-auto-backup', enabled.toString());
+  notification.info({
+    message: enabled ? '自动备份已启用' : '自动备份已禁用',
+    description: enabled ? '系统将定期自动备份数据' : '已关闭自动备份功能',
+  });
+};
+
+const toggleCompactMode = (enabled: boolean) => {
+  console.log('紧凑模式:', enabled);
+  document.documentElement.classList.toggle('compact', enabled);
+  localStorage.setItem('app-compact-mode', enabled.toString());
+  notification.info({
+    message: enabled ? '紧凑模式已启用' : '紧凑模式已禁用',
+  });
+};
+
+const toggleAutoLock = (enabled: boolean) => {
+  console.log('自动锁屏:', enabled);
+  localStorage.setItem('app-auto-lock', enabled.toString());
+  notification.info({
+    message: enabled ? '自动锁屏已启用' : '自动锁屏已禁用',
+  });
+};
+
+const toggleAnalytics = (enabled: boolean) => {
+  console.log('数据统计:', enabled);
+  localStorage.setItem('app-analytics', enabled.toString());
+  notification.info({
+    message: enabled ? '数据统计已启用' : '数据统计已禁用',
+  });
+};
+
+const backupData = async () => {
+  operationLoading.value.backup = true;
+  try {
+    // 模拟备份过程
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    // 创建备份数据
+    const backupData = {
+      settings: settings.value,
+      timestamp: new Date().toISOString(),
+      version: '1.0.0',
+    };
+
+    // 下载备份文件
+    const blob = new Blob([JSON.stringify(backupData, null, 2)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `finwise-pro-backup-${new Date().toISOString().split('T')[0]}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+
+    notification.success({
+      message: '数据备份成功',
+      description: '备份文件已下载到本地',
+    });
+  } catch {
+    notification.error({
+      message: '备份失败',
+      description: '数据备份过程中出现错误',
+    });
+  } finally {
+    operationLoading.value.backup = false;
+  }
+};
+
+const importData = () => {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = '.json';
+  input.addEventListener('change', async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) {
+      operationLoading.value.import = true;
+      try {
+        const text = await file.text();
+        const importedData = JSON.parse(text);
+
+        // 验证数据格式
+        if (importedData.settings && importedData.version) {
+          settings.value = { ...settings.value, ...importedData.settings };
+
+          notification.success({
+            message: '数据导入成功',
+            description: '设置已从备份文件恢复',
+          });
+        } else {
+          throw new Error('无效的备份文件格式');
+        }
+      } catch {
+        notification.error({
+          message: '导入失败',
+          description: '备份文件格式无效或已损坏',
+        });
+      } finally {
+        operationLoading.value.import = false;
+      }
+    }
+  });
+  input.click();
+};
+
+const clearCache = async () => {
+  operationLoading.value.cache = true;
+  try {
+    // 模拟清除缓存过程
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    // 清除各种缓存
+    if ('caches' in window) {
+      const cacheNames = await caches.keys();
+      await Promise.all(cacheNames.map((name) => caches.delete(name)));
+    }
+
+    // 清除localStorage中的缓存数据
+    const keysToKeep = new Set(['app-currency', 'app-language', 'app-theme']);
+    Object.keys(localStorage).forEach((key) => {
+      if (!keysToKeep.has(key)) {
+        localStorage.removeItem(key);
+      }
+    });
+
+    notification.success({
+      message: '缓存清除成功',
+      description: '系统缓存已清理完成',
+    });
+  } catch {
+    notification.error({
+      message: '清除失败',
+      description: '缓存清除过程中出现错误',
+    });
+  } finally {
+    operationLoading.value.cache = false;
+  }
+};
+
+const resetSystem = () => {
+  Modal.confirm({
+    title: '⚠️ 确认重置系统',
+    content: '此操作将删除所有数据和设置，且不可恢复。确定要继续吗？',
+    okText: '确定重置',
+    okType: 'danger',
+    cancelText: '取消',
+    async onOk() {
+      operationLoading.value.reset = true;
+      try {
+        // 模拟重置过程
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        // 清除所有本地数据
+        localStorage.clear();
+        sessionStorage.clear();
+
+        notification.success({
+          message: '系统重置成功',
+          description: '系统将重新加载以应用重置',
+        });
+
+        // 延迟重新加载
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      } catch {
+        notification.error({
+          message: '重置失败',
+          description: '系统重置过程中出现错误',
+        });
+      } finally {
+        operationLoading.value.reset = false;
+      }
+    },
+  });
+};
+
+const saveAllSettings = () => {
+  console.log('保存所有设置:', settings.value);
+  localStorage.setItem('app-all-settings', JSON.stringify(settings.value));
+  notification.success({
+    message: '设置保存成功',
+    description: '所有配置已保存',
+  });
+};
+
+const resetAllSettings = () => {
+  settings.value = {
+    defaultCurrency: 'CNY',
+    notifications: {
+      budget: true,
+      bills: true,
+      investment: false,
+    },
+    autoBackup: true,
+    compactMode: false,
+    autoLock: false,
+    analytics: true,
+  };
+
+  notification.success({
+    message: '设置已重置',
+    description: '所有设置已恢复为默认值',
+  });
+};
+
+const exportAllSettings = () => {
+  const settingsData = {
+    settings: settings.value,
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+  };
+
+  const blob = new Blob([JSON.stringify(settingsData, null, 2)], {
+    type: 'application/json',
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `finwise-pro-settings-${new Date().toISOString().split('T')[0]}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+
+  notification.success({
+    message: '设置导出成功',
+    description: '配置文件已下载',
+  });
+};
+
+// 初始化
+onMounted(() => {
+  // 从localStorage恢复设置
+  try {
+    const savedSettings = localStorage.getItem('app-all-settings');
+    if (savedSettings) {
+      const parsed = JSON.parse(savedSettings);
+      settings.value = { ...settings.value, ...parsed };
+    }
+
+    settings.value.defaultCurrency =
+      localStorage.getItem('app-currency') || 'CNY';
+  } catch (error) {
+    console.error('设置恢复失败:', error);
+  }
+
+  console.log('系统设置页面加载完成');
+});
+</script>
+
 <template>
   <div class="p-6">
     <div class="mb-6">
-      <h1 class="text-3xl font-bold text-gray-900 mb-2">⚙️ 系统设置</h1>
+      <h1 class="mb-2 text-3xl font-bold text-gray-900">⚙️ 系统设置</h1>
       <p class="text-gray-600">财务系统的个性化配置和偏好设置</p>
     </div>
-    
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
       <Card title="🔧 基本设置">
         <Form :model="settings" layout="vertical">
           <Divider>通知设置</Divider>
-          
+
           <div class="space-y-3">
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <div>
                 <span class="font-medium">💰 预算提醒</span>
                 <p class="text-sm text-gray-500">预算接近或超支时提醒</p>
               </div>
-              <Switch v-model:checked="settings.notifications.budget" @change="saveNotificationSettings" />
+              <Switch
+                v-model:checked="settings.notifications.budget"
+                @change="saveNotificationSettings"
+              />
             </div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <div>
                 <span class="font-medium">🔔 账单提醒</span>
                 <p class="text-sm text-gray-500">账单到期前提醒缴费</p>
               </div>
-              <Switch v-model:checked="settings.notifications.bills" @change="saveNotificationSettings" />
+              <Switch
+                v-model:checked="settings.notifications.bills"
+                @change="saveNotificationSettings"
+              />
             </div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <div>
                 <span class="font-medium">📊 投资更新</span>
                 <p class="text-sm text-gray-500">投资收益变化通知</p>
               </div>
-              <Switch v-model:checked="settings.notifications.investment" @change="saveNotificationSettings" />
+              <Switch
+                v-model:checked="settings.notifications.investment"
+                @change="saveNotificationSettings"
+              />
             </div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <div>
                 <span class="font-medium">💾 自动备份</span>
                 <p class="text-sm text-gray-500">定期自动备份数据</p>
               </div>
-              <Switch v-model:checked="settings.autoBackup" @change="toggleAutoBackup" />
+              <Switch
+                v-model:checked="settings.autoBackup"
+                @change="toggleAutoBackup"
+              />
             </div>
           </div>
 
           <Divider>高级设置</Divider>
 
           <div class="space-y-3">
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <span>🎨 紧凑模式</span>
-              <Switch v-model:checked="settings.compactMode" @change="toggleCompactMode" />
+              <Switch
+                v-model:checked="settings.compactMode"
+                @change="toggleCompactMode"
+              />
             </div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <span>🔒 自动锁屏</span>
-              <Switch v-model:checked="settings.autoLock" @change="toggleAutoLock" />
+              <Switch
+                v-model:checked="settings.autoLock"
+                @change="toggleAutoLock"
+              />
             </div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center justify-between">
               <span>📈 数据统计</span>
-              <Switch v-model:checked="settings.analytics" @change="toggleAnalytics" />
+              <Switch
+                v-model:checked="settings.analytics"
+                @change="toggleAnalytics"
+              />
             </div>
           </div>
 
           <div class="mt-6 space-x-4">
-            <Button type="primary" @click="saveAllSettings">💾 保存所有设置</Button>
+            <Button type="primary" @click="saveAllSettings">
+              💾 保存所有设置
+            </Button>
             <Button @click="resetAllSettings">🔄 恢复默认</Button>
             <Button @click="exportAllSettings">📤 导出配置</Button>
           </div>
         </Form>
       </Card>
-      
+
       <Card title="📊 系统状态">
         <div class="space-y-3">
           <div class="flex justify-between">
@@ -95,7 +430,12 @@
           <Button block @click="clearCache" :loading="operationLoading.cache">
             🧹 清除缓存
           </Button>
-          <Button block danger @click="resetSystem" :loading="operationLoading.reset">
+          <Button
+            block
+            danger
+            @click="resetSystem"
+            :loading="operationLoading.reset"
+          >
             🗑️ 重置系统
           </Button>
         </div>
@@ -104,306 +444,8 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { 
-  Card, Select, Switch, Tag, Button, Form, 
-  Divider, notification, Modal 
-} from 'ant-design-vue';
-
-defineOptions({ name: 'FinanceSettings' });
-
-// 系统设置
-const settings = ref({
-  defaultCurrency: 'CNY',
-  notifications: {
-    budget: true,
-    bills: true,
-    investment: false
-  },
-  autoBackup: true,
-  compactMode: false,
-  autoLock: false,
-  analytics: true
-});
-
-// 操作加载状态
-const operationLoading = ref({
-  backup: false,
-  import: false,
-  cache: false,
-  reset: false
-});
-
-// 功能方法
-const saveCurrencySettings = (currency: string) => {
-  console.log('货币设置更改为:', currency);
-  localStorage.setItem('app-currency', currency);
-  notification.success({
-    message: '货币设置已更新',
-    description: `默认货币已设置为 ${currency}`
-  });
-};
-
-
-const saveNotificationSettings = () => {
-  console.log('通知设置已保存:', settings.value.notifications);
-  localStorage.setItem('app-notifications', JSON.stringify(settings.value.notifications));
-  notification.info({
-    message: '通知设置已保存',
-    description: '通知偏好设置已更新'
-  });
-};
-
-const toggleAutoBackup = (enabled: boolean) => {
-  console.log('自动备份:', enabled);
-  localStorage.setItem('app-auto-backup', enabled.toString());
-  notification.info({
-    message: enabled ? '自动备份已启用' : '自动备份已禁用',
-    description: enabled ? '系统将定期自动备份数据' : '已关闭自动备份功能'
-  });
-};
-
-const toggleCompactMode = (enabled: boolean) => {
-  console.log('紧凑模式:', enabled);
-  document.documentElement.classList.toggle('compact', enabled);
-  localStorage.setItem('app-compact-mode', enabled.toString());
-  notification.info({
-    message: enabled ? '紧凑模式已启用' : '紧凑模式已禁用'
-  });
-};
-
-const toggleAutoLock = (enabled: boolean) => {
-  console.log('自动锁屏:', enabled);
-  localStorage.setItem('app-auto-lock', enabled.toString());
-  notification.info({
-    message: enabled ? '自动锁屏已启用' : '自动锁屏已禁用'
-  });
-};
-
-const toggleAnalytics = (enabled: boolean) => {
-  console.log('数据统计:', enabled);
-  localStorage.setItem('app-analytics', enabled.toString());
-  notification.info({
-    message: enabled ? '数据统计已启用' : '数据统计已禁用'
-  });
-};
-
-const backupData = async () => {
-  operationLoading.value.backup = true;
-  try {
-    // 模拟备份过程
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    
-    // 创建备份数据
-    const backupData = {
-      settings: settings.value,
-      timestamp: new Date().toISOString(),
-      version: '1.0.0'
-    };
-    
-    // 下载备份文件
-    const blob = new Blob([JSON.stringify(backupData, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `finwise-pro-backup-${new Date().toISOString().split('T')[0]}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-    
-    notification.success({
-      message: '数据备份成功',
-      description: '备份文件已下载到本地'
-    });
-  } catch (error) {
-    notification.error({
-      message: '备份失败',
-      description: '数据备份过程中出现错误'
-    });
-  } finally {
-    operationLoading.value.backup = false;
-  }
-};
-
-const importData = () => {
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = '.json';
-  input.onchange = async (e) => {
-    const file = (e.target as HTMLInputElement).files?.[0];
-    if (file) {
-      operationLoading.value.import = true;
-      try {
-        const text = await file.text();
-        const importedData = JSON.parse(text);
-        
-        // 验证数据格式
-        if (importedData.settings && importedData.version) {
-          settings.value = { ...settings.value, ...importedData.settings };
-          
-          notification.success({
-            message: '数据导入成功',
-            description: '设置已从备份文件恢复'
-          });
-        } else {
-          throw new Error('无效的备份文件格式');
-        }
-      } catch (error) {
-        notification.error({
-          message: '导入失败',
-          description: '备份文件格式无效或已损坏'
-        });
-      } finally {
-        operationLoading.value.import = false;
-      }
-    }
-  };
-  input.click();
-};
-
-const clearCache = async () => {
-  operationLoading.value.cache = true;
-  try {
-    // 模拟清除缓存过程
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    
-    // 清除各种缓存
-    if ('caches' in window) {
-      const cacheNames = await caches.keys();
-      await Promise.all(cacheNames.map(name => caches.delete(name)));
-    }
-    
-    // 清除localStorage中的缓存数据
-    const keysToKeep = ['app-language', 'app-theme', 'app-currency'];
-    Object.keys(localStorage).forEach(key => {
-      if (!keysToKeep.includes(key)) {
-        localStorage.removeItem(key);
-      }
-    });
-    
-    notification.success({
-      message: '缓存清除成功',
-      description: '系统缓存已清理完成'
-    });
-  } catch (error) {
-    notification.error({
-      message: '清除失败',
-      description: '缓存清除过程中出现错误'
-    });
-  } finally {
-    operationLoading.value.cache = false;
-  }
-};
-
-const resetSystem = () => {
-  Modal.confirm({
-    title: '⚠️ 确认重置系统',
-    content: '此操作将删除所有数据和设置，且不可恢复。确定要继续吗？',
-    okText: '确定重置',
-    okType: 'danger',
-    cancelText: '取消',
-    async onOk() {
-      operationLoading.value.reset = true;
-      try {
-        // 模拟重置过程
-        await new Promise(resolve => setTimeout(resolve, 2000));
-        
-        // 清除所有本地数据
-        localStorage.clear();
-        sessionStorage.clear();
-        
-        notification.success({
-          message: '系统重置成功',
-          description: '系统将重新加载以应用重置'
-        });
-        
-        // 延迟重新加载
-        setTimeout(() => {
-          window.location.reload();
-        }, 2000);
-        
-      } catch (error) {
-        notification.error({
-          message: '重置失败',
-          description: '系统重置过程中出现错误'
-        });
-      } finally {
-        operationLoading.value.reset = false;
-      }
-    }
-  });
-};
-
-const saveAllSettings = () => {
-  console.log('保存所有设置:', settings.value);
-  localStorage.setItem('app-all-settings', JSON.stringify(settings.value));
-  notification.success({
-    message: '设置保存成功',
-    description: '所有配置已保存'
-  });
-};
-
-const resetAllSettings = () => {
-  settings.value = {
-    defaultCurrency: 'CNY',
-    notifications: {
-      budget: true,
-      bills: true,
-      investment: false
-    },
-    autoBackup: true,
-    compactMode: false,
-    autoLock: false,
-    analytics: true
-  };
-  
-  notification.success({
-    message: '设置已重置',
-    description: '所有设置已恢复为默认值'
-  });
-};
-
-const exportAllSettings = () => {
-  const settingsData = {
-    settings: settings.value,
-    timestamp: new Date().toISOString(),
-    version: '1.0.0'
-  };
-  
-  const blob = new Blob([JSON.stringify(settingsData, null, 2)], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `finwise-pro-settings-${new Date().toISOString().split('T')[0]}.json`;
-  a.click();
-  URL.revokeObjectURL(url);
-  
-  notification.success({
-    message: '设置导出成功',
-    description: '配置文件已下载'
-  });
-};
-
-// 初始化
-onMounted(() => {
-  // 从localStorage恢复设置
-  try {
-    const savedSettings = localStorage.getItem('app-all-settings');
-    if (savedSettings) {
-      const parsed = JSON.parse(savedSettings);
-      settings.value = { ...settings.value, ...parsed };
-    }
-    
-    settings.value.defaultCurrency = localStorage.getItem('app-currency') || 'CNY';
-    
-  } catch (error) {
-    console.error('设置恢复失败:', error);
-  }
-  
-  console.log('系统设置页面加载完成');
-});
-</script>
-
 <style scoped>
-.grid { display: grid; }
-</style>
\ No newline at end of file
+.grid {
+  display: grid;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/statistics/index.vue b/apps/web-antd/src/views/finance/statistics/index.vue
index 86fba739..863b921a 100644
--- a/apps/web-antd/src/views/finance/statistics/index.vue
+++ b/apps/web-antd/src/views/finance/statistics/index.vue
@@ -1,342 +1,26 @@
-<template>
-  <div class="p-6">
-    <div class="mb-6">
-      <h1 class="text-3xl font-bold text-gray-900 mb-2">📊 财务统计分析</h1>
-      <p class="text-gray-600">多维度智能分析您的财务数据</p>
-    </div>
-
-    <!-- 时间维度选择器 -->
-    <Card class="mb-6">
-      <Tabs v-model:activeKey="timeDimension" @change="handleDimensionChange">
-        <TabPane key="monthly" tab="📅 月度分析">
-          <div class="flex items-center space-x-4 py-2">
-            <Button @click="previousPeriod" :disabled="!canGoPrevious">
-              ←
-            </Button>
-            <DatePicker
-              v-model:value="selectedMonth"
-              picker="month"
-              format="YYYY年MM月"
-              @change="handleMonthChange"
-              style="width: 200px"
-            />
-            <Button @click="nextPeriod" :disabled="!canGoNext">
-              →
-            </Button>
-            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
-          </div>
-        </TabPane>
-        <TabPane key="quarterly" tab="📊 季度分析">
-          <div class="flex items-center space-x-4 py-2">
-            <Button @click="previousPeriod" :disabled="!canGoPrevious">
-              ←
-            </Button>
-            <Select v-model:value="selectedQuarter" style="width: 200px" @change="handleQuarterChange">
-              <Select.Option v-for="quarter in availableQuarters" :key="quarter.value" :value="quarter.value">
-                {{ quarter.label }}
-              </Select.Option>
-            </Select>
-            <Button @click="nextPeriod" :disabled="!canGoNext">
-              →
-            </Button>
-            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
-          </div>
-        </TabPane>
-        <TabPane key="yearly" tab="📈 年度分析">
-          <div class="flex items-center space-x-4 py-2">
-            <Button @click="previousPeriod" :disabled="!canGoPrevious">
-              ←
-            </Button>
-            <Select v-model:value="selectedYear" style="width: 200px" @change="handleYearChange">
-              <Select.Option v-for="year in availableYears" :key="year" :value="year">
-                {{ year }}年
-              </Select.Option>
-            </Select>
-            <Button @click="nextPeriod" :disabled="!canGoNext">
-              →
-            </Button>
-            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
-          </div>
-        </TabPane>
-        <TabPane key="custom" tab="🎯 自定义">
-          <div class="flex items-center space-x-4 py-2">
-            <RangePicker
-              v-model:value="customRange"
-              format="YYYY-MM-DD"
-              @change="handleCustomRangeChange"
-            />
-            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
-          </div>
-        </TabPane>
-      </Tabs>
-    </Card>
-
-    <!-- 智能洞察卡片 -->
-    <Card class="mb-6" title="💡 智能洞察">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div v-for="insight in smartInsights" :key="insight.type" class="p-4 rounded-lg border" :class="insight.alertLevel">
-          <div class="flex items-start justify-between mb-2">
-            <span class="text-2xl">{{ insight.icon }}</span>
-            <Badge v-if="insight.isAlert" status="error" text="异常" />
-          </div>
-          <h3 class="font-semibold mb-2">{{ insight.title }}</h3>
-          <p class="text-sm text-gray-600 mb-3">{{ insight.description }}</p>
-          <div class="flex items-center justify-between">
-            <span class="text-xl font-bold" :class="insight.valueClass">{{ insight.value }}</span>
-            <span v-if="insight.trend" class="text-sm" :class="insight.trendClass">
-              <template v-if="insight.trend > 0">↗ +{{ insight.trend }}%</template>
-              <template v-else>↘ {{ insight.trend }}%</template>
-            </span>
-          </div>
-        </div>
-      </div>
-    </Card>
-
-    <!-- 关键指标卡片 -->
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="space-y-2">
-          <div class="text-3xl">💰</div>
-          <p class="text-sm text-gray-500">期间总收入</p>
-          <p class="text-2xl font-bold text-green-600">
-            ¥{{ currentPeriodData.totalIncome.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-          </p>
-          <p v-if="comparisonData.incomeTrend !== null" class="text-xs" :class="comparisonData.incomeTrend >= 0 ? 'text-green-600' : 'text-red-600'">
-            {{ comparisonData.incomeCompareText }}
-          </p>
-        </div>
-      </Card>
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="space-y-2">
-          <div class="text-3xl">💸</div>
-          <p class="text-sm text-gray-500">期间总支出</p>
-          <p class="text-2xl font-bold text-red-600">
-            ¥{{ currentPeriodData.totalExpense.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-          </p>
-          <p v-if="comparisonData.expenseTrend !== null" class="text-xs" :class="comparisonData.expenseTrend <= 0 ? 'text-green-600' : 'text-red-600'">
-            {{ comparisonData.expenseCompareText }}
-          </p>
-        </div>
-      </Card>
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="space-y-2">
-          <div class="text-3xl">📊</div>
-          <p class="text-sm text-gray-500">平均单笔金额</p>
-          <p class="text-2xl font-bold text-blue-600">
-            ¥{{ currentPeriodData.avgAmount.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-          </p>
-          <p class="text-xs text-gray-500">支出笔数: {{ currentPeriodData.expenseCount }}</p>
-        </div>
-      </Card>
-      <Card class="text-center hover:shadow-lg transition-shadow">
-        <div class="space-y-2">
-          <div class="text-3xl">🏆</div>
-          <p class="text-sm text-gray-500">最大单笔支出</p>
-          <p class="text-2xl font-bold text-orange-600">
-            ¥{{ currentPeriodData.maxExpense.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-          </p>
-          <p v-if="currentPeriodData.maxExpenseCategory" class="text-xs text-gray-500">
-            {{ currentPeriodData.maxExpenseCategory }}
-          </p>
-        </div>
-      </Card>
-    </div>
-
-    <!-- 对比分析卡片 -->
-    <Card class="mb-6" title="📈 对比分析">
-      <Tabs v-model:activeKey="comparisonType">
-        <TabPane key="mom" tab="环比分析">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="p-4 bg-blue-50 rounded-lg">
-              <p class="text-sm text-gray-600 mb-2">支出环比</p>
-              <p class="text-2xl font-bold" :class="comparisonData.momExpense < 0 ? 'text-green-600' : 'text-red-600'">
-                {{ comparisonData.momExpense >= 0 ? '+' : '' }}{{ comparisonData.momExpense }}%
-              </p>
-            </div>
-            <div class="p-4 bg-green-50 rounded-lg">
-              <p class="text-sm text-gray-600 mb-2">收入环比</p>
-              <p class="text-2xl font-bold" :class="comparisonData.momIncome >= 0 ? 'text-green-600' : 'text-red-600'">
-                {{ comparisonData.momIncome >= 0 ? '+' : '' }}{{ comparisonData.momIncome }}%
-              </p>
-            </div>
-            <div class="p-4 bg-purple-50 rounded-lg">
-              <p class="text-sm text-gray-600 mb-2">交易笔数环比</p>
-              <p class="text-2xl font-bold text-purple-600">
-                {{ comparisonData.momCount >= 0 ? '+' : '' }}{{ comparisonData.momCount }}%
-              </p>
-            </div>
-          </div>
-        </TabPane>
-        <TabPane key="yoy" tab="同比分析">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="p-4 bg-blue-50 rounded-lg">
-              <p class="text-sm text-gray-600 mb-2">支出同比</p>
-              <p class="text-2xl font-bold" :class="comparisonData.yoyExpense < 0 ? 'text-green-600' : 'text-red-600'">
-                {{ comparisonData.yoyExpense >= 0 ? '+' : '' }}{{ comparisonData.yoyExpense }}%
-              </p>
-            </div>
-            <div class="p-4 bg-green-50 rounded-lg">
-              <p class="text-sm text-gray-600 mb-2">收入同比</p>
-              <p class="text-2xl font-bold" :class="comparisonData.yoyIncome >= 0 ? 'text-green-600' : 'text-red-600'">
-                {{ comparisonData.yoyIncome >= 0 ? '+' : '' }}{{ comparisonData.yoyIncome }}%
-              </p>
-            </div>
-            <div class="p-4 bg-purple-50 rounded-lg">
-              <p class="text-sm text-gray-600 mb-2">交易笔数同比</p>
-              <p class="text-2xl font-bold text-purple-600">
-                {{ comparisonData.yoyCount >= 0 ? '+' : '' }}{{ comparisonData.yoyCount }}%
-              </p>
-            </div>
-          </div>
-        </TabPane>
-      </Tabs>
-    </Card>
-
-    <!-- 现金流趋势图 -->
-    <Card class="mb-6" title="💹 现金流趋势">
-      <div ref="cashFlowChart" style="width: 100%; height: 400px;"></div>
-    </Card>
-
-    <!-- 支出结构树图 -->
-    <Card class="mb-6" title="🌳 支出结构分析">
-      <div ref="expenseTreeChart" style="width: 100%; height: 500px;"></div>
-    </Card>
-
-    <!-- 分类健康度评分 -->
-    <Card class="mb-6" title="💪 分类健康度评分">
-      <div class="space-y-3">
-        <div v-for="health in categoryHealthScores" :key="health.categoryId" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-          <div class="flex items-center space-x-3">
-            <span class="text-2xl">{{ health.icon }}</span>
-            <div>
-              <p class="font-semibold">{{ health.categoryName }}</p>
-              <p class="text-xs text-gray-500">
-                ¥{{ health.amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }} | {{ health.count }}笔
-              </p>
-            </div>
-          </div>
-          <div class="flex items-center space-x-4">
-            <div class="w-32">
-              <Progress :percent="health.percentage" :status="health.status" :stroke-color="health.color" />
-            </div>
-            <Badge :color="health.badgeColor" :text="health.healthLabel" />
-          </div>
-        </div>
-      </div>
-    </Card>
-
-    <!-- 异常检测 -->
-    <Card v-if="anomalies.length > 0" title="⚠️ 异常交易检测" class="mb-6">
-      <Alert
-        message="发现异常交易"
-        :description="`检测到 ${anomalies.length} 笔可能需要关注的交易`"
-        type="warning"
-        show-icon
-        class="mb-4"
-      />
-      <div class="space-y-2">
-        <div v-for="anomaly in anomalies" :key="anomaly.id" class="p-3 border-l-4 border-orange-500 bg-orange-50 rounded">
-          <div class="flex items-center justify-between">
-            <div>
-              <p class="font-semibold">{{ anomaly.description }}</p>
-              <p class="text-sm text-gray-600">{{ anomaly.date }} | {{ anomaly.category }}</p>
-            </div>
-            <div class="text-right">
-              <p class="text-lg font-bold text-red-600">-¥{{ anomaly.amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}</p>
-              <p class="text-xs text-orange-600">{{ anomaly.reason }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Card>
-
-    <!-- 月度表格视图 -->
-    <Card title="📋 月度数据表格" class="mb-6">
-      <div class="mb-4 flex justify-between items-center">
-        <div class="flex items-center space-x-4">
-          <Select v-model:value="tableViewYear" style="width: 120px" @change="handleTableYearChange">
-            <Select.Option v-for="year in availableYears" :key="year" :value="year">
-              {{ year }}年
-            </Select.Option>
-          </Select>
-          <Radio.Group v-model:value="tableViewMode" button-style="solid">
-            <Radio.Button value="summary">收支汇总</Radio.Button>
-            <Radio.Button value="category">分类明细</Radio.Button>
-          </Radio.Group>
-        </div>
-        <Button type="primary" @click="exportMonthlyTable">
-          📥 导出Excel
-        </Button>
-      </div>
-
-      <!-- 汇总视图 -->
-      <Table
-        v-if="tableViewMode === 'summary'"
-        :columns="summaryTableColumns"
-        :dataSource="monthlyTableData"
-        :pagination="false"
-        :scroll="{ x: 800 }"
-        bordered
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'income'">
-            <span class="text-green-600 font-semibold">
-              ¥{{ record.income.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-            </span>
-          </template>
-          <template v-else-if="column.key === 'expense'">
-            <span class="text-red-600 font-semibold">
-              ¥{{ record.expense.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-            </span>
-          </template>
-          <template v-else-if="column.key === 'net'">
-            <span :class="record.net >= 0 ? 'text-green-600' : 'text-red-600'" class="font-bold">
-              {{ record.net >= 0 ? '+' : '' }}¥{{ record.net.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-            </span>
-          </template>
-          <template v-else-if="column.key === 'savingsRate'">
-            <span :class="record.savingsRate >= 30 ? 'text-green-600' : record.savingsRate >= 10 ? 'text-orange-600' : 'text-red-600'">
-              {{ record.savingsRate }}%
-            </span>
-          </template>
-        </template>
-      </Table>
-
-      <!-- 分类明细视图 -->
-      <Table
-        v-else
-        :columns="categoryTableColumns"
-        :dataSource="monthlyCategoryData"
-        :pagination="false"
-        :scroll="{ x: 1200 }"
-        bordered
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.dataIndex !== 'month' && column.dataIndex !== 'total'">
-            <div v-if="record[column.dataIndex]">
-              <div class="font-semibold">¥{{ record[column.dataIndex].amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}</div>
-              <div class="text-xs text-gray-500">{{ record[column.dataIndex].percentage }}%</div>
-            </div>
-            <div v-else class="text-gray-400">-</div>
-          </template>
-          <template v-else-if="column.key === 'total'">
-            <span class="text-red-600 font-bold">
-              ¥{{ record.total.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}
-            </span>
-          </template>
-        </template>
-      </Table>
-    </Card>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
-import { Card, Tabs, TabPane, Button, DatePicker, Select, RangePicker, Badge, Progress, Alert, Table, Radio, notification } from 'ant-design-vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  DatePicker,
+  notification,
+  Progress,
+  Radio,
+  RangePicker,
+  Select,
+  Table,
+  TabPane,
+  Tabs,
+} from 'ant-design-vue';
 import dayjs, { Dayjs } from 'dayjs';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import * as echarts from 'echarts';
 import * as XLSX from 'xlsx';
+
 import { useFinanceStore } from '#/store/finance';
 
 dayjs.extend(quarterOfYear);
@@ -344,7 +28,9 @@ dayjs.extend(quarterOfYear);
 const financeStore = useFinanceStore();
 
 // 时间维度
-const timeDimension = ref<'monthly' | 'quarterly' | 'yearly' | 'custom'>('monthly');
+const timeDimension = ref<'custom' | 'monthly' | 'quarterly' | 'yearly'>(
+  'monthly',
+);
 const selectedMonth = ref<Dayjs>(dayjs());
 const selectedQuarter = ref<string>(`${dayjs().year()}-Q${dayjs().quarter()}`);
 const selectedYear = ref<number>(dayjs().year());
@@ -362,67 +48,83 @@ let expenseTreeChartInstance: echarts.ECharts | null = null;
 // 计算可用的年份和季度
 const availableYears = computed(() => {
   const years = new Set<number>();
-  financeStore.transactions.forEach(t => {
+  financeStore.transactions.forEach((t) => {
     const year = dayjs(t.transactionDate).year();
     years.add(year);
   });
-  return Array.from(years).sort((a, b) => b - a);
+  return [...years].sort((a, b) => b - a);
 });
 
 const availableQuarters = computed(() => {
   const quarters = new Set<string>();
-  financeStore.transactions.forEach(t => {
+  financeStore.transactions.forEach((t) => {
     const date = dayjs(t.transactionDate);
     quarters.add(`${date.year()}-Q${date.quarter()}`);
   });
-  return Array.from(quarters)
+  return [...quarters]
     .sort((a, b) => b.localeCompare(a))
-    .map(q => ({
+    .map((q) => ({
       value: q,
-      label: q.replace('-Q', '年第') + '季度'
+      label: `${q.replace('-Q', '年第')}季度`,
     }));
 });
 
 // 获取当前期间的交易数据
 const getCurrentPeriodTransactions = () => {
-  let startDate: Dayjs, endDate: Dayjs;
+  let endDate: Dayjs, startDate: Dayjs;
 
   switch (timeDimension.value) {
-    case 'monthly':
-      startDate = selectedMonth.value.startOf('month');
-      endDate = selectedMonth.value.endOf('month');
-      break;
-    case 'quarterly':
-      const [year, quarter] = selectedQuarter.value.split('-Q');
-      startDate = dayjs(`${year}-${(parseInt(quarter) - 1) * 3 + 1}-01`).startOf('month');
-      endDate = startDate.add(2, 'month').endOf('month');
-      break;
-    case 'yearly':
-      startDate = dayjs(`${selectedYear.value}-01-01`);
-      endDate = dayjs(`${selectedYear.value}-12-31`);
-      break;
-    case 'custom':
+    case 'custom': {
       startDate = customRange.value[0];
       endDate = customRange.value[1];
       break;
+    }
+    case 'monthly': {
+      startDate = selectedMonth.value.startOf('month');
+      endDate = selectedMonth.value.endOf('month');
+      break;
+    }
+    case 'quarterly': {
+      const [year, quarter] = selectedQuarter.value.split('-Q');
+      startDate = dayjs(
+        `${year}-${(Number.parseInt(quarter) - 1) * 3 + 1}-01`,
+      ).startOf('month');
+      endDate = startDate.add(2, 'month').endOf('month');
+      break;
+    }
+    case 'yearly': {
+      startDate = dayjs(`${selectedYear.value}-01-01`);
+      endDate = dayjs(`${selectedYear.value}-12-31`);
+      break;
+    }
   }
 
-  return financeStore.transactions.filter(t => {
+  return financeStore.transactions.filter((t) => {
     const date = dayjs(t.transactionDate);
-    return date.isAfter(startDate.subtract(1, 'day')) && date.isBefore(endDate.add(1, 'day'));
+    return (
+      date.isAfter(startDate.subtract(1, 'day')) &&
+      date.isBefore(endDate.add(1, 'day'))
+    );
   });
 };
 
 // 当前期间数据
 const currentPeriodData = computed(() => {
   const transactions = getCurrentPeriodTransactions();
-  const income = transactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amountInBase, 0);
-  const expense = transactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amountInBase, 0);
-  const expenseTransactions = transactions.filter(t => t.type === 'expense');
+  const income = transactions
+    .filter((t) => t.type === 'income')
+    .reduce((sum, t) => sum + t.amountInBase, 0);
+  const expense = transactions
+    .filter((t) => t.type === 'expense')
+    .reduce((sum, t) => sum + t.amountInBase, 0);
+  const expenseTransactions = transactions.filter((t) => t.type === 'expense');
 
-  const maxExpenseTransaction = expenseTransactions.length > 0
-    ? expenseTransactions.reduce((max, t) => t.amountInBase > max.amountInBase ? t : max)
-    : null;
+  const maxExpenseTransaction =
+    expenseTransactions.length > 0
+      ? expenseTransactions.reduce((max, t) =>
+          t.amountInBase > max.amountInBase ? t : max,
+        )
+      : null;
 
   return {
     totalIncome: income,
@@ -430,11 +132,12 @@ const currentPeriodData = computed(() => {
     netIncome: income - expense,
     transactionCount: transactions.length,
     expenseCount: expenseTransactions.length,
-    avgAmount: expenseTransactions.length > 0 ? expense / expenseTransactions.length : 0,
+    avgAmount:
+      expenseTransactions.length > 0 ? expense / expenseTransactions.length : 0,
     maxExpense: maxExpenseTransaction?.amountInBase || 0,
     maxExpenseCategory: maxExpenseTransaction
       ? financeStore.getCategoryById(maxExpenseTransaction.categoryId)?.name
-      : null
+      : null,
   };
 });
 
@@ -451,7 +154,7 @@ const comparisonData = computed(() => {
     incomeTrend: null,
     expenseTrend: null,
     incomeCompareText: '',
-    expenseCompareText: ''
+    expenseCompareText: '',
   };
 });
 
@@ -470,14 +173,14 @@ const smartInsights = computed(() => {
     valueClass: 'text-red-600',
     trendClass: '',
     alertLevel: 'bg-red-50 border-red-200',
-    isAlert: false
+    isAlert: false,
   });
 
   // 洞察2: 高频分类
-  const categoryStats = new Map<number, { count: number; amount: number }>();
+  const categoryStats = new Map<number, { amount: number; count: number }>();
   getCurrentPeriodTransactions()
-    .filter(t => t.type === 'expense' && t.categoryId)
-    .forEach(t => {
+    .filter((t) => t.type === 'expense' && t.categoryId)
+    .forEach((t) => {
       const stat = categoryStats.get(t.categoryId!) || { count: 0, amount: 0 };
       stat.count++;
       stat.amount += t.amountInBase;
@@ -485,8 +188,9 @@ const smartInsights = computed(() => {
     });
 
   if (categoryStats.size > 0) {
-    const topCategory = Array.from(categoryStats.entries())
-      .sort((a, b) => b[1].count - a[1].count)[0];
+    const topCategory = [...categoryStats.entries()].sort(
+      (a, b) => b[1].count - a[1].count,
+    )[0];
     const category = financeStore.getCategoryById(topCategory[0]);
 
     insights.push({
@@ -499,7 +203,7 @@ const smartInsights = computed(() => {
       valueClass: 'text-blue-600',
       trendClass: '',
       alertLevel: 'bg-blue-50 border-blue-200',
-      isAlert: false
+      isAlert: false,
     });
   }
 
@@ -514,7 +218,7 @@ const smartInsights = computed(() => {
     valueClass: 'text-purple-600',
     trendClass: '',
     alertLevel: 'bg-purple-50 border-purple-200',
-    isAlert: false
+    isAlert: false,
   });
 
   return insights;
@@ -522,23 +226,26 @@ const smartInsights = computed(() => {
 
 // 分类健康度评分
 const categoryHealthScores = computed(() => {
-  const categoryStats = new Map<number, { count: number; amount: number }>();
-  const transactions = getCurrentPeriodTransactions().filter(t => t.type === 'expense' && t.categoryId);
+  const categoryStats = new Map<number, { amount: number; count: number }>();
+  const transactions = getCurrentPeriodTransactions().filter(
+    (t) => t.type === 'expense' && t.categoryId,
+  );
   const totalExpense = currentPeriodData.value.totalExpense;
 
-  transactions.forEach(t => {
+  transactions.forEach((t) => {
     const stat = categoryStats.get(t.categoryId!) || { count: 0, amount: 0 };
     stat.count++;
     stat.amount += t.amountInBase;
     categoryStats.set(t.categoryId!, stat);
   });
 
-  return Array.from(categoryStats.entries())
+  return [...categoryStats.entries()]
     .map(([categoryId, stat]) => {
       const category = financeStore.getCategoryById(categoryId);
-      const percentage = totalExpense > 0 ? (stat.amount / totalExpense * 100) : 0;
+      const percentage =
+        totalExpense > 0 ? (stat.amount / totalExpense) * 100 : 0;
 
-      let status: 'success' | 'normal' | 'exception' = 'normal';
+      let status: 'exception' | 'normal' | 'success' = 'normal';
       let healthLabel = '正常';
       let badgeColor = 'green';
       let color = '#52c41a';
@@ -565,7 +272,7 @@ const categoryHealthScores = computed(() => {
         status,
         healthLabel,
         badgeColor,
-        color
+        color,
       };
     })
     .sort((a, b) => b.amount - a.amount);
@@ -573,19 +280,21 @@ const categoryHealthScores = computed(() => {
 
 // 异常交易检测
 const anomalies = computed(() => {
-  const transactions = getCurrentPeriodTransactions().filter(t => t.type === 'expense');
+  const transactions = getCurrentPeriodTransactions().filter(
+    (t) => t.type === 'expense',
+  );
   const avgAmount = currentPeriodData.value.avgAmount;
 
   // 检测: 金额超过平均值3倍的交易
   return transactions
-    .filter(t => t.amountInBase > avgAmount * 3 && avgAmount > 0)
-    .map(t => ({
+    .filter((t) => t.amountInBase > avgAmount * 3 && avgAmount > 0)
+    .map((t) => ({
       id: t.id,
       description: t.description || t.project || '无描述',
       date: dayjs(t.transactionDate).format('YYYY-MM-DD'),
       category: financeStore.getCategoryById(t.categoryId)?.name || '未分类',
       amount: t.amountInBase,
-      reason: `金额是平均值的 ${(t.amountInBase / avgAmount).toFixed(1)} 倍`
+      reason: `金额是平均值的 ${(t.amountInBase / avgAmount).toFixed(1)} 倍`,
     }))
     .sort((a, b) => b.amount - a.amount)
     .slice(0, 5);
@@ -597,41 +306,41 @@ const canGoNext = ref(true);
 
 const previousPeriod = () => {
   switch (timeDimension.value) {
-    case 'monthly':
+    case 'monthly': {
       selectedMonth.value = selectedMonth.value.subtract(1, 'month');
       break;
-    case 'quarterly':
+    }
+    case 'quarterly': {
       const [year, quarter] = selectedQuarter.value.split('-Q');
-      const prevQ = parseInt(quarter) - 1;
-      if (prevQ < 1) {
-        selectedQuarter.value = `${parseInt(year) - 1}-Q4`;
-      } else {
-        selectedQuarter.value = `${year}-Q${prevQ}`;
-      }
+      const prevQ = Number.parseInt(quarter) - 1;
+      selectedQuarter.value =
+        prevQ < 1 ? `${Number.parseInt(year) - 1}-Q4` : `${year}-Q${prevQ}`;
       break;
-    case 'yearly':
+    }
+    case 'yearly': {
       selectedYear.value--;
       break;
+    }
   }
 };
 
 const nextPeriod = () => {
   switch (timeDimension.value) {
-    case 'monthly':
+    case 'monthly': {
       selectedMonth.value = selectedMonth.value.add(1, 'month');
       break;
-    case 'quarterly':
+    }
+    case 'quarterly': {
       const [year, quarter] = selectedQuarter.value.split('-Q');
-      const nextQ = parseInt(quarter) + 1;
-      if (nextQ > 4) {
-        selectedQuarter.value = `${parseInt(year) + 1}-Q1`;
-      } else {
-        selectedQuarter.value = `${year}-Q${nextQ}`;
-      }
+      const nextQ = Number.parseInt(quarter) + 1;
+      selectedQuarter.value =
+        nextQ > 4 ? `${Number.parseInt(year) + 1}-Q1` : `${year}-Q${nextQ}`;
       break;
-    case 'yearly':
+    }
+    case 'yearly': {
       selectedYear.value++;
       break;
+    }
   }
 };
 
@@ -682,9 +391,9 @@ const initCashFlowChart = () => {
   cashFlowChartInstance = echarts.init(cashFlowChart.value);
 
   const transactions = getCurrentPeriodTransactions();
-  const dateMap = new Map<string, { income: number; expense: number }>();
+  const dateMap = new Map<string, { expense: number; income: number }>();
 
-  transactions.forEach(t => {
+  transactions.forEach((t) => {
     const date = dayjs(t.transactionDate).format('YYYY-MM-DD');
     const stat = dateMap.get(date) || { income: 0, expense: 0 };
     if (t.type === 'income') {
@@ -695,36 +404,36 @@ const initCashFlowChart = () => {
     dateMap.set(date, stat);
   });
 
-  const dates = Array.from(dateMap.keys()).sort();
-  const incomeData = dates.map(d => dateMap.get(d)!.income);
-  const expenseData = dates.map(d => dateMap.get(d)!.expense);
+  const dates = [...dateMap.keys()].sort();
+  const incomeData = dates.map((d) => dateMap.get(d)!.income);
+  const expenseData = dates.map((d) => dateMap.get(d)!.expense);
 
   const option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross'
-      }
+        type: 'cross',
+      },
     },
     legend: {
-      data: ['收入', '支出', '净收入']
+      data: ['收入', '支出', '净收入'],
     },
     grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
-      containLabel: true
+      containLabel: true,
     },
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: dates.map(d => dayjs(d).format('MM-DD'))
+      data: dates.map((d) => dayjs(d).format('MM-DD')),
     },
     yAxis: {
       type: 'value',
       axisLabel: {
-        formatter: '¥{value}'
-      }
+        formatter: '¥{value}',
+      },
     },
     series: [
       {
@@ -733,7 +442,7 @@ const initCashFlowChart = () => {
         data: incomeData,
         smooth: true,
         itemStyle: { color: '#52c41a' },
-        areaStyle: { opacity: 0.3 }
+        areaStyle: { opacity: 0.3 },
       },
       {
         name: '支出',
@@ -741,16 +450,16 @@ const initCashFlowChart = () => {
         data: expenseData,
         smooth: true,
         itemStyle: { color: '#ff4d4f' },
-        areaStyle: { opacity: 0.3 }
+        areaStyle: { opacity: 0.3 },
       },
       {
         name: '净收入',
         type: 'line',
         data: dates.map((d, i) => incomeData[i] - expenseData[i]),
         smooth: true,
-        itemStyle: { color: '#1890ff' }
-      }
-    ]
+        itemStyle: { color: '#1890ff' },
+      },
+    ],
   };
 
   cashFlowChartInstance.setOption(option);
@@ -768,18 +477,18 @@ const initExpenseTreeChart = () => {
 
   const categoryStats = new Map<number, number>();
   getCurrentPeriodTransactions()
-    .filter(t => t.type === 'expense' && t.categoryId)
-    .forEach(t => {
+    .filter((t) => t.type === 'expense' && t.categoryId)
+    .forEach((t) => {
       const amount = categoryStats.get(t.categoryId!) || 0;
       categoryStats.set(t.categoryId!, amount + t.amountInBase);
     });
 
-  const data = Array.from(categoryStats.entries())
+  const data = [...categoryStats.entries()]
     .map(([categoryId, amount]) => {
       const category = financeStore.getCategoryById(categoryId);
       return {
         name: `${category?.icon || ''} ${category?.name || '未知'}`,
-        value: amount
+        value: amount,
       };
     })
     .sort((a, b) => b.value - a.value);
@@ -787,51 +496,51 @@ const initExpenseTreeChart = () => {
   const option = {
     tooltip: {
       trigger: 'item',
-      formatter: '{b}: ¥{c} ({d}%)'
+      formatter: '{b}: ¥{c} ({d}%)',
     },
     series: [
       {
         type: 'treemap',
-        data: data,
+        data,
         leafDepth: 1,
         label: {
           show: true,
-          formatter: '{b}\n¥{c}'
+          formatter: '{b}\n¥{c}',
         },
         upperLabel: {
           show: true,
-          height: 30
+          height: 30,
         },
         itemStyle: {
           borderColor: '#fff',
-          borderWidth: 2
+          borderWidth: 2,
         },
         levels: [
           {
             itemStyle: {
               borderColor: '#777',
               borderWidth: 0,
-              gapWidth: 1
+              gapWidth: 1,
             },
             upperLabel: {
-              show: false
-            }
+              show: false,
+            },
           },
           {
             itemStyle: {
               borderColor: '#555',
               borderWidth: 5,
-              gapWidth: 1
+              gapWidth: 1,
             },
             emphasis: {
               itemStyle: {
-                borderColor: '#ddd'
-              }
-            }
-          }
-        ]
-      }
-    ]
+                borderColor: '#ddd',
+              },
+            },
+          },
+        ],
+      },
+    ],
   };
 
   expenseTreeChartInstance.setOption(option);
@@ -839,37 +548,80 @@ const initExpenseTreeChart = () => {
 
 // 表格视图相关状态
 const tableViewYear = ref<number>(dayjs().year());
-const tableViewMode = ref<'summary' | 'category'>('summary');
+const tableViewMode = ref<'category' | 'summary'>('summary');
 
 // 汇总表格列定义
 const summaryTableColumns = [
-  { title: '月份', dataIndex: 'month', key: 'month', width: 100, fixed: 'left' },
-  { title: '收入', dataIndex: 'income', key: 'income', width: 150, align: 'right' },
-  { title: '支出', dataIndex: 'expense', key: 'expense', width: 150, align: 'right' },
+  {
+    title: '月份',
+    dataIndex: 'month',
+    key: 'month',
+    width: 100,
+    fixed: 'left',
+  },
+  {
+    title: '收入',
+    dataIndex: 'income',
+    key: 'income',
+    width: 150,
+    align: 'right',
+  },
+  {
+    title: '支出',
+    dataIndex: 'expense',
+    key: 'expense',
+    width: 150,
+    align: 'right',
+  },
   { title: '净收入', dataIndex: 'net', key: 'net', width: 150, align: 'right' },
-  { title: '交易笔数', dataIndex: 'count', key: 'count', width: 100, align: 'center' },
-  { title: '储蓄率', dataIndex: 'savingsRate', key: 'savingsRate', width: 100, align: 'center' },
+  {
+    title: '交易笔数',
+    dataIndex: 'count',
+    key: 'count',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '储蓄率',
+    dataIndex: 'savingsRate',
+    key: 'savingsRate',
+    width: 100,
+    align: 'center',
+  },
 ];
 
 // 分类表格列定义
 const categoryTableColumns = computed(() => {
   const expenseCategories = financeStore.expenseCategories || [];
   const columns: any[] = [
-    { title: '月份', dataIndex: 'month', key: 'month', width: 100, fixed: 'left' }
+    {
+      title: '月份',
+      dataIndex: 'month',
+      key: 'month',
+      width: 100,
+      fixed: 'left',
+    },
   ];
 
   // 添加每个分类的列
-  expenseCategories.forEach(cat => {
+  expenseCategories.forEach((cat) => {
     columns.push({
       title: `${cat.icon} ${cat.name}`,
       dataIndex: `cat_${cat.id}`,
       key: `cat_${cat.id}`,
       width: 150,
-      align: 'right'
+      align: 'right',
     });
   });
 
-  columns.push({ title: '总计', dataIndex: 'total', key: 'total', width: 150, align: 'right', fixed: 'right' });
+  columns.push({
+    title: '总计',
+    dataIndex: 'total',
+    key: 'total',
+    width: 150,
+    align: 'right',
+    fixed: 'right',
+  });
 
   return columns;
 });
@@ -881,16 +633,16 @@ const monthlyTableData = computed(() => {
 
   for (let month = 1; month <= 12; month++) {
     const monthStr = `${year}-${String(month).padStart(2, '0')}`;
-    const monthTransactions = financeStore.transactions.filter(t => {
+    const monthTransactions = financeStore.transactions.filter((t) => {
       return dayjs(t.transactionDate).format('YYYY-MM') === monthStr;
     });
 
     const income = monthTransactions
-      .filter(t => t.type === 'income')
+      .filter((t) => t.type === 'income')
       .reduce((sum, t) => sum + t.amountInBase, 0);
 
     const expense = monthTransactions
-      .filter(t => t.type === 'expense')
+      .filter((t) => t.type === 'expense')
       .reduce((sum, t) => sum + t.amountInBase, 0);
 
     const net = income - expense;
@@ -902,7 +654,7 @@ const monthlyTableData = computed(() => {
       expense,
       net,
       count: monthTransactions.length,
-      savingsRate
+      savingsRate,
     });
   }
 
@@ -910,7 +662,10 @@ const monthlyTableData = computed(() => {
   const totalIncome = data.reduce((sum, row) => sum + row.income, 0);
   const totalExpense = data.reduce((sum, row) => sum + row.expense, 0);
   const totalCount = data.reduce((sum, row) => sum + row.count, 0);
-  const avgSavingsRate = totalIncome > 0 ? Math.round(((totalIncome - totalExpense) / totalIncome) * 100) : 0;
+  const avgSavingsRate =
+    totalIncome > 0
+      ? Math.round(((totalIncome - totalExpense) / totalIncome) * 100)
+      : 0;
 
   data.push({
     month: '合计',
@@ -918,7 +673,7 @@ const monthlyTableData = computed(() => {
     expense: totalExpense,
     net: totalIncome - totalExpense,
     count: totalCount,
-    savingsRate: avgSavingsRate
+    savingsRate: avgSavingsRate,
   });
 
   return data;
@@ -932,27 +687,34 @@ const monthlyCategoryData = computed(() => {
 
   for (let month = 1; month <= 12; month++) {
     const monthStr = `${year}-${String(month).padStart(2, '0')}`;
-    const monthTransactions = financeStore.transactions.filter(t => {
-      return dayjs(t.transactionDate).format('YYYY-MM') === monthStr && t.type === 'expense';
+    const monthTransactions = financeStore.transactions.filter((t) => {
+      return (
+        dayjs(t.transactionDate).format('YYYY-MM') === monthStr &&
+        t.type === 'expense'
+      );
     });
 
     const row: any = {
       month: `${month}月`,
-      total: 0
+      total: 0,
     };
 
     // 计算每个分类的支出
-    expenseCategories.forEach(cat => {
+    expenseCategories.forEach((cat) => {
       const catExpense = monthTransactions
-        .filter(t => t.categoryId === cat.id)
+        .filter((t) => t.categoryId === cat.id)
         .reduce((sum, t) => sum + t.amountInBase, 0);
 
       if (catExpense > 0) {
-        const total = monthTransactions.reduce((sum, t) => sum + t.amountInBase, 0);
-        const percentage = total > 0 ? Math.round((catExpense / total) * 100) : 0;
+        const total = monthTransactions.reduce(
+          (sum, t) => sum + t.amountInBase,
+          0,
+        );
+        const percentage =
+          total > 0 ? Math.round((catExpense / total) * 100) : 0;
         row[`cat_${cat.id}`] = {
           amount: catExpense,
-          percentage
+          percentage,
         };
         row.total += catExpense;
       }
@@ -964,20 +726,21 @@ const monthlyCategoryData = computed(() => {
   // 添加合计行
   const totalRow: any = {
     month: '合计',
-    total: 0
+    total: 0,
   };
 
-  expenseCategories.forEach(cat => {
+  expenseCategories.forEach((cat) => {
     const catTotal = data.reduce((sum, row) => {
       return sum + (row[`cat_${cat.id}`]?.amount || 0);
     }, 0);
 
     if (catTotal > 0) {
       const grandTotal = data.reduce((sum, row) => sum + row.total, 0);
-      const percentage = grandTotal > 0 ? Math.round((catTotal / grandTotal) * 100) : 0;
+      const percentage =
+        grandTotal > 0 ? Math.round((catTotal / grandTotal) * 100) : 0;
       totalRow[`cat_${cat.id}`] = {
         amount: catTotal,
-        percentage
+        percentage,
       };
       totalRow.total += catTotal;
     }
@@ -996,20 +759,26 @@ const handleTableYearChange = () => {
 // 导出Excel
 const exportMonthlyTable = () => {
   try {
-    const data = tableViewMode.value === 'summary' ? monthlyTableData.value : monthlyCategoryData.value;
+    const data =
+      tableViewMode.value === 'summary'
+        ? monthlyTableData.value
+        : monthlyCategoryData.value;
     const ws = XLSX.utils.json_to_sheet(data);
     const wb = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, ws, `${tableViewYear.value}年数据`);
-    XLSX.writeFile(wb, `财务统计_${tableViewYear.value}年_${tableViewMode.value === 'summary' ? '汇总' : '分类'}.xlsx`);
+    XLSX.writeFile(
+      wb,
+      `财务统计_${tableViewYear.value}年_${tableViewMode.value === 'summary' ? '汇总' : '分类'}.xlsx`,
+    );
 
     notification.success({
       message: '导出成功',
-      description: '数据已成功导出为Excel文件'
+      description: '数据已成功导出为Excel文件',
     });
-  } catch (error) {
+  } catch {
     notification.error({
       message: '导出失败',
-      description: '导出Excel文件时出错，请重试'
+      description: '导出Excel文件时出错，请重试',
     });
   }
 };
@@ -1031,6 +800,498 @@ window.addEventListener('resize', () => {
 });
 </script>
 
+<template>
+  <div class="p-6">
+    <div class="mb-6">
+      <h1 class="mb-2 text-3xl font-bold text-gray-900">📊 财务统计分析</h1>
+      <p class="text-gray-600">多维度智能分析您的财务数据</p>
+    </div>
+
+    <!-- 时间维度选择器 -->
+    <Card class="mb-6">
+      <Tabs v-model:active-key="timeDimension" @change="handleDimensionChange">
+        <TabPane key="monthly" tab="📅 月度分析">
+          <div class="flex items-center space-x-4 py-2">
+            <Button @click="previousPeriod" :disabled="!canGoPrevious">
+              ←
+            </Button>
+            <DatePicker
+              v-model:value="selectedMonth"
+              picker="month"
+              format="YYYY年MM月"
+              @change="handleMonthChange"
+              style="width: 200px"
+            />
+            <Button @click="nextPeriod" :disabled="!canGoNext"> → </Button>
+            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
+          </div>
+        </TabPane>
+        <TabPane key="quarterly" tab="📊 季度分析">
+          <div class="flex items-center space-x-4 py-2">
+            <Button @click="previousPeriod" :disabled="!canGoPrevious">
+              ←
+            </Button>
+            <Select
+              v-model:value="selectedQuarter"
+              style="width: 200px"
+              @change="handleQuarterChange"
+            >
+              <Select.Option
+                v-for="quarter in availableQuarters"
+                :key="quarter.value"
+                :value="quarter.value"
+              >
+                {{ quarter.label }}
+              </Select.Option>
+            </Select>
+            <Button @click="nextPeriod" :disabled="!canGoNext"> → </Button>
+            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
+          </div>
+        </TabPane>
+        <TabPane key="yearly" tab="📈 年度分析">
+          <div class="flex items-center space-x-4 py-2">
+            <Button @click="previousPeriod" :disabled="!canGoPrevious">
+              ←
+            </Button>
+            <Select
+              v-model:value="selectedYear"
+              style="width: 200px"
+              @change="handleYearChange"
+            >
+              <Select.Option
+                v-for="year in availableYears"
+                :key="year"
+                :value="year"
+              >
+                {{ year }}年
+              </Select.Option>
+            </Select>
+            <Button @click="nextPeriod" :disabled="!canGoNext"> → </Button>
+            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
+          </div>
+        </TabPane>
+        <TabPane key="custom" tab="🎯 自定义">
+          <div class="flex items-center space-x-4 py-2">
+            <RangePicker
+              v-model:value="customRange"
+              format="YYYY-MM-DD"
+              @change="handleCustomRangeChange"
+            />
+            <span class="text-gray-500">共 {{ currentPeriodData.transactionCount }} 笔交易</span>
+          </div>
+        </TabPane>
+      </Tabs>
+    </Card>
+
+    <!-- 智能洞察卡片 -->
+    <Card class="mb-6" title="💡 智能洞察">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <div
+          v-for="insight in smartInsights"
+          :key="insight.type"
+          class="rounded-lg border p-4"
+          :class="insight.alertLevel"
+        >
+          <div class="mb-2 flex items-start justify-between">
+            <span class="text-2xl">{{ insight.icon }}</span>
+            <Badge v-if="insight.isAlert" status="error" text="异常" />
+          </div>
+          <h3 class="mb-2 font-semibold">{{ insight.title }}</h3>
+          <p class="mb-3 text-sm text-gray-600">{{ insight.description }}</p>
+          <div class="flex items-center justify-between">
+            <span class="text-xl font-bold" :class="insight.valueClass">{{
+              insight.value
+            }}</span>
+            <span
+              v-if="insight.trend"
+              class="text-sm"
+              :class="insight.trendClass"
+            >
+              <template v-if="insight.trend > 0">↗ +{{ insight.trend }}%</template>
+              <template v-else>↘ {{ insight.trend }}%</template>
+            </span>
+          </div>
+        </div>
+      </div>
+    </Card>
+
+    <!-- 关键指标卡片 -->
+    <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="space-y-2">
+          <div class="text-3xl">💰</div>
+          <p class="text-sm text-gray-500">期间总收入</p>
+          <p class="text-2xl font-bold text-green-600">
+            ¥{{
+              currentPeriodData.totalIncome.toLocaleString('zh-CN', {
+                minimumFractionDigits: 2,
+              })
+            }}
+          </p>
+          <p
+            v-if="comparisonData.incomeTrend !== null"
+            class="text-xs"
+            :class="
+              comparisonData.incomeTrend >= 0
+                ? 'text-green-600'
+                : 'text-red-600'
+            "
+          >
+            {{ comparisonData.incomeCompareText }}
+          </p>
+        </div>
+      </Card>
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="space-y-2">
+          <div class="text-3xl">💸</div>
+          <p class="text-sm text-gray-500">期间总支出</p>
+          <p class="text-2xl font-bold text-red-600">
+            ¥{{
+              currentPeriodData.totalExpense.toLocaleString('zh-CN', {
+                minimumFractionDigits: 2,
+              })
+            }}
+          </p>
+          <p
+            v-if="comparisonData.expenseTrend !== null"
+            class="text-xs"
+            :class="
+              comparisonData.expenseTrend <= 0
+                ? 'text-green-600'
+                : 'text-red-600'
+            "
+          >
+            {{ comparisonData.expenseCompareText }}
+          </p>
+        </div>
+      </Card>
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="space-y-2">
+          <div class="text-3xl">📊</div>
+          <p class="text-sm text-gray-500">平均单笔金额</p>
+          <p class="text-2xl font-bold text-blue-600">
+            ¥{{
+              currentPeriodData.avgAmount.toLocaleString('zh-CN', {
+                minimumFractionDigits: 2,
+              })
+            }}
+          </p>
+          <p class="text-xs text-gray-500">
+            支出笔数: {{ currentPeriodData.expenseCount }}
+          </p>
+        </div>
+      </Card>
+      <Card class="text-center transition-shadow hover:shadow-lg">
+        <div class="space-y-2">
+          <div class="text-3xl">🏆</div>
+          <p class="text-sm text-gray-500">最大单笔支出</p>
+          <p class="text-2xl font-bold text-orange-600">
+            ¥{{
+              currentPeriodData.maxExpense.toLocaleString('zh-CN', {
+                minimumFractionDigits: 2,
+              })
+            }}
+          </p>
+          <p
+            v-if="currentPeriodData.maxExpenseCategory"
+            class="text-xs text-gray-500"
+          >
+            {{ currentPeriodData.maxExpenseCategory }}
+          </p>
+        </div>
+      </Card>
+    </div>
+
+    <!-- 对比分析卡片 -->
+    <Card class="mb-6" title="📈 对比分析">
+      <Tabs v-model:active-key="comparisonType">
+        <TabPane key="mom" tab="环比分析">
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div class="rounded-lg bg-blue-50 p-4">
+              <p class="mb-2 text-sm text-gray-600">支出环比</p>
+              <p
+                class="text-2xl font-bold"
+                :class="
+                  comparisonData.momExpense < 0
+                    ? 'text-green-600'
+                    : 'text-red-600'
+                "
+              >
+                {{ comparisonData.momExpense >= 0 ? '+' : ''
+                }}{{ comparisonData.momExpense }}%
+              </p>
+            </div>
+            <div class="rounded-lg bg-green-50 p-4">
+              <p class="mb-2 text-sm text-gray-600">收入环比</p>
+              <p
+                class="text-2xl font-bold"
+                :class="
+                  comparisonData.momIncome >= 0
+                    ? 'text-green-600'
+                    : 'text-red-600'
+                "
+              >
+                {{ comparisonData.momIncome >= 0 ? '+' : ''
+                }}{{ comparisonData.momIncome }}%
+              </p>
+            </div>
+            <div class="rounded-lg bg-purple-50 p-4">
+              <p class="mb-2 text-sm text-gray-600">交易笔数环比</p>
+              <p class="text-2xl font-bold text-purple-600">
+                {{ comparisonData.momCount >= 0 ? '+' : ''
+                }}{{ comparisonData.momCount }}%
+              </p>
+            </div>
+          </div>
+        </TabPane>
+        <TabPane key="yoy" tab="同比分析">
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div class="rounded-lg bg-blue-50 p-4">
+              <p class="mb-2 text-sm text-gray-600">支出同比</p>
+              <p
+                class="text-2xl font-bold"
+                :class="
+                  comparisonData.yoyExpense < 0
+                    ? 'text-green-600'
+                    : 'text-red-600'
+                "
+              >
+                {{ comparisonData.yoyExpense >= 0 ? '+' : ''
+                }}{{ comparisonData.yoyExpense }}%
+              </p>
+            </div>
+            <div class="rounded-lg bg-green-50 p-4">
+              <p class="mb-2 text-sm text-gray-600">收入同比</p>
+              <p
+                class="text-2xl font-bold"
+                :class="
+                  comparisonData.yoyIncome >= 0
+                    ? 'text-green-600'
+                    : 'text-red-600'
+                "
+              >
+                {{ comparisonData.yoyIncome >= 0 ? '+' : ''
+                }}{{ comparisonData.yoyIncome }}%
+              </p>
+            </div>
+            <div class="rounded-lg bg-purple-50 p-4">
+              <p class="mb-2 text-sm text-gray-600">交易笔数同比</p>
+              <p class="text-2xl font-bold text-purple-600">
+                {{ comparisonData.yoyCount >= 0 ? '+' : ''
+                }}{{ comparisonData.yoyCount }}%
+              </p>
+            </div>
+          </div>
+        </TabPane>
+      </Tabs>
+    </Card>
+
+    <!-- 现金流趋势图 -->
+    <Card class="mb-6" title="💹 现金流趋势">
+      <div ref="cashFlowChart" style="width: 100%; height: 400px"></div>
+    </Card>
+
+    <!-- 支出结构树图 -->
+    <Card class="mb-6" title="🌳 支出结构分析">
+      <div ref="expenseTreeChart" style="width: 100%; height: 500px"></div>
+    </Card>
+
+    <!-- 分类健康度评分 -->
+    <Card class="mb-6" title="💪 分类健康度评分">
+      <div class="space-y-3">
+        <div
+          v-for="health in categoryHealthScores"
+          :key="health.categoryId"
+          class="flex items-center justify-between rounded-lg bg-gray-50 p-3"
+        >
+          <div class="flex items-center space-x-3">
+            <span class="text-2xl">{{ health.icon }}</span>
+            <div>
+              <p class="font-semibold">{{ health.categoryName }}</p>
+              <p class="text-xs text-gray-500">
+                ¥{{
+                  health.amount.toLocaleString('zh-CN', {
+                    minimumFractionDigits: 2,
+                  })
+                }}
+                | {{ health.count }}笔
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center space-x-4">
+            <div class="w-32">
+              <Progress
+                :percent="health.percentage"
+                :status="health.status"
+                :stroke-color="health.color"
+              />
+            </div>
+            <Badge :color="health.badgeColor" :text="health.healthLabel" />
+          </div>
+        </div>
+      </div>
+    </Card>
+
+    <!-- 异常检测 -->
+    <Card v-if="anomalies.length > 0" title="⚠️ 异常交易检测" class="mb-6">
+      <Alert
+        message="发现异常交易"
+        :description="`检测到 ${anomalies.length} 笔可能需要关注的交易`"
+        type="warning"
+        show-icon
+        class="mb-4"
+      />
+      <div class="space-y-2">
+        <div
+          v-for="anomaly in anomalies"
+          :key="anomaly.id"
+          class="rounded border-l-4 border-orange-500 bg-orange-50 p-3"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="font-semibold">{{ anomaly.description }}</p>
+              <p class="text-sm text-gray-600">
+                {{ anomaly.date }} | {{ anomaly.category }}
+              </p>
+            </div>
+            <div class="text-right">
+              <p class="text-lg font-bold text-red-600">
+                -¥{{
+                  anomaly.amount.toLocaleString('zh-CN', {
+                    minimumFractionDigits: 2,
+                  })
+                }}
+              </p>
+              <p class="text-xs text-orange-600">{{ anomaly.reason }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+
+    <!-- 月度表格视图 -->
+    <Card title="📋 月度数据表格" class="mb-6">
+      <div class="mb-4 flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+          <Select
+            v-model:value="tableViewYear"
+            style="width: 120px"
+            @change="handleTableYearChange"
+          >
+            <Select.Option
+              v-for="year in availableYears"
+              :key="year"
+              :value="year"
+            >
+              {{ year }}年
+            </Select.Option>
+          </Select>
+          <Radio.Group v-model:value="tableViewMode" button-style="solid">
+            <Radio.Button value="summary">收支汇总</Radio.Button>
+            <Radio.Button value="category">分类明细</Radio.Button>
+          </Radio.Group>
+        </div>
+        <Button type="primary" @click="exportMonthlyTable">
+          📥 导出Excel
+        </Button>
+      </div>
+
+      <!-- 汇总视图 -->
+      <Table
+        v-if="tableViewMode === 'summary'"
+        :columns="summaryTableColumns"
+        :data-source="monthlyTableData"
+        :pagination="false"
+        :scroll="{ x: 800 }"
+        bordered
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'income'">
+            <span class="font-semibold text-green-600">
+              ¥{{
+                record.income.toLocaleString('zh-CN', {
+                  minimumFractionDigits: 2,
+                })
+              }}
+            </span>
+          </template>
+          <template v-else-if="column.key === 'expense'">
+            <span class="font-semibold text-red-600">
+              ¥{{
+                record.expense.toLocaleString('zh-CN', {
+                  minimumFractionDigits: 2,
+                })
+              }}
+            </span>
+          </template>
+          <template v-else-if="column.key === 'net'">
+            <span
+              :class="record.net >= 0 ? 'text-green-600' : 'text-red-600'"
+              class="font-bold"
+            >
+              {{ record.net >= 0 ? '+' : '' }}¥{{
+                record.net.toLocaleString('zh-CN', { minimumFractionDigits: 2 })
+              }}
+            </span>
+          </template>
+          <template v-else-if="column.key === 'savingsRate'">
+            <span
+              :class="
+                record.savingsRate >= 30
+                  ? 'text-green-600'
+                  : record.savingsRate >= 10
+                    ? 'text-orange-600'
+                    : 'text-red-600'
+              "
+            >
+              {{ record.savingsRate }}%
+            </span>
+          </template>
+        </template>
+      </Table>
+
+      <!-- 分类明细视图 -->
+      <Table
+        v-else
+        :columns="categoryTableColumns"
+        :data-source="monthlyCategoryData"
+        :pagination="false"
+        :scroll="{ x: 1200 }"
+        bordered
+      >
+        <template #bodyCell="{ column, record }">
+          <template
+            v-if="column.dataIndex !== 'month' && column.dataIndex !== 'total'"
+          >
+            <div v-if="record[column.dataIndex]">
+              <div class="font-semibold">
+                ¥{{
+                  record[column.dataIndex].amount.toLocaleString('zh-CN', {
+                    minimumFractionDigits: 2,
+                  })
+                }}
+              </div>
+              <div class="text-xs text-gray-500">
+                {{ record[column.dataIndex].percentage }}%
+              </div>
+            </div>
+            <div v-else class="text-gray-400">-</div>
+          </template>
+          <template v-else-if="column.key === 'total'">
+            <span class="font-bold text-red-600">
+              ¥{{
+                record.total.toLocaleString('zh-CN', {
+                  minimumFractionDigits: 2,
+                })
+              }}
+            </span>
+          </template>
+        </template>
+      </Table>
+    </Card>
+  </div>
+</template>
+
 <style scoped>
 .ant-card {
   border-radius: 8px;
diff --git a/apps/web-antd/src/views/finance/transactions/index.vue b/apps/web-antd/src/views/finance/transactions/index.vue
index ba3dea77..ceb61ba2 100644
--- a/apps/web-antd/src/views/finance/transactions/index.vue
+++ b/apps/web-antd/src/views/finance/transactions/index.vue
@@ -1398,7 +1398,9 @@ const _handleAccountChange = (account: string) => {
         <div class="flex space-x-2">
           <Button @click="openRecycleBin">
             🗑️ 回收站
-            <span v-if="deletedTransactions.length > 0" class="ml-1">({{ deletedTransactions.length }})</span>
+            <span v-if="deletedTransactions.length > 0" class="ml-1"
+              >({{ deletedTransactions.length }})</span
+            >
           </Button>
           <Button type="primary" @click="quickAddIncome"> 💰 添加收入 </Button>
           <Button @click="quickAddExpense"> 💸 添加支出 </Button>
@@ -1526,7 +1528,9 @@ const _handleAccountChange = (account: string) => {
           <Row :gutter="16">
             <Col :span="12">
               <div class="mb-4">
-                <label class="mb-2 block text-sm font-medium">货币类型 <span class="text-red-500">*</span></label>
+                <label class="mb-2 block text-sm font-medium"
+                  >货币类型 <span class="text-red-500">*</span></label
+                >
                 <Radio.Group
                   v-model:value="quickIncomeForm.currency"
                   size="large"
@@ -1581,7 +1585,9 @@ const _handleAccountChange = (account: string) => {
               </InputNumber>
             </Col>
             <Col :span="8">
-              <label class="mb-2 block text-sm font-medium">总金额 <span class="text-red-500">*</span></label>
+              <label class="mb-2 block text-sm font-medium"
+                >总金额 <span class="text-red-500">*</span></label
+              >
               <InputNumber
                 v-model:value="quickIncomeForm.amount"
                 :min="0"
@@ -1599,7 +1605,9 @@ const _handleAccountChange = (account: string) => {
           <!-- 直接输入金额模式 -->
           <Row v-else :gutter="16" class="mb-4">
             <Col :span="24">
-              <label class="mb-2 block text-sm font-medium">金额 <span class="text-red-500">*</span></label>
+              <label class="mb-2 block text-sm font-medium"
+                >金额 <span class="text-red-500">*</span></label
+              >
               <InputNumber
                 v-model:value="quickIncomeForm.amount"
                 :min="0"
@@ -1640,7 +1648,9 @@ const _handleAccountChange = (account: string) => {
           </Row>
 
           <div>
-            <label class="mb-2 block text-sm font-medium">收入账户 <span class="text-red-500">*</span></label>
+            <label class="mb-2 block text-sm font-medium"
+              >收入账户 <span class="text-red-500">*</span></label
+            >
             <Radio.Group
               v-model:value="quickIncomeForm.accountId"
               size="large"
@@ -2382,7 +2392,9 @@ const _handleAccountChange = (account: string) => {
                   </Select>
                 </div>
                 <div>
-                  <label class="mb-1 block text-sm font-medium">币种字段（可选，默认USD）</label>
+                  <label class="mb-1 block text-sm font-medium"
+                    >币种字段（可选，默认USD）</label
+                  >
                   <Select
                     v-model:value="importMapping.currency"
                     placeholder="选择对应列"
diff --git a/apps/web-antd/vite.config.mts b/apps/web-antd/vite.config.mts
index d69d3908..12e46cdd 100644
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -9,7 +9,7 @@ export default defineConfig(async () => {
           '/api': {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
-            target: 'http://localhost:3000/api',
+            target: 'http://localhost:5320/api',
             ws: true,
           },
         },