/** * 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 }