zc/admin_core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-10-10 00:37:30 +08:00
parent b39b206c4c
commit 81aa1d49fd
6 changed files with 58 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
demo/README-LOCAL.md
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.$ 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/)

77
demo/index.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>

15
demo/src/api/ball/game_comments_server.js
View File

@@ -1,6 +1,5 @@
export default {
const gameCommentsServer = {
// 获取球局评论列表
getGameCommentsList: (params) => {
return window.framework.http.post('/game_comments/page', params)
@@ -50,4 +49,14 @@ export default {
getCommentReplies: (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

26
demo/src/views/users/recommend_blocks.vue
View File

@@ -43,7 +43,6 @@ export default {
{ key: 'blocked_user_id', value: '被屏蔽用户ID' },
{ key: 'nickname', value: '用户昵称' }
],
seachTypePlaceholder: '请选择搜索类型',
gridOption: {
param: {
seachOption: {
@@ -93,9 +92,28 @@ export default {
}
],
editColumns: [
{ title: '用户ID', key: 'user_id', type: 'number', required: true },
{ title: '被屏蔽用户ID', key: 'blocked_user_id', type: 'number', required: true },
{ title: '屏蔽时间', key: 'block_time', type: 'datetime' }
{
title: '用户ID',
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
}
]
}
},

18
src/components/tables/editModal.vue
View File

@@ -65,7 +65,16 @@
import Vue from 'vue'
import dayjs from 'dayjs'
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 {
props: ['columns', 'width'],
components: {
@@ -183,7 +192,12 @@ export default {
this.isOPen = false
},
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 || {}
let rules = this.curRules
if (isgl) {

10
src/components/upload/Single.vue
View File

@@ -30,11 +30,17 @@ let headers = {
export default {
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() {
return {
headers,
actionUrl: this.config.apiUrl + 'sys_file/upload_oos_img',
imgUrl: '',
visible: false,
}