352 lines
8.6 KiB
JavaScript
352 lines
8.6 KiB
JavaScript
/**
|
||
* Admin Framework - 通用后台管理系统框架
|
||
* 版本: 1.0.0
|
||
*
|
||
* 功能包含:
|
||
* - 系统管理功能 (sys_*)
|
||
* - 用户登录和权限管理
|
||
* - 动态路由管理
|
||
* - 主布局和页面布局
|
||
* - 全局组件
|
||
* - 工具库
|
||
* - Vuex 状态管理
|
||
*/
|
||
|
||
// ==================== 样式文件 ====================
|
||
import './assets/css/animate.css'
|
||
import './assets/css/base.less'
|
||
import './assets/css/ivewExpand.less'
|
||
import './assets/icons/iconfont.css'
|
||
|
||
// ==================== 工具库 ====================
|
||
import uiTool from './utils/uiTool'
|
||
import http from './utils/http'
|
||
import * as tools from './utils/tools'
|
||
|
||
// ==================== Store 模块 ====================
|
||
import storeModules, { userModule, appModule } from './store'
|
||
import { setUserServer } from './store/user'
|
||
import { setParamSetupServer } from './store/app'
|
||
|
||
// ==================== 路由配置 ====================
|
||
import routerConfig, { createBaseRoutes, setupRouterGuards } from './router'
|
||
|
||
// ==================== 系统页面 ====================
|
||
// system 页面
|
||
import SysLog from './views/system/sys_log.vue'
|
||
import SysParamSetup from './views/system/sys_param_setup.vue'
|
||
import SysRole from './views/system/sys_role.vue'
|
||
import SysUser from './views/system/sys_user.vue'
|
||
|
||
// system_high 页面
|
||
import SysControl from './views/system_high/sys_control.vue'
|
||
import SysMenu from './views/system_high/sys_menu.vue'
|
||
import SysTitle from './views/system_high/sys_title.vue'
|
||
|
||
// 登录和错误页面
|
||
import LoginPage from './views/login/login.vue'
|
||
import Page401 from './views/error-page/401.vue'
|
||
import Page404 from './views/error-page/404.vue'
|
||
import Page500 from './views/error-page/500.vue'
|
||
|
||
// 布局组件
|
||
import Main from './components/main'
|
||
import ParentView from './components/parent-view'
|
||
|
||
// ==================== 系统 API ====================
|
||
// system API
|
||
import * as systemApi from './api/system'
|
||
// system_high API
|
||
import * as systemHighApi from './api/system_high'
|
||
|
||
// 自动设置 API
|
||
setUserServer(systemApi.userServer)
|
||
setParamSetupServer(systemHighApi.paramSetupServer)
|
||
|
||
// ==================== 框架类 ====================
|
||
class AdminFramework {
|
||
constructor() {
|
||
this.version = '1.0.0'
|
||
this.installed = false
|
||
this.config = {}
|
||
this.store = null
|
||
this.router = null
|
||
|
||
// 导出工具
|
||
this.tools = tools
|
||
this.uiTool = uiTool
|
||
this.http = http
|
||
|
||
// 导出 Store 模块
|
||
this.storeModules = storeModules
|
||
this.userModule = userModule
|
||
this.appModule = appModule
|
||
|
||
// 导出路由配置
|
||
this.createBaseRoutes = createBaseRoutes
|
||
this.setupRouterGuards = setupRouterGuards
|
||
|
||
// 导出组件
|
||
this.Main = Main
|
||
this.ParentView = ParentView
|
||
this.LoginPage = LoginPage
|
||
this.Page401 = Page401
|
||
this.Page404 = Page404
|
||
this.Page500 = Page500
|
||
|
||
// 导出系统页面
|
||
this.SysLog = SysLog
|
||
this.SysParamSetup = SysParamSetup
|
||
this.SysRole = SysRole
|
||
this.SysUser = SysUser
|
||
this.SysControl = SysControl
|
||
this.SysMenu = SysMenu
|
||
this.SysTitle = SysTitle
|
||
|
||
// 导出 API
|
||
this.systemApi = systemApi
|
||
this.systemHighApi = systemHighApi
|
||
}
|
||
|
||
/**
|
||
* Vue 插件安装方法 - 自动完成所有初始化
|
||
* @param {Object} Vue - Vue 实例
|
||
* @param {Object} options - 配置选项
|
||
* @param {Object} options.config - 应用配置
|
||
* @param {Object} options.ViewUI - ViewUI 实例（可选，框架会自动处理）
|
||
* @param {Object} options.VueRouter - VueRouter 实例（可选）
|
||
* @param {Object} options.Vuex - Vuex 实例（可选）
|
||
* @param {Function} options.createPersistedState - vuex-persistedstate（可选）
|
||
*/
|
||
install(Vue, options = {}) {
|
||
if (this.installed) return
|
||
this.installed = true
|
||
|
||
const { config = {}, ViewUI, VueRouter, Vuex, createPersistedState } = options
|
||
this.config = config
|
||
|
||
// 自动注册 ViewUI
|
||
if (ViewUI) {
|
||
Vue.use(ViewUI)
|
||
}
|
||
|
||
// 自动注册 VueRouter
|
||
if (VueRouter) {
|
||
Vue.use(VueRouter)
|
||
}
|
||
|
||
// 自动注册 Vuex
|
||
if (Vuex) {
|
||
Vue.use(Vuex)
|
||
}
|
||
|
||
// 挂载全局配置和工具
|
||
Vue.prototype.$config = config
|
||
Vue.prototype.$http = http
|
||
Vue.prototype.$tools = tools
|
||
Vue.prototype.$uiTool = uiTool
|
||
|
||
// 自动注册全局组件
|
||
this.registerGlobalComponents(Vue)
|
||
|
||
// 如果提供了 Vuex，自动创建 Store
|
||
if (Vuex && !this.store) {
|
||
this.store = this.createStore(Vuex, {}, createPersistedState)
|
||
// 自动初始化 HTTP
|
||
http.init(config, this.store)
|
||
}
|
||
|
||
// 如果提供了 VueRouter，自动创建 Router
|
||
if (VueRouter && !this.router) {
|
||
this.router = this.createRouter(VueRouter, {
|
||
Main,
|
||
ParentView,
|
||
LoginPage,
|
||
Page401,
|
||
Page404,
|
||
Page500
|
||
}, [], ViewUI)
|
||
|
||
// 自动添加动态路由
|
||
const mainRoutes = this.getRoutes({ Main, ParentView, Page404 })
|
||
this.router.addRoutes([mainRoutes])
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 自动注册全局组件
|
||
*/
|
||
registerGlobalComponents(Vue) {
|
||
// 注册布局组件
|
||
Vue.component('Main', Main)
|
||
Vue.component('ParentView', ParentView)
|
||
|
||
// 注册错误页面
|
||
Vue.component('Page401', Page401)
|
||
Vue.component('Page404', Page404)
|
||
Vue.component('Page500', Page500)
|
||
|
||
// 注册登录页面
|
||
Vue.component('LoginPage', LoginPage)
|
||
}
|
||
|
||
/**
|
||
* 初始化 HTTP 配置
|
||
* @param {Object} config - HTTP 配置
|
||
* @param {Object} store - Vuex Store 实例
|
||
*/
|
||
initHttp(config, store) {
|
||
http.init(config, store)
|
||
this.store = store
|
||
}
|
||
|
||
/**
|
||
* 设置用户服务实例
|
||
* @param {Object} userServer - 用户服务实例
|
||
*/
|
||
setUserServer(userServer) {
|
||
setUserServer(userServer)
|
||
}
|
||
|
||
/**
|
||
* 设置参数设置服务实例
|
||
* @param {Object} paramSetupServer - 参数设置服务实例
|
||
*/
|
||
setParamSetupServer(paramSetupServer) {
|
||
setParamSetupServer(paramSetupServer)
|
||
}
|
||
|
||
/**
|
||
* 创建路由实例
|
||
* @param {Object} Router - VueRouter 类
|
||
* @param {Object} components - 组件对象
|
||
* @param {Array} customRoutes - 自定义路由
|
||
* @param {Object} ViewUI - ViewUI 实例
|
||
* @param {String} homeName - 首页名称
|
||
* @returns {Object} router 实例
|
||
*/
|
||
createRouter(Router, components = {}, customRoutes = [], ViewUI, homeName = 'home') {
|
||
const { LoginPage, Page401, Page404, Page500 } = components
|
||
|
||
if (!LoginPage || !Page401 || !Page404 || !Page500) {
|
||
console.error('Missing required page components')
|
||
return null
|
||
}
|
||
|
||
const baseRoutes = createBaseRoutes(LoginPage, Page401, Page404, Page500)
|
||
|
||
const router = new Router({
|
||
routes: [...baseRoutes, ...customRoutes],
|
||
mode: 'hash'
|
||
})
|
||
|
||
if (ViewUI) {
|
||
setupRouterGuards(router, ViewUI, homeName)
|
||
}
|
||
|
||
return router
|
||
}
|
||
|
||
/**
|
||
* 创建 Store 实例
|
||
* @param {Object} Vuex - Vuex 类
|
||
* @param {Object} customModules - 自定义模块
|
||
* @param {Object} createPersistedState - vuex-persistedstate 插件
|
||
* @returns {Object} store 实例
|
||
*/
|
||
createStore(Vuex, customModules = {}, createPersistedState) {
|
||
const store = new Vuex.Store({
|
||
modules: {
|
||
user: userModule,
|
||
app: appModule,
|
||
...customModules
|
||
},
|
||
plugins: createPersistedState ? [
|
||
createPersistedState({
|
||
storage: window.localStorage
|
||
})
|
||
] : []
|
||
})
|
||
|
||
this.store = store
|
||
return store
|
||
}
|
||
|
||
/**
|
||
* 获取动态路由
|
||
* @param {Object} components - 组件对象
|
||
* @returns {Object} 主路由配置
|
||
*/
|
||
getRoutes(components = {}) {
|
||
const { Main, ParentView, Page404 } = components
|
||
|
||
if (!Main || !ParentView || !Page404) {
|
||
console.error('Missing required layout components')
|
||
return null
|
||
}
|
||
|
||
return uiTool.getRoutes(Main, ParentView, Page404)
|
||
}
|
||
|
||
/**
|
||
* 注册全局组件
|
||
* @param {Object} Vue - Vue 实例
|
||
* @param {Object} components - 组件对象
|
||
*/
|
||
registerComponents(Vue, components = {}) {
|
||
Object.keys(components).forEach(name => {
|
||
Vue.component(name, components[name])
|
||
})
|
||
}
|
||
}
|
||
|
||
// ==================== 创建实例并导出 ====================
|
||
const framework = new AdminFramework()
|
||
|
||
// 默认导出框架实例
|
||
export default framework
|
||
|
||
// 按需导出
|
||
export {
|
||
// 工具库
|
||
tools,
|
||
uiTool,
|
||
http,
|
||
|
||
// Store 模块
|
||
storeModules,
|
||
userModule,
|
||
appModule,
|
||
|
||
// 路由配置
|
||
createBaseRoutes,
|
||
setupRouterGuards,
|
||
|
||
// 系统页面
|
||
SysLog,
|
||
SysParamSetup,
|
||
SysRole,
|
||
SysUser,
|
||
SysControl,
|
||
SysMenu,
|
||
SysTitle,
|
||
|
||
// 登录和错误页面
|
||
LoginPage,
|
||
Page401,
|
||
Page404,
|
||
Page500,
|
||
|
||
// 布局组件
|
||
Main,
|
||
ParentView,
|
||
|
||
// 系统 API
|
||
systemApi,
|
||
systemHighApi,
|
||
|
||
// 框架类
|
||
AdminFramework
|
||
}
|
||
|