1
This commit is contained in:
张成
@@ -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.$ window.framework.uiTool.success('操作成功')
|
|
||||||
|
|
||||||
// 错误提示
|
|
||||||
this.$ window.framework.uiTool.error('操作失败')
|
|
||||||
|
|
||||||
// 警告提示
|
|
||||||
this.$ window.framework.uiTool.warning('警告信息')
|
|
||||||
|
|
||||||
// 确认对话框
|
|
||||||
this.$ window.framework.uiTool.confirm('确定删除吗？').then(() => {
|
|
||||||
// 确认后的操作
|
|
||||||
}).catch(() => {
|
|
||||||
// 取消后的操作
|
|
||||||
})
|
|
||||||
|
|
||||||
// Loading
|
|
||||||
const loading = this.$ window.framework.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/)
|
|
||||||
|
|
||||||
@@ -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>
|
|
||||||
|
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
|
|
||||||
|
const gameCommentsServer = {
|
||||||
export default {
|
|
||||||
// 获取球局评论列表
|
// 获取球局评论列表
|
||||||
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
|
||||||
@@ -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: {
|
||||||
@@ -93,9 +92,28 @@ export default {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
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
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -65,7 +65,16 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import templateRender from './templateRender'
|
import templateRender from './templateRender'
|
||||||
const icons = require('@/config/icons')
|
|
||||||
|
// 导入框架中的图标配置
|
||||||
|
let icons = []
|
||||||
|
try {
|
||||||
|
icons = require('../../config/icons.json') || []
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('未找到图标配置文件，图标选择功能将不可用', e)
|
||||||
|
icons = []
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['columns', 'width'],
|
props: ['columns', 'width'],
|
||||||
components: {
|
components: {
|
||||||
@@ -183,7 +192,12 @@ export default {
|
|||||||
this.isOPen = false
|
this.isOPen = false
|
||||||
},
|
},
|
||||||
async init(row, isgl) {
|
async init(row, isgl) {
|
||||||
this.icons = icons.map((item) => item.trim())
|
// 安全处理图标数据
|
||||||
|
if (Array.isArray(icons)) {
|
||||||
|
this.icons = icons.map((item) => item.trim ? item.trim() : item)
|
||||||
|
} else {
|
||||||
|
this.icons = []
|
||||||
|
}
|
||||||
row = row || {}
|
row = row || {}
|
||||||
let rules = this.curRules
|
let rules = this.curRules
|
||||||
if (isgl) {
|
if (isgl) {
|
||||||
|
|||||||
@@ -30,11 +30,17 @@ let headers = {
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['value'],
|
props: ['value'],
|
||||||
computed: {},
|
computed: {
|
||||||
|
actionUrl() {
|
||||||
|
// 优先使用 $config，如果不存在则使用 window.framework.config
|
||||||
|
const config = this.$config || (window.framework && window.framework.config) || {}
|
||||||
|
const apiUrl = config.apiUrl || config.uploadUrl || ''
|
||||||
|
return apiUrl + 'sys_file/upload_oos_img'
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
headers,
|
headers,
|
||||||
actionUrl: this.config.apiUrl + 'sys_file/upload_oos_img',
|
|
||||||
imgUrl: '',
|
imgUrl: '',
|
||||||
visible: false,
|
visible: false,
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user