112 lines
3.0 KiB
Markdown
112 lines
3.0 KiB
Markdown
# SMS Pro Admin UI - 项目说明
|
|
|
|
## 项目概述
|
|
|
|
这是 **SMS Pro (短信平台)** 的前端管理界面，用于管理和监控短信服务的各个方面。
|
|
|
|
## 技术栈
|
|
|
|
- **框架**: Vue 3.5.12
|
|
- **构建工具**: Vite 5.1.4
|
|
- **UI 组件库**: Element Plus 2.9.1
|
|
- **语言**: TypeScript 5.3.3
|
|
- **状态管理**: Pinia 2.1.7 (持久化: pinia-plugin-persistedstate)
|
|
- **路由**: Vue Router 4.4.5
|
|
- **包管理器**: pnpm (强制使用，版本 >= 8.6.0)
|
|
- **样式**: UnoCSS + SCSS
|
|
- **国际化**: Vue I18n 9.10.2
|
|
|
|
## 核心功能
|
|
|
|
这是一个企业级短信平台管理后台，主要功能包括：
|
|
|
|
1. **短信渠道管理** - 管理多个短信服务提供商渠道
|
|
2. **短信发送记录** - 查询和管理短信发送历史
|
|
3. **网关管理** - 处理短信请求的接收入口
|
|
4. **工作台** - 短信发送任务的实际执行
|
|
5. **租户管理** - 多租户支持
|
|
6. **系统管理** - 用户、角色、权限等系统配置
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
src/
|
|
├── api/ # API 接口定义
|
|
├── assets/ # 静态资源
|
|
├── components/ # 公共组件
|
|
├── config/ # 配置文件
|
|
├── directives/ # 自定义指令
|
|
├── hooks/ # 组合式函数
|
|
├── layout/ # 布局组件
|
|
├── locales/ # 国际化文件
|
|
├── plugins/ # 插件配置
|
|
├── router/ # 路由配置
|
|
├── store/ # Pinia 状态管理
|
|
├── styles/ # 全局样式
|
|
├── types/ # TypeScript 类型定义
|
|
├── utils/ # 工具函数
|
|
└── views/ # 页面组件
|
|
```
|
|
|
|
## 开发环境要求
|
|
|
|
- Node.js >= 16.18.0
|
|
- pnpm >= 8.6.0
|
|
|
|
## 常用命令
|
|
|
|
```bash
|
|
# 安装依赖
|
|
pnpm install
|
|
|
|
# 本地开发
|
|
npm run dev
|
|
|
|
# 构建
|
|
npm run build:local # 本地环境
|
|
npm run build:dev # 开发环境
|
|
npm run build:test # 测试环境
|
|
npm run build:stage # 预发布环境
|
|
npm run build:prod # 生产环境
|
|
|
|
# 代码检查
|
|
npm run lint:eslint
|
|
npm run lint:format
|
|
npm run lint:style
|
|
|
|
# 类型检查
|
|
npm run ts:check
|
|
```
|
|
|
|
## 后端服务
|
|
|
|
前端对应的后端项目位于:
|
|
- 路径: `/Users/zhangyong/workspace/java/platform-sms-pro`
|
|
- 技术栈: Spring Boot 2.7.18 + Java 8
|
|
- 主要模块:
|
|
- `marketing-admin-server` - 主服务
|
|
- `marketing-module-system` - 系统管理
|
|
- `marketing-module-channel` - 短信渠道
|
|
- `marketing-module-record` - 发送记录
|
|
- `marketing-module-gateway` - 网关
|
|
- `marketing-module-worker` - 消息处理
|
|
- `marketing-module-tenant` - 租户管理
|
|
|
|
## 重要提示
|
|
|
|
- 项目使用 `env.local`、`dev`、`test`、`stage`、`prod` 等不同环境配置
|
|
- 组件自动导入: 使用 `unplugin-vue-components` 和 `unplugin-auto-import`
|
|
- 图标使用: UnoCSS 和 Iconify
|
|
- 样式采用 UnoCSS 原子化 CSS 框架
|
|
|
|
## 特殊功能
|
|
|
|
- BPMN 流程图编辑 (bpmn-js)
|
|
- 富文本编辑器 (wangeditor)
|
|
- 图片裁剪 (cropperjs)
|
|
- 语音录制 (benz-amr-recorder)
|
|
- 代码高亮 (highlight.js)
|
|
- 图表展示 (echarts)
|
|
- 二维码生成 (qrcode)
|
|
- 视频播放 (video.js)
|