adspecs 0.1.12

package/references/web-ui/src/views/layout/Frame.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-loading="microPageLoading" class="app-frame app-main" id="mainContainer" />
+</template>
+
+<script>
+import { defineComponent, computed, ref, watch, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { loadMicroApp } from 'qiankun'
+import { getMicroapps } from '@/qiankun'
+import getStore from '@/store/piniaToVuex'
+
+export default defineComponent({
+  name: 'Frame',
+  setup(_, ctx ) {
+    const store = getStore();
+    const route = useRoute()
+    const microApps = ref(getMicroapps())
+    const currentApp = ref(null)
+
+    // 修改子应用CDN资源host
+    const handleLoadMicroAppFetch = (url, ...args) => {
+      if (url.includes('cdn')) {
+        const reg = new RegExp('^((http://)|(https://))?([a-zA-Z0-9]([a-zA-Z0-9\\-]{0,61}[a-zA-Z0-9])?\\.)+[a-zA-Z]{2,6}(/)')
+        return window.fetch(url.replace(reg, window.VUE_CDN_HOST), ...args)
+      }
+      return window.fetch(url, ...args)
+    }
+
+    watch(
+      () => route.path,
+      (path, oldPath) => {
+        // 找到路由前缀匹配的 app，并启动
+        const loadApp = microApps.value.find(app => {
+          // 前后跳转的路由需属于不同的 app
+          return app.activeRule.some(rule => path.startsWith(rule) && !oldPath?.startsWith(rule))
+        })
+        if (loadApp) {
+          currentApp.value = loadMicroApp(loadApp, {
+            fetch: handleLoadMicroAppFetch
+          })
+        }
+      },
+      { immediate: true }
+    )
+
+    onMounted(() => {
+      // 如果是门户首页，显示按钮
+      if (route.path.includes('portal')) {
+        store.commit('SET_COLLECT_BUTTON_STATUS', true)
+      }
+    })
+
+    onUnmounted(() => {
+      store.commit('SET_COLLECT_BUTTON_STATUS', false)
+      currentApp.value.unmount()
+    })
+
+    return {
+      cachedViews: computed(() => store.state.cachedViews),
+      key: computed(() => route.fullPath),
+      microPageLoading: computed(() => store.getters.microPageLoading)
+    }
+  }
+})
+</script>
+
+<style scoped>
+.app-frame {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  padding: 15px;
+  background: #eef0f6;
+}
+</style>

package/references/web-ui/src/views/layout/Layout.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="app-wrapper" :class="classObj">
+    <transition name="navbar-fade">
+      <navbar v-show="!fullscreen" />
+    </transition>
+    <div class="main-container" :class="{ 'main-class': fullscreen }" :style="mainStyle">
+      <transition name="side-fade">
+        <sidebar v-show="!fullscreen" />
+      </transition>
+      <div class="right-container" :style="rightStyle">
+        <transition>
+          <tags-view ref="tagsViewRef" v-show="!fullscreen" />
+        </transition>
+        <app-main :class="{ 'app-main-fullscreen': fullscreen }" />
+      </div>
+    </div>
+
+    <compact-tools v-if="$store.getters.layoutConfig === 'compact'" />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '@/utils/events.ts'
+import { Navbar, Sidebar, AppMain, TagsView, CompactTools } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { getToken, getRefreshToken } from '@/utils/auth'
+
+export default {
+  name: 'Layout',
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    TagsView,
+    CompactTools
+  },
+  data() {
+    return {
+      token: getToken(),
+      refreshToken: getRefreshToken()
+    }
+  },
+  mixins: [ResizeMixin],
+  provide() {
+    return {
+      fullscreenMan: this.fullscreenMan
+    }
+  },
+  computed: {
+    isShowGpt() {
+      return this.$store.getters.isShowGptDrawer
+    },
+    fullscreen() {
+      return this.$store.state.app.fullscreenGlobal
+    },
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return { withoutAnimation: this.sidebar.withoutAnimation }
+    },
+    mainStyle() {
+      return this.fullscreen ? { marginLeft: 0 } : {}
+    },
+    rightStyle() {
+      return this.fullscreen ? { top: 0, left: 0, width: '100%', height: '100%' } : {}
+    },
+    windowHeight() {
+      return window.innerHeight
+    }
+  },
+  watch: {
+    $route: {
+      deep: true,
+      handler() {
+        this.fullscreen && this.fullscreenToggle()
+      }
+    }
+  },
+  mounted() {
+    // 进入系统页，显示右下按钮
+    this.$store.commit('SET_COLLECT_BUTTON_STATUS', true)
+    $emit(this.$bus, 'check-use-limit')
+
+    // 机制还不是了解清楚， vue3微前端如果有 onGlobalStateChange， 那么基座这个onGlobalStateChange就不会触发， 所以挂在一个全局方法。
+    window.boostrap_static_route = (...arg) => {
+      this.setBootStrapState(...arg)
+    }
+    // 监听微前端全局变量
+    this.$microProps.onGlobalStateChange(({ fullscreen, staticRoute }) => {
+      // 接收子应用全屏消息
+      this.$store.dispatch('setFullscreenGlobal', fullscreen)
+      // 接受子应用发送的路由信息
+      if (staticRoute) {
+        this.setCurrentRouteInfo(staticRoute)
+        this.$microProps.setGlobalState({
+          staticRoute: null
+        })
+      }
+    })
+    // 监听全局新增页签时间
+    $on(this.$bus, 'set-current-route-info', this.setCurrentRouteInfo)
+  },
+  beforeUnmount() {
+    this.$store.commit('SET_COLLECT_BUTTON_STATUS', false)
+    this.$microProps.offGlobalStateChange()
+    $off(this.$bus, 'set-current-route-info')
+    // this.$bus.$off('page-to-micro')
+  },
+  methods: {
+    // 更新基座相应的状态
+    setBootStrapState({ fullscreen, staticRoute }) {
+      // 接收子应用全屏消息
+      this.$store.dispatch('setFullscreenGlobal', fullscreen)
+      // 接受子应用发送的路由信息
+      if (staticRoute) {
+        this.setCurrentRouteInfo(staticRoute)
+        this.$microProps.setGlobalState({
+          staticRoute: null
+        })
+      }
+    },
+    // 全局切换全屏方法，隐藏侧边菜单和导航栏
+    fullscreenToggle(flag) {
+      if (flag != null) {
+        this.fullscreen = !!flag
+      } else {
+        this.fullscreen = !this.fullscreen
+      }
+      return this.fullscreen
+    },
+    setCurrentRouteInfo(route) {
+      this.$nextTick(() => {
+        this.$refs?.tagsViewRef.setCurrentRouteInfo(route)
+      })
+    },
+    closeGpt() {
+      this.$store.commit('SET_IS_SHOW_GPT')
+    }
+  },
+  emits: ['check-use-limit']
+}
+</script>
+
+<style lang="scss" scoped>
+.app-wrapper {
+  /*// width: calc(100% - 380px) !important;*/
+  height: 100%;
+  overflow: auto hidden;
+  .main-container {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: calc(100vh - var(--size-normal-1));
+
+    .right-container {
+      flex: 1 1 auto;
+      padding: 0;
+      overflow: hidden;
+      transition: all 0.3s;
+    }
+  }
+
+  .main-class {
+    height: calc(100vh);
+  }
+}
+.gptWidth {
+  .gptWindow {
+    border-left: 1px solid var(--color-text-extra);
+    background-color: var(--color-bg-4);
+  }
+}
+</style>
+
+<style lang="scss">
+.app-main-fullscreen {
+  .app-container {
+    padding: 0 !important;
+  }
+
+  .comp-content {
+    height: 100vh;
+  }
+}
+</style>

package/references/web-ui/src/views/layout/MiddleView.vue

@@ -0,0 +1,29 @@
+<template>
+  <section id="mainContainer">
+    <router-view v-slot="{ Component }" v-if="keepAlive">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive>
+            <component :is="Component"></component>
+        </keep-alive>
+      </transition>
+    </router-view>
+    <router-view v-slot="{ Component }" v-if="!keepAlive">
+      <transition name="fade-transform" mode="out-in">
+        <component :is="Component"></component>
+      </transition>
+    </router-view>
+  </section>
+</template>
+
+<script>
+export default {
+  computed: {
+    keepAlive() {
+      return !this.$route.meta.noCache
+    },
+    key() {
+      return this.$route.fullPath
+    },
+  },
+}
+</script>

package/references/web-ui/src/views/layout/components/AppMain.vue

@@ -0,0 +1,302 @@
+<template>
+  <section id="appMain" :class="['app-main', layoutConfig]" v-loading="microPageLoading">
+    <div v-show="isBootstrap" style="height: 100%">
+      <router-view v-slot="{ Component }">
+        <transition name="fade-transform" mode="out-in">
+          <keep-alive ref="keepAlive">
+            <component :is="Component" :key="key" v-if="noIframe && keepAlive"></component>
+          </keep-alive>
+        </transition>
+        <transition name="fade-transform" mode="out-in">
+          <component :is="Component" :key="key" v-if="noIframe && !keepAlive"></component>
+        </transition>
+      </router-view>
+      <third-view
+        style="height: 100%"
+        v-for="item in iframeComponents"
+        v-show="$route.meta.menuId === item.menuId"
+        :key="item.id"
+        :menuId="item.menuId"
+      />
+    </div>
+    <section
+      v-for="app in microApps"
+      :key="app.name"
+      :id="`${app.container.slice(1)}`"
+      class="main-container"
+      v-show="!isBootstrap && isCurrentAppForRoutePath(app.activeRule)"
+    />
+  </section>
+</template>
+
+<script>
+import { $on, $off } from '@/utils/events.ts'
+// vuex
+import { mapGetters } from '@/store/piniaToVuex'
+// 乾坤
+import { getMicroapps } from '@/qiankun'
+import { loadMicroApp, prefetchApps } from 'qiankun'
+// 组件
+import ThirdView from '@/views/third-view'
+import getStore from '@/store/piniaToVuex'
+
+export default {
+  name: 'AppMain',
+  components: { ThirdView },
+
+  computed: {
+    ...mapGetters(['permission_routers', 'visitedViews']),
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews
+    },
+    key() {
+      return this.$route.fullPath
+    },
+    keepAlive() {
+      return !this.$route.meta.noCache
+    },
+    isBootstrap() {
+      return this.$route.meta.isBootstrap
+    },
+    microPageLoading() {
+      return this.$store.getters.microPageLoading
+    },
+    layoutConfig() {
+      return this.$store.getters.layoutConfig
+    },
+    noIframe() {
+      return !this.iframeComponents.find(item => this.$route?.meta?.menuId === item.menuId)
+    },
+    iframeComponents() {
+      const list = this.treeToArr(this.permission_routers)
+      const iframe = list.filter(e =>
+        this.visitedViews.find(item => e.meta?.iframe && !e.meta?.noCache && item.meta?.menuId === e.meta?.menuId)
+      )
+      return iframe.map(e => {
+        return { ...e, menuId: e.meta?.menuId }
+      })
+    }
+  },
+
+  data() {
+    return {
+      loadedApp: new Map(),
+      microApps: getMicroapps().map(app => ({
+        ...app,
+        container: `${app.container}-${app.name}`
+      })),
+      drawerVisible: false,
+      drawerTitle: '',
+      searchData: {}
+    }
+  },
+  watch: {
+    $route: {
+      deep: true,
+      handler({ path }) {
+        // 找到路由前缀匹配的 app，并启动
+        const loadApp = this.microApps.find(app => app.activeRule.some(rule => path.startsWith(rule)))
+
+        if (loadApp) {
+          if (!this.loadedApp.has(loadApp.name)) {
+            const store = getStore();
+            // 开启应用加载loading
+            store.commit('SET_MICRO_PAGE_LOADING', true)
+
+            const app = loadMicroApp(loadApp, {
+                excludeAssetFilter: this.excludeAssetFilter,
+                fetch: this.handleLoadMicroAppFetch,
+            })
+
+            let ticks = 0;
+            const timer = setInterval(() => {
+              ticks++;
+              const status = app.getStatus()
+              // console.log('app status====', app.getStatus());
+              // 应用加载完成或出错后关闭loading
+              if (status === 'MOUNTED' || status === 'LOAD_ERROR' || ticks >= 100) {
+                clearInterval(timer)
+                store.commit('SET_MICRO_PAGE_LOADING', false)
+              }
+            }, 100)
+
+            app.mountPromise.then(res => {
+              console.log('mount app: ', app.getStatus());
+             })
+
+            this.loadedApp.set(loadApp.name, {
+              app,
+              childrenRoute: new Set(),
+            })
+          }
+          // 记录子应用已激活到菜单
+          this.loadedApp.get(loadApp.name).childrenRoute.add(path)
+        }
+      },
+
+      immediate: true
+    }
+  },
+  methods: {
+    closeKeepAlive(type, fullPath) {
+      if (!type || !fullPath) return
+      switch (type) {
+        case 'select':
+          this.$refs.keepAlive.$pruneCacheEntry(fullPath)
+          break
+        default:
+          fullPath.forEach(element => {
+            this.$refs.keepAlive.$pruneCacheEntry(element.fullPath)
+          })
+          break
+      }
+    },
+    // 加载子应用第三方资源规则限制
+    excludeAssetFilter(assetUrl) {
+      const whiteWords = ['baidu', 'map', 'inject-packages']
+      return whiteWords.some(w => assetUrl.includes(w))
+    },
+    // 修改子应用CDN资源host
+    handleLoadMicroAppFetch(url, ...args) {
+      if (url.includes('cdn')) {
+        const reg = new RegExp('^((http://)|(https://))?([a-zA-Z0-9]([a-zA-Z0-9\\-]{0,61}[a-zA-Z0-9])?\\.)+[a-zA-Z]{2,6}(/)')
+        return window.fetch(url.replace(reg, window.VUE_CDN_HOST), ...args)
+      }
+      return window.fetch(url, ...args)
+    },
+    // 修改浏览器窗口大小
+    async handleChangeWindow() {
+      await this.$nextTick()
+      const height = document.getElementById('appMain')?.offsetHeight
+      this.$store.commit('SET_APP_MAIN_HEIGHT', height)
+      this.$microProps.setGlobalState({
+        appMainHeight: height
+      })
+    },
+    // 预加载子应用
+    handlePrefetchMicroApps() {
+      const prefetchMicroApps = this.microApps.filter(app => app.prefetch)
+      prefetchMicroApps?.length && prefetchApps(prefetchMicroApps, { fetch: this.handleLoadMicroAppFetch })
+    },
+    isCurrentAppForRoutePath(activeRule) {
+      const path = this.$route.path
+      return activeRule.some(rule => path.startsWith(rule))
+    },
+
+    // BUG 这个函数会造成高级表格中的子组件获取不到i18n的问题暂时关闭
+    closeSelectedTag({ path }) {
+      for (let key of this.loadedApp.keys()) {
+        // 从包含已挂载的子应用中移除 tag path
+        const childrenRoute = this.loadedApp.get(key).childrenRoute
+        if (childrenRoute.has(path)) {
+          childrenRoute.delete(path)
+        }
+        // 如果当前子应用的 tag 数量为 0 ，则卸载
+        if (!childrenRoute.size) {
+          this.loadedApp.get(key).app.unmount()
+          this.loadedApp.delete(key)
+        }
+      }
+    },
+    // BUG 这个函数会造成高级表格中的子组件获取不到i18n的问题暂时关闭
+    closeOtherTags({ path }) {
+      for (let key of this.loadedApp.keys()) {
+        // 判断已挂载的子应用是否包含当前 tag path
+        const currentApp = this.loadedApp.get(key)
+        if (currentApp.childrenRoute.has(path)) {
+          // 包含当前的 tag ，清空其他 tag 信息
+          currentApp.childrenRoute.clear()
+          currentApp.childrenRoute.add(path)
+        } else {
+          // 不包含当前 tag 信息，卸载掉
+          currentApp.app.unmount()
+          this.loadedApp.delete(key)
+        }
+      }
+    },
+    // BUG 这个函数会造成高级表格中的子组件获取不到i18n的问题暂时关闭
+    closeAllTags() {
+      // 卸载所有已挂载的子应用
+      for (let key of this.loadedApp.keys()) {
+        this.loadedApp.get(key).app.unmount()
+      }
+      this.loadedApp.clear()
+    },
+
+    // 树结构转数组
+    treeToArr(treeData, pid = null, arr = []) {
+      treeData.forEach(item => {
+        arr.push({ ...item, pid: pid, id: item.path })
+        if (item.children && item.children.length !== 0) {
+          this.treeToArr(item.children, item.path, arr)
+        }
+      })
+      return arr
+    }
+  },
+  async mounted() {
+    // 监听窗口高度变化，设置内容区域高度值
+    await this.handleChangeWindow()
+    window.addEventListener('resize', _.throttle(this.handleChangeWindow, 300))
+
+    this.handlePrefetchMicroApps()
+
+    // 监听三种关闭 tag类型，做对应的处理
+    $on(this.$bus, 'close-selected-tag', ({ tag, oldTags, newTags }) => {
+      // this.closeSelectedTag(tag)
+      this.$microProps.setGlobalState({ oldTags, newTags })
+
+      this.closeKeepAlive('select', tag.fullPath)
+    })
+    $on(this.$bus, 'close-other-tags', ({ otherTag, oldTags, newTags }) => {
+      // this.closeOtherTags(tag)
+      this.$microProps.setGlobalState({ oldTags, newTags })
+
+      this.closeKeepAlive('other', otherTag)
+    })
+    $on(this.$bus, 'close-all-tags', ({ allTag, oldTags, newTags }) => {
+      // this.closeAllTags()
+      this.$microProps.setGlobalState({ oldTags, newTags })
+
+      this.closeKeepAlive('all', allTag)
+    })
+
+    $on(this.$bus, 'open-page-drawer', ({ origin, type, path, title, access }) => {
+      this.drawerVisible = true
+      this.drawerTitle = title + '功能介绍'
+      this.searchData = {
+        title,
+        access
+      }
+    })
+  },
+  beforeUnmount() {
+    $off(this.$bus, 'close-selected-tag')
+    $off(this.$bus, 'close-other-tags')
+    $off(this.$bus, 'close-all-tags')
+    $off(this.$bus, 'open-page-drawer')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  padding: var(--size-mini-2);
+  height: calc(100% - var(--size-small-2));
+  background-color: var(--color-bg-1);
+  overflow-y: auto;
+  &.app-main-fullscreen {
+    padding: 0;
+    height: 100vh;
+  }
+
+  &.compact {
+    padding: 4px 30px 4px 10px;
+  }
+
+  .mainContainer {
+    min-height: 100%;
+    overflow-x: hidden;
+  }
+}
+</style>

package/references/web-ui/src/views/layout/components/CompactTools/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="compact-tools">
+    <tenant-change icon-color="#333" placement="left" />
+    <!-- <system-change icon-color="#333" placement="left" /> -->
+    <portal icon-color="#333" placement="left" />
+    <message icon-color="#333" placement="left" />
+    <theme icon-color="#333" placement="left" />
+    <locale icon-color="#333" placement="left" />
+    <!-- <help icon-color="#333" placement="left" /> -->
+  </section>
+</template>
+
+<script>
+// import SystemChange from "@/views/layout/components/Navbar/components/SystemChange"
+import TenantChange from "@/views/layout/components/Navbar/components/TenantChange"
+import Portal from "@/views/layout/components/Navbar/components/Portal"
+import Message from '@/views/layout/components/Navbar/components/Message'
+import Theme from '@/views/layout/components/Navbar/components/Theme'
+import Locale from '@/views/layout/components/Navbar/components/Locale'
+// import Help from '@/views/layout/components/Navbar/components/Help'
+
+export default {
+  name: "CompactTools",
+  components: {
+    TenantChange,
+    // SystemChange,
+    Portal,
+    Message,
+    Theme,
+    Locale,
+    // Help
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.compact-tools {
+  position: fixed;
+  top: var(--size-normal-1);
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--size-mini-6);
+  background-color: var(--color-white);
+  box-shadow: -1px 1px 9px 0px rgba(168, 172, 180, 0.27);
+  border-radius: 0 0 0 var(--radius-small);
+  z-index: 999;
+
+  &>div {
+    text-align: center;
+    cursor: pointer;
+
+    &:not(:last-of-type) {
+      margin-bottom: var(--size-mini-6);
+    }
+  }
+}
+</style>

package/references/web-ui/src/views/layout/components/Navbar/components/AVue.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="panel-avuedata">
+    <el-tooltip effect="dark" :content="$t('dashboard')" :placement="placement">
+      <i class="iconfont1 icon-daping" :style="{ fontSize: '22px', color: iconColor }" @click="handleAVueData" />
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import sysConfig from "@/config";
+
+export default {
+  name: "AVue",
+  props: {
+    iconColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    }
+  },
+  methods: {
+    handleAVueData() {
+      window.open(sysConfig.baseUrl.avueDataUrl, '_blank')
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>