Jafeng
bc998c35c7
- 建立基础的 Git 仓库结构 - 配置适用于 Vue.js + Node.js + Android 的 .gitignore - 添加项目说明文档和开发计划 - 包含 Kiro IDE 规格文档和项目计划
7.2 KiB
个人账单 App 项目规划书 这是一个为你量身定制的安卓账单 App 项目规划，旨在将你的想法转化为一个具体、可执行的开发蓝图。
- 项目概述与技术栈解析 我们将构建一个现代化的个人账单应用，核心技术栈为 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，比如我们需要的“读取通知”功能。
- 功能需求详解 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/🆔 更新指定账单
DELETE /api/bills/🆔 删除指定账单
GET /api/sync: 一个用于检查数据版本和同步的端点。
同步逻辑:
本地数据库 (如 SQLite) 作为缓存，保证离线可用。
当网络连接可用时，将本地未同步的更改（新增、修改、删除）推送到服务器。
从服务器拉取最新的数据更新到本地。
d. 增值功能：趋势分析 消费构成: 使用 饼图 或 环形图 展示指定时间段内（如月度、年度）各个消费分类的占比。
消费趋势: 使用 折线图 或 柱状图 展示每天或每月的支出/收入变化。
数据看板: 在一个专门的“分析”页面，展示多个维度的图表和关键数据（如月度总支出、总收入、结余等）。
- 设计风格与 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): 一个橙色的圆形按钮，右下角固定。按钮上有一个白色的 + 号，点击时可以有一个流畅的放大和旋转动画。
账单卡片: 左侧是一个圆形的分类图标，中间是商户名和备注，右侧是支出金额（用深灰色或主题橙色表示）和日期。
- 简易开发路线图 第一阶段：后端先行
[ ] 设计数据库模型 (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 修复。
希望这份详细的规划能给你提供一个清晰的起点和方向！祝你开发顺利！