基于uni-app+vue3+uview开发一款日常记账本应用app

最新推荐文章于 2026-08-20 20:48:23 发布
原创 最新推荐文章于 2026-08-20 20:48:23 发布 · 425 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

小账本 - 系统模块及详细功能说明文档

目录

  1. 系统概述
  2. 技术架构
  3. 模块清单
  4. 页面功能详细说明
  5. 数据模型
  6. 核心Store
  7. 工具函数
  8. 样式规范
  9. 业务流程

系统概述

项目简介

小账本是一款简洁易用的个人记账应用，采用现代化的前端技术栈开发，支持多端运行（H5、微信小程序等）。应用专注于提供流畅的记账体验，同时支持记录每日心情，帮助用户更好地了解自己的消费习惯和情绪状态。

在这里插入图片描述

核心特性

  • 多端支持：基于 uni-app 框架，支持 H5、小程序等多端运行
  • 数据持久化：使用 IndexedDB 本地存储，数据安全可靠
  • 心情记录：支持记录每日心情，提供情绪追踪功能
  • 统计分析：提供收支统计、分类分析、心情统计等多维度数据展示
  • 简洁易用：界面简洁，操作直观，记账流程顺畅

技术架构

技术栈

类别技术版本说明
Node.jsNode.js>= 18.0.0运行环境
前端框架Vue3.5.39采用 Composition API
构建工具Vite6.x快速的开发构建体验
跨端框架uni-app3.x支持多端运行
状态管理Pinia3.0.4轻量级状态管理
Vue DevTools@vue/devtools-api7.7.9Vue 开发者工具
本地存储IndexedDB-浏览器本地数据库
样式预处理SCSS-变量、混合等高级特性
图表绘制Canvas 2D-自定义统计图表

Node.js 版本要求

  • 最低版本：Node.js 18.0.0
  • 推荐版本：Node.js 20.x LTS

核心依赖版本详情

依赖名称版本用途
vue3.5.39Vue 核心框架
@vue/compiler-core3.5.39Vue 编译器核心
@vue/compiler-dom3.5.39Vue DOM 编译器
@vue/compiler-sfc3.5.39Vue SFC 编译器
@vue/reactivity3.5.39Vue 响应式系统
@vue/runtime-core3.5.39Vue 运行时核心
@vue/runtime-dom3.5.39Vue DOM 运行时
@vue/shared3.5.39Vue 共享工具函数
pinia3.0.4状态管理
@vue/devtools-api7.7.9Vue DevTools 接口
@babel/parser7.29.7JavaScript 解析器
@babel/types7.29.7Babel 类型定义
postcss8.5.15CSS 处理工具
nanoid3.3.15唯一 ID 生成
picocolors1.1.1命令行颜色输出
source-map-js1.2.1SourceMap 处理

开发环境依赖

依赖名称版本用途
@dcloudio/types-uni-app TypeScript 类型定义
@types/node-Node.js TypeScript 类型定义
typescript-TypeScript 编译
sass-SCSS 编译

项目目录结构

account-app/
├── pages/                      # 页面文件
│   ├── home/
│   │   └── index.vue          # 首页
│   ├── record/
│   │   ├── add.vue            # 添加记账记录
│   │   ├── edit.vue           # 编辑记账记录
│   │   ├── list.vue           # 记账记录列表
│   │   └── search.vue         # 搜索记账记录
│   ├── calendar/
│   │   └── index.vue          # 日历视图
│   ├── stats/
│   │   └── index.vue          # 统计分析
│   └── category/
│       └── manage.vue          # 分类管理
├── stores/                     # Pinia 状态管理
│   ├── record.js              # 记账记录 Store
│   └── category.js            # 分类 Store
├── components/                 # 公共组件
│   └── WeatherWidget.vue      # 天气组件
├── utils/                     # 工具函数
│   ├── index.js              # 通用工具函数
│   └── db.js                # IndexedDB 数据库操作
├── static/                   # 静态资源
├── styles/                   # 样式文件
│   └── common.scss          # 公共样式
├── uni.scss                 # uni-app 全局变量
├── App.vue                  # 应用入口
├── main.js                  # 主入口文件
└── manifest.json           # 应用配置

模块清单

一级模块

模块名称文件路径功能描述
首页模块pages/home/index.vue展示收支概况、最近记录、快速入口
记账模块pages/record/*添加、编辑、列表、搜索记账记录
日历模块pages/calendar/index.vue日历视图展示记录
统计模块pages/stats/index.vue数据统计和可视化
分类模块pages/category/manage.vue分类管理
天气模块components/WeatherWidget.vue显示天气信息

二级模块（Store）

模块名称文件路径功能描述
记录Storestores/record.js记账数据管理、统计计算
分类Storestores/category.js分类数据管理

二级模块（工具）

模块名称文件路径功能描述
数据库模块utils/db.jsIndexedDB 封装
工具函数utils/index.js格式化、日期处理等

页面功能详细说明

1. 首页 (pages/home/index.vue)

功能概述

首页是用户打开应用的第一个页面，承担着数据总览和功能导航的作用。
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  小账本 ✦    [天气组件]              │  <- 顶部标题区
├─────────────────────────────────────┤
│  早上好 / 下午好 / 晚上好            │  <- 问候语
├─────────────────────────────────────┤
│  ┌─────────────────────────────────┐│
│  │ 本月结余                        ││  <- 收支卡片
│  │ ¥12,345.00                      ││
│  │ [📈 收入 ¥20,000] [📉 支出 ¥7,655]││
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│  ┌───────┐ ┌───────┐ ┌───────┐    │
│  │ 📝    │ │ 🔥    │ │ 🏆    │    │  <- 快速统计
│  │ ¥256  │ │ 45    │ │ 餐饮   │    │
│  │今日支出│ │本月笔数│ │最多分类│    │
│  └───────┘ └───────┘ └───────┘    │
├─────────────────────────────────────┤
│  最近记录                    查看全部 │
├─────────────────────────────────────┤
│  🍜 餐饮 · 午餐 🍀  ¥35.00          │  <- 记录列表
│  🚗 交通 · 地铁   ¥5.00             │
│  🛍️ 购物 · 衣服   ¥299.00          │
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1显示本月结余从 Store 获取 monthBalance 计算当月收支差P0
2显示本月收入从 Store 获取 monthIncome 汇总收入P0
3显示本月支出从 Store 获取 monthExpense 汇总支出P0
4显示今日支出从 Store 获取 todayExpense 计算当天支出P1
5显示本月笔数从 Store 获取 monthRecordCount 统计记录数P1
6显示最多分类从 Store 获取 topExpenseCategory 找出支出最多分类P1
7问候语根据当前时间显示"早上好/下午好/晚上好"P2
8最近记录列表从 Store 获取 recentRecords 显示最近5条P0
9跳转记账页点击添加按钮跳转到 add.vueP0
10跳转列表页点击"查看全部"跳转到 list.vueP1
11跳转日历页点击日历图标跳转到 calendar/index.vueP1
12跳转统计页点击统计图标跳转到 stats/index.vueP1
13编辑记录点击记录项跳转到 edit.vueP1
14加载状态数据未初始化时显示加载提示P1
15心情显示记录列表显示心情表情P2
交互说明
  • 添加按钮：点击后带参数 ?type=expense 跳转，方便用户快速记账
  • 记录点击：跳转到编辑页面，传递记录 ID 作为参数
  • 查看全部：跳转到记账列表页面
  • 天气组件：显示当前天气信息（可选功能）

2. 记账添加页面 (pages/record/add.vue)

功能概述

记账添加页面是核心记账功能的入口，用户可以快速添加支出或收入记录，并记录当日心情。
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  记一笔 ✦                           │  <- 页面标题
├─────────────────────────────────────┤
│  [ 支出 ]    [ 收入 ]               │  <- 类型切换
├─────────────────────────────────────┤
│  ¥  0.00                            │  <- 金额输入
├─────────────────────────────────────┤
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐     │
│  │🍜 │ │🚗 │ │🛍️│ │🎮 │ │🏠 │     │  <- 分类选择
│  │餐饮│ │交通│ │购物│ │娱乐│ │住房│     │
│  └───┘ └───┘ └───┘ └───┘ └───┘     │
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐     │
│  │💊 │ │📚 │ │📱 │ │🍪 │ │🏃 │     │
│  │医疗│ │教育│ │通讯│ │零食│ │运动│     │
│  └───┘ └───┘ └───┘ └───┘ └───┘     │
├─────────────────────────────────────┤
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐     │
│  │😀│ │😊│ │😐│ │😔│ │😭│     │  <- 心情选择
│  │开心│ │愉快│ │一般│ │难过│ │伤心│     │
│  └───┘ └───┘ └───┘ └───┘ └───┘     │
│        ┌───┐                         │
│        │😡│                         │
│        │生气│                         │
│        └───┘                         │
├─────────────────────────────────────┤
│  📅 今天                         今天 │  <- 日期选择
├─────────────────────────────────────┤
│  ┌─────────────────────────────────┐│
│  │ 添加备注（可选）...              ││  <- 备注输入
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│        [ 保存记录 ]                 │  <- 提交按钮
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1类型切换切换支出/收入类型，刷新分类列表P0
2金额输入输入记账金额，支持小数P0
3分类选择点击选择分类，选中高亮P0
4心情选择选择当日心情（6种表情），默认选择第一个P0
5日期选择点击打开日期选择器P1
6备注输入可选输入，最多100字P2
7保存记录验证数据并保存到 StoreP0
8返回首页保存成功后自动返回P1
心情选项配置
表情名称值
😀开心‘😀’
😊愉快‘😊’
😐一般‘😐’
😔难过‘😔’
😭伤心‘😭’
😡生气‘😡’
验证规则
字段规则错误提示
金额必须 > 0“请输入金额”
分类必须选择“请选择分类”
交互说明
  • 类型切换：切换支出/收入时重置已选分类
  • 分类选择：单选，点击后高亮显示
  • 心情选择：单选，默认选中第一个"开心"
  • 日期选择：默认当天，支持补录
  • 保存成功：显示提示后延迟返回上一页

3. 记账编辑页面 (pages/record/edit.vue)

功能概述

编辑页面用于修改已有的记账记录，支持完整的数据回显和更新。
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  [‹]  编辑记录                      │  <- 头部导航
├─────────────────────────────────────┤
│  [ 支出 ]    [ 收入 ]               │  <- 类型切换
├─────────────────────────────────────┤
│  ¥  35.00                           │  <- 金额输入（回显）
├─────────────────────────────────────┤
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐     │
│  │🍜✓│ │🚗 │ │🛍️│ │🎮 │ │🏠 │     │  <- 分类选择（回显）
│  │餐饮│ │交通│ │购物│ │娱乐│ │住房│     │
│  └───┘ └───┘ └───┘ └───┘ └───┘     │
├─────────────────────────────────────┤
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐     │
│  │😀 │ │😊✓│ │😐│ │😔│ │😭│     │  <- 心情选择（回显）
│  │开心│ │愉快│ │一般│ │难过│ │伤心│     │
│  └───┘ └───┘ └───┘ └───┘ └───┘     │
├─────────────────────────────────────┤
│  📅 2024-01-15                  补录 │  <- 日期选择
├─────────────────────────────────────┤
│  ┌─────────────────────────────────┐│
│  │ 午餐                          ││  <- 备注输入（回显）
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│  [ 删除记录 ]                       │  <- 删除按钮
│        [ 保存修改 ]                 │  <- 提交按钮
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1加载记录根据 URL 参数 ID 加载记录数据P0
2类型切换切换支出/收入类型P0
3金额回显显示原金额值P0
4分类回显高亮显示原分类P0
5心情回显高亮显示原心情P0
6日期回显显示原日期P1
7备注回显显示原备注P1
8更新记录保存修改后的数据P0
9删除记录弹出确认后删除记录P1
数据回显逻辑
编辑页面加载时：
1. 从 URL 参数获取 record ID
2. 在 Store 中查找对应记录
3. 填充表单字段：
   - recordType = record.type
   - amount = record.amount
   - selectedCatId = record.catId
   - selectedMood = record.mood || ''
   - selectedDate = record.date
   - note = record.note
交互说明
  • 返回按钮：返回上一页
  • 删除按钮：弹出确认对话框，确认后删除并返回
  • 保存按钮：验证数据后更新记录

4. 记账列表页面 (pages/record/list.vue)

功能概述

列表页面展示所有记账记录，支持多种筛选条件和操作功能。
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  [‹]  记账列表              [🔍]    │  <- 头部导航
├─────────────────────────────────────┤
│  全部  支出  收入  今天  本周  本月   │  <- 筛选标签
├─────────────────────────────────────┤
│  今天                        ▼ ¥350 │  <- 日期分组
│  ┌───┐ 🍜餐饮 · 午餐🍀    ¥35.00 [✏️🗑️]│
│  ┌───┐ 🚗交通 · 地铁       ¥5.00 [✏️🗑️]│
│  ┌───┐ 🛍️购物 · 衣服   ¥310.00 [✏️🗑️]│
├─────────────────────────────────────┤
│  昨天                        ▼ ¥120 │
│  ┌───┐ 🍜餐饮 · 晚餐      ¥80.00 [✏️🗑️]│
│  ┌───┐ 🎮娱乐 · 电影      ¥40.00 [✏️🗑️]│
├─────────────────────────────────────┤
│  1月15日                    ▼ ¥500 │
│  ┌───┐ 🏠住房 · 房租     ¥500.00 [✏️🗑️]│
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1全部筛选显示所有记录P1
2支出筛选仅显示支出记录P1
3收入筛选仅显示收入记录P1
4今天筛选仅显示今天的记录P1
5本周筛选仅显示本周的记录P1
6本月筛选仅显示本月的记录P1
7日期分组按日期分组显示记录P0
8当日汇总显示每天的支出和收入P1
9心情显示显示记录的心情表情P2
10编辑记录点击编辑按钮跳转到编辑页P0
11删除记录点击删除按钮删除记录P1
12跳转搜索点击搜索图标跳转搜索页P1
13空状态无记录时显示提示P1
筛选条件配置
值标签筛选逻辑
all全部无筛选
expense支出type === ‘expense’
income收入type === ‘income’
today今天date === todayStr
week本周date in currentWeek
month本月date.startsWith(currentMonth)
金额显示规则
类型格式颜色
支出¥XX.XX珊瑚色 ($joy-coral-600)
收入+¥XX.XX薄荷绿 ($joy-mint-600)
交互说明
  • 筛选切换：点击标签切换筛选条件
  • 记录点击：点击记录项跳转编辑页
  • 编辑按钮：点击跳转编辑页
  • 删除按钮：点击弹出确认后删除

5. 搜索页面 (pages/record/search.vue)

功能概述

搜索页面提供关键词检索功能，方便用户快速找到特定记录。
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  [搜索记账记录...]     [取消]       │  <- 搜索栏
├─────────────────────────────────────┤
│  📝 输入关键词搜索                  │  <- 空状态
│     搜索记录名称、备注等            │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│  [午餐支出...]         [取消]       │  <- 搜索栏（输入中）
├─────────────────────────────────────┤
│  今天                        ▼ ¥35 │
│  🍜餐饮 · 午餐🍀           ¥35.00   │
├─────────────────────────────────────┤
│  昨天                        ▼ ¥80 │
│  🍜餐饮 · 午餐            ¥80.00    │
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1关键词输入实时搜索输入P0
2分类名称搜索匹配分类名称P0
3备注搜索匹配备注内容P0
4心情搜索匹配心情表情P1
5日期分组搜索结果按日期分组P1
6当日汇总显示每天收支P1
7无结果提示未匹配时显示提示P1
8取消返回点击取消返回上一页P1
9编辑记录点击搜索结果编辑P1
搜索范围
字段说明
分类名称匹配记录的分类名称
备注匹配记录的备注内容

6. 日历页面 (pages/calendar/index.vue)

功能概述

日历视图以月历形式展示记账记录，直观显示每日收支情况。
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  日历视图 ✦                         │
│  [◀]  2024年1月  [▶]                │  <- 月份导航
├─────────────────────────────────────┤
│  日   一   二   三   四   五   六    │  <- 星期标题
├─────────────────────────────────────┤
│       1    2    3    4    5    6    │
│  ▼    ▼    ▼    ▼    ▼    ▼   ▼    │  <- 日期格子
│  ¥150 ¥80  ¥200 ¥120  ¥50  ¥300     │  <- 日支出
├─────────────────────────────────────┤
│  ▼ 点击日期查看详情                 │  <- 操作提示
├─────────────────────────────────────┤
│  1月15日（周一）              ▼ ¥350 │
│  🍜餐饮 · 午餐🍀            ¥35.00  │
│  🚗交通 · 地铁              ¥5.00   │
│  🛍️购物 · 衣服            ¥310.00  │
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1月份导航显示当前月份，支持切换P0
2月份切换上一月/下一月P0
3日期格子显示日期数字P0
4当日标记高亮显示今天P1
5有记录标记有记录的日期显示圆点P1
6日支出显示显示每天的支出金额P1
7记录列表点击日期显示当天记录P0
8心情显示显示记录的心情表情P2
9空状态无记录时显示提示P1
日期状态
状态样式
今天背景高亮
有记录底部圆点标记
无记录默认样式
选中边框高亮

7. 统计页面 (pages/stats/index.vue)

功能概述

统计页面提供多维度的数据统计和可视化展示。
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  统计分析 ✦                         │
│  [ 日 ]  [ 周 ]  [ 月 ]  [ 年 ]     │  <- 周期切换
├─────────────────────────────────────┤
│  ┌─────────────────────────────────┐│
│  │      📈 收支曲线图               ││  <- 图表区域
│  │   ╱╲    ╱╲                      ││
│  │  ╱  ╲__╱  ╲__╱                  ││
│  │ 支出曲线                         ││
│  │      ╱╲                         ││
│  │  ╱╲╱  ╲__╱                      ││
│  │ ╱  ╲__╱                        ││
│  │收入曲线                         ││
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│  支出分类统计                        │
│  ┌─────────────────────────────────┐│
│  │ 🍜 餐饮   ¥2,500   ████████ 35% ││
│  │ 🚗 交通   ¥800     ████    15% ││
│  │ 🛍️ 购物   ¥1,200   █████   25% ││
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│  收入分类统计                        │
│  ┌─────────────────────────────────┐│
│  │ 💰 工资   ¥8,000    ████████ 80% ││
│  │ 💼 兼职   ¥2,000    ███    20% ││
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│  心情统计                            │
│  ┌─────────────────────────────────┐│
│  │ 😀 开心   15次    ████████ 30%  ││
│  │ 😊 愉快   12次    ██████    24%  ││
│  │ 😐 一般   10次    █████     20%  ││
│  │ 😔 难过   8次     ████      16%  ││
│  │ 😭 伤心   3次     ██       6%   ││
│  │ 😡 生气   2次     █        4%   ││
│  └─────────────────────────────────┘│
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1日统计显示当天的收支数据P0
2周统计显示本周的收支数据P1
3月统计显示本月的收支数据P1
4年统计显示本年的收支数据P1
5支出曲线绘制支出曲线图（橙色）P0
6收入曲线绘制收入曲线图（绿色）P0
7曲线阴影曲线下方填充阴影P2
8支出分类统计显示支出分类占比P0
9收入分类统计显示收入分类占比P1
10心情统计显示心情占比P0
11统计次数显示各心情的记录次数P1
12进度条可视化展示占比P1
周期配置
值标签数据范围
day日当天
week周本周一至周日
month月本月1日至月末
year年本年1月至12月
图表配置
元素配置
画布尺寸宽度100%，高度200px
边距上20，右10，下30，左10
曲线宽度2px
阴影宽度6px
支出颜色橙色 $joy-coral-500
收入颜色绿色 $joy-mint-500

8. 分类管理页面 (pages/category/manage.vue)

功能概述

分类管理页面用于管理支出和收入的分类，支持增删改操作。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

模块结构
┌─────────────────────────────────────┐
│  [‹]  分类管理                      │  <- 头部导航
├─────────────────────────────────────┤
│  ┌─────────────────────────────────┐│
│  │  👤  用户头像                    ││  <- 用户信息
│  │  点击更换头像                    ││
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│  支出分类                           │
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐    │
│  │🍜✓│ │🚗 │ │🛍️│ │🎮 │ │🏠 │    │  <- 分类列表
│  │餐饮│ │交通│ │购物│ │娱乐│ │住房│    │
│  └───┘ └───┘ └───┘ └───┘ └───┘    │
│  ┌───┐ ┌───┐ ┌───┐                 │
│  │💊 │ │📚 │ │📱 │     [+ 添加]   │
│  └─────────────────────────────────┘│
├─────────────────────────────────────┤
│  收入分类                           │
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐          │
│  │💰✓│ │💼 │ │📈 │ │🧧 │          │
│  │工资│ │兼职│ │投资│ │红包│          │
│  └───┘ └───┘ └───┘ └───┘          │
│       [+ 添加]                      │
└─────────────────────────────────────┘
功能点清单
序号功能点描述优先级
1用户头像显示用户头像P2
2更换头像点击更换头像图片P2
3支出分类列表显示所有支出分类P0
4收入分类列表显示所有收入分类P0
5添加分类添加新的分类P1
6编辑分类编辑分类名称/图标P1
7删除分类删除不需要的分类P1
8分类统计显示各分类使用次数P1
默认支出分类
ID名称图标颜色索引
e1餐饮🍜0
e2交通🚗1
e3购物🛍️2
e4娱乐🎮3
e5住房🏠4
e6医疗💊5
e7教育📚6
e8通讯📱7
e9零食🍪8
e10运动🏃9
e11宠物🐾10
e12其他💡11
默认收入分类
ID名称图标颜色索引
i1工资💰0
i2兼职💼1
i3投资📈2
i4红包🧧3
i5退款🔄4
i6其他✨5

数据模型

记账记录 (Record)

interface Record {
  id: number;           // 记录唯一标识，自增
  type: 'expense' | 'income';  // 记录类型
  catId: string;        // 分类ID
  amount: number;       // 金额，精确到分
  date: string;         // 日期，格式 YYYY-MM-DD
  hour: number;         // 小时，0-23
  note: string;         // 备注，最多100字
  mood: string;         // 心情表情，如 '😀'
}

分类 (Category)

interface Category {
  id: string;           // 分类唯一标识
  name: string;         // 分类名称
  icon: string;         // 分类图标（emoji）
  type: 'expense' | 'income';  // 分类类型
  colorIdx: number;     // 颜色索引，对应颜色数组
}

分类颜色配置

// 支出分类颜色
const expenseColors = [
  { bg: '#FFF5F5', color: '#E53E3E' },  // 0 - 红色系
  { bg: '#FFF5EB', color: '#ED8936' },  // 1 - 橙色系
  // ... 更多颜色
]

// 收入分类颜色
const incomeColors = [
  { bg: '#F0FFF4', color: '#38A169' },   // 0 - 绿色系
  { bg: '#E6FFFA', color: '#319795' },   // 1 - 青色系
  // ... 更多颜色
]

核心Store

1. 记录Store (stores/record.js)

状态定义
状态类型说明
recordsref([])记账记录列表
nextIdref(1)下一个记录ID
initializedref(false)数据是否已初始化
计算属性
属性类型说明
monthBalancecomputed本月结余（收入-支出）
monthIncomecomputed本月收入总额
monthExpensecomputed本月支出总额
todayExpensecomputed今日支出金额
monthRecordCountcomputed本月记录笔数
topExpenseCategorycomputed本月支出最多分类
recentRecordscomputed最近5条记录
moodBreakdowncomputed心情统计数据
categoryBreakdowncomputed分类统计数据
方法列表
方法参数返回值说明
initDB-Promise初始化数据库
addRecordtype, catId, amount, date, note, hour, moodRecord添加记录
updateRecordid, type, catId, amount, date, note, hour, moodRecord|null更新记录
deleteRecordidboolean删除记录
getGroupedRecordsfilter?GroupedRecords[]获取分组记录

2. 分类Store (stores/category.js)

状态定义
状态类型说明
expenseCatsref([])支出分类列表
incomeCatsref([])收入分类列表
方法列表
方法参数返回值说明
getCatByIdcatId, typeCategory|undefined根据ID获取分类
getCatColorcatId, typeColorConfig获取分类颜色
addCategorytype, name, iconvoid添加分类
deleteCategorycatId, typevoid删除分类

工具函数

1. 格式化函数 (utils/index.js)

函数参数返回值说明
formatMoneyamount, prefix?string格式化金额，如 ¥1,234.00
formatDatedate?string格式化日期为 YYYY-MM-DD
formatDateShortdateStr, todayStr?string格式化日期为中文，如 今天、昨天、1月15日
getGreeting-string获取问候语
getWeekdaydatestring获取星期中文
getDateBadgeselectedDate, today?string获取日期徽章文本
generateId-string生成唯一ID

2. 数据库函数 (utils/db.js)

函数参数返回值说明
openDB-Promise打开数据库
addRecordrecordPromise添加/更新记录
getAllRecords-Promise<Record[]>获取所有记录
getRecordsByDatedatePromise<Record[]>按日期获取记录
deleteRecordidPromise删除记录
getMaxId-Promise获取最大ID

样式规范

全局变量 (uni.scss)

// 珊瑚色系（支出、主题）
$joy-coral-50: #FFF5F5;
$joy-coral-100: #FED7D7;
$joy-coral-500: #F56565;
$joy-coral-600: #E53E3E;

// 薄荷绿系（收入、正向）
$joy-mint-50: #F0FFF4;
$joy-mint-100: #C6F6D5;
$joy-mint-500: #48BB78;
$joy-mint-600: #38A169;

// 中性色系
$joy-neutral-0: #FFFFFF;
$joy-neutral-50: #F7FAFC;
$joy-neutral-100: #EDF2F7;
$joy-neutral-200: #E2E8F0;
$joy-neutral-400: #A0AEC0;
$joy-neutral-600: #718096;
$joy-neutral-800: #2D3748;
$joy-neutral-900: #1A202C;

分类颜色数组

// 支出分类颜色配置（12种）
categoryColors.expense = [
  { bg: '#FFE8DA', text: '#9C4A28' },  // coral
  { bg: '#D8ECF8', text: '#4A98B8' },  // sky
  { bg: '#E8D8F5', text: '#8864A8' },  // lavender
  { bg: '#F5E8D0', text: '#B89058' },  // amber
  { bg: '#D4F5E6', text: '#2C8858' },  // mint
  { bg: '#FFF5F0', text: '#B85E34' },  // coral-light
  { bg: '#F0F8FF', text: '#4A98B8' },  // sky-light
  { bg: '#F8F0FF', text: '#8864A8' },  // lavender-light
  { bg: '#FFF8F0', text: '#B89058' },  // amber-light
  { bg: '#F0FFF8', text: '#2C8858' },  // mint-light
  { bg: '#FFE8DA', text: '#9C4A28' },  // coral（重复）
  { bg: '#F5F0EA', text: '#585048' },  // neutral
]

// 收入分类颜色配置（6种）
categoryColors.income = [
  { bg: '#D4F5E6', text: '#2C8858' },  // mint
  { bg: '#FFE8DA', text: '#9C4A28' },  // coral
  { bg: '#D8ECF8', text: '#4A98B8' },  // sky
  { bg: '#F5E8D0', text: '#B89058' },  // amber
  { bg: '#E8D8F5', text: '#8864A8' },  // lavender
  { bg: '#F5F0EA', text: '#585048' },  // neutral
]

业务流程

1. 添加记录流程

开始
  │
  ▼
┌──────────────────┐
│  打开添加页面     │
│  type=expense     │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  选择记录类型     │
│  支出/收入        │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  输入金额         │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  选择分类         │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  选择心情（默认）  │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  选择日期（默认）  │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  输入备注（可选）  │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  点击保存         │
└────────┬─────────┘
         │
         ▼
    ┌────┴────┐
    │ 验证通过？│
    └────┬────┘
    否   │   是
    │    │    │
    ▼    │    ▼
┌────┐  │  ┌──────────────────┐
│提示│  │  │  保存到Store      │
│错误│  │  └────────┬─────────┘
└────┘  │           │
        │           ▼
        │  ┌──────────────────┐
        │  │  持久化到IndexedDB│
        │  └────────┬─────────┘
        │           │
        │           ▼
        │  ┌──────────────────┐
        │  │  显示成功提示      │
        │  └────────┬─────────┘
        │           │
        │           ▼
        │  ┌──────────────────┐
        └──│  返回上一页       │
           └──────────────────┘

2. 编辑记录流程

开始
  │
  ▼
┌──────────────────┐
│  从列表点击记录   │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  跳转编辑页面     │
│  传递 record ID   │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  根据ID加载记录   │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  回显所有字段     │
└────────┬─────────┘
         │
         ▼
    ┌────┴────┐
    │ 用户修改？│
    └────┬────┘
    否   │   是
    │    │    │
    ▼    │    ▼
┌────┐  │  ┌──────────────────┐
│跳过│  │  │  修改字段值       │
└────┘  │  └────────┬─────────┘
         │           │
         │           ▼
    ┌────┴────┐
    │ 点击操作？│
    └────┬────┘
   保存   │   删除   │ 取消
    │    │    │     │
    ▼    │    ▼     │
┌────┐  │ ┌────┐   ┌────┐
│验证│  │ │确认│   │返回│
└─┬──┘  │ └──┬─┘   └────┘
  │     │    │
  ▼     │    ▼
┌────┐  │ ┌────┐
│保存│  │ │删除│
└─┬──┘  │ └─┬──┘
  │     │   │
  ▼     │   ▼
┌────┐  │ ┌────┐
│返回│  │ │返回│
└────┘  │ └────┘

3. 数据持久化流程

应用启动
    │
    ▼
┌──────────────────┐
│  执行 initDB()   │
└────────┬─────────┘
         │
         ▼
    ┌────┴────┐
    │ 数据库存在？│
    └────┬────┘
    是   │   否
    │    │    │
    ▼    │    ▼
┌────┐  │  ┌──────────────────┐
│加载│  │  │ 创建默认数据      │
│数据│  │  └────────┬─────────┘
└─┬──┘  │           │
  │     │           ▼
  │     │  ┌──────────────────┐
  │     │  │  写入模拟数据     │
  │     │  └────────┬─────────┘
  │     │           │
  │     ▼           ▼
  │  ┌──────────────────┐
  └──│  设置 initialized │
     └────────┬─────────┘
              │
              ▼
     ┌────────────────┐
     │ 数据准备就绪     │
     └────────────────┘

附录

版本信息

  • 文档版本：v1.0
  • 更新日期：2026-06-30
  • 文档状态：完成

更新记录

日期版本更新内容
2026-06-30v1.0初始版本
标签
#uni-app #前端 #vue3.0
Vue2项目快速集成uView UI：从零到一键配置的完整指南
vscode5coder的博客
02-16 472
本文提供了一份详尽的Vue2项目集成uView UI组件库的完整指南。通过四个核心配置步骤，特别是利用easycom模式实现自动按需引入，开发者可以快速、高效地为uni-app项目引入这套功能全面、性能优化的UI解决方案，显著提升开发效率并优化项目体积。
uni-app实战：uView社区团购商城（一）
gogogodeng的专栏
02-01 2741
前言 入门一个新框架最好是直接上手实战，那么我们就尝试开始做一个社区团购商城吧 准备：掌握Vue基础语法，HbuildX开发工具，uView UI 框架 uView 是专门为uni-app开发的一套ui框架,个人觉得比官方模板，colorui都要好用太多了。 创建项目 首先下载hbuildx工具：hbuildx官网 然后下载uview-cli代码包：下载地址 下载后直接解压，把文件夹拖入到hbuildx中即可 然后点击工具栏->运行->运行到浏览器->Chrome 等待编译完成就可以看到界
有余记账（h5记账类项目）
Free_zjz的博客
09-26 1221
使用vue开发一个好看的记账webapp，满足日常记账功能
工具分享（5）：用H5开发一个合租记账APP—“合租薄”
localhost01
12-05 988
一、它是什么？ 它是一个用来合租租友一起生活开销记账的小工具，小到只有5M。上手容易，简单轻便！ 支持： 注册和登录，以每个家庭为单位； 可进行一些简单的日常开销录入、每月结算和历史开销查看功能。 使用H5+HbuilderX，用了三天时间在朋友已有基础上开发而来； 全前端，没有后台服务，数据存储为在线的LeanCloud（代码较渣，毕竟笔者只是个弱鸡后端）。 感谢 @yangshare 的源码共享（主要功劳）！ 二、怎么使用？ 使用截图： 三、它开源吗？ 当然！ GitHub地址
uni-app如何安装uView模块
weixin_60414376的博客
04-08 4313
众所周知，uni-app自带的组件库实在是很难满足我们的大部分需求，于是在这里我选择了目前十分强大的uView来进行日常开发。 1、找到uni-app下面的终端，并且输入： npm install uview-ui 2、在main.js文件全局引入uView import uView from 'uview-ui'; Vue.use(uView); 3、uni.scss文件 引入uView的全局SCSS主题文件 @import "uview-ui...
uView-Plus完整开发指南：Vue 3跨平台UI框架深度解析
gitblog_00878的博客
12-25 1082
uView-Plus作为基于Vue 3和Uni-app的现代化UI框架，为开发者提供了丰富组件库和便捷开发体验。本指南将带你从零开始掌握这个强大的跨平台开发工具。 ## 项目概览与核心优势 uView-Plus是专为uni-app生态设计的全面兼容nvue的框架，具备以下突出特点： - **全面组件支持**：提供100+高质量UI组件 - **多端兼容**：完美支持微信小程序、H5、iOS、
uView-Plus完整实战指南：从零构建企业级跨端应用
gitblog_00783的博客
12-25 781
uView-Plus作为基于Vue 3和Uni-app的现代化UI框架，为开发者提供了构建跨平台应用的完整解决方案。无论你是刚接触uni-app的新手还是经验丰富的开发者，本指南都将帮助你快速掌握这个强大的框架，轻松应对多端开发挑战。🎯 ## 为什么选择uView-Plus？ 在众多UI框架中，uView-Plus凭借其独特优势脱颖而出： | 特性 | 传统方案 | uView-Plus方
基于uView UI 2.0的精选组件库uView Next
xuweilin的博客
09-24 829
uView Next 支持 Vue2 和 Vue3，支持国际化，是uni-app全面兼容 nvue 的 uni-app 生态框架，提供了更丰富的组件和便捷的工具，让开发更得心应手。下面这个表格汇总了uview-next的核心信息，帮你快速了解全貌。
使用uni-app搭建的企业OAapp：高效企业管理的数字化助手
gitblog_06779的博客
04-12 936
使用uni-app搭建的企业OAapp：高效企业管理的数字化助手 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在数字化浪潮的推动下，企业对高效办公系统的需求日益增长。使用uni-app搭建的企业OA app，正是为了满足这种需求而诞生的一款面向企业内部员工的移动办公应用程序。它将日常办公流程电子化，帮助企业实现信息流转的自动化，提高工作效率。 项目技术分析 uni-...
uni.app学习笔记
q13217740213的博客
06-17 318
本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明。 文档版本：1.0.2
uniapp 使用极光推送【发送push消息】
qq_37833745的博客
08-18 53
【代码】uniapp 使用极光推送【发送push消息】
十、uni-app路由跳转
最新发布
nsdhakshda的博客
08-20 108
uni-app 路由跳转方式对比与实战指南 本文总结了 uni-app 中五种常用的路由跳转方式及其适用场景。
八、uni-app页面调用接口
nsdhakshda的博客
08-20 67
本文介绍了uni-app中三个关键API的使用方法及注意事项
UniApp 设置全局字体样式和背景色
weixin_72329752的博客
08-20 161
本文详细介绍了在UniApp中设置全局字体样式和背景色的多种方法：1. 在App.vue中直接定义全局样式；2
【websocket合集1】uni-app 小程序 WebSocket 接入说明
qq_51463650的博客
08-17 293
uni-app 小程序 WebSocket 接入说明
五、uni-app本地存储与Pinia持久化指南
nsdhakshda的博客
08-19 206
介绍微信小程序中使用本地存储（Storage）的完整方案
三、uni-app页面配置（pages.json）
nsdhakshda的博客
08-19 583
摘要 uni-app的pages.json是核心配置文件，负责管理应用页面结构、样式和功能。
九、uni-app通信方式
nsdhakshda的博客
08-20 48
本文系统梳理了7种uni-app数据通信方式及其适用场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值