admin/xiaocai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c7f29aa7a79ddf5ab6976076a38b574d953b16d9
xiaocai/CLAUDE.md
wangxiaogang c7f29aa7a7 feat: 小菜记账 v1.0 - 完整功能实现 
核心功能：
- 记账CRUD（支出/收入/分类/备注/日期）
- 统计分析（概览/分类占比/每日趋势）
- 预算管理（按月设置/进度条/超支提醒）
- 数据导出CSV

安全与认证：
- HMAC-SHA256签名token认证
- 用户数据隔离
- 输入验证与错误处理
- CORS配置

前端优化：
- 骨架屏加载
- 账单按日期分组
- 预算页面重构（快捷预设+Numpad）
- SvgIcon组件（H5+微信双端适配）
- 下拉刷新

后端优化：
- 共享日期工具函数
- 数据库连接池优化
- 健康检查端点
- 优雅关闭处理

技术栈：
- 前端：Uni-app (Vue 3 + Pinia)
- 后端：Node.js + Express + MySQL
2026-05-29 16:14:15 +08:00

4.9 KiB
Raw Blame History

小菜记账 (Xiaocai Accounting)

可爱 × 高级的个人记账小程序。让记账从负担变成享受。

Tech Stack

前端 (client/)

  • 框架: Uni-app (Vue 3 + Composition API)
  • 状态管理: Pinia
  • 样式: SCSS (Claymorphism 风格)
  • 图标: Lucide Icons (SVG 组件，禁止 emoji)
  • 图表: uCharts (小程序端)
  • 目标平台: 微信小程序 / H5

后端 (server/)

  • 运行时: Node.js + Express
  • 数据库: MySQL 8.0 (mysql2 连接池)
  • 认证: HMAC-SHA256 签名 token，30 天过期
  • CORS: 已配置，支持 credentials

Design System

完整设计规格: docs/superpowers/specs/2026-05-27-xiaocai-design.md

核心设计语言: Claymorphism (软3D粘土风格)

  • 主色调: 珊瑚橙 #FF8C69 — 温暖、活泼、有亲和力
  • 背景色: 暖奶油 #FFF8F0 — 比纯白更柔和
  • 文字色: 暖深棕 #2D1B1B — 不用纯黑
  • 圆角: 卡片 20px, 按钮 14-16px
  • 阴影: 双层 (外阴影 + 内阴影，模拟粘土质感)

字体

  • 英文: Fredoka (标题) + Nunito (正文)
  • 中文: PingFang SC / 系统默认
  • 数字和金额使用 Fredoka，等宽数字

关键原则

  • 最小触摸目标 44×44px
  • 禁止使用 emoji 作为图标，统一使用 SvgIcon 组件
  • 尊重 prefers-reduced-motion
  • 文字对比度 ≥ 4.5:1 (WCAG AA)

Project Conventions

命名

  • 目录: kebab-case (category-manage/, transaction-item/)
  • 组件: PascalCase (AmountCard.vue, TransactionItem.vue)
  • 变量/函数: camelCase (totalExpense, formatAmount())
  • 常量: UPPER_SNAKE_CASE (MAX_BUDGET, STORAGE_KEY)
  • CSS 类: BEM 或 Tailwind 风格

文件组织

client/src/
├── pages/              # 页面 (uni-app 规范)
│   ├── index/          # 首页仪表盘
│   ├── add/            # 添加/编辑记录
│   ├── stats/          # 统计分析
│   ├── bills/          # 全部账单 (下拉刷新/上拉加载)
│   ├── profile/        # 个人设置
│   └── category-manage/ # 分类管理
├── components/         # 公共组件
│   ├── BudgetBar/      # 预算进度条
│   ├── CategoryIcon/   # 分类图标 (首字+颜色)
│   ├── Numpad/         # 数字键盘
│   ├── SvgIcon/        # SVG 图标 (base64 data URI)
│   └── TransactionItem/ # 交易列表项
├── stores/             # Pinia stores
│   ├── transaction.ts  # 交易 CRUD
│   ├── category.ts     # 分类 CRUD
│   ├── budget.ts       # 预算管理
│   └── stats.ts        # 统计概览
├── utils/
│   ├── format.ts       # 金额/日期格式化
│   ├── request.ts      # HTTP 请求封装 (401 处理/自动重登录)
│   └── system.ts       # 系统信息 (状态栏高度等)
└── static/icons/       # tabBar 图标 (PNG)

server/src/
├── index.ts            # Express 入口 (CORS, JSON 解析)
├── middleware/auth.ts   # HMAC token 验证中间件
├── routes/
│   ├── auth.ts         # 登录 / token 签发
│   ├── transaction.ts  # 交易 CRUD (用户隔离)
│   ├── category.ts     # 分类 CRUD (默认+自定义)
│   ├── budget.ts       # 预算 CRUD (按月)
│   └── stats.ts        # 统计查询
└── db/
    ├── connection.ts   # MySQL 连接池
    ├── init.ts         # 建表 + seed (multipleStatements)
    ├── schema.sql      # 表结构
    └── seed.sql        # 默认分类数据

金额处理

  • 存储单位: 分 (整数，避免浮点精度问题)
  • 显示单位: 元 (保留两位小数)
  • 格式化: ¥ 1,234.56 (¥ 后空格，千分位分隔)
  • 收入前缀 +，支出前缀 -
  • 使用 formatAmount() 带 ¥ 前缀，formatAmountRaw() 纯数字

数据持久化

  • 前端本地存储 Key: xc:token, xc:userId
  • 后端 MySQL 数据库
  • API 基础地址: request.ts 中的 BASE_URL

认证流程

  • H5: 页面加载时自动 login 获取 token
  • 微信小程序: App.vue onLaunch 调用 wx.login 获取 code，换 token
  • Token: HMAC-SHA256 签名，30 天过期
  • 401 处理: 自动清除 token，小程序触发 reLogin，H5 刷新页面

Git

  • 分支: master → main (注意远程)
  • Commit 风格: 中文描述，简洁明了
    • feat: 添加记账页面
    • fix: 修复金额计算精度问题

Commands

# 前端开发 (H5)
cd client && npm run dev:h5

# 前端开发 (微信小程序)
cd client && npm run dev:mp-weixin

# 前端构建
cd client && npm run build:mp-weixin

# 后端开发
cd server && npm run dev

# 后端构建
cd server && npm run build

# 数据库初始化
cd server && npm run db:init

部署

  • 服务器: 106.14.208.43:3000
  • MySQL: 本地 3306 端口
  • 微信小程序上线需配置 HTTPS 域名 (替换 request.ts 中的 BASE_URL)

开发

@DEV.md

Reference in New Issue View Git Blame Copy Permalink