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-09 23:26:40 +08:00
parent b81e768035
commit 0b78af46cd
25 changed files with 70 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
demo/advanced.html
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>

2
demo/src/api/ai/ai_messages_server.js
View File

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

2
demo/src/api/ball/games_server.js
View File

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

2
demo/src/api/ball/payment_orders_server.js
View File

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

2
demo/src/api/ball/resources_server.js
View File

@@ -22,7 +22,7 @@ export function del(params) {
// 导出资源
export function exportData(params) {
return http.fileExport('/gal_resources/export', params)
return window.framework.http.fileExport('/gal_resources/export', params)
}
// 获取所有资源

2
demo/src/api/ball/venues_server.js
View File

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

2
demo/src/api/ball/wallet_transactions_server.js
View File

@@ -12,7 +12,7 @@ class walletTransactionsClServer {
}
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;
}

2
demo/src/api/ball/wallets_server.js
View File

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

3
demo/src/api/ball/wch_users_server.js
View File

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

2
demo/src/api/cote/info_server.js
View File

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

2
demo/src/api/cote/info_type_server.js
View File

@@ -13,7 +13,7 @@ class info_typeClServer {
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;
}

2
demo/src/api/ntrp/ntr_questions_server.js
View File

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

2
demo/src/api/ntrp/ntr_records_server.js
View File

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

2
demo/src/api/order/transfer_details_server.js
View File

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

2
demo/src/api/system/systemType_server.js
View File

@@ -13,7 +13,7 @@ class systemTypeClServer {
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;
}

2
demo/src/api/system/userServer.js
View File

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

2
demo/src/api/users/recommend_blocks_server.js
View File

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

2
demo/src/api/users/user_follows_server.js
View File

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

2
demo/src/api/users/user_tracking_server.js
View File

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

2
demo/src/api/venues/wch_cities_server.js
View File

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

171
demo/src/components/CustomPage.vue
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() {
window.framework.uiTool.success('这是一个成功提示')
},
showWarning() {
window.framework.uiTool.warning('这是一个警告提示')
},
showError() {
window.framework.uiTool.error('这是一个错误提示')
},
showConfirm() {
window.framework.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>

4
demo/src/main.js
View File

@@ -3,7 +3,7 @@ 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'
@@ -19,7 +19,7 @@ Vue.use(ViewUI)
// 配置参数
const config = {
title: 'Admin Framework Demo',
title: 'tennis管理系统',
apiUrl: 'http://localhost:9098/admin_api/', // 修改为你的 API 地址
uploadUrl: 'http://localhost:9098/admin_api/upload' // 修改为你的上传地址
}

6
demo/src/router/component-map.js
View File

@@ -38,8 +38,6 @@ 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'
/**
* 组件映射对象
@@ -105,9 +103,7 @@ const componentMap = {
"users/wch_professions.vue": WchProfessions,
"users/wch_professions": WchProfessions,
// ===== 自定义组件 =====
'custom/page': CustomPage,
'custom/page.vue': CustomPage
}
export default componentMap

48
demo/src/views/users/user_follows.vue
View File

@@ -26,8 +26,6 @@
</div>
</template>
<script>
import user_followsServer from '@/api/users/user_follows_server.js'
export default {
data() {
@@ -43,7 +41,6 @@ export default {
{ key: 'following_id', value: '被关注者ID' },
{ key: 'nickname', value: '用户昵称' }
],
seachTypePlaceholder: '请选择搜索类型',
gridOption: {
param: {
seachOption: {
@@ -88,14 +85,31 @@ export default {
},
},
]
return window.framework.uiTool.getBtn(h, btns)
return uiTool.getBtn(h, btns)
},
}
],
editColumns: [
{ title: '关注者ID', key: 'follower_id', type: 'number', required: true },
{ title: '被关注者ID', key: 'following_id', type: 'number', required: true },
{ title: '关注时间', key: 'follow_time', type: 'datetime' }
{
title: '关注者ID',
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
}
]
}
},
@@ -111,13 +125,25 @@ export default {
});
},
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)
rootVue.$Message.success('新增成功！')
this.query(1)
})
},
showEditWarp(row) {
this.$refs.editModal.showModal(row);
this.$refs.editModal.editShow(row, async (newRow) => {
let res = await user_followsServer.edit(newRow)
rootVue.$Message.success('修改成功！')
this.query(1)
})
},
delConfirm(row) {
window.framework.uiTool.delConfirm(async () => {
uiTool.delConfirm(async () => {
await user_followsServer.del(row)
rootVue.$Message.success('删除成功！')
this.query(1)
@@ -125,7 +151,7 @@ export default {
},
exportCsv() {
user_followsServer.exportCsv(this.gridOption.param).then(res => {
window.framework.funTool.downloadFile(res, '用户关注关系.csv');
window.framework. funTool.downloadFile(res, '用户关注关系.csv');
});
},
resetQuery() {

17
src/index.js
View File

@@ -46,7 +46,9 @@ import LoadFlower from './components/load-flower'
import SplitPane from './components/split-pane'
import TextArea from './components/text-area'
import CommonIcon from './components/common-icon'
import Editor from './components/editor/index.vue'
import Editor from './components/editor/index.vue'
import editModal from './components/tables/editModal.vue'
import fieldItem from './components/tables/fieldItem.vue'
import * as systemApi from './api/system'
import * as systemHighApi from './api/system_high'
@@ -120,7 +122,7 @@ class AdminFramework {
Vue.prototype.$uiTool = uiTool
this.registerGlobalComponents(Vue)
this.setupComponentMap(componentMap)
if (Vuex && !this.store) {
@@ -166,9 +168,12 @@ class AdminFramework {
Vue.component('TextArea', TextArea)
Vue.component('CommonIcon', CommonIcon)
Vue.component('Editor', Editor)
Vue.component('editModal', editModal)
Vue.component('fieldItem', fieldItem)
}
/**
* Setup component map
* @param {Object} customMap - custom component map
@@ -185,17 +190,17 @@ class AdminFramework {
'system_high/sys_title': SysTitle,
...customMap
}
const map = {}
Object.keys(components).forEach(path => {
const cleanPath = path.replace(/\.vue$/, '')
map[cleanPath] = components[path]
map[cleanPath + '.vue'] = components[path]
})
uiTool.setComponentMap(map)
}
/**
* Add custom component map
* @param {Object} customMap - custom component map