通过TRAE SOLO设计了一款极简的记账APP——简记，核心一个字“简”

SOLO挑战赛专区
1

BriefNote：极简智能记账应用开发分享

项目背景

作为一名开发者，我一直希望有一款既简洁又智能的记账应用。市面上的记账软件要么功能过于复杂，要么缺乏智能特性，于是我决定自己开发一款。

项目目标：打造一款极简风格、AI赋能的个人财务管理工具

开发周期：3天

技术栈：前端 uni-app + 后端 FastAPI + AI 集成

核心功能实现

1. 极简界面设计

设计理念：采用黑色核心色 (#161616) 和奢侈金 (#e5c46e) 作为主色调，遵循无渐变设计原则

技术实现：

  • 使用 uni-app 框架构建跨平台应用

  • 采用 Vue 3 Composition API 管理状态

  • 响应式布局适配多端设备

  • 自定义组件封装，如 simple-toast 和 tip-dialog

代码结构：


BriefNoteApp/

├── pages/ # 页面文件

│ ├── index/ # 首页

│ ├── record/ # 记账页面

│ ├── profile/ # 个人中心

│ └── ai/ # AI智能助手

├── components/ # 自定义组件

├── api/ # API调用

└── utils/ # 工具函数

2. 智能记账系统

功能特点：

  • 快速记账：一键进入记账页面，支持多种支付方式

  • 智能分类：自动识别消费类别

  • 时间轴展示：按日期和时间段分组

  • 多维度筛选：支持日期、金额、支付方式等条件

技术实现：

  • 前端表单验证和数据处理

  • 后端 RESTful API 设计

  • 数据库事务处理，确保数据一致性

  • Redis 缓存优化查询性能

3. AI 智能助手

核心特性：

  • 智能对话：自然语言交互解答记账问题

  • 自动记账：通过语音或文字描述生成记账记录

  • 账单分析：基于历史数据提供消费分析

  • 额度管理：新用户 5 次免费 AI 对话机会

技术实现：

  • WebSocket 实时通信，实现 AI 回复流式展示

  • 多模型集成，支持不同场景的 AI 能力

  • 自定义消息拦截器，识别用户意图

  • 额度管理系统，控制 AI 调用频率

额度管理实现：


# AI额度检查逻辑

remaining_credit = ai_credit_repository.get_remaining_credit(user_id)

if remaining_credit <= 0:

return {"error": "当前无额度，请联系管理员"}

# 成功调用后扣减额度

ai_credit_repository.deduct_credit(user_id, 1)

4. 技术架构

前端：

  • uni-app + Vue 3

  • 组件化开发

  • 状态管理

  • API 封装

后端：

  • FastAPI 异步框架

  • MySQL 数据库

  • Redis 缓存

  • JWT 认证

AI 集成：

  • 多种 AI 模型支持

  • WebSocket 实时通信

  • 消息分类和处理

云服务：

  • 阿里云 OSS 存储

  • 云服务器部署

技术挑战与解决方案

1. 性能优化

挑战：AI 回复延迟高

解决方案：

  • 使用 WebSocket 实现流式响应

  • 优化 AI 模型调用参数

  • 实现请求缓存机制

2. 数据安全

挑战：用户数据保护

解决方案：

  • JWT 认证机制

  • HTTPS 加密传输

  • 环境变量管理敏感信息

  • 输入验证和防注入

3. 多端适配

挑战：不同设备显示差异

解决方案：

  • 响应式布局设计

  • 统一的组件库

  • 设备检测和适配

部署与运维

本地开发


# 后端启动

cd BriefNotePython

source .venv/bin/activate

python -m uvicorn main:app --host 0.0.0.0 --port 12000 --reload

# 前端开发

cd BriefNoteApp

npm run dev:mp-weixin

生产部署


# 环境配置

export APP_ENV=prod

# 启动服务

python -m uvicorn main:app --host 0.0.0.0 --port 12000 --workers 4

# 使用 systemd 管理

systemctl enable briefnote.service

systemctl start briefnote.service

项目亮点

  1. 极简设计：专注核心功能，减少视觉干扰

  2. AI 赋能：智能对话、自动记账、账单分析

  3. 技术创新：WebSocket 实时通信、多模型集成

  4. 安全可靠：JWT 认证、HTTPS 加密

  5. 易于扩展：模块化设计，便于添加新功能

未来规划

  • 增强 AI 助手能力，提供更智能的财务管理建议

  • 优化数据可视化，提供更直观的图表展示

  • 支持多语言界面，拓展国际用户

  • 对接更多金融服务，构建智能理财生态

  • 开发桌面端应用，提供全平台覆盖

经验分享

  1. 技术选型：选择适合项目需求的技术栈，权衡性能和开发效率

  2. 架构设计：模块化设计，便于维护和扩展

  3. 用户体验：从用户角度出发，简化操作流程

  4. 安全考虑：重视数据安全，采取多层防护措施

  5. 持续优化：定期性能测试和代码审查

结语

BriefNote 项目是我对极简设计和 AI 技术结合的一次尝试。通过这个项目，我不仅提升了全栈开发能力，也对用户体验设计有了更深入的理解。

希望这个项目能为需要简洁智能记账工具的用户提供帮助，也希望能与更多开发者交流技术心得。

开源地址：https://github.com/yourusername/briefnote

在线演示：https://demo.briefnote.com

欢迎大家体验和提出宝贵建议！