admin_core/src/index.js

/**
 * Admin Framework
 * Version: 1.0.0
 */

// 引入核心依赖
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ViewUI from 'view-design'

// 引入样式
import 'view-design/dist/styles/iview.css'
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'

import storeModules, { createStore } from './store'

import { createBaseRoutes, setupRouterGuards, createRouter, getRoutes } from './router'


import components ,{ registerGlobalComponents, registerComponents} from './components/index'

import pages from './views/index'

const { LoginPage, Page401, Page404, Page500, setupComponentMap } = pages


// 导入页面组件
import Main from './components/main'
import ParentView from './components/parent-view'

import * as systemApi from './api/system'

class AdminFramework {
  constructor() {
    this.version = '1.0.0'
    this.config = {}
    this.store = null
    this.router = null
    this.HomePage = pages.HomePage // 默认使用框架内置的 HomePage

    this.tools = tools
    this.uiTool = uiTool
    this.http = http

    this.storeModules = storeModules

    this.createBaseRoutes = createBaseRoutes
    this.setupRouterGuards = setupRouterGuards
    this.registerComponents = registerComponents
    this.pages = pages
    this.components = components
    this.systemApi = systemApi
  }




  /**
   * Add custom component map
   * @param {Object} customMap - custom component map
   * @example
   * AdminFramework.addComponentMap({
   *   'ball/games.vue': GamesComponent,
   *   'order/pay_orders.vue': PayOrdersComponent
   * })
   */
  addComponentMap(customMap) {
    setupComponentMap(customMap, uiTool)
  }

  /**
   * Init HTTP config
   * @param {Object} config - HTTP config
   * @param {Object} store - Vuex Store instance
   */
  initHttp(config, store) {
    http.init(config, store)
    this.store = store
  }


  /**
   * Create app with simplified API (推荐使用)
   * @param {Object} config - application config
   * @param {String} config.title - application title
   * @param {String} config.apiUrl - API base URL
   * @param {String} config.uploadUrl - upload URL (可选，默认为 apiUrl + 'upload')
   * @param {Object} config.componentMap - custom component map (optional)
   * @param {Component} config.HomePage - custom home page component (optional)
   * @param {Function} config.onReady - callback when app is ready (optional)
   * @returns {Object} Vue instance
   */
  createApp(config = {}) {
    // 如果没有提供 uploadUrl，自动从 apiUrl 推导
    if (!config.uploadUrl && config.apiUrl) {
      config.uploadUrl = config.apiUrl + (config.apiUrl.endsWith('/') ? 'upload' : '/upload')
    }

    // 如果提供了自定义 HomePage，使用自定义的，否则使用默认的
    if (config.HomePage) {
      this.HomePage = config.HomePage
    }

    // 设置配置
    this.config = config

    // 初始化 Vue 插件
    Vue.use(ViewUI)
    Vue.use(VueRouter)
    Vue.use(Vuex)

    // 设置全局属性
    Vue.prototype.$config = config
    Vue.prototype.$http = http
    Vue.prototype.$tools = tools
    Vue.prototype.$uiTool = uiTool
    Vue.prototype.$framework = this

    // 注册全局组件
    registerGlobalComponents(Vue)

    // 设置组件映射
    setupComponentMap(config.componentMap || {}, uiTool)

    // 创建 Store
    if (!this.store) {
      this.store = createStore(Vuex, {}, null)
      http.init(config, this.store)
    }

    // 创建 Router
    if (!this.router) {
      const mainRoute = getRoutes({ Main, ParentView, Page404, HomePage: this.HomePage }, uiTool)

      this.router = createRouter(VueRouter, {
        Main,
        ParentView,
        LoginPage,
        Page401,
        Page404,
        Page500
      }, mainRoute ? [mainRoute] : [], ViewUI)
    }

    // Create Vue instance with auto menu/title restoration
    const app = new Vue({
      router: this.router,
      store: this.store,
      render: h => h('router-view'),
      async created() {
        // 初始化响应式 rem 设置
        
        uiTool.setRem()

        // 监听窗口大小变化，重新设置 rem
        window.addEventListener('resize', () => {
          uiTool.setRem()
        })

        console.log('=== Admin Framework App Started ===')
        console.log('Framework Version:', framework.version)
        console.log('Config:', this.$config)


        // Auto restore menu and title on refresh
        const token = this.$store.state.user.token
        const authorityMenus = localStorage.getItem('authorityMenus')

        if (token && authorityMenus) {
          console.log('Restoring menu and title...')
          try {
            // Restore menu
            await this.$store.dispatch('user/setAuthorityMenus', {
              Main: framework.Main,
              ParentView: framework.ParentView,
              Page404: framework.Page404,
              authorityMenus: authorityMenus
            })
            console.log('Menu restored')

            // Get system title
            await this.$store.dispatch('app/getSysTitle', {
              defaultTitle: this.$config.title,
              defaultLogo: ''
            })
          } catch (error) {
            console.error('Restore failed:', error)
          }
        } else {
          // Not logged in, use default title
          console.log('Not logged in, using default title')
          document.title = this.$config.title
        }

        // Call user callback if provided
        if (config.onReady && typeof config.onReady === 'function') {
          config.onReady.call(this)
        }
      }
    })

    // Expose to global for debugging
    if (typeof window !== 'undefined') {
      window.rootVue = app
      window.framework = framework
    }

    return app
  }
}

const framework = new AdminFramework()

// 【关键】框架实例创建后立即暴露到全局，确保在任何地方都能访问
if (typeof window !== 'undefined') {
  window.framework = framework
}

export default framework