赵忠林
cd4b332827
- 统一clinic相关模块的row-key为id - 移除冗余的默认列配置-修正clinicDoctorApply模块的删除逻辑 - 清理未使用的导入和变量定义 - 调整.env.development中的API地址注释状态
🌐 WebSoftAdmin
基于 Vue 3 + Ant Design Vue 的企业级后台管理系统
📖 项目简介
WebSoftAdmin 是一个基于 Vue 3 + Ant Design Vue 构建的现代化企业级后台管理系统，采用最新的前端技术栈：
- 前端框架：Vue 3 + TypeScript + Vite
- UI 组件库：Ant Design Vue 3.x
- 富文本编辑器：TinyMCE（支持图片/视频上传、一键排版）
- 图表库：ECharts + G2
- 工具库：Lodash、Day.js、CryptoJS
项目演示
| 后台管理系统 | https://mp.websoft.top |
|---|---|
| 账号密码 | 立即注册 |
| 关注公众号 |  |
🛠️ 技术栈
核心技术
| 技术 | 版本 | 说明 |
|---|---|---|
| Vue | 3.x | 渐进式 JavaScript 框架 |
| TypeScript | 4.x | JavaScript 的超集 |
| Vite | 4.x | 下一代前端构建工具 |
| Ant Design Vue | 3.2.11 | 企业级 UI 设计语言 |
| EleAdmin Pro | 1.10.1 | 企业级组件库 |
功能组件
- TinyMCE - 富文本编辑器，支持图片/视频上传
- ECharts - 数据可视化图表库
- CropperJS - 图片裁剪组件
- ExcelJS - Excel 文件处理
- Ali OSS - 阿里云对象存储
📋 环境要求
基础环境
- 🟢 Node.js 16+
- 📦 npm 8+ / yarn 1.22+
- 🌐 现代浏览器（Chrome 63+、Firefox、Safari、Edge）
开发工具
- 推荐：VS Code / WebStorm
- 插件：Vetur / Volar（Vue 3 支持）
🚀 快速开始
1. 克隆项目
git clone https://github.com/websoft-top/mp-vue.git
cd mp-vue
2. 安装依赖
# 使用 npm
npm install
# 或使用 yarn
yarn install
3. 配置环境变量
# 复制环境变量示例文件
cp .env.example .env
# 编辑 .env 文件，填入您的配置信息
# 注意：请不要将 .env 文件提交到版本控制系统
4. 启动开发服务器
# 开发模式
npm run dev
# 或
yarn dev
访问 http://localhost:3000 即可看到管理后台。
5. 构建生产版本
# 生产构建
npm run build
# 预览构建结果
npm run serve
⚙️ 环境变量配置
项目使用环境变量来管理敏感信息和配置。请按照以下步骤配置：
必需配置
# API 配置
VITE_API_URL=https://your-api.com/api # 后端 API 地址
VITE_SERVER_API_URL=https://your-server.com/api # 服务端 API 地址
VITE_FILE_SERVER=https://your-file-server.com # 文件服务器地址
# 应用配置
VITE_APP_SECRET=your_app_secret # 应用密钥
VITE_TENANT_ID=your_tenant_id # 租户 ID
可选配置
# 高德地图 (如需使用地图功能)
VITE_MAP_KEY=your_map_key # 高德地图 Key
VITE_MAP_CODE=your_map_security_code # 高德地图安全密钥
# WebSoftAdmin 授权 (商业版功能)
VITE_LICENSE_CODE=your_license_code # 授权码
获取配置信息
🎯 核心功能
📝 内容管理系统
- 文章管理：支持富文本编辑、图片/视频上传
- 一键排版：智能文章格式优化，包含10种专业排版样式
- 媒体库：图片/视频文件管理，支持分组和搜索
- 首行缩进：中文段落格式智能切换
🛒 商城管理
- 商品管理：商品信息编辑、规格设置
- 订单管理：订单流程跟踪
- 库存管理：商品库存监控
👥 用户权限
- 用户管理：用户信息维护
- 角色权限：基于角色的访问控制
- 菜单管理：动态菜单配置
🎨 富文本编辑器特色功能
📸 媒体上传
- 图片上传：支持拖拽、粘贴、文件选择
- 视频上传：支持多种视频格式
- 媒体库：统一的媒体文件管理
- OSS 存储：阿里云对象存储集成
✨ 智能排版
- 一键排版：10种专业排版优化
- 首行缩进：中文段落格式切换
- 样式优化：标题、段落、列表、表格等元素美化
- 响应式：适配不同屏幕尺寸
🏗️ 项目结构
src/
├── components/ # 公共组件
├── views/ # 页面组件
│ ├── cms/ # 内容管理
│ ├── shop/ # 商城管理
│ └── system/ # 系统管理
├── router/ # 路由配置
├── store/ # 状态管理
├── utils/ # 工具函数
└── assets/ # 静态资源