Jafeng
bc998c35c7
- 建立基础的 Git 仓库结构 - 配置适用于 Vue.js + Node.js + Android 的 .gitignore - 添加项目说明文档和开发计划 - 包含 Kiro IDE 规格文档和项目计划
187 lines
7.2 KiB
Markdown
187 lines
7.2 KiB
Markdown
个人账单 App 项目规划书
|
||
这是一个为你量身定制的安卓账单 App 项目规划，旨在将你的想法转化为一个具体、可执行的开发蓝图。
|
||
|
||
1. 项目概述与技术栈解析
|
||
我们将构建一个现代化的个人账单应用，核心技术栈为 Vue.js (前端) + Node.js (后端)，并通过 Capacitor.js 框架将 Web 应用打包成一个功能完整的安卓 App。
|
||
|
||
前端 (Vue.js):
|
||
|
||
框架: Vue 3 (Composition API)
|
||
|
||
UI 库: 可以选用 Element Plus 或 Vant 进行快速开发，但为了实现你想要的独特设计风格，我们更推荐使用 Tailwind CSS，它可以提供原子级的 CSS 工具，让你自由地构建任何设计。
|
||
|
||
图表库: ECharts 或 Chart.js 用于数据可视化（趋势分析）。
|
||
|
||
后端 (Node.js):
|
||
|
||
框架: Express.js 或 Koa.js，用于构建 RESTful API。
|
||
|
||
数据库: MongoDB (配合 Mongoose) 或 PostgreSQL。MongoDB 的文档型结构非常适合存储账单这类灵活的数据。
|
||
|
||
认证: JWT (JSON Web Tokens)，即使是自用，也建议建立简单的用户认证体系，便于未来扩展。
|
||
|
||
移动端桥接 (Capacitor.js):
|
||
|
||
这是连接你的 Vue 应用和安卓原生功能的关键。它能让你用 JavaScript 调用原生 API，比如我们需要的“读取通知”功能。
|
||
|
||
2. 功能需求详解
|
||
a. 核心功能：读取 App 通知自动记账
|
||
这是项目的亮点，也是技术难点。实现思路如下：
|
||
|
||
安卓原生插件:
|
||
|
||
你需要使用 Android Studio 创建一个 Capacitor 插件。
|
||
|
||
这个插件的核心是实现安卓的 NotificationListenerService 服务。这是一个系统服务，当获取用户授权后，可以监听设备上所有新发出的通知。
|
||
|
||
数据捕获与筛选:
|
||
|
||
在服务中，当收到一个新的通知时，判断其来源 App (例如：支付宝、微信、银行 App)。
|
||
|
||
使用正则表达式或关键词（如“收款”、“支付”、“消费”、“-”、“+”）从通知的标题和内容中提取关键信息：金额、商户名、支付类型。
|
||
|
||
数据通信:
|
||
|
||
原生插件将解析好的数据（如 { "amount": 12.5, "type": "expense", "source": "支付宝" }）通过 Capacitor 的桥接机制，发送给你的 Vue 应用。
|
||
|
||
Vue 应用处理:
|
||
|
||
Vue 应用接收到数据后，可以弹出一个预填好信息的对话框，让用户确认或补充信息（如消费分类），然后保存到账单中。这比完全自动记录的体验更好，避免了误记。
|
||
|
||
b. 基础功能：账单增删改查 (CRUD)
|
||
这是 App 的基本盘，UI/UX 设计至关重要。
|
||
|
||
主界面: 以卡片列表形式展示近期的账单流水，每张卡片清晰地显示 分类图标、名称、金额 和 日期。
|
||
|
||
添加/修改:
|
||
|
||
通过一个悬浮操作按钮 (FAB) 触发。
|
||
|
||
表单应包含：
|
||
|
||
金额输入: 显眼的数字键盘。
|
||
|
||
分类选择: 一组设计精美的图标（餐饮、交通、购物、娱乐等），支持自定义添加分类。
|
||
|
||
日期选择: 默认为当天，但可修改。
|
||
|
||
账户选择: （现金、支付宝、微信、银行卡）。
|
||
|
||
备注: 可选的文本输入框。
|
||
|
||
查询: 提供顶部的搜索栏，可以按备注、商户名进行模糊搜索，并提供按日期、分类、账户的筛选功能。
|
||
|
||
c. 核心功能：云同步
|
||
后端 API 需要设计的端点 (Endpoints) 如下：
|
||
|
||
POST /api/auth/register: 用户注册
|
||
|
||
POST /api/auth/login: 用户登录
|
||
|
||
POST /api/bills: 新增一条账单
|
||
|
||
GET /api/bills: 获取所有账单（支持分页和筛选）
|
||
|
||
PUT /api/bills/:id: 更新指定账单
|
||
|
||
DELETE /api/bills/:id: 删除指定账单
|
||
|
||
GET /api/sync: 一个用于检查数据版本和同步的端点。
|
||
|
||
同步逻辑:
|
||
|
||
本地数据库 (如 SQLite) 作为缓存，保证离线可用。
|
||
|
||
当网络连接可用时，将本地未同步的更改（新增、修改、删除）推送到服务器。
|
||
|
||
从服务器拉取最新的数据更新到本地。
|
||
|
||
d. 增值功能：趋势分析
|
||
消费构成: 使用 饼图 或 环形图 展示指定时间段内（如月度、年度）各个消费分类的占比。
|
||
|
||
消费趋势: 使用 折线图 或 柱状图 展示每天或每月的支出/收入变化。
|
||
|
||
数据看板: 在一个专门的“分析”页面，展示多个维度的图表和关键数据（如月度总支出、总收入、结余等）。
|
||
|
||
3. 设计风格与 UI/UX 构想
|
||
根据你的要求，我们来构思一种 “温暖现代主义” 风格，它融合了扁平化的简洁和拟物化的质感。
|
||
|
||
色彩方案:
|
||
|
||
背景色 (Base): #F5F5F4 (米灰色/暖灰色) - 提供一个柔和、不刺眼的画布。
|
||
|
||
主题色 (Primary): #F97316 (鲜活的橙色) - 用于按钮、图标、当前选中的状态等交互元素，引人注目。
|
||
|
||
辅助色 (Accent):
|
||
|
||
#3B82F6 (柔和的蓝色) - 可用于表示“收入”或积极信息。
|
||
|
||
#22C55E (清新的绿色) - 也可作为补充色，或用于成功提示。
|
||
|
||
文本色 (Text): #333333 (深灰色) - 保证最佳的可读性，而不是纯黑。
|
||
|
||
设计语言:
|
||
|
||
卡片 (Cards): 每个账单项都是一个卡片。使用大的圆角 (rounded-xl)，并添加非常微妙的、柔和的阴影 (shadow-sm)，让它看起来像是轻轻浮在背景之上。
|
||
|
||
拟物感 (Neumorphism Touch): 主要用在按钮和输入框上。可以给按钮添加一个同色系的内阴影和外阴影，模拟出轻微凹陷或凸起的效果，但要非常克制，避免过度设计。
|
||
|
||
图标 (Icons): 使用线条流畅、风格统一的图标库，如 Lucide 或 Heroicons。分类图标可以设计得更有趣、更多彩一些。
|
||
|
||
字体 (Typography): 选择一款现代且易读的无衬线字体，如 "Inter" 或 "Poppins"。通过字重 (Bold, Medium, Regular) 来区分信息的层级。
|
||
|
||
留白 (White Space): 充分利用留白，让界面看起来干净、不拥挤，引导用户的视线。
|
||
|
||
示例组件构想：
|
||
悬浮操作按钮 (FAB): 一个橙色的圆形按钮，右下角固定。按钮上有一个白色的 + 号，点击时可以有一个流畅的放大和旋转动画。
|
||
|
||
账单卡片: 左侧是一个圆形的分类图标，中间是商户名和备注，右侧是支出金额（用深灰色或主题橙色表示）和日期。
|
||
|
||
4. 简易开发路线图
|
||
第一阶段：后端先行
|
||
|
||
[ ] 设计数据库模型 (Schema)。
|
||
|
||
[ ] 初始化 Node.js + Express 项目。
|
||
|
||
[ ] 实现用户认证 API。
|
||
|
||
[ ] 实现账单的 CRUD API。
|
||
|
||
[ ] 使用 Postman 或 Insomnia 等工具测试所有 API。
|
||
|
||
第二阶段：Web 应用核心功能
|
||
|
||
[ ] 初始化 Vue 3 + Tailwind CSS 项目。
|
||
|
||
[ ] 搭建主要页面路由 (首页、分析页、设置页)。
|
||
|
||
[ ] 设计并实现账单列表和卡片组件。
|
||
|
||
[ ] 开发账单的添加、编辑、删除表单和逻辑。
|
||
|
||
[ ] 对接后端的 CRUD API，实现前后端数据交互。
|
||
|
||
第三阶段：安卓集成与原生功能
|
||
|
||
[ ] 将 Capacitor 添加到 Vue 项目中。
|
||
|
||
[ ] 构建并生成安卓项目。
|
||
|
||
[ ] 在 Android Studio 中，创建用于读取通知的 Capacitor 插件。
|
||
|
||
[ ] 编写原生 Java/Kotlin 代码实现 NotificationListenerService。
|
||
|
||
[ ] 在 Vue 中调用插件，并处理从原生端传来的数据。
|
||
|
||
第四阶段：完善与优化
|
||
|
||
[ ] 开发趋势分析页面，使用 ECharts 渲染图表。
|
||
|
||
[ ] 实现完整的云同步逻辑。
|
||
|
||
[ ] 优化 UI 细节和动画效果。
|
||
|
||
[ ] 进行全面的测试和 Bug 修复。
|
||
|
||
希望这份详细的规划能给你提供一个清晰的起点和方向！祝你开发顺利！ |