246 lines
6.6 KiB
Markdown
246 lines
6.6 KiB
Markdown
# NoVault App - React Native 移动端任务清单
|
||
|
||
## 📊 进度概览
|
||
|
||
- **当前阶段**: Phase 6 - 功能完善
|
||
- **完成率**: 95%
|
||
- **最后更新**: 2026-01-28
|
||
|
||
---
|
||
|
||
## ✅ Phase 1: 基础架构 (100%)
|
||
|
||
- [x] 1.1 创建 src/ 目录结构
|
||
- [x] 1.2 安装核心依赖
|
||
- [x] 1.3 配置主题系统 (colors, typography, spacing)
|
||
- [x] 1.4 移植 types/index.ts
|
||
- [x] 1.5 创建 API 服务层 (适配 AsyncStorage)
|
||
- [x] 1.6 配置导航结构 (Stack + Tab)
|
||
- [x] 1.7 创建 Contexts (Theme, Auth)
|
||
|
||
---
|
||
|
||
## ✅ Phase 2: 核心页面 (100%)
|
||
|
||
- [x] 2.1 登录页面 (`screens/Auth/LoginScreen.tsx`)
|
||
- [x] 2.2 首页 (`screens/Home/HomeScreen.tsx`)
|
||
- [x] 2.3 交易列表页 (`screens/Transactions/TransactionsScreen.tsx`)
|
||
- [x] 2.4 账户列表页 (`screens/Accounts/AccountsScreen.tsx`)
|
||
- [x] 2.5 新增交易页 (`screens/Transactions/AddTransactionScreen.tsx`)
|
||
- 3步流程：金额 -> 分类账户 -> 确认
|
||
- 分类选择器组件
|
||
- 账户选择器组件
|
||
- [x] 2.6 设置页面 (`screens/Settings/SettingsScreen.tsx`)
|
||
- [x] 2.7 预算页面 (`screens/Budget/BudgetScreen.tsx`)
|
||
- [x] 2.8 报表页面 (`screens/Reports/ReportsScreen.tsx`)
|
||
|
||
---
|
||
|
||
## ✅ Phase 3: 服务层 (100%)
|
||
|
||
- [x] 3.1 authService - 认证服务
|
||
- [x] 3.2 transactionService - 交易服务
|
||
- [x] 3.3 accountService - 账户服务
|
||
- [x] 3.4 categoryService - 分类服务
|
||
- [x] 3.5 budgetService - 预算服务
|
||
- [x] 3.6 reportService - 报表服务
|
||
|
||
---
|
||
|
||
## ✅ Phase 4: 通用组件 (100%)
|
||
|
||
- [x] 4.1 CategorySelector - 分类选择器
|
||
- [x] 4.2 AccountSelector - 账户选择器
|
||
|
||
---
|
||
|
||
## ✅ Phase 5: 工具函数 (100%)
|
||
|
||
- [x] 5.1 format.ts - 格式化工具
|
||
- formatCurrency, formatAmount, formatDate
|
||
- formatRelativeTime, formatPercentage
|
||
- getTransactionTypeColor, getTransactionTypeIcon
|
||
- getAccountTypeLabel, getAccountTypeIcon
|
||
|
||
---
|
||
|
||
## 🔄 Phase 6: 功能完善 (进行中)
|
||
|
||
### 6.1 交易详情/编辑
|
||
|
||
- [x] 6.1.1 TransactionDetailScreen - 交易详情弹窗
|
||
- [x] 6.1.2 EditTransactionScreen - 交易编辑页面
|
||
|
||
### 6.2 账户功能
|
||
|
||
- [x] 6.2.1 AccountDetailScreen - 账户详情页
|
||
- [x] 6.2.2 AddAccountScreen - 账户创建页
|
||
- [x] 6.2.3 EditAccountScreen - 账户编辑页
|
||
- [x] 6.2.4 TransferScreen - 账户转账页
|
||
|
||
### 6.3 预算功能
|
||
|
||
- [x] 6.3.1 AddBudgetScreen - 新建预算页
|
||
|
||
### 6.4 通用组件
|
||
|
||
- [x] 6.4.1 DatePickerModal - 日期选择组件
|
||
- [x] 6.4.2 AmountInput - 金额输入组件
|
||
- [x] 6.4.3 IconSelector - 图标选择组件
|
||
- [x] 6.4.4 react-native-vector-icons 集成
|
||
|
||
---
|
||
|
||
### Phase 8: Final Polish & Release
|
||
|
||
- [x] Debugging & Build Fixes (Resolved TS errors and service integration)
|
||
- [ ] Performance Optimization
|
||
- [ ] App Icon & Splash Screen
|
||
- [ ] Build & Release (APK/IPA)
|
||
|
||
---
|
||
|
||
## 🚀 Phase 9: 图表与可视化 (Reports 2.0)
|
||
>
|
||
> 目标: 集成专业图表库，实现可视化报表
|
||
|
||
- [x] 9.1 集成图表库 (e.g. react-native-gifted-charts or victory-native)
|
||
- [x] 9.2 收支趋势折线图 (Trend Line Chart)
|
||
- [x] 9.3 支出分类饼图 (Category Pie Chart)
|
||
- [x] 9.4 月度收支对比柱状图 (Bar Chart)
|
||
|
||
## 🔄 Phase 10: 核心功能补全
|
||
>
|
||
> 目标: 补齐 Web 端定义的 P1 核心记账能力
|
||
|
||
- [ ] 10.1 周期性交易模块 (Recurring Transactions)
|
||
- [ ] 10.1.1 周期交易服务 (recurringTransactionService)
|
||
- [ ] 10.1.2 周期交易列表页
|
||
- [ ] 10.1.3 创建/编辑周期交易
|
||
- [ ] 10.2 多账本系统 (Ledger System)
|
||
- [ ] 10.2.1 账本服务 (ledgerService)
|
||
- [ ] 10.2.2 账本管理页 (新建/切换/编辑)
|
||
|
||
## 🐷 Phase 11: 财务目标 (Savings & Goals)
|
||
>
|
||
> 目标: 增强预算模块，增加存钱目标
|
||
|
||
- [ ] 11.1 存钱罐服务 (piggyBankService)
|
||
- [ ] 11.2 存钱罐列表组件 (BudgetScreen 集成)
|
||
- [ ] 11.3 存入/取出操作逻辑
|
||
|
||
## 🛠️ Phase 12: 工具与生态
|
||
>
|
||
> 目标: 完善 P2 功能，对齐 Web 端体验
|
||
|
||
- [ ] 12.1 交易日历视图 (Calendar View)
|
||
- [ ] 12.2 数据导出功能 (Export to CSV/Excel)
|
||
- [ ] 12.3 汇率换算工具 (Exchange Rate)
|
||
- [ ] 12.4 消息通知中心 (Notifications)
|
||
|
||
---
|
||
|
||
## 📁 最终目录结构
|
||
|
||
```
|
||
app/src/
|
||
├── components/
|
||
│ └── common/
|
||
│ ├── CategorySelector.tsx ✅
|
||
│ ├── AccountSelector.tsx ✅
|
||
│ ├── DatePickerModal.tsx ✅
|
||
│ ├── AmountInput.tsx ✅
|
||
│ ├── IconSelector.tsx ✅
|
||
│ └── index.ts
|
||
|
||
├── contexts/
|
||
│ ├── ThemeContext.tsx ✅
|
||
│ ├── AuthContext.tsx ✅
|
||
│ └── index.ts
|
||
|
||
├── navigation/
|
||
│ ├── index.tsx ✅
|
||
│ ├── MainTab.tsx ✅
|
||
│ └── types.ts ✅
|
||
|
||
├── screens/
|
||
│ ├── Auth/
|
||
│ │ └── LoginScreen.tsx ✅
|
||
│ ├── Home/
|
||
│ │ └── HomeScreen.tsx ✅
|
||
│ ├── Transactions/
|
||
│ │ ├── TransactionsScreen.tsx ✅
|
||
│ │ ├── AddTransactionScreen.tsx ✅
|
||
│ │ ├── TransactionDetailScreen.tsx ✅
|
||
│ │ └── EditTransactionScreen.tsx ✅
|
||
│ ├── Accounts/
|
||
│ │ ├── AccountsScreen.tsx ✅
|
||
│ │ ├── AccountDetailScreen.tsx ✅
|
||
│ │ ├── AddAccountScreen.tsx ✅
|
||
│ │ ├── EditAccountScreen.tsx ✅
|
||
│ │ └── TransferScreen.tsx ✅
|
||
│ ├── Budget/
|
||
│ │ ├── BudgetScreen.tsx ✅
|
||
│ │ └── AddBudgetScreen.tsx ✅
|
||
│ ├── Reports/
|
||
│ │ └── ReportsScreen.tsx ✅
|
||
│ └── Settings/
|
||
│ └── SettingsScreen.tsx ✅
|
||
|
||
├── services/
|
||
│ ├── api.ts ✅
|
||
│ ├── authService.ts ✅
|
||
│ ├── transactionService.ts ✅
|
||
│ ├── accountService.ts ✅
|
||
│ ├── categoryService.ts ✅
|
||
│ ├── budgetService.ts ✅
|
||
│ ├── reportService.ts ✅
|
||
│ └── index.ts
|
||
|
||
├── theme/
|
||
│ ├── colors.ts ✅
|
||
│ ├── spacing.ts ✅
|
||
│ ├── typography.ts ✅
|
||
│ └── index.ts
|
||
|
||
├── types/
|
||
│ └── index.ts ✅
|
||
|
||
└── utils/
|
||
├── format.ts ✅
|
||
└── index.ts
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 运行说明
|
||
|
||
### 前提条件
|
||
|
||
1. 安装 Android Studio 并配置 Android SDK
|
||
2. 设置 `ANDROID_HOME` 环境变量
|
||
3. 安装 adb 工具
|
||
|
||
### 运行命令
|
||
|
||
```bash
|
||
cd e:\OwnK\kb\app
|
||
|
||
# 启动 Metro 服务
|
||
npm start
|
||
|
||
# 运行 Android
|
||
npm run android
|
||
|
||
# 运行 iOS (需要 Mac)
|
||
npm run ios
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 备注
|
||
|
||
- 图标暂时使用 Emoji 代替，待安装 vector-icons 后替换
|
||
- API 地址在 `services/api.ts` 中配置，开发环境默认使用 `10.0.2.2:2612`
|
||
- 类型定义直接复用 Web 端的 `types/index.ts`
|