Penny Lens PC端技术架构详解

PC端 技术架构 Nuxt 4 Vue 3 TypeScript Ant Design Vue UnoCSS MongoDB 复式记账
2025年1月27日
4 分钟阅读
作者：Penny Lens Team

Penny Lens PC端技术架构

📋 项目介绍

Penny Lens PC 是一个基于复式记账法的家庭财务管理系统，旨在帮助用户更好地管理个人和家庭财务，通过科学的记账方法和智能分析，实现财务目标。

🎯 项目目标

  • 科学记账: 基于复式记账法，确保账目平衡和准确性
  • 智能分析: 提供财务分析和趋势预测
  • 目标管理: 支持储蓄目标和预算规划
  • 用户体验: 简洁直观的界面设计

🏗️ 技术架构

前端技术栈

技术版本用途
Nuxt4.x全栈框架
Vue3.x前端框架
TypeScript5.x类型安全
Ant Design Vue4.xUI 组件库
UnoCSS0.x原子化 CSS
Pinia2.x状态管理
Iconify3.x图标库
VueUse10.x工具库

后端技术栈

技术版本用途
Node.js18+运行时环境
MongoDB7.x数据库
七牛云 OSS-文件存储
JWT-身份认证

🎨 设计理念

视觉设计

  • 现代简约: 简洁的界面设计，减少视觉干扰
  • 数据可视化: 直观的图表和统计展示
  • 响应式设计: 适配各种设备尺寸
  • 深色模式: 支持明暗主题切换

交互设计

  • 操作便捷: 减少用户操作步骤
  • 反馈及时: 实时的操作反馈
  • 错误处理: 友好的错误提示
  • 键盘支持: 完整的键盘导航

🚀 核心功能

1. 用户认证

  • 多种登录方式: 密码登录、二维码登录
  • 安全机制: JWT Token、2FA 双因子认证
  • 权限管理: 基于角色的权限控制

2. 资产管理

  • 多账户支持: 现金、银行卡、投资账户等
  • 资产配置: 灵活的资产分类和配置
  • 余额管理: 实时余额更新和同步

3. 记账管理

  • 复式记账: 基于借贷平衡的记账方法
  • 分类管理: 灵活的收入支出分类
  • 批量操作: 支持批量导入和编辑
  • 数据验证: 自动的数据校验和平衡检查

4. 预算管理

  • 预算规划: 月度、年度预算制定
  • 执行监控: 实时预算执行情况
  • 预警机制: 预算超支提醒
  • 分析报告: 预算执行分析

5. 储蓄游戏

  • 目标设定: 灵活的储蓄目标设置
  • 进度跟踪: 可视化的进度展示
  • 激励机制: 成就系统和奖励机制
  • 社交功能: 好友挑战和分享

6. 文件管理

  • 文件上传: 支持多种文件格式
  • 云存储: 七牛云 OSS 存储
  • 文件预览: 在线文件预览
  • 权限控制: 文件访问权限管理

📊 数据模型

核心实体

erDiagram
    User ||--o{ Asset : owns
    User ||--o{ Transaction : creates
    User ||--o{ Budget : plans
    User ||--o{ SavingsGoal : sets
    
    Asset ||--o{ Transaction : involved
    Category ||--o{ Transaction : categorizes
    Budget ||--o{ BudgetItem : contains
    SavingsGoal ||--o{ SavingsRecord : tracks

数据关系

  • 用户: 系统的核心实体，拥有所有财务数据
  • 资产: 用户的财务账户，包括现金、银行卡等
  • 交易: 财务记录，连接资产和分类
  • 分类: 收入和支出的分类体系
  • 预算: 财务规划，包含多个预算项
  • 储蓄目标: 用户的储蓄计划和进度

🔧 开发规范

代码规范

  • TypeScript: 严格的类型检查
  • ESLint: 代码质量检查
  • Prettier: 代码格式化
  • Git Hooks: 提交前检查

组件规范

  • 单一职责: 每个组件职责明确
  • 可复用性: 高度可复用的组件设计
  • 类型安全: 完整的 TypeScript 类型定义
  • 文档完整: 详细的组件文档

测试规范

  • 单元测试: 组件和工具函数测试
  • 集成测试: API 接口测试
  • 端到端测试: 用户流程测试
  • 性能测试: 关键功能性能测试

🚀 部署架构

开发环境

  • 本地开发: Nuxt 开发服务器
  • 热重载: 实时代码更新
  • 调试工具: Vue DevTools、浏览器调试

生产环境

  • 静态部署: Nuxt 静态生成
  • CDN 加速: 静态资源 CDN 分发
  • 容器化: Docker 容器部署
  • 负载均衡: 多实例负载均衡

📈 性能指标

前端性能

  • 首屏加载: < 2s
  • 交互响应: < 100ms
  • 包体积: < 1MB (gzipped)
  • Lighthouse 评分: > 90

后端性能

  • API 响应: < 200ms
  • 数据库查询: < 50ms
  • 文件上传: < 5s (10MB)
  • 并发支持: > 1000 用户

🔒 安全措施

前端安全

  • XSS 防护: 输入输出过滤
  • CSRF 防护: Token 验证
  • 内容安全: CSP 策略
  • 依赖安全: 定期更新依赖

后端安全

  • 身份认证: JWT Token 机制
  • 权限控制: 基于角色的访问控制
  • 数据加密: 敏感数据加密存储
  • API 安全: 接口限流和验证

📱 浏览器支持

浏览器版本支持状态
Chrome90+✅ 完全支持
Firefox88+✅ 完全支持
Safari14+✅ 完全支持
Edge90+✅ 完全支持
IE-❌ 不支持

📊 项目统计

  • 代码行数: ~50,000 行
  • 组件数量: ~100 个
  • API 接口: ~50 个
  • 测试覆盖率: > 80%
  • 文档页面: ~20 个

🎯 未来规划

短期目标 (3个月)

  • 完善核心功能
  • 优化用户体验
  • 提升性能指标
  • 完善测试覆盖

中期目标 (6个月)

  • 移动端适配
  • 多语言支持
  • 高级分析功能
  • 第三方集成

长期目标 (1年)

  • AI 智能分析
  • 区块链集成
  • 企业版功能
  • 国际化部署

最后更新: 2025-01-27
文档版本: v2.0.0