gxwebsoft/mp-vue

Fork 0

Files

赵忠林 29dbb66ea8 重新整理仓库

2025-07-25 13:52:22 +08:00

5.0 KiB

Raw Blame History

🌐 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

🛠️ 技术栈

核心技术

技术	版本	说明
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/your-username/ele-admin-pro.git
cd ele-admin-pro

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            # 授权码

获取配置信息

高德地图密钥：访问高德开放平台申请
WebSoftAdmin 授权码：联系官方网站获取
其他 API 配置：根据您的后端服务配置

🎯 核心功能

📝 内容管理系统

文章管理：支持富文本编辑、图片/视频上传
一键排版：智能文章格式优化，包含10种专业排版样式
媒体库：图片/视频文件管理，支持分组和搜索
首行缩进：中文段落格式智能切换

🛒 商城管理

商品管理：商品信息编辑、规格设置
订单管理：订单流程跟踪
库存管理：商品库存监控

👥 用户权限

用户管理：用户信息维护
角色权限：基于角色的访问控制
菜单管理：动态菜单配置

🎨 富文本编辑器特色功能

📸 媒体上传

图片上传：支持拖拽、粘贴、文件选择
视频上传：支持多种视频格式
媒体库：统一的媒体文件管理
OSS 存储：阿里云对象存储集成

✨ 智能排版

一键排版：10种专业排版优化
首行缩进：中文段落格式切换
样式优化：标题、段落、列表、表格等元素美化
响应式：适配不同屏幕尺寸

🏗️ 项目结构

src/
├── components/          # 公共组件
├── views/              # 页面组件
│   ├── cms/           # 内容管理
│   ├── shop/          # 商城管理
│   └── system/        # 系统管理
├── router/            # 路由配置
├── store/             # 状态管理
├── utils/             # 工具函数
└── assets/            # 静态资源

5.0 KiB Raw Blame History Unescape Escape