xiaocai/docs/development-plan.md

小菜记账 — 小程序开发方案

版本: v1.0 | 日期: 2026-05-27 UI 原型稿: docs/mockup/index.html

---

一、项目概述

项目	说明
产品名称	小菜记账
产品类型	个人记账微信小程序
AppID	wx854804dff2928c53
设计风格	Claymorphism (粘土风格)
目标用户	18-35岁年轻人，注重生活品质

---

二、技术架构

前端 (小程序)

技术	选型	说明
框架	Uni-app (Vue 3 + Composition API)	一套代码，跨端运行
状态管理	Pinia	轻量、TypeScript 友好
样式	UnoCSS + SCSS	原子化 + 变量系统
图标	Lucide Icons (SVG)	统一图标集
图表	uCharts (qiun-data-charts)	小程序端图表组件
字体	Fredoka + Nunito	通过 @font-face 加载

后端 (阿里云 2H2G)

技术	选型	说明
运行时	Node.js 20 LTS	轻量高效
框架	Express.js	简单可靠
数据库	MySQL 8.0	成熟稳定，生态丰富
ORM	Prisma	类型安全，迁移方便
缓存	无 (内存足够)	2G 内存可支撑
部署	PM2 + Nginx	进程管理 + 反向代理

---

三、功能清单

P0 (MVP - 第一版)

模块	功能	说明
记账	添加支出/收入	金额、分类、日期、备注
记账	分类选择	预设 12 个分类 + 自定义
首页	月度总览	本月支出、预算进度
首页	近期账单	最近 20 条交易
统计	分类占比	环形图
统计	每日趋势	折线图
我的	预算设置	月度预算
我的	数据导出	CSV 格式

P1 (第二版)

模块	功能	说明
记账	图片识别	拍照识别金额
统计	周/月/年切换	多维度分析
我的	数据备份	云同步
我的	深色模式	主题切换

P2 (第三版)

模块	功能	说明
高级	多账本	不同场景分类
高级	预算提醒	超支通知
高级	团队记账	AA 记账

---

四、数据库设计

MySQL 安装 (阿里云服务器)

# 安装 MySQL 8.0
sudo apt update
sudo apt install -y mysql-server

# 安全配置
sudo mysql_secure_installation

# 创建数据库和用户
sudo mysql -u root -p
CREATE DATABASE xiaocai DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'xiaocai'@'localhost' IDENTIFIED BY 'your_password';
GRANT ALL PRIVILEGES ON xiaocai.* TO 'xiaocai'@'localhost';
FLUSH PRIVILEGES;
EXIT;

核心表

-- 分类表
CREATE TABLE categories (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(50) NOT NULL,
  icon VARCHAR(50) NOT NULL,
  color VARCHAR(20) NOT NULL,
  type ENUM('expense', 'income') NOT NULL,
  sort_order INT DEFAULT 0,
  is_custom TINYINT(1) DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 交易表
CREATE TABLE transactions (
  id INT AUTO_INCREMENT PRIMARY KEY,
  amount INT NOT NULL COMMENT '单位：分',
  type ENUM('expense', 'income') NOT NULL,
  category_id INT,
  note VARCHAR(200),
  date DATE NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  INDEX idx_date (date),
  INDEX idx_type (type),
  FOREIGN KEY (category_id) REFERENCES categories(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 预算表
CREATE TABLE budgets (
  id INT AUTO_INCREMENT PRIMARY KEY,
  amount INT NOT NULL COMMENT '单位：分',
  month VARCHAR(7) NOT NULL COMMENT '格式：2026-05',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  UNIQUE KEY uk_month (month)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 用户表 (预留微信登录)
CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  openid VARCHAR(100) UNIQUE,
  session_key VARCHAR(100),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

预设分类数据

分类	图标 (Lucide)	颜色	类型
餐饮	Coffee	#FF8C69	支出
饮品	Coffee	#FF8C69	支出
购物	ShoppingBag	#FFB347	支出
交通	Car	#6C9BCF	支出
住房	Home	#7BC67E	支出
医疗	Heart	#FF6B6B	支出
教育	BookOpen	#6C9BCF	支出
娱乐	Film	#B39DDB	支出
服饰	Shirt	#FFD166	支出
美容	Smile	#FF8C69	支出
通讯	Smartphone	#6C9BCF	支出
其他	MoreHorizontal	#BFB3B3	支出
工资	DollarSign	#7BC67E	收入
副业	TrendingUp	#7BC67E	收入
理财	PieChart	#7BC67E	收入
其他收入	Plus	#BFB3B3	收入

---

五、API 设计

基础信息

• 基础 URL: https://your-domain.com/api
• 认证: 微信登录 (code2session)
• 响应格式: JSON

接口列表

方法	路径	说明
POST	/auth/login	微信登录
GET	/categories	获取分类列表
POST	/transactions	添加交易
GET	/transactions	查询交易列表
PUT	/transactions/:id	更新交易
DELETE	/transactions/:id	删除交易
GET	/stats/overview	月度概览
GET	/stats/category	分类统计
GET	/stats/trend	每日趋势
GET	/budget	获取预算
POST	/budget	设置预算
GET	/export/csv	导出 CSV

响应示例

// 成功
{
  "code": 0,
  "data": { ... },
  "message": "success"
}

// 失败
{
  "code": 40001,
  "data": null,
  "message": "参数错误"
}

---

六、项目结构

xiaocai/
├── client/                    # 小程序端
│   ├── src/
│   │   ├── pages/
│   │   │   ├── index/         # 首页
│   │   │   ├── add/           # 记账
│   │   │   ├── stats/         # 统计
│   │   │   ├── bills/         # 账单
│   │   │   └── profile/       # 我的
│   │   ├── components/
│   │   │   ├── AmountCard/
│   │   │   ├── TransactionItem/
│   │   │   ├── CategoryIcon/
│   │   │   ├── BudgetBar/
│   │   │   ├── BottomNav/
│   │   │   ├── Numpad/
│   │   │   └── Chart/
│   │   ├── stores/
│   │   │   ├── transaction.ts
│   │   │   ├── category.ts
│   │   │   └── budget.ts
│   │   ├── utils/
│   │   │   ├── format.ts
│   │   │   ├── storage.ts
│   │   │   └── request.ts
│   │   ├── static/
│   │   │   └── fonts/
│   │   ├── App.vue
│   │   ├── main.ts
│   │   ├── manifest.json
│   │   ├── pages.json
│   │   └── uni.scss
│   ├── package.json
│   └── vite.config.ts
│
├── server/                    # 后端
│   ├── src/
│   │   ├── routes/
│   │   │   ├── auth.ts
│   │   │   ├── transaction.ts
│   │   │   ├── category.ts
│   │   │   ├── stats.ts
│   │   │   └── budget.ts
│   │   ├── db/
│   │   │   ├── schema.sql
│   │   │   └── seed.sql
│   │   ├── middleware/
│   │   │   └── auth.ts
│   │   └── index.ts
│   ├── data/                  # 数据库迁移文件
│   ├── package.json
│   └── tsconfig.json
│
├── docs/                      # 文档
│   ├── mockup/                # UI 原型
│   ├── ui-design.md           # 设计规格
│   └── development-plan.md    # 本文件
│
└── deploy/                    # 部署脚本
    ├── nginx.conf
    ├── ecosystem.config.js    # PM2 配置
    └── setup.sh               # 服务器初始化

---

七、开发计划

阶段一: 基础搭建 (第 1 周)

任务	说明	产出
项目初始化	Uni-app 项目 + 后端项目	可运行的空项目
数据库设计	MySQL 建表 + 种子数据	数据库就绪
微信登录	code2session 对接	登录流程
API 框架	Express + 中间件	API 可调用

阶段二: 核心功能 (第 2-3 周)

任务	说明	产出
记账功能	添加/编辑/删除交易	核心记账流程
分类管理	预设分类 + 自定义	12 个分类
首页展示	月度总览 + 账单列表	首页完整
预算功能	设置/展示预算	预算进度条

阶段三: 统计分析 (第 4 周)

任务	说明	产出
分类统计	环形图 + 排行	分类占比
趋势分析	折线图	每日趋势
数据导出	CSV 导出	可导出数据

阶段四: 优化上线 (第 5 周)

任务	说明	产出
UI 细节	动画、交互优化	精细化
性能优化	首屏加载、缓存	流畅体验
服务器部署	Nginx + PM2	上线运行
微信审核	提交审核	正式发布

---

八、服务器部署方案

环境配置

# 系统: Ubuntu 22.04 LTS
# 配置: 2 核 CPU, 2GB 内存

# 安装 Node.js 20
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# 安装 MySQL 8.0
sudo apt install -y mysql-server
sudo mysql_secure_installation

# 安装 Nginx
sudo apt install -y nginx

# 安装 PM2
sudo npm install -g pm2

# 创建部署目录
sudo mkdir -p /var/www/xiaocai
sudo chown $USER:$USER /var/www/xiaocai

Nginx 配置

server {
    listen 80;
    server_name your-domain.com;

    # 小程序 API
    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # SSL (上线前配置)
    # listen 443 ssl;
    # ssl_certificate /path/to/cert.pem;
    # ssl_certificate_key /path/to/key.pem;
}

PM2 配置

// ecosystem.config.js
module.exports = {
  apps: [{
    name: 'xiaocai-server',
    script: './dist/index.js',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '300M',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    }
  }]
};

性能预估 (2H2G)

指标	预估
并发用户	50-100
QPS	200-500
内存占用	Node.js 150MB + MySQL 300MB
响应时间	< 100ms
数据库大小	< 100MB/年

内存分配: MySQL 约 300MB，Node.js 约 150MB，系统约 500MB，剩余可用约 1GB。

---

九、微信小程序配置

manifest.json

{
  "mp-weixin": {
    "appid": "wx854804dff2928c53",
    "setting": {
      "urlCheck": true,
      "es6": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "用于获取您的位置信息"
      }
    }
  }
}

pages.json

{
  "pages": [
    { "path": "pages/index/index", "style": { "navigationBarTitleText": "小菜记账" } },
    { "path": "pages/add/index", "style": { "navigationBarTitleText": "记一笔" } },
    { "path": "pages/stats/index", "style": { "navigationBarTitleText": "统计分析" } },
    { "path": "pages/bills/index", "style": { "navigationBarTitleText": "全部账单" } },
    { "path": "pages/profile/index", "style": { "navigationBarTitleText": "我的" } }
  ],
  "tabBar": {
    "color": "#BFB3B3",
    "selectedColor": "#FF8C69",
    "list": [
      { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/icons/home.png", "selectedIconPath": "static/icons/home-active.png" },
      { "pagePath": "pages/stats/index", "text": "统计", "iconPath": "static/icons/chart.png", "selectedIconPath": "static/icons/chart-active.png" },
      { "pagePath": "pages/bills/index", "text": "账单", "iconPath": "static/icons/bill.png", "selectedIconPath": "static/icons/bill-active.png" },
      { "pagePath": "pages/profile/index", "text": "我的", "iconPath": "static/icons/user.png", "selectedIconPath": "static/icons/user-active.png" }
    ]
  }
}

---

十、风险与应对

风险	影响	应对方案
2G 内存不足	服务崩溃	监控内存，必要时升级配置
微信审核不通过	延迟上线	提前了解审核规范
数据丢失	用户体验差	每日自动备份 MySQL (mysqldump)
并发量突增	响应变慢	PM2 自动重启 + 限流

---

十一、预算

项目	费用
阿里云服务器	已有 (2H2G)
域名	¥55/年 (.com)
SSL 证书	免费 (Let's Encrypt)
微信认证	¥300/年 (企业)
总计	¥355/年

---

十二、下一步行动

1. 立即开始: 初始化 Uni-app 项目 + 后端项目
2. 本周完成: 数据库设计 + 微信登录 + API 框架
3. 下周目标: 完成记账核心功能
4. 月底目标: 完成全部 P0 功能，提交微信审核

---

文档版本: v1.0 | 最后更新: 2026-05-27