Compare commits

...

56 Commits

Author SHA1 Message Date
张成
b122a34331 1 2025-12-19 13:14:42 +08:00
张成
463d7921c1 1 2025-11-26 17:50:14 +08:00
张成
a147fb8a28 Merge branch 'main' of https://git.light120.com/zc/admin_core 2025-11-20 11:27:32 +08:00
张成
46e654aace 1 2025-11-20 11:27:30 +08:00
张成
d1546678e1 1 2025-11-19 22:48:09 +08:00
张成
ff2d6004b6 1 2025-11-19 22:37:07 +08:00
张成
ce7916c097 1 2025-11-19 22:26:36 +08:00
张成
3e40ab372b 1 2025-11-19 22:19:57 +08:00
张成
af16450eb6 1 2025-11-19 15:43:45 +08:00
张成
9a93a6dc99 1 2025-11-19 15:42:42 +08:00
张成
cdd78aa057 1 2025-11-19 15:39:23 +08:00
张成
9b5f89aa10 1 2025-11-19 15:35:25 +08:00
张成
29efa21f0a 1 2025-11-19 15:05:43 +08:00
张成
4a8c9c4a2d 1 2025-11-13 11:44:58 +08:00
张成
ae36d6da81 1 2025-11-13 11:42:24 +08:00
张成
2066796977 1 2025-11-06 16:19:23 +08:00
张成
bad718ecb9 1 2025-11-06 16:15:22 +08:00
张成
869dda515d 1 2025-11-06 16:14:52 +08:00
张成
2c7d438750 1 2025-11-06 15:50:38 +08:00
张成
9a2ca57313 1 2025-11-06 15:48:56 +08:00
张成
795cc37b49 1 2025-11-06 15:46:34 +08:00
张成
5ae32a550d 1 2025-11-06 15:42:49 +08:00
张成
02c2d1a31c 1 2025-11-06 15:03:55 +08:00
张成
84563bafa1 1 2025-11-06 14:59:12 +08:00
张成
6953193cf5 1 2025-11-06 14:02:48 +08:00
张成
9d507c88ab 1 2025-11-06 13:59:58 +08:00
张成
c734e698de 1 2025-11-06 13:56:53 +08:00
张成
b02853d5f7 1 2025-11-06 12:55:46 +08:00
张成
cac6e71adf Merge branch 'main' of https://git.light120.com/zc/admin_core 2025-11-06 11:53:01 +08:00
张成
2bd32e9a34 1 2025-11-06 11:52:41 +08:00
张成
cfe380218e 1 2025-11-05 21:19:30 +08:00
张成
ff78438cfe 1 2025-11-05 21:13:35 +08:00
张成
fbed54474d 1 2025-11-05 21:08:03 +08:00
张成
bd7704f2c9 1 2025-10-29 14:28:27 +08:00
张成
756a657c58 1 2025-10-29 14:24:20 +08:00
张成
73d756628b 1 2025-10-29 14:17:30 +08:00
张成
970edeb759 1 2025-10-28 16:11:23 +08:00
张成
0a723c4dfe 1 2025-10-28 15:51:56 +08:00
张成
42c977b815 1 2025-10-28 15:31:49 +08:00
张成
5bea5f8c02 1 2025-10-28 14:10:05 +08:00
张成
b101f49048 1 2025-10-28 11:32:33 +08:00
张成
e66dd4430c 1 2025-10-28 11:29:28 +08:00
张成
e039ae8c62 1 2025-10-28 11:24:11 +08:00
张成
a8d52f74ad 1 2025-10-20 18:50:01 +08:00
张成
96c8ba8c7e 1 2025-10-20 18:45:22 +08:00
张成
db46666bd4 1 2025-10-20 18:44:48 +08:00
张成
d79a272f50 1 2025-10-20 18:41:28 +08:00
张成
fd3c1a5563 init 2025-10-20 18:18:27 +08:00
张成
0047086013 1 2025-10-19 11:41:00 +08:00
张成
81aa1d49fd 1 2025-10-10 00:37:30 +08:00
张成
b39b206c4c 1 2025-10-10 00:13:11 +08:00
张成
f86ee00e3b 1 2025-10-10 00:08:35 +08:00
张成
88cd8d6e72 1 2025-10-09 23:50:03 +08:00
张成
0b78af46cd 1 2025-10-09 23:26:40 +08:00
张成
b81e768035 1 2025-10-09 23:18:09 +08:00
张成
1d3eb75c64 1 2025-10-09 23:13:42 +08:00
166 changed files with 4156 additions and 3777 deletions

View File

@@ -0,0 +1,9 @@
{
"permissions": {
"allow": [
"Bash(npm run build:*)"
],
"deny": [],
"ask": []
}
}

231
README.md
View File

@@ -1,231 +0,0 @@
# Admin Framework
一个基于 Vue2 的通用后台管理系统框架,包含完整的系统功能、登录、路由管理、布局等核心功能。
## 📦 项目结构
```
admin-framework/
├── src/ # 框架源码
│ ├── api/ # API 接口
│ ├── assets/ # 资源文件(样式、图片、字体)
│ ├── components/ # 全局组件
│ ├── config/ # 配置文件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 状态管理
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ │ ├── home/ # 主页
│ │ ├── login/ # 登录页
│ │ ├── system/ # 系统管理页面
│ │ └── system_high/ # 高级系统页面
│ └── index.js # 框架入口
├── dist/ # 打包产物
│ └── admin-framework.js # 框架打包文件1.64 MB
├── demo-project/ # 完整示例项目 ⭐
│ ├── src/
│ │ ├── config/ # 配置
│ │ ├── libs/ # 框架文件
│ │ ├── views/ # 业务页面
│ │ ├── App.vue
│ │ └── main.js
│ ├── README.md # Demo 使用说明
│ └── INSTALL.md # 安装指南
├── webpack.config.js # 构建配置
├── package.json
└── 完整使用文档.md # 详细文档
```
## 🚀 快速开始
### 方式一:运行 Demo 项目(推荐)⭐
**Demo 项目现已更新为使用框架源码**,更方便调试和开发!
#### 🎯 一键启动
**Windows 用户**
```bash
cd demo-project
双击运行 start.bat
```
**Linux/Mac 用户**
```bash
cd demo-project
chmod +x start.sh
./start.sh
```
#### 📝 手动启动
```bash
# 1. 进入 demo 项目
cd demo-project
# 2. 安装依赖(首次必须)
npm install
# 3. 启动开发服务器
npm run dev
```
浏览器会自动打开 `http://localhost:8080`
#### 📚 Demo 项目文档
- [快速启动.md](./demo-project/快速启动.md) - 快速启动指南 ⭐
- [README.md](./demo-project/README.md) - 项目说明
- [CHANGELOG.md](./demo-project/CHANGELOG.md) - 更新日志(重要)
- [INSTALL.md](./demo-project/INSTALL.md) - 安装指南
- [PROJECT_STRUCTURE.md](./demo-project/PROJECT_STRUCTURE.md) - 项目结构说明
#### ⚠️ 重要提示
- Demo 项目现在**直接使用框架源码**`../../src/index.js`
- **首次运行必须执行** `npm install` 安装新依赖
- 如遇到错误,删除 `node_modules``package-lock.json` 后重新安装
### 方式二:构建框架
```bash
# 1. 安装依赖
npm install
# 2. 构建框架
npm run build
# 3. 产物在 dist/admin-framework.js
```
## ✨ 特性
-**主页组件** - 欢迎页面,自动显示系统标题
-**系统管理页面** - 用户、角色、菜单等管理
-**登录和错误页面** - 完整的登录流程和错误处理
-**动态路由管理** - 基于权限的路由控制
-**Vuex 状态管理** - 用户、应用状态管理
-**内置样式** - base.less、animate.css、iconfont
-**工具库** - HTTP、日期、Token 等工具
## 📚 文档
- **完整使用文档**[完整使用文档.md](./完整使用文档.md)
- **Demo 项目说明**[demo-project/README.md](./demo-project/README.md)
- **安装指南**[demo-project/INSTALL.md](./demo-project/INSTALL.md)
## 🎯 Demo 项目预览
Demo 项目包含:
1. **登录页面**`/login`
- 完整的登录表单
- 自动跳转功能
2. **主页**`/home`
- 欢迎页面
- 显示系统标题
3. **业务示例**`/business/product`
- 产品列表Table
- CRUD 操作示例
- Modal、Message 使用
4. **系统页面**(框架内置)
- 用户管理
- 角色管理
- 菜单管理
## 🔧 使用方式
### 1. 在新项目中使用
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ViewUI from 'view-design'
import createPersistedState from 'vuex-persistedstate'
import AdminFramework from './libs/admin-framework.js'
import config from './config'
// 使用框架 - 自动完成所有初始化
Vue.use(AdminFramework, {
config,
ViewUI,
VueRouter,
Vuex,
createPersistedState
})
// 创建 Vue 实例
new Vue({
router: AdminFramework.router,
store: AdminFramework.store,
render: h => h(App)
}).$mount('#app')
```
### 2. 按需使用组件
```javascript
import { HomePage, SysUser, SysRole } from './libs/admin-framework.js'
// 在路由中使用
const routes = [
{ path: '/home', component: HomePage },
{ path: '/system/user', component: SysUser }
]
```
## 📝 版本信息
**当前版本**: 1.0.0
**更新日志**:
- v1.0.0 - 初始版本
- ✅ 完整的系统管理功能
- ✅ 主页组件
- ✅ 登录和权限管理
- ✅ 动态路由
- ✅ 内置样式
- ✅ Demo 示例项目
## 💻 技术栈
- Vue 2.6+
- Vue Router 3.x
- Vuex 3.x
- View Design (iView) 4.x
- Axios
- Less
- Webpack 5
## 🛠️ 开发
```bash
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建生产版本
npm run build
```
## 📄 许可证
MIT License
## 👨‍💻 作者
light
---
**祝开发愉快!** 🎉
如有问题,请查看[完整使用文档.md](./完整使用文档.md)或查看 Demo 项目示例。

781
_doc/使用说明.md Normal file
View File

@@ -0,0 +1,781 @@
# Admin Framework 使用说明
一个基于 Vue2 的通用后台管理系统框架,包含完整的系统功能、登录、路由管理、布局等核心功能。
## 📦 框架特性
### ✨ 核心功能
-**简化的 API** - 只需调用 `createApp()` 即可完成所有初始化
-**模块化设计** - 组件、路由、状态管理等功能按模块组织
-**完整的系统管理页面** - 用户、角色、菜单、日志等管理
-**登录和权限管理** - 完整的登录流程和权限控制
-**动态路由管理** - 基于权限菜单的动态路由生成
-**Vuex 状态管理** - 用户、应用状态管理
-**全局组件库** - Tables、Editor、Upload、TreeGrid、FieldRenderer、FloatPanel 等
-**工具库** - HTTP、日期、Token、Cookie 等工具
-**内置样式** - base.less、animate.css、iconfont 等
-**响应式布局** - 支持移动端适配
### 🎯 内置页面组件
- **主页组件** (`HomePage`) - 欢迎页面,显示系统标题
- **系统管理页面** (`SysUser`, `SysRole`, `SysLog`, `SysParamSetup`)
- **高级管理页面** (`SysMenu`, `SysControl`, `SysTitle`)
- **登录页面** (`LoginPage`)
- **错误页面** (`Page401`, `Page404`, `Page500`)
### 🛠️ 内置工具
- **HTTP 工具** (`http`) - 封装了 axios支持拦截器、文件上传下载
- **UI 工具** (`uiTool`) - 删除确认、树形转换、响应式设置、文件下载
- **通用工具** (`tools`) - 日期格式化、UUID 生成、Cookie 操作、深拷贝等
- **文件下载** - 支持 CSV 等格式的文件下载,自动处理换行符
## 🚀 快速开始
### 方式一:使用 Demo 项目(推荐)
我们提供了一个完整的 demo 项目,可以直接运行查看效果:
```bash
# 1. 进入 demo 项目
cd demo
# 2. 安装依赖
npm install
# 3. 启动开发服务器
npm run dev
```
浏览器会自动打开 `http://localhost:8080`,查看:
- `/login` - 登录页面
- `/home` - 主页
- `/system/user` - 用户管理
- `/ball/games` - 业务示例页面
### 方式二:构建框架
```bash
# 1. 安装依赖
npm install
# 2. 构建框架
npm run build
# 3. 产物在 dist/admin-framework.js
```
## 🎯 极简使用方式
### 只需 3 步即可完成集成!
#### 1. 引入框架
```javascript
import AdminFramework from './admin-framework.js'
```
#### 2. 创建应用
```javascript
const app = AdminFramework.createApp({
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: {
'business/product': ProductComponent,
'business/order': OrderComponent
}
})
```
#### 3. 挂载应用
```javascript
app.$mount('#app')
```
**就这么简单!** 框架会自动完成所有初始化工作。
## 📖 完整使用指南
### 1. 项目结构准备
```
your-project/
├── src/
│ ├── config/
│ │ └── index.js # 配置文件
│ ├── libs/
│ │ └── admin-framework.js # 框架文件
│ ├── views/
│ │ └── business/ # 业务页面
│ ├── api/
│ │ └── business/ # 业务 API
│ ├── App.vue
│ └── main.js
├── package.json
└── webpack.config.js
```
### 2. 安装依赖
```bash
npm install vue vue-router vuex view-design axios dayjs js-cookie vuex-persistedstate
```
### 3. 创建配置文件
`src/config/index.js` 中:
```javascript
module.exports = {
title: '你的系统名称',
homeName: '首页',
apiUrl: 'http://localhost:9090/admin_api/',
uploadUrl: 'http://localhost:9090/admin_api/upload',
cookieExpires: 7,
uploadMaxLimitSize: 10,
oss: {
region: 'oss-cn-shanghai',
accessKeyId: 'your-key',
accessKeySecret: 'your-secret',
bucket: 'your-bucket',
url: 'http://your-bucket.oss-cn-shanghai.aliyuncs.com',
basePath: 'your-path/'
}
}
```
### 4. 创建 main.js新版本 - 推荐)
```javascript
import AdminFramework from './libs/admin-framework.js'
// 导入业务组件(根据权限菜单接口的 component 字段)
import GamesComponent from './views/ball/games.vue'
import PayOrdersComponent from './views/order/pay_orders.vue'
// 🎉 只需一行代码!框架自动完成所有初始化
const app = AdminFramework.createApp({
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: {
'ball/games': GamesComponent,
'order/pay_orders': PayOrdersComponent
// 添加更多业务组件...
},
onReady() {
console.log('应用已启动!')
// 应用启动完成后的回调
}
})
// 挂载应用
app.$mount('#app')
```
### 5. 创建 App.vue
```vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
```
## 🔧 API 使用指南
### 框架实例方法
#### createApp(config) - 推荐使用
创建应用实例(新版本 API
```javascript
const app = AdminFramework.createApp({
title: '我的管理系统', // 应用标题(必需)
apiUrl: 'http://localhost:9098/admin_api/', // API 基础地址(必需)
uploadUrl: 'http://localhost:9098/admin_api/upload', // 上传地址(可选,默认为 apiUrl + 'upload'
componentMap: { // 业务组件映射(可选)
'business/product': ProductComponent,
'business/order': OrderComponent
},
onReady() { // 应用启动完成回调(可选)
console.log('应用已启动!')
}
})
```
### 工具库使用
#### HTTP 工具
```javascript
// 在组件中使用
export default {
async mounted() {
// GET 请求
const res = await this.$http.get('/api/users', { page: 1 })
// POST 请求
const result = await this.$http.post('/api/users', { name: 'test' })
// 文件导出
await this.$http.fileExport('/api/export', { type: 'excel' })
}
}
// 在非 Vue 组件中使用
import AdminFramework from './libs/admin-framework.js'
const res = await AdminFramework.http.get('/api/users')
```
#### UI 工具
```javascript
// 在组件中使用
export default {
methods: {
handleDelete() {
// 删除确认
this.$uiTool.delConfirm(() => {
// 执行删除逻辑
})
// 设置响应式字体
this.$uiTool.setRem()
// 树形转换
const treeData = this.$uiTool.transformTree(flatData)
}
}
}
```
#### 功能工具
```javascript
// 在组件中使用
export default {
methods: {
downloadFile() {
// 文件下载
this.$uiTool.downloadFile(response, 'filename.csv')
}
}
}
```
#### 通用工具
```javascript
// 在组件中使用
export default {
methods: {
formatDate() {
// 日期格式化
return this.$tools.formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
},
generateId() {
// UUID 生成
return this.$tools.generateUUID()
},
setCookie() {
// Cookie 操作
this.$tools.setCookie('name', 'value')
const value = this.$tools.getCookie('name')
}
}
}
```
### Store 模块使用
#### user 模块
```javascript
// 登录
await this.$store.dispatch('user/handleLogin', {
userFrom: { username, password },
Main: AdminFramework.Main,
ParentView: AdminFramework.ParentView,
Page404: AdminFramework.Page404
})
// 登出
this.$store.dispatch('user/handleLogOut')
// 设置权限菜单
this.$store.dispatch('user/setAuthorityMenus', {
Main: AdminFramework.Main,
ParentView: AdminFramework.ParentView,
Page404: AdminFramework.Page404
})
// 获取用户信息
const userName = this.$store.getters['user/userName']
const token = this.$store.state.user.token
```
#### app 模块
```javascript
// 设置面包屑
this.$store.commit('app/setBreadCrumb', route)
// 获取系统标题
this.$store.dispatch('app/getSysTitle', {
defaultTitle: '系统名称',
defaultLogo: '/logo.png'
})
// 获取系统配置
const sysFormModel = this.$store.getters['app/sysFormModel']
```
## 🗂️ 组件映射配置
### 业务组件映射
当后端权限菜单接口返回组件路径时,需要配置映射表:
```javascript
// 1. 导入业务组件
import GamesComponent from './views/ball/games.vue'
import PayOrdersComponent from './views/order/pay_orders.vue'
// 2. 配置映射
const componentMap = {
'ball/games': GamesComponent,
'ball/games.vue': GamesComponent, // 支持带 .vue 后缀
'order/pay_orders': PayOrdersComponent,
'order/pay_orders.vue': PayOrdersComponent
}
// 3. 在 Vue.use 时传入
Vue.use(AdminFramework, {
config,
ViewUI,
VueRouter,
Vuex,
createPersistedState,
componentMap // 传入组件映射表
})
```
### 框架已自动映射的系统组件
以下组件**无需配置**,框架已自动映射:
-`home/index` - 主页
-`system/sys_user` - 用户管理
-`system/sys_role` - 角色管理
-`system/sys_log` - 日志管理
-`system/sys_param_setup` - 参数设置
-`system/sys_menu` - 菜单管理
-`system/sys_control` - 控制器管理
-`system/sys_title` - 系统标题设置
## 🌐 全局访问
### window.framework
框架实例会自动暴露到全局,可以在任何地方访问:
```javascript
// 在非 Vue 组件中使用
const http = window.framework.http
const uiTool = window.framework.uiTool
const config = window.framework.config
// HTTP 请求
const res = await window.framework.http.get('/api/users')
// UI 工具
window.framework.uiTool.delConfirm(() => {
// 删除逻辑
})
```
### Vue 原型方法
在 Vue 组件中可以直接使用:
```javascript
export default {
methods: {
async loadData() {
// 直接使用 this.$xxx
const res = await this.$http.get('/api/users')
this.$uiTool.delConfirm(() => {})
this.$tools.formatDate(new Date())
this.$uiTool.downloadFile(response, 'file.csv')
}
}
}
```
## 📁 文件下载功能
### 使用 downloadFile 方法
框架提供了便捷的文件下载功能,支持 CSV 等格式:
```javascript
// 在 Vue 组件中使用
export default {
methods: {
// 导出数据
exportData() {
// 调用 API 获取数据
this.$http.fileExport('/api/export', params).then(res => {
// 使用 downloadFile 下载
this.$uiTool.downloadFile(res, '数据导出.csv')
this.$Message.success('导出成功!')
}).catch(error => {
this.$Message.error('导出失败:' + error.message)
})
}
}
}
```
### 支持的数据格式
- **CSV 格式**:自动处理换行符,保持表格格式
- **Blob 对象**:支持二进制文件下载
- **文本数据**:支持纯文本文件下载
### 自动处理特性
-**换行符保持**CSV 文件的换行符会被正确保持
-**文件名处理**:自动清理文件名中的特殊字符
-**浏览器兼容**:支持所有现代浏览器
-**内存管理**:自动清理临时 URL 对象
## 🎨 全局组件使用
### FloatPanel - 浮动面板组件
`FloatPanel` 是一个浮动在父窗体上的面板组件,类似于抽屉效果,常用于详情展示、表单编辑等场景。
**基本使用:**
```vue
<template>
<div>
<Button @click="showPanel">打开浮动面板</Button>
<FloatPanel
ref="floatPanel"
title="详情面板"
position="right"
:show-back="true"
back-text="返回"
@back="handleBack"
>
<div>这里是面板内容</div>
</FloatPanel>
</div>
</template>
<script>
export default {
methods: {
showPanel() {
// 通过 ref 调用 show 方法显示面板
this.$refs.floatPanel.show()
},
hidePanel() {
// 通过 ref 调用 hide 方法隐藏面板
this.$refs.floatPanel.hide()
},
handleBack() {
console.log('返回按钮被点击')
this.hidePanel()
}
}
}
</script>
```
**属性说明:**
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `title` | String | `''` | 面板标题 |
| `width` | String/Number | `'100%'` | 面板宽度(字符串或数字),默认占满父容器 |
| `height` | String/Number | `'100%'` | 面板高度(字符串或数字),默认占满父容器 |
| `position` | String | `'right'` | 面板位置:`left``right``top``bottom``center` |
| `showBack` | Boolean | `true` | 是否显示返回按钮 |
| `showClose` | Boolean | `false` | 是否显示关闭按钮 |
| `backText` | String | `'返回'` | 返回按钮文字 |
| `closeOnClickBackdrop` | Boolean | `false` | 点击遮罩是否关闭 |
| `mask` | Boolean | `false` | 是否显示遮罩(默认不显示) |
| `zIndex` | Number | `1000` | 层级 |
**方法:**
| 方法 | 说明 | 参数 |
|------|------|------|
| `show(callback)` | 显示面板 | `callback`: 可选的回调函数 |
| `hide()` | 隐藏面板 | - |
**事件:**
| 事件 | 说明 | 参数 |
|------|------|------|
| `back` | 点击返回按钮时触发 | - |
**插槽:**
| 插槽 | 说明 |
|------|------|
| `default` | 面板主体内容 |
| `header-right` | 头部右侧内容(可用于添加自定义按钮) |
**位置说明:**
- `left`: 从左侧滑入
- `right`: 从右侧滑入(默认)
- `top`: 从顶部滑入
- `bottom`: 从底部滑入
- `center`: 居中显示,带缩放动画
**完整示例:**
```vue
<template>
<div>
<Button @click="openDetailPanel">查看详情</Button>
<FloatPanel
ref="detailPanel"
title="用户详情"
position="right"
:show-back="true"
:show-close="true"
back-text="返回"
@back="handleBack"
>
<template #header-right>
<Button type="primary" @click="handleSave">保存</Button>
</template>
<div class="detail-content">
<Form :model="formData" :label-width="100">
<FormItem label="用户名">
<Input v-model="formData.username" />
</FormItem>
<FormItem label="邮箱">
<Input v-model="formData.email" />
</FormItem>
</Form>
</div>
</FloatPanel>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
username: '',
email: ''
}
}
},
methods: {
openDetailPanel() {
this.$refs.detailPanel.show()
},
handleBack() {
this.$refs.detailPanel.hide()
},
handleSave() {
// 保存逻辑
console.log('保存数据', this.formData)
this.$Message.success('保存成功')
this.$refs.detailPanel.hide()
}
}
}
</script>
```
**特性说明:**
- ✅ 基于父元素定位,不会遮挡菜单
- ✅ 宽度和高度默认 100%,占满父容器
- ✅ 无遮罩背景,完全浮在父页面上
- ✅ 路由切换或组件销毁时自动关闭
- ✅ 支持多种位置和动画效果
- ✅ 支持自定义头部右侧内容
## 📝 业务开发示例
### 创建业务页面
```vue
<!-- src/views/business/product.vue -->
<template>
<div>
<h1>产品管理</h1>
<Button @click="loadData">加载数据</Button>
<Tables :columns="columns" :data="list" />
</div>
</template>
<script>
export default {
data() {
return {
list: [],
columns: [
{ title: 'ID', key: 'id' },
{ title: '名称', key: 'name' },
{ title: '价格', key: 'price' }
]
}
},
async mounted() {
await this.loadData()
},
methods: {
async loadData() {
// 使用框架提供的 http 工具
const res = await this.$http.get('/product/list', { page: 1 })
this.list = res.data
},
async handleDelete(id) {
// 使用框架提供的 UI 工具
this.$uiTool.delConfirm(async () => {
await this.$http.post('/product/delete', { id })
this.$Message.success('删除成功')
await this.loadData()
})
}
}
}
</script>
```
### 创建业务 API
```javascript
// src/api/business/productServer.js
// 注意:不需要 import http直接使用 http
class ProductServer {
async getList(params) {
return await http.get('/product/list', params)
}
async save(data) {
return await http.post('/product/save', data)
}
async delete(id) {
return await http.post('/product/delete', { id })
}
async exportCsv(params) {
return await http.fileExport('/product/export', params)
}
}
export default new ProductServer()
```
## ❓ 常见问题
### Q1: 打包后文件太大怎么办?
A: 框架已经将 Vue、VueRouter、Vuex、ViewUI、Axios 设置为外部依赖,不会打包进去。确保在项目中单独安装这些依赖。
### Q2: 如何只使用部分功能?
A: 可以按需导入:
```javascript
import { http, uiTool, tools } from './libs/admin-framework.js'
```
### Q3: 权限菜单中的业务页面显示 404 怎么办?
A: 需要配置组件映射表:
```javascript
Vue.use(AdminFramework, {
// ... 其他配置
componentMap: {
'ball/games': GamesComponent,
'order/pay_orders': PayOrdersComponent
}
})
```
### Q4: 如何自定义配置?
A: 修改 `config/index.js` 文件:
```javascript
module.exports = {
title: '你的系统名称',
apiUrl: 'http://your-api-url/',
// ... 其他配置
}
```
### Q5: 如何使用登录功能?
A: 在组件中:
```javascript
export default {
methods: {
async login() {
await this.$store.dispatch('user/handleLogin', {
userFrom: { username: 'admin', password: '123456' },
Main: AdminFramework.Main,
ParentView: AdminFramework.ParentView,
Page404: AdminFramework.Page404
})
this.$router.push({ name: 'home' })
}
}
}
```
### Q6: 需要单独引入样式文件吗?
A: **不需要!** 框架已内置所有样式:
-`base.less` - 基础样式
-`animate.css` - 动画样式
-`ivewExpand.less` - ViewUI 扩展样式
-`iconfont.css` - 字体图标样式
只需引入框架即可:
```javascript
import AdminFramework from './libs/admin-framework.js'
Vue.use(AdminFramework, { ... })
```
## 📦 技术栈
- Vue 2.6+
- Vue Router 3.x
- Vuex 3.x
- View Design (iView) 4.x
- Axios
- Less
- Webpack 5
## 📄 许可证
MIT License
## 👨‍💻 作者
light
---
**祝开发愉快!** 🎉
如有问题,请查看 Demo 项目示例或联系开发团队。

View File

@@ -6,7 +6,7 @@
## 🎯 Demo 项目 ## 🎯 Demo 项目
📦 **已提供完整的示例项目**`demo-project/` 📦 **已提供完整的示例项目**`demo/`
一个开箱即用的完整示例,包含: 一个开箱即用的完整示例,包含:
- ✅ 框架集成配置 - ✅ 框架集成配置
@@ -18,12 +18,12 @@
**快速体验** **快速体验**
```bash ```bash
cd demo-project cd demo
npm install npm install
npm run dev npm run dev
``` ```
详细说明:[demo-project/README.md](./demo-project/README.md) 详细说明:[demo/README.md](./demo/README.md)
--- ---
@@ -41,11 +41,14 @@ npm run dev
## ✨ 特性 ## ✨ 特性
**极简 API** - 只需调用 `createApp()` 即可完成所有初始化
**模块化设计** - 组件、路由、状态管理等功能按模块组织
**主页组件**(欢迎页面,自动显示系统标题) **主页组件**(欢迎页面,自动显示系统标题)
**系统管理页面**sys 开头的所有页面和功能) **系统管理页面**sys 开头的所有页面和功能)
**系统 API**system 和 system_high 所有 API **系统 API**system 和 system 所有 API
**全局组件**Tables、Editor、Upload 等) **全局组件**Tables、Editor、Upload、FieldRenderer、FloatPanel 等)
**布局组件**Main、ParentView **布局组件**Main、ParentView
**文件下载**(支持 CSV 等格式,自动处理换行符)
**登录和错误页面**Login、401、404、500 **登录和错误页面**Login、401、404、500
**用户登录和权限管理** **用户登录和权限管理**
**动态路由管理** **动态路由管理**
@@ -60,11 +63,11 @@ npm run dev
### 🎯 方式一:使用 Demo 项目(推荐新手) ### 🎯 方式一:使用 Demo 项目(推荐新手)
我们提供了一个完整的 **demo-project** 示例项目,可以直接运行查看效果! 我们提供了一个完整的 **demo** 示例项目,可以直接运行查看效果!
```bash ```bash
# 1. 进入 demo 项目 # 1. 进入 demo 项目
cd demo-project cd demo
# 2. 安装依赖 # 2. 安装依赖
npm install npm install
@@ -78,7 +81,7 @@ npm run dev
- `/home` - 主页 - `/home` - 主页
- `/business/product` - 业务示例页面 - `/business/product` - 业务示例页面
**详细说明**:查看 `demo-project/README.md``demo-project/INSTALL.md` **详细说明**:查看 `demo/README.md`
--- ---
@@ -139,9 +142,9 @@ import AdminFramework from 'admin-framework'
**已包含** **已包含**
- **主页组件**HomePage - 欢迎页面,显示系统标题) - **主页组件**HomePage - 欢迎页面,显示系统标题)
- 所有系统页面system、system_high - 所有系统页面system、system
- 所有系统 APIsystem、system_high - 所有系统 APIsystem、system
- 所有全局组件Tables、Editor、Upload 等) - 所有全局组件Tables、Editor、Upload、FieldRenderer 等)
- 布局组件Main、ParentView - 布局组件Main、ParentView
- 登录和错误页面 - 登录和错误页面
- 工具库和 Store 模块 - 工具库和 Store 模块
@@ -150,11 +153,39 @@ import AdminFramework from 'admin-framework'
**只需准备** **只需准备**
``` ```
├── config/index.js # 配置文件(根据你的项目修改 ├── App.vue # 应用根组件(可选
└── App.vue # 应用根组件
``` ```
#### 2. 创建 main.js只需 10 行代码!) #### 2. 创建 main.js新版本 - 只需 8 行代码!)
```javascript
import AdminFramework from './libs/admin-framework.js'
// 导入业务组件(根据权限菜单接口的 component 字段)
import GamesComponent from './views/ball/games.vue'
import PayOrdersComponent from './views/order/pay_orders.vue'
// 🎉 只需一行代码!框架自动完成所有初始化
const app = AdminFramework.createApp({
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: {
'ball/games': GamesComponent,
'order/pay_orders': PayOrdersComponent
// 添加更多业务组件...
},
HomePage: CustomHomePage, // 可选:自定义首页组件,覆盖整个首页
onReady() {
console.log('应用已启动!')
}
})
// 挂载应用
app.$mount('#app')
```
#### 2.1 传统方式(兼容旧版本)
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
@@ -335,19 +366,19 @@ export default {
```javascript ```javascript
// src/api/business/productServer.js // src/api/business/productServer.js
// 注意:不需要 import http直接使用 window.framework.http // 注意:不需要 import http直接使用 http
class ProductServer { class ProductServer {
async getList(params) { async getList(params) {
return await window.framework.http.get('/product/list', params) return await http.get('/product/list', params)
} }
async save(data) { async save(data) {
return await window.framework.http.post('/product/save', data) return await http.post('/product/save', data)
} }
async delete(id) { async delete(id) {
return await window.framework.http.post('/product/delete', { id }) return await http.post('/product/delete', { id })
} }
} }
@@ -599,13 +630,14 @@ import {
```javascript ```javascript
import { import {
SysLog, // 系统日志管理 SysLog, // 系统日志管理
SysLogOperate, // 系统操作日志
SysParamSetup, // 参数设置 SysParamSetup, // 参数设置
SysRole, // 角色管理 SysRole, // 角色管理
SysUser // 用户管理 SysUser // 用户管理
} from 'admin-framework' } from 'admin-framework'
``` ```
#### system_high 目录页面 #### system 目录页面
```javascript ```javascript
import { import {
SysControl, // 控制器管理 SysControl, // 控制器管理
@@ -616,7 +648,7 @@ import {
#### 在路由中使用 #### 在路由中使用
```javascript ```javascript
import { HomePage, SysUser, SysRole, SysMenu } from 'admin-framework' import { HomePage, SysUser, SysRole, SysMenu, SysLog, SysLogOperate } from 'admin-framework'
const routes = [ const routes = [
{ {
@@ -635,9 +667,19 @@ const routes = [
component: SysRole component: SysRole
}, },
{ {
path: '/system_high/menu', path: '/system/menu',
name: 'sys_menu', name: 'sys_menu',
component: SysMenu component: SysMenu
},
{
path: '/system/log',
name: 'sys_log',
component: SysLog
},
{
path: '/system/log_operate',
name: 'sys_log_operate',
component: SysLogOperate
} }
] ]
``` ```
@@ -662,19 +704,35 @@ const users = await userServer.getList({ page: 1 })
const roles = await roleServer.getList() const roles = await roleServer.getList()
``` ```
#### system_high API #### system API所有 API 都在 systemApi 中)
```javascript ```javascript
import { systemHighApi } from 'admin-framework' import { systemApi } from 'admin-framework'
// 使用示例 // 使用示例
const { const {
userServer,
roleServer,
sysLogServe,
fileServe,
menuServer, menuServer,
paramSetupServer, paramSetupServer,
modelServer, modelServer,
formServer,
formFieldServer,
modelFieldServer,
tableServer,
rolePermissionServer,
sysControlTypeServer,
sysModuleServer,
sysAddressServer,
systemTypeServer,
plaAccountServer,
// ... 其他 API // ... 其他 API
} = systemHighApi } = systemApi
// 调用 API // 调用 API
const users = await userServer.getList({ page: 1 })
const roles = await roleServer.getList()
const menus = await menuServer.getTree() const menus = await menuServer.getTree()
const params = await paramSetupServer.getOne('sys_title') const params = await paramSetupServer.getOne('sys_title')
``` ```
@@ -690,10 +748,137 @@ const params = await paramSetupServer.getOne('sys_title')
<Editor v-model="content" /> <Editor v-model="content" />
<UploadSingle v-model="fileUrl" /> <UploadSingle v-model="fileUrl" />
<TreeGrid :data="treeData" /> <TreeGrid :data="treeData" />
<FloatPanel ref="floatPanel" title="详情面板" position="right" />
</div> </div>
</template> </template>
``` ```
#### FloatPanel - 浮动面板组件
`FloatPanel` 是一个浮动在父窗体上的面板组件,类似于抽屉效果,调用方式和 `AsyncModal` 类似。
**基本使用:**
```vue
<template>
<div>
<Button @click="showPanel">打开浮动面板</Button>
<FloatPanel
ref="floatPanel"
title="详情面板"
position="right"
:show-back="true"
back-text="返回"
@back="handleBack"
>
<div>这里是面板内容</div>
</FloatPanel>
</div>
</template>
<script>
export default {
methods: {
showPanel() {
this.$refs.floatPanel.show()
},
hidePanel() {
this.$refs.floatPanel.hide()
},
handleBack() {
console.log('返回按钮被点击')
this.hidePanel()
},
handleSave() {
console.log('保存')
this.hidePanel()
}
}
}
</script>
```
**调用方式(类似 AsyncModal**
```vue
<template>
<div>
<Button @click="openPanel">打开面板</Button>
<FloatPanel ref="floatPanel" title="详情" position="right">
<div>内容</div>
</FloatPanel>
</div>
</template>
<script>
export default {
methods: {
openPanel() {
// 通过 ref 调用 show 方法
this.$refs.floatPanel.show()
},
closePanel() {
// 通过 ref 调用 hide 方法
this.$refs.floatPanel.hide()
}
}
}
</script>
```
**属性说明:**
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `title` | String | `''` | 面板标题 |
| `width` | String/Number | `'100%'` | 面板宽度(字符串或数字),默认占满父容器 |
| `height` | String/Number | `'100%'` | 面板高度(字符串或数字),默认占满父容器 |
| `position` | String | `'right'` | 面板位置:`left``right``top``bottom``center` |
| `showBack` | Boolean | `true` | 是否显示返回按钮 |
| `showClose` | Boolean | `false` | 是否显示关闭按钮 |
| `backText` | String | `'返回'` | 返回按钮文字 |
| `closeOnClickBackdrop` | Boolean | `false` | 点击遮罩是否关闭 |
| `mask` | Boolean | `false` | 是否显示遮罩(默认不显示) |
| `zIndex` | Number | `1000` | 层级 |
**方法:**
| 方法 | 说明 | 参数 |
|------|------|------|
| `show(callback)` | 显示面板 | `callback`: 可选的回调函数 |
| `hide()` | 隐藏面板 | - |
**事件:**
| 事件 | 说明 | 参数 |
|------|------|------|
| `back` | 点击返回按钮时触发 | - |
**插槽:**
| 插槽 | 说明 |
|------|------|
| `default` | 面板主体内容 |
| `header-right` | 头部右侧内容 |
**位置说明:**
- `left`: 从左侧滑入
- `right`: 从右侧滑入(默认)
- `top`: 从顶部滑入
- `bottom`: 从底部滑入
- `center`: 居中显示,带缩放动画
**特性说明:**
- ✅ 基于父元素定位,不会遮挡菜单
- ✅ 宽度和高度默认 100%,占满父容器
- ✅ 无遮罩背景,完全浮在父页面上
- ✅ 路由切换或组件销毁时自动关闭
- ✅ 支持多种位置和动画效果
--- ---
## 🛠️ 开发指南 ## 🛠️ 开发指南
@@ -809,7 +994,35 @@ router.beforeEach((to, from, next) => {
}) })
``` ```
### Q6: 如何扩展 Store 模块 ### Q6: 如何使用文件下载功能
A: 框架提供了便捷的文件下载方法:
```javascript
// 在 Vue 组件中使用
export default {
methods: {
exportData() {
// 调用 API 获取数据
this.$http.fileExport('/api/export', params).then(res => {
// 下载文件(自动处理换行符)
this.$uiTool.downloadFile(res, '数据导出.csv')
this.$Message.success('导出成功!')
}).catch(error => {
this.$Message.error('导出失败:' + error.message)
})
}
}
}
```
**特性:**
- ✅ 自动处理 CSV 换行符
- ✅ 支持多种文件格式
- ✅ 浏览器兼容性好
- ✅ 自动清理临时 URL 对象
### Q7: 如何扩展 Store 模块?
A: 在创建 Store 时传入自定义模块: A: 在创建 Store 时传入自定义模块:
@@ -1229,9 +1442,9 @@ AdminFramework.addComponentMap({
-`system/sys_role.vue` - 角色管理 -`system/sys_role.vue` - 角色管理
-`system/sys_log.vue` - 日志管理 -`system/sys_log.vue` - 日志管理
-`system/sys_param_setup.vue` - 参数设置 -`system/sys_param_setup.vue` - 参数设置
-`system_high/sys_menu.vue` - 菜单管理 -`system/sys_menu.vue` - 菜单管理
-`system_high/sys_control.vue` - 控制器管理 -`system/sys_control.vue` - 控制器管理
-`system_high/sys_title.vue` - 系统标题设置 -`system/sys_title.vue` - 系统标题设置
#### 配置技巧 #### 配置技巧

325
_doc/快速开始.md Normal file
View File

@@ -0,0 +1,325 @@
# AdminFramework 快速开始
## 🚀 3 分钟上手
### 第一步:引入框架
```javascript
import AdminFramework from './admin-framework.js'
```
### 第二步:创建应用
```javascript
const app = AdminFramework.createApp({
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: {
'business/product': ProductComponent,
'business/order': OrderComponent
}
})
```
### 第三步挂载应用1
```javascript
app.$mount('#app')
```
## ✨ 就这么简单!
**完整代码只需 12 行:**
## 📁 文件下载功能
框架内置了便捷的文件下载功能:
```javascript
// 在组件中使用
export default {
methods: {
exportData() {
// 调用 API 获取数据
this.$http.fileExport('/api/export', params).then(res => {
// 下载文件(自动处理换行符)
this.$uiTool.downloadFile(res, '数据导出.csv')
})
}
}
}
```
**特性:**
- ✅ 自动处理 CSV 换行符
- ✅ 支持多种文件格式
- ✅ 浏览器兼容性好
```javascript
// main.js
import AdminFramework from './admin-framework.js'
import ProductComponent from './views/business/product.vue'
import OrderComponent from './views/business/order.vue'
const app = AdminFramework.createApp({
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: {
'business/product': ProductComponent,
'business/order': OrderComponent
}
})
app.$mount('#app')
```
## 📋 组件映射表配置
`componentMap` 用于定义业务页面的动态路由。
**重要提示:** 只需传递不带 `.vue` 后缀的路径,框架会自动处理带后缀和不带后缀的两种情况!
```javascript
// 直接在 createApp 中配置
const app = AdminFramework.createApp({
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: {
// ✅ 正确:只传递不带 .vue 的路径
'business/product': ProductComponent,
'business/order': OrderComponent,
'system/user': UserComponent,
// ❌ 错误:不要同时传递带和不带 .vue 的路径(多余)
// 'business/product.vue': ProductComponent, // 框架会自动添加
}
})
```
**说明:** 框架内部会自动为每个组件创建两个映射:
- `'business/product'` → ProductComponent
- `'business/product.vue'` → ProductComponent自动添加
所以后台菜单配置 `business/product``business/product.vue` 都可以正常工作!
## ⚙️ 配置说明
### 必填参数
| 参数 | 说明 | 示例 |
|------|------|------|
| `title` | 应用标题 | `'我的管理系统'` |
| `apiUrl` | API 基础地址 | `'http://localhost:9098/admin_api/'` |
| `componentMap` | 组件映射表 | 见上方示例 |
### 可选参数
| 参数 | 说明 | 默认值 |
|------|------|--------|
| `uploadUrl` | 上传文件地址 | `apiUrl + 'upload'` |
| `onReady` | 应用启动回调 | - |
## 🎯 完整示例
```javascript
import AdminFramework from './admin-framework.js'
import componentMap from './router/component-map.js'
const app = AdminFramework.createApp({
// 必填配置
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: componentMap,
// 可选配置
uploadUrl: 'http://cdn.example.com/upload', // 可选,默认为 apiUrl + 'upload'
// 应用启动完成回调
onReady() {
console.log('应用已启动!')
console.log('当前登录用户:', this.$store.state.user)
}
})
app.$mount('#app')
```
## 📦 框架内置功能
使用 `createApp()` 后,框架会自动提供:
### 1. 内置页面
- ✅ 登录页面 (`/login`)
- ✅ 主页 (`/home`)
- ✅ 404 页面 (`/404`)
- ✅ 401 页面 (`/401`)
- ✅ 500 页面 (`/500`)
### 2. 系统管理页面
- ✅ 用户管理 (`/system/user`)
- ✅ 角色管理 (`/system/role`)
- ✅ 日志管理 (`/system/log`)
- ✅ 参数设置 (`/system/param`)
- ✅ 菜单管理 (`/system/menu`)
- ✅ 权限控制 (`/system/control`)
- ✅ 标题设置 (`/system/title`)
### 3. 全局组件
-`<Tables>` - 增强型表格
-`<UploadSingle>` - 单图上传
-`<UploadMultiple>` - 多图上传
-`<TreeGrid>` - 树形表格
-`<AsyncModal>` - 异步弹窗
-`<Editor>` - 富文本编辑器
-`<CommonIcon>` - 图标选择器
-`<FloatPanel>` - 浮动面板
### 4. 工具方法
在任何组件中可以使用:
```javascript
// HTTP 请求
this.$http.get('/api/users')
this.$http.post('/api/users', data)
// UI 工具
this.$uiTool.showLoading()
this.$uiTool.hideLoading()
this.$uiTool.showSuccess('操作成功')
// 通用工具
this.$tools.formatDate(new Date())
this.$tools.deepClone(obj)
// 文件下载
this.$uiTool.downloadFile(response, 'filename.xlsx')
// 配置信息
this.$config.title
this.$config.apiUrl
this.$config.uploadUrl
// 状态管理
this.$store.state.user.token
this.$store.state.app.sysTitle
```
## 🎨 自定义页面
### 1. 创建页面组件
```vue
<!-- views/business/product-list.vue -->
<template>
<div>
<Tables :columns="columns" :data="list" />
</div>
</template>
<script>
export default {
data() {
return {
list: [],
columns: [
{ title: '产品名称', key: 'name' },
{ title: '价格', key: 'price' }
]
}
},
created() {
this.loadData()
},
methods: {
async loadData() {
const res = await this.$http.get('/products')
this.list = res.data
}
}
}
</script>
```
### 2. 添加到组件映射表
```javascript
// router/component-map.js
import ProductList from '../views/business/product-list.vue'
export default {
'business/product': ProductList // 路径对应后台菜单的 component 字段
}
```
### 3. 在后台配置菜单
在"菜单管理"中添加菜单项:
- 菜单名称: `产品列表`
- 路由路径: `/business/product`
- 组件路径: `business/product`(对应 componentMap 的 key
## 📝 常见问题
### Q1: uploadUrl 如何配置?
**A:** 默认情况下无需配置,框架会自动设置为 `apiUrl + 'upload'`
如果需要自定义(如使用 CDN可以手动传入
```javascript
AdminFramework.createApp({
apiUrl: 'http://localhost:9098/admin_api/',
uploadUrl: 'http://cdn.example.com/upload' // 自定义上传地址
})
```
### Q2: 如何访问框架实例?
**A:** 框架实例会自动暴露到全局:
```javascript
// 浏览器控制台
window.framework // 框架实例
window.app // Vue 实例
window.rootVue // Vue 实例(别名)
```
### Q3: 如何添加自定义 Vuex 模块?
**A:** 使用旧的 `install()` 方式:
```javascript
import AdminFramework from './admin-framework.js'
AdminFramework.install(Vue, {
config: { ... },
ViewUI,
VueRouter,
Vuex,
customModules: {
myModule: myModuleConfig
}
})
```
### Q4: 框架文件太大怎么办?
**A:** 新版框架3.6 MB内置了所有依赖使用更方便。如果需要减小文件大小可以使用旧的 `install()` 方式,手动引入依赖。
## 🔗 相关文档
- [简化使用说明.md](./简化使用说明.md) - 详细的使用说明和对比
- [README.md](./README.md) - 项目介绍和特性
- [demo/src/main.js](./demo/src/main.js) - 完整示例代码
## 💡 最佳实践
1. **推荐使用 `createApp()`** - 代码更简洁,减少 77% 的代码量
2. **组件映射表单独管理** - 方便维护和扩展
3. **利用内置组件** - 如 `<Tables>``<UploadSingle>` 等,提高开发效率
4. **使用 `onReady` 回调** - 在应用启动后执行初始化逻辑
## 🎉 开始开发吧!
现在你已经了解了 AdminFramework 的快速使用方法,开始构建你的管理系统吧!

View File

@@ -1,351 +0,0 @@
# Admin Framework Demo - 本地版本
本地开发版本,不依赖 CDN所有依赖都从 node_modules 加载。
## 目录结构
```
demo/
├── public/ # 静态资源
│ └── index.html # HTML 模板
├── src/ # 源代码
│ ├── components/ # 自定义组件
│ │ └── CustomPage.vue
│ ├── main.js # 基础示例入口
│ └── main-advanced.js # 高级示例入口
├── package.json # 依赖配置
├── webpack.config.js # Webpack 配置
└── .babelrc # Babel 配置
```
## 快速开始
### 1. 构建 Admin Framework
首先需要构建框架(在项目根目录执行):
```bash
# 回到项目根目录
cd ..
# 生产构建
npm run build
# 或开发构建(有 sourcemap
npm run build:dev
```
### 2. 安装 Demo 依赖
```bash
# 进入 demo 目录
cd demo
# 安装依赖
npm install
```
### 3. 启动开发服务器
```bash
# 启动基础示例
npm run dev
# 浏览器会自动打开 http://localhost:8080
```
### 4. 构建生产版本
```bash
# 构建
npm run build
# 生成的文件在 demo/dist 目录
```
## 切换示例
### 基础示例(默认)
使用 `src/main.js` 作为入口,展示基本功能。
### 高级示例
要切换到高级示例,修改 `webpack.config.js`
```javascript
module.exports = {
entry: './src/main-advanced.js', // 改为 main-advanced.js
// ... 其他配置
}
```
然后重新运行 `npm run dev`
## 依赖说明
### 生产依赖
- **vue**: ^2.6.14 - Vue 核心库
- **vue-router**: ^3.5.3 - 路由管理
- **vuex**: ^3.6.2 - 状态管理
- **view-design**: ^4.7.0 - UI 组件库
- **axios**: ^0.27.2 - HTTP 客户端
### 开发依赖
- **webpack**: ^5.0.0 - 模块打包工具
- **webpack-dev-server**: ^4.0.0 - 开发服务器
- **babel-loader**: ^8.2.0 - ES6+ 转译
- **vue-loader**: ^15.9.0 - Vue 单文件组件加载器
- **html-webpack-plugin**: ^5.5.0 - HTML 生成插件
## 开发指南
### 1. 添加自定义页面
`src/components` 创建新组件:
```vue
<!-- src/components/MyPage.vue -->
<template>
<div>
<h1>我的页面</h1>
</div>
</template>
<script>
export default {
name: 'MyPage'
}
</script>
```
### 2. 注册到路由
`src/main.js``src/main-advanced.js` 中:
```javascript
import MyPage from './components/MyPage.vue'
const customRoutes = [
{
path: '/my',
component: AdminFramework.Main,
children: [
{
path: 'page',
component: MyPage,
meta: { title: '我的页面' }
}
]
}
]
customRoutes.forEach(route => {
AdminFramework.router.addRoute(route)
})
```
### 3. 添加 Vuex 模块
```javascript
const myModule = {
namespaced: true,
state: { data: null },
mutations: {
SET_DATA(state, data) {
state.data = data
}
},
actions: {
fetchData({ commit }) {
// 获取数据逻辑
}
}
}
AdminFramework.store.registerModule('myModule', myModule)
```
### 4. 使用框架提供的组件
```vue
<template>
<div>
<!-- 表格组件 -->
<Tables
:columns="columns"
:data="tableData"
/>
<!-- 上传组件 -->
<UploadSingle
v-model="fileUrl"
:action="uploadUrl"
/>
<!-- 富文本编辑器 -->
<Editor v-model="content" />
</div>
</template>
<script>
export default {
data() {
return {
columns: [],
tableData: [],
fileUrl: '',
content: '',
uploadUrl: this.$config.uploadUrl
}
}
}
</script>
```
## API 配置
修改 `src/main.js` 中的配置:
```javascript
const config = {
title: '系统标题',
apiUrl: 'http://your-api.com/api/',
uploadUrl: 'http://your-api.com/api/upload'
}
```
## HTTP 请求示例
### 在组件中使用
```javascript
export default {
methods: {
async fetchData() {
try {
// GET 请求
const res = await this.$http.get('/api/users')
console.log(res.data)
// POST 请求
const res2 = await this.$http.post('/api/users', {
name: '张三',
age: 25
})
console.log(res2.data)
} catch (error) {
this.$Message.error('请求失败')
}
}
}
}
```
## 工具函数使用
```javascript
export default {
methods: {
example() {
// 日期格式化
const formatted = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')
// 深拷贝
const copy = this.$tools.deepClone(obj)
// 防抖
const debounced = this.$tools.debounce(() => {
console.log('执行')
}, 500)
// 节流
const throttled = this.$tools.throttle(() => {
console.log('执行')
}, 1000)
}
}
}
```
## UI 工具使用
```javascript
export default {
methods: {
example() {
// 成功提示
this.$uiTool.success('操作成功')
// 错误提示
this.$uiTool.error('操作失败')
// 警告提示
this.$uiTool.warning('警告信息')
// 确认对话框
this.$uiTool.confirm('确定删除吗?').then(() => {
// 确认后的操作
}).catch(() => {
// 取消后的操作
})
// Loading
const loading = this.$uiTool.loading('加载中...')
setTimeout(() => loading.close(), 2000)
}
}
}
```
## 常见问题
### 1. 模块找不到
确保先构建了 admin-framework
```bash
cd .. && npm run build && cd demo
```
### 2. 端口被占用
修改 `webpack.config.js` 中的端口:
```javascript
devServer: {
port: 8081, // 改为其他端口
// ...
}
```
### 3. 热更新不生效
检查 `devServer.hot` 配置是否为 `true`
### 4. 样式不生效
确保在入口文件中引入了 iView 样式:
```javascript
import 'view-design/dist/styles/iview.css'
```
## 生产部署
### 1. 构建
```bash
npm run build
```
### 2. 部署
`demo/dist` 目录下的文件部署到服务器。
### 3. 注意事项
- 确保后端 API 配置正确
- 配置 Nginx 或其他服务器的路由重写规则(支持 Vue Router 的 history 模式)
## 更多示例
- 基础示例: 运行 `npm run dev`(默认)
- 高级示例: 修改 webpack.config.js 的 entry 为 `./src/main-advanced.js`
## 相关链接
- [Admin Framework 完整文档](../_doc/完整使用文档.md)
- [Vue 官方文档](https://cn.vuejs.org/)
- [Vue Router 文档](https://router.vuejs.org/zh/)
- [Vuex 文档](https://vuex.vuejs.org/zh/)
- [iView 文档](https://www.iviewui.com/)

View File

@@ -65,11 +65,9 @@ npm run dev
首先需要构建 admin-framework 首先需要构建 admin-framework
```bash ```bash
# 生产构建(压缩,无 sourcemap # 在项目根目录执行
cd ..
npm run build npm run build
# 开发构建(不压缩,有 sourcemap
npm run build:dev
``` ```
### 2. 启动示例 ### 2. 启动示例
@@ -109,16 +107,26 @@ const config = {
} }
``` ```
### 初始化框架 ### 初始化框架(新版本 - 推荐)
```javascript ```javascript
framework.install(Vue, { // 引入 Admin Framework
config: config, // 配置对象 import AdminFramework from '../../dist/admin-framework.js'
ViewUI: iview, // iView 实例
VueRouter: VueRouter, // Vue Router // 引入组件映射表
Vuex: Vuex, // Vuex import componentMap from './router/component-map.js'
createPersistedState: null, // Vuex 持久化插件(可选)
componentMap: {} // 自定义组件映射 // 创建应用
const app = AdminFramework.createApp({
title: '我的管理系统',
apiUrl: 'http://localhost:9098/admin_api/',
componentMap: componentMap,
onReady() {
console.log('应用已准备就绪!')
}
}) })
// 挂载应用
app.$mount('#app')
``` ```
## 内置功能 ## 内置功能
@@ -146,28 +154,30 @@ framework.install(Vue, {
### HTTP 请求 ### HTTP 请求
```javascript ```javascript
// GET 请求 // GET 请求
framework.http.get('/api/users').then(res => { window.framework.http.get('/api/users').then(res => {
console.log(res.data) console.log(res.data)
}) })
// POST 请求 // POST 请求
framework.http.post('/api/users', { window.framework.http.post('/api/users', {
name: '张三', name: '张三',
age: 25 age: 25
}).then(res => { }).then(res => {
console.log(res.data) console.log(res.data)
}) })
// 在件中使用 // 在 API 文件中使用
this.$http.get('/api/users').then(res => { class UserServer {
console.log(res.data) async getList(params) {
}) return await window.framework.http.get('/api/users', params)
}
}
``` ```
### 工具函数 ### 工具函数
```javascript ```javascript
// 使用框架提供的工具函数 // 使用框架提供的工具函数
const tools = framework.tools const tools = window.framework.tools
// 日期格式化 // 日期格式化
tools.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss') tools.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
@@ -185,16 +195,16 @@ tools.throttle(fn, 500)
### UI 工具 ### UI 工具
```javascript ```javascript
// 使用 UI 工具 // 使用 UI 工具
const uiTool = framework.uiTool const uiTool = window.framework.uiTool
// 成功提示 // 成功提示
uiTool.success('操作成功') window.framework.uiTool.success('操作成功')
// 错误提示 // 错误提示
uiTool.error('操作失败') window.framework.uiTool.error('操作失败')
// 确认对话框 // 确认对话框
uiTool.confirm('确定删除吗?').then(() => { window.framework.uiTool.confirm('确定删除吗?').then(() => {
// 确认后的操作 // 确认后的操作
}) })
``` ```

View File

@@ -1,212 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Framework - 高级示例</title>
<!-- 引入 iView 样式 -->
<link rel="stylesheet" href="https://unpkg.com/view-design@4.7.0/dist/styles/iview.css">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}
#app {
height: 100vh;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- 引入依赖库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
<script src="https://unpkg.com/view-design@4.7.0/dist/iview.js"></script>
<script src="https://unpkg.com/axios@0.27.2/dist/axios.js"></script>
<!-- 引入 admin-framework -->
<script src="../dist/admin-framework.js"></script>
<script>
// 获取框架实例
const framework = window.AdminFramework
// ========== 1. 自定义页面组件 ==========
const CustomPage = {
name: 'CustomPage',
template: `
<div style="padding: 20px;">
<Card>
<p slot="title">自定义页面</p>
<p>这是一个自定义页面示例</p>
<p>当前时间: {{ currentTime }}</p>
<Button type="primary" @click="handleClick">点击测试</Button>
</Card>
</div>
`,
data() {
return {
currentTime: new Date().toLocaleString()
}
},
methods: {
handleClick() {
this.$Message.success('按钮点击成功!')
}
},
mounted() {
// 定时更新时间
this.timer = setInterval(() => {
this.currentTime = new Date().toLocaleString()
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
// ========== 2. 自定义 Vuex 模块 ==========
const customModule = {
namespaced: true,
state: {
customData: '自定义数据'
},
getters: {
customData: state => state.customData
},
mutations: {
SET_CUSTOM_DATA(state, data) {
state.customData = data
}
},
actions: {
updateCustomData({ commit }, data) {
commit('SET_CUSTOM_DATA', data)
}
}
}
// ========== 3. 配置参数 ==========
const config = {
title: 'Admin Framework 高级示例',
apiUrl: 'http://localhost:3000/api/',
uploadUrl: 'http://localhost:3000/api/upload',
// 其他自定义配置
theme: 'light',
language: 'zh-CN'
}
// ========== 4. 组件映射(用于动态路由加载) ==========
const componentMap = {
'custom/page': CustomPage,
'custom/page.vue': CustomPage
}
// ========== 5. 初始化框架 ==========
framework.install(Vue, {
config: config,
ViewUI: iview,
VueRouter: VueRouter,
Vuex: Vuex,
createPersistedState: null,
componentMap: componentMap
})
// ========== 6. 添加自定义 Vuex 模块 ==========
framework.store.registerModule('custom', customModule)
// ========== 7. 添加自定义路由 ==========
const customRoutes = [
{
path: '/custom',
component: framework.Main, // 使用框架的主布局
children: [
{
path: 'page',
name: 'custom_page',
component: CustomPage,
meta: {
title: '自定义页面',
hideInMenu: false
}
}
]
}
]
// 添加路由
customRoutes.forEach(route => {
framework.router.addRoute(route)
})
// ========== 8. 路由守卫(可选) ==========
framework.router.beforeEach((to, from, next) => {
// 可以在这里添加权限验证等逻辑
console.log('路由跳转:', from.path, '->', to.path)
next()
})
// ========== 9. Axios 拦截器配置(可选) ==========
framework.http.interceptors.request.use(
config => {
// 在请求发送前做些什么
console.log('发送请求:', config.url)
return config
},
error => {
return Promise.reject(error)
}
)
framework.http.interceptors.response.use(
response => {
// 对响应数据做些什么
console.log('收到响应:', response.config.url)
return response
},
error => {
// 对响应错误做些什么
console.error('请求错误:', error)
return Promise.reject(error)
}
)
// ========== 10. 创建 Vue 实例 ==========
const app = new Vue({
router: framework.router,
store: framework.store,
render: h => h('router-view'),
created() {
console.log('=== Admin Framework 高级示例启动 ===')
console.log('配置信息:', this.$config)
console.log('可用路由:', this.$router.options.routes)
}
})
// ========== 11. 挂载应用 ==========
app.$mount('#app')
// ========== 12. 全局暴露(方便调试) ==========
window.app = app
window.rootVue = app
window.framework = framework
// ========== 13. 打印框架信息 ==========
console.log('框架版本:', framework.version)
console.log('框架实例:', framework)
console.log('路由实例:', framework.router)
console.log('Store 实例:', framework.store)
console.log('工具函数:', framework.tools)
console.log('UI 工具:', framework.uiTool)
console.log('HTTP 实例:', framework.http)
</script>
</body>
</html>

View File

@@ -1,77 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Framework Demo</title>
<!-- 引入 iView 样式 -->
<link rel="stylesheet" href="https://unpkg.com/view-design@4.7.0/dist/styles/iview.css">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}
#app {
height: 100vh;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- 引入依赖库 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
<script src="https://unpkg.com/view-design@4.7.0/dist/iview.js"></script>
<script src="https://unpkg.com/axios@0.27.2/dist/axios.js"></script>
<!-- 引入 admin-framework -->
<script src="../dist/admin-framework.js"></script>
<script>
// 获取框架实例
const framework = window.AdminFramework
// 配置参数
const config = {
title: 'Admin Framework Demo',
apiUrl: 'http://localhost:3000/api/', // 修改为你的 API 地址
uploadUrl: 'http://localhost:3000/api/upload' // 修改为你的上传地址
}
// 初始化框架
framework.install(Vue, {
config: config,
ViewUI: iview,
VueRouter: VueRouter,
Vuex: Vuex,
createPersistedState: null, // 如需持久化,需引入 vuex-persistedstate
componentMap: {} // 可添加自定义组件映射
})
// 创建 Vue 实例
const app = new Vue({
router: framework.router,
store: framework.store,
render: h => h('router-view')
})
// 挂载应用
app.$mount('#app')
// 将 app 实例挂载到 window方便调试
window.app = app
window.rootVue = app
console.log('Admin Framework Demo 启动成功!')
console.log('框架实例:', framework)
console.log('路由实例:', framework.router)
console.log('Store 实例:', framework.store)
</script>
</body>
</html>

203
demo/package-lock.json generated
View File

@@ -21,6 +21,8 @@
"css-loader": "^5.0.0", "css-loader": "^5.0.0",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"less": "^4.1.0",
"less-loader": "^10.0.0",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"vue-loader": "^15.9.0", "vue-loader": "^15.9.0",
"vue-style-loader": "^4.1.0", "vue-style-loader": "^4.1.0",
@@ -2904,6 +2906,19 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/copy-anything": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-what": "^3.14.1"
},
"funding": {
"url": "https://github.com/sponsors/mesqueeb"
}
},
"node_modules/core-js-compat": { "node_modules/core-js-compat": {
"version": "3.45.1", "version": "3.45.1",
"resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.45.1.tgz", "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.45.1.tgz",
@@ -3331,6 +3346,20 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/errno": {
"version": "0.1.8",
"resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"prr": "~1.0.1"
},
"bin": {
"errno": "cli.js"
}
},
"node_modules/es-define-property": { "node_modules/es-define-property": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz", "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -4290,6 +4319,20 @@
"postcss": "^8.1.0" "postcss": "^8.1.0"
} }
}, },
"node_modules/image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
"dev": true,
"license": "MIT",
"optional": true,
"bin": {
"image-size": "bin/image-size.js"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/import-local": { "node_modules/import-local": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmmirror.com/import-local/-/import-local-3.2.0.tgz", "resolved": "https://registry.npmmirror.com/import-local/-/import-local-3.2.0.tgz",
@@ -4466,6 +4509,13 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/is-what": {
"version": "3.14.1",
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
"dev": true,
"license": "MIT"
},
"node_modules/is-wsl": { "node_modules/is-wsl": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz", "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -4581,6 +4631,16 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/klona": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
"integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 8"
}
},
"node_modules/launch-editor": { "node_modules/launch-editor": {
"version": "2.11.1", "version": "2.11.1",
"resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.11.1.tgz", "resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.11.1.tgz",
@@ -4592,6 +4652,80 @@
"shell-quote": "^1.8.3" "shell-quote": "^1.8.3"
} }
}, },
"node_modules/less": {
"version": "4.4.2",
"resolved": "https://registry.npmmirror.com/less/-/less-4.4.2.tgz",
"integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"copy-anything": "^2.0.1",
"parse-node-version": "^1.0.1",
"tslib": "^2.3.0"
},
"bin": {
"lessc": "bin/lessc"
},
"engines": {
"node": ">=14"
},
"optionalDependencies": {
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"make-dir": "^2.1.0",
"mime": "^1.4.1",
"needle": "^3.1.0",
"source-map": "~0.6.0"
}
},
"node_modules/less-loader": {
"version": "10.2.0",
"resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-10.2.0.tgz",
"integrity": "sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==",
"dev": true,
"license": "MIT",
"dependencies": {
"klona": "^2.0.4"
},
"engines": {
"node": ">= 12.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"less": "^3.5.0 || ^4.0.0",
"webpack": "^5.0.0"
}
},
"node_modules/less/node_modules/make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"pify": "^4.0.1",
"semver": "^5.6.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/less/node_modules/semver": {
"version": "5.7.2",
"resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"license": "ISC",
"optional": true,
"bin": {
"semver": "bin/semver"
}
},
"node_modules/loader-runner": { "node_modules/loader-runner": {
"version": "4.3.1", "version": "4.3.1",
"resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.1.tgz", "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.1.tgz",
@@ -4886,6 +5020,38 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
} }
}, },
"node_modules/needle": {
"version": "3.3.1",
"resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"iconv-lite": "^0.6.3",
"sax": "^1.2.4"
},
"bin": {
"needle": "bin/needle"
},
"engines": {
"node": ">= 4.4.x"
}
},
"node_modules/needle/node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/negotiator": { "node_modules/negotiator": {
"version": "0.6.4", "version": "0.6.4",
"resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.4.tgz", "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.4.tgz",
@@ -5118,6 +5284,16 @@
"tslib": "^2.0.3" "tslib": "^2.0.3"
} }
}, },
"node_modules/parse-node-version": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.10"
}
},
"node_modules/parseurl": { "node_modules/parseurl": {
"version": "1.3.3", "version": "1.3.3",
"resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz", "resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz",
@@ -5202,6 +5378,17 @@
"url": "https://github.com/sponsors/jonschlinkert" "url": "https://github.com/sponsors/jonschlinkert"
} }
}, },
"node_modules/pify": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"dev": true,
"license": "MIT",
"optional": true,
"engines": {
"node": ">=6"
}
},
"node_modules/pkg-dir": { "node_modules/pkg-dir": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz", "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -5396,6 +5583,14 @@
"node": ">= 0.10" "node": ">= 0.10"
} }
}, },
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
"dev": true,
"license": "MIT",
"optional": true
},
"node_modules/pseudomap": { "node_modules/pseudomap": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz", "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -5704,6 +5899,14 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/sax": {
"version": "1.4.3",
"resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.3.tgz",
"integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
"dev": true,
"license": "BlueOak-1.0.0",
"optional": true
},
"node_modules/schema-utils": { "node_modules/schema-utils": {
"version": "2.7.1", "version": "2.7.1",
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz", "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",

View File

@@ -21,6 +21,8 @@
"css-loader": "^5.0.0", "css-loader": "^5.0.0",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"less": "^4.1.0",
"less-loader": "^10.0.0",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"vue-loader": "^15.9.0", "vue-loader": "^15.9.0",
"vue-style-loader": "^4.1.0", "vue-style-loader": "^4.1.0",

View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Framework Demo</title> <title>Admin Framework </title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class SysAdServer { class SysAdServer {
async getAll(param) { async getAll(param) {

View File

@@ -11,7 +11,7 @@ class ai_messagesClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/ai_messages/export", row); let res = window.framework.http.fileExport("/ai_messages/export", row);
return res; return res;
} }

View File

@@ -1,6 +1,5 @@
import http from '@/libs/http'
export default { const gameCommentsServer = {
// 获取球局评论列表 // 获取球局评论列表
getGameCommentsList: (params) => { getGameCommentsList: (params) => {
return window.framework.http.post('/game_comments/page', params) return window.framework.http.post('/game_comments/page', params)
@@ -51,3 +50,13 @@ export default {
return window.framework.http.get('/game_comments/replies', params) return window.framework.http.get('/game_comments/replies', params)
} }
} }
// 添加简写方法名别名,保持向后兼容
gameCommentsServer.page = gameCommentsServer.getGameCommentsList
gameCommentsServer.all = gameCommentsServer.getAllGameComments
gameCommentsServer.add = gameCommentsServer.addGameComment
gameCommentsServer.edit = gameCommentsServer.updateGameComment
gameCommentsServer.del = gameCommentsServer.deleteGameComment
gameCommentsServer.exportCsv = gameCommentsServer.exportGameComments
export default gameCommentsServer

View File

@@ -1,6 +1,6 @@
import http from '@/libs/http'
export default {
const gameParticipantsServer = {
// 获取球局参与者列表 // 获取球局参与者列表
getGameParticipantsList: (params) => { getGameParticipantsList: (params) => {
return window.framework.http.post('/game_participants/page', params) return window.framework.http.post('/game_participants/page', params)
@@ -46,3 +46,13 @@ export default {
return window.framework.http.post('/game_participants/update_status', params) return window.framework.http.post('/game_participants/update_status', params)
} }
} }
// 添加简写方法名别名,保持向后兼容
gameParticipantsServer.page = gameParticipantsServer.getGameParticipantsList
gameParticipantsServer.all = gameParticipantsServer.getAllGameParticipants
gameParticipantsServer.add = gameParticipantsServer.addGameParticipant
gameParticipantsServer.edit = gameParticipantsServer.updateGameParticipant
gameParticipantsServer.del = gameParticipantsServer.deleteGameParticipant
gameParticipantsServer.exportCsv = gameParticipantsServer.exportGameParticipants
export default gameParticipantsServer

View File

@@ -11,7 +11,7 @@ class gamesClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/gme_games/export", row); let res = window.framework.http.fileExport("/gme_games/export", row);
return res; return res;
} }

View File

@@ -13,7 +13,7 @@ class paymentOrdersClServer {
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/pay_orders/export", row); let res = window.framework.http.fileExport("/pay_orders/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
// 获取资源列表(分页) // 获取资源列表(分页)
export function getList(params) { export function getList(params) {
@@ -22,7 +22,7 @@ export function del(params) {
// 导出资源 // 导出资源
export function exportData(params) { export function exportData(params) {
return http.fileExport('/gal_resources/export', params) return window.framework.http.fileExport('/gal_resources/export', params)
} }
// 获取所有资源 // 获取所有资源

View File

@@ -13,7 +13,7 @@ class venuesClServer {
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/ven_venues/export", row); let res = window.framework.http.fileExport("/ven_venues/export", row);
return res; return res;
} }

View File

@@ -12,7 +12,7 @@ class walletTransactionsClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/wch_wallet_transactions/export", row); let res = window.framework.http.fileExport("/wch_wallet_transactions/export", row);
return res; return res;
} }

View File

@@ -12,7 +12,7 @@ class walletsClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/wch_wallets/export", row); let res = window.framework.http.fileExport("/wch_wallets/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,3 @@
class wch_usersClServer { class wch_usersClServer {
async all(param) { async all(param) {
let res= await window.framework.http.get('/wch_users/all', param); let res= await window.framework.http.get('/wch_users/all', param);
@@ -13,7 +12,7 @@ class wch_usersClServer {
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/wch_users/export", row); let res = window.framework.http.fileExport("/wch_users/export", row);
return res; return res;
} }

View File

@@ -1,33 +1,24 @@
import request from '@/libs/http' /**
* 业务游戏管理 API
*
* 使用说明:
* 1. 不需要 import http
* 2. 直接使用 window.framework.http 调用接口
* 3. 所有方法返回 Promise
*/
export const getList = (params) => { export const getList = (params) => {
return request({ return window.framework.http.get('/business/games/page', params)
url: '/business/games/page',
method: 'get',
params
})
} }
export const add = (data) => { export const add = (data) => {
return request({ return window.framework.http.post('/business/games/add', data)
url: '/business/games',
method: 'post',
data
})
} }
export const edit = (data) => { export const edit = (data) => {
return request({ return window.framework.http.post('/business/games/edit', data)
url: '/business/games',
method: 'put',
data
})
} }
export const del = (params) => { export const del = (params) => {
return request({ return window.framework.http.post('/business/games/del', params)
url: '/business/games',
method: 'delete',
params
})
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取热门城市二维码配置列表 // 获取热门城市二维码配置列表

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取列表(分页) // 获取列表(分页)

View File

@@ -13,7 +13,7 @@ class infoClServer {
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/inf_info/export", row); let res = window.framework.http.fileExport("/inf_info/export", row);
return res; return res;
} }

View File

@@ -13,7 +13,7 @@ class info_typeClServer {
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/inf_info_type/export", row); let res = window.framework.http.fileExport("/inf_info_type/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class HomeServer { class HomeServer {
// 获取订单统计 // 获取订单统计
async getOderCount() { async getOderCount() {

View File

@@ -1,9 +1,9 @@
import http from '@/libs/http'
export default { export default {
// 获取消息通知列表 // 获取消息通知列表
page: (params) => { page: (params) => {
return http.post('/msg_notifications/page', params) return window.framework.http.post('/msg_notifications/page', params)
}, },
// 新增消息通知 // 新增消息通知

View File

@@ -11,7 +11,7 @@ class ntr_questionsClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/ntr_questions/export", row); let res = window.framework.http.fileExport("/ntr_questions/export", row);
return res; return res;
} }

View File

@@ -11,7 +11,7 @@ class ntr_recordsClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/ntr_records/export", row); let res = window.framework.http.fileExport("/ntr_records/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取冻结资金列表 // 获取冻结资金列表

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取订单状态列表 // 获取订单状态列表

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取支付订单列表 // 获取支付订单列表

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取支付统计数据 // 获取支付统计数据

View File

@@ -11,7 +11,7 @@ class transfer_detailsClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/transfer_details/export", row); let res = window.framework.http.fileExport("/transfer_details/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取钱包交易记录列表 // 获取钱包交易记录列表

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取用户钱包列表 // 获取用户钱包列表

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取提现审核列表 // 获取提现审核列表

View File

@@ -1,33 +1,24 @@
import request from '@/libs/http' /**
* 系统文件管理 API
*
* 使用说明:
* 1. 不需要 import http
* 2. 直接使用 window.framework.http 调用接口
* 3. 所有方法返回 Promise
*/
export const getList = (params) => { export const getList = (params) => {
return request({ return window.framework.http.get('/sys_file/page', params)
url: '/sys_file/page',
method: 'get',
params
})
} }
export const add = (data) => { export const add = (data) => {
return request({ return window.framework.http.post('/sys_file/add', data)
url: '/sys_file',
method: 'post',
data
})
} }
export const edit = (data) => { export const edit = (data) => {
return request({ return window.framework.http.post('/sys_file/edit', data)
url: '/sys_file',
method: 'put',
data
})
} }
export const del = (params) => { export const del = (params) => {
return request({ return window.framework.http.post('/sys_file/del', params)
url: '/sys_file',
method: 'delete',
params
})
} }

View File

@@ -1,57 +1,41 @@
import http from '@/libs/http'
/**
* 球局统计 API
*
* 使用说明:
* 1. 不需要 import http
* 2. 直接使用 window.framework.http 调用接口
* 3. 所有方法返回 Promise
*/
// 获取球局统计列表 // 获取球局统计列表
export const getList = (params) => { export const getList = (params) => {
return http.request({ return window.framework.http.post('/admin/game_statistics/list', params)
url: '/admin/game_statistics/list',
method: 'post',
data: params
})
} }
// 获取球局统计详情 // 获取球局统计详情
export const getDetail = (params) => { export const getDetail = (params) => {
return http.request({ return window.framework.http.post('/admin/game_statistics/detail', params)
url: '/admin/game_statistics/detail',
method: 'post',
data: params
})
} }
// 添加球局统计 // 添加球局统计
export const add = (params) => { export const add = (params) => {
return http.request({ return window.framework.http.post('/admin/game_statistics/add', params)
url: '/admin/game_statistics/add',
method: 'post',
data: params
})
} }
// 编辑球局统计 // 编辑球局统计
export const edit = (params) => { export const edit = (params) => {
return http.request({ return window.framework.http.post('/admin/game_statistics/edit', params)
url: '/admin/game_statistics/edit',
method: 'post',
data: params
})
} }
// 删除球局统计 // 删除球局统计
export const del = (params) => { export const del = (params) => {
return http.request({ return window.framework.http.post('/admin/game_statistics/del', params)
url: '/admin/game_statistics/del',
method: 'post',
data: params
})
} }
// 导出球局统计 // 导出球局统计
export const exportData = (params) => { export const exportData = (params) => {
return http.request({ return window.framework.http.fileExport('/admin/game_statistics/export', params)
url: '/admin/game_statistics/export',
method: 'post',
data: params,
responseType: 'blob'
})
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取资源列表 // 获取资源列表

View File

@@ -1,66 +1,46 @@
import http from '@/libs/http'
/**
* 营收统计 API
*
* 使用说明:
* 1. 不需要 import http
* 2. 直接使用 window.framework.http 调用接口
* 3. 所有方法返回 Promise
*/
// 获取营收统计列表 // 获取营收统计列表
export const getList = (params) => { export const getList = (params) => {
return http.request({ return window.framework.http.post('/admin/revenue_statistics/list', params)
url: '/admin/revenue_statistics/list',
method: 'post',
data: params
})
} }
// 获取营收统计详情 // 获取营收统计详情
export const getDetail = (params) => { export const getDetail = (params) => {
return http.request({ return window.framework.http.post('/admin/revenue_statistics/detail', params)
url: '/admin/revenue_statistics/detail',
method: 'post',
data: params
})
} }
// 获取营收统计概览 // 获取营收统计概览
export const getOverview = (params) => { export const getOverview = (params) => {
return http.request({ return window.framework.http.post('/admin/revenue_statistics/overview', params)
url: '/admin/revenue_statistics/overview',
method: 'post',
data: params
})
} }
// 添加营收统计 // 添加营收统计
export const add = (params) => { export const add = (params) => {
return http.request({ return window.framework.http.post('/admin/revenue_statistics/add', params)
url: '/admin/revenue_statistics/add',
method: 'post',
data: params
})
} }
// 编辑营收统计 // 编辑营收统计
export const edit = (params) => { export const edit = (params) => {
return http.request({ return window.framework.http.post('/admin/revenue_statistics/edit', params)
url: '/admin/revenue_statistics/edit',
method: 'post',
data: params
})
} }
// 删除营收统计 // 删除营收统计
export const del = (params) => { export const del = (params) => {
return http.request({ return window.framework.http.post('/admin/revenue_statistics/del', params)
url: '/admin/revenue_statistics/del',
method: 'post',
data: params
})
} }
// 导出营收统计 // 导出营收统计
export const exportData = (params) => { export const exportData = (params) => {
return http.request({ return window.framework.http.fileExport('/admin/revenue_statistics/export', params)
url: '/admin/revenue_statistics/export',
method: 'post',
data: params,
responseType: 'blob'
})
} }

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class FileServe { class FileServe {
async upload_oos_img(row) { async upload_oos_img(row) {
let res = await window.framework.http.postFormData("/sys_file/upload_oos_img", row); let res = await window.framework.http.postFormData("/sys_file/upload_oos_img", row);

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class FormFieldServer { class FormFieldServer {
async all(param) { async all(param) {
let res = await window.framework.http.get("/sys_form_field/all", param); let res = await window.framework.http.get("/sys_form_field/all", param);

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class FormServer { class FormServer {
async all(param) { async all(param) {
let res = await window.framework.http.get("/sys_form/all", param); let res = await window.framework.http.get("/sys_form/all", param);

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'; ;
/** /**
* 热门城市二维码配置相关API * 热门城市二维码配置相关API

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class MenuServer { class MenuServer {
async list(row) { async list(row) {

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class ModelFieldServer { class ModelFieldServer {
async all(row) { async all(row) {
let res = await window.framework.http.get("/sys_model_field/all", row); let res = await window.framework.http.get("/sys_model_field/all", row);

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class ModelServer { class ModelServer {
async interface(row) { async interface(row) {
let res = await window.framework.http.post("/sys_model/interface", row); let res = await window.framework.http.post("/sys_model/interface", row);

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class ParamSetupServer { class ParamSetupServer {
async getAll() { async getAll() {
return await window.framework.http.get("/sys_parameter/index", {}); return await window.framework.http.get("/sys_parameter/index", {});

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取所有平台账户 // 获取所有平台账户

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
class RolePermissionServer { class RolePermissionServer {
async getRoles(callback) { async getRoles(callback) {
let res = await window.framework.http.get('/SysRolePermission/Query', {}) let res = await window.framework.http.get('/SysRolePermission/Query', {})

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class RoleServer { class RoleServer {
async list() { async list() {
let res = await window.framework.http.get("/sys_role/index", {}); let res = await window.framework.http.get("/sys_role/index", {});

View File

@@ -1,15 +0,0 @@
import http from '@/libs/http'
class ShpProfitServer {
async report(param) {
let res = await window.framework.http.post('/shpProfit/report', param)
return res
}
async list(param) {
let res = await window.framework.http.post('/shpProfit/list', param)
return res
}
}
const shpProfitServer = new ShpProfitServer()
export default shpProfitServer

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
class SpecificationServer { class SpecificationServer {
async list() { async list() {
let res = await window.framework.http.post('/specification/list', {}) let res = await window.framework.http.post('/specification/list', {})

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class SysAddress { class SysAddress {
async index(param) { async index(param) {
let res = await window.framework.http.get("/sys_address/index", param); let res = await window.framework.http.get("/sys_address/index", param);

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class SysModuleServer { class SysModuleServer {
async all() { async all() {
let res = await window.framework.http.get("/sys_menu/all", {}); let res = await window.framework.http.get("/sys_menu/all", {});

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class SysLogServe { class SysLogServe {
async all(param) { async all(param) {
let res = await window.framework.http.get("/sys_log/all", param); let res = await window.framework.http.get("/sys_log/all", param);

View File

@@ -13,7 +13,7 @@ class systemTypeClServer {
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/sys_project_type/export", row); let res = window.framework.http.fileExport("/sys_project_type/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
class TableServer { class TableServer {
async getAll(callback) { async getAll(callback) {
return await window.framework.http.get('/table/index', {}) return await window.framework.http.get('/table/index', {})

View File

@@ -1,4 +1,4 @@
import http from "@/libs/http";
class UserServer { class UserServer {
async login(row) { async login(row) {
let res = await window.framework.http.post("/sys_user/login", row); let res = await window.framework.http.post("/sys_user/login", row);
@@ -11,7 +11,7 @@ class UserServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/sys_user/export", row); let res = window.framework.http.fileExport("/sys_user/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取职业列表 // 获取职业列表

View File

@@ -1,29 +0,0 @@
import http from "@/libs/http";
class SysControlTypeServer {
async all(param) {
let res = await window.framework.http.get("/sys_control_type/all", param);
return res;
}
async page(row) {
let res = await window.framework.http.post("/sys_control_type/page", row);
return res;
}
async add(param) {
let res = await window.framework.http.post("/sys_control_type/add", param);
return res;
}
async edit(param) {
let res = await window.framework.http.post("/sys_control_type/edit", param);
return res;
}
async del(param) {
let res = await window.framework.http.post("/sys_control_type/del", param);
return res;
}
}
const sysControlTypeServer = new SysControlTypeServer();
export default sysControlTypeServer;

View File

@@ -11,7 +11,7 @@ class recommend_blocksClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/recommend_blocks/export", row); let res = window.framework.http.fileExport("/recommend_blocks/export", row);
return res; return res;
} }

View File

@@ -11,7 +11,7 @@ class user_followsClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/user_follows/export", row); let res = window.framework.http.fileExport("/user_follows/export", row);
return res; return res;
} }

View File

@@ -11,7 +11,7 @@ class user_trackingClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/user_tracking/export", row); let res = window.framework.http.fileExport("/user_tracking/export", row);
return res; return res;
} }

View File

@@ -1,4 +1,4 @@
import http from '@/libs/http'
export default { export default {
// 获取城市列表 // 获取城市列表

View File

@@ -11,7 +11,7 @@ class wch_citiesClServer {
} }
async exportCsv(row) { async exportCsv(row) {
let res = http.fileExport("/wch_cities/export", row); let res = window.framework.http.fileExport("/wch_cities/export", row);
return res; return res;
} }

View File

@@ -1,171 +0,0 @@
<template>
<div style="padding: 20px;">
<Card>
<p slot="title">
<Icon type="ios-cube" />
自定义页面示例
</p>
<div style="margin-bottom: 20px;">
<Alert type="success" show-icon>
这是一个自定义页面组件示例展示如何在 Admin Framework 中添加自定义页面
</Alert>
</div>
<Row :gutter="16">
<Col span="12">
<Card title="基本信息" style="margin-bottom: 16px;">
<p><strong>当前时间:</strong> {{ currentTime }}</p>
<p><strong>页面路径:</strong> {{ $route.path }}</p>
<p><strong>框架版本:</strong> {{ framework.version }}</p>
</Card>
</Col>
<Col span="12">
<Card title="Vuex 状态" style="margin-bottom: 16px;">
<p><strong>自定义数据:</strong> {{ customData }}</p>
<p><strong>计数器:</strong> {{ count }}</p>
<div style="margin-top: 10px;">
<Button type="primary" @click="handleIncrement">增加计数</Button>
<Button type="default" @click="handleIncrementAsync" style="margin-left: 8px;">
异步增加
</Button>
</div>
</Card>
</Col>
</Row>
<Card title="API 测试" style="margin-bottom: 16px;">
<Form :label-width="80">
<FormItem label="请求地址">
<Input v-model="apiUrl" placeholder="输入 API 地址" />
</FormItem>
<FormItem>
<Button type="primary" @click="handleApiTest" :loading="apiLoading">
发送请求
</Button>
<Button @click="handleClear" style="margin-left: 8px;">清空结果</Button>
</FormItem>
<FormItem label="响应结果" v-if="apiResult">
<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px;">{{ apiResult }}</pre>
</FormItem>
</Form>
</Card>
<Card title="UI 工具测试">
<Button type="success" @click="showSuccess">成功提示</Button>
<Button type="warning" @click="showWarning" style="margin-left: 8px;">警告提示</Button>
<Button type="error" @click="showError" style="margin-left: 8px;">错误提示</Button>
<Button type="info" @click="showConfirm" style="margin-left: 8px;">确认对话框</Button>
</Card>
</Card>
</div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
name: 'CustomPage',
data() {
return {
currentTime: new Date().toLocaleString(),
timer: null,
apiUrl: '/api/test',
apiLoading: false,
apiResult: null,
framework: window.framework
}
},
computed: {
...mapGetters('custom', ['customData', 'count'])
},
methods: {
...mapMutations('custom', ['INCREMENT']),
...mapActions('custom', ['incrementAsync', 'updateCustomData']),
// 增加计数
handleIncrement() {
this.INCREMENT()
this.$Message.success('计数已增加')
},
// 异步增加
handleIncrementAsync() {
this.$Message.info('1秒后增加计数...')
this.incrementAsync()
},
// API 测试
async handleApiTest() {
this.apiLoading = true
this.apiResult = null
try {
const response = await this.$http.get(this.apiUrl)
this.apiResult = JSON.stringify(response.data, null, 2)
this.$Message.success('请求成功')
} catch (error) {
this.apiResult = JSON.stringify({
error: error.message,
details: error.toString()
}, null, 2)
this.$Message.error('请求失败: ' + error.message)
} finally {
this.apiLoading = false
}
},
// 清空结果
handleClear() {
this.apiResult = null
},
// UI 工具测试
showSuccess() {
this.$uiTool.success('这是一个成功提示')
},
showWarning() {
this.$uiTool.warning('这是一个警告提示')
},
showError() {
this.$uiTool.error('这是一个错误提示')
},
showConfirm() {
this.$uiTool.confirm('确定要执行此操作吗?').then(() => {
this.$Message.success('已确认')
}).catch(() => {
this.$Message.info('已取消')
})
}
},
mounted() {
// 定时更新时间
this.timer = setInterval(() => {
this.currentTime = new Date().toLocaleString()
}, 1000)
console.log('CustomPage 组件已挂载')
console.log('可用的工具函数:', this.$tools)
console.log('可用的 UI 工具:', this.$uiTool)
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
}
}
}
</script>
<style scoped>
pre {
margin: 0;
font-size: 12px;
max-height: 300px;
overflow: auto;
}
</style>

View File

View File

@@ -1,88 +1,22 @@
// 引入依赖 // 开发环境直接引用源码以支持热更新
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ViewUI from 'view-design'
import axios from 'axios'
// 引入样式
import 'view-design/dist/styles/iview.css'
// 引入 Admin Framework使用本地构建的文件
import AdminFramework from '../../dist/admin-framework.js' import AdminFramework from '../../dist/admin-framework.js'
// 引入组件映射表 // 引入组件映射表
import componentMap from './router/component-map.js' import componentMap from './router/component-map.js'
// 使用插件 // 【超级简化】只需一个函数调用!
Vue.use(ViewUI) const app = AdminFramework.createApp({
title: 'tennis管理系统',
// 配置参数 apiUrl: 'http://localhost:9098/admin_api/', // API 地址uploadUrl 会自动设置为 apiUrl + 'upload'
const config = { componentMap: componentMap, // 传入组件映射表,用于动态路由
title: 'Admin Framework Demo', onReady() {
apiUrl: 'http://localhost:9098/admin_api/', // 修改为你的 API 地址 // 可选:应用启动完成后的回调
uploadUrl: 'http://localhost:9098/admin_api/upload' // 修改为你的上传地址 console.log('应用已准备就绪!')
}
// 初始化框架
AdminFramework.install(Vue, {
config: config,
ViewUI: ViewUI,
VueRouter: VueRouter,
Vuex: Vuex,
createPersistedState: null,
componentMap: componentMap // 传入组件映射表,用于动态路由
})
// 创建 Vue 实例
const app = new Vue({
router: AdminFramework.router,
store: AdminFramework.store,
render: h => h('router-view'),
async created() {
console.log('=== Admin Framework Demo 启动成功 ===')
console.log('框架版本:', AdminFramework.version)
console.log('配置信息:', this.$config)
// 刷新时恢复菜单和标题
const token = this.$store.state.user.token
const authorityMenus = localStorage.getItem('authorityMenus')
if (token && authorityMenus) {
console.log('检测到登录状态,恢复菜单和标题...')
try {
// 先恢复菜单
await this.$store.dispatch('user/setAuthorityMenus', {
Main: AdminFramework.Main,
ParentView: AdminFramework.ParentView,
Page404: AdminFramework.Page404,
authorityMenus: authorityMenus
})
console.log('菜单恢复成功')
// 再获取系统标题(已登录,会从接口获取)
await this.$store.dispatch('app/getSysTitle', {
defaultTitle: this.$config.title,
defaultLogo: ''
})
} catch (error) {
console.error('恢复失败:', error)
}
} else {
// 未登录,使用默认标题
console.log('未登录,使用默认标题')
document.title = this.$config.title
}
} }
}) })
// 挂载应用 // 挂载应用
app.$mount('#app') app.$mount('#app')
// 全局暴露(方便调试)
window.app = app
window.rootVue = app
window.framework = AdminFramework

View File

@@ -35,73 +35,61 @@ import Resources from '../views/statistics/resources.vue'
import RecommendBlocks from '../views/users/recommend_blocks.vue' import RecommendBlocks from '../views/users/recommend_blocks.vue'
import UserFollows from '../views/users/user_follows.vue' import UserFollows from '../views/users/user_follows.vue'
import UserTracking from '../views/users/user_tracking.vue' import UserTracking from '../views/users/user_tracking.vue'
import WchCities from '../views/users/wch_cities.vue'
import WchProfessions from '../views/users/wch_professions.vue'
// ========== 自定义组件 ==========
import CustomPage from '../components/CustomPage.vue'
/** /**
* 组件映射对象 * 组件映射对象
* key: 后端返回的组件路径(去掉 .vue 后缀或保留都可以) *
* ✅ 重要提示:只需传递不带 .vue 后缀的路径!
* 框架会自动为每个组件创建带 .vue 和不带 .vue 的两个映射
*
* 例如:'ai/ai_messages': AiMessages
* 框架自动处理为:
* - 'ai/ai_messages' → AiMessages
* - 'ai/ai_messages.vue' → AiMessages (自动添加)
*
* key: 后端返回的组件路径(不带 .vue 后缀)
* value: 实际的 Vue 组件 * value: 实际的 Vue 组件
*/ */
const componentMap = { const componentMap = {
// ===== AI 模块 ===== // ===== AI 模块 =====
'ai/ai_messages': AiMessages, 'ai/ai_messages': AiMessages,
'ai/ai_messages.vue': AiMessages,
// ===== 球场模块 ===== // ===== 球场模块 =====
'ball/game_comments': GameComments, 'ball/game_comments': GameComments,
'ball/game_comments.vue': GameComments,
'ball/game_participants': GameParticipants, 'ball/game_participants': GameParticipants,
'ball/game_participants.vue': GameParticipants,
'ball/games': Games, 'ball/games': Games,
'ball/games.vue': Games,
'ball/venues': Venues, 'ball/venues': Venues,
'ball/venues.vue': Venues,
'ball/wch_users': WchUsers, 'ball/wch_users': WchUsers,
'ball/wch_users.vue': WchUsers,
// ===== 业务模块 ===== // ===== 业务模块 =====
'business/hot_city_qr': HotCityQr, 'business/hot_city_qr': HotCityQr,
'business/hot_city_qr.vue': HotCityQr,
// ===== 消息模块 ===== // ===== 消息模块 =====
'message/msg_notifications': MsgNotifications, 'message/msg_notifications': MsgNotifications,
'message/msg_notifications.vue': MsgNotifications,
// ===== NTRP 模块 ===== // ===== NTRP 模块 =====
'ntrp/ntr_questions': NtrQuestions, 'ntrp/ntr_questions': NtrQuestions,
'ntrp/ntr_questions.vue': NtrQuestions,
'ntrp/ntr_records': NtrRecords, 'ntrp/ntr_records': NtrRecords,
'ntrp/ntr_records.vue': NtrRecords,
// ===== 订单模块 ===== // ===== 订单模块 =====
'order/frozen_funds': FrozenFunds, 'order/frozen_funds': FrozenFunds,
'order/frozen_funds.vue': FrozenFunds,
'order/pay_orders': PayOrders, 'order/pay_orders': PayOrders,
'order/pay_orders.vue': PayOrders,
'order/transfer_details': TransferDetails, 'order/transfer_details': TransferDetails,
'order/transfer_details.vue': TransferDetails,
'order/wallet_transactions': WalletTransactions, 'order/wallet_transactions': WalletTransactions,
'order/wallet_transactions.vue': WalletTransactions,
'order/wch_wallets': WchWallets, 'order/wch_wallets': WchWallets,
'order/wch_wallets.vue': WchWallets,
// ===== 统计模块 ===== // ===== 统计模块 =====
'statistics/resources': Resources, 'statistics/resources': Resources,
'statistics/resources.vue': Resources,
// ===== 用户模块 ===== // ===== 用户模块 =====
'users/recommend_blocks': RecommendBlocks, 'users/recommend_blocks': RecommendBlocks,
'users/recommend_blocks.vue': RecommendBlocks,
'users/user_follows': UserFollows, 'users/user_follows': UserFollows,
'users/user_follows.vue': UserFollows,
'users/user_tracking': UserTracking, 'users/user_tracking': UserTracking,
'users/user_tracking.vue': UserTracking, 'users/wch_cities': WchCities,
'users/wch_professions': WchProfessions,
// ===== 自定义组件 =====
'custom/page': CustomPage,
'custom/page.vue': CustomPage
} }
export default componentMap export default componentMap

View File

@@ -40,8 +40,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import ai_messagesServer from '@/api/ai/ai_messages_server.js' import ai_messagesServer from '@/api/ai/ai_messages_server.js'
export default { export default {
data() { data() {
@@ -102,7 +102,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -138,15 +138,15 @@ export default {
this.$refs.editModal.showModal(row); this.$refs.editModal.showModal(row);
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await ai_messagesServer.del(row) await ai_messagesServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
}) })
}, },
exportCsv() { exportCsv() {
ai_messagesServer.exportCsv(this.gridOption.param).then(res => { ai_messagesServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, 'AI消息管理.csv'); window.framework.tools.downloadFile(res, 'AI消息管理.csv');
}); });
}, },
resetQuery() { resetQuery() {

View File

@@ -33,8 +33,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import game_commentsServer from '@/api/ball/game_comments_server.js' import game_commentsServer from '@/api/ball/game_comments_server.js'
export default { export default {
data() { data() {
@@ -96,7 +96,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -131,9 +131,9 @@ export default {
this.$refs.editModal.showModal(row); this.$refs.editModal.showModal(row);
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await game_commentsServer.del(row) await game_commentsServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
}) })
}, },
@@ -147,7 +147,7 @@ export default {
}, },
exportCsv() { exportCsv() {
game_commentsServer.exportCsv(this.gridOption.param).then(res => { game_commentsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '球局评论.csv'); window.framework.tools.downloadFile(res, '球局评论.csv');
}); });
} }
}, },

View File

@@ -39,9 +39,9 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js' import menuServer from '@/api/system/menuServer.js'
import gameParticipantsServer from '@/api/ball/game_participants_server.js' import gameParticipantsServer from '@/api/ball/game_participants_server.js'
export default { export default {
data() { data() {
@@ -204,7 +204,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
},], },],
data: [] data: []
@@ -270,7 +270,7 @@ export default {
'joined_at': 'CURRENT_TIMESTAMP' 'joined_at': 'CURRENT_TIMESTAMP'
}, async (newRow) => { }, async (newRow) => {
let res = await gameParticipantsServer.add(newRow) let res = await gameParticipantsServer.add(newRow)
rootVue.$Message.success('新增成功!') this.$Message.success('新增成功!')
this.init() this.init()
}) })
}, },
@@ -282,15 +282,15 @@ export default {
let valid = await this.$refs['editModal'].$refs['From'].validate() let valid = await this.$refs['editModal'].$refs['From'].validate()
if (valid) { if (valid) {
let res = await gameParticipantsServer.edit(newRow) let res = await gameParticipantsServer.edit(newRow)
rootVue.$Message.success('修改成功!') this.$Message.success('修改成功!')
this.init() this.init()
} }
}) })
}, },
async delConfirm(row) { async delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await gameParticipantsServer.del(row) await gameParticipantsServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.init() this.init()
}) })
}, },

View File

@@ -48,9 +48,9 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js' import menuServer from '@/api/system/menuServer.js'
import gamesServer from '@/api/ball/games_server.js' import gamesServer from '@/api/ball/games_server.js'
export default { export default {
data() { data() {
@@ -423,7 +423,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
},], },],
data: [] data: []
@@ -513,7 +513,7 @@ export default {
'remark': '' 'remark': ''
}, async (newRow) => { }, async (newRow) => {
let res = await gamesServer.add(newRow) let res = await gamesServer.add(newRow)
rootVue.$Message.success('新增成功!') this.$Message.success('新增成功!')
this.init() this.init()
}) })
}, },
@@ -522,15 +522,15 @@ export default {
let valid = await this.$refs['editModal'].$refs['From'].validate() let valid = await this.$refs['editModal'].$refs['From'].validate()
if (valid) { if (valid) {
let res = await gamesServer.edit(newRow) let res = await gamesServer.edit(newRow)
rootVue.$Message.success('修改成功!') this.$Message.success('修改成功!')
this.init() this.init()
} }
}) })
}, },
async delConfirm(row) { async delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await gamesServer.del(row) await gamesServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.init() this.init()
}) })
}, },

View File

@@ -48,9 +48,9 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js' import menuServer from '@/api/system/menuServer.js'
import venuesServer from '@/api/ball/venues_server.js' import venuesServer from '@/api/ball/venues_server.js'
export default { export default {
data() { data() {
@@ -198,7 +198,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
@@ -257,7 +257,7 @@ export default {
async showAddWarp() { async showAddWarp() {
this.$refs.editModal.addShow({ 'venue_type': 'indoor', 'surface_type': 'hard', 'court_count': '1', 'status': 'active', 'create_time': 'CURRENT_TIMESTAMP', 'updated_at': 'CURRENT_TIMESTAMP', }, async (newRow) => { this.$refs.editModal.addShow({ 'venue_type': 'indoor', 'surface_type': 'hard', 'court_count': '1', 'status': 'active', 'create_time': 'CURRENT_TIMESTAMP', 'updated_at': 'CURRENT_TIMESTAMP', }, async (newRow) => {
let res = await venuesServer.add(newRow) let res = await venuesServer.add(newRow)
rootVue.$Message.success('新增成功!') this.$Message.success('新增成功!')
this.init() this.init()
}) })
}, },
@@ -266,15 +266,15 @@ export default {
let valid = await this.$refs['editModal'].$refs['From'].validate() let valid = await this.$refs['editModal'].$refs['From'].validate()
if (valid) { if (valid) {
let res = await venuesServer.edit(newRow) let res = await venuesServer.edit(newRow)
rootVue.$Message.success('修改成功!') this.$Message.success('修改成功!')
this.init() this.init()
} }
}) })
}, },
async delConfirm(row) { async delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await venuesServer.del(row) await venuesServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.init() this.init()
}) })
}, },

View File

@@ -44,9 +44,9 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js' import menuServer from '@/api/system/menuServer.js'
import wch_usersServer from '@/api/ball/wch_users_server.js' import wch_usersServer from '@/api/ball/wch_users_server.js'
export default { export default {
data() { data() {
@@ -261,7 +261,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
},], },],
data: [] data: []
@@ -318,7 +318,7 @@ export default {
async showAddWarp() { async showAddWarp() {
this.$refs.editModal.addShow({ 'is_subscribed': '0', 'last_login_time': 'CURRENT_TIMESTAMP', 'create_time': 'CURRENT_TIMESTAMP', 'updated_at': 'CURRENT_TIMESTAMP', }, async (newRow) => { this.$refs.editModal.addShow({ 'is_subscribed': '0', 'last_login_time': 'CURRENT_TIMESTAMP', 'create_time': 'CURRENT_TIMESTAMP', 'updated_at': 'CURRENT_TIMESTAMP', }, async (newRow) => {
let res = await wch_usersServer.add(newRow) let res = await wch_usersServer.add(newRow)
rootVue.$Message.success('新增成功!') this.$Message.success('新增成功!')
this.init() this.init()
}) })
}, },
@@ -327,15 +327,15 @@ export default {
let valid = await this.$refs['editModal'].$refs['From'].validate() let valid = await this.$refs['editModal'].$refs['From'].validate()
if (valid) { if (valid) {
let res = await wch_usersServer.edit(newRow) let res = await wch_usersServer.edit(newRow)
rootVue.$Message.success('修改成功!') this.$Message.success('修改成功!')
this.init() this.init()
} }
}) })
}, },
async delConfirm(row) { async delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await wch_usersServer.del(row) await wch_usersServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.init() this.init()
}) })
}, },
@@ -349,7 +349,8 @@ export default {
this.query(1); this.query(1);
}, },
async exportCsv(row) { async exportCsv(row) {
await wch_usersServer.exportCsv(row) let res = await wch_usersServer.exportCsv(row)
} }
} }
} }

View File

@@ -31,8 +31,8 @@
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import hotCityQrServer from '@/api/business/hot_city_qr_server.js' import hotCityQrServer from '@/api/business/hot_city_qr_server.js'
export default { export default {
@@ -195,7 +195,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],

View File

@@ -41,8 +41,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import msg_notificationsServer from '@/api/message/msg_notifications_server.js' import msg_notificationsServer from '@/api/message/msg_notifications_server.js'
export default { export default {
data() { data() {
@@ -112,7 +112,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -156,7 +156,7 @@ export default {
this.$Message.info('发送功能暂未实现'); this.$Message.info('发送功能暂未实现');
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await msg_notificationsServer.del(row) await msg_notificationsServer.del(row)
this.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
@@ -164,7 +164,7 @@ export default {
}, },
exportCsv() { exportCsv() {
msg_notificationsServer.exportCsv(this.gridOption.param).then(res => { msg_notificationsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '消息通知.csv'); window.framework.tools.downloadFile(res, '消息通知.csv');
}); });
}, },
resetQuery() { resetQuery() {

View File

@@ -32,8 +32,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import ntr_questionsServer from '@/api/ntrp/ntr_questions_server.js' import ntr_questionsServer from '@/api/ntrp/ntr_questions_server.js'
export default { export default {
data() { data() {
@@ -119,7 +119,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -213,7 +213,7 @@ export default {
} }
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await ntr_questionsServer.del(row) await ntr_questionsServer.del(row)
this.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
@@ -229,7 +229,7 @@ export default {
}, },
exportCsv() { exportCsv() {
ntr_questionsServer.exportCsv(this.gridOption.param).then(res => { ntr_questionsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '题库管理.csv'); window.framework.tools.downloadFile(res, '题库管理.csv');
}); });
} }
}, },

View File

@@ -37,8 +37,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import ntr_recordsServer from '@/api/ntrp/ntr_records_server.js' import ntr_recordsServer from '@/api/ntrp/ntr_records_server.js'
export default { export default {
data() { data() {
@@ -125,7 +125,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -231,7 +231,7 @@ export default {
} }
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await ntr_recordsServer.del(row) await ntr_recordsServer.del(row)
this.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
@@ -246,9 +246,7 @@ export default {
this.query(1); this.query(1);
}, },
exportCsv() { exportCsv() {
ntr_recordsServer.exportCsv(this.gridOption.param).then(res => { ntr_recordsServer.exportCsv(this.gridOption.param)
funTool.downloadFile(res, '测试记录.csv');
});
} }
}, },
computed: { computed: {

View File

@@ -90,8 +90,8 @@
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import frozenFundsServer from '@/api/order/frozen_funds_server.js' import frozenFundsServer from '@/api/order/frozen_funds_server.js'
export default { export default {
@@ -222,7 +222,7 @@ export default {
} }
} }
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
} }
} }
] ]

View File

@@ -218,8 +218,8 @@
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import paymentOrdersServer from '@/api/order/payment_orders_server.js' import paymentOrdersServer from '@/api/order/payment_orders_server.js'
export default { export default {
@@ -366,7 +366,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
] ]
@@ -493,7 +493,7 @@ export default {
exportOrders() { exportOrders() {
paymentOrdersServer.exportPaymentOrders(this.gridOption.param).then(res => { paymentOrdersServer.exportPaymentOrders(this.gridOption.param).then(res => {
if (res.code === 0) { if (res.code === 0) {
funTool.downloadFile(res, '订单列表.csv') window.framework.funTool.downloadFile(res, '订单列表.csv')
} else { } else {
this.$Message.error(res.message || '导出失败') this.$Message.error(res.message || '导出失败')
} }

View File

@@ -33,8 +33,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import transfer_detailsServer from '@/api/order/transfer_details_server.js' import transfer_detailsServer from '@/api/order/transfer_details_server.js'
export default { export default {
data() { data() {
@@ -138,7 +138,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -184,7 +184,7 @@ export default {
this.$refs.editModal.showModal(row); this.$refs.editModal.showModal(row);
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
try { try {
const res = await transfer_detailsServer.del(row); const res = await transfer_detailsServer.del(row);
if (res.code === 0) { if (res.code === 0) {
@@ -203,7 +203,7 @@ export default {
try { try {
const res = await transfer_detailsServer.exportCsv(this.gridOption.param); const res = await transfer_detailsServer.exportCsv(this.gridOption.param);
if (res.code === 0) { if (res.code === 0) {
funTool.downloadFile(res.data, '转账详情.csv'); window.framework.funTool.downloadFile(res.data, '转账详情.csv');
} else { } else {
this.$Message.error(res.message || '导出失败'); this.$Message.error(res.message || '导出失败');
} }

View File

@@ -43,9 +43,9 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js' import menuServer from '@/api/system/menuServer.js'
import walletTransactionsServer from '@/api/ball/wallet_transactions_server.js' import walletTransactionsServer from '@/api/ball/wallet_transactions_server.js'
@@ -215,7 +215,7 @@ export default {
}, },
} }
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -255,7 +255,7 @@ export default {
}, },
exportCsv() { exportCsv() {
walletTransactionsServer.exportCsv(this.gridOption.param).then(res => { walletTransactionsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '交易记录.csv'); window.framework.funTool.downloadFile(res, '交易记录.csv');
}); });
}, },
resetQuery() { resetQuery() {

View File

@@ -165,8 +165,8 @@
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import wchWalletsServer from '@/api/order/wch_wallets_server.js' import wchWalletsServer from '@/api/order/wch_wallets_server.js'
export default { export default {
@@ -303,7 +303,7 @@ export default {
} }
} }
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
} }
} }
] ]

View File

@@ -55,8 +55,8 @@
<script> <script>
import { getList, add, edit, del, exportData } from '@/api/ball/resources_server' import { getList, add, edit, del, exportData } from '@/api/ball/resources_server'
import uiTool from '@/libs/uiTool'
import funTool from '@/libs/funTool'
export default { export default {
name: 'resources', name: 'resources',
@@ -230,7 +230,7 @@ export default {
} }
} }
]; ];
return uiTool.getBtn(h, btns); return window.framework.uiTool.getBtn(h, btns);
} }
} }
], ],
@@ -301,7 +301,7 @@ export default {
}, },
exportCsv() { exportCsv() {
exportData(this.gridOption.param).then(res => { exportData(this.gridOption.param).then(res => {
funTool.downloadFile(res, '资源管理.csv') window.framework.funTool.downloadFile(res, '资源管理.csv')
}) })
}, },
resetQuery() { resetQuery() {

View File

@@ -26,8 +26,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import recommend_blocksServer from '@/api/users/recommend_blocks_server.js' import recommend_blocksServer from '@/api/users/recommend_blocks_server.js'
export default { export default {
data() { data() {
@@ -43,7 +43,6 @@ export default {
{ key: 'blocked_user_id', value: '被屏蔽用户ID' }, { key: 'blocked_user_id', value: '被屏蔽用户ID' },
{ key: 'nickname', value: '用户昵称' } { key: 'nickname', value: '用户昵称' }
], ],
seachTypePlaceholder: '请选择搜索类型',
gridOption: { gridOption: {
param: { param: {
seachOption: { seachOption: {
@@ -88,14 +87,33 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
editColumns: [ editColumns: [
{ title: '用户ID', key: 'user_id', type: 'number', required: true }, {
{ title: '被屏蔽用户ID', key: 'blocked_user_id', type: 'number', required: true }, title: '用户ID',
{ title: '屏蔽时间', key: 'block_time', type: 'datetime' } key: 'user_id',
data_type: 'number',
com: 'InputNumber',
required: true,
is_show_edit: 1
},
{
title: '被屏蔽用户ID',
key: 'blocked_user_id',
data_type: 'number',
com: 'InputNumber',
required: true,
is_show_edit: 1
},
{
title: '屏蔽时间',
key: 'block_time',
com: 'DatePicker',
is_show_edit: 1
}
] ]
} }
}, },
@@ -117,15 +135,15 @@ export default {
this.$refs.editModal.showModal(row); this.$refs.editModal.showModal(row);
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await recommend_blocksServer.del(row) await recommend_blocksServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
}) })
}, },
exportCsv() { exportCsv() {
recommend_blocksServer.exportCsv(this.gridOption.param).then(res => { recommend_blocksServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '推荐屏蔽.csv'); window.framework.funTool.downloadFile(res, '推荐屏蔽.csv');
}); });
}, },
resetQuery() { resetQuery() {

View File

@@ -26,9 +26,6 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import user_followsServer from '@/api/users/user_follows_server.js' import user_followsServer from '@/api/users/user_follows_server.js'
export default { export default {
data() { data() {
@@ -44,7 +41,6 @@ export default {
{ key: 'following_id', value: '被关注者ID' }, { key: 'following_id', value: '被关注者ID' },
{ key: 'nickname', value: '用户昵称' } { key: 'nickname', value: '用户昵称' }
], ],
seachTypePlaceholder: '请选择搜索类型',
gridOption: { gridOption: {
param: { param: {
seachOption: { seachOption: {
@@ -89,14 +85,31 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
editColumns: [ editColumns: [
{ title: '关注者ID', key: 'follower_id', type: 'number', required: true }, {
{ title: '关注者ID', key: 'following_id', type: 'number', required: true }, title: '关注者ID',
{ title: '关注时间', key: 'follow_time', type: 'datetime' } key: 'follower_id',
data_type: 'number',
com: 'InputNumber',
is_show_edit: 1
},
{
title: '被关注者ID',
key: 'following_id',
data_type: 'number',
com: 'InputNumber',
is_show_edit: 1
},
{
title: '关注时间',
key: 'follow_time',
com: 'DatePicker',
is_show_edit: 1
}
] ]
} }
}, },
@@ -112,21 +125,33 @@ export default {
}); });
}, },
showAddWarp() { showAddWarp() {
this.$refs.editModal.showModal(); this.$refs.editModal.addShow({
'follower_id': null,
'following_id': null,
'follow_time': null
}, async (newRow) => {
let res = await user_followsServer.add(newRow)
this.$Message.success('新增成功!')
this.query(1)
})
}, },
showEditWarp(row) { showEditWarp(row) {
this.$refs.editModal.showModal(row); this.$refs.editModal.editShow(row, async (newRow) => {
let res = await user_followsServer.edit(newRow)
this.$Message.success('修改成功!')
this.query(1)
})
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await user_followsServer.del(row) await user_followsServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
}) })
}, },
exportCsv() { exportCsv() {
user_followsServer.exportCsv(this.gridOption.param).then(res => { user_followsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '用户关注关系.csv'); window.framework.funTool.downloadFile(res, '用户关注关系.csv');
}); });
}, },
resetQuery() { resetQuery() {

View File

@@ -34,8 +34,8 @@
</div> </div>
</template> </template>
<script> <script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import user_trackingServer from '@/api/users/user_tracking_server.js' import user_trackingServer from '@/api/users/user_tracking_server.js'
export default { export default {
data() { data() {
@@ -100,7 +100,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
} }
], ],
@@ -143,15 +143,15 @@ export default {
this.$refs.editModal.showModal(row); this.$refs.editModal.showModal(row);
}, },
delConfirm(row) { delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await user_trackingServer.del(row) await user_trackingServer.del(row)
rootVue.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.query(1) this.query(1)
}) })
}, },
exportCsv() { exportCsv() {
user_trackingServer.exportCsv(this.gridOption.param).then(res => { user_trackingServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '用户行为追踪.csv'); window.framework.funTool.downloadFile(res, '用户行为追踪.csv');
}); });
}, },
resetQuery() { resetQuery() {

View File

@@ -21,11 +21,55 @@
@changePage="query"></tables> @changePage="query"></tables>
</div> </div>
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal> <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
<FloatPanel ref="floatPanel" title="城市详情" position="right">
<div v-if="currentRow" class="detail-content">
<div class="detail-item">
<label>ID:</label>
<span>{{ currentRow.id }}</span>
</div>
<div class="detail-item">
<label>城市名称(中文):</label>
<span>{{ currentRow.cn_city }}</span>
</div>
<div class="detail-item">
<label>城市代码:</label>
<span>{{ currentRow.city_code }}</span>
</div>
<div class="detail-item">
<label>省份(中文):</label>
<span>{{ currentRow.cn_state || '-' }}</span>
</div>
<div class="detail-item">
<label>国家(中文):</label>
<span>{{ currentRow.cn_country || '-' }}</span>
</div>
<div class="detail-item">
<label>城市名称(英文):</label>
<span>{{ currentRow.city || '-' }}</span>
</div>
<div class="detail-item">
<label>省份(英文):</label>
<span>{{ currentRow.state || '-' }}</span>
</div>
<div class="detail-item">
<label>国家(英文):</label>
<span>{{ currentRow.country || '-' }}</span>
</div>
<div class="detail-item">
<label>省份代码:</label>
<span>{{ currentRow.state_code || '-' }}</span>
</div>
<div class="detail-item">
<label>国家代码:</label>
<span>{{ currentRow.country_code || '-' }}</span>
</div>
</div>
</FloatPanel>
</div> </div>
</template> </template>
<script> <script>
import tools from '@/utils/tools'
import uiTool from '@/utils/uiTool'
import wch_citiesServer from '@/api/venues/wch_cities_server.js' import wch_citiesServer from '@/api/venues/wch_cities_server.js'
export default { export default {
data() { data() {
@@ -37,6 +81,7 @@ export default {
rules["cn_country"] = [{ required: false, message: '请填写国家' }]; rules["cn_country"] = [{ required: false, message: '请填写国家' }];
return { return {
currentRow: null,
seachTypes: [ seachTypes: [
{ key: 'cn_city', value: '城市名称' }, { key: 'cn_city', value: '城市名称' },
{ key: 'city_code', value: '城市代码' }, { key: 'city_code', value: '城市代码' },
@@ -70,10 +115,17 @@ export default {
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 200, width: 250,
type: 'template', type: 'template',
render: (h, params) => { render: (h, params) => {
let btns = [ let btns = [
{
title: '详情',
type: 'info',
click: () => {
this.showDetail(params.row)
},
},
{ {
title: '编辑', title: '编辑',
type: 'primary', type: 'primary',
@@ -89,7 +141,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
} }
} }
], ],
@@ -139,7 +191,43 @@ export default {
wch_citiesServer.exportCsv(this.gridOption.param).then(res => { wch_citiesServer.exportCsv(this.gridOption.param).then(res => {
tools.downloadFile(res, '城市管理.csv'); tools.downloadFile(res, '城市管理.csv');
}); });
},
showDetail(row) {
this.currentRow = row
this.$refs.floatPanel.show()
},
hideDetail() {
this.$refs.floatPanel.hide()
} }
} }
} }
</script> </script>
<style lang="less" scoped>
.detail-content {
padding: 10px 0;
.detail-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
label {
min-width: 120px;
font-weight: 500;
color: #515a6e;
margin-right: 10px;
}
span {
flex: 1;
color: #17233d;
}
}
}
</style>

View File

@@ -24,9 +24,9 @@
</div> </div>
</template> </template>
<script> <script>
import tools from '@/utils/tools'
import uiTool from '@/utils/uiTool'
import menuServer from '@/api/system_high/menuServer.js' import menuServer from '@/api/system/menuServer.js'
import wch_professionsServer from '@/api/system/wch_professions_server.js' import wch_professionsServer from '@/api/system/wch_professions_server.js'
export default { export default {
data() { data() {
@@ -147,7 +147,7 @@ export default {
}, },
}, },
] ]
return uiTool.getBtn(h, btns) return window.framework.uiTool.getBtn(h, btns)
}, },
}, },
], ],
@@ -223,7 +223,7 @@ export default {
}) })
}, },
async delConfirm(row) { async delConfirm(row) {
uiTool.delConfirm(async () => { window.framework.uiTool.delConfirm(async () => {
await wch_professionsServer.del(row) await wch_professionsServer.del(row)
this.$Message.success('删除成功!') this.$Message.success('删除成功!')
this.init() this.init()

View File

@@ -7,7 +7,8 @@ module.exports = {
output: { output: {
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
filename: 'app.js', filename: 'app.js',
clean: true clean: true,
publicPath: '/'
}, },
module: { module: {
rules: [ rules: [
@@ -24,6 +25,10 @@ module.exports = {
test: /\.css$/, test: /\.css$/,
use: ['vue-style-loader', 'css-loader'] use: ['vue-style-loader', 'css-loader']
}, },
{
test: /\.less$/,
use: ['vue-style-loader', 'css-loader', 'less-loader']
},
{ {
test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/, test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/,
type: 'asset/resource' type: 'asset/resource'
@@ -45,7 +50,7 @@ module.exports = {
} }
}, },
devServer: { devServer: {
hot: true, hot: true, // 启用热更新
open: true, open: true,
port: 8080, port: 8080,
historyApiFallback: true historyApiFallback: true

View File

@@ -1,584 +0,0 @@
# Admin Framework 正确使用方法
## 一、框架打包说明
Admin Framework 打包后是一个单独的 JS 文件:
- **生产版本**: `dist/admin-framework.js` (压缩,无 sourcemap
- **开发版本**: `dist/admin-framework.dev.js` (不压缩,有 sourcemap
## 二、在业务页面中使用框架功能
### 1. HTTP 请求
**错误用法**(不要这样写):
```javascript
import http from '@/utils/admin-framework.js' // ❌ 错误!
```
**正确用法**
```javascript
// 方式一:在 Vue 组件中使用 this.$http推荐
export default {
async mounted() {
// GET 请求
const res = await this.$http.get('/api/users')
// POST 请求
const res2 = await this.$http.post('/api/users', { name: '张三' })
}
}
// 方式二:使用全局 framework.http
const res = await window.framework.http.get('/api/users')
```
### 2. 工具函数
**正确用法**
```javascript
export default {
methods: {
formatDate() {
// 使用 this.$tools
const formatted = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')
// 或使用全局 framework.tools
const formatted2 = window.framework.tools.formatDate(new Date(), 'yyyy-MM-dd')
}
}
}
```
### 3. UI 工具
**正确用法**
```javascript
export default {
methods: {
showMessage() {
// 使用 this.$uiTool
this.$uiTool.success('操作成功')
this.$uiTool.error('操作失败')
// 或使用全局 framework.uiTool
window.framework.uiTool.success('操作成功')
},
async confirmDelete() {
// 确认对话框
try {
await this.$uiTool.confirm('确定删除吗?')
// 确认后的操作
this.$Message.success('已删除')
} catch {
// 取消操作
this.$Message.info('已取消')
}
}
}
}
```
### 4. 配置信息
**正确用法**
```javascript
export default {
data() {
return {
// 从配置中获取 API 地址
uploadUrl: this.$config.uploadUrl
}
},
mounted() {
console.log('系统标题:', this.$config.title)
console.log('API 地址:', this.$config.apiUrl)
}
}
```
### 5. Vuex Store
**正确用法**
```javascript
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
// 使用框架内置的 store
...mapGetters('user', ['userName', 'menuList']),
...mapGetters('app', ['sysFormModel'])
},
methods: {
...mapActions('user', ['handleLogOut'])
}
}
```
### 6. 路由跳转
**正确用法**
```javascript
export default {
methods: {
goToPage() {
// 使用 path 跳转(推荐)
this.$router.push({ path: '/ball/games' })
// 带参数跳转
this.$router.push({
path: '/ball/game_comments',
query: { id: 123 }
})
}
}
}
```
## 三、创建业务 API 模块
### 正确的 API 封装方式
```javascript
// src/api/ball/gamesServer.js
/**
* 球赛管理 API
* 注意:不需要 import http直接使用 window.framework.http
*/
class GamesServer {
/**
* 获取球赛列表
*/
async getList(params) {
return await window.framework.http.post('/games/page', params)
}
/**
* 获取球赛详情
*/
async getDetail(id) {
return await window.framework.http.get(`/games/detail/${id}`)
}
/**
* 创建球赛
*/
async create(data) {
return await window.framework.http.post('/games/create', data)
}
/**
* 更新球赛
*/
async update(id, data) {
return await window.framework.http.post(`/games/update/${id}`, data)
}
/**
* 删除球赛
*/
async delete(id) {
return await window.framework.http.post(`/games/delete/${id}`)
}
/**
* 批量删除
*/
async batchDelete(ids) {
return await window.framework.http.post('/games/batch_delete', { ids })
}
}
export default new GamesServer()
```
### 在组件中使用 API
```vue
<template>
<div>
<Tables
:columns="columns"
:data="tableData"
:loading="loading"
@on-refresh="getList"
/>
</div>
</template>
<script>
// 导入 API 模块
import gamesServer from '@/api/ball/gamesServer.js'
export default {
name: 'Games',
data() {
return {
columns: [
{ title: 'ID', key: 'id' },
{ title: '名称', key: 'name' },
{ title: '时间', key: 'time' }
],
tableData: [],
loading: false,
queryParams: {
page: 1,
size: 20
}
}
},
mounted() {
this.getList()
},
methods: {
async getList() {
this.loading = true
try {
const res = await gamesServer.getList(this.queryParams)
if (res.code === 0) {
this.tableData = res.data.list
}
} catch (error) {
this.$uiTool.error('获取数据失败')
} finally {
this.loading = false
}
},
async handleDelete(id) {
try {
await this.$uiTool.confirm('确定删除吗?')
const res = await gamesServer.delete(id)
if (res.code === 0) {
this.$uiTool.success('删除成功')
this.getList()
}
} catch (error) {
// 取消删除
}
}
}
}
</script>
```
## 四、完整的页面示例
```vue
<template>
<div class="page-container">
<Card>
<p slot="title">
<Icon type="ios-list" />
球赛管理
</p>
<!-- 搜索栏 -->
<Form inline style="margin-bottom: 16px;">
<FormItem>
<Input
v-model="queryParams.keyword"
placeholder="请输入关键词"
clearable
style="width: 200px;"
/>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSearch">
<Icon type="ios-search" />
搜索
</Button>
<Button @click="handleReset" style="margin-left: 8px;">
重置
</Button>
<Button type="success" @click="handleAdd" style="margin-left: 8px;">
<Icon type="ios-add" />
新增
</Button>
</FormItem>
</Form>
<!-- 数据表格 -->
<Tables
ref="table"
:columns="columns"
:data="tableData"
:loading="loading"
:total="total"
:page-size="queryParams.size"
:current-page="queryParams.page"
@on-page-change="handlePageChange"
@on-page-size-change="handlePageSizeChange"
/>
</Card>
<!-- 编辑弹窗 -->
<Modal
v-model="modalVisible"
:title="modalTitle"
width="600"
@on-ok="handleSubmit"
@on-cancel="handleCancel"
>
<Form ref="form" :model="formData" :rules="rules" :label-width="100">
<FormItem label="名称" prop="name">
<Input v-model="formData.name" placeholder="请输入名称" />
</FormItem>
<FormItem label="时间" prop="time">
<DatePicker
v-model="formData.time"
type="datetime"
placeholder="请选择时间"
style="width: 100%;"
/>
</FormItem>
</Form>
</Modal>
</div>
</template>
<script>
import gamesServer from '@/api/ball/gamesServer.js'
export default {
name: 'Games',
data() {
return {
// 查询参数
queryParams: {
page: 1,
size: 20,
keyword: ''
},
// 表格数据
columns: [
{ title: 'ID', key: 'id', width: 80 },
{ title: '名称', key: 'name' },
{
title: '时间',
key: 'time',
render: (h, params) => {
return h('span', this.$tools.formatDate(params.row.time, 'yyyy-MM-dd HH:mm'))
}
},
{
title: '操作',
width: 200,
render: (h, params) => {
return h('div', [
h('Button', {
props: { type: 'primary', size: 'small' },
style: { marginRight: '5px' },
on: { click: () => this.handleEdit(params.row) }
}, '编辑'),
h('Button', {
props: { type: 'error', size: 'small' },
on: { click: () => this.handleDelete(params.row.id) }
}, '删除')
])
}
}
],
tableData: [],
total: 0,
loading: false,
// 弹窗相关
modalVisible: false,
modalTitle: '新增',
formData: {
name: '',
time: ''
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
time: [
{ required: true, type: 'date', message: '请选择时间', trigger: 'change' }
]
}
}
},
mounted() {
this.getList()
},
methods: {
// 获取列表
async getList() {
this.loading = true
try {
const res = await gamesServer.getList(this.queryParams)
if (res.code === 0) {
this.tableData = res.data.list
this.total = res.data.total
} else {
this.$uiTool.error(res.message || '获取数据失败')
}
} catch (error) {
this.$uiTool.error('获取数据失败')
} finally {
this.loading = false
}
},
// 搜索
handleSearch() {
this.queryParams.page = 1
this.getList()
},
// 重置
handleReset() {
this.queryParams = {
page: 1,
size: 20,
keyword: ''
}
this.getList()
},
// 新增
handleAdd() {
this.modalTitle = '新增'
this.formData = {
name: '',
time: ''
}
this.modalVisible = true
},
// 编辑
handleEdit(row) {
this.modalTitle = '编辑'
this.formData = { ...row }
this.modalVisible = true
},
// 删除
async handleDelete(id) {
try {
await this.$uiTool.confirm('确定删除吗?')
const res = await gamesServer.delete(id)
if (res.code === 0) {
this.$uiTool.success('删除成功')
this.getList()
} else {
this.$uiTool.error(res.message || '删除失败')
}
} catch (error) {
// 取消删除
}
},
// 提交表单
handleSubmit() {
this.$refs.form.validate(async (valid) => {
if (valid) {
try {
const res = this.formData.id
? await gamesServer.update(this.formData.id, this.formData)
: await gamesServer.create(this.formData)
if (res.code === 0) {
this.$uiTool.success('操作成功')
this.modalVisible = false
this.getList()
} else {
this.$uiTool.error(res.message || '操作失败')
}
} catch (error) {
this.$uiTool.error('操作失败')
}
}
})
},
// 取消
handleCancel() {
this.$refs.form.resetFields()
},
// 分页
handlePageChange(page) {
this.queryParams.page = page
this.getList()
},
handlePageSizeChange(size) {
this.queryParams.size = size
this.queryParams.page = 1
this.getList()
}
}
}
</script>
<style scoped>
.page-container {
padding: 20px;
}
</style>
```
## 五、全局可用的对象
在任何 Vue 组件中,都可以使用以下对象:
| 对象 | 说明 | 使用示例 |
|-----|------|---------|
| `this.$http` | HTTP 请求实例 | `this.$http.get('/api/users')` |
| `this.$tools` | 工具函数集合 | `this.$tools.formatDate(new Date())` |
| `this.$uiTool` | UI 工具函数 | `this.$uiTool.success('成功')` |
| `this.$config` | 配置对象 | `this.$config.apiUrl` |
| `this.$router` | 路由实例 | `this.$router.push({ path: '/home' })` |
| `this.$store` | Vuex Store | `this.$store.state.user.userName` |
| `window.framework` | 框架实例 | `window.framework.version` |
| `window.app` | Vue 根实例 | `window.app.$router` |
## 六、注意事项
1.**不要尝试导入框架内部模块**
```javascript
import http from '@/utils/admin-framework.js' // ❌ 错误
import tools from 'admin-framework/tools' // ❌ 错误
```
2. ✅ **使用 Vue 实例上的属性**
```javascript
this.$http // ✅ 正确
this.$tools // ✅ 正确
this.$uiTool // ✅ 正确
```
3. ✅ **或使用全局对象**
```javascript
window.framework.http // ✅ 正确
window.framework.tools // ✅ 正确
window.framework.uiTool // ✅ 正确
```
4. **路由跳转使用 path 而不是 name**
```javascript
this.$router.push({ path: '/ball/games' }) // ✅ 正确
this.$router.push({ name: '球赛管理' }) // ❌ 错误name 可能不存在)
```
## 七、快速开始检查清单
- [ ] 框架已构建:`npm run build`
- [ ] Demo 依赖已安装:`cd demo && npm install`
- [ ] 组件映射表已配置:`demo/src/router/component-map.js`
- [ ] API 地址已配置:`demo/src/main.js` 中的 `config.apiUrl`
- [ ] 页面中使用 `this.$http` 而不是 `import http`
- [ ] 路由跳转使用 `path` 而不是 `name`

View File

@@ -1,145 +0,0 @@
# 🚀 快速修复指南
## ❌ 常见错误用法
### 1. 错误的 HTTP 导入
```javascript
// ❌ 错误!不要这样写
import http from '@/utils/admin-framework.js'
import { http } from 'admin-framework'
// ✅ 正确!直接使用
this.$http.get('/api/xxx')
window.framework.http.get('/api/xxx')
```
### 2. 错误的工具函数导入
```javascript
// ❌ 错误!不要这样写
import tools from 'admin-framework/tools'
// ✅ 正确!直接使用
this.$tools.formatDate(new Date())
window.framework.tools.formatDate(new Date())
```
## ✅ 正确的使用方式
### 在 Vue 组件中
```vue
<script>
export default {
data() {
return {
// ✅ 从配置中获取
uploadUrl: this.$config.uploadUrl
}
},
methods: {
async loadData() {
// ✅ 使用 this.$http
const res = await this.$http.get('/api/users')
// ✅ 使用 this.$tools
const date = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')
// ✅ 使用 this.$uiTool
this.$uiTool.success('操作成功')
// ✅ 路由跳转使用 path
this.$router.push({ path: '/home' })
}
}
}
</script>
```
### 在 API 模块中
```javascript
// src/api/ball/gamesServer.js
class GamesServer {
async getList(params) {
// ✅ 使用 window.framework.http
return await window.framework.http.post('/games/page', params)
}
}
export default new GamesServer()
```
### 在组件中使用 API
```vue
<script>
import gamesServer from '@/api/ball/gamesServer.js'
export default {
methods: {
async loadData() {
const res = await gamesServer.getList({ page: 1, size: 20 })
}
}
}
</script>
```
## 📝 修改步骤
### 步骤1修改所有 API 文件
查找并替换:
```javascript
// 查找
import http from '@/utils/admin-framework.js'
http.http.get(...)
// 替换为
window.framework.http.get(...)
```
### 步骤2修改路由跳转
查找并替换:
```javascript
// 查找
this.$router.push({ name: 'xxx' })
// 替换为
this.$router.push({ path: '/xxx/yyy' })
```
### 步骤3重新构建框架
```bash
# 在项目根目录
npm run build
```
### 步骤4测试
```bash
# 在 demo 目录
cd demo
npm run dev
```
## 🔍 检查清单
- [ ] 所有 API 文件都使用 `window.framework.http`
- [ ] 所有路由跳转都使用 `path` 而不是 `name`
- [ ] 组件中使用 `this.$http``this.$tools``this.$uiTool`
- [ ] 组件映射表已配置(`demo/src/router/component-map.js`
- [ ] 框架已重新构建(`npm run build`
- [ ] Demo 可以正常运行(`cd demo && npm run dev`
## 📚 更多说明
详细使用说明请查看:
- `demo/使用说明.md` - 完整的使用指南
- `demo/src/api/ball/gamesServer.js` - API 模块示例
- `_doc/完整使用文档.md` - 框架完整文档

Some files were not shown because too many files have changed in this diff Show More