🌐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 支持） ## 🚀 快速开始 ### 安装依赖 ```bash # 使用 npm npm install # 或使用 yarn yarn install ``` ### 启动开发服务器 ```bash # 开发模式 npm run dev # 或 yarn dev ``` 访问 `http://localhost:3000` 即可看到管理后台。 ### 构建生产版本 ```bash # 生产构建 npm run build # 预览构建结果 npm run serve ``` ## 🎯 核心功能 ### 📝 内容管理系统 - **文章管理**：支持富文本编辑、图片/视频上传 - **一键排版**：智能文章格式优化，包含10种专业排版样式 - **媒体库**：图片/视频文件管理，支持分组和搜索 - **首行缩进**：中文段落格式智能切换 ### 🛒 商城管理 - **商品管理**：商品信息编辑、规格设置 - **订单管理**：订单流程跟踪 - **库存管理**：商品库存监控 ### 👥 用户权限 - **用户管理**：用户信息维护 - **角色权限**：基于角色的访问控制 - **菜单管理**：动态菜单配置 ## 🎨 富文本编辑器特色功能 ### 📸 媒体上传 - **图片上传**：支持拖拽、粘贴、文件选择 - **视频上传**：支持多种视频格式 - **媒体库**：统一的媒体文件管理 - **OSS 存储**：阿里云对象存储集成 ### ✨ 智能排版 - **一键排版**：10种专业排版优化 - **首行缩进**：中文段落格式切换 - **样式优化**：标题、段落、列表、表格等元素美化 - **响应式**：适配不同屏幕尺寸 ## 🏗️ 项目结构 ``` src/ ├── components/ # 公共组件 ├── views/ # 页面组件 │ ├── cms/ # 内容管理 │ ├── shop/ # 商城管理 │ └── system/ # 系统管理 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── utils/ # 工具函数 └── assets/ # 静态资源 ```