项目概述

项目名称: 雪人停车 (xueren-parking)
项目版本: 1.0.3
项目类型: 智慧停车管理系统
开发框架: 微信小程序 + Spring Boot 后端 + Vue3

技术架构

前端技术栈

• 开发框架: uni-app (支持微信小程序)

• UI组件库:

• • ThorUI-uni (thorui-uni v3.0.0)

• • ColorUI

• • uView UI

• 依赖管理:

• • dayjs (v1.11.13) - 日期时间处理

• • thorui-uni (v3.0.0) - UI组件库

• 开发工具: HBuilderX

后端技术栈

• 核心框架: Spring Boot 2.5.5

• 数据库: MySQL

• ORM框架: MyBatis-Plus

• 外部集成:

• • 百度AI车牌识别

• • 微信小程序API

• • 第三方停车场系统

项目结构分析

前端目录结构

car-new-demo/
├── api/                    # API接口层
│   └── auth.js            # 认证相关接口
├── components/            # 组件库
│   ├── custom-tabbar.vue  # 自定义底部导航
│   ├── plate-recognition/ # 车牌识别组件
│   └── tuniao-ui/        # TuniaoUI组件库
├── pages/                 # 主要页面
│   ├── auth/             # 认证相关页面
│   ├── profile/          # 个人中心
│   ├── qrcode/           # 二维码功能
│   ├── reservation/      # 预约管理
│   ├── server/           # 服务页面
│   ├── simple/           # 简单页面
│   ├── site/             # 场地管理
│   ├── test/             # 测试页面
│   └── violation/        # 违规管理
├── pagesA/               # 子包A - 洗车服务
├── pagesB/               # 子包B - 管家功能
├── pagesC/               # 子包C - 其他功能
├── pagesD/               # 子包D - 预约相关
├── pagesE/               # 子包E - 扩展功能
├── static/               # 静态资源
├── store/                # 状态管理
├── utils/                # 工具类
│   ├── auth.js           # 认证工具
│   ├── dynamicTabBar.js  # 动态导航栏
│   ├── permission.js     # 权限管理
│   └── timeUtils.js      # 时间工具
├── App.vue               # 应用入口
├── main.js               # 主入口文件
├── pages.json            # 页面配置
├── manifest.json         # 应用配置
└── package.json          # 依赖配置

核心功能模块

1. 用户认证与权限管理

• 手机号授权登录: 微信小程序手机号快速登录

• 角色权限控制: 区分普通用户、管家、管理员等角色

• 权限验证: 动态权限检查和页面访问控制

2. 车牌识别系统

• AI车牌识别: 集成百度AI进行车牌自动识别

• 手动输入: 支持手动输入车牌号码

• 车牌验证: 车牌格式验证和重复检查

3. 预约管理系统

• 预约申请: 用户可申请停车位预约

• 预约审核: 管家/管理员审核预约申请

• 预约查询: 查询预约状态和历史记录

• 预约统计: 预约数据统计和分析

4. 访客管理系统

• 访客登记: 访客信息登记和管理

• 二维码生成: 为访客生成专用二维码

• 访客审核: 访客申请的审核流程

• 访客追踪: 访客进出记录追踪

5. 违规管理系统

• 违规记录: 记录和管理停车违规行为

• 违规统计: 违规数据统计和趋势分析

• 信用评分: 基于违规记录的信用评分系统

• 违规处理: 违规记录的处理和跟进

6. 微信集成功能

• 公众号关注: 引导用户关注微信公众号

• 消息推送: 通过微信推送重要通知

• 模板消息: 预约、违规等状态变更通知

• 小程序码: 生成小程序码用于快速访问

7. 数据统计与分析

• 实时统计: 实时停车数据统计

• 趋势分析: 停车趋势和违规趋势分析

• 图表展示: 使用qiun-data-charts进行数据可视化

• 报表生成: 各类数据报表生成

关键页面分析

违规管理页面 (violation.vue)

这是系统的核心页面之一，具有以下特点：

用户视图功能

• 信用分展示: 圆形进度条展示用户信用分

• 违规统计: 本月违规、累计违规、最近违规统计

• 趋势图表: 违规趋势的可视化分析

• 违规列表: 个人违规记录的详细列表

管家视图功能

• 智能搜索: 支持车牌号、业主姓名、手机号等多维度搜索

• 高风险预警: 高风险车辆的预警和管理

• 实时违规: 实时违规记录的处理和跟进

• 统计分析: 违规数据的统计和分析

技术特点

• 响应式设计: 根据用户角色动态显示不同界面

• 数据可视化: 使用图表库进行数据展示

• 交互优化: 支持展开/折叠、滑动操作等交互

• 实时更新: 实时数据更新和状态同步

开发特色

1. 模块化设计

• 采用分包加载，提高应用性能

• 组件化开发，提高代码复用性

• 工具类封装，便于维护和扩展

2. 用户体验优化

• 自定义导航栏，统一视觉风格

• 动态TabBar，根据权限显示不同功能

• 智能搜索，提供搜索建议和历史记录

• 紧凑布局，适配小屏幕设备

3. 数据管理

• Vuex状态管理，统一数据流

• 本地存储，缓存用户数据和设置

• 数据同步，确保数据一致性

4. 安全性考虑

• 权限验证，防止越权访问

• 数据加密，保护敏感信息

• 输入验证，防止恶意输入

部署配置

开发环境

• 支持本地开发调试

• 热更新，提高开发效率

• 模拟器测试，多端适配

生产环境

• SSL配置，确保数据传输安全

• 性能优化，提高应用响应速度

• 错误监控，及时发现和处理问题

项目优势

1. 技术先进: 采用最新的前端技术栈和AI技术

1. 功能完整: 涵盖停车管理的各个环节

1. 用户友好: 界面简洁，操作便捷

1. 扩展性强: 模块化设计，易于功能扩展

1. 安全可靠: 多层安全防护，数据安全有保障

后续优化建议

1. 性能优化:

• • 图片懒加载

• • 数据分页加载

• • 缓存策略优化

1. 功能增强:

• • 支付功能集成

• • 地图导航功能

• • 语音识别功能

1. 用户体验:

• • 暗黑模式支持

• • 多语言支持

• • 无障碍访问优化

1. 运维监控:

• • 性能监控

• • 错误日志收集

• • 用户行为分析

总结

这是一个功能完整、技术先进的智慧停车管理系统，通过微信小程序提供便捷的用户体验，结合AI技术实现智能化管理。系统架构合理，代码结构清晰，具有良好的可维护性和扩展性。项目充分考虑了不同用户角色的需求，提供了差异化的功能界面，是一个成熟的商业级应用。