历史预算计算

重构预算分析图表组件，添加每日/每月趋势统计功能：
1. 在Repository层添加趋势统计接口
2. 在Service层实现趋势数据计算逻辑
3. 优化前端图表展示，合并偏差分析图表
4. 改进燃尽图使用实际趋势数据
5. 调整UI样式和交互体验

.gitignore

@@ -404,3 +404,4 @@ FodyWeavers.xsd
 Web/dist
 # ESLint
 .eslintcache
+.aider*

Directory.Packages.props

@@ -1,7 +1,8 @@
 <Project>
   <ItemGroup>
     <!-- Email & MIME Libraries -->
-    <PackageVersion Include="FreeSql" Version="3.5.304" />
+    <PackageVersion Include="FreeSql" Version="3.5.305" />
+    <PackageVersion Include="FreeSql.Extensions.JsonMap" Version="3.5.305" />
     <PackageVersion Include="MailKit" Version="4.14.1" />
     <PackageVersion Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.1" />
     <PackageVersion Include="MimeKit" Version="4.14.0" />
@@ -20,7 +21,7 @@
     <PackageVersion Include="Microsoft.AspNetCore.OpenApi" Version="10.0.0" />
     <PackageVersion Include="Scalar.AspNetCore" Version="2.11.9" />
     <!-- Database -->
-    <PackageVersion Include="FreeSql.Provider.Sqlite" Version="3.5.304" />
+    <PackageVersion Include="FreeSql.Provider.Sqlite" Version="3.5.305" />
     <PackageVersion Include="WebPush" Version="1.0.12" />
     <PackageVersion Include="Yitter.IdGenerator" Version="1.0.14" />
     <!-- File Processing -->

Entity/BudgetArchive.cs

@@ -2,31 +2,6 @@
 
 public class BudgetArchive : BaseEntity
 {
-    /// <summary>
-    /// 预算Id
-    /// </summary>
-    public long BudgetId { get; set; }
-
-    /// <summary>
-    /// 预算周期类型
-    /// </summary>
-    public BudgetPeriodType BudgetType { get; set; }
-
-    /// <summary>
-    /// 预算金额
-    /// </summary>
-    public decimal BudgetedAmount { get; set; }
-
-    /// <summary>
-    /// 周期内实际发生金额
-    /// </summary>
-    public decimal RealizedAmount { get; set; }
-
-    /// <summary>
-    /// 详细描述
-    /// </summary>
-    public string? Description { get; set; }
-
     /// <summary>
     /// 归档目标年份
     /// </summary>
@@ -37,8 +12,79 @@ public class BudgetArchive : BaseEntity
     /// </summary>
     public int Month { get; set; }
 
+    /// <summary>
+    /// 归档内容
+    /// </summary>
+    [JsonMap]
+    public BudgetArchiveContent[] Content { get; set; } = [];
+
     /// <summary>
     /// 归档日期
     /// </summary>
     public DateTime ArchiveDate { get; set; } = DateTime.Now;
+
+    /// <summary>
+    /// 支出结余（预算 - 实际，正数表示省钱，负数表示超支）
+    /// </summary>
+    public decimal ExpenseSurplus { get; set; }
+
+    /// <summary>
+    /// 收入结余（实际 - 预算，正数表示超额收入，负数表示未达预期）
+    /// </summary>
+    public decimal IncomeSurplus { get; set; }
+
+    public string? Summary { get; set; }
+}
+
+public record BudgetArchiveContent
+{
+    /// <summary>
+    /// 预算ID
+    /// </summary>
+    public long Id { get; set; }
+
+    /// <summary>
+    /// 预算名称
+    /// </summary>
+    public string Name { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 统计周期
+    /// </summary>
+    public BudgetPeriodType Type { get; set; } = BudgetPeriodType.Month;
+
+    /// <summary>
+    /// 预算金额
+    /// </summary>
+    public decimal Limit { get; set; }
+
+    /// <summary>
+    /// 实际金额
+    /// </summary>
+    public decimal Actual { get; set; }
+
+    /// <summary>
+    /// 预算类别
+    /// </summary>
+    public BudgetCategory Category { get; set; }
+
+    /// <summary>
+    /// 相关分类 (逗号分隔的分类名称)
+    /// </summary>
+    public string[] SelectedCategories { get; set; } = [];
+
+    /// <summary>
+    /// 不记额预算
+    /// </summary>
+    public bool NoLimit { get; set; } = false;
+
+    /// <summary>
+    /// 硬性消费
+    /// </summary>
+    public bool IsMandatoryExpense { get; set; } = false;
+
+    /// <summary>
+    /// 描述说明
+    /// </summary>
+    public string Description { get; set; } = string.Empty;
 }

Entity/BudgetRecord.cs

@@ -34,6 +34,16 @@ public class BudgetRecord : BaseEntity
     /// 开始日期
     /// </summary>
     public DateTime StartDate { get; set; } = DateTime.Now;
+
+    /// <summary>
+    /// 不记额预算（选中后该预算没有预算金额，发生的收入或支出直接在存款中加减）
+    /// </summary>
+    public bool NoLimit { get; set; } = false;
+
+    /// <summary>
+    /// 硬性消费（固定消费，如房租、水电等。当是当前年月且为硬性消费时，会根据经过的天数累加Current）
+    /// </summary>
+    public bool IsMandatoryExpense { get; set; } = false;
 }
 
 public enum BudgetPeriodType

Entity/Entity.csproj

@@ -1,6 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
   <ItemGroup>
     <PackageReference Include="FreeSql" />
+    <PackageReference Include="FreeSql.Extensions.JsonMap" />
     <PackageReference Include="Yitter.IdGenerator" />
   </ItemGroup>
 </Project>

Repository/BudgetArchiveRepository.cs

@@ -2,19 +2,21 @@
 
 public interface IBudgetArchiveRepository : IBaseRepository<BudgetArchive>
 {
-    Task<BudgetArchive?> GetArchiveAsync(long budgetId, int year, int month);
+    Task<BudgetArchive?> GetArchiveAsync(int year, int month);
+
     Task<List<BudgetArchive>> GetListAsync(int year, int month);
+
+    Task<List<BudgetArchive>> GetArchivesByYearAsync(int year);
 }
 
 public class BudgetArchiveRepository(
     IFreeSql freeSql
 ) : BaseRepository<BudgetArchive>(freeSql), IBudgetArchiveRepository
 {
-    public async Task<BudgetArchive?> GetArchiveAsync(long budgetId, int year, int month)
+    public async Task<BudgetArchive?> GetArchiveAsync(int year, int month)
     {
         return await FreeSql.Select<BudgetArchive>()
-            .Where(a => a.BudgetId == budgetId &&
-                        a.Year == year &&
+            .Where(a => a.Year == year &&
                         a.Month == month)
             .ToOneAsync();
     }
@@ -22,13 +24,15 @@ public class BudgetArchiveRepository(
     public async Task<List<BudgetArchive>> GetListAsync(int year, int month)
     {
         return await FreeSql.Select<BudgetArchive>()
-            .Where(
-                a => a.BudgetType == BudgetPeriodType.Month &&
-                     a.Year == year &&
-                     a.Month == month ||
-                     a.BudgetType == BudgetPeriodType.Year &&
-                     a.Year == year
-            )
+            .Where(a => a.Year == year && a.Month == month)
+            .ToListAsync();
+    }
+
+    public async Task<List<BudgetArchive>> GetArchivesByYearAsync(int year)
+    {
+        return await FreeSql.Select<BudgetArchive>()
+            .Where(a => a.Year == year)
+            .OrderBy(a => a.Month)
             .ToListAsync();
     }
 }

Repository/TransactionRecordRepository.cs

@@ -57,8 +57,16 @@ public interface ITransactionRecordRepository : IBaseRepository<TransactionRecor
     /// </summary>
     /// <param name="year">年份</param>
     /// <param name="month">月份</param>
-    /// <returns>每天的消费笔数和金额</returns>
-    Task<Dictionary<string, (int count, decimal amount)>> GetDailyStatisticsAsync(int year, int month);
+    /// <returns>每天的消费笔数和金额详情</returns>
+    Task<Dictionary<string, (int count, decimal expense, decimal income, decimal saving)>> GetDailyStatisticsAsync(int year, int month, string? savingClassify = null);
+
+    /// <summary>
+    /// 获取指定日期范围内的每日统计
+    /// </summary>
+    /// <param name="startDate">开始日期</param>
+    /// <param name="endDate">结束日期</param>
+    /// <returns>每天的消费笔数和金额详情</returns>
+    Task<Dictionary<string, (int count, decimal expense, decimal income, decimal saving)>> GetDailyStatisticsByRangeAsync(DateTime startDate, DateTime endDate, string? savingClassify = null);
 
     /// <summary>
     /// 获取指定日期范围内的交易记录
@@ -190,6 +198,16 @@ public interface ITransactionRecordRepository : IBaseRepository<TransactionRecor
     /// <returns>影响行数</returns>
     Task<int> ConfirmAllUnconfirmedAsync(long[] ids);
 
+    /// <summary>
+    /// 获取指定分类在指定时间范围内的每日/每月统计趋势
+    /// </summary>
+    Task<Dictionary<DateTime, decimal>> GetFilteredTrendStatisticsAsync(
+        DateTime startDate,
+        DateTime endDate,
+        TransactionType type,
+        IEnumerable<string> classifies,
+        bool groupByMonth = false);
+
     /// <summary>
     /// 更新分类名称
     /// </summary>
@@ -337,11 +355,16 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
             .ToListAsync(t => t.Classify);
     }
 
-    public async Task<Dictionary<string, (int count, decimal amount)>> GetDailyStatisticsAsync(int year, int month)
+    public async Task<Dictionary<string, (int count, decimal expense, decimal income, decimal saving)>> GetDailyStatisticsAsync(int year, int month, string? savingClassify = null)
     {
         var startDate = new DateTime(year, month, 1);
         var endDate = startDate.AddMonths(1);
 
+        return await GetDailyStatisticsByRangeAsync(startDate, endDate, savingClassify);
+    }
+
+    public async Task<Dictionary<string, (int count, decimal expense, decimal income, decimal saving)>> GetDailyStatisticsByRangeAsync(DateTime startDate, DateTime endDate, string? savingClassify = null)
+    {
         var records = await FreeSql.Select<TransactionRecord>()
             .Where(t => t.OccurredAt >= startDate && t.OccurredAt < endDate)
             .ToListAsync();
@@ -353,11 +376,16 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
                 g =>
                 {
                     // 分别统计收入和支出
-                    var income = g.Where(t => t.Type == TransactionType.Income).Sum(t => t.Amount);
-                    var expense = g.Where(t => t.Type == TransactionType.Expense).Sum(t => t.Amount);
-                    // 净额 = 收入 - 支出（消费大于收入时为负数）
-                    var netAmount = income - expense;
-                    return (count: g.Count(), amount: netAmount);
+                    var income = g.Where(t => t.Type == TransactionType.Income).Sum(t => Math.Abs(t.Amount));
+                    var expense = g.Where(t => t.Type == TransactionType.Expense).Sum(t => Math.Abs(t.Amount));
+
+                    var saving = 0m;
+                    if(!string.IsNullOrEmpty(savingClassify))
+                    {
+                        saving = g.Where(t => savingClassify.Split(',').Contains(t.Classify)).Sum(t => Math.Abs(t.Amount));
+                    }
+
+                    return (count: g.Count(), expense, income, saving);
                 }
             );
 
@@ -499,19 +527,11 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
             {
                 statistics.TotalExpense += amount;
                 statistics.ExpenseCount++;
-                if (amount > statistics.MaxExpense)
-                {
-                    statistics.MaxExpense = amount;
-                }
             }
             else if (record.Type == TransactionType.Income)
             {
                 statistics.TotalIncome += amount;
                 statistics.IncomeCount++;
-                if (amount > statistics.MaxIncome)
-                {
-                    statistics.MaxIncome = amount;
-                }
             }
         }
 
@@ -709,6 +729,37 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
             .Where(t => ids.Contains(t.Id))
             .ExecuteAffrowsAsync();
     }
+
+    public async Task<Dictionary<DateTime, decimal>> GetFilteredTrendStatisticsAsync(
+        DateTime startDate,
+        DateTime endDate,
+        TransactionType type,
+        IEnumerable<string> classifies,
+        bool groupByMonth = false)
+    {
+        var query = FreeSql.Select<TransactionRecord>()
+            .Where(t => t.OccurredAt >= startDate && t.OccurredAt <= endDate && t.Type == type);
+
+        if (classifies != null && classifies.Any())
+        {
+            query = query.Where(t => classifies.Contains(t.Classify));
+        }
+
+        var list = await query.ToListAsync(t => new { t.OccurredAt, t.Amount });
+
+        if (groupByMonth)
+        {
+            return list
+                .GroupBy(t => new DateTime(t.OccurredAt.Year, t.OccurredAt.Month, 1))
+                .ToDictionary(g => g.Key, g => g.Sum(x => Math.Abs(x.Amount)));
+        }
+        else
+        {
+            return list
+                .GroupBy(t => t.OccurredAt.Date)
+                .ToDictionary(g => g.Key, g => g.Sum(x => Math.Abs(x.Amount)));
+        }
+    }
 }
 
 /// <summary>
@@ -760,8 +811,6 @@ public class MonthlyStatistics
     public int ExpenseCount { get; set; }
     public int IncomeCount { get; set; }
     public int TotalCount { get; set; }
-    public decimal MaxExpense { get; set; }
-    public decimal MaxIncome { get; set; }
 }
 
 /// <summary>

Service/Jobs/BudgetArchiveJob.cs

@@ -23,6 +23,8 @@ public class BudgetArchiveJob(
 
             using var scope = serviceProvider.CreateScope();
             var budgetService = scope.ServiceProvider.GetRequiredService<IBudgetService>();
+            
+            // 归档月度数据
             var result = await budgetService.ArchiveBudgetsAsync(year, month);
 
             if (string.IsNullOrEmpty(result))

Web/.prettierrc.json

@@ -2,5 +2,6 @@
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
   "singleQuote": true,
-  "printWidth": 100
+  "printWidth": 100,
+  "trailingComma": "none"
 }

Web/eslint.config.js

@@ -1,52 +1,82 @@
-import js from '@eslint/js'
+import js from '@eslint/js'
 import globals from 'globals'
 import pluginVue from 'eslint-plugin-vue'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 
 export default [
   {
-    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', '**/node_modules/**', '.nuxt/**'],
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', '**/node_modules/**', '.nuxt/**']
   },
+  // Load Vue recommended rules first (sets up parser etc.)
+  ...pluginVue.configs['flat/recommended'],
+
+  // General Configuration for all JS/Vue files
   {
-    files: ['**/*.{js,mjs,jsx}'],
+    files: ['**/*.{js,mjs,jsx,vue}'],
     languageOptions: {
       globals: {
-        ...globals.browser,
+        ...globals.browser
       },
-      parserOptions: {
       ecmaVersion: 'latest',
-        sourceType: 'module',
-      },
+      sourceType: 'module'
     },
     rules: {
+      // Import standard JS recommended rules
       ...js.configs.recommended.rules,
-      'indent': ['error', 2],
+
+      // --- Logic & Best Practices ---
+      'no-unused-vars': ['warn', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_'
+      }],
+      'no-undef': 'error',
+      'no-console': ['warn', { allow: ['warn', 'error', 'info'] }],
+      'no-debugger': 'warn',
+      'eqeqeq': ['error', 'always', { null: 'ignore' }],
+      'curly': ['error', 'all'],
+      'prefer-const': 'warn',
+      'no-var': 'error',
+
+      // --- Formatting & Style (User requested warnings) ---
+      'indent': ['error', 2, { SwitchCase: 1 }],
       'quotes': ['error', 'single', { avoidEscape: true }],
       'semi': ['error', 'never'],
-      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
       'comma-dangle': ['error', 'never'],
       'no-trailing-spaces': 'error',
       'no-multiple-empty-lines': ['error', { max: 1 }],
       'space-before-function-paren': ['error', 'always'],
+      'object-curly-spacing': ['error', 'always'],
+      'array-bracket-spacing': ['error', 'never']
+    }
   },
-  },
-  ...pluginVue.configs['flat/recommended'],
+
+  // Vue Specific Overrides
   {
     files: ['**/*.vue'],
     rules: {
       'vue/multi-word-component-names': 'off',
       'vue/no-v-html': 'warn',
+
+      // Turn off standard indent for Vue files to avoid conflicts with vue/html-indent
+      // or script indentation issues. Vue plugin handles this better.
       'indent': 'off',
+      // Ensure Vue's own indentation rules are active (they are in 'recommended' but let's be explicit if needed)
+      'vue/html-indent': ['error', 2],
+      'vue/script-indent': ['error', 2, {
+        baseIndent: 0,
+        switchCase: 1,
+        ignores: []
+      }]
+    }
   },
-  },
-  skipFormatting,
+
+  // Service Worker specific globals
   {
     files: ['**/service-worker.js', '**/src/registerServiceWorker.js'],
     languageOptions: {
       globals: {
-        ...globals.serviceworker,
-        ...globals.browser,
-      },
-    },
-  },
+        ...globals.serviceworker
+      }
+    }
+  }
 ]

Web/package.json

@@ -11,11 +11,12 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --fix --cache",
-    "format": "prettier --write --experimental-cli src/"
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "axios": "^1.13.2",
     "dayjs": "^1.11.19",
+    "echarts": "^6.0.0",
     "pinia": "^3.0.4",
     "vant": "^4.9.22",
     "vue": "^3.5.25",

Web/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       dayjs:
         specifier: ^1.11.19
         version: 1.11.19
+      echarts:
+        specifier: ^6.0.0
+        version: 6.0.0
       pinia:
         specifier: ^3.0.4
         version: 3.0.4(vue@3.5.26)
@@ -787,6 +790,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
   electron-to-chromium@1.5.267:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
 
@@ -1296,6 +1302,9 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -1435,6 +1444,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
 snapshots:
 
   '@babel/code-frame@7.27.1':
@@ -2131,6 +2143,11 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
   electron-to-chromium@1.5.267: {}
 
   entities@7.0.0: {}
@@ -2611,6 +2628,8 @@ snapshots:
 
   totalist@3.0.1: {}
 
+  tslib@2.3.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -2744,3 +2763,7 @@ snapshots:
   yallist@3.1.1: {}
 
   yocto-queue@0.1.0: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0

Web/public/service-worker.js

@@ -1,56 +1,56 @@
-const VERSION = '1.0.0'; // Build Time: 2026-01-07 15:59:36
-const CACHE_NAME = `emailbill-${VERSION}`;
+const VERSION = '1.0.0' // Build Time: 2026-01-07 15:59:36
+const CACHE_NAME = `emailbill-${VERSION}`
 const urlsToCache = [
   '/',
   '/index.html',
   '/favicon.ico',
   '/manifest.json'
-];
+]
 
 // 安装 Service Worker
 self.addEventListener('install', (event) => {
-  console.log('[Service Worker] 安装中...');
+  console.log('[Service Worker] 安装中...')
   event.waitUntil(
     caches.open(CACHE_NAME)
       .then((cache) => {
-        console.log('[Service Worker] 缓存文件');
-        return cache.addAll(urlsToCache);
+        console.log('[Service Worker] 缓存文件')
+        return cache.addAll(urlsToCache)
+      })
+  )
 })
-  );
-});
 
 // 监听跳过等待消息
 self.addEventListener('message', (event) => {
   if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
+    self.skipWaiting()
   }
-});
+})
 
 // 激活 Service Worker
 self.addEventListener('activate', (event) => {
-  console.log('[Service Worker] 激活中...');
+  console.log('[Service Worker] 激活中...')
   event.waitUntil(
     caches.keys().then((cacheNames) => {
       return Promise.all(
         cacheNames.map((cacheName) => {
           if (cacheName !== CACHE_NAME) {
-            console.log('[Service Worker] 删除旧缓存:', cacheName);
-            return caches.delete(cacheName);
+            console.log('[Service Worker] 删除旧缓存:', cacheName)
+            return caches.delete(cacheName)
           }
         })
-      );
+      )
     }).then(() => self.clients.claim())
-  );
-});
+  )
+})
 
 // 拦截请求
 self.addEventListener('fetch', (event) => {
-  const { request } = event;
-  const url = new URL(request.url);
+  const { request } = event
+  const url = new URL(request.url)
 
   // 跳过跨域请求
   if (url.origin !== location.origin) {
-    return;
+    return
   }
 
   // API请求使用网络优先策略
@@ -60,19 +60,19 @@ self.addEventListener('fetch', (event) => {
         .then((response) => {
           // 只针对成功的GET请求进行缓存
           if (request.method === 'GET' && response.status === 200) {
-            const responseClone = response.clone();
+            const responseClone = response.clone()
             caches.open(CACHE_NAME).then((cache) => {
-              cache.put(request, responseClone);
-            });
+              cache.put(request, responseClone)
+            })
           }
-          return response;
+          return response
         })
         .catch(() => {
           // 网络失败时尝试从缓存获取
-          return caches.match(request);
+          return caches.match(request)
         })
-    );
-    return;
+    )
+    return
   }
 
   // 页面请求使用网络优先策略，确保能获取到最新的 index.html
@@ -80,17 +80,17 @@ self.addEventListener('fetch', (event) => {
     event.respondWith(
       fetch(request)
         .then((response) => {
-          const responseClone = response.clone();
+          const responseClone = response.clone()
           caches.open(CACHE_NAME).then((cache) => {
-            cache.put(request, responseClone);
-          });
-          return response;
+            cache.put(request, responseClone)
+          })
+          return response
         })
         .catch(() => {
-          return caches.match('/index.html') || caches.match(request);
+          return caches.match('/index.html') || caches.match(request)
         })
-    );
-    return;
+    )
+    return
   }
 
   // 其他静态资源使用缓存优先策略
@@ -98,50 +98,50 @@ self.addEventListener('fetch', (event) => {
     caches.match(request)
       .then((response) => {
         if (response) {
-          return response;
+          return response
         }
         return fetch(request).then((response) => {
           // 检查是否是有效响应
           if (!response || response.status !== 200 || response.type !== 'basic') {
-            return response;
+            return response
           }
 
-          const responseClone = response.clone();
+          const responseClone = response.clone()
           caches.open(CACHE_NAME).then((cache) => {
-            cache.put(request, responseClone);
-          });
+            cache.put(request, responseClone)
+          })
 
-          return response;
-        });
+          return response
+        })
       })
       .catch(() => {
         // 返回离线页面或默认内容
         if (request.destination === 'document') {
-          return caches.match('/index.html');
+          return caches.match('/index.html')
         }
       })
-  );
-});
+  )
+})
 
 // 后台同步
 self.addEventListener('sync', (event) => {
-  console.log('[Service Worker] 后台同步:', event.tag);
+  console.log('[Service Worker] 后台同步:', event.tag)
   if (event.tag === 'sync-data') {
-    event.waitUntil(syncData());
+    event.waitUntil(syncData())
   }
-});
+})
 
 // 推送通知
 self.addEventListener('push', (event) => {
-  console.log('[Service Worker] 收到推送消息');
-  let data = { title: '账单管理', body: '您有新的消息', url: '/', icon: '/icons/icon-192x192.png' };
+  console.log('[Service Worker] 收到推送消息')
+  let data = { title: '账单管理', body: '您有新的消息', url: '/', icon: '/icons/icon-192x192.png' }
 
   if (event.data) {
     try {
-      const json = event.data.json();
-      data = { ...data, ...json };
+      const json = event.data.json()
+      data = { ...data, ...json }
     } catch {
-      data.body = event.data.text();
+      data.body = event.data.text()
     }
   }
 
@@ -153,41 +153,41 @@ self.addEventListener('push', (event) => {
     tag: 'emailbill-notification',
     requireInteraction: false,
     data: { url: data.url }
-  };
+  }
 
   event.waitUntil(
     self.registration.showNotification(data.title, options)
-  );
-});
+  )
+})
 
 // 通知点击
 self.addEventListener('notificationclick', (event) => {
-  console.log('[Service Worker] 通知被点击');
-  event.notification.close();
-  const urlToOpen = event.notification.data?.url || '/';
+  console.log('[Service Worker] 通知被点击')
+  event.notification.close()
+  const urlToOpen = event.notification.data?.url || '/'
   event.waitUntil(
     clients.matchAll({ type: 'window', includeUncontrolled: true }).then((windowClients) => {
       // 如果已经打开了该 URL，则聚焦
       for (let i = 0; i < windowClients.length; i++) {
-        const client = windowClients[i];
+        const client = windowClients[i]
         if (client.url === urlToOpen && 'focus' in client) {
-          return client.focus();
+          return client.focus()
         }
       }
       // 否则打开新窗口
       if (clients.openWindow) {
-        return clients.openWindow(urlToOpen);
+        return clients.openWindow(urlToOpen)
       }
     })
-  );
-});
+  )
+})
 
 // 数据同步函数
 async function syncData () {
   try {
     // 这里添加需要同步的逻辑
-    console.log('[Service Worker] 执行数据同步');
+    console.log('[Service Worker] 执行数据同步')
   } catch (error) {
-    console.error('[Service Worker] 同步失败:', error);
+    console.error('[Service Worker] 同步失败:', error)
   }
 }

Web/src/App.vue

@@ -3,10 +3,13 @@
     <div class="app-root">
       <RouterView />
       <van-tabbar v-show="showTabbar" v-model="active">
-        <van-tabbar-item name="ccalendar" icon="notes" to="/calendar">
-          日历
-        </van-tabbar-item>
-        <van-tabbar-item name="statistics" icon="chart-trending-o" to="/" @click="handleTabClick('/statistics')">
+        <van-tabbar-item name="ccalendar" icon="notes" to="/calendar"> 日历 </van-tabbar-item>
+        <van-tabbar-item
+          name="statistics"
+          icon="chart-trending-o"
+          to="/"
+          @click="handleTabClick('/statistics')"
+        >
           统计
         </van-tabbar-item>
         <van-tabbar-item
@@ -18,12 +21,15 @@
         >
           账单
         </van-tabbar-item>
-        <van-tabbar-item name="budget" icon="bill-o" to="/budget" @click="handleTabClick('/budget')">
+        <van-tabbar-item
+          name="budget"
+          icon="bill-o"
+          to="/budget"
+          @click="handleTabClick('/budget')"
+        >
           预算
         </van-tabbar-item>
-        <van-tabbar-item name="setting" icon="setting" to="/setting">
-          设置
-        </van-tabbar-item>
+        <van-tabbar-item name="setting" icon="setting" to="/setting"> 设置 </van-tabbar-item>
       </van-tabbar>
       <GlobalAddBill v-if="isShowAddBill" @success="handleAddTransactionSuccess" />
 
@@ -85,12 +91,14 @@ onUnmounted(() => {
 const route = useRoute()
 // 根据路由判断是否显示Tabbar
 const showTabbar = computed(() => {
-  return route.path === '/' ||
+  return (
+    route.path === '/' ||
     route.path === '/calendar' ||
     route.path === '/message' ||
     route.path === '/setting' ||
     route.path === '/balance' ||
     route.path === '/budget'
+  )
 })
 
 const active = ref('')
@@ -116,11 +124,14 @@ setInterval(() => {
 }, 60 * 1000) // 每60秒更新一次未读消息数
 
 // 监听路由变化调整
-watch(() => route.path, (newPath) => {
+watch(
+  () => route.path,
+  (newPath) => {
     setActive(newPath)
 
     messageStore.updateUnreadCount()
-})
+  }
+)
 
 const setActive = (path) => {
   active.value = (() => {
@@ -142,10 +153,7 @@ const setActive = (path) => {
 }
 
 const isShowAddBill = computed(() => {
-  return route.path === '/' 
-  || route.path === '/calendar' 
-  || route.path === '/balance'
-  || route.path === '/message'
+  return route.path === '/' || route.path === '/balance' || route.path === '/message'
 })
 
 onUnmounted(() => {
@@ -166,7 +174,6 @@ const handleAddTransactionSuccess = () => {
   const event = new Event('transactions-changed')
   window.dispatchEvent(event)
 }
-
 </script>
 
 <style scoped>

Web/src/api/billImport.js

@@ -26,7 +26,8 @@ export const uploadBillFile = (file, type) => {
       Authorization: `Bearer ${useAuthStore().token || ''}`
     },
     timeout: 60000 // 文件上传增加超时时间
-  }).then(response => {
+  })
+    .then((response) => {
       const { data } = response
 
       if (data.success === false) {
@@ -35,7 +36,8 @@ export const uploadBillFile = (file, type) => {
       }
 
       return data
-  }).catch(error => {
+    })
+    .catch((error) => {
       console.error('上传错误:', error)
 
       if (error.response) {

Web/src/api/budget.js

@@ -12,19 +12,6 @@ export function getBudgetList(referenceDate) {
   })
 }
 
-/**
- * 获取单个预算统计
- * @param {number} id 预算ID
- * @param {string} referenceDate 参考日期
- */
-export function getBudgetStatistics(id, referenceDate) {
-  return request({
-    url: '/Budget/GetStatistics',
-    method: 'get',
-    params: { id, referenceDate }
-  })
-}
-
 /**
  * 创建预算
  * @param {object} data 预算数据
@@ -84,15 +71,41 @@ export function getUncoveredCategories(category, referenceDate) {
     params: { category, referenceDate }
   })
 }
+
 /**
- * 归档预算
- * @param {number} year 年份
- * @param {number} month 月份
+ * 获取归档总结
+ * @param {string} referenceDate 参考日期
  */
-export function archiveBudgets(year, month) {
+export function getArchiveSummary(referenceDate) {
   return request({
-    url: `/Budget/ArchiveBudgetsAsync/${year}/${month}`,
-    method: 'post'
+    url: '/Budget/GetArchiveSummary',
+    method: 'get',
+    params: { referenceDate }
   })
 }
 
+/**
+ * 更新归档总结
+ * @param {object} data 数据 { referenceDate, summary }
+ */
+export function updateArchiveSummary(data) {
+  return request({
+    url: '/Budget/UpdateArchiveSummary',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取指定周期的存款预算信息
+ * @param {number} year 年份
+ * @param {number} month 月份
+ * @param {number} type 周期类型 (1:Month, 2:Year)
+ */
+export function getSavingsBudget(year, month, type) {
+  return request({
+    url: '/Budget/GetSavingsBudget',
+    method: 'get',
+    params: { year, month, type }
+  })
+}

Web/src/api/emailRecord.js

@@ -37,7 +37,7 @@ export const getEmailDetail = (id) => {
  */
 export const deleteEmail = (id) => {
   return request({
-    url: `/EmailMessage/DeleteById`,
+    url: '/EmailMessage/DeleteById',
     method: 'post',
     params: { id }
   })
@@ -50,7 +50,7 @@ export const deleteEmail = (id) => {
  */
 export const refreshTransactionRecords = (id) => {
   return request({
-    url: `/EmailMessage/RefreshTransactionRecords`,
+    url: '/EmailMessage/RefreshTransactionRecords',
     method: 'post',
     params: { id }
   })
@@ -62,7 +62,7 @@ export const refreshTransactionRecords = (id) => {
  */
 export const syncEmails = () => {
   return request({
-    url: `/EmailMessage/SyncEmails`,
+    url: '/EmailMessage/SyncEmails',
     method: 'post'
   })
 }

Web/src/api/request.js

@@ -14,7 +14,7 @@ const request = axios.create({
 
 // 请求拦截器
 request.interceptors.request.use(
-  config => {
+  (config) => {
     // 添加 token 认证信息
     const authStore = useAuthStore()
     if (authStore.token) {
@@ -22,7 +22,7 @@ request.interceptors.request.use(
     }
     return config
   },
-  error => {
+  (error) => {
     console.error('请求错误:', error)
     return Promise.reject(error)
   }
@@ -30,7 +30,7 @@ request.interceptors.request.use(
 
 // 响应拦截器
 request.interceptors.response.use(
-  response => {
+  (response) => {
     const { data } = response
 
     // 统一处理业务错误
@@ -41,7 +41,7 @@ request.interceptors.response.use(
 
     return data
   },
-  error => {
+  (error) => {
     console.error('响应错误:', error)
 
     // 统一处理 HTTP 错误
@@ -58,7 +58,10 @@ request.interceptors.response.use(
           // 清除登录状态并跳转到登录页
           const authStore = useAuthStore()
           authStore.logout()
-          router.push({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } })
+          router.push({
+            name: 'login',
+            query: { redirect: router.currentRoute.value.fullPath }
+          })
           break
         }
         case 403:

Web/src/api/statistics.js

@@ -17,8 +17,6 @@
  * @returns {Object} data.expenseCount - 支出笔数
  * @returns {Object} data.incomeCount - 收入笔数
  * @returns {Object} data.totalCount - 总笔数
- * @returns {Object} data.maxExpense - 最大单笔支出
- * @returns {Object} data.maxIncome - 最大单笔收入
  */
 export const getMonthlyStatistics = (params) => {
   return request({
@@ -88,3 +86,18 @@ export const getDailyStatistics = (params) => {
     params
   })
 }
+
+/**
+ * 获取指定日期范围内的每日统计
+ * @param {Object} params - 查询参数
+ * @param {string} params.startDate - 开始日期
+ * @param {string} params.endDate - 结束日期
+ * @returns {Promise<{success: boolean, data: Array}>}
+ */
+export const getDailyStatisticsRange = (params) => {
+  return request({
+    url: '/TransactionRecord/GetDailyStatisticsRange',
+    method: 'get',
+    params
+  })
+}

Web/src/api/transactionPeriodic.js

@@ -79,7 +79,7 @@ export const updatePeriodic = (data) => {
  */
 export const deletePeriodic = (id) => {
   return request({
-    url: `/TransactionPeriodic/DeleteById`,
+    url: '/TransactionPeriodic/DeleteById',
     method: 'post',
     params: { id }
   })

Web/src/api/transactionRecord.js

@@ -99,7 +99,7 @@ export const updateTransaction = (data) => {
  */
 export const deleteTransaction = (id) => {
   return request({
-    url: `/TransactionRecord/DeleteById`,
+    url: '/TransactionRecord/DeleteById',
     method: 'post',
     params: { id }
   })
@@ -118,7 +118,6 @@ export const getTransactionsByDate = (date) => {
   })
 }
 
-
 // 注意：分类相关的API已迁移到 transactionCategory.js
 // 请使用 getCategoryList 等新接口
 
@@ -160,7 +159,7 @@ export const smartClassify = (transactionIds = []) => {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      'Authorization': `Bearer ${token}`
+      Authorization: `Bearer ${token}`
     },
     body: JSON.stringify({ transactionIds })
   })

Web/src/assets/base.css

@@ -1,55 +1,75 @@
-/* color palette from <https://github.com/vuejs/theme> */
+/* color palette from <https://github.com/vuejs/theme> */
+/* 
+   Most variables are replaced by Vant CSS variables.
+   Keeping only what's necessary or mapping to Vant.
+*/
+
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
+  --van-danger-color: rgb(255, 107, 107) !important; /* 覆盖默认的深红色 #ee0a24 */
+  --color-background: var(--van-background);
+  --color-background-soft: var(--van-background-2);
+  --color-background-mute: var(--van-gray-1);
 
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
+  --color-border: var(--van-border-color);
+  --color-border-hover: var(--van-gray-5);
 
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
+  --color-heading: var(--van-text-color);
+  --color-text: var(--van-text-color);
 
   --section-gap: 160px;
+
+  /* Chart Colors */
+  --chart-color-1: #ff6b6b;
+  --chart-color-2: #4ecdc4;
+  --chart-color-3: #45b7d1;
+  --chart-color-4: #ffa07a;
+  --chart-color-5: #98d8c8;
+  --chart-color-6: #f7dc6f;
+  --chart-color-7: #bb8fce;
+  --chart-color-8: #85c1e2;
+  --chart-color-9: #f8b88b;
+  --chart-color-10: #aab7b8;
+  --chart-color-11: #ff8ed4;
+  --chart-color-12: #67e6dc;
+  --chart-color-13: #ffab73;
+  --chart-color-14: #c9b1ff;
+  --chart-color-15: #7bdff2;
+
+  /* Status Colors for Charts */
+  --chart-success: #52c41a;
+  --chart-warning: #faad14;
+  --chart-danger: #f5222d;
+  --chart-primary: #1890ff;
+  --chart-shadow: rgba(0, 138, 255, 0.45);
+  --chart-axis: #e6ebf8;
+  --chart-split: #eee;
+  --chart-text-muted: #999;
+
+  /* Heatmap Colors - Light Mode */
+  --heatmap-level-0: var(--van-gray-2);
+  --heatmap-level-1: #9be9a8;
+  --heatmap-level-2: #40c463;
+  --heatmap-level-3: #30a14e;
+  --heatmap-level-4: #216e39;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
+    --chart-axis: #333;
+    --chart-split: #333;
+    --chart-text-muted: #666;
 
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
+    /* Heatmap Colors - Dark Mode (GitHub Style) */
+    --heatmap-level-0: var(--van-gray-2);
+    --heatmap-level-1: #9be9a8;
+    --heatmap-level-2: #40c463;
+    --heatmap-level-3: #30a14e;
+    --heatmap-level-4: #216e39;
   }
 }
 
+/* Removed manual dark mode media query as Vant handles it */
+
 *,
 *::before,
 *::after {
@@ -60,8 +80,8 @@
 
 body {
   min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
+  color: var(--van-text-color);
+  background: var(--van-background);
   transition:
     color 0.5s,
     background-color 0.5s;

Web/src/assets/main.css

@@ -1,7 +1,8 @@
 @import './base.css';
 
 /* 禁用页面弹性缩放和橡皮筋效果 */
-html, body {
+html,
+body {
   overscroll-behavior: none;
   overscroll-behavior-y: none;
   -webkit-overflow-scrolling: touch;
@@ -57,7 +58,9 @@ a,
   }
 }
 
-html, body, #app {
+html,
+body,
+#app {
   margin: 0;
   padding: 0;
   height: 100%;

Web/src/components/AddClassifyDialog.vue

@@ -5,7 +5,10 @@
     show-cancel-button
     @confirm="handleConfirm"
   >
-    <van-field v-model="classifyName" placeholder="请输入新的交易分类" />
+    <van-field
+      v-model="classifyName"
+      placeholder="请输入新的交易分类"
+    />
   </van-dialog>
 </template>
 

Web/src/components/Bill/BillForm.vue

@@ -6,8 +6,12 @@
         <van-field label="时间">
           <template #input>
             <div style="display: flex; gap: 16px">
-              <div @click="showDatePicker = true">{{ form.date }}</div>
-              <div @click="showTimePicker = true">{{ form.time }}</div>
+              <div @click="showDatePicker = true">
+                {{ form.date }}
+              </div>
+              <div @click="showTimePicker = true">
+                {{ form.time }}
+              </div>
             </div>
           </template>
         </van-field>
@@ -47,23 +51,20 @@
         <!-- 分类 -->
         <van-field name="category" label="分类">
           <template #input>
-            <span v-if="!categoryName" style="color: #c8c9cc;">请选择分类</span>
+            <span v-if="!categoryName" style="color: var(--van-text-color-3)">请选择分类</span>
             <span v-else>{{ categoryName }}</span>
           </template>
         </van-field>
 
         <!-- 分类选择组件 -->
-        <ClassifySelector
-          v-model="categoryName"
-          :type="form.type"
-        />
+        <ClassifySelector v-model="categoryName" :type="form.type" />
       </van-cell-group>
 
       <div class="actions">
         <van-button round block type="primary" native-type="submit" :loading="loading">
           {{ submitText }}
         </van-button>
-        <slot name="actions"></slot>
+        <slot name="actions" />
       </div>
     </van-form>
 
@@ -146,9 +147,15 @@ const initForm = async () => {
       currentTime.value = form.value.time.split(':')
     }
 
-    if (amount !== undefined) form.value.amount = amount
-    if (reason !== undefined) form.value.note = reason
-    if (type !== undefined) form.value.type = type
+    if (amount !== undefined) {
+      form.value.amount = amount
+    }
+    if (reason !== undefined) {
+      form.value.note = reason
+    }
+    if (type !== undefined) {
+      form.value.type = type
+    }
 
     // 如果有传入分类名称，尝试设置
     if (classify) {
@@ -166,9 +173,13 @@ onMounted(() => {
 })
 
 // 监听 initialData 变化 (例如重新解析后)
-watch(() => props.initialData, () => {
+watch(
+  () => props.initialData,
+  () => {
     initForm()
-}, { deep: true })
+  },
+  { deep: true }
+)
 
 const handleTypeChange = (newType) => {
   if (!isSyncing.value) {

Web/src/components/Bill/ManualBillAdd.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="manual-bill-add">
-    <BillForm 
-      ref="billFormRef"
-      :loading="saving"
-      @submit="handleSave"
-    />
+    <BillForm ref="billFormRef" :loading="saving" @submit="handleSave" />
   </div>
 </template>
 

Web/src/components/Bill/OneLineBillAdd.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="!parseResult" class="input-section" style="margin: 12px 12px 0 16px;">
+    <div v-if="!parseResult" class="input-section" style="margin: 12px 12px 0 16px">
       <van-field
         v-model="text"
         type="textarea"
@@ -31,13 +31,7 @@
         @submit="handleSave"
       >
         <template #actions>
-          <van-button 
-            plain 
-            round 
-            block 
-            class="mt-2" 
-            @click="parseResult = null"
-          >
+          <van-button plain round block class="mt-2" @click="parseResult = null">
             重新输入
           </van-button>
         </template>
@@ -60,7 +54,9 @@ const saving = ref(false)
 const parseResult = ref(null)
 
 const handleParse = async () => {
-  if (!text.value.trim()) return
+  if (!text.value.trim()) {
+    return
+  }
 
   parsing.value = true
   parseResult.value = null
@@ -121,6 +117,6 @@ const handleSave = async (payload) => {
   margin-bottom: 16px;
   border-radius: 8px;
   overflow: hidden;
-  border: 1px solid #ebedf0;
+  border: 1px solid var(--van-border-color);
 }
 </style>

Web/src/components/Budget/BudgetCard.vue

@@ -1,5 +1,7 @@
-<template>
-  <div class="common-card budget-card" @click="toggleExpand">
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <!-- 普通预算卡片 -->
+  <div v-if="!budget.noLimit" class="common-card budget-card" @click="toggleExpand">
     <div class="budget-content-wrapper">
       <!-- 折叠状态 -->
       <div v-if="!isExpanded" class="budget-collapsed">
@@ -12,9 +14,12 @@
                 class="status-tag"
               >
                 {{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
+                <span v-if="budget.isMandatoryExpense" class="mandatory-mark">📌</span>
               </van-tag>
             </slot>
-              <h3 class="card-title">{{ budget.name }}</h3>
+            <h3 class="card-title">
+              {{ budget.name }}
+            </h3>
             <span v-if="budget.selectedCategories?.length" class="card-subtitle">
               ({{ budget.selectedCategories.join('、') }})
             </span>
@@ -27,9 +32,11 @@
             <span class="compact-label">实际/目标</span>
             <span class="compact-value">
               <slot name="collapsed-amount">
-                {{ budget.current !== undefined && budget.limit !== undefined 
+                {{
+                  budget.current !== undefined && budget.limit !== undefined
                     ? `¥${budget.current?.toFixed(0) || 0} / ¥${budget.limit?.toFixed(0) || 0}`
-                  : '--' }}
+                    : '--'
+                }}
               </slot>
             </span>
           </div>
@@ -42,9 +49,8 @@
       </div>
 
       <!-- 展开状态 -->
-      <Transition v-else :name="transitionName">
-        <div :key="budget.period" class="budget-inner-card">
-          <div class="card-header" style="margin-bottom: 0;">
+      <div v-else class="budget-inner-card">
+        <div class="card-header" style="margin-bottom: 0">
           <div class="budget-info">
             <slot name="tag">
               <van-tag
@@ -53,9 +59,12 @@
                 class="status-tag"
               >
                 {{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
+                <span v-if="budget.isMandatoryExpense" class="mandatory-mark">📌</span>
               </van-tag>
             </slot>
-              <h3 class="card-title" style="max-width: 120px;">{{ budget.name }}</h3>
+            <h3 class="card-title" style="max-width: 120px">
+              {{ budget.name }}
+            </h3>
           </div>
           <div class="header-actions">
             <slot name="actions">
@@ -75,14 +84,8 @@
                 @click.stop="handleQueryBills"
               />
               <template v-if="budget.category !== 2">
-                  <van-button 
-                    icon="edit" 
-                    size="small" 
-                    plain 
-                    @click.stop="$emit('click', budget)" 
-                  />
+                <van-button icon="edit" size="small" plain @click.stop="$emit('click', budget)" />
               </template>
-                
             </slot>
           </div>
         </div>
@@ -101,12 +104,14 @@
             </van-tag>
           </div>
           <div class="amount-info">
-              <slot name="amount-info"></slot>
+            <slot name="amount-info" />
           </div>
 
           <div class="progress-section">
             <slot name="progress-info">
-                <span class="period-type">{{ periodLabel }}{{ budget.category === 0 ? '使用' : '达成' }}</span>
+              <span class="period-type"
+                >{{ periodLabel }}{{ budget.category === 0 ? '使用' : '达成' }}</span
+              >
               <van-progress
                 :percentage="Math.min(percentage, 100)"
                 stroke-width="8"
@@ -121,7 +126,7 @@
             <van-progress
               :percentage="timePercentage"
               stroke-width="4"
-                color="#969799"
+              color="var(--van-gray-6)"
               :show-pivot="false"
             />
             <span class="percent">{{ timePercentage }}%</span>
@@ -129,43 +134,145 @@
 
           <van-collapse-transition>
             <div v-if="budget.description && showDescription" class="budget-description">
-                <div class="description-content rich-html-content" v-html="budget.description"></div>
+              <div class="description-content rich-html-content" v-html="budget.description" />
             </div>
           </van-collapse-transition>
         </div>
 
         <div class="card-footer">
-            <div class="period-navigation" @click.stop>
-              <van-button 
-                icon="arrow-left" 
-                class="nav-icon"
-                plain 
-                size="small"
-                style="width: 50px;"
-                @click="handleSwitch(-1)" 
-              />
-              <span class="period-text">{{ budget.period }}</span>
-              <van-button 
-                icon="arrow" 
-                class="nav-icon"
-                plain 
-                size="small"
-                style="width: 50px;"
-                :disabled="isNextDisabled"
-                @click="handleSwitch(1)"
-              />
+          <slot name="footer" />
         </div>
       </div>
     </div>
-      </Transition>
-    </div>
 
     <!-- 关联账单列表弹窗 -->
-    <PopupContainer 
-      v-model="showBillListModal"
-      title="关联账单列表"
-      height="75%"
+    <PopupContainer v-model="showBillListModal" title="关联账单列表" height="75%">
+      <TransactionList
+        :transactions="billList"
+        :loading="billLoading"
+        :finished="true"
+        :show-delete="false"
+        :show-checkbox="false"
+        @click="handleBillClick"
+        @delete="handleBillDelete"
+      />
+    </PopupContainer>
+  </div>
+
+  <!-- 不记额预算卡片 -->
+  <div v-else class="common-card budget-card no-limit-card" @click="toggleExpand">
+    <div class="budget-content-wrapper">
+      <!-- 折叠状态 -->
+      <div v-if="!isExpanded" class="budget-collapsed">
+        <div class="collapsed-header">
+          <div class="budget-info">
+            <slot name="tag">
+              <van-tag type="success" plain class="status-tag">
+                {{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
+              </van-tag>
+            </slot>
+            <h3 class="card-title">
+              {{ budget.name }}
+            </h3>
+            <span v-if="budget.selectedCategories?.length" class="card-subtitle">
+              ({{ budget.selectedCategories.join('、') }})
+            </span>
+          </div>
+          <van-icon name="arrow-down" class="expand-icon" />
+        </div>
+
+        <div class="collapsed-footer no-limit-footer">
+          <div class="collapsed-item">
+            <span class="compact-label">实际</span>
+            <span class="compact-value">
+              <slot name="collapsed-amount">
+                {{ budget.current !== undefined ? `¥${budget.current?.toFixed(0) || 0}` : '--' }}
+              </slot>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 展开状态 -->
+      <div v-else class="budget-inner-card">
+        <div class="card-header" style="margin-bottom: 0">
+          <div class="budget-info">
+            <slot name="tag">
+              <van-tag type="success" plain class="status-tag">
+                {{ budget.type === BudgetPeriodType.Year ? '年度' : '月度' }}
+              </van-tag>
+            </slot>
+            <h3 class="card-title" style="max-width: 120px">
+              {{ budget.name }}
+            </h3>
+          </div>
+          <div class="header-actions">
+            <slot name="actions">
+              <van-button
+                v-if="budget.description"
+                :icon="showDescription ? 'info' : 'info-o'"
+                size="small"
+                :type="showDescription ? 'primary' : 'default'"
+                plain
+                @click.stop="showDescription = !showDescription"
+              />
+              <van-button
+                icon="orders-o"
+                size="small"
+                plain
+                title="查询关联账单"
+                @click.stop="handleQueryBills"
+              />
+              <template v-if="budget.category !== 2">
+                <van-button icon="edit" size="small" plain @click.stop="$emit('click', budget)" />
+              </template>
+            </slot>
+          </div>
+        </div>
+
+        <div class="budget-body">
+          <div v-if="budget.selectedCategories?.length" class="category-tags">
+            <van-tag
+              v-for="cat in budget.selectedCategories"
+              :key="cat"
+              size="mini"
+              class="category-tag"
+              plain
+              round
             >
+              {{ cat }}
+            </van-tag>
+          </div>
+
+          <div class="no-limit-amount-info">
+            <div class="amount-item">
+              <span>
+                <span class="label">实际</span>
+                <span class="value" style="margin-left: 12px"
+                  >¥{{ budget.current?.toFixed(0) || 0 }}</span
+                >
+              </span>
+            </div>
+          </div>
+
+          <div class="no-limit-notice">
+            <span>
+              <van-icon name="info-o" style="margin-right: 4px" />
+              不记额预算 - 直接计入存款明细
+            </span>
+          </div>
+
+          <van-collapse-transition>
+            <div v-if="budget.description && showDescription" class="budget-description">
+              <div class="description-content rich-html-content" v-html="budget.description" />
+            </div>
+          </van-collapse-transition>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关联账单列表弹窗 -->
+    <PopupContainer v-model="showBillListModal" title="关联账单列表" height="75%">
       <TransactionList
         :transactions="billList"
         :loading="billLoading"
@@ -193,7 +300,7 @@ const props = defineProps({
   },
   progressColor: {
     type: String,
-    default: '#1989fa'
+    default: 'var(--van-primary-color)'
   },
   percentClass: {
     type: [String, Object],
@@ -205,10 +312,9 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['switch-period', 'click'])
+const emit = defineEmits(['click'])
 
 const isExpanded = ref(props.budget.category === 2)
-const transitionName = ref('slide-left')
 const showDescription = ref(false)
 const showBillListModal = ref(false)
 const billList = ref([])
@@ -218,16 +324,6 @@ const toggleExpand = () => {
   isExpanded.value = !isExpanded.value
 }
 
-const isNextDisabled = computed(() => {
-  if (!props.budget.periodEnd) return false
-  return new Date(props.budget.periodEnd) > new Date()
-})
-
-const handleSwitch = (direction) => {
-  transitionName.value = direction > 0 ? 'slide-left' : 'slide-right'
-  emit('switch-period', direction)
-}
-
 const handleQueryBills = async () => {
   showBillListModal.value = true
   billLoading.value = true
@@ -259,7 +355,6 @@ const handleQueryBills = async () => {
     } else {
       billList.value = []
     }
-
   } catch (error) {
     console.error('查询账单列表失败:', error)
     billList.value = []
@@ -269,18 +364,26 @@ const handleQueryBills = async () => {
 }
 
 const percentage = computed(() => {
-  if (!props.budget.limit) return 0
+  if (!props.budget.limit) {
+    return 0
+  }
   return Math.round((props.budget.current / props.budget.limit) * 100)
 })
 
 const timePercentage = computed(() => {
-  if (!props.budget.periodStart || !props.budget.periodEnd) return 0
+  if (!props.budget.periodStart || !props.budget.periodEnd) {
+    return 0
+  }
   const start = new Date(props.budget.periodStart).getTime()
   const end = new Date(props.budget.periodEnd).getTime()
   const now = new Date().getTime()
 
-  if (now <= start) return 0
-  if (now >= end) return 100
+  if (now <= start) {
+    return 0
+  }
+  if (now >= end) {
+    return 100
+  }
 
   return Math.round(((now - start) / (end - start)) * 100)
 })
@@ -297,6 +400,14 @@ const timePercentage = computed(() => {
   cursor: pointer;
 }
 
+.no-limit-card {
+  border-left: 3px solid var(--van-success-color);
+}
+
+.collapsed-footer.no-limit-footer {
+  justify-content: flex-start;
+}
+
 .budget-content-wrapper {
   position: relative;
   width: 100%;
@@ -368,7 +479,7 @@ const timePercentage = computed(() => {
 
 .compact-label {
   font-size: 12px;
-  color: #969799;
+  color: var(--van-text-color-2);
   line-height: 1.2;
 }
 
@@ -382,60 +493,26 @@ const timePercentage = computed(() => {
 }
 
 .compact-value.warning {
-  color: #ff976a;
+  color: var(--van-warning-color);
 }
 
 .compact-value.income {
-  color: #07c160;
+  color: var(--van-success-color);
 }
 
 .expand-icon {
-  color: #1989fa;
+  color: var(--van-primary-color);
   font-size: 14px;
   transition: transform 0.3s ease;
   flex-shrink: 0;
 }
 
 .collapse-icon {
-  color: #1989fa;
+  color: var(--van-primary-color);
   font-size: 16px;
   cursor: pointer;
 }
 
-/* 切换动画 */
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.slide-left-enter-from {
-  transform: translateX(100%);
-  opacity: 0;
-}
-.slide-left-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
-.slide-right-enter-from {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-.slide-right-leave-to {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
-.slide-left-leave-active,
-.slide-right-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-
 .budget-info {
   display: flex;
   align-items: center;
@@ -456,7 +533,7 @@ const timePercentage = computed(() => {
 
 .card-subtitle {
   font-size: 12px;
-  color: #969799;
+  color: var(--van-text-color-2);
   font-weight: normal;
   white-space: nowrap;
   overflow: hidden;
@@ -490,7 +567,7 @@ const timePercentage = computed(() => {
 
 :deep(.info-item) .label {
   font-size: 12px;
-  color: #969799;
+  color: var(--van-text-color-2);
   margin-bottom: 2px;
 }
 
@@ -500,11 +577,11 @@ const timePercentage = computed(() => {
 }
 
 :deep(.value.expense) {
-  color: #ee0a24;
+  color: var(--van-danger-color);
 }
 
 :deep(.value.income) {
-  color: #07c160;
+  color: var(--van-success-color);
 }
 
 .progress-section {
@@ -513,7 +590,7 @@ const timePercentage = computed(() => {
   gap: 12px;
   margin-bottom: 12px;
   font-size: 13px;
-  color: #646566;
+  color: var(--van-gray-6);
 }
 
 .progress-section :deep(.van-progress) {
@@ -532,12 +609,12 @@ const timePercentage = computed(() => {
 }
 
 .percent.warning {
-  color: #ff976a;
+  color: var(--van-warning-color);
   font-weight: bold;
 }
 
 .percent.income {
-  color: #07c160;
+  color: var(--van-success-color);
   font-weight: bold;
 }
 
@@ -551,63 +628,67 @@ const timePercentage = computed(() => {
   font-size: 11px;
 }
 
+.no-limit-notice {
+  text-align: center;
+  font-size: 12px;
+  color: var(--van-text-color-2);
+  background-color: var(--van-light-gray);
+  border-radius: 4px;
+  margin-top: 8px;
+}
+
+.no-limit-amount-info {
+  display: flex;
+  justify-content: center;
+  margin: 0px 0;
+}
+
+.amount-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.amount-item .label {
+  font-size: 12px;
+  color: var(--van-text-color-2);
+}
+
+.amount-item .value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--van-success-color);
+}
+
 .budget-description {
   margin-top: 8px;
-  background-color: #f7f8fa;
+  background-color: var(--van-background);
   border-radius: 4px;
   padding: 8px;
 }
 
 .description-content {
   font-size: 11px;
-  color: #646566;
+  color: var(--van-gray-6);
   line-height: 1.4;
 }
 
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #969799;
-  padding: 12px 12px 0;
-  padding-top: 8px;
-  border-top: 1px solid #ebedf0;
-}
-
-.period-navigation {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.period-text {
+.mandatory-mark {
+  margin-left: 4px;
   font-size: 14px;
-  font-weight: 500;
-  color: #323233;
+  display: inline-block;
 }
 
-.nav-icon {
-  padding: 4px;
-  font-size: 12px;
-  color: #1989fa;
-}
-
-@media (prefers-color-scheme: dark) {
-  .card-footer {
-    border-top-color: #2c2c2c;
-  }
-  .period-text {
-    color: #f5f5f5;
-  }
+/* @media (prefers-color-scheme: dark) {
   .budget-description {
-    background-color: #2c2c2c;
+    background-color: var(--van-background-2);
   }
   .description-content {
-    color: #969799;
+    color: var(--van-text-color-2);
   }
   .collapsed-row .value {
-    color: #f5f5f5;
-  }
+    color: var(--van-text-color);
   }
+} */
 </style>

Web/src/components/Budget/BudgetEditPopup.vue

@@ -1,7 +1,11 @@
 <template>
   <PopupContainer
     v-model="visible"
-    :title="isEdit ? `编辑${getCategoryName(form.category)}预算` : `新增${getCategoryName(form.category)}预算`" 
+    :title="
+      isEdit
+        ? `编辑${getCategoryName(form.category)}预算`
+        : `新增${getCategoryName(form.category)}预算`
+    "
     height="75%"
   >
     <div class="add-budget-form">
@@ -14,19 +18,55 @@
             placeholder="例如：每月餐饮、年度奖金"
             :rules="[{ required: true, message: '请填写预算名称' }]"
           />
-          <van-field name="type" label="统计周期">
+          <!-- 新增：不记额预算复选框 -->
+          <van-field label="不记额预算">
+            <template #input>
+              <van-checkbox
+                v-model="form.noLimit"
+                @update:model-value="onNoLimitChange"
+              >
+                不记额预算
+              </van-checkbox>
+            </template>
+          </van-field>
+          <!-- 新增：硬性消费复选框 -->
+          <van-field :label="form.category === BudgetCategory.Expense ? '硬性消费' : '硬性收入'">
+            <template #input>
+              <div class="mandatory-wrapper">
+                <van-checkbox
+                  v-model="form.isMandatoryExpense"
+                  :disabled="form.noLimit"
+                >
+                  {{ form.category === BudgetCategory.Expense ? '硬性消费' : '硬性收入' }}
+                  <span class="mandatory-tip">
+                    当前周期 月/年 按天数自动累加(无记录时)
+                  </span>
+                </van-checkbox>
+              </div>
+            </template>
+          </van-field>
+          <van-field
+            name="type"
+            label="统计周期"
+          >
             <template #input>
               <van-radio-group
                 v-model="form.type"
                 direction="horizontal"
-                :disabled="isEdit"
+                :disabled="isEdit || form.noLimit"
               >
-                <van-radio :name="BudgetPeriodType.Month">月</van-radio>
-                <van-radio :name="BudgetPeriodType.Year">年</van-radio>
+                <van-radio :name="BudgetPeriodType.Month">
+                  月
+                </van-radio>
+                <van-radio :name="BudgetPeriodType.Year">
+                  年
+                </van-radio>
               </van-radio-group>
             </template>
           </van-field>
+          <!-- 仅当未选中"不记额预算"时显示预算金额 -->
           <van-field
+            v-if="!form.noLimit"
             v-model="form.limit"
             type="number"
             name="limit"
@@ -40,8 +80,16 @@
           </van-field>
           <van-field label="相关分类">
             <template #input>
-              <div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
-              <div v-else class="selected-categories">
+              <div
+                v-if="form.selectedCategories.length === 0"
+                style="color: var(--van-text-color-3)"
+              >
+                可多选分类
+              </div>
+              <div
+                v-else
+                class="selected-categories"
+              >
                 <span class="ellipsis-text">
                   {{ form.selectedCategories.join('、') }}
                 </span>
@@ -59,7 +107,14 @@
       </van-form>
     </div>
     <template #footer>
-        <van-button block round type="primary" @click="onSubmit">保存预算</van-button>
+      <van-button
+        block
+        round
+        type="primary"
+        @click="onSubmit"
+      >
+        保存预算
+      </van-button>
     </template>
   </PopupContainer>
 </template>
@@ -83,14 +138,12 @@ const form = reactive({
   type: BudgetPeriodType.Month,
   category: BudgetCategory.Expense,
   limit: '',
-  selectedCategories: []
+  selectedCategories: [],
+  noLimit: false, // 新增字段
+  isMandatoryExpense: false // 新增：硬性消费
 })
 
-const open = ({
-  data, 
-  isEditFlag,
-  category
-}) => {
+const open = ({ data, isEditFlag, category }) => {
   if (category === undefined) {
     showToast('缺少必要参数：category')
     return
@@ -104,7 +157,9 @@ const open = ({
       type: data.type,
       category: category,
       limit: data.limit,
-      selectedCategories: data.selectedCategories ? [...data.selectedCategories] : []
+      selectedCategories: data.selectedCategories ? [...data.selectedCategories] : [],
+      noLimit: data.noLimit || false, // 新增
+      isMandatoryExpense: data.isMandatoryExpense || false // 新增：硬性消费
     })
   } else {
     Object.assign(form, {
@@ -113,7 +168,9 @@ const open = ({
       type: BudgetPeriodType.Month,
       category: category,
       limit: '',
-      selectedCategories: []
+      selectedCategories: [],
+      noLimit: false, // 新增
+      isMandatoryExpense: false // 新增：硬性消费
     })
   }
   visible.value = true
@@ -124,15 +181,21 @@ defineExpose({
 })
 
 const budgetType = computed(() => {
-  return form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
+  return form.category === BudgetCategory.Expense
+    ? 0
+    : form.category === BudgetCategory.Income
+      ? 1
+      : 2
 })
 
 const onSubmit = async () => {
   try {
     const data = {
       ...form,
-      limit: parseFloat(form.limit),
-      selectedCategories: form.selectedCategories
+      limit: form.noLimit ? 0 : parseFloat(form.limit), // 不记额时金额为0
+      selectedCategories: form.selectedCategories,
+      noLimit: form.noLimit, // 新增
+      isMandatoryExpense: form.isMandatoryExpense // 新增：硬性消费
     }
 
     const res = form.id ? await updateBudget(data) : await createBudget(data)
@@ -159,6 +222,15 @@ const getCategoryName = (category) => {
       return ''
   }
 }
+
+const onNoLimitChange = (value) => {
+  if (value) {
+    // 选中不记额时，自动设为年度预算
+    form.type = BudgetPeriodType.Year
+    // 选中不记额时，清除硬性消费选择
+    form.isMandatoryExpense = false
+  }
+}
 </script>
 
 <style scoped>
@@ -176,7 +248,7 @@ const getCategoryName = (category) => {
 
 .ellipsis-text {
   font-size: 14px;
-  color: #323233;
+  color: var(--van-text-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -185,7 +257,19 @@ const getCategoryName = (category) => {
 
 .no-data {
   font-size: 13px;
-  color: #969799;
+  color: var(--van-text-color-2);
   padding: 8px 16px;
 }
+
+.mandatory-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mandatory-tip {
+  font-size: 11px;
+  color: var(--van-text-color-3);
+  margin-left: 6px;
+}
 </style>

Web/src/components/Budget/BudgetSummary.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="summary-container">
     <transition :name="transitionName" mode="out-in">
-      <div v-if="stats && (stats.month || stats.year)" :key="dateKey" class="summary-card common-card">
+      <div
+        v-if="stats && (stats.month || stats.year)"
+        :key="dateKey"
+        class="summary-card common-card"
+      >
         <!-- 左切换按钮 -->
         <div class="nav-arrow left" @click.stop="changeMonth(-1)">
           <van-icon name="arrow-left" />
@@ -20,7 +24,7 @@
                 <span class="amount">¥{{ formatMoney(stats[key]?.limit || 0) }}</span>
               </div>
             </div>
-            <div v-if="config.showDivider" class="divider"></div>
+            <div v-if="config.showDivider" class="divider" />
           </template>
         </div>
 
@@ -71,8 +75,7 @@ const dateKey = computed(() => props.date.getFullYear() + '-' + props.date.getMo
 
 const isCurrentMonth = computed(() => {
   const now = new Date()
-  return props.date.getFullYear() === now.getFullYear() && 
-         props.date.getMonth() === now.getMonth()
+  return props.date.getFullYear() === now.getFullYear() && props.date.getMonth() === now.getMonth()
 })
 
 const periodConfigs = computed(() => ({
@@ -94,7 +97,10 @@ const changeMonth = (delta) => {
 }
 
 const formatMoney = (val) => {
-  return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })
+  return parseFloat(val || 0).toLocaleString(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  })
 }
 </script>
 
@@ -130,7 +136,7 @@ const formatMoney = (val) => {
   justify-content: center;
   align-items: center;
   font-size: 18px;
-  color: #c8c9cc;
+  color: var(--van-gray-5);
   cursor: pointer;
   transition: all 0.2s;
   z-index: 1;
@@ -141,6 +147,17 @@ const formatMoney = (val) => {
   background-color: rgba(0, 0, 0, 0.02);
 }
 
+.nav-arrow.disabled {
+  color: #c8c9cc;
+  cursor: not-allowed;
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.nav-arrow.disabled:active {
+  background-color: transparent;
+}
+
 .nav-arrow.left {
   left: 0;
 }
@@ -150,7 +167,7 @@ const formatMoney = (val) => {
 }
 
 .nav-arrow.disabled {
-  color: #f2f3f5;
+  color: var(--van-gray-3);
   cursor: not-allowed;
 }
 
@@ -200,26 +217,26 @@ const formatMoney = (val) => {
 
 .summary-item .label {
   font-size: 12px;
-  color: #969799;
+  color: var(--van-text-color-2);
   margin-bottom: 6px;
 }
 
 .summary-item .value {
   font-size: 20px;
   font-weight: bold;
-  color: #323233;
+  color: var(--van-text-color);
 }
 
 .summary-item :deep(.value.expense) {
-  color: #ee0a24;
+  color: var(--van-danger-color);
 }
 
 .summary-item :deep(.value.income) {
-  color: #07c160;
+  color: var(--van-success-color);
 }
 
 .summary-item :deep(.value.warning) {
-  color: #ff976a;
+  color: var(--van-warning-color);
 }
 
 .summary-item .unit {
@@ -230,7 +247,7 @@ const formatMoney = (val) => {
 
 .summary-item .sub-info {
   font-size: 12px;
-  color: #c8c9cc;
+  color: var(--van-text-color-3);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -238,35 +255,35 @@ const formatMoney = (val) => {
 }
 
 .summary-item .amount {
-  color: #646566;
+  color: var(--van-text-color-2);
 }
 
 .summary-item .separator {
-  color: #c8c9cc;
+  color: var(--van-text-color-3);
 }
 
 .divider {
   width: 1px;
   height: 24px;
-  background-color: #ebedf0;
+  background-color: var(--van-border-color);
   margin: 0 4px;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   .nav-arrow:active {
     background-color: rgba(255, 255, 255, 0.05);
   }
   .nav-arrow.disabled {
-    color: #323233;
+    color: var(--van-text-color);
   }
   .summary-item .value {
-    color: #f5f5f5;
+    color: var(--van-text-color);
   }
   .summary-item .amount {
-    color: #c8c9cc;
+    color: var(--van-text-color-3);
   }
   .divider {
-    background-color: #2c2c2c;
-  }
+    background-color: var(--van-border-color);
   }
+} */
 </style>

Web/src/components/Budget/SavingsConfigPopup.vue

@@ -1,9 +1,5 @@
 <template>
-  <PopupContainer 
-    v-model="visible" 
-    title="设置存款分类" 
-    height="60%"
-  >
+  <PopupContainer v-model="visible" title="设置存款分类" height="60%">
     <div class="savings-config-content">
       <div class="config-header">
         <p class="subtitle">这些分类的统计值将计入“存款”中</p>
@@ -52,7 +48,7 @@ const fetchConfig = async () => {
   try {
     const res = await getConfig('SavingsCategories')
     if (res.success && res.data) {
-      selectedCategories.value = res.data.split(',').filter(x => x)
+      selectedCategories.value = res.data.split(',').filter((x) => x)
     } else {
       selectedCategories.value = []
     }
@@ -91,7 +87,7 @@ const onSubmit = async () => {
 
 .subtitle {
   font-size: 14px;
-  color: #969799;
+  color: var(--van-text-color-2);
   margin: 0;
 }
 
@@ -103,7 +99,7 @@ const onSubmit = async () => {
 
 .no-data {
   text-align: center;
-  color: #969799;
+  color: var(--van-text-color-2);
   width: 100%;
   padding: 20px 0;
 }

Web/src/components/ClassifySelector.vue

@@ -98,17 +98,21 @@ const innerOptions = ref([])
 const addClassifyDialogRef = ref()
 
 const displayOptions = computed(() => {
-  if (props.options) return props.options
+  if (props.options) {
+    return props.options
+  }
   return innerOptions.value
 })
 
 const fetchOptions = async () => {
-  if (props.options) return
+  if (props.options) {
+    return
+  }
 
   try {
     const response = await getCategoryList(props.type)
     if (response.success) {
-      innerOptions.value = (response.data || []).map(item => ({
+      innerOptions.value = (response.data || []).map((item) => ({
         text: item.name,
         value: item.name,
         id: item.id
@@ -152,9 +156,12 @@ const handleAddConfirm = async (categoryName) => {
   }
 }
 
-watch(() => props.type, () => {
+watch(
+  () => props.type,
+  () => {
     fetchOptions()
-})
+  }
+)
 
 onMounted(() => {
   fetchOptions()
@@ -175,8 +182,10 @@ const isSelected = (item) => {
 
 // 是否全部选中
 const isAllSelected = computed(() => {
-  if (!props.multiple || displayOptions.value.length === 0) return false
-  return displayOptions.value.every(item => props.modelValue.includes(item.text))
+  if (!props.multiple || displayOptions.value.length === 0) {
+    return false
+  }
+  return displayOptions.value.every((item) => props.modelValue.includes(item.text))
 })
 
 // 是否有任何选中
@@ -208,13 +217,15 @@ const toggleItem = (item) => {
 
 // 切换全选
 const toggleAll = () => {
-  if (!props.multiple) return
+  if (!props.multiple) {
+    return
+  }
 
   if (isAllSelected.value) {
     emit('update:modelValue', [])
     emit('change', [])
   } else {
-    const allValues = displayOptions.value.map(item => item.text)
+    const allValues = displayOptions.value.map((item) => item.text)
     emit('update:modelValue', allValues)
     emit('change', allValues)
   }

Web/src/components/ContributionHeatmap.vue

@@ -0,0 +1,446 @@
+<template>
+  <div class="heatmap-card">
+    <div class="grid-row">
+      <!-- Weekday Labels (Fixed Left) -->
+      <div class="weekday-col-fixed">
+        <div class="weekday-label">
+          二
+        </div>
+        <div class="weekday-label">
+          四
+        </div>
+        <div class="weekday-label">
+          六
+        </div>
+      </div>
+
+      <!-- Scrollable Heatmap Area -->
+      <div
+        ref="scrollContainer"
+        class="heatmap-scroll-container"
+      >
+        <div class="heatmap-content">
+          <!-- Month Labels -->
+          <div class="month-row">
+            <div
+              v-for="(month, index) in monthLabels"
+              :key="index"
+              class="month-label"
+              :style="{ left: month.left + 'px' }"
+            >
+              {{ month.text }}
+            </div>
+          </div>
+
+          <!-- Heatmap Grid -->
+          <div class="heatmap-grid">
+            <div
+              v-for="(week, wIndex) in weeks"
+              :key="wIndex"
+              class="heatmap-week"
+            >
+              <div
+                v-for="(day, dIndex) in week"
+                :key="dIndex"
+                class="heatmap-cell"
+                :class="getLevelClass(day)"
+                @click="onCellClick(day)"
+              >
+                <!-- Tooltip could be implemented here or using title -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="heatmap-footer">
+      <div
+        v-if="totalCount > 0"
+        class="summary-text"
+      >
+        过去一年共 {{ totalCount }} 笔交易
+      </div>
+      <div class="legend">
+        <span>少</span>
+        <div class="legend-item level-0" />
+        <div class="legend-item level-1" />
+        <div class="legend-item level-2" />
+        <div class="legend-item level-3" />
+        <div class="legend-item level-4" />
+        <span>多</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import { getDailyStatisticsRange } from '@/api/statistics'
+
+const stats = ref({})
+const weeks = ref([])
+const monthLabels = ref([])
+const totalCount = ref(0)
+const scrollContainer = ref(null)
+const thresholds = ref([2, 4, 7]) // Default thresholds
+
+const CELL_SIZE = 15
+const CELL_GAP = 3
+const WEEK_WIDTH = CELL_SIZE + CELL_GAP
+
+const formatDate = (d) => {
+  const year = d.getFullYear()
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+const fetchData = async () => {
+  const endDate = new Date()
+  const startDate = new Date()
+  startDate.setFullYear(endDate.getFullYear() - 1)
+
+  try {
+    const res = await getDailyStatisticsRange({
+      startDate: formatDate(startDate),
+      endDate: formatDate(endDate)
+    })
+
+    if (res.success) {
+      const map = {}
+      let count = 0
+      res.data.forEach((item) => {
+        map[item.date] = item
+        count += item.count
+      })
+      stats.value = map
+      totalCount.value = count
+
+      // Calculate thresholds based on last 15 days average
+      const today = new Date()
+      let last15DaysSum = 0
+      for (let i = 0; i < 15; i++) {
+        const d = new Date(today)
+        d.setDate(d.getDate() - i)
+        const dateStr = formatDate(d)
+        last15DaysSum += map[dateStr]?.count || 0
+      }
+
+      const avg = last15DaysSum / 15
+      // Step size calculation: ensure at least 1, roughly avg/2 to create spread
+      // Level 1: 1 ~ step
+      // Level 2: step+1 ~ step*2
+      // Level 3: step*2+1 ~ step*3
+      // Level 4: > step*3
+      const step = Math.max(Math.ceil(avg / 2), 1)
+      thresholds.value = [step, step * 2, step * 3]
+
+      generateHeatmapData(startDate, endDate)
+    }
+  } catch (e) {
+    console.error('Failed to fetch heatmap data', e)
+  }
+}
+
+const generateHeatmapData = (startDate, endDate) => {
+  const current = new Date(startDate)
+
+  const allDays = []
+
+  // Adjust start date to be Monday to align weeks
+  // 0 = Sunday, 1 = Monday
+  const startDay = current.getDay()
+  // If startDay is 0 (Sunday), we need to go back 6 days to Monday
+  // If startDay is 1 (Monday), we are good
+  // If startDay is 2 (Tuesday), we need to go back 1 day
+  // Formula: (day + 6) % 7 days back?
+  // Monday (1) -> 0 days back
+  // Sunday (0) -> 6 days back
+  // Tuesday (2) -> 1 day back
+
+  // We don't necessarily need to subtract from startDate for data fetching,
+  // but for grid alignment we want the first column to start on Monday.
+
+  const alignStart = new Date(startDate)
+  // alignStart.setDate(alignStart.getDate() - daysToSubtract);
+
+  const tempDate = new Date(alignStart)
+  while (tempDate <= endDate) {
+    const dateStr = formatDate(tempDate)
+    allDays.push({
+      date: dateStr,
+      count: stats.value[dateStr]?.count || 0,
+      obj: new Date(tempDate)
+    })
+    tempDate.setDate(tempDate.getDate() + 1)
+  }
+
+  // Now group into weeks
+  const resultWeeks = []
+  let currentWeek = []
+
+  // Pad first week if start date is not Monday
+  // allDays[0] is startDate
+  const firstDayObj = new Date(allDays[0].date)
+  const firstDay = firstDayObj.getDay() // 0-6 (Sun-Sat)
+
+  // We want Monday (1) to be index 0
+  // Mon(1)->0, Tue(2)->1, ..., Sun(0)->6
+  const padCount = (firstDay + 6) % 7
+
+  for (let i = 0; i < padCount; i++) {
+    currentWeek.push(null)
+  }
+
+  allDays.forEach((day) => {
+    currentWeek.push(day)
+    if (currentWeek.length === 7) {
+      resultWeeks.push(currentWeek)
+      currentWeek = []
+    }
+  })
+
+  // Push last partial week
+  if (currentWeek.length > 0) {
+    while (currentWeek.length < 7) {
+      currentWeek.push(null)
+    }
+    resultWeeks.push(currentWeek)
+  }
+
+  weeks.value = resultWeeks
+
+  // Generate Month Labels
+  const labels = []
+  let lastMonth = -1
+
+  resultWeeks.forEach((week, index) => {
+    // Check the first valid day in the week
+    const day = week.find((d) => d !== null)
+    if (day) {
+      const d = new Date(day.date)
+      const month = d.getMonth()
+      if (month !== lastMonth) {
+        labels.push({
+          text: d.toLocaleString('zh-CN', { month: 'short' }),
+          left: index * WEEK_WIDTH
+        })
+        lastMonth = month
+      }
+    }
+  })
+
+  monthLabels.value = labels
+
+  // Scroll to end
+  nextTick(() => {
+    if (scrollContainer.value) {
+      scrollContainer.value.scrollLeft = scrollContainer.value.scrollWidth
+    }
+  })
+}
+
+const getLevelClass = (day) => {
+  if (!day) {
+    return 'invisible'
+  }
+  const count = day.count
+  if (count === 0) {
+    return 'level-0'
+  }
+  if (count <= thresholds.value[0]) {
+    return 'level-1'
+  }
+  if (count <= thresholds.value[1]) {
+    return 'level-2'
+  }
+  if (count <= thresholds.value[2]) {
+    return 'level-3'
+  }
+  return 'level-4'
+}
+
+const onCellClick = (day) => {
+  if (day) {
+    // Emit event or show toast
+    // console.log(day);
+  }
+}
+
+defineExpose({
+  refresh: fetchData
+})
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.heatmap-card {
+  background: var(--van-background-2);
+  border-radius: 8px;
+  padding: 12px;
+  color: var(--van-text-color);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  margin: 0 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--van-border-color);
+}
+
+.heatmap-scroll-container {
+  overflow-x: auto;
+  padding-bottom: 8px;
+  scrollbar-width: none;
+  flex: 1; /* Take remaining space */
+}
+.heatmap-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+.heatmap-content {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.month-row {
+  display: flex;
+  margin-bottom: 4px;
+  height: 15px;
+  position: relative;
+}
+
+.months-container {
+  position: relative;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.month-label {
+  position: absolute;
+  font-size: 10px;
+  top: 0;
+  color: var(--van-text-color-2);
+  white-space: nowrap;
+}
+
+.grid-row {
+  display: flex;
+  position: relative;
+}
+
+.weekday-col-fixed {
+  display: flex;
+  flex-direction: column;
+  padding-top: 19px; /* Align with cells (month row height 15px + margin 4px) */
+  margin-right: 6px;
+  font-size: 9px;
+  height: 142px; /* Total height: 15 (month) + 4 (margin) + 123 (grid) */
+  color: var(--van-text-color-2);
+  flex-shrink: 0;
+  z-index: 10;
+  background-color: var(--van-background-2); /* Match card background */
+}
+
+.weekday-label {
+  height: 15px;
+  line-height: 15px;
+  margin-top: 15px; /* (15 cell + 3 gap)*2 - 15 height - previous margin? No. */
+  /*
+    Row 0: 0px top
+    Row 1: 18px top (15+3) - Label "二" aligns here? No, "二" is usually row 1 (index 1, 2nd row)
+    If we want to align with 2nd, 4th, 6th rows (indices 1, 3, 5):
+
+    Row 0: y=0
+    Row 1: y=18
+    Row 2: y=36
+    Row 3: y=54
+    Row 4: y=72
+    Row 5: y=90
+    Row 6: y=108
+
+    Label 1 ("二") at Row 1 (y=18)
+    Label 2 ("四") at Row 3 (y=54)
+    Label 3 ("六") at Row 5 (y=90)
+
+    Padding-top of container is 19px.
+    First label margin-top: 18px
+    Second label margin-top: (54 - (18+15)) = 21px
+    Third label margin-top: (90 - (54+15)) = 21px
+
+    Let's try standard spacing.
+    Gap between tops is 36px (2 rows).
+    Height of label is 15px.
+    Margin needed is 36 - 15 = 21px.
+
+    First label top needs to be at 18px relative to grid start.
+    Container padding-top aligns with grid start (row 0 top).
+    So first label margin-top should be 18px.
+  */
+  margin-top: 21px;
+}
+.weekday-label:first-child {
+  margin-top: 18px;
+}
+
+.heatmap-grid {
+  display: flex;
+  gap: 3px;
+}
+
+.heatmap-week {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.heatmap-cell {
+  width: 15px;
+  height: 15px;
+  border-radius: 2px;
+  background-color: var(--van-gray-2);
+  box-sizing: border-box;
+}
+
+.heatmap-cell.invisible {
+  background-color: transparent;
+}
+
+.level-0 {
+  background-color: var(--heatmap-level-0);
+}
+.level-1 {
+  background-color: var(--heatmap-level-1);
+}
+.level-2 {
+  background-color: var(--heatmap-level-2);
+}
+.level-3 {
+  background-color: var(--heatmap-level-3);
+}
+.level-4 {
+  background-color: var(--heatmap-level-4);
+}
+
+.heatmap-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 10px;
+  color: var(--van-text-color-2);
+}
+
+.legend {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.legend-item {
+  width: 15px;
+  height: 15px;
+  border-radius: 2px;
+}
+</style>

Web/src/components/Global/GlobalAddBill.vue

@@ -6,11 +6,7 @@
     </div>
 
     <!-- Add Bill Modal -->
-    <PopupContainer
-      v-model="showAddBill"
-      title="记一笔"
-      height="75%"
-    >
+    <PopupContainer v-model="showAddBill" title="记一笔" height="75%">
       <van-tabs v-model:active="activeTab" shrink>
         <van-tab title="一句话录账" name="one">
           <OneLineBillAdd :key="componentKey" @success="handleSuccess" />
@@ -79,6 +75,6 @@ const handleSuccess = () => {
   position: sticky;
   top: 0;
   z-index: 10;
-  background-color: #fff;
+  background-color: var(--van-background-2);
 }
 </style>

Web/src/components/PopupContainer.vue

@@ -13,10 +13,12 @@
       <div class="popup-header-fixed">
         <!-- 标题行 (无子标题且有操作时使用 Grid 布局) -->
         <div class="header-title-row" :class="{ 'has-actions': !subtitle && hasActions }">
-          <h3 class="popup-title">{{ title }}</h3>
+          <h3 class="popup-title">
+            {{ title }}
+          </h3>
           <!-- 无子标题时，操作按钮与标题同行 -->
           <div v-if="!subtitle && hasActions" class="header-actions-inline">
-            <slot name="header-actions"></slot>
+            <slot name="header-actions" />
           </div>
         </div>
 
@@ -24,18 +26,18 @@
         <div v-if="subtitle" class="header-stats">
           <span class="stats-text" v-html="subtitle" />
           <!-- 额外操作插槽 -->
-          <slot v-if="hasActions" name="header-actions"></slot>
+          <slot v-if="hasActions" name="header-actions" />
         </div>
       </div>
 
       <!-- 内容区域（可滚动） -->
       <div class="popup-scroll-content">
-        <slot></slot>
+        <slot />
       </div>
 
       <!-- 底部页脚，固定不可滚动 -->
       <div v-if="slots.footer" class="popup-footer-fixed">
-        <slot name="footer"></slot>
+        <slot name="footer" />
       </div>
     </div>
   </van-popup>
@@ -47,24 +49,24 @@ import { computed, useSlots } from 'vue'
 const props = defineProps({
   modelValue: {
     type: Boolean,
-    required: true,
+    required: true
   },
   title: {
     type: String,
-    default: '',
+    default: ''
   },
   subtitle: {
     type: String,
-    default: '',
+    default: ''
   },
   height: {
     type: String,
-    default: '80%',
+    default: '80%'
   },
   closeable: {
     type: Boolean,
-    default: true,
-  },
+    default: true
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -74,7 +76,7 @@ const slots = useSlots()
 // 双向绑定
 const visible = computed({
   get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value),
+  set: (value) => emit('update:modelValue', value)
 })
 
 // 判断是否有操作按钮
@@ -91,8 +93,8 @@ const hasActions = computed(() => !!slots['header-actions'])
 .popup-header-fixed {
   flex-shrink: 0;
   padding: 16px;
-  background-color: var(--van-background-2, #f7f8fa);
-  border-bottom: 1px solid var(--van-border-color, #ebedf0);
+  background-color: var(--van-background-2);
+  border-bottom: 1px solid var(--van-border-color);
   position: sticky;
   top: 0;
   z-index: 10;
@@ -121,7 +123,7 @@ const hasActions = computed(() => !!slots['header-actions'])
   font-weight: 500;
   margin: 0;
   text-align: center;
-  color: var(--van-text-color, #323233);
+  color: var(--van-text-color);
   /*超出长度*/
   overflow: hidden;
   text-overflow: ellipsis;
@@ -139,7 +141,7 @@ const hasActions = computed(() => !!slots['header-actions'])
 .stats-text {
   margin: 0;
   font-size: 14px;
-  color: var(--van-text-color-2, #646566);
+  color: var(--van-text-color-2);
   grid-column: 2;
   text-align: center;
 }
@@ -159,8 +161,8 @@ const hasActions = computed(() => !!slots['header-actions'])
 
 .popup-footer-fixed {
   flex-shrink: 0;
-  border-top: 1px solid var(--van-border-color, #ebedf0);
-  background-color: var(--van-background-2, #f7f8fa);
+  border-top: 1px solid var(--van-border-color);
+  background-color: var(--van-background-2);
   padding: 12px 16px;
 }
 </style>

Web/src/components/ReasonGroupList.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="reason-group-list-v2">
-    <van-empty v-if="groups.length === 0 && !loading" description="暂无数据" />
+    <van-empty
+      v-if="groups.length === 0 && !loading"
+      description="暂无数据"
+    />
 
-    <van-cell-group v-else inset>
+    <van-cell-group
+      v-else
+      inset
+    >
       <van-cell
         v-for="group in groups"
         :key="group.reason"
@@ -27,7 +33,7 @@
             <van-tag
               :type="getTypeColor(group.sampleType)"
               size="medium"
-              style="margin-right: 8px;"
+              style="margin-right: 8px"
             >
               {{ getTypeName(group.sampleType) }}
             </van-tag>
@@ -35,12 +41,15 @@
               v-if="group.sampleClassify"
               type="primary"
               size="medium"
-              style="margin-right: 8px;"
+              style="margin-right: 8px"
             >
               {{ group.sampleClassify }}
             </van-tag>
             <span class="count-text">{{ group.count }} 条</span>
-            <span v-if="group.totalAmount" class="amount-text">
+            <span
+              v-if="group.totalAmount"
+              class="amount-text"
+            >
               ¥{{ Math.abs(group.totalAmount).toFixed(2) }}
             </span>
           </div>
@@ -92,7 +101,10 @@
       title="批量设置分类"
       height="60%"
     >
-      <van-form ref="batchFormRef" class="setting-form">
+      <van-form
+        ref="batchFormRef"
+        class="setting-form"
+      >
         <van-cell-group inset>
           <!-- 显示选中的摘要 -->
           <van-field
@@ -111,20 +123,38 @@
           />
 
           <!-- 交易类型 -->
-          <van-field name="type" label="交易类型">
+          <van-field
+            name="type"
+            label="交易类型"
+          >
             <template #input>
-              <van-radio-group v-model="batchForm.type" direction="horizontal">
-                <van-radio :name="0">支出</van-radio>
-                <van-radio :name="1">收入</van-radio>
-                <van-radio :name="2">不计</van-radio>
+              <van-radio-group
+                v-model="batchForm.type"
+                direction="horizontal"
+              >
+                <van-radio :name="0">
+                  支出
+                </van-radio>
+                <van-radio :name="1">
+                  收入
+                </van-radio>
+                <van-radio :name="2">
+                  不计
+                </van-radio>
               </van-radio-group>
             </template>
           </van-field>
 
           <!-- 分类选择 -->
-          <van-field name="classify" label="分类">
+          <van-field
+            name="classify"
+            label="分类"
+          >
             <template #input>
-              <span v-if="!batchForm.classify" style="opacity: 0.4;">请选择分类</span>
+              <span
+                v-if="!batchForm.classify"
+                style="opacity: 0.4"
+              >请选择分类</span>
               <span v-else>{{ batchForm.classify }}</span>
             </template>
           </van-field>
@@ -152,13 +182,7 @@
 
 <script setup>
 import { ref, computed, watch, onBeforeUnmount } from 'vue'
-import { 
-  showToast, 
-  showSuccessToast, 
-  showLoadingToast, 
-  closeToast,
-  showConfirmDialog
-} from 'vant'
+import { showToast, showSuccessToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
 import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
 import ClassifySelector from './ClassifySelector.vue'
 import TransactionList from './TransactionList.vue'
@@ -212,9 +236,12 @@ const batchForm = ref({
 })
 
 // 监听交易类型变化，重新加载分类
-watch(() => batchForm.value.type, (newVal) => {
+watch(
+  () => batchForm.value.type,
+  (newVal) => {
     batchForm.value.classify = ''
-})
+  }
+)
 
 // 获取类型名称
 const getTypeName = (type) => {
@@ -256,7 +283,9 @@ const handleGroupClick = async (group) => {
 
 // 加载分组的交易记录
 const loadGroupTransactions = async () => {
-  if (transactionFinished.value || !selectedGroup.value) return
+  if (transactionFinished.value || !selectedGroup.value) {
+    return
+  }
 
   transactionLoading.value = true
   try {
@@ -354,9 +383,7 @@ const handleConfirmBatchUpdate = async () => {
       emit('data-changed')
       try {
         window.dispatchEvent(
-          new CustomEvent(
-            'transactions-changed', 
-            { 
+          new CustomEvent('transactions-changed', {
             detail: {
               reason: batchGroup.value.reason
             }
@@ -398,7 +425,7 @@ const handleTransactionClick = (transaction) => {
 
 // 处理分组中的删除事件
 const handleGroupTransactionDelete = async (transactionId) => {
-  groupTransactions.value = groupTransactions.value.filter(t => t.id !== transactionId)
+  groupTransactions.value = groupTransactions.value.filter((t) => t.id !== transactionId)
   groupTransactionsTotal.value = Math.max(0, (groupTransactionsTotal.value || 0) - 1)
 
   if (groupTransactions.value.length === 0 && !transactionFinished.value) {
@@ -409,7 +436,7 @@ const handleGroupTransactionDelete = async (transactionId) => {
   if (groupTransactions.value.length === 0) {
     // 如果删除后当前分组没有交易了，关闭弹窗
     showTransactionList.value = false
-    groups.value = groups.value.filter(g => g.reason !== selectedGroup.value.reason)
+    groups.value = groups.value.filter((g) => g.reason !== selectedGroup.value.reason)
     selectedGroup.value = null
     total.value--
   }
@@ -433,10 +460,12 @@ const onGlobalTransactionDeleted = () => {
   }
 }
 
-window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
+window.addEventListener &&
+  window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
+  window.removeEventListener &&
+    window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
 })
 
 // 当有交易新增/修改/批量更新时的刷新监听
@@ -451,10 +480,12 @@ const onGlobalTransactionsChanged = () => {
   }
 }
 
-window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
+window.addEventListener &&
+  window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
+  window.removeEventListener &&
+    window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
 })
 
 // 处理账单保存后的回调
@@ -471,7 +502,9 @@ const handleTransactionSaved = async () => {
  * 加载数据（支持分页）
  */
 const loadData = async () => {
-  if (finished.value) return
+  if (finished.value) {
+    return
+  }
 
   loading.value = true
   try {
@@ -522,7 +555,7 @@ const refresh = async () => {
  */
 const getList = (onlySelected = false) => {
   if (onlySelected && props.selectable) {
-    return groups.value.filter(g => selectedReasons.value.has(g.reason))
+    return groups.value.filter((g) => selectedReasons.value.has(g.reason))
   }
   return [...groups.value]
 }
@@ -564,7 +597,7 @@ const clearSelection = () => {
  * 全选
  */
 const selectAll = () => {
-  selectedReasons.value = new Set(groups.value.map(g => g.reason))
+  selectedReasons.value = new Set(groups.value.map((g) => g.reason))
 }
 
 // 暴露方法给父组件
@@ -627,13 +660,13 @@ defineExpose({
 
 .count-text {
   font-size: 13px;
-  color: #969799;
+  color: var(--van-text-color-2);
 }
 
 .amount-text {
   font-size: 14px;
   font-weight: 500;
-  color: #ff976a;
+  color: var(--van-orange);
 }
 
 :deep(.van-cell-group--inset) {

Web/src/components/SmartClassifyButton.vue

@@ -11,7 +11,7 @@
   >
     <template v-if="!loading && !saving">
       <van-icon :name="buttonIcon" />
-      <span style="margin-left: 4px;">{{ buttonText }}</span>
+      <span style="margin-left: 4px">{{ buttonText }}</span>
     </template>
   </van-button>
 </template>
@@ -52,28 +52,42 @@ const hasClassifiedResults = computed(() => {
 
 // 按钮类型
 const buttonType = computed(() => {
-  if (saving.value) return 'warning'
-  if (loading.value) return 'primary'
-  if (hasClassifiedResults.value) return 'success'
+  if (saving.value) {
+    return 'warning'
+  }
+  if (loading.value) {
+    return 'primary'
+  }
+  if (hasClassifiedResults.value) {
+    return 'success'
+  }
   return 'primary'
 })
 
 // 按钮图标
 const buttonIcon = computed(() => {
-  if (hasClassifiedResults.value) return 'success'
+  if (hasClassifiedResults.value) {
+    return 'success'
+  }
   return 'fire'
 })
 
 // 按钮文字（非加载状态）
 const buttonText = computed(() => {
-  if (hasClassifiedResults.value) return '保存分类'
+  if (hasClassifiedResults.value) {
+    return '保存分类'
+  }
   return '智能分类'
 })
 
 // 加载中文字
 const loadingText = computed(() => {
-  if (saving.value) return '保存中...'
-  if (loading.value) return '分类中...'
+  if (saving.value) {
+    return '保存中...'
+  }
+  if (loading.value) {
+    return '分类中...'
+  }
   return ''
 })
 
@@ -92,7 +106,9 @@ const handleClick = () => {
  * 保存分类结果
  */
 const handleSaveClassify = async () => {
-  if (saving.value || loading.value) return
+  if (saving.value || loading.value) {
+    return
+  }
 
   try {
     saving.value = true
@@ -104,7 +120,7 @@ const handleSaveClassify = async () => {
     })
 
     // 准备批量更新数据
-    const items = classifiedResults.value.map(item => ({
+    const items = classifiedResults.value.map((item) => ({
       id: item.id,
       classify: item.classify,
       type: item.type
@@ -200,7 +216,7 @@ const handleSmartClassify = async () => {
     // 分批处理
     for (let i = 0; i < allTransactions.length; i += batchSize) {
       const batch = allTransactions.slice(i, i + batchSize)
-      const transactionIds = batch.map(t => t.id)
+      const transactionIds = batch.map((t) => t.id)
       const currentBatch = Math.floor(i / batchSize) + 1
       const totalBatches = Math.ceil(allTransactions.length / batchSize)
 
@@ -229,7 +245,9 @@ const handleSmartClassify = async () => {
       while (true) {
         const { done, value } = await reader.read()
 
-        if (done) break
+        if (done) {
+          break
+        }
 
         buffer += decoder.decode(value, { stream: true })
 
@@ -238,7 +256,9 @@ const handleSmartClassify = async () => {
         buffer = events.pop() || '' // 保留最后一个不完整的部分
 
         for (const eventBlock of events) {
-          if (!eventBlock.trim()) continue
+          if (!eventBlock.trim()) {
+            continue
+          }
 
           try {
             const lines = eventBlock.split('\n')
@@ -276,7 +296,7 @@ const handleSmartClassify = async () => {
               })
 
               // 实时更新交易记录的分类信息
-              const index = props.transactions.findIndex(t => t.id === data.id)
+              const index = props.transactions.findIndex((t) => t.id === data.id)
               if (index !== -1) {
                 const transaction = props.transactions[index]
                 transaction.upsetedClassify = data.Classify
@@ -344,7 +364,7 @@ const handleSmartClassify = async () => {
 
 const removeClassifiedTransaction = (transactionId) => {
   // 从已分类结果中移除指定ID的项
-  classifiedResults.value = classifiedResults.value.filter(item => item.id !== transactionId)
+  classifiedResults.value = classifiedResults.value.filter((item) => item.id !== transactionId)
 }
 
 /**
@@ -365,8 +385,7 @@ const reset = () => {
 defineExpose({
   reset,
   removeClassifiedTransaction
-});
-
+})
 </script>
 
 <style scoped>

Web/src/components/TransactionDetail.vue

@@ -1,15 +1,10 @@
 <template>
-  <PopupContainer
-    v-model="visible"
-    title="交易详情"
-    height="75%"
-    :closeable="false"
-  >
+  <PopupContainer v-model="visible" title="交易详情" height="75%" :closeable="false">
     <template #header-actions>
       <van-button size="small" type="primary" plain @click="handleOffsetClick"> 抵账 </van-button>
     </template>
 
-    <van-form style="margin-top: 12px;">
+    <van-form style="margin-top: 12px">
       <van-cell-group inset>
         <van-cell title="记录时间" :value="formatDate(transaction.createTime)" />
       </van-cell-group>
@@ -55,7 +50,11 @@
 
         <van-field name="type" label="交易类型">
           <template #input>
-              <van-radio-group v-model="editForm.type" direction="horizontal" @change="handleTypeChange">
+            <van-radio-group
+              v-model="editForm.type"
+              direction="horizontal"
+              @change="handleTypeChange"
+            >
               <van-radio :name="0"> 支出 </van-radio>
               <van-radio :name="1"> 收入 </van-radio>
               <van-radio :name="2"> 不计 </van-radio>
@@ -65,22 +64,34 @@
 
         <van-field name="classify" label="交易分类">
           <template #input>
-              <div style="flex: 1;">
+            <div style="flex: 1">
               <div
-                  v-if="transaction && transaction.unconfirmedClassify && transaction.unconfirmedClassify !== editForm.classify" 
+                v-if="
+                  transaction &&
+                  transaction.unconfirmedClassify &&
+                  transaction.unconfirmedClassify !== editForm.classify
+                "
                 class="suggestion-tip"
                 @click="applySuggestion"
               >
                 <van-icon name="bulb-o" class="suggestion-icon" />
                 <span class="suggestion-text">
                   建议: {{ transaction.unconfirmedClassify }}
-                    <span v-if="transaction.unconfirmedType !== null && transaction.unconfirmedType !== undefined && transaction.unconfirmedType !== editForm.type">
+                  <span
+                    v-if="
+                      transaction.unconfirmedType !== null &&
+                      transaction.unconfirmedType !== undefined &&
+                      transaction.unconfirmedType !== editForm.type
+                    "
+                  >
                     ({{ getTypeName(transaction.unconfirmedType) }})
                   </span>
                 </span>
                 <div class="suggestion-apply">应用</div>
               </div>
-                <span v-else-if="!editForm.classify" style="color: #c8c9cc;">请选择交易分类</span>
+              <span v-else-if="!editForm.classify" style="color: var(--van-gray-5)"
+                >请选择交易分类</span
+              >
               <span v-else>{{ editForm.classify }}</span>
             </div>
           </template>
@@ -95,24 +106,14 @@
     </van-form>
 
     <template #footer>
-      <van-button 
-        round 
-        block 
-        type="primary" 
-        :loading="submitting"
-        @click="onSubmit"
-      >
+      <van-button round block type="primary" :loading="submitting" @click="onSubmit">
         保存修改
       </van-button>
     </template>
   </PopupContainer>
 
   <!-- 抵账候选列表弹窗 -->
-  <PopupContainer
-    v-model="showOffsetPopup"
-    title="选择抵账交易"
-    height="75%"
-  >
+  <PopupContainer v-model="showOffsetPopup" title="选择抵账交易" height="75%">
     <van-list>
       <van-cell
         v-for="item in offsetCandidates"
@@ -154,7 +155,11 @@ import { showToast, showConfirmDialog } from 'vant'
 import dayjs from 'dayjs'
 import PopupContainer from '@/components/PopupContainer.vue'
 import ClassifySelector from '@/components/ClassifySelector.vue'
-import { updateTransaction, getCandidatesForOffset, offsetTransactions } from '@/api/transactionRecord'
+import {
+  updateTransaction,
+  getCandidatesForOffset,
+  offsetTransactions
+} from '@/api/transactionRecord'
 
 const props = defineProps({
   show: {
@@ -196,11 +201,16 @@ const occurredAtLabel = computed(() => {
 })
 
 // 监听props变化
-watch(() => props.show, (newVal) => {
+watch(
+  () => props.show,
+  (newVal) => {
     visible.value = newVal
-})
+  }
+)
 
-watch(() => props.transaction, (newVal) => {
+watch(
+  () => props.transaction,
+  (newVal) => {
     if (newVal) {
       isSyncing.value = true
       // 填充编辑表单
@@ -224,7 +234,8 @@ watch(() => props.transaction, (newVal) => {
         isSyncing.value = false
       })
     }
-})
+  }
+)
 
 watch(visible, (newVal) => {
   emit('update:show', newVal)
@@ -258,7 +269,10 @@ const onConfirmTime = ({ selectedValues }) => {
 const applySuggestion = () => {
   if (props.transaction.unconfirmedClassify) {
     editForm.classify = props.transaction.unconfirmedClassify
-    if (props.transaction.unconfirmedType !== null && props.transaction.unconfirmedType !== undefined) {
+    if (
+      props.transaction.unconfirmedType !== null &&
+      props.transaction.unconfirmedType !== undefined
+    ) {
       editForm.type = props.transaction.unconfirmedType
     }
   }
@@ -314,7 +328,9 @@ const handleClassifyChange = () => {
 
 // 清空分类
 const formatDate = (dateString) => {
-  if (!dateString) return ''
+  if (!dateString) {
+    return ''
+  }
   const date = new Date(dateString)
   return date.toLocaleString('zh-CN', {
     year: 'numeric',
@@ -347,7 +363,7 @@ const handleOffsetClick = async () => {
 const handleCandidateSelect = (candidate) => {
   showConfirmDialog({
     title: '确认抵账',
-    message: `确认将当前交易与 "${candidate.reason}" (${candidate.amount}) 互相抵消吗？\n抵消后两笔交易将被删除。`,
+    message: `确认将当前交易与 "${candidate.reason}" (${candidate.amount}) 互相抵消吗？\n抵消后两笔交易将被删除。`
   })
     .then(async () => {
       try {
@@ -367,7 +383,7 @@ const handleCandidateSelect = (candidate) => {
     })
     .catch(() => {
       // on cancel
-    });
+    })
 }
 </script>
 
@@ -377,17 +393,18 @@ const handleCandidateSelect = (candidate) => {
   display: flex;
   align-items: center;
   padding: 6px 10px;
-  background: #ecf9ff;
-  color: #1989fa;
+  background: var(--van-active-color);
+  color: var(--van-primary-color);
   border-radius: 8px;
   cursor: pointer;
   transition: opacity 0.2s;
-  border: 1px solid rgba(25, 137, 250, 0.1);
+  border: 1px solid var(--van-primary-color);
   width: fit-content;
+  opacity: 0.1;
 }
 
 .suggestion-tip:active {
-  opacity: 0.7;
+  opacity: 0.2;
 }
 
 .suggestion-icon {
@@ -402,23 +419,12 @@ const handleCandidateSelect = (candidate) => {
 .suggestion-apply {
   margin-left: 8px;
   padding: 0 6px;
-  background: #1989fa;
-  color: #fff;
+  background: var(--van-primary-color);
+  color: var(--van-white);
   border-radius: 4px;
   font-size: 10px;
   height: 18px;
   line-height: 18px;
   font-weight: bold;
 }
-
-@media (prefers-color-scheme: dark) {
-  .suggestion-tip {
-    background: rgba(25, 137, 250, 0.15);
-    border-color: rgba(25, 137, 250, 0.2);
-    color: #58a6ff;
-  }
-  .suggestion-apply {
-    background: #58a6ff;
-  }
-}
 </style>

Web/src/components/TransactionList.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="transaction-list-container transaction-list">
-    <van-list
-      :loading="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="onLoad"
-    >
+    <van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
       <van-cell-group v-if="transactions && transactions.length" inset style="margin-top: 10px">
         <van-swipe-cell
           v-for="transaction in transactions"
@@ -19,10 +14,7 @@
               class="checkbox-col"
               @update:model-value="toggleSelection(transaction)"
             />
-            <div
-              class="transaction-card"
-              @click="handleClick(transaction)"
-            >
+            <div class="transaction-card" @click="handleClick(transaction)">
               <div class="card-left">
                 <div class="transaction-title">
                   <span class="reason">{{ transaction.reason || '(无摘要)' }}</span>
@@ -30,34 +22,32 @@
                 <div class="transaction-info">
                   <div>交易时间: {{ formatDate(transaction.occurredAt) }}</div>
                   <div>
-                    <span v-if="transaction.classify">
-                      分类: {{ transaction.classify }}
-                    </span>
-                    <span v-if="transaction.upsetedClassify && transaction.upsetedClassify !== transaction.classify" style="color: #ff976a">
+                    <span v-if="transaction.classify"> 分类: {{ transaction.classify }} </span>
+                    <span
+                      v-if="
+                        transaction.upsetedClassify &&
+                        transaction.upsetedClassify !== transaction.classify
+                      "
+                      style="color: var(--van-warning-color)"
+                    >
                       → {{ transaction.upsetedClassify }}
                     </span>
-                    
-                  </div>
-                  <div v-if="transaction.importFrom">
-                    来源: {{ transaction.importFrom }}
                   </div>
+                  <div v-if="transaction.importFrom">来源: {{ transaction.importFrom }}</div>
                 </div>
               </div>
               <div class="card-middle">
-                <van-tag 
-                  :type="getTypeTagType(transaction.type)" 
-                  size="medium"
-                >
+                <van-tag :type="getTypeTagType(transaction.type)" size="medium">
                   {{ getTypeName(transaction.type) }}
                 </van-tag>
                 <template
-                  v-if="Number.isFinite(transaction.upsetedType) && transaction.upsetedType !== transaction.type" 
+                  v-if="
+                    Number.isFinite(transaction.upsetedType) &&
+                    transaction.upsetedType !== transaction.type
+                  "
                 >
                   →
-                  <van-tag
-                    :type="getTypeTagType(transaction.upsetedType)" 
-                    size="medium"
-                  >
+                  <van-tag :type="getTypeTagType(transaction.upsetedType)" size="medium">
                     {{ getTypeName(transaction.upsetedType) }}
                   </van-tag>
                 </template>
@@ -70,11 +60,14 @@
                   <div v-if="transaction.balance && transaction.balance > 0" class="balance">
                     余额: {{ formatMoney(transaction.balance) }}
                   </div>
-                  <div v-if="transaction.refundAmount && transaction.refundAmount > 0" class="balance">
+                  <div
+                    v-if="transaction.refundAmount && transaction.refundAmount > 0"
+                    class="balance"
+                  >
                     退款: {{ formatMoney(transaction.refundAmount) }}
                   </div>
                 </div>
-                <van-icon name="arrow" size="16" color="#c8c9cc" />
+                <van-icon name="arrow" size="16" color="var(--van-gray-5)" />
               </div>
             </div>
           </div>
@@ -212,16 +205,24 @@ const getTypeTagType = (type) => {
 
 // 获取金额样式类
 const getAmountClass = (type) => {
-  if (type === 0) return 'expense'
-  if (type === 1) return 'income'
+  if (type === 0) {
+    return 'expense'
+  }
+  if (type === 1) {
+    return 'income'
+  }
   return 'neutral'
 }
 
 // 格式化金额（带符号）
 const formatAmount = (amount, type) => {
   const formatted = formatMoney(amount)
-  if (type === 0) return `- ${formatted}`
-  if (type === 1) return `+ ${formatted}`
+  if (type === 0) {
+    return `- ${formatted}`
+  }
+  if (type === 1) {
+    return `+ ${formatted}`
+  }
   return formatted
 }
 
@@ -232,7 +233,9 @@ const formatMoney = (amount) => {
 
 // 格式化日期
 const formatDate = (dateString) => {
-  if (!dateString) return ''
+  if (!dateString) {
+    return ''
+  }
   const date = new Date(dateString)
   return date.toLocaleString('zh-CN', {
     year: 'numeric',
@@ -315,12 +318,12 @@ const formatDate = (dateString) => {
 
 .transaction-info {
   font-size: 12px;
-  color: #969799;
+  color: var(--van-text-color-2);
   line-height: 1.6;
 }
 
 .original-info {
-  color: #ff976a;
+  color: var(--van-orange);
   font-style: italic;
   display: flex;
   align-items: center;
@@ -343,16 +346,16 @@ const formatDate = (dateString) => {
 }
 
 .amount.expense {
-  color: #ee0a24;
+  color: var(--van-danger-color);
 }
 
 .amount.income {
-  color: #07c160;
+  color: var(--van-success-color);
 }
 
 .balance {
   font-size: 12px;
-  color: #969799;
+  color: var(--van-text-color-2);
   white-space: nowrap;
 }
 

Web/src/main.js

@@ -8,7 +8,7 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import vant from 'vant'
-import { ConfigProvider } from 'vant';
+import { ConfigProvider } from 'vant'
 import 'vant/lib/index.css'
 
 // 注册 Service Worker
@@ -19,7 +19,7 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(vant)
-app.use(ConfigProvider);
+app.use(ConfigProvider)
 
 app.mount('#app')
 

Web/src/registerServiceWorker.js

@@ -1,65 +1,68 @@
-import { ref } from 'vue';
+import { ref } from 'vue'
 
-export const needRefresh = ref(false);
-let swRegistration = null;
+export const needRefresh = ref(false)
+let swRegistration = null
 
 export async function updateServiceWorker() {
   if (swRegistration && swRegistration.waiting) {
-    await swRegistration.waiting.postMessage({ type: 'SKIP_WAITING' });
+    await swRegistration.waiting.postMessage({ type: 'SKIP_WAITING' })
   }
 }
 
 export function register() {
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
-      const swUrl = `/service-worker.js`;
+      const swUrl = '/service-worker.js'
 
       navigator.serviceWorker
         .register(swUrl)
         .then((registration) => {
-          swRegistration = registration;
-          console.log('[SW] Service Worker 注册成功:', registration.scope);
+          swRegistration = registration
+          console.log('[SW] Service Worker 注册成功:', registration.scope)
 
           // 如果已经有等待中的更新
           if (registration.waiting) {
-            console.log('[SW] 发现未处理的新版本');
-            needRefresh.value = true;
+            console.log('[SW] 发现未处理的新版本')
+            needRefresh.value = true
           }
 
           // 检查更新
           registration.addEventListener('updatefound', () => {
-            const newWorker = registration.installing;
-            console.log('[SW] 发现新版本');
+            const newWorker = registration.installing
+            console.log('[SW] 发现新版本')
 
             newWorker.addEventListener('statechange', () => {
               if (newWorker.state === 'installed') {
                 if (navigator.serviceWorker.controller) {
                   // 新的 Service Worker 已安装，提示用户刷新
-                  console.log('[SW] 新版本可用，请刷新页面');
-                  needRefresh.value = true;
+                  console.log('[SW] 新版本可用，请刷新页面')
+                  needRefresh.value = true
                 } else {
                   // 首次安装
-                  console.log('[SW] 内容已缓存，可离线使用');
+                  console.log('[SW] 内容已缓存，可离线使用')
                 }
               }
-            });
-          });
+            })
+          })
 
           // 定期检查更新
-          setInterval(() => {
-            registration.update();
-          }, 60 * 60 * 1000); // 每小时检查一次
+          setInterval(
+            () => {
+              registration.update()
+            },
+            60 * 60 * 1000
+          ) // 每小时检查一次
         })
         .catch((error) => {
-          console.error('[SW] Service Worker 注册失败:', error);
-        });
+          console.error('[SW] Service Worker 注册失败:', error)
+        })
 
       // 监听 Service Worker 控制器变化
       navigator.serviceWorker.addEventListener('controllerchange', () => {
-        console.log('[SW] 控制器已更改，页面将刷新');
-        window.location.reload();
-      });
-    });
+        console.log('[SW] 控制器已更改，页面将刷新')
+        window.location.reload()
+      })
+    })
   }
 }
 
@@ -67,35 +70,37 @@ export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready
       .then((registration) => {
-        registration.unregister();
+        registration.unregister()
       })
       .catch((error) => {
-        console.error(error.message);
-      });
+        console.error(error.message)
+      })
   }
 }
 
-
 // 请求通知权限
 export function requestNotificationPermission() {
   if ('Notification' in window && 'serviceWorker' in navigator) {
     Notification.requestPermission().then((permission) => {
       if (permission === 'granted') {
-        console.log('[SW] 通知权限已授予');
+        console.log('[SW] 通知权限已授予')
       }
-    });
+    })
   }
 }
 
 // 后台同步
 export function registerBackgroundSync(tag = 'sync-data') {
   if ('serviceWorker' in navigator && 'SyncManager' in window) {
-    navigator.serviceWorker.ready.then((registration) => {
-      return registration.sync.register(tag);
-    }).then(() => {
-      console.log('[SW] 后台同步已注册:', tag);
-    }).catch((err) => {
-      console.error('[SW] 后台同步注册失败:', err);
-    });
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        return registration.sync.register(tag)
+      })
+      .then(() => {
+        console.log('[SW] 后台同步已注册:', tag)
+      })
+      .catch((err) => {
+        console.error('[SW] 后台同步注册失败:', err)
+      })
   }
 }

Web/src/router/index.js

@@ -8,106 +8,106 @@ const router = createRouter({
       path: '/login',
       name: 'login',
       component: () => import('../views/LoginView.vue'),
-      meta: { requiresAuth: false },
+      meta: { requiresAuth: false }
     },
     {
       path: '/balance',
       name: 'balance',
       component: () => import('../views/BalanceView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/email',
       name: 'email',
       component: () => import('../views/EmailRecord.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/setting',
       name: 'setting',
       component: () => import('../views/SettingView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/calendar',
       name: 'calendar',
       component: () => import('../views/CalendarView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/smart-classification',
       name: 'smart-classification',
       component: () => import('../views/ClassificationSmart.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/classification-edit',
       name: 'classification-edit',
       component: () => import('../views/ClassificationEdit.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/classification-batch',
       name: 'classification-batch',
       component: () => import('../views/ClassificationBatch.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/classification-nlp',
       name: 'classification-nlp',
       component: () => import('../views/ClassificationNLP.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/',
       name: 'statistics',
       component: () => import('../views/StatisticsView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/bill-analysis',
       name: 'bill-analysis',
       component: () => import('../views/BillAnalysisView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/message',
       name: 'message',
       redirect: { path: '/balance', query: { tab: 'message' } },
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/periodic-record',
       name: 'periodic-record',
       component: () => import('../views/PeriodicRecord.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/log',
       name: 'log',
       component: () => import('../views/LogView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/budget',
       name: 'budget',
       component: () => import('../views/BudgetView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       path: '/scheduled-tasks',
       name: 'scheduled-tasks',
       component: () => import('../views/ScheduledTasksView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     },
     {
       // 待确认的分类项
       path: '/unconfirmed-classification',
       name: 'unconfirmed-classification',
       component: () => import('../views/UnconfirmedClassification.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true }
     }
-  ],
+  ]
 })
 
 // 路由守卫
@@ -127,4 +127,3 @@ router.beforeEach((to, from, next) => {
 })
 
 export default router
-

Web/src/stores/auth.js

@@ -7,7 +7,9 @@ export const useAuthStore = defineStore('auth', () => {
   const expiresAt = ref(localStorage.getItem('expiresAt') || '')
 
   const isAuthenticated = computed(() => {
-    if (!token.value || !expiresAt.value) return false
+    if (!token.value || !expiresAt.value) {
+      return false
+    }
     // 检查token是否过期
     return new Date(expiresAt.value) > new Date()
   })
@@ -44,6 +46,6 @@ export const useAuthStore = defineStore('auth', () => {
     expiresAt,
     isAuthenticated,
     login,
-    logout,
+    logout
   }
 })

Web/src/styles/common.css

@@ -4,16 +4,10 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain; /* 防止滚动链传播到 body */
-  background: #f7f8fa;
+  background: var(--van-background);
   padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
-@media (prefers-color-scheme: dark) {
-  .page-container {
-    background: #141414;
-  }
-}
-
 /* 页面内容区域 */
 .page-content {
   padding: 16px 0 0 0;
@@ -26,20 +20,12 @@
 
 /* 统一卡片样式 */
 .common-card {
-  background: #ffffff;
+  background: var(--van-background-2);
   margin: 0 12px 16px;
   padding: 16px;
   border-radius: 16px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid #ebedf0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .common-card {
-    background: #1f1f1f;
-    border-color: #2c2c2c;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-  }
+  border: 1px solid var(--van-border-color);
 }
 
 /* 卡片头部 */
@@ -60,31 +46,16 @@
 /* 增加卡片组的对比度 */
 :deep(.van-cell-group--inset) {
   margin: 10px 16px;
-  background: #ffffff;
+  background: var(--van-background-2);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid #ebedf0;
+  border: 1px solid var(--van-border-color);
   border-radius: 16px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :deep(.van-cell-group--inset) {
-    background: #1f1f1f;
-    border-color: #2c2c2c;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-  }
-}
-
 /* 单元格样式 */
 :deep(.van-cell) {
-  background: #ffffff;
-  border-bottom: 1px solid #ebedf0;
-}
-
-@media (prefers-color-scheme: dark) {
-  :deep(.van-cell) {
-    background: #1f1f1f;
-    border-bottom: 1px solid #2c2c2c;
-  }
+  background: var(--van-background-2);
+  border-bottom: 1px solid var(--van-border-color);
 }
 
 :deep(.van-cell:last-child) {
@@ -96,31 +67,17 @@
   padding: 16px;
   height: 100%;
   overflow-y: auto;
-  background: #f7f8fa;
-}
-
-@media (prefers-color-scheme: dark) {
-  .detail-popup {
-    background: #141414;
-  }
+  background: var(--van-background);
 }
 
 /* 弹出层内的卡片组样式 */
 .detail-popup :deep(.van-cell-group--inset) {
-  background: #ffffff;
+  background: var(--van-background-2);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid #ebedf0;
+  border: 1px solid var(--van-border-color);
   border-radius: 16px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .detail-popup :deep(.van-cell-group--inset) {
-    background: #1f1f1f;
-    border-color: #2c2c2c;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-  }
-}
-
 /* 详情头部样式 */
 .detail-header {
   margin-bottom: 16px;
@@ -136,7 +93,7 @@
 .detail-header p {
   margin: 0;
   font-size: 14px;
-  color: #969799;
+  color: var(--van-text-color-2);
   font-weight: normal;
 }
 
@@ -216,17 +173,11 @@
   padding: 12px 16px;
   margin: 0 12px;
   margin-top: 12px;
-  background: #ffffff;
+  background: var(--van-background-2);
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-@media (prefers-color-scheme: dark) {
-  .sticky-header {
-    background: #1f1f1f;
-  }
-}
-
 .sticky-header-text {
   font-size: 16px;
   font-weight: 600;
@@ -240,11 +191,11 @@
 
 /* ===== 颜色工具类 ===== */
 .text-expense {
-  color: #ff6b6b;
+  color: var(--van-danger-color);
 }
 
 .text-income {
-  color: #51cf66;
+  color: var(--van-success-color);
 }
 
 /* 底部操作栏 */
@@ -256,18 +207,11 @@
   display: flex;
   gap: 12px;
   padding: 12px;
-  background-color: var(--van-background-2, #fff);
+  background-color: var(--van-background-2);
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
   z-index: 100;
 }
 
-@media (prefers-color-scheme: dark) {
-  .bottom-button {
-    background-color: var(--van-background-2, #2c2c2c);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
-  }
-}
-
 /* ===== 统一弹窗样式 ===== */
 /* 弹窗容器 - 使用 flex 布局，确保标题固定，内容可滚动 */
 .popup-container {
@@ -304,15 +248,5 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
-}
-
-/* 深色模式适配 */
-@media (prefers-color-scheme: dark) {
-  .popup-header-fixed {
-    background: #1f1f1f;
-  }
-  
-  .popup-scroll-content {
-    background: #141414;
-  }
+  background: var(--van-background);
 }

Web/src/styles/rich-content.css

@@ -71,9 +71,9 @@
 .rich-html-content thead,
 .rich-html-content tbody {
   display: table;
-  width: 130%;
-  min-width: 400px; /* 确保窄屏下有足够宽度触发滚动 */
+  width: 100%;
   table-layout: fixed; /* 核心：强制列宽分配逻辑一致 */
+  border-collapse: collapse;
 }
 
 .rich-html-content tr {
@@ -87,52 +87,48 @@
   text-align: left;
   border: none;
   border-bottom: 1px solid var(--van-border-color-light);
-  font-size: 12px;
+  font-size: 11px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  box-sizing: border-box;
 }
 
-/* 针对第一列“名称”分配更多空间，其余平分 */
+.rich-html-content th {
+  background: var(--van-border-color);
+  color: var(--van-text-color);
+  font-weight: 600;
+}
+
+/* 通用列宽规则：第一列占 30%，其他列自动平分剩余 70% */
 .rich-html-content th:first-child,
 .rich-html-content td:first-child {
   width: 30%;
 }
 
-.rich-html-content th:not(:first-child),
-.rich-html-content td:not(:first-child) {
-  width: 20%;
-}
-
-.rich-html-content th {
-  background: var(--van-gray-1);
-  color: var(--van-text-color);
-  font-weight: 600;
-}
-
 /* 业务特定样式：收入、支出、高亮 */
 .rich-html-content .income-value {
-  color: #07c160 !important;
+  color: var(--van-success-color) !important;
   font-weight: 600;
 }
 
 .rich-html-content .expense-value {
-  color: #ee0a24 !important;
+  color: var(--van-danger-color) !important;
   font-weight: 600;
 }
 
 .rich-html-content .highlight {
-  background-color: #fffbe6;
-  color: #ed6a0c;
+  background-color: var(--van-orange-light);
+  color: var(--van-orange-dark);
   padding: 2px 6px;
   border-radius: 4px;
   font-weight: bold;
-  border: 1px solid #ffe58f;
+  border: 1px solid var(--van-orange);
   margin: 0 2px;
 }
 
 /* 暗色模式适配 */
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   .rich-html-content .highlight {
     background-color: rgba(255, 243, 205, 0.2);
     color: #ffc107;
@@ -160,4 +156,4 @@
   .rich-html-content td {
     border-bottom: 1px solid #2c2c2c;
   }
-}
+} */

Web/src/utils/theme.js

@@ -0,0 +1,4 @@
+export const getCssVar = (name) => {
+  const val = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return val || '#999' // Default fallback
+}

Web/src/views/BalanceView.vue

@@ -20,7 +20,7 @@
         />
       </template>
     </van-nav-bar>
-    <van-tabs v-model:active="tabActive" animated>
+    <van-tabs v-model:active="tabActive" type="card" style="margin: 12px 0 2px 0">
       <van-tab title="账单" name="balance" />
       <van-tab title="邮件" name="email" />
       <van-tab title="消息" name="message" />
@@ -33,25 +33,28 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import TransactionsRecord from './TransactionsRecord.vue';
-import EmailRecord from './EmailRecord.vue';
-import MessageView from './MessageView.vue';
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import TransactionsRecord from './TransactionsRecord.vue'
+import EmailRecord from './EmailRecord.vue'
+import MessageView from './MessageView.vue'
 
-const route = useRoute();
-const tabActive = ref(route.query.tab || 'balance');
+const route = useRoute()
+const tabActive = ref(route.query.tab || 'balance')
 
 // 监听路由参数变化，用于从 tabbar 点击时切换 tab
-watch(() => route.query.tab, (newTab) => {
+watch(
+  () => route.query.tab,
+  (newTab) => {
     if (newTab) {
-    tabActive.value = newTab;
+      tabActive.value = newTab
     }
-});
+  }
+)
 
-const transactionsRecordRef = ref(null);
-const emailRecordRef = ref(null);
-const messageViewRef = ref(null);
+const transactionsRecordRef = ref(null)
+const emailRecordRef = ref(null)
+const messageViewRef = ref(null)
 </script>
 
 <style scoped>

Web/src/views/BillAnalysisView.vue

@@ -12,7 +12,7 @@
         <van-icon
           name="setting-o"
           size="20"
-          style="cursor: pointer; padding-right: 12px;"
+          style="cursor: pointer; padding-right: 12px"
           @click="onClickPrompt"
         />
       </template>
@@ -33,7 +33,9 @@
         />
 
         <div class="quick-questions">
-          <div class="quick-title">快捷问题</div>
+          <div class="quick-title">
+            快捷问题
+          </div>
           <van-tag
             v-for="(q, index) in quickQuestions"
             :key="index"
@@ -61,7 +63,10 @@
       </div>
 
       <!-- 结果区域 -->
-      <div v-if="showResult" class="result-section">
+      <div
+        v-if="showResult"
+        class="result-section"
+      >
         <div class="result-header">
           <h3>分析结果</h3>
           <van-icon
@@ -72,12 +77,18 @@
           />
         </div>
 
-        <div ref="resultContainer" class="result-content rich-html-content">
-          <div v-html="resultHtml"></div>
-          <van-loading v-if="analyzing" class="result-loading">
+        <div
+          ref="resultContainer"
+          class="result-content rich-html-content"
+        >
+          <div v-html="resultHtml" />
+          <van-loading
+            v-if="analyzing"
+            class="result-loading"
+          >
             AI正在分析中...
           </van-loading>
-          <div ref="scrollAnchor"></div>
+          <div ref="scrollAnchor" />
         </div>
       </div>
     </div>
@@ -204,10 +215,13 @@ const startAnalysis = async () => {
 
   try {
     const baseUrl = import.meta.env.VITE_API_BASE_URL || ''
+    const token = localStorage.getItem('token')
+
     const response = await fetch(`${baseUrl}/TransactionRecord/AnalyzeBill`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
       },
       body: JSON.stringify({
         userInput: userInput.value
@@ -224,7 +238,9 @@ const startAnalysis = async () => {
     while (true) {
       const { done, value } = await reader.read()
 
-      if (done) break
+      if (done) {
+        break
+      }
 
       const chunk = decoder.decode(value, { stream: true })
       const lines = chunk.split('\n')
@@ -251,7 +267,6 @@ const startAnalysis = async () => {
         }
       }
     }
-
   } catch (error) {
     console.error('分析失败:', error)
     showToast('分析失败，请重试')
@@ -271,21 +286,14 @@ const startAnalysis = async () => {
 
 /* 输入区域 */
 .input-section {
-  background: #ffffff;
+  background: var(--van-background-2);
   padding: 20px;
   border-radius: 16px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid #ebedf0;
+  border: 1px solid var(--van-border-color);
   margin-bottom: 16px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .input-section {
-    background: #1f1f1f;
-    border-color: #2c2c2c;
-  }
-}
-
 .input-header h3 {
   font-size: 18px;
   font-weight: 600;
@@ -352,7 +360,7 @@ const startAnalysis = async () => {
 }
 
 .error-message {
-  color: #ff6b6b;
+  color: var(--van-danger-color);
   text-align: center;
   padding: 20px;
 }

Web/src/views/CalendarView.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="page-container calendar-container">
     <van-calendar
       title="日历"
@@ -11,6 +11,11 @@
       @select="onDateSelect"
     />
 
+    <ContributionHeatmap ref="heatmapRef" />
+
+    <!-- 底部安全距离 -->
+    <div style="height: calc(60px + env(safe-area-inset-bottom, 0px))" />
+
     <!-- 日期交易列表弹出层 -->
     <PopupContainer
       v-model="listVisible"
@@ -45,158 +50,165 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
-import { showToast } from "vant";
-import request from "@/api/request";
-import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRecord";
-import TransactionList from "@/components/TransactionList.vue";
-import TransactionDetail from "@/components/TransactionDetail.vue";
-import SmartClassifyButton from "@/components/SmartClassifyButton.vue";
-import PopupContainer from "@/components/PopupContainer.vue";
+import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { showToast } from 'vant'
+import request from '@/api/request'
+import { getTransactionDetail, getTransactionsByDate } from '@/api/transactionRecord'
+import TransactionList from '@/components/TransactionList.vue'
+import TransactionDetail from '@/components/TransactionDetail.vue'
+import SmartClassifyButton from '@/components/SmartClassifyButton.vue'
+import PopupContainer from '@/components/PopupContainer.vue'
+import ContributionHeatmap from '@/components/ContributionHeatmap.vue'
 
-const dailyStatistics = ref({});
-const listVisible = ref(false);
-const detailVisible = ref(false);
-const dateTransactions = ref([]);
-const currentTransaction = ref(null);
-const listLoading = ref(false);
-const selectedDate = ref(null);
-const selectedDateText = ref("");
+const dailyStatistics = ref({})
+const listVisible = ref(false)
+const detailVisible = ref(false)
+const dateTransactions = ref([])
+const currentTransaction = ref(null)
+const listLoading = ref(false)
+const selectedDate = ref(null)
+const selectedDateText = ref('')
+const heatmapRef = ref(null)
 
 // 设置日历可选范围（例如：过去2年到未来1年）
-const minDate = new Date(new Date().getFullYear() - 2, 0, 1); // 2年前的1月1日
-const maxDate = new Date(new Date().getFullYear() + 1, 11, 31); // 明年12月31日
+const minDate = new Date(new Date().getFullYear() - 2, 0, 1) // 2年前的1月1日
+const maxDate = new Date(new Date().getFullYear() + 1, 11, 31) // 明年12月31日
 
 onMounted(async () => {
-  await nextTick();
+  await nextTick()
   setTimeout(() => {
     // 计算页面高度，滚动3/4高度以显示更多日期
-    const height = document.querySelector(".calendar-container").clientHeight * 0.45;
-    document.querySelector(".van-calendar__body").scrollBy({
+    const height = document.querySelector('.calendar-container').clientHeight * 0.43
+    document.querySelector('.van-calendar__body').scrollBy({
       top: -height,
-      behavior: "smooth",
-    });
-  }, 300);
-});
+      behavior: 'smooth'
+    })
+  }, 300)
+})
 
 // 获取日历统计数据
 const fetchDailyStatistics = async (year, month) => {
   try {
-    const response = await request.get("/TransactionRecord/GetDailyStatistics", {
-      params: { year, month },
-    });
+    const response = await request.get('/TransactionRecord/GetDailyStatistics', {
+      params: { year, month }
+    })
     if (response.success && response.data) {
       // 将数组转换为对象，key为日期
-      const statsMap = {};
+      const statsMap = {}
       response.data.forEach((item) => {
+        console.warn(item)
         statsMap[item.date] = {
           count: item.count,
-          amount: item.amount,
-        };
-      });
+          amount: (item.income - item.expense).toFixed(1)
+        }
+      })
       dailyStatistics.value = {
         ...dailyStatistics.value,
-        ...statsMap,
-      };
+        ...statsMap
+      }
     }
   } catch (error) {
-    console.error("获取日历统计数据失败:", error);
+    console.error('获取日历统计数据失败:', error)
+  }
 }
-};
 
-const smartClassifyButtonRef = ref(null);
+const smartClassifyButtonRef = ref(null)
 // 获取指定日期的交易列表
 const fetchDateTransactions = async (date) => {
   try {
-    listLoading.value = true;
+    listLoading.value = true
     const dateStr = date
-      .toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
-      .replace(/\//g, "-");
+      .toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      })
+      .replace(/\//g, '-')
 
-    const response = await getTransactionsByDate(dateStr);
+    const response = await getTransactionsByDate(dateStr)
 
     if (response.success && response.data) {
       // 根据金额从大到小排序
-      dateTransactions.value = response
-        .data
-        .sort((a, b) => b.amount - a.amount);
+      dateTransactions.value = response.data.sort((a, b) => b.amount - a.amount)
       // 重置智能分类按钮
       smartClassifyButtonRef.value?.reset()
     } else {
-      dateTransactions.value = [];
-      showToast(response.message || "获取交易列表失败");
+      dateTransactions.value = []
+      showToast(response.message || '获取交易列表失败')
     }
   } catch (error) {
-    console.error("获取日期交易列表失败:", error);
-    dateTransactions.value = [];
-    showToast("获取交易列表失败");
+    console.error('获取日期交易列表失败:', error)
+    dateTransactions.value = []
+    showToast('获取交易列表失败')
   } finally {
-    listLoading.value = false;
+    listLoading.value = false
+  }
 }
-};
 
 const getBalance = (transactions) => {
-  let balance = 0;
-  transactions.forEach(tx => {
+  let balance = 0
+  transactions.forEach((tx) => {
     if (tx.type === 1) {
-      balance += tx.amount;
+      balance += tx.amount
     } else if (tx.type === 0) {
-      balance -= tx.amount;
+      balance -= tx.amount
     }
-  });
+  })
 
   if (balance >= 0) {
-    return `结余收入 ${balance.toFixed(1)} 元`;
+    return `结余收入 ${balance.toFixed(1)} 元`
   } else {
-    return `结余支出 ${(-balance).toFixed(1)} 元`;
+    return `结余支出 ${(-balance).toFixed(1)} 元`
+  }
 }
-};
 
 // 当月份显示时触发
 const onMonthShow = ({ date }) => {
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  fetchDailyStatistics(year, month);
-};
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  fetchDailyStatistics(year, month)
+}
 
 // 日期选择事件
 const onDateSelect = (date) => {
-  selectedDate.value = date;
-  selectedDateText.value = formatSelectedDate(date);
-  fetchDateTransactions(date);
-  listVisible.value = true;
-};
+  selectedDate.value = date
+  selectedDateText.value = formatSelectedDate(date)
+  fetchDateTransactions(date)
+  listVisible.value = true
+}
 
 // 格式化选中的日期
 const formatSelectedDate = (date) => {
-  return date.toLocaleDateString("zh-CN", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    weekday: "long",
-  });
-};
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'long'
+  })
+}
 
 // 查看详情
 const viewDetail = async (transaction) => {
   try {
-    const response = await getTransactionDetail(transaction.id);
+    const response = await getTransactionDetail(transaction.id)
     if (response.success) {
-      currentTransaction.value = response.data;
-      detailVisible.value = true;
+      currentTransaction.value = response.data
+      detailVisible.value = true
     } else {
-      showToast(response.message || "获取详情失败");
+      showToast(response.message || '获取详情失败')
     }
   } catch (error) {
-    console.error("获取详情出错:", error);
-    showToast("获取详情失败");
+    console.error('获取详情出错:', error)
+    showToast('获取详情失败')
+  }
 }
-};
 
 // 详情保存后的回调
 const onDetailSave = async (saveData) => {
-  var item = dateTransactions.value.find(tx => tx.id === saveData.id);
-  if(!item) return
+  const item = dateTransactions.value.find((tx) => tx.id === saveData.id)
+  if (!item) {
+    return
+  }
 
   // 如果分类发生了变化 移除智能分类的内容，防止被智能分类覆盖
   if (item.classify !== saveData.classify) {
@@ -206,58 +218,60 @@ const onDetailSave = async (saveData) => {
   }
 
   // 更新当前日期交易列表中的数据
-  Object.assign(item, saveData);
-
-
+  Object.assign(item, saveData)
 
   // 重新加载当前月份的统计数据
-  const now = selectedDate.value || new Date();
-  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
-};
+  const now = selectedDate.value || new Date()
+  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+}
 
 // 处理删除事件：从当前日期交易列表中移除，并刷新当日和当月统计
 const handleDateTransactionDelete = async (transactionId) => {
-  dateTransactions.value = dateTransactions.value.filter(t => t.id !== transactionId)
+  dateTransactions.value = dateTransactions.value.filter((t) => t.id !== transactionId)
 
   // 刷新当前日期以及当月的统计数据
-  const now = selectedDate.value || new Date();
-  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
-};
+  const now = selectedDate.value || new Date()
+  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+}
 
 // 智能分类保存回调
 const onSmartClassifySave = async () => {
   // 保存完成后重新加载数据
   if (selectedDate.value) {
-    await fetchDateTransactions(selectedDate.value);
+    await fetchDateTransactions(selectedDate.value)
   }
   // 重新加载统计数据
-  const now = selectedDate.value || new Date();
-  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
-};
+  const now = selectedDate.value || new Date()
+  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+}
 
 const formatterCalendar = (day) => {
-  const dayCopy = { ...day };
+  const dayCopy = { ...day }
   if (dayCopy.date.toDateString() === new Date().toDateString()) {
-    dayCopy.text = "今天";
+    dayCopy.text = '今天'
   }
 
   // 格式化日期为 yyyy-MM-dd
   const dateKey = dayCopy.date
-    .toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
-    .replace(/\//g, "-");
-  const stats = dailyStatistics.value[dateKey];
+    .toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    })
+    .replace(/\//g, '-')
+  const stats = dailyStatistics.value[dateKey]
 
   if (stats) {
-    dayCopy.topInfo = `${stats.count}笔`; // 展示消费笔数
-    dayCopy.bottomInfo = `${stats.amount.toFixed(1)}元`; // 展示消费金额
+    dayCopy.topInfo = `${stats.count}笔` // 展示消费笔数
+    dayCopy.bottomInfo = `${stats.amount}元` // 展示消费金额
   }
 
-  return dayCopy;
-};
+  return dayCopy
+}
 
 // 初始加载当前月份数据
-const now = new Date();
-fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
+const now = new Date()
+fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
 
 // 全局删除事件监听，确保日历页面数据一致
 const onGlobalTransactionDeleted = () => {
@@ -266,12 +280,15 @@ const onGlobalTransactionDeleted = () => {
   }
   const now = selectedDate.value || new Date()
   fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+  heatmapRef.value?.refresh()
 }
 
-window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
+window.addEventListener &&
+  window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
+  window.removeEventListener &&
+    window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
 })
 
 // 当有交易被新增/修改/批量更新时刷新
@@ -281,33 +298,39 @@ const onGlobalTransactionsChanged = () => {
   }
   const now = selectedDate.value || new Date()
   fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+  heatmapRef.value?.refresh()
 }
 
-window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
+window.addEventListener &&
+  window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
+  window.removeEventListener &&
+    window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
 })
 </script>
 
 <style scoped>
+:deep(.van-calendar__header-title){
+  display: none;
+}
+
 .van-calendar {
   background: transparent !important;
 }
 
 .calendar-container {
   /* 使用准确的视口高度减去 TabBar 高度（50px）和安全区域 */
-  height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
-  max-height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px));
   display: flex;
   flex-direction: column;
   overflow: hidden;
   margin: 0;
   padding: 0;
+  background-color: var(--van-background);
 }
 
 .calendar-container :deep(.van-calendar) {
-  height: 100% !important;
+  height: calc(auto + 40px) !important;
   flex: 1;
   overflow: auto;
   margin: 0;
@@ -328,4 +351,8 @@ onBeforeUnmount(() => {
   background: transparent !important;
 }
 
+/* Add margin to bottom of heatmap to separate from tabbar */
+:deep(.heatmap-card) {
+  flex-shrink: 0; /* Prevent heatmap from shrinking */
+}
 </style>

Web/src/views/ClassificationEdit.vue

@@ -26,12 +26,7 @@
       <div v-else class="level-container">
         <!-- 面包屑导航 -->
         <div class="breadcrumb">
-        <van-tag 
-          type="primary" 
-          closeable 
-          style="margin-left: 16px;"
-          @close="handleBackToRoot"
-        >
+          <van-tag type="primary" closeable style="margin-left: 16px" @close="handleBackToRoot">
             {{ currentTypeName }}
           </van-tag>
         </div>
@@ -41,34 +36,20 @@
 
         <van-cell-group v-else inset>
           <van-swipe-cell v-for="category in categories" :key="category.id">
-          <van-cell 
-            :title="category.name" 
-            is-link 
-            @click="handleEdit(category)"
-          />
+            <van-cell :title="category.name" is-link @click="handleEdit(category)" />
             <template #right>
-            <van-button 
-              square 
-              type="danger" 
-              text="删除"
-              @click="handleDelete(category)"
-            />
+              <van-button square type="danger" text="删除" @click="handleDelete(category)" />
             </template>
           </van-swipe-cell>
         </van-cell-group>
       </div>
 
       <!-- 底部安全距离 -->
-    <div style="height: calc(80px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(55px + env(safe-area-inset-bottom, 0px))" />
 
       <div class="bottom-button">
         <!-- 新增分类按钮 -->
-      <van-button 
-        type="primary" 
-        size="large" 
-        icon="plus"
-        @click="handleAddCategory"
-      >
+        <van-button type="primary" size="large" icon="plus" @click="handleAddCategory">
           新增分类
         </van-button>
       </div>
@@ -123,12 +104,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { 
-  showSuccessToast, 
-  showToast, 
-  showLoadingToast, 
-  closeToast 
-} from 'vant'
+import { showSuccessToast, showToast, showLoadingToast, closeToast } from 'vant'
 import {
   getCategoryList,
   createCategory,
@@ -149,7 +125,7 @@ const typeOptions = [
 const currentLevel = ref(0) // 0=类型选择, 1=分类管理
 const currentType = ref(null) // 当前选中的交易类型
 const currentTypeName = computed(() => {
-  const type = typeOptions.find(t => t.value === currentType.value)
+  const type = typeOptions.find((t) => t.value === currentType.value)
   return type ? type.label : ''
 })
 
@@ -340,7 +316,9 @@ const handleDelete = async (category) => {
  * 确认删除
  */
 const handleConfirmDelete = async () => {
-  if (!deleteTarget.value) return
+  if (!deleteTarget.value) {
+    return
+  }
 
   try {
     showLoadingToast({
@@ -382,7 +360,6 @@ onMounted(() => {
 })
 </script>
 
-
 <style scoped>
 .level-container {
   min-height: calc(100vh - 50px);
@@ -398,11 +375,11 @@ onMounted(() => {
 }
 
 /* 深色模式 */
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   .level-container {
-    background: #1a1a1a;
-  }
+    background: var(--van-background);
   }
+} */
 
 /* 设置页面容器背景色 */
 :deep(.van-nav-bar) {

Web/src/views/ClassificationNLP.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="page-container-flex classification-nlp">
-    <van-nav-bar
-      title="自然语言分类"
-      left-text="返回"
-      left-arrow
-      @click-left="onClickLeft"
-    />
+    <van-nav-bar title="自然语言分类" left-text="返回" left-arrow @click-left="onClickLeft" />
 
     <div class="scroll-content">
       <!-- 输入区域 -->
@@ -23,13 +18,7 @@
         </van-cell-group>
 
         <div class="action-buttons">
-          <van-button 
-            type="primary" 
-            block 
-            round 
-            :loading="analyzing"
-            @click="handleAnalyze"
-          >
+          <van-button type="primary" block round :loading="analyzing" @click="handleAnalyze">
             分析查询
           </van-button>
         </div>
@@ -59,30 +48,12 @@
     />
 
     <!-- 记录列表弹窗 -->
-    <PopupContainer
-      v-model="showRecordsList"
-      title="交易记录列表"
-      height="75%"
-    >
-      <div style="background: var(--van-background, #f7f8fa);">
+    <PopupContainer v-model="showRecordsList" title="交易记录列表" height="75%">
+      <div style="background: var(--van-background)">
         <!-- 批量操作按钮 -->
         <div class="batch-actions">
-          <van-button 
-            plain 
-            type="primary" 
-            size="small"
-            @click="selectAll"
-          >
-            全选
-          </van-button>
-          <van-button 
-            plain 
-            type="default" 
-            size="small"
-            @click="selectNone"
-          >
-            全不选
-          </van-button>
+          <van-button plain type="primary" size="small" @click="selectAll"> 全选 </van-button>
+          <van-button plain type="default" size="small" @click="selectNone"> 全不选 </van-button>
           <van-button
             type="success"
             size="small"
@@ -138,9 +109,11 @@ const onClickLeft = () => {
 
 // 将带目标分类的记录转换为普通交易记录格式供列表显示
 const displayRecords = computed(() => {
-  if (!analysisResult.value) return []
+  if (!analysisResult.value) {
+    return []
+  }
 
-  return analysisResult.value.records.map(r => ({
+  return analysisResult.value.records.map((r) => ({
     id: r.id,
     reason: r.reason,
     amount: r.amount,
@@ -183,7 +156,7 @@ const handleAnalyze = async () => {
       analysisResult.value = response.data
 
       // 默认全选
-      const allIds = new Set(response.data.records.map(r => r.id))
+      const allIds = new Set(response.data.records.map((r) => r.id))
       selectedIds.value = allIds
 
       showToast(`找到 ${response.data.records.length} 条记录`)
@@ -200,8 +173,10 @@ const handleAnalyze = async () => {
 
 // 全选
 const selectAll = () => {
-  if (!analysisResult.value) return
-  const allIds = new Set(analysisResult.value.records.map(r => r.id))
+  if (!analysisResult.value) {
+    return
+  }
+  const allIds = new Set(analysisResult.value.records.map((r) => r.id))
   selectedIds.value = allIds
 }
 
@@ -218,7 +193,7 @@ const updateSelectedIds = (newSelectedIds) => {
 // 点击记录查看详情
 const handleRecordClick = (transaction) => {
   // 从原始记录中获取完整信息
-  const record = analysisResult.value?.records.find(r => r.id === transaction.id)
+  const record = analysisResult.value?.records.find((r) => r.id === transaction.id)
   if (record) {
     currentTransaction.value = {
       id: record.id,
@@ -266,8 +241,8 @@ const handleSubmit = async () => {
 
     // 构建批量更新数据（使用AI修改后的结果）
     const items = analysisResult.value.records
-      .filter(r => selectedIds.value.has(r.id))
-      .map(r => ({
+      .filter((r) => selectedIds.value.has(r.id))
+      .map((r) => ({
         id: r.id,
         classify: r.upsetedClassify,
         type: r.upsetedType
@@ -320,7 +295,7 @@ const handleSubmit = async () => {
   display: flex;
   gap: 8px;
   padding: 12px 16px;
-  background-color: var(--van-background-2, #fff);
+  background-color: var(--van-background-2);
   margin-bottom: 8px;
 }
 

Web/src/views/ClassificationSmart.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="page-container-flex smart-classification">
-    <van-nav-bar
-      title="智能分类"
-      left-text="返回"
-      left-arrow
-      @click-left="onClickLeft"
-    />
+    <van-nav-bar title="智能分类" left-text="返回" left-arrow @click-left="onClickLeft" />
 
-    <div class="scroll-content" style="padding-top: 5px;">
+    <div class="scroll-content" style="padding-top: 5px">
       <!-- 统计信息 -->
       <div class="stats-info">
         <span class="stats-label">未分类账单 </span>
@@ -23,7 +18,7 @@
       />
 
       <!-- 底部安全距离 -->
-      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))" />
     </div>
 
     <!-- 底部操作按钮 -->
@@ -56,11 +51,7 @@
 import { ref, computed, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
-import { 
-  getUnclassifiedCount, 
-  smartClassify,
-  batchUpdateClassify
-} from '@/api/transactionRecord'
+import { getUnclassifiedCount, smartClassify, batchUpdateClassify } from '@/api/transactionRecord'
 import ReasonGroupList from '@/components/ReasonGroupList.vue'
 
 const router = useRouter()
@@ -74,7 +65,9 @@ const suppressDataChanged = ref(false)
 
 // 计算已选中的数量
 const selectedCount = computed(() => {
-  if (!groupListRef.value) return 0
+  if (!groupListRef.value) {
+    return 0
+  }
   return groupListRef.value.getSelectedReasons().size
 })
 
@@ -114,10 +107,12 @@ const onClickLeft = () => {
   if (hasChanges.value) {
     showConfirmDialog({
       title: '提示',
-      message: '有未保存的分类结果，确定要离开吗？',
-    }).then(() => {
+      message: '有未保存的分类结果，确定要离开吗？'
+    })
+      .then(() => {
         router.back()
-    }).catch(() => {})
+      })
+      .catch(() => {})
   } else {
     router.back()
   }
@@ -125,7 +120,9 @@ const onClickLeft = () => {
 
 // 开始智能分类
 const startClassify = async () => {
-  if (!groupListRef.value) return
+  if (!groupListRef.value) {
+    return
+  }
 
   // 获取所有选中分组
   const selectedGroups = groupListRef.value.getList(true)
@@ -167,14 +164,18 @@ const startClassify = async () => {
     while (true) {
       const { done, value } = await reader.read()
 
-      if (done) break
+      if (done) {
+        break
+      }
 
       buffer += decoder.decode(value, { stream: true })
       const lines = buffer.split('\n\n')
       buffer = lines.pop() || ''
 
       for (const line of lines) {
-        if (!line.trim()) continue
+        if (!line.trim()) {
+          continue
+        }
 
         const eventMatch = line.match(/^event: (.+)$/m)
         const dataMatch = line.match(/^data: (.+)$/m)
@@ -215,8 +216,9 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
         let braceCount = 0
         let closeBrace = -1
         for (let i = openBrace; i < classifyBuffer.value.length; i++) {
-          if (classifyBuffer.value[i] === '{') braceCount++
-          else if (classifyBuffer.value[i] === '}') {
+          if (classifyBuffer.value[i] === '{') {
+            braceCount++
+          } else if (classifyBuffer.value[i] === '}') {
             braceCount--
             if (braceCount === 0) {
               closeBrace = i
@@ -283,7 +285,9 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
 
 // 保存分类
 const saveClassifications = async () => {
-  if (!groupListRef.value) return
+  if (!groupListRef.value) {
+    return
+  }
 
   // 收集所有已分类的账单
   const groups = groupListRef.value.getList()
@@ -346,7 +350,7 @@ onMounted(async () => {
 .stats-info {
   padding: 12px 12px 0 16px;
   font-size: 14px;
-  color: #969799;
+  color: var(--van-text-color-2);
 }
 
 .stats-value {

Web/src/views/EmailRecord.vue

@@ -2,9 +2,16 @@
 <template>
   <div class="page-container-flex">
     <!-- 下拉刷新区域 -->
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+    <van-pull-refresh
+      v-model="refreshing"
+      @refresh="onRefresh"
+    >
       <!-- 加载提示 -->
-      <van-loading v-if="loading && !(emailList && emailList.length)" vertical style="padding: 50px 0">
+      <van-loading
+        v-if="loading && !(emailList && emailList.length)"
+        vertical
+        style="padding: 50px 0"
+      >
         加载中...
       </van-loading>
       <!-- 邮件列表 -->
@@ -14,7 +21,11 @@
         finished-text="没有更多了"
         @load="onLoad"
       >
-        <van-cell-group v-if="emailList && emailList.length" inset style="margin-top: 10px">
+        <van-cell-group
+          v-if="emailList && emailList.length"
+          inset
+          style="margin-top: 10px"
+        >
           <van-swipe-cell
             v-for="email in emailList"
             :key="email.id"
@@ -27,11 +38,15 @@
             >
               <template #value>
                 <div class="email-info">
-                  <div class="email-date">{{ formatDate(email.receivedDate) }}</div>
-                  <div v-if="email.transactionCount > 0" class="bill-count">
-                    <span style="font-size: 12px;">已解析{{ email.transactionCount }}条账单</span>
+                  <div class="email-date">
+                    {{ formatDate(email.receivedDate) }}
+                  </div>
+                  <div
+                    v-if="email.transactionCount > 0"
+                    class="bill-count"
+                  >
+                    <span style="font-size: 12px">已解析{{ email.transactionCount }}条账单</span>
                   </div>
-                  
                 </div>
               </template>
             </van-cell>
@@ -54,13 +69,13 @@
       </van-list>
 
       <!-- 底部安全距离 -->
-      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))" />
     </van-pull-refresh>
 
     <!-- 详情弹出层 -->
     <PopupContainer
       v-model="detailVisible"
-      :title="currentEmail ? (currentEmail.Subject || currentEmail.subject || '(无主题)') : ''"
+      :title="currentEmail ? currentEmail.Subject || currentEmail.subject || '(无主题)' : ''"
       height="75%"
     >
       <template #header-actions>
@@ -75,10 +90,22 @@
       </template>
 
       <div v-if="currentEmail">
-        <van-cell-group inset style="margin-top: 12px;">
-          <van-cell title="发件人" :value="currentEmail.From || currentEmail.from || '未知'" />
-          <van-cell title="接收时间" :value="formatDate(currentEmail.ReceivedDate || currentEmail.receivedDate)" />
-          <van-cell title="记录时间" :value="formatDate(currentEmail.CreateTime || currentEmail.createTime)" />
+        <van-cell-group
+          inset
+          style="margin-top: 12px"
+        >
+          <van-cell
+            title="发件人"
+            :value="currentEmail.From || currentEmail.from || '未知'"
+          />
+          <van-cell
+            title="接收时间"
+            :value="formatDate(currentEmail.ReceivedDate || currentEmail.receivedDate)"
+          />
+          <van-cell
+            title="记录时间"
+            :value="formatDate(currentEmail.CreateTime || currentEmail.createTime)"
+          />
           <van-cell
             v-if="(currentEmail.TransactionCount || currentEmail.transactionCount || 0) > 0"
             title="已解析账单数"
@@ -88,21 +115,26 @@
           />
         </van-cell-group>
         <div class="email-content">
-          <h4 style="margin-left: 10px;">邮件内容</h4>
+          <h4 style="margin-left: 10px">
+            邮件内容
+          </h4>
           <div
             v-if="currentEmail.htmlBody"
             class="content-body html-content"
             v-html="currentEmail.htmlBody"
-          ></div>
+          />
           <div
             v-else-if="currentEmail.body"
             class="content-body"
           >
             {{ currentEmail.body }}
           </div>
-          <div v-else class="content-body empty-content">
+          <div
+            v-else
+            class="content-body empty-content"
+          >
             暂无邮件内容
-            <div style="font-size: 12px; margin-top: 8px; color: #999;">
+            <div style="font-size: 12px; margin-top: 8px; color: var(--van-gray-6)">
               Debug: {{ Object.keys(currentEmail).join(', ') }}
             </div>
           </div>
@@ -139,7 +171,14 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { showToast, showConfirmDialog } from 'vant'
-import { getEmailList, getEmailDetail, deleteEmail, refreshTransactionRecords, syncEmails, getEmailTransactions } from '@/api/emailRecord'
+import {
+  getEmailList,
+  getEmailDetail,
+  deleteEmail,
+  refreshTransactionRecords,
+  syncEmails,
+  getEmailTransactions
+} from '@/api/emailRecord'
 import { getTransactionDetail } from '@/api/transactionRecord'
 import TransactionList from '@/components/TransactionList.vue'
 import TransactionDetail from '@/components/TransactionDetail.vue'
@@ -163,7 +202,9 @@ const currentTransaction = ref(null)
 
 // 加载数据
 const loadData = async (isRefresh = false) => {
-  if (loading.value) return // 防止重复加载
+  if (loading.value) {
+    return
+  } // 防止重复加载
 
   if (isRefresh) {
     pageIndex.value = 1
@@ -246,7 +287,7 @@ const handleDelete = async (email) => {
   try {
     await showConfirmDialog({
       title: '提示',
-      message: '确定要删除这封邮件吗？',
+      message: '确定要删除这封邮件吗？'
     })
 
     const response = await deleteEmail(email.id)
@@ -266,12 +307,14 @@ const handleDelete = async (email) => {
 
 // 重新分析
 const handleRefreshAnalysis = async () => {
-  if (!currentEmail.value) return
+  if (!currentEmail.value) {
+    return
+  }
 
   try {
     await showConfirmDialog({
       title: '提示',
-      message: '确定要重新分析该邮件并刷新交易记录吗？',
+      message: '确定要重新分析该邮件并刷新交易记录吗？'
     })
 
     refreshingAnalysis.value = true
@@ -316,7 +359,9 @@ const handleSync = async () => {
 
 // 查看关联的账单列表
 const viewTransactions = async () => {
-  if (!currentEmail.value) return
+  if (!currentEmail.value) {
+    return
+  }
 
   try {
     const emailId = currentEmail.value.id
@@ -340,18 +385,22 @@ const onGlobalTransactionDeleted = (e) => {
   // 如果交易列表弹窗打开，尝试重新加载邮箱的交易列表
   if (transactionListVisible.value && currentEmail.value) {
     const emailId = currentEmail.value.id || currentEmail.value.Id
-    getEmailTransactions(emailId).then(response => {
+    getEmailTransactions(emailId)
+      .then((response) => {
         if (response.success) {
           transactionList.value = response.data || []
         }
-    }).catch(() => {})
+      })
+      .catch(() => {})
   }
 }
 
-window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
+window.addEventListener &&
+  window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
+  window.removeEventListener &&
+    window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
 })
 
 // 监听新增/修改/批量更新事件，刷新弹窗内交易或邮件列表
@@ -359,21 +408,25 @@ const onGlobalTransactionsChanged = (e) => {
   console.log('收到全局交易变更事件:', e)
   if (transactionListVisible.value && currentEmail.value) {
     const emailId = currentEmail.value.id || currentEmail.value.Id
-    getEmailTransactions(emailId).then(response => {
+    getEmailTransactions(emailId)
+      .then((response) => {
         if (response.success) {
           transactionList.value = response.data || []
         }
-    }).catch(() => {})
+      })
+      .catch(() => {})
   } else {
     // 也刷新邮件列表以保持统计一致
     loadData(true)
   }
 }
 
-window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
+window.addEventListener &&
+  window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
+  window.removeEventListener &&
+    window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
 })
 
 // 处理点击账单
@@ -394,7 +447,7 @@ const handleTransactionClick = async (transaction) => {
 
 const handleTransactionDelete = (transactionId) => {
   // 从当前的交易列表中移除该交易
-  transactionList.value = transactionList.value.filter(t => t.id !== transactionId)
+  transactionList.value = transactionList.value.filter((t) => t.id !== transactionId)
 
   // 刷新邮件列表
   loadData(true)
@@ -402,15 +455,14 @@ const handleTransactionDelete = (transactionId) => {
   // 刷新当前邮件详情
   if (currentEmail.value) {
     const emailId = currentEmail.value.id
-    getEmailDetail(emailId).then(response => {
+    getEmailDetail(emailId).then((response) => {
       if (response.success) {
         currentEmail.value = response.data
       }
     })
   }
   try {
-    window.dispatchEvent(
-      new CustomEvent('transaction-deleted', { detail: transactionId })) 
+    window.dispatchEvent(new CustomEvent('transaction-deleted', { detail: transactionId }))
   } catch (e) {
     console.error(e)
   }
@@ -428,13 +480,12 @@ const handleTransactionSave = async () => {
   }
   try {
     window.dispatchEvent(
-      new CustomEvent(
-        'transactions-changed', 
-        { 
+      new CustomEvent('transactions-changed', {
         detail: {
           emailId: currentEmail.value?.id
         }
-        })) 
+      })
+    )
   } catch (e) {
     console.error(e)
   }
@@ -442,7 +493,9 @@ const handleTransactionSave = async () => {
 
 // 格式化日期
 const formatDate = (dateString) => {
-  if (!dateString) return ''
+  if (!dateString) {
+    return ''
+  }
   const date = new Date(dateString)
   return date.toLocaleString('zh-CN', {
     year: 'numeric',
@@ -454,8 +507,6 @@ const formatDate = (dateString) => {
   })
 }
 
-
-
 onMounted(() => {
   loadData(true)
 })
@@ -467,7 +518,6 @@ defineExpose({
 </script>
 
 <style scoped>
-
 :deep(.van-pull-refresh) {
   flex: 1;
   overflow-y: auto;
@@ -487,7 +537,7 @@ defineExpose({
 
 .email-date {
   font-size: 12px;
-  color: #969799;
+  color: var(--van-text-color-2);
   padding-right: 10px;
 }
 
@@ -513,12 +563,12 @@ defineExpose({
   margin: 0 20px;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   .content-body {
-    background-color: #2c2c2c;
-    border: 1px solid #3a3a3a;
-  }
+    background-color: var(--van-background-2);
+    border: 1px solid var(--van-border-color);
   }
+} */
 
 .delete-button {
   height: 100%;

Web/src/views/LogView.vue

@@ -20,16 +20,31 @@
 
         <div class="filter-row">
           <van-dropdown-menu>
-            <van-dropdown-item v-model="selectedLevel" :options="levelOptions" @change="handleSearch" />
-            <van-dropdown-item v-model="selectedDate" :options="dateOptions" @change="handleSearch" />
+            <van-dropdown-item
+              v-model="selectedLevel"
+              :options="levelOptions"
+              @change="handleSearch"
+            />
+            <van-dropdown-item
+              v-model="selectedDate"
+              :options="dateOptions"
+              @change="handleSearch"
+            />
           </van-dropdown-menu>
         </div>
       </div>
 
       <!-- 下拉刷新区域 -->
-      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-pull-refresh
+        v-model="refreshing"
+        @refresh="onRefresh"
+      >
         <!-- 加载提示 -->
-        <van-loading v-if="loading && !logList.length" vertical style="padding: 50px 0">
+        <van-loading
+          v-if="loading && !logList.length"
+          vertical
+          style="padding: 50px 0"
+        >
           加载中...
         </van-loading>
 
@@ -51,7 +66,9 @@
               <span class="log-level">{{ log.level }}</span>
               <span class="log-time">{{ formatTime(log.timestamp) }}</span>
             </div>
-            <div class="log-message">{{ log.message }}</div>
+            <div class="log-message">
+              {{ log.message }}
+            </div>
           </div>
 
           <!-- 空状态 -->
@@ -63,7 +80,7 @@
         </van-list>
 
         <!-- 底部安全距离 -->
-        <div style="height: 20px"></div>
+        <div style="height: 20px" />
       </van-pull-refresh>
     </div>
   </div>
@@ -106,9 +123,7 @@ const levelOptions = ref([
 ])
 
 // 日期选项
-const dateOptions = ref([
-  { text: '全部日期', value: '' }
-])
+const dateOptions = ref([{ text: '全部日期', value: '' }])
 
 /**
  * 返回上一页
@@ -122,12 +137,12 @@ const handleBack = () => {
  */
 const getLevelClass = (level) => {
   const levelMap = {
-    'ERR': 'level-error',
-    'FTL': 'level-fatal',
-    'WRN': 'level-warning',
-    'INF': 'level-info',
-    'DBG': 'level-debug',
-    'VRB': 'level-verbose'
+    ERR: 'level-error',
+    FTL: 'level-fatal',
+    WRN: 'level-warning',
+    INF: 'level-info',
+    DBG: 'level-debug',
+    VRB: 'level-verbose'
   }
   return levelMap[level] || 'level-default'
 }
@@ -145,7 +160,9 @@ const formatTime = (timestamp) => {
  * 加载日志数据
  */
 const loadLogs = async (reset = false) => {
-  if (fetching.value) return
+  if (fetching.value) {
+    return
+  }
 
   fetching.value = true
 
@@ -223,7 +240,9 @@ const onRefresh = async () => {
  * 加载更多
  */
 const onLoad = async () => {
-  if (finished.value || fetching.value) return
+  if (finished.value || fetching.value) {
+    return
+  }
 
   // 如果是第一次加载
   if (pageIndex.value === 1 && logList.value.length === 0) {
@@ -257,14 +276,11 @@ const loadAvailableDates = async () => {
   try {
     const response = await getAvailableDates()
     if (response.success && response.data) {
-      const dates = response.data.map(date => ({
+      const dates = response.data.map((date) => ({
         text: formatDate(date),
         value: date
       }))
-      dateOptions.value = [
-        { text: '全部日期', value: '' },
-        ...dates
-      ]
+      dateOptions.value = [{ text: '全部日期', value: '' }, ...dates]
     }
   } catch (error) {
     console.error('加载日期列表失败:', error)
@@ -292,27 +308,27 @@ onMounted(() => {
 <style scoped>
 .log-view {
   height: 100vh;
-  background-color: #f5f5f5;
+  background-color: var(--van-background);
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   .log-view {
     background-color: #1a1a1a;
   }
-}
+} */
 
 .filter-section {
-  background-color: #ffffff;
+  background-color: var(--van-background-2);
   position: sticky;
   top: 0;
   z-index: 10;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   .filter-section {
     background-color: #2c2c2c;
   }
-}
+} */
 
 .filter-row {
   padding: 0;
@@ -323,8 +339,8 @@ onMounted(() => {
 }
 
 .log-item {
-  background-color: #ffffff;
-  border-left: 3px solid #1989fa;
+  background-color: var(--van-background-2);
+  border-left: 3px solid var(--van-primary-color);
   margin-bottom: 4px;
   padding: 6px 10px;
   border-radius: 3px;
@@ -338,7 +354,7 @@ onMounted(() => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   .log-item {
     background-color: #2c2c2c;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
@@ -347,7 +363,7 @@ onMounted(() => {
   .log-item:hover {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
   }
-}
+} */
 
 .log-header {
   display: flex;
@@ -398,20 +414,20 @@ onMounted(() => {
 }
 
 .level-debug .log-level {
-  background-color: #1989fa;
+  background-color: var(--van-primary-color);
 }
 
 .level-info .log-level {
-  background-color: #07c160;
+  background-color: var(--van-success-color);
 }
 
 .level-warning .log-level {
-  background-color: #ff976a;
-  border-left-color: #ff976a;
+  background-color: var(--van-orange);
+  border-left-color: var(--van-orange);
 }
 
 .level-error .log-level {
-  background-color: #ee0a24;
+  background-color: var(--van-danger-color);
 }
 
 .level-fatal .log-level {
@@ -419,7 +435,7 @@ onMounted(() => {
 }
 
 .level-default .log-level {
-  background-color: #646566;
+  background-color: var(--van-gray-6);
 }
 
 .level-verbose {
@@ -427,19 +443,19 @@ onMounted(() => {
 }
 
 .level-debug {
-  border-left-color: #1989fa;
+  border-left-color: var(--van-primary-color);
 }
 
 .level-info {
-  border-left-color: #07c160;
+  border-left-color: var(--van-success-color);
 }
 
 .level-warning {
-  border-left-color: #ff976a;
+  border-left-color: var(--van-orange);
 }
 
 .level-error {
-  border-left-color: #ee0a24;
+  border-left-color: var(--van-danger-color);
 }
 
 .level-fatal {
@@ -447,7 +463,7 @@ onMounted(() => {
 }
 
 .level-default {
-  border-left-color: #646566;
+  border-left-color: var(--van-gray-6);
 }
 
 /* 优化下拉菜单样式 */
@@ -455,9 +471,9 @@ onMounted(() => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :deep(.van-dropdown-menu) {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   }
-}
+} */
 </style>

Web/src/views/MessageView.vue

@@ -1,18 +1,34 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="page-container-flex">
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+    <van-pull-refresh
+      v-model="refreshing"
+      @refresh="onRefresh"
+    >
       <van-list
         v-model:loading="loading"
         :finished="finished"
         finished-text="没有更多了"
         @load="onLoad"
       >
-        <van-cell-group v-if="list.length" inset style="margin-top: 10px">
-          <van-swipe-cell v-for="item in list" :key="item.id">
-            <div class="message-card" @click="viewDetail(item)">
+        <van-cell-group
+          v-if="list.length"
+          inset
+          style="margin-top: 10px"
+        >
+          <van-swipe-cell
+            v-for="item in list"
+            :key="item.id"
+          >
+            <div
+              class="message-card"
+              @click="viewDetail(item)"
+            >
               <div class="card-left">
-                <div class="message-title" :class="{ 'unread': !item.isRead }">
+                <div
+                  class="message-title"
+                  :class="{ unread: !item.isRead }"
+                >
                   {{ item.title }}
                 </div>
                 <div class="message-content">
@@ -23,16 +39,34 @@
                 </div>
               </div>
               <div class="card-right">
-                <van-tag v-if="!item.isRead" type="danger">未读</van-tag>
-                <van-icon name="arrow" size="16" class="arrow-icon" />
+                <van-tag
+                  v-if="!item.isRead"
+                  type="danger"
+                >
+                  未读
+                </van-tag>
+                <van-icon
+                  name="arrow"
+                  size="16"
+                  class="arrow-icon"
+                />
               </div>
             </div>
             <template #right>
-              <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(item)" />
+              <van-button
+                square
+                text="删除"
+                type="danger"
+                class="delete-button"
+                @click="handleDelete(item)"
+              />
             </template>
           </van-swipe-cell>
         </van-cell-group>
-        <van-empty v-else-if="!loading" description="暂无消息" />
+        <van-empty
+          v-else-if="!loading"
+          description="暂无消息"
+        />
       </van-list>
     </van-pull-refresh>
 
@@ -47,13 +81,23 @@
         v-if="currentMessage.messageType === 2"
         class="detail-content rich-html-content"
         v-html="currentMessage.content"
+      />
+      <div
+        v-else
+        class="detail-content"
       >
-      </div>
-      <div v-else class="detail-content">
         {{ currentMessage.content }}
       </div>
-      <template v-if="currentMessage.url && currentMessage.messageType === 1" #footer>
-        <van-button type="primary" block round @click="handleUrlJump(currentMessage.url)">
+      <template
+        v-if="currentMessage.url && currentMessage.messageType === 1"
+        #footer
+      >
+        <van-button
+          type="primary"
+          block
+          round
+          @click="handleUrlJump(currentMessage.url)"
+        >
           查看详情
         </van-button>
       </template>
@@ -62,164 +106,166 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { showToast, showDialog } from 'vant';
-import { getMessageList, markAsRead, deleteMessage, markAllAsRead } from '@/api/message';
-import { useMessageStore } from '@/stores/message';
-import PopupContainer from '@/components/PopupContainer.vue';
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, showDialog } from 'vant'
+import { getMessageList, markAsRead, deleteMessage, markAllAsRead } from '@/api/message'
+import { useMessageStore } from '@/stores/message'
+import PopupContainer from '@/components/PopupContainer.vue'
 
-const messageStore = useMessageStore();
-const router = useRouter();
-const list = ref([]);
-const loading = ref(false);
-const finished = ref(false);
-const refreshing = ref(false);
-const pageIndex = ref(1);
-const pageSize = ref(20);
+const messageStore = useMessageStore()
+const router = useRouter()
+const list = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const refreshing = ref(false)
+const pageIndex = ref(1)
+const pageSize = ref(20)
 
-const detailVisible = ref(false);
-const currentMessage = ref({});
+const detailVisible = ref(false)
+const currentMessage = ref({})
 
 const onLoad = async () => {
   if (refreshing.value) {
-    list.value = [];
-    pageIndex.value = 1;
-    refreshing.value = false;
+    list.value = []
+    pageIndex.value = 1
+    refreshing.value = false
   }
 
   try {
     const res = await getMessageList({
       pageIndex: pageIndex.value,
       pageSize: pageSize.value
-    });
+    })
 
     if (res.success) {
       // 格式化时间
-      const data = res.data.map(item => ({
+      const data = res.data.map((item) => ({
         ...item,
         createTime: new Date(item.createTime).toLocaleString()
-      }));
+      }))
 
       if (pageIndex.value === 1) {
-        list.value = data;
+        list.value = data
       } else {
-        list.value = [...list.value, ...data];
+        list.value = [...list.value, ...data]
       }
 
       // 判断是否加载完成
       if (list.value.length >= res.total || data.length < pageSize.value) {
-        finished.value = true;
+        finished.value = true
       } else {
-        pageIndex.value++;
+        pageIndex.value++
       }
     } else {
-      showToast(res.message || '加载失败');
-      finished.value = true;
+      showToast(res.message || '加载失败')
+      finished.value = true
     }
   } catch (error) {
-    console.error(error);
-    showToast('加载失败');
-    finished.value = true;
+    console.error(error)
+    showToast('加载失败')
+    finished.value = true
   } finally {
-    loading.value = false;
+    loading.value = false
+  }
 }
-};
 
 const onRefresh = () => {
-  finished.value = false;
-  loading.value = true;
-  onLoad();
-};
+  finished.value = false
+  loading.value = true
+  onLoad()
+}
 
 const viewDetail = async (item) => {
   if (!item.isRead) {
     try {
-      await markAsRead(item.id);
-      item.isRead = true;
-      messageStore.updateUnreadCount();
+      await markAsRead(item.id)
+      item.isRead = true
+      messageStore.updateUnreadCount()
     } catch (error) {
-      console.error('标记已读失败', error);
+      console.error('标记已读失败', error)
     }
   }
 
-  currentMessage.value = item;
-  detailVisible.value = true;
-};
+  currentMessage.value = item
+  detailVisible.value = true
+}
 
 const handleUrlJump = (targetUrl) => {
-  if (!targetUrl) return;
+  if (!targetUrl) {
+    return
+  }
 
   if (targetUrl.startsWith('http')) {
-    window.open(targetUrl, '_blank');
+    window.open(targetUrl, '_blank')
   } else if (targetUrl.startsWith('/')) {
-    router.push(targetUrl);
-    detailVisible.value = false;
+    router.push(targetUrl)
+    detailVisible.value = false
   } else {
-    showToast('无效的URL');
+    showToast('无效的URL')
+  }
 }
-};
 
 const handleDelete = (item) => {
   showDialog({
     title: '提示',
     message: '确定要删除这条消息吗？',
-    showCancelButton: true,
+    showCancelButton: true
   }).then(async (action) => {
     if (action === 'confirm') {
       try {
-        const res = await deleteMessage(item.id);
+        const res = await deleteMessage(item.id)
         if (res.success) {
-          showToast('删除成功');
-          const wasUnread = !item.isRead;
-          list.value = list.value.filter(i => i.id !== item.id);
+          showToast('删除成功')
+          const wasUnread = !item.isRead
+          list.value = list.value.filter((i) => i.id !== item.id)
           if (wasUnread) {
-            messageStore.updateUnreadCount();
+            messageStore.updateUnreadCount()
           }
         } else {
-          showToast(res.message || '删除失败');
+          showToast(res.message || '删除失败')
         }
       } catch (error) {
-        console.error('删除消息失败', error);
-        showToast('删除失败');
+        console.error('删除消息失败', error)
+        showToast('删除失败')
       }
     }
-  });
-};
+  })
+}
 
 const handleMarkAllRead = () => {
   showDialog({
     title: '提示',
     message: '确定要将所有消息标记为已读吗？',
-    showCancelButton: true,
+    showCancelButton: true
   }).then(async (action) => {
     if (action === 'confirm') {
       try {
-        const res = await markAllAsRead();
+        const res = await markAllAsRead()
         if (res.success) {
-          showToast('操作成功');
+          showToast('操作成功')
           // 刷新列表
-          onRefresh();
+          onRefresh()
           // 更新未读计数
-          messageStore.updateUnreadCount();
+          messageStore.updateUnreadCount()
         } else {
-          showToast(res.message || '操作失败');
+          showToast(res.message || '操作失败')
         }
       } catch (error) {
-        console.error('标记所有已读失败', error);
-        showToast('操作失败');
+        console.error('标记所有已读失败', error)
+        showToast('操作失败')
       }
     }
-  });
-};
+  })
+}
 
 onMounted(() => {
   // onLoad 会由 van-list 自动触发
-});
+})
 
 defineExpose({
   handleMarkAllRead
-});
+})
 </script>
 
 <style scoped>

Web/src/views/PeriodicRecord.vue

@@ -36,7 +36,10 @@
                 </template>
               </van-cell>
               <van-cell title="分类" :value="item.classify || '未分类'" />
-              <van-cell title="下次执行时间" :value="formatDateTime(item.nextExecuteTime) || '未设置'" />
+              <van-cell
+                title="下次执行时间"
+                :value="formatDateTime(item.nextExecuteTime) || '未设置'"
+              />
               <van-cell title="状态">
                 <template #value>
                   <van-switch
@@ -69,18 +72,12 @@
       </van-list>
 
       <!-- 底部安全距离 -->
-      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))" />
     </van-pull-refresh>
 
     <!-- 底部新增按钮 -->
     <div class="bottom-button">
-      <van-button 
-        type="primary" 
-        size="large" 
-        round 
-        icon="plus"
-        @click="openAddDialog"
-      >
+      <van-button type="primary" size="large" round icon="plus" @click="openAddDialog">
         新增周期账单
       </van-button>
     </div>
@@ -173,11 +170,7 @@
             type="number"
             :rules="[{ required: true, message: '请输入金额' }]"
           />
-            <van-field
-              v-model="form.type"
-              name="type"
-              label="类型"
-            >
+          <van-field v-model="form.type" name="type" label="类型">
             <template #input>
               <van-radio-group v-model="form.type" direction="horizontal">
                 <van-radio :name="0"> 支出 </van-radio>
@@ -188,16 +181,13 @@
           </van-field>
           <van-field name="classify" label="分类">
             <template #input>
-                <span v-if="!form.classify" style="color: #c8c9cc;">请选择交易分类</span>
+              <span v-if="!form.classify" style="color: var(--van-gray-5)">请选择交易分类</span>
               <span v-else>{{ form.classify }}</span>
             </template>
           </van-field>
 
           <!-- 分类选择组件 -->
-            <ClassifySelector
-              v-model="form.classify"
-              :type="form.type"
-            />
+          <ClassifySelector v-model="form.classify" :type="form.type" />
         </van-cell-group>
       </van-form>
       <template #footer>
@@ -392,18 +382,20 @@ const getPeriodicTypeText = (item) => {
 
   if (item.periodicConfig) {
     switch (item.periodicType) {
-      case 1: // 每周
-        { 
-          const weekdays = item.periodicConfig.split(',').map(
-            d => {
+      case 1: {
+        // 每周
+        const weekdays = item.periodicConfig
+          .split(',')
+          .map((d) => {
             const dayMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
             return dayMap[parseInt(d)] || ''
-            }).join('、')
+          })
+          .join('、')
         text += ` (${weekdays})`
         break
       }
-      case 2: // 每月
-        { 
+      case 2: {
+        // 每月
         const days = item.periodicConfig.split(',').join('、')
         text += ` (${days}日)`
         break
@@ -436,20 +428,22 @@ const editPeriodic = (item) => {
   form.type = item.type
   form.classify = item.classify
   form.periodicType = item.periodicType
-  form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
+  form.periodicTypeText = periodicTypeColumns.find((t) => t.value === item.periodicType)?.text || ''
 
   // 解析周期配置
   if (item.periodicConfig) {
     switch (item.periodicType) {
       case 1: // 每周
-        form.weekdays = item.periodicConfig.split(',').map(d => parseInt(d))
-        form.weekdaysText = form.weekdays.map(d => {
-          return weekdaysColumns.find(w => w.value === d)?.text || ''
-        }).join('、')
+        form.weekdays = item.periodicConfig.split(',').map((d) => parseInt(d))
+        form.weekdaysText = form.weekdays
+          .map((d) => {
+            return weekdaysColumns.find((w) => w.value === d)?.text || ''
+          })
+          .join('、')
         break
       case 2: // 每月
-        form.monthDays = item.periodicConfig.split(',').map(d => parseInt(d))
-        form.monthDaysText = form.monthDays.map(d => `${d}日`).join('、')
+        form.monthDays = item.periodicConfig.split(',').map((d) => parseInt(d))
+        form.monthDaysText = form.monthDays.map((d) => `${d}日`).join('、')
         break
       case 3: // 每季度
         form.quarterDay = item.periodicConfig
@@ -468,7 +462,7 @@ const deletePeriodic = async (item) => {
   try {
     await showConfirmDialog({
       title: '提示',
-      message: '确定要删除这条周期性账单吗？',
+      message: '确定要删除这条周期性账单吗？'
     })
 
     const response = await deletePeriodicApi(item.id)
@@ -493,7 +487,7 @@ const toggleEnabled = async (id, enabled) => {
     if (response.success) {
       showToast(enabled ? '已启用' : '已禁用')
       // 更新本地数据
-      const item = periodicList.value.find(p => p.id === id)
+      const item = periodicList.value.find((p) => p.id === id)
       if (item) {
         item.isEnabled = enabled
       }
@@ -510,7 +504,9 @@ const toggleEnabled = async (id, enabled) => {
 }
 
 const formatDateTime = (date) => {
-  if (!date) return ''
+  if (!date) {
+    return ''
+  }
 
   return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
 }
@@ -557,7 +553,6 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
   form.monthDaysText = selectedOptions[0].text
   showMonthDaysPicker.value = false
 }
-
 </script>
 
 <style scoped>
@@ -596,4 +591,7 @@ const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
   height: 100%;
 }
 
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
 </style>

Web/src/views/ScheduledTasksView.vue

@@ -1,19 +1,40 @@
 <template>
   <div class="page-container-flex">
-    <van-nav-bar title="定时任务" left-arrow placeholder @click-left="onClickLeft" />
+    <van-nav-bar
+      title="定时任务"
+      left-arrow
+      placeholder
+      @click-left="onClickLeft"
+    />
     <div class="scroll-content">
-      <van-pull-refresh v-model="loading" @refresh="fetchTasks">
-        <div v-for="task in tasks" :key="task.name" class="task-card">
+      <van-pull-refresh
+        v-model="loading"
+        @refresh="fetchTasks"
+      >
+        <div
+          v-for="task in tasks"
+          :key="task.name"
+          class="task-card"
+        >
           <van-cell-group inset>
-            <van-cell :title="task.jobDescription" :label="task.triggerDescription || task.name">
+            <van-cell
+              :title="task.jobDescription"
+              :label="task.triggerDescription || task.name"
+            >
               <template #value>
                 <van-tag :type="task.status === 'Paused' ? 'warning' : 'success'">
                   {{ task.status === 'Paused' ? '已暂停' : '已启动' }}
                 </van-tag>
               </template>
             </van-cell>
-            <van-cell title="任务标识" :value="task.name" />
-            <van-cell title="下次执行" :value="task.nextRunTime || '无'" />
+            <van-cell
+              title="任务标识"
+              :value="task.name"
+            />
+            <van-cell
+              title="下次执行"
+              :value="task.nextRunTime || '无'"
+            />
             <div class="card-footer">
               <van-row gutter="10">
                 <van-col span="12">
@@ -55,10 +76,13 @@
         </div>
       </van-pull-refresh>
 
-      <van-empty v-if="tasks.length === 0 && !loading" description="无定时任务" />
+      <van-empty
+        v-if="tasks.length === 0 && !loading"
+        description="无定时任务"
+      />
 
       <!-- 底部安全距离 -->
-      <div style="height: calc(20px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(20px + env(safe-area-inset-bottom, 0px))" />
     </div>
   </div>
 </template>
@@ -102,7 +126,7 @@ const handleExecute = async (task) => {
   try {
     await showConfirmDialog({
       title: '确认执行',
-      message: `确定要立即执行"${task.jobDescription}"吗？`,
+      message: `确定要立即执行"${task.jobDescription}"吗？`
     })
 
     showLoadingToast({
@@ -132,7 +156,7 @@ const handlePause = async (task) => {
   try {
     await showConfirmDialog({
       title: '确认暂停',
-      message: `确定要暂停"${task.jobDescription}"吗？`,
+      message: `确定要暂停"${task.jobDescription}"吗？`
     })
 
     const { success, message } = await pauseJob(task.name)
@@ -179,4 +203,9 @@ const handleResume = async (task) => {
 .scroll-content {
   padding-bottom: 20px;
 }
+
+/* 设置页面容器背景色 */
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
 </style>

Web/src/views/SettingView.vue

@@ -1,59 +1,137 @@
 <template>
   <div class="page-container-flex">
-    <van-nav-bar title="设置" placeholder/>
+    <van-nav-bar
+      title="设置"
+      placeholder
+    />
     <div class="scroll-content">
-      <div class="detail-header" style="padding-bottom: 5px;">
+      <div
+        class="detail-header"
+        style="padding-bottom: 5px"
+      >
         <p>账单</p>
       </div>
       <van-cell-group inset>
-        <van-cell title="从支付宝导入" is-link @click="handleImportClick('Alipay')" />
-        <van-cell title="从微信导入" is-link @click="handleImportClick('WeChat')" />
-        <van-cell title="周期记录" is-link @click="handlePeriodicRecord" />
+        <van-cell
+          title="从支付宝导入"
+          is-link
+          @click="handleImportClick('Alipay')"
+        />
+        <van-cell
+          title="从微信导入"
+          is-link
+          @click="handleImportClick('WeChat')"
+        />
+        <van-cell
+          title="周期记录"
+          is-link
+          @click="handlePeriodicRecord"
+        />
       </van-cell-group>
 
       <!-- 隐藏的文件选择器 -->
-      <input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />
+      <input
+        ref="fileInputRef"
+        type="file"
+        accept=".csv,.xlsx,.xls"
+        style="display: none"
+        @change="handleFileChange"
+      >
 
-      <div class="detail-header" style="padding-bottom: 5px;">
+      <div
+        class="detail-header"
+        style="padding-bottom: 5px"
+      >
         <p>分类</p>
       </div>
       <van-cell-group inset>
-        <van-cell title="待确认分类" is-link @click="handleUnconfirmedClassification" />
-        <van-cell title="编辑分类" is-link @click="handleEditClassification" />
-        <van-cell title="批量分类" is-link @click="handleBatchClassification" />
-        <van-cell title="智能分类" is-link @click="handleSmartClassification" />
+        <van-cell
+          title="待确认分类"
+          is-link
+          @click="handleUnconfirmedClassification"
+        />
+        <van-cell
+          title="编辑分类"
+          is-link
+          @click="handleEditClassification"
+        />
+        <van-cell
+          title="批量分类"
+          is-link
+          @click="handleBatchClassification"
+        />
+        <van-cell
+          title="智能分类"
+          is-link
+          @click="handleSmartClassification"
+        />
         <!-- <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" /> -->
       </van-cell-group>
 
-      <div class="detail-header" style="padding-bottom: 5px;">
+      <div
+        class="detail-header"
+        style="padding-bottom: 5px"
+      >
         <p>通知</p>
       </div>
       <van-cell-group inset>
         <van-cell title="开启消息通知">
           <template #right-icon>
-            <van-switch v-model="notificationEnabled" size="24" :loading="notificationLoading" @change="handleNotificationToggle" />
+            <van-switch
+              v-model="notificationEnabled"
+              size="24"
+              :loading="notificationLoading"
+              @change="handleNotificationToggle"
+            />
           </template>
         </van-cell>
-        <van-cell v-if="notificationEnabled" title="测试通知" is-link @click="handleTestNotification" />
+        <van-cell
+          v-if="notificationEnabled"
+          title="测试通知"
+          is-link
+          @click="handleTestNotification"
+        />
       </van-cell-group>
 
-      <div class="detail-header" style="padding-bottom: 5px;">
+      <div
+        class="detail-header"
+        style="padding-bottom: 5px"
+      >
         <p>开发者</p>
       </div>
       <van-cell-group inset>
-        <van-cell title="查看日志" is-link @click="handleLogView" />
-        <van-cell title="清除缓存" is-link @click="handleReloadFromNetwork" />
-        <van-cell title="定时任务" is-link @click="handleScheduledTasks" />
+        <van-cell
+          title="查看日志"
+          is-link
+          @click="handleLogView"
+        />
+        <van-cell
+          title="清除缓存"
+          is-link
+          @click="handleReloadFromNetwork"
+        />
+        <van-cell
+          title="定时任务"
+          is-link
+          @click="handleScheduledTasks"
+        />
       </van-cell-group>
 
-      <div class="detail-header" style="padding-bottom: 5px;">
+      <div
+        class="detail-header"
+        style="padding-bottom: 5px"
+      >
         <p>账户</p>
       </div>
       <van-cell-group inset>
-        <van-cell title="退出登录" is-link @click="handleLogout" />
+        <van-cell
+          title="退出登录"
+          is-link
+          @click="handleLogout"
+        />
       </van-cell-group>
       <!-- 底部安全距离 -->
-      <div style="height: calc(80px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(80px + env(safe-area-inset-bottom, 0px))" />
     </div>
   </div>
 </template>
@@ -83,14 +161,14 @@ onMounted(async () => {
 })
 
 function urlBase64ToUint8Array (base64String) {
-  const padding = '='.repeat((4 - base64String.length % 4) % 4);
-  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
-  const rawData = window.atob(base64);
-  const outputArray = new Uint8Array(rawData.length);
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
+  const rawData = window.atob(base64)
+  const outputArray = new Uint8Array(rawData.length)
   for (let i = 0; i < rawData.length; ++i) {
-    outputArray[i] = rawData.charCodeAt(i);
+    outputArray[i] = rawData.charCodeAt(i)
   }
-  return outputArray;
+  return outputArray
 }
 
 const handleNotificationToggle = async (checked) => {
@@ -113,7 +191,7 @@ const handleNotificationToggle = async (checked) => {
         return
       }
 
-      let { success, data, message } = await getVapidPublicKey()
+      const { success, data, message } = await getVapidPublicKey()
 
       if (!success) {
         throw new Error(message || '获取 VAPID 公钥失败')
@@ -184,7 +262,11 @@ const handleFileChange = async (event) => {
   }
 
   // 验证文件类型
-  const validTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
+  const validTypes = [
+    'text/csv',
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  ]
   if (!validTypes.includes(file.type)) {
     showToast('请选择 CSV 或 Excel 文件')
     return
@@ -218,8 +300,7 @@ const handleFileChange = async (event) => {
   } catch (error) {
     console.error('上传失败:', error)
     showToast('上传失败: ' + (error.message || '未知错误'))
-  }
-  finally {
+  } finally {
     closeToast()
     // 清空文件输入，允许重复选择同一文件
     event.target.value = ''
@@ -249,7 +330,7 @@ const handleLogout = async () => {
   try {
     await showConfirmDialog({
       title: '提示',
-      message: '确定要退出登录吗？',
+      message: '确定要退出登录吗？'
     })
 
     authStore.logout()
@@ -276,7 +357,7 @@ const handleReloadFromNetwork = async () => {
   try {
     await showConfirmDialog({
       title: '提示',
-      message: '确定要刷新网络吗？此操作不可撤销。',
+      message: '确定要刷新网络吗？此操作不可撤销。'
     })
 
     // PWA程序强制页面更新到最新版本
@@ -300,34 +381,20 @@ const handleReloadFromNetwork = async () => {
 const handleScheduledTasks = () => {
   router.push({ name: 'scheduled-tasks' })
 }
-
 </script>
 
 <style scoped>
 /* 页面背景色 */
 :deep(body) {
-  background-color: #f5f5f5;
-}
-
-@media (prefers-color-scheme: dark) {
-  :deep(body) {
-    background-color: #1a1a1a;
-  }
+  background-color: var(--van-background);
 }
 
 /* 增加卡片对比度 */
 :deep(.van-cell-group--inset) {
-  background-color: #ffffff;
+  background-color: var(--van-background-2);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-@media (prefers-color-scheme: dark) {
-  :deep(.van-cell-group--inset) {
-    background-color: #2c2c2c;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  }
-}
-
 .detail-header {
   padding: 16px 16px 5px 16px;
   margin-bottom: 5px;
@@ -336,7 +403,7 @@ const handleScheduledTasks = () => {
 .detail-header p {
   margin: 0;
   font-size: 14px;
-  color: #969799;
+  color: var(--van-text-color-2);
   font-weight: normal;
 }
 

Web/src/views/TransactionsRecord.vue

@@ -14,7 +14,11 @@
     <!-- 下拉刷新区域 -->
     <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
       <!-- 加载提示 -->
-      <van-loading v-if="loading && !(transactionList && transactionList.length)" vertical style="padding: 50px 0">
+      <van-loading
+        v-if="loading && !(transactionList && transactionList.length)"
+        vertical
+        style="padding: 50px 0"
+      >
         加载中...
       </van-loading>
 
@@ -26,14 +30,16 @@
         :show-delete="true"
         @load="onLoad"
         @click="viewDetail"
-        @delete="(id) => {
+        @delete="
+          (id) => {
             // 从当前的交易列表中移除该交易
-          transactionList.value = transactionList.value.filter(t => t.id !== id)
-        }"
+            transactionList.value = transactionList.value.filter((t) => t.id !== id)
+          }
+        "
       />
 
       <!-- 底部安全距离 -->
-      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))" />
     </van-pull-refresh>
 
     <!-- 详情/编辑弹出层 -->
@@ -48,10 +54,7 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { showToast } from 'vant'
-import { 
-  getTransactionList, 
-  getTransactionDetail
-} from '@/api/transactionRecord'
+import { getTransactionList, getTransactionDetail } from '@/api/transactionRecord'
 import TransactionList from '@/components/TransactionList.vue'
 import TransactionDetail from '@/components/TransactionDetail.vue'
 
@@ -69,8 +72,6 @@ const currentTransaction = ref(null)
 const searchKeyword = ref('')
 let searchTimer = null
 
-
-
 // 加载数据
 const loadData = async (isRefresh = false) => {
   if (isRefresh) {
@@ -194,10 +195,12 @@ const onGlobalTransactionDeleted = () => {
   loadData(true)
 }
 
-window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
+window.addEventListener &&
+  window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
+  window.removeEventListener &&
+    window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
 })
 
 // 外部新增/修改/批量更新时的刷新监听
@@ -208,18 +211,16 @@ const onGlobalTransactionsChanged = () => {
   loadData(true)
 }
 
-window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
+window.addEventListener &&
+  window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
+  window.removeEventListener &&
+    window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
 })
-
-
-
 </script>
 
 <style scoped>
-
 :deep(.van-pull-refresh) {
   flex: 1;
   overflow-y: auto;
@@ -230,7 +231,7 @@ onBeforeUnmount(() => {
   background: var(--van-background-2);
   padding: 4px 12px;
   z-index: 100;
-  border-bottom: 1px solid var(--van-border-color);
+  margin-top: 10px;
 }
 
 .top-search-bar :deep(.van-search) {
@@ -238,8 +239,6 @@ onBeforeUnmount(() => {
   background: transparent;
 }
 
-
-
 /* 设置页面容器背景色 */
 :deep(.van-nav-bar) {
   background: transparent !important;

Web/src/views/UnconfirmedClassification.vue

@@ -20,8 +20,13 @@
     </van-nav-bar>
 
     <div class="scroll-content">
-      <div v-if="loading && transactions.length === 0" class="loading-container">
-        <van-loading vertical>加载中...</van-loading>
+      <div
+        v-if="loading && transactions.length === 0"
+        class="loading-container"
+      >
+        <van-loading vertical>
+          加载中...
+        </van-loading>
       </div>
 
       <TransactionList
@@ -92,7 +97,7 @@ const handleConfirmSelected = async () => {
 
 // 转换数据格式以适配 TransactionList 组件
 const displayTransactions = computed(() => {
-  return transactions.value.map(t => ({
+  return transactions.value.map((t) => ({
     ...t,
     upsetedClassify: t.unconfirmedClassify,
     upsetedType: t.unconfirmedType
@@ -104,13 +109,12 @@ const loadData = async () => {
   try {
     const response = await getUnconfirmedTransactionList()
     if (response && response.success) {
-      transactions.value = (response.data || [])
-        .map(t => ({
+      transactions.value = (response.data || []).map((t) => ({
         ...t,
         upsetedClassify: t.unconfirmedClassify,
         upsetedType: t.unconfirmedType
       }))
-      selectedIds.value = new Set(response.data.map(t => t.id))
+      selectedIds.value = new Set(response.data.map((t) => t.id))
     }
   } catch (error) {
     console.error('获取待确认列表失败:', error)
@@ -125,7 +129,7 @@ const handleTransactionClick = (transaction) => {
 }
 
 const handleTransactionDeleted = (id) => {
-  transactions.value = transactions.value.filter(t => t.id !== id)
+  transactions.value = transactions.value.filter((t) => t.id !== id)
 }
 
 const updateSelectedIds = (ids) => {
@@ -159,4 +163,9 @@ onMounted(() => {
   align-items: center;
   height: 200px;
 }
+
+/* 设置页面容器背景色 */
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
 </style>

Web/vite.config.js

@@ -29,7 +29,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
-    },
+    }
   },
   build: {
     // 确保 Service Worker 和 manifest 被正确复制

WebApi/Controllers/BudgetController.cs

@@ -11,12 +11,13 @@ public class BudgetController(
     /// 获取预算列表
     /// </summary>
     [HttpGet]
-    public async Task<BaseResponse<List<BudgetResult>>> GetListAsync([FromQuery] DateTime? referenceDate = null)
+    public async Task<BaseResponse<List<BudgetResult>>> GetListAsync([FromQuery] DateTime referenceDate)
     {
         try
         {
             return (await budgetService.GetListAsync(referenceDate))
-                .OrderBy(b => b.Category)
+                .OrderByDescending(b => b.IsMandatoryExpense)
+                .ThenBy(b => b.Category)
                 .ThenBy(b => b.Type)
                 .ThenByDescending(b => b.Limit > 0 ? b.Current / b.Limit : 0)
                 .ThenBy(b => b.Name)
@@ -30,41 +31,11 @@ public class BudgetController(
         }
     }
 
-    /// <summary>
-    /// 获取单个预算统计信息
-    /// </summary>
-    [HttpGet]
-    public async Task<BaseResponse<BudgetResult>> GetStatisticsAsync([FromQuery] long id, [FromQuery] DateTime referenceDate)
-    {
-        try
-        {
-            // 参数验证
-            if (id == 0)
-            {
-                return "预算 Id 无效".Fail<BudgetResult>();
-            }
-
-            var result = await budgetService.GetStatisticsAsync(id, referenceDate);
-
-            if (result == null)
-            {
-                return "预算不存在".Fail<BudgetResult>();
-            }
-
-            return result.Ok();
-        }
-        catch (Exception ex)
-        {
-            logger.LogError(ex, "获取预算统计失败, Id: {Id}", id);
-            return $"获取预算统计失败: {ex.Message}".Fail<BudgetResult>();
-        }
-    }
-
     /// <summary>
     /// 获取分类统计信息（月度和年度）
     /// </summary>
     [HttpGet]
-    public async Task<BaseResponse<BudgetCategoryStats>> GetCategoryStatsAsync([FromQuery] BudgetCategory category, [FromQuery] DateTime? referenceDate = null)
+    public async Task<BaseResponse<BudgetCategoryStats>> GetCategoryStatsAsync([FromQuery] BudgetCategory category, [FromQuery] DateTime referenceDate)
     {
         try
         {
@@ -96,6 +67,42 @@ public class BudgetController(
         }
     }
 
+    /// <summary>
+    /// 获取归档总结
+    /// </summary>
+    [HttpGet]
+    public async Task<BaseResponse<string?>> GetArchiveSummaryAsync([FromQuery] DateTime referenceDate)
+    {
+        try
+        {
+            var result = await budgetService.GetArchiveSummaryAsync(referenceDate.Year, referenceDate.Month);
+            return result.Ok<string?>();
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "获取归档总结失败");
+            return $"获取归档总结失败: {ex.Message}".Fail<string?>();
+        }
+    }
+
+    /// <summary>
+    /// 获取指定周期的存款预算信息
+    /// </summary>
+    [HttpGet]
+    public async Task<BaseResponse<BudgetResult?>> GetSavingsBudgetAsync(int year, int month, BudgetPeriodType type)
+    {
+        try
+        {
+            var result = await budgetService.GetSavingsBudgetAsync(year, month, type);
+            return result.Ok();
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "获取存款预算信息失败");
+            return $"获取存款预算信息失败: {ex.Message}".Fail<BudgetResult?>();
+        }
+    }
+
     /// <summary>
     /// 删除预算
     /// </summary>
@@ -122,14 +129,19 @@ public class BudgetController(
     {
         try
         {
+            // 不记额预算的金额强制设为0
+            var limit = dto.NoLimit ? 0 : dto.Limit;
+
             var budget = new BudgetRecord
             {
                 Name = dto.Name,
                 Type = dto.Type,
-                Limit = dto.Limit,
+                Limit = limit,
                 Category = dto.Category,
                 SelectedCategories = dto.SelectedCategories != null ? string.Join(",", dto.SelectedCategories) : string.Empty,
-                StartDate = dto.StartDate ?? DateTime.Now
+                StartDate = dto.StartDate ?? DateTime.Now,
+                NoLimit = dto.NoLimit,
+                IsMandatoryExpense = dto.IsMandatoryExpense
             };
 
             var varidationError = await ValidateBudgetSelectedCategoriesAsync(budget);
@@ -163,11 +175,16 @@ public class BudgetController(
             var budget = await budgetRepository.GetByIdAsync(dto.Id);
             if (budget == null) return "预算不存在".Fail();
 
+            // 不记额预算的金额强制设为0
+            var limit = dto.NoLimit ? 0 : dto.Limit;
+
             budget.Name = dto.Name;
             budget.Type = dto.Type;
-            budget.Limit = dto.Limit;
+            budget.Limit = limit;
             budget.Category = dto.Category;
             budget.SelectedCategories = dto.SelectedCategories != null ? string.Join(",", dto.SelectedCategories) : string.Empty;
+            budget.NoLimit = dto.NoLimit;
+            budget.IsMandatoryExpense = dto.IsMandatoryExpense;
             if (dto.StartDate.HasValue)
             {
                 budget.StartDate = dto.StartDate.Value;
@@ -189,32 +206,14 @@ public class BudgetController(
         }
     }
 
-    /// <summary>
-    /// 归档预算
-    /// </summary>
-    [HttpPost("{year}/{month}")]
-    public async Task<BaseResponse> ArchiveBudgetsAsync(int year, int month)
-    {
-        try
-        {
-            var msg = await budgetService.ArchiveBudgetsAsync(year, month);
-
-            if (!string.IsNullOrEmpty(msg))
-            {
-                return msg.Fail();
-            }
-
-            return BaseResponse.Done();
-        }
-        catch (Exception ex)
-        {
-            logger.LogError(ex, "归档预算失败, 归档日期: {Year}-{Month}", year, month);
-            return $"归档预算失败: {ex.Message}".Fail();
-        }
-    }
-
     private async Task<string> ValidateBudgetSelectedCategoriesAsync(BudgetRecord record)
     {
+        // 验证不记额预算必须是年度预算
+        if (record.NoLimit && record.Type != BudgetPeriodType.Year)
+        {
+            return "不记额预算只能设置为年度预算。";
+        }
+
         var allBudgets = await budgetRepository.GetAllAsync();
 
         var recordSelectedCategories = record.SelectedCategories.Split(',', StringSplitOptions.RemoveEmptyEntries);

WebApi/Controllers/Dto/BudgetDto.cs

@@ -8,6 +8,8 @@ public class CreateBudgetDto
     public BudgetCategory Category { get; set; }
     public string[] SelectedCategories { get; set; } = Array.Empty<string>();
     public DateTime? StartDate { get; set; }
+    public bool NoLimit { get; set; } = false;
+    public bool IsMandatoryExpense { get; set; } = false;
 }
 
 public class UpdateBudgetDto : CreateBudgetDto
@@ -15,3 +17,9 @@ public class UpdateBudgetDto : CreateBudgetDto
     public long Id { get; set; }
 }
 
+public class UpdateArchiveSummaryDto
+{
+    public DateTime ReferenceDate { get; set; }
+    public string? Summary { get; set; }
+}
+

WebApi/Controllers/TransactionRecordController.cs

@@ -1,4 +1,4 @@
-namespace WebApi.Controllers;
+namespace WebApi.Controllers;
 
 using System.Text.Json;
 using System.Text.Json.Nodes;
@@ -9,7 +9,8 @@ using Repository;
 public class TransactionRecordController(
     ITransactionRecordRepository transactionRepository,
     ISmartHandleService smartHandleService,
-    ILogger<TransactionRecordController> logger
+    ILogger<TransactionRecordController> logger,
+    IConfigService configService
 ) : ControllerBase
 {
     /// <summary>
@@ -272,8 +273,17 @@ public class TransactionRecordController(
     {
         try
         {
-            var statistics = await transactionRepository.GetDailyStatisticsAsync(year, month);
-            var result = statistics.Select(s => new DailyStatisticsDto(s.Key, s.Value.count, s.Value.amount)).ToList();
+            // 获取存款分类
+            var savingClassify = await configService.GetConfigByKeyAsync<string>("SavingsCategories");
+
+            var statistics = await transactionRepository.GetDailyStatisticsAsync(year, month, savingClassify);
+            var result = statistics.Select(s => new DailyStatisticsDto(
+                s.Key, 
+                s.Value.count, 
+                s.Value.expense, 
+                s.Value.income,
+                s.Value.saving
+            )).ToList();
 
             return result.Ok();
         }
@@ -284,6 +294,45 @@ public class TransactionRecordController(
         }
     }
 
+    /// <summary>
+    /// 获取指定日期范围内的每日统计
+    /// </summary>
+    [HttpGet]
+    public async Task<BaseResponse<List<DailyStatisticsDto>>> GetDailyStatisticsRangeAsync(
+        [FromQuery] DateTime startDate,
+        [FromQuery] DateTime endDate
+    )
+    {
+        try
+        {
+            // 确保包含结束日期当天
+            var effectiveEndDate = endDate.Date.AddDays(1);
+            var effectiveStartDate = startDate.Date;
+
+            // 获取存款分类
+            var savingClassify = await configService.GetConfigByKeyAsync<string>("SavingsCategories");
+
+            var statistics = await transactionRepository.GetDailyStatisticsByRangeAsync(
+                effectiveStartDate, 
+                effectiveEndDate,
+                savingClassify);
+            var result = statistics.Select(s => new DailyStatisticsDto(
+                s.Key, 
+                s.Value.count, 
+                s.Value.expense, 
+                s.Value.income,
+                s.Value.income - s.Value.expense
+            )).ToList();
+
+            return result.Ok();
+        }
+        catch (Exception ex)
+        {
+            logger.LogError(ex, "获取日历统计数据失败，开始: {StartDate}, 结束: {EndDate}", startDate, endDate);
+            return $"获取日历统计数据失败: {ex.Message}".Fail<List<DailyStatisticsDto>>();
+        }
+    }
+
     /// <summary>
     /// 获取月度统计数据
     /// </summary>
@@ -686,17 +735,6 @@ public class TransactionRecordController(
         await Response.WriteAsync(message);
         await Response.Body.FlushAsync();
     }
-
-    private static string GetTypeName(TransactionType type)
-    {
-        return type switch
-        {
-            TransactionType.Expense => "支出",
-            TransactionType.Income => "收入",
-            TransactionType.None => "不计入收支",
-            _ => "未知"
-        };
-    }
 }
 
 /// <summary>
@@ -728,7 +766,9 @@ public record UpdateTransactionDto(
 public record DailyStatisticsDto(
     string Date,
     int Count,
-    decimal Amount
+    decimal Expense,
+    decimal Income,
+    decimal Balance
 );
 
 /// <summary>

WebApi/Program.cs

@@ -111,11 +111,13 @@ var fsql = new FreeSqlBuilder()
     .UseMonitorCommand(
         cmd => 
         {
-            Log.Debug("执行SQL: {Sql}", cmd.CommandText);
+            Log.Verbose("执行SQL: {Sql}", cmd.CommandText);
         }
     )
     .Build();
 
+fsql.UseJsonMap();
+
 builder.Services.AddSingleton(fsql);
 
 // 自动扫描注册服务和仓储

WebApi/WebApi.csproj

@@ -1,6 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <ItemGroup>
+    <PackageReference Include="FreeSql.Extensions.JsonMap" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" />
     <PackageReference Include="Microsoft.AspNetCore.OpenApi" />
     <PackageReference Include="Scalar.AspNetCore" />