29a18ffbc689b84607f8fa51d160b9fcddffa790
- dashboard订阅到期时间信息支持三态渲染:激活显示剩余天数和已激活标签、待支付显示金额及去支付按钮、无订阅显示立即订阅按钮 - 通过租户ID查询应用产品,实现按租户过滤的订阅展示逻辑 - 新增appProduct分页接口及类型定义,提供应用列表获取能力 - 实现「立即订阅」流程,支持免费应用直接激活,付费应用生成微信扫码支付二维码及轮询订单状态 - 实现待支付订阅复用支付接口生成支付二维码,避免重复创建订阅 - 小程序端扫码支付流程支持订单号查询及支付确认,后端使用Redis标记支付成功状态 - 修复后端generatePayQrcode接口缺少priceType字段导致的数据库报错,前端兼容现有逻辑无需修改 - 移除dashboard中siteInfo旧的expirationTime字段相关代码,改为读订阅expireTime - 新增订阅及支付相关样式,优化界面体验 - 支付状态轮询实现超时提示及自动停止机制,提升用户支付体验 - 组件卸载时确保支付轮询停止,避免内存泄漏 - 独立加载订阅信息,不影响其他数据请求,避免页面加载失败影响订阅展示
📖 项目简介
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/paopao-vue.git
cd paopao-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/ # 静态资源
Description
货到付款版
Latest
Languages
Vue
59.3%
JavaScript
18.5%
TypeScript
15%
CSS
5.5%
HTML
0.8%
Other
0.8%
