# 记账app

**Repository Path**: dys168/accounting-app

## Basic Information

- **Project Name**: 记账app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-05
- **Last Updated**: 2026-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 轻记账

一款基于 **uni-app（Vue 3）** 的个人财务管理应用，面向 Android（HBuilder X 打包），同时支持 H5 与小程序。数据模型与分类体系参考开源项目 [LouBii/OneAccount](https://github.com/LouBii/OneAccount)，采用浅薄荷渐变顶栏（#E0F7FA → #FFFFFF）搭配低饱和蓝绿与暖橙点缀的现代简约视觉体系。

## 功能总览

| 模块 | 能力 |
| --- | --- |
| 首页仪表盘 | 左右分栏摘要卡片（左：结余 / 收入 / 支出；右：剩余预算环形图，点击进入预算管理）；隐私模式（隐藏金额 + eye-off 状态）；图标安全边距（小屏/大屏验证）；Top 5 单笔消费；Top 5 消费分类（占比进度条）；近期账单流 |
| 账单管理 | 全量历史账单按时间倒序 + 每页 30 条无限滚动 + 底部加载态；置顶收支总结固定 Header；顶部漏斗筛选；全部/按月/按年维度面板；按月分组流水，每组顶部展示“年月 | 支出/收入笔数金额”小结（与明细实时一致）；日历支出日橙色 / 收入日绿色 / 兼有双色填充与图例 |
| 分析 | 智能洞察（单日收支峰值）；支出/收入 Tab 单趋势图（保留时间范围）；右上角日期可点击弹出底部选择器（按月/按年网格）；月度环形图 + 分类占比；四项统计网格（总笔数/分类数/日均金额/单笔最高金额）；年度 12 个月柱状趋势 |
| 快速记账 | 底部 TabBar 中央原生 midButton“+”按钮；支出/收入切换；16 个内置支出分类 + 11 个内置收入分类；自定义数字键盘；日期时间选择；备注；标签多选；支持编辑已有账单 |
| 个人中心 | 主题设置（经典绿/静谧蓝/樱花粉/深空灰，实时预览 + 持久化）；预算管理；分类管理；标签管理；记账提醒；示例数据与清空数据 |

## 项目结构

```text
├─ pages/                 # 页面
│  ├─ index/              # 首页仪表盘
│  ├─ bill/               # 账单流水（搜索/筛选/日历）
│  ├─ chart/              # 数据分析
│  ├─ mine/               # 个人中心
│  ├─ add/                # 快速记账 / 编辑
│  ├─ bill-detail/        # 账单详情（编辑/删除）
│  ├─ budget/             # 预算设置
│  ├─ category/           # 分类管理
│  ├─ tag/                # 标签管理
│  └─ reminder/           # 记账提醒
├─ components/            # 通用组件（导航栏/账单行/环形图/日历/键盘/空状态）
├─ services/store.js      # 本地数据层：账单/预算/分类/标签/提醒 + 统计聚合 + 示例数据
├─ common/                # 分类常量、日期/金额工具
├─ static/                # tabbar 图标与应用图标
├─ cli/                   # CLI 构建配置归档（package.json / vite.config.js 等）
├─ scripts/               # 图标生成与 Playwright QA 脚本
├─ docs/screenshots/      # QA 截图
├─ index.html             # HBuilder X Vue3 工程入口
├─ pages.json             # 页面路由与 tabBar
├─ manifest.json          # App 配置（Android 权限、Push 模块）
└─ uni.scss               # 设计令牌（配色/间距/圆角/阴影）
```

> 根目录刻意**不放置 `package.json`**：HBuilder X 根据项目根目录的文件特征判断项目类型，根目录一旦出现 `package.json` 就会被识别成 CLI/Vite 工程（要求 `src/` 目录），导致无法直接运行。CLI 构建配置统一归档在 `cli/` 目录。

## 配色方案

| 用途 | HEX |
| --- | --- |
| 顶栏渐变 | `#E0F7FA → #FFFFFF` |
| 顶栏文字（浅色底） | `#3E6E63` |
| 主色（按钮 / 选中态） | `#5A8F7B` |
| 主色浅 / 深 | `#74A793` / `#467A68` |
| 强调色（TabBar 选中态 / “+”按钮） | `#FF8D6B` |
| 页面背景 | `#F7F9F8` |
| 卡片 / TabBar 背景 | `#FFFFFF` |
| 正文 / 次要 / 弱化文字 | `#2D3436` / `#636E72` / `#B2BEC3` |
| 分隔线 | `#EDF2F0` |
| 日历活跃日填充 | `#E6F4F0` |
| 收入 / 支出语义色 | `#36C2A0` / `#FF6B6B` |


## 主题系统

全局颜色统一由 CSS 变量（`--color-*`）驱动，`services/theme.js` 提供 4 套预设主题并持久化到本地存储，切换后实时生效、下次启动自动应用：

| 主题 | 主色 | 强调色 | 说明 |
| --- | --- | --- | --- |
| 经典绿 | `#2F7D5F` | `#C05621` | 薄荷绿 · 默认主题 |
| 静谧蓝 | `#2F6FB0` | `#B3541E` | 湖蓝 · 沉静专注 |
| 樱花粉 | `#9E4A72` | `#A23A5E` | 樱粉 · 温柔治愈 |
| 深空灰 | `#3E6BC4` | `#B85C1D` | 深灰 · 夜间友好 |

所有主题的文字/背景/按钮对比度均通过 WCAG AA（≥ 4.5:1）校验；切换主题后首页/账单/分析/我的四页顶部渐变、主按钮、Tab 高亮、开关与底部导航选中色全部联动，选择持久化，冷启动自动恢复。

## 数据模型

账单存储于本地（uni 存储，App 端为原生本地存储），字段：

```js
{
  id: 'string',          // 唯一标识
  type: 1 | 2,           // 1 支出 / 2 收入
  category: '餐饮',       // 分类名称
  count: 123.45,         // 金额
  time: 1780000000000,   // 记账时间戳
  note: '备注',
  tags: ['日常', '通勤']  // 标签
}
```

内置分类参考 OneAccount：支出 16 类（餐饮/出行/购物/日用/娱乐/零食/水果/烟酒/水电/宠物/就医/运动/衣物/教育/美妆/育婴），收入 11 类（薪资/奖金/补助/报销/红包/理财/股票/基金/兼职/礼物/退款）。分类、标签、预算、提醒分别独立持久化。

## 在 HBuilder X 中运行

本项目是标准 HBuilder X uni-app（Vue 3）工程：`manifest.json`、`pages.json`、`main.js`、`App.vue`、`index.html` 全部位于根目录，且 `manifest.json` 已声明 `"vueVersion": "3"`。

1. 打开 HBuilder X，选择「文件 → 导入 → 从本地目录导入」，选择本项目根目录。
   - 如果之前已导入过旧结构（根目录曾存在 `package.json`），请先移除旧项目，重新导入；或对项目点右键 →「重新识别项目类型」，确认项目图标为 uni-app 方形图标。
2. 双击 `manifest.json` 打开可视化配置界面，HBuilder X 会自动生成 `appid`（当前留空，首次打开自动补全）。
3. 真机调试：连接 Android 设备（开启 USB 调试），点击工具栏「运行 → 运行到手机或模拟器」；也可先「运行 → 运行到浏览器」快速验证功能。
4. 打包：`发行 → 原生 App-云打包`，勾选 **Push 推送** 模块（提醒功能使用 `plus.push.createMessage`，云打包时需勾选）。
5. `manifest.json` 中已声明 Android 所需权限：网络、震动、通知（POST_NOTIFICATIONS）。

> 若之前在本目录用 CLI 构建过，根目录残留的 `node_modules`、`.pnpm-store` 属于构建产物（已加入 `.gitignore`）。建议关闭 HBuilder X 后删除这两个目录，保持标准工程结构：
>
> ```powershell
> Remove-Item -Recurse -Force node_modules, .pnpm-store
> ```

> 提醒说明：App 前台时保存提醒会立即发送一条本地通知用于验证；后台定时推送需要配合 uni-push 或原生定时插件，详见 `pages/reminder/reminder.vue` 中的注释。

## CLI 构建与自动化测试（可选）

CLI 构建所需文件（`package.json`、`vite.config.js`、`pnpm-workspace.yaml`、`pnpm-lock.yaml`）归档在 `cli/` 目录，避免影响 HBuilder X 的项目类型识别。需要命令行构建时，先复制到根目录：

```powershell
# 1. 复制构建配置到项目根目录（index.html 已在根目录，无需复制）
Copy-Item cli\package.json, cli\vite.config.js, cli\pnpm-workspace.yaml, cli\pnpm-lock.yaml -Destination .

# 2. 安装依赖并构建（需要 Node.js 18+，建议 pnpm）
pnpm install
$env:UNI_INPUT_DIR = $PWD
pnpm build:h5
pnpm build:app

# 3. 构建完成后删除临时文件，并在 HBuilder X 中右键项目 →「重新识别项目类型」
Remove-Item package.json, vite.config.js, pnpm-workspace.yaml, pnpm-lock.yaml
```

未复制时也可以直接以 `cli/` 为工作目录运行：

```bash
cd cli
pnpm install
UNI_INPUT_DIR=.. pnpm build:h5
```

Windows PowerShell 下设置 `UNI_INPUT_DIR` 环境变量即可（本项目为 HBuilder X 根目录结构，CLI 默认寻找 `src/`，因此需要显式指定输入目录为项目根）。

## QA 结果

`scripts/qa.mjs` 使用 Playwright（Edge/Chrome 内核）对 390×844 移动视口与 1280×800 桌面视口执行 144 项断言，覆盖：开屏动画（1s 展示、标语、自动消失）→ 空状态 → 载入示例数据 → 首页浅色渐变与隐私模式 → 本月账单（仅当月、同日仅首条显示绝对日期、时间列在左侧、无相对时间、空状态）→ 环形图跳转预算 → 原生 midButton 居中与跳转 → 全量历史无限滚动（30→60→全部）→ 月度小结置顶与明细金额一致性 → 顶部筛选/日历按钮常驻可见且自动切月/日历填充色 10% 透明度/收支兼有日期双数字 → 智能洞察按支出/收入维度独立刷新（含无数据空状态）与底部日期选择器 → 头像选择（预设头像、相册上传、圆形/方形裁剪、铺满圆形区域、本地存储、恢复默认）→ 主题设置（4 套主题、实时变量、持久化、四页顶部渐变一致、主题名称联动、TabBar 选中色/开关联动、累计卡片主题色）→ 清空账单与预算（保留分类/标签/提醒）→ 快速记账 → 详情编辑与删除 → 预算/分类/标签/提醒设置 → 提醒时间选择器不溢出 → 320/430 视口图标完整性，144 项全部通过，控制台零错误。截图见 `docs/screenshots/`。

## 参考与致谢

- 数据模型与分类体系参考：[LouBii/OneAccount](https://github.com/LouBii/OneAccount)（本项目的图标为代码生成的原创图形，未直接使用其资源）
- 技术栈：[uni-app](https://uniapp.dcloud.net.cn/) + Vue 3 + Vite