11 KiB
11 KiB
项目分析报告
📋 项目概述
当前工作目录包含两个主要项目:
- yudao-ui-admin-vue3 - PC端管理后台系统
- yudao-ui-admin-uniapp - 移动端应用(位于 yudao-ui-admin-vue3 目录下)
1️⃣ yudao-ui-admin-vue3(PC端管理后台)
项目基本信息
- 项目名称: yudao-ui-admin-vue3
- 版本: 2.2.0-snapshot
- 描述: 基于 Vue3、Vite4、Element Plus、TypeScript 的管理后台系统
- 作者: xingyu
- 开源协议: MIT
技术栈
| 框架/工具 | 说明 | 版本 |
|---|---|---|
| Vue | Vue 框架 | 3.4.21 |
| Vite | 开发与构建工具 | 5.1.4 |
| Element Plus | UI 组件库 | 2.8.0 |
| TypeScript | JavaScript 的超集 | 5.3.3 |
| Pinia | Vue 状态管理库 | 2.1.7 |
| vue-router | Vue 路由 | 4.3.0 |
| UnoCSS | 原子 CSS 引擎 | 0.58.5 |
| vue-i18n | 国际化 | 9.10.2 |
| axios | HTTP 客户端 | 1.6.8 |
项目结构
yudao-ui-admin-vue3/
├── src/
│ ├── api/ # API 接口定义
│ │ ├── car/ # 车辆相关(续保订单等)
│ │ ├── tire/ # 轮胎相关
│ │ ├── system/ # 系统管理
│ │ ├── infra/ # 基础设施
│ │ ├── bpm/ # 工作流程
│ │ ├── erp/ # ERP 系统
│ │ ├── crm/ # CRM 系统
│ │ ├── mall/ # 商城系统
│ │ └── ...
│ ├── views/ # 页面视图
│ │ ├── car/ # 车辆管理(包含续保订单)
│ │ ├── tire/ # 轮胎管理
│ │ └── ...
│ ├── components/ # 公共组件
│ ├── store/ # 状态管理
│ ├── router/ # 路由配置
│ ├── utils/ # 工具函数
│ └── config/ # 配置文件
├── package.json
├── vite.config.ts
└── tsconfig.json
核心功能模块
1. 系统功能
- 用户管理、角色管理、菜单管理
- 部门管理、岗位管理
- 租户管理(SaaS 多租户)
- 字典管理、通知公告
- 操作日志、登录日志
2. 车辆续保订单模块(业务相关)
- API:
src/api/car/renewalorder/index.ts - 页面:
src/views/car/renewalorder/index.vue- 列表页面RenewalOrderForm.vue- 表单页面dashboard.vue- 仪表盘
续保订单数据结构:
interface RenewalOrderVO {
// 车辆信息
carBrand: string // 汽车品牌
carModel: string // 车型
licensePlate: string // 车牌号
factoryModel: string // 厂牌型号
vin: string // 车架号
engineNo: string // 发动机号
invoiceDate: Date // 发票日期
invoiceAmount: number // 发票金额
purchaseMileage: number // 购买时公里数
invoiceUrl: string // 发票图片地址
// 购买方信息
serviceBuyer: string // 服务购买方
carBuyer: string // 车辆购买方
certType: string // 证件类型
certNo: string // 证件号码
mobile: string // 联系电话
memberEmail: string // 会员邮箱
contactAddress: string // 联系地址
storeId: number // 门店ID
storeName?: string // 门店名称
// 产品信息
productId: number // 续保产品ID
serviceProduct: string // 服务产品
productValidity: string // 产品时效
originalWarrantyYears: string // 原厂质保时长
originalWarrantyMileage: string // 原厂质保里程
productFee: number // 产品费用
// 其他信息
settlementMethod: string // 结算方式
inputUser: string // 录单人
remark: string // 备注
contractRemark: string // 合同备注
}
3. 其他业务模块
- 工作流程(BPM)
- 支付系统
- 基础设施(代码生成、文件服务、定时任务等)
- 数据报表
- 微信公众号
- 商城系统
- ERP 系统
- CRM 系统
开发命令
# 安装依赖
pnpm i
# 开发环境
pnpm dev
# 构建
pnpm build:prod
# 代码检查
pnpm lint:eslint
pnpm lint:format
pnpm lint:style
2️⃣ yudao-ui-admin-uniapp(移动端应用)
项目基本信息
- 项目名称: unibest(基于 unibest 框架)
- 版本: 4.1.0
- yudao 版本: 2025.12.0-snapshot
- 描述: 芋道管理后台的移动端
- 框架: 基于 unibest - 最好的 uniapp 开发模板
- 位置:
yudao-ui-admin-vue3/yudao-ui-admin-uniapp/
技术栈
| 框架/工具 | 说明 | 版本 |
|---|---|---|
| Vue | Vue 框架 | 3.4.21 |
| uni-app | 跨平台应用开发框架 | 3.0.x |
| TypeScript | JavaScript 的超集 | 5.8.x |
| Vite | 构建工具 | 5.2.8 |
| Pinia | Vue 状态管理库 | 2.0.36 |
| UnoCSS | 原子化 CSS 引擎 | 66.x |
| wot-design-uni | UI 组件库 | 1.13.x |
| z-paging | 分页组件 | 2.8.7 |
| vue-i18n | 国际化 | 9.x |
平台兼容性
| H5 | iOS | Android | 微信小程序 | 支付宝小程序 | 字节小程序 | 百度小程序 | 钉钉小程序 | 快手小程序 | QQ 小程序 |
|---|---|---|---|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
项目结构
yudao-ui-admin-uniapp/
├── src/
│ ├── api/ # API 接口定义
│ │ ├── bpm/ # 工作流程
│ │ ├── infra/ # 基础设施
│ │ └── system/ # 系统管理
│ ├── pages/ # 主包页面
│ │ ├── index/ # 首页/工作台
│ │ ├── bpm/ # 工作流程
│ │ ├── user/ # 用户相关
│ │ └── ...
│ ├── pages-core/ # 核心页面(分包)
│ │ ├── auth/ # 登录/注册
│ │ ├── error/ # 错误页
│ │ └── user/ # 用户中心
│ ├── pages-system/ # 系统管理(分包)
│ │ ├── user/ # 用户管理
│ │ ├── dept/ # 部门管理
│ │ ├── role/ # 角色管理
│ │ └── ...
│ ├── pages-infra/ # 基础设施(分包)
│ │ ├── file/ # 文件管理
│ │ ├── job/ # 定时任务
│ │ └── ...
│ ├── pages-bpm/ # 工作流程(分包)
│ │ ├── task/ # 任务管理
│ │ ├── processInstance/ # 流程实例
│ │ └── ...
│ ├── components/ # 公共组件
│ ├── store/ # 状态管理
│ ├── http/ # HTTP 请求封装
│ ├── hooks/ # 自定义 Hooks
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由配置
│ ├── utils/ # 工具函数
│ └── tabbar/ # TabBar 配置
├── package.json
├── vite.config.ts
└── pages.config.ts
项目特性
- 约定式路由 - 基于文件系统自动生成路由
- Layout 布局 - 内置多种布局方案
- 请求封装 - 基于 uni.request 封装,支持拦截器
- 登录拦截 - 完善的登录态管理与页面拦截
- UnoCSS - 原子化 CSS,按需生成
- i18n 多语言 - 内置国际化方案
- TypeScript - 全面的 TypeScript 支持
- 多端适配 - 一套代码,多端运行
开发命令
# 进入项目目录
cd yudao-ui-admin-uniapp
# 安装依赖
pnpm install
# 开发环境(H5)
pnpm dev
# 开发环境(微信小程序)
pnpm dev:mp
# 构建(H5)
pnpm build
# 构建(微信小程序)
pnpm build:mp
🔗 项目关系
1. 项目位置关系
蓝智科技/蓝鲸-轮胎/
├── yudao-ui-admin-vue3/ # PC端管理后台(主项目)
│ ├── src/ # PC端源代码
│ └── yudao-ui-admin-uniapp/ # 移动端应用(子项目)
│ └── src/ # 移动端源代码
├── ruoyi-vue-pro/ # 后端项目(Spring Boot)
└── tire-app-doc/ # 文档
2. 项目关系说明
- yudao-ui-admin-vue3 和 yudao-ui-admin-uniapp 都是前端项目
- 它们共享同一个后端 API(ruoyi-vue-pro)
- yudao-ui-admin-vue3 是 PC 端管理后台
- yudao-ui-admin-uniapp 是移动端应用(小程序/H5/App)
- 两个项目在业务功能上是对应的,但 UI 和交互方式不同
3. 业务模块对应关系
| PC端(yudao-ui-admin-vue3) | 移动端(yudao-ui-admin-uniapp) |
|---|---|
| src/views/car/renewalorder/ | (移动端可能没有对应的续保订单模块) |
| src/views/system/ | src/pages-system/ |
| src/views/infra/ | src/pages-infra/ |
| src/views/bpm/ | src/pages-bpm/ |
📝 业务模块分析
车辆续保订单模块(PC端)
位置: src/views/car/renewalorder/
功能特性:
- ✅ 列表查询(支持分页、筛选)
- ✅ 表单录入(包含 4 个选项卡):
- 车辆信息
- 购买方信息
- 产品信息
- 其他信息
- ✅ 文件上传(发票图片)
- ✅ 数据导出
- ✅ 编辑/删除功能
相关 API:
src/api/car/renewalorder/index.ts- 续保订单 APIsrc/api/car/renewalproduct/index.ts- 续保产品 APIsrc/api/tire/store/index.ts- 门店 API
🎯 总结与建议
当前状态
-
PC端项目(yudao-ui-admin-vue3)
- ✅ 功能完善,包含完整的业务模块
- ✅ 续保订单模块已实现
- ✅ 技术栈现代化(Vue3 + TypeScript + Vite)
-
移动端项目(yudao-ui-admin-uniapp)
- ✅ 基于 unibest 框架,架构完善
- ✅ 支持多端运行
- ⚠️ 可能缺少部分业务模块(如续保订单)
建议
-
如果需要移动端也支持续保订单:
- 可以在
yudao-ui-admin-uniapp/src/pages/下创建对应的页面 - 参考 PC 端的实现逻辑
- 适配移动端的 UI 组件(使用 wot-design-uni)
- 可以在
-
项目维护:
- 两个项目共享 API,建议统一 API 接口规范
- 业务逻辑可以在后端统一处理
- 前端主要关注 UI 和交互
-
开发流程:
- PC 端和移动端可以并行开发
- 建议先完善 PC 端功能,再移植到移动端
- 或者根据实际业务需求决定开发优先级
📚 相关文档
- 芋道框架文档: https://doc.iocoder.cn
- unibest 文档: https://unibest.tech
- Element Plus: https://element-plus.org
- uni-app: https://uniapp.dcloud.io
- wot-design-uni: https://wot-design-uni.pages.dev