增加@fskj-admin/micro

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@fskj-admin/core": "^1.1.1",
+    "@fskj-admin/micro": "^0.0.5",
     "@icon-park/vue-next": "^1.4.2",
     "@vueuse/core": "^10.7.1",
     "@wangeditor/editor": "^5.1.23",

plop-template/micro.hbs

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { useMainMicro } from '@/hooks/useMainMicro'
-import { useUserStore } from '@/stores/user'
-
-const userStore = useUserStore()
+import WujieVue from 'wujie-vue3'
+import useMicro from '@fskj-admin/micro'
+import { plugins } from '@/utils/micro'
 
 const microName = '{{name}}'
-const { micro, initWatch } = useMainMicro(microName)
-initWatch()
+
+const { getMicroByName, mainRouteWatch } = useMicro(WujieVue)
+const micro = getMicroByName(microName)
+mainRouteWatch(microName)
 
 const route = useRoute()
 </script>
@@ -18,7 +19,7 @@ const route = useRoute()
     :name="microName"
     :url="micro.url + route.path"
     :sync="true"
-    :props="{ token: userStore.token }"
+    :plugins="plugins"
   ></WujieVue>
 </template>
 

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@fskj-admin/core':
     specifier: ^1.1.1
     version: 1.1.1
+  '@fskj-admin/micro':
+    specifier: ^0.0.5
+    version: 0.0.5
   '@icon-park/vue-next':
     specifier: ^1.4.2
     version: 1.4.2(vue@3.4.5)
@@ -813,6 +816,10 @@ packages:
     resolution: {integrity: sha512-bV/VPHSoJ7Pb6P7haII+xjjKMez1uutaEzWP2Oi2TOO/7TLFRM3vJU4aFE7HzgB6IECUgl4Pl/jxLKLrkziTsA==}
     dev: false
 
+  /@fskj-admin/micro@0.0.5:
+    resolution: {integrity: sha512-F5Q2DWigkjwxQKTU6AZPTSoTdE8WyG3fSb1zTObNmtrNl8w9xAkNTmm1EPt7kB6W/kM3+6qpiOpqJI4U/UOgaw==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}

src/App.vue

@@ -1,31 +1,15 @@
 <script setup lang="ts">
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import { useThemeStore } from '@/stores/theme'
-import { isMicro } from '@/utils/micro'
-import { microName } from '@/config/subMicro'
+import { initMicro } from '@/utils/micro'
 
 const locale = zhCn
 
 const themeStore = useThemeStore()
 themeStore.initTheme()
 
-if (isMicro) {
-  const router = useRouter()
-  const route = useRoute()
-  watch(
-    () => route.path,
-    () => {
-      window.$wujie?.bus.$emit('sub-route-change', microName, route.path)
-    },
-    {
-      immediate: true
-    }
-  )
-
-  window.$wujie?.bus.$on(`${microName}-router-change`, (route: string) => {
-    router.push(route)
-  })
-}
+// 主服务初始化微服务
+initMicro()
 </script>
 
 <template>

src/components/form/ElEditor.vue

@@ -4,7 +4,7 @@ import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import type { IToolbarConfig, IEditorConfig } from '@wangeditor/editor'
 import { ACCESS_TOKEN, TOKEN_PREFIX } from '@/utils/constants'
 import { isAbsolutePath } from '@/utils/utils'
-import { getToken } from '@/utils/micro'
+import { useUserStore } from '@/stores/user'
 import config from '@/config/defaultSetting'
 
 interface Props {
@@ -34,12 +34,13 @@ const valueHtml = computed({
   set: value => emits('update:modelValue', value)
 })
 
+const userStore = useUserStore()
 const editorConfig = {
   placeholder: '请输入内容...',
   MENU_CONF: {
     uploadImage: {
       server: isAbsolutePath(props.uploadApi) ? props.uploadApi : import.meta.env.VITE_BASE_API + props.uploadApi,
-      headers: { [ACCESS_TOKEN]: TOKEN_PREFIX + getToken() },
+      headers: { [ACCESS_TOKEN]: TOKEN_PREFIX + userStore.token },
       fieldName: props.fieldName,
       // 自定义插入图片
       customInsert(res: any, insertFn: Function) {

src/config/mainMicro.ts

@@ -1,8 +1,8 @@
 const microConfig = [
   {
-    name: 'system',
+    name: 'pictureAlbum',
     url: {
-      development: 'http://localhost:5174',
+      development: 'http://10.0.0.210:32001',
       production: ''
     },
     exec: true,

src/config/subMicro.ts

@@ -1 +0,0 @@
-export const microName = ''

src/hooks/useMainMicro.ts

@@ -1,61 +0,0 @@
-import WujieVue from 'wujie-vue3'
-import { isMicro } from '@/utils/micro'
-import { microList } from '@/config/mainMicro'
-import { useUserStore } from '@/stores/user'
-import router from '@/router'
-import type { App } from 'vue'
-
-export const useMainMicro = (microName?: string) => {
-  const getMicroByName = (name: string) => {
-    return microList.find(item => item.name === name)
-  }
-  const micro = getMicroByName(microName || '')
-
-  const initWatch = () => {
-    const route = useRoute()
-    watch(
-      () => route.path,
-      () => {
-        WujieVue.bus.$emit(microName + '-router-change', route.path)
-      },
-      {
-        immediate: true
-      }
-    )
-  }
-
-  // 主服务初始化微服务
-  const initMicro = (app: App) => {
-    if (!isMicro) {
-      const { setupApp, preloadApp, bus } = WujieVue
-
-      microList.forEach((item: any) => {
-        setupApp(item)
-        preloadApp({ name: item.name, url: item.url })
-      })
-
-      // 在 xxx-sub 路由下子应用将激活路由同步给主应用，主应用跳转对应路由高亮菜单栏
-      bus.$on('sub-route-change', (name: string, path: string) => {
-        const mainPath = `/${name}${path}`
-        const currentName = router.currentRoute.value.name
-        const currentPath = router.currentRoute.value.path
-        if (name === currentName && mainPath !== currentPath) {
-          router.push({ path: mainPath })
-        }
-      })
-      // 监听退出登录
-      bus.$on('logout', () => {
-        const userStore = useUserStore()
-        userStore.logout()
-      })
-
-      app.use(WujieVue)
-    }
-  }
-
-  return {
-    micro,
-    initWatch,
-    initMicro
-  }
-}

src/hooks/useSubMicro.ts

@@ -1,12 +0,0 @@
-import { microList } from '@/config/mainMicro'
-
-export const useSubMicro = (microName?: string) => {
-  const getMicroByName = (name: string) => {
-    return microList.find(item => item.name === name)
-  }
-  const micro = getMicroByName(microName || '')
-
-  return {
-    micro
-  }
-}

src/main.ts

@@ -64,7 +64,7 @@ import 'virtual:svg-icons-register'
 
 import { ossUpload } from '@/utils/utils'
 
-// import { useMainMicro } from '@/hooks/useMainMicro'
+import WujieVue from 'wujie-vue3'
 
 function useTable(app: any) {
   // 表格功能
@@ -122,6 +122,7 @@ app.use(FsAdminCore, {
     baseApi: import.meta.env.VITE_BASE_API
   }
 })
+app.use(WujieVue)
 registerComponent(app)
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -130,8 +131,4 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 
 // install(app)
 
-// 主服务初始化微服务
-// const { initMicro } = useMainMicro()
-// initMicro(app)
-
 app.mount('#app')

src/router/guard.ts

@@ -1,7 +1,6 @@
 import type { Router } from 'vue-router'
 import { useRouterStore } from '@/stores/router'
 import { useUserStore } from '@/stores/user'
-import { getToken } from '@/utils/micro'
 
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
@@ -12,7 +11,7 @@ const title = useTitle()
 const createRouterGuard = (router: Router) => {
   router.beforeEach(async (to, from) => {
     const userStore = useUserStore()
-    const token = getToken()
+    const token = userStore.token
 
     NProgress.start()
     if (to.meta?.title) {

src/utils/micro.ts

@@ -1,3 +1,6 @@
+import WujieVue from 'wujie-vue3'
+import useMicro from '@fskj-admin/micro'
+import { microList } from '@/config/mainMicro'
 import { useUserStore } from '@/stores/user'
 
 export const isMicro = window.__POWERED_BY_WUJIE__
@@ -11,11 +14,44 @@ export const logout = () => {
   }
 }
 
-export const getToken = () => {
-  if (isMicro) {
-    return window.$wujie?.props?.token
-  } else {
-    const userStore = useUserStore()
-    return userStore.token
+export const plugins = [
+  {
+    cssBeforeLoaders: [
+      // 强制使子利用body定位是relative
+      { content: 'body{position: relative !important}' }
+    ]
+  },
+  {
+    jsLoader: (code: any) => {
+      // 替换popper.js内计算偏左侧偏移量
+      const codes = code.replace(
+        'left: elementRect.left - parentRect.left',
+        'left: fixed ? elementRect.left : elementRect.left - parentRect.left'
+      )
+      // 替换popper.js内右侧偏移量
+      return codes.replace('popper.right > data.boundaries.right', 'false')
+    }
   }
+]
+// 主服务初始化微服务
+const { initMainMicro } = useMicro(WujieVue)
+export const initMicro = () => {
+  initMainMicro(microList, (bus: any) => {
+    const userStore = useUserStore()
+    // 监听退出登录
+    bus.$on('logout', () => {
+      userStore.logout()
+    })
+
+    // 监听token变化，同步给子应用
+    watch(
+      () => userStore.token,
+      () => {
+        WujieVue.bus.$emit('TOKEN', userStore.token)
+      },
+      {
+        immediate: true
+      }
+    )
+  })
 }

src/utils/request.ts

@@ -1,7 +1,8 @@
 import axios from 'axios'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { ACCESS_TOKEN, TOKEN_PREFIX } from '@/utils/constants'
-import { logout, getToken } from '@/utils/micro'
+import { ACCESS_TOKEN } from '@/utils/constants'
+import { useUserStore } from '@/stores/user'
+import { logout } from '@/utils/micro'
 
 const request = axios.create({
   baseURL: import.meta.env.VITE_BASE_API
@@ -35,7 +36,8 @@ const errorHandler = (error: any) => {
 }
 
 request.interceptors.request.use(config => {
-  const token = TOKEN_PREFIX + getToken()
+  const userStore = useUserStore()
+  const token = 'Bearer ' + userStore.token
   config.headers = config.headers || {}
 
   if (token) {

src/views/micro/Micro.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { useMainMicro } from '@/hooks/useMainMicro'
-import { useUserStore } from '@/stores/user'
+import WujieVue from 'wujie-vue3'
+import useMicro from '@fskj-admin/micro'
+import { plugins } from '@/utils/micro'
 
-const userStore = useUserStore()
+const microName = 'pictureAlbum'
 
-const microName = 'system'
-const { micro, initWatch } = useMainMicro(microName)
-initWatch()
+const { getMicroByName, mainRouteWatch } = useMicro(WujieVue)
+const micro = getMicroByName(microName)
+mainRouteWatch(microName)
 
 const route = useRoute()
 </script>
@@ -18,7 +19,7 @@ const route = useRoute()
     :name="microName"
     :url="micro.url + route.path"
     :sync="true"
-    :props="{ token: userStore.token }"
+    :plugins="plugins"
   ></WujieVue>
 </template>