🌐 WebSoft Admin

基于 Vue 3 + Ant Design Vue 的企业级后台管理系统

📖 项目简介

WebSoft Admin 是一个基于 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 支持）

🚀 快速开始

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

启动开发服务器

# 开发模式
npm run dev

# 或
yarn dev

访问 http://localhost:3000 即可看到管理后台。

构建生产版本

# 生产构建
npm run build

# 预览构建结果
npm run serve

🎯 核心功能

📝 内容管理系统

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

🛒 商城管理

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

👥 用户权限

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

🎨 富文本编辑器特色功能

📸 媒体上传

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

✨ 智能排版

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

🏗️ 项目结构

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