From 218c14404680bd49dd252bf4d6dab302ae4d4e11 Mon Sep 17 00:00:00 2001
From: snowgitea <haoyuexc100@outlook.com>
Date: Wed, 29 Apr 2026 02:08:45 +0800
Subject: [PATCH] chore: update frontend/src/pages/Record/index.tsx

---
 frontend/src/pages/Record/index.tsx | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/Record/index.tsx b/frontend/src/pages/Record/index.tsx
index 54c6718..466b14c 100644
--- a/frontend/src/pages/Record/index.tsx
+++ b/frontend/src/pages/Record/index.tsx
@@ -1,17 +1,8 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { useDataStore } from '../../stores'
 
-/**
- * 记账页面 - Record
- * 功能：账单明细列表展示、新增/删除账单记录、按类型筛选（全部/支出/收入）
- * 数据来源：通过 useDataStore 获取 records 列表并执行 CRUD 操作
- * API 依赖：
- *   - GET /api/records - 获取账单记录列表
- *   - POST /api/records - 创建新账单记录
- *   - DELETE /api/records/:id - 删除账单记录
- */
 const RecordPage: React.FC = () => {
-  const { records, loading, fetchRecords, createRecord } = useDataStore()
+  const { records, accounts, loading, fetchRecords, fetchAccounts, createRecord } = useDataStore()
   // 筛选状态：全部/支出/收入，用于过滤展示
   const [filterType, setFilterType] = useState<'all' | 'expense' | 'income'>('all')
   const [showModal, setShowModal] = useState(false)
@@ -23,13 +14,17 @@ const RecordPage: React.FC = () => {
   const PAGE_SIZE = 10; // 每页显示10条记录
   const [currentPage, setCurrentPage] = useState(1);
   const [isPageChanging, setIsPageChanging] = useState(false);
+  
+  // 默认账户：取第一个账户的 ID，若无账户则默认 0（后端会报错提示）
+  const defaultAccountId = accounts.length > 0 ? accounts[0].id : 0
+
   const [formData, setFormData] = useState({
     type: 'expense' as 'expense' | 'income',
     category: '餐饮',
     amount: 0,
     date: new Date().toISOString().split('T')[0],
     description: '',
-    accountId: 3
+    accountId: defaultAccountId
   })
 
   const expenseCategories = ['餐饮', '交通', '购物', '娱乐', '医疗', '其他']
@@ -37,10 +32,11 @@ const RecordPage: React.FC = () => {
   
   const currentCategories = formData.type === 'expense' ? expenseCategories : incomeCategories
 
-  // 组件挂载时拉取记录列表，供筛选和分页使用
+  // 组件挂载时拉取账户列表和记录列表，供筛选和表单使用
   useEffect(() => {
+    fetchAccounts()
     fetchRecords()
-  }, [fetchRecords])
+  }, [fetchAccounts, fetchRecords])
 
   // 使用 useMemo 缓存筛选+排序结果，避免每次渲染重新计算
   // 按创建时间降序排列，最新记录在前
@@ -86,7 +82,6 @@ const RecordPage: React.FC = () => {
   }
 
   // 表单提交 - 创建记录成功后显示 toast 并重置表单
-  // accountId 硬编码为 3，后续应从用户上下文动态获取
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     try {
@@ -100,7 +95,7 @@ const RecordPage: React.FC = () => {
         amount: 0,
         date: new Date().toISOString().split('T')[0],
         description: '',
-        accountId: 3
+        accountId: defaultAccountId
       })
     } catch (error) {
       console.error('Failed to create record:', error)