lingxixue-admin/playground/src/bootstrap.ts

/* eslint-disable vue/no-reserved-component-names */
import { createApp, watchEffect } from 'vue'

import { registerAccessDirective } from '@vben/access'
import { registerLoadingDirective } from '@vben/common-ui'
import { preferences } from '@vben/preferences'
import { initStores } from '@vben/stores'
import '@vben/styles'
import '@vben/styles/antd'

import * as elIcons from '@element-plus/icons-vue'
import { useTitle } from '@vueuse/core'
import { Boot } from '@wangeditor/editor'
import formulaModule from '@wangeditor/plugin-formula'
import VxeUI from 'vxe-pc-ui'
import VxeUITable from 'vxe-table'

import Switch from '#/components/Switch'
import { $t, setupI18n } from '#/locales'
import { router } from '#/router'

import { initComponentAdapter } from './adapter/component'
import { initSetupVbenForm } from './adapter/form'
import App from './app.vue'
import directives from './directive'

import '#/components/mj/mj-table-select/renderer.tsx'
import '#/components/mj/mj-form-text/renderer.tsx'
import '#/components/mj/mj-form-input/renderer.tsx'
import '#/components/mj/mj-form-money/renderer.tsx'
import '#/components/mj/mj-form-phone/renderer.tsx'
import '#/components/mj/mj-form-image/renderer.tsx'
import '#/components/mj/mj-form-upload/renderer.tsx'
import '#/components/mj/mj-form-target/renderer.tsx'

import '#/styles/global.scss'
import 'vxe-pc-ui/lib/style.css'
import 'vxe-table/lib/style.css'

async function bootstrap(namespace: string) {
  // 初始化组件适配器
  await initComponentAdapter()

  // 初始化表单组件
  await initSetupVbenForm()

  // 设置弹窗的默认配置
  // setDefaultModalProps({
  //   fullscreenButton: false,
  // });
  // 设置抽屉的默认配置
  // setDefaultDrawerProps({
  //   zIndex: 1020,
  // });

  const app = createApp(App)

  // 注册v-loading指令
  registerLoadingDirective(app, {
    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
    spinning: 'spinning',
  })

  // 国际化 i18n 配置
  await setupI18n(app)

  // 配置 pinia-tore
  await initStores(app, { namespace })

  // 安装权限指令
  registerAccessDirective(app)

  // 初始化 tippy
  const { initTippy } = await import('@vben/common-ui/es/tippy')
  initTippy(app)

  // 配置路由及路由守卫
  app.use(router)

  // 配置@tanstack/vue-query
  const { VueQueryPlugin } = await import('@tanstack/vue-query')
  app.use(VueQueryPlugin)

  // 配置Motion插件
  const { MotionPlugin } = await import('@vben/plugins/motion')
  app.use(MotionPlugin)
  // 注册所有el+的icon
  const icons = elIcons as any
  for (const i in icons) {
    app.component(`el-icon-${icons[i].name}`, icons[i])
  }

  app.component(`Switch`, Switch)
  app.use(VxeUI)
  app.use(VxeUITable)
  // 自定义指令
  directives.install(app)

  // 动态更新标题
  watchEffect(() => {
    if (preferences.app.dynamicTitle) {
      const routeTitle = router.currentRoute.value.meta?.title
      const pageTitle =
        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name
      useTitle(pageTitle)
    }
  })

  // 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
  Boot.registerModule(formulaModule)

  app.mount('#app')
}

export { bootstrap }