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

> 版本: 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 安装 (阿里云服务器)

```bash
# 安装 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;
```

### 核心表

```sql
-- 分类表
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 |

### 响应示例

```json
// 成功
{
  "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 | 上线运行 |
| 微信审核 | 提交审核 | 正式发布 |

---

## 八、服务器部署方案

### 环境配置

```bash
# 系统: 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 配置

```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 配置

```javascript
// 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

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

### pages.json

```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*