Novault-Frontend-app/task.md

NoVault App - React Native 移动端任务清单

📊 进度概览

• 当前阶段: Phase 6 - 功能完善
• 完成率: 95%
• 最后更新: 2026-01-28

---

✅ Phase 1: 基础架构 (100%)

• 1.1 创建 src/ 目录结构
• 1.2 安装核心依赖
• 1.3 配置主题系统 (colors, typography, spacing)
• 1.4 移植 types/index.ts
• 1.5 创建 API 服务层 (适配 AsyncStorage)
• 1.6 配置导航结构 (Stack + Tab)
• 1.7 创建 Contexts (Theme, Auth)

---

✅ Phase 2: 核心页面 (100%)

• 2.1 登录页面 (screens/Auth/LoginScreen.tsx)
• 2.2 首页 (screens/Home/HomeScreen.tsx)
• 2.3 交易列表页 (screens/Transactions/TransactionsScreen.tsx)
• 2.4 账户列表页 (screens/Accounts/AccountsScreen.tsx)
• 2.5 新增交易页 (screens/Transactions/AddTransactionScreen.tsx)
  • 3步流程：金额 -> 分类账户 -> 确认
  • 分类选择器组件
  • 账户选择器组件
• 2.6 设置页面 (screens/Settings/SettingsScreen.tsx)
• 2.7 预算页面 (screens/Budget/BudgetScreen.tsx)
• 2.8 报表页面 (screens/Reports/ReportsScreen.tsx)

---

✅ Phase 3: 服务层 (100%)

• 3.1 authService - 认证服务
• 3.2 transactionService - 交易服务
• 3.3 accountService - 账户服务
• 3.4 categoryService - 分类服务
• 3.5 budgetService - 预算服务
• 3.6 reportService - 报表服务

---

✅ Phase 4: 通用组件 (100%)

• 4.1 CategorySelector - 分类选择器
• 4.2 AccountSelector - 账户选择器

---

✅ Phase 5: 工具函数 (100%)

• 5.1 format.ts - 格式化工具
  • formatCurrency, formatAmount, formatDate
  • formatRelativeTime, formatPercentage
  • getTransactionTypeColor, getTransactionTypeIcon
  • getAccountTypeLabel, getAccountTypeIcon

---

🔄 Phase 6: 功能完善 (进行中)

6.1 交易详情/编辑

• 6.1.1 TransactionDetailScreen - 交易详情弹窗
• 6.1.2 EditTransactionScreen - 交易编辑页面

6.2 账户功能

• 6.2.1 AccountDetailScreen - 账户详情页
• 6.2.2 AddAccountScreen - 账户创建页
• 6.2.3 EditAccountScreen - 账户编辑页
• 6.2.4 TransferScreen - 账户转账页

6.3 预算功能

• 6.3.1 AddBudgetScreen - 新建预算页

6.4 通用组件

• 6.4.1 DatePickerModal - 日期选择组件
• 6.4.2 AmountInput - 金额输入组件
• 6.4.3 IconSelector - 图标选择组件
• 6.4.4 react-native-vector-icons 集成

---

Phase 8: Final Polish & Release

• Debugging & Build Fixes (Resolved TS errors and service integration)
• Performance Optimization
• App Icon & Splash Screen
• Build & Release (APK/IPA)

---

🚀 Phase 9: 图表与可视化 (Reports 2.0)

目标: 集成专业图表库，实现可视化报表

• 9.1 集成图表库 (e.g. react-native-gifted-charts or victory-native)
• 9.2 收支趋势折线图 (Trend Line Chart)
• 9.3 支出分类饼图 (Category Pie Chart)
• 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 工具

运行命令

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