前端路由配置
概述
本应用使用 react-router-dom v7 进行路由管理，采用 createBrowserRouter API 配置路由。
路由结构
/ -> 重定向到 /home
├── /home -> 首页（快速记账入口）
├── /transactions -> 交易列表页
├── /accounts -> 账户管理页
├── /budget -> 预算管理页
├── /reports -> 报表分析页
├── /settings -> 设置页
└── /* -> 404 重定向到 /home
技术实现
路由配置文件
位置：src/router/index.tsx
使用 createBrowserRouter 创建路由实例，所有路由都嵌套在 Layout 组件下，通过 <Outlet /> 渲染子路由。
Layout 组件
位置：src/components/common/Layout/Layout.tsx
Layout 组件提供：
- 顶部导航栏（应用标题 + 主题切换按钮）
- 底部导航栏（移动端）/ 侧边导航栏（桌面端）
- 主内容区域（通过
<Outlet />渲染当前路由页面）
导航组件
导航使用 NavLink 组件实现，支持：
- 自动高亮当前激活路由（通过
isActive属性） - 响应式布局：
- 移动端：底部导航栏，图标 + 文字垂直排列
- 桌面端：左侧边栏，图标 + 文字水平排列
页面组件
| 路由 | 组件 | 功能 | 状态 |
|---|---|---|---|
/home |
Home |
首页，展示账户概览和快速记账入口 | ✅ 已实现 |
/transactions |
Transactions |
交易列表，支持筛选和搜索 | ✅ 已实现 |
/accounts |
Accounts |
账户管理，创建/编辑账户和转账 | ✅ 已实现 |
/budget |
Budget |
预算管理和存钱罐 | 🚧 待完善 |
/reports |
Reports |
统计报表和数据可视化 | 🚧 待完善 |
/settings |
Settings |
应用设置和数据管理 | 🚧 待完善 |
使用方式
在 App.tsx 中使用
import { RouterProvider } from 'react-router-dom';
import { router } from './router';
function App() {
return <RouterProvider router={router} />;
}
在组件中导航
import { useNavigate, Link } from 'react-router-dom';
// 使用 Link 组件
<Link to="/transactions">查看交易</Link>
// 使用 useNavigate hook
const navigate = useNavigate();
navigate('/accounts');
响应式设计
移动端（< 768px）
- 底部固定导航栏
- 图标和文字垂直排列
- 主内容区域底部留出导航栏空间（4rem）
桌面端（≥ 768px）
- 左侧固定侧边栏（宽度 200px）
- 图标和文字水平排列
- 主内容区域左侧留出侧边栏空间
主题支持
导航组件完全支持深色/浅色主题切换，使用 CSS 变量：
--color-bg: 背景色--color-bg-secondary: 次要背景色--color-text: 主文字颜色--color-text-secondary: 次要文字颜色--color-primary: 主题色（用于激活状态）
验证需求
✅ 需求 8.1: 提供快速记账入口（首页） ✅ 需求 8.2: 2秒内完成加载并展示主界面 ✅ 需求 8.4: 支持响应式布局，适配Web端和移动端