adspecs 0.1.12

package/references/front-demo/src/permission.ts

@@ -0,0 +1,448 @@
+import * as Vue from 'vue' // 路由
+
+const viewModules = import.meta.glob('@/views/**/index.vue')
+function loadViewComponent(componentPath: string) {
+  const key = `/src/views${componentPath}/index.vue`
+  const loader = viewModules[key]
+  if (!loader) {
+    console.warn(`[permission] 找不到组件: ${key}`)
+    return import('@/views/404.vue').catch(() => import('@/views/layout/MiddleView.vue'))
+  }
+  return loader()
+}
+import router from './router'
+// vuex
+// import store from './store'
+import getStore from '@/store/piniaToVuex'
+const store = getStore()
+// utils
+import { checkIsHref,clearCacheTableCofig } from '@/utils'
+import { getToken, getItToken, getQuery, setToken, removeCookie, getUserInfo } from '@/utils/auth' // getToken from cookie
+// api
+import { autoLogin } from '@/api/login'
+// 全局配置
+import config from '@/config'
+// 组件
+import Layout from '@/views/layout/Layout.vue'
+import { FormRender } from '@gushen/gushen-form-render'
+// 乾坤微前端
+import { action, microApps } from '@/qiankun'
+import { getSettingConfig } from '@/api/app'
+// mock
+import { isMockEnabled } from '@/mock'
+
+declare const window: any
+const systemCode = config.systemCode
+const whiteList = config.whiteList
+let remoteRouters = []
+const VUE_SUBPATH = window.VUE_SUBPATH ?? '/'
+// 不需要清空menuId的页面
+const noRemoveMenuId = ['third-view']
+// 浏览器回车刷新，清空菜单数据，然后请求一份最新的一份数据。
+localStorage.removeItem('menuList')
+
+// step-1 获取qiankun子应用activeRule规则
+const activeRule = microApps
+  .map((app) => app.activeRule)
+  .reduce((acc, rules) => acc.concat(rules), [])
+
+router.beforeEach(async (to, _from, next) => {
+  // 获取iframe嵌套谷神第三方token
+  fromThreeSystemToken()
+  // 先清空menuId。不清的话有问题， 例如首页，menuId还是取上个页面的menuId
+  // 主要是登录也需要清空的数据
+  clearCookieData(to)
+  if (!noRemoveMenuId.includes(to.name?.toString())) {
+    sessionStorage.setItem('menuId', '')
+  }
+  window.sessionStorage.removeItem('requestAllData')
+  // 对空路由进行跳转重定向
+  if (to.fullPath === '/') next({ path: '/home', replace: true })
+
+  window.sessionStorage.setItem('pageAllData', JSON.stringify({ [window.location.pathname]: {} }))
+
+  // Mock 模式：自动注入 token，跳过真实登录
+  if (isMockEnabled() && !getToken()) {
+    setToken('mock-token-prototype', 'mock-refresh-token')
+  }
+
+  let token = getToken() || getItToken()
+
+  // 从url上获取对应值
+  const otherSysToGushenToken = getQuery('otherSysToGushenToken')
+
+  // 判断url上是否有token需要存在谷神中
+  if (otherSysToGushenToken) {
+    token = otherSysToGushenToken
+    setToken(otherSysToGushenToken, otherSysToGushenToken)
+  }
+
+  // 获取系统配置
+  const { systemSetting } = store.state.app
+
+  // 有token的非白名单页面
+  if (!!token && whiteList.indexOf(to.path) === -1) {
+    const { userInfo, pwdInfo } = store.state.user
+
+    // 如果Vuex中没有用户信息重新获取
+    if (!userInfo) {
+      await store.dispatch('GetUserInfo')
+    }
+
+    // 如果Vuex中没有系统配置重新获取
+    if (!systemSetting) {
+      store.dispatch('SetSystemSetting')
+    }
+
+    // 如果Vuex中没有租户密码策略提示信息
+    if (!pwdInfo) {
+      await store.dispatch('GetPwdInfo')
+    }
+
+    // 请求菜单。
+    await fetchMenus()
+    let menuId = to.query.parentMenuId || ''
+    let menuCode = ''
+    let routeInfo: object = {}
+    const checkItemIn = function (routes, path) {
+      routes.forEach((route) => {
+        // getRealDynamicFormPath 获取真实的动态表单路由
+        if (path === getRealDynamicFormPath(route) || route.path === path) {
+          menuId = route.meta.menuId || (route.query ? route.query.parentMenuId : '')
+          menuCode = route.meta.menuCode
+          routeInfo = route
+        } else if (route.children) {
+          checkItemIn(route.children, path)
+        }
+      })
+    }
+    checkItemIn(store.state.permission.routers, to.path)
+    routeInfo = menuId ? routeInfo : to
+    try {
+      sessionStorage['routeInfo'] = JSON.stringify(routeInfo)
+    } catch (err) {
+      const newObject = {
+        ...routeInfo,
+        matched: null,
+      }
+      sessionStorage['routeInfo'] = JSON.stringify(newObject)
+      console.error(err)
+    }
+    if (menuId) {
+      sessionStorage['menuId'] = menuId
+      await store.dispatch('setActiveMenuId', { menuId })
+      await store.dispatch('setAuthBTN', { menuId, menuCode })
+      await store.dispatch('getCollectStatus', { menuId, query: to.query })
+      action.setGlobalState({
+        authButtonList: JSON.stringify(store.state.app.btnAuth),
+      })
+    } else {
+      if (!sessionStorage.getItem('menuId') && !noRemoveMenuId.includes(to?.name?.toString())) {
+        await store.dispatch('setActiveMenuId', { menuId: null })
+      }
+    }
+
+    if (to.path === '/login') {
+      next({
+        // path: to.query.redirect,
+        query: {
+          listData: to.query.listData || null,
+          routerFromName: to.query.routerFromName || null,
+        },
+      })
+    }
+
+    // 判断是否获取完remoteRouters路由信息
+    else if (!remoteRouters.length && to.path !== '/portal') {
+      const menuList = JSON.parse(localStorage.getItem('menuList'))
+
+      remoteRouters = formatRoutes(menuList || [])
+
+      // step-3 添加子应用通配路由
+      activeRule.forEach((item) => {
+        const name = item.replace('/', '')
+        router.addRoute('root', {
+          name,
+          path: `/${name}:pathMatch(.*)*`,
+          component: Vue.defineAsyncComponent(() => import('@/views/layout/MiddleView.vue')),
+        })
+      })
+
+      store.commit('SET_ROUTERS', { remoteRouters })
+
+      // 在获取完角标key后请求角标数量
+      store.dispatch('getMenuCornersNumData')
+
+      // fix 如果菜单列表为空，直接进入，防止一直刷新请求接口
+      if (!menuList?.length) {
+        next()
+      } else {
+        next({ ...to, replace: true })
+      }
+    } else {
+      next()
+    }
+  } else if (whiteList.indexOf(to.path) !== -1) {
+    // 如果Vuex中没有系统配置重新获取
+    if (!systemSetting) {
+      store.dispatch('SetSystemSetting')
+    }
+
+    //清空用户信息和用户密码规则信息
+    store.commit('SET_USER_INFO', undefined)
+    store.commit('SET_PWD_INFO', undefined)
+    /* has no token*/
+    // 在免登录白名单，直接进入
+    next()
+  } else {
+    // 如果没有token又不在登录白名单中的话 清除用户信息和水印
+    localStorage.removeItem('watermarkData')
+    localStorage.removeItem('userInfo')
+    const res: any = await autoLogin(systemCode)
+    // sso登录处理
+    if (res.portalType === 'sso') {
+      localStorage.setItem('urlLogout', res.urlLogout)
+      localStorage.setItem('urlLogin', res.urlLogin)
+      localStorage.setItem('portalType', res.portalType)
+      localStorage.setItem('portalCode', res.portalCode)
+      // 重定向到sso登录页面
+      window.location.href = res.urlLogin
+      return
+    } else {
+      window.location.href = `${VUE_SUBPATH}login`
+    }
+  }
+})
+
+// 请求菜单信息
+async function fetchMenus() {
+  // fix 判断下是否请求了，请求过了就不再请求
+  if (!remoteRouters.length) {
+    // 请求配置时需要清除一下上一个表格配置信息
+    clearCacheTableCofig()
+    try {
+      const settingRes = await getSettingConfig({
+        params: {
+          systemCode,
+          userId: getUserInfo().userId,
+          prsnType: 'table'
+        }
+      })
+      if (settingRes.code === 800) {
+        // 获取到的表格配置设置到缓存中
+          settingRes.data.forEach(tableConfig => {
+            const { tableKey, storeData } = tableConfig
+            localStorage.setItem(tableKey, storeData)
+          })
+      }
+    } catch (error) {
+      console.log("缓存表格请求失败");
+      
+    }
+    const { data } = await autoLogin(systemCode)
+    // TODO 暂时排除不需要显示的菜单
+    // const excludeUrl = ['dynamic-report', 'rule-engine']
+    const excludeUrl = ['rule-engine']
+    const menus = data.menus.filter((menu) => !excludeUrl.includes(menu.menuUrl))
+    localStorage.setItem('menuList', JSON.stringify(menus))
+    // 保存默认菜单信息
+    window.sessionStorage.setItem('defaultMenu', JSON.stringify(data.defaultMenuUrl))
+  }
+}
+
+/**
+ * 多级菜单递归算法
+ * @param {*} data 菜单数据
+ * @param {*} first 是否为第一个路由
+ * @param {*} parentPath 父级路径
+ */
+function formatRoutes(data, first = true, parentPath = '') {
+  return data.map((item) => {
+    //是否有子路由
+    const hasChild = !!item.children && item.children.length !== 0
+    // 是否为 http 链接
+    const isHttpUrl = checkIsHref(item.menuUrl)
+    // 路由名称（优先使用唯一 menuCode，避免同名路由覆盖）
+    const name = item.menuCode || item.menuUrl
+    // path
+    const path = generatePath(item, isHttpUrl, parentPath)
+    let component = null
+    if (!hasChild) {
+      // originalAddr 为固定加载路径
+      const componentPath = item.originalAddr || path
+      component = Vue.defineAsyncComponent(() => loadViewComponent(componentPath))
+    } else {
+      component = Vue.defineAsyncComponent(() => import(`@/views/layout/MiddleView.vue`))
+    }
+    // if (first && hasChild) {
+    //   component = Vue.defineAsyncComponent(() => import(`@/views/layout/Layout.vue`))
+    // }
+    let route = {
+      name,
+      path,
+      meta: generateMetaInfo(item),
+      component,
+      menuName: item.menuName || '',
+      menuEnName: item.menuEnName || item.menuName || '',
+      children: (() => {
+        if (hasChild) return formatRoutes(item.children, false, path)
+      })(),
+    }
+    // 只有一级菜单
+    if (first && !hasChild) {
+      route = handleFirstRoute(item, route)
+    }
+
+    // 如果menuUrl是完整http地址则通过iframe打开
+    if (isHttpUrl) {
+      route = handleHttpRoute(item, route)
+      router.addRoute('root', route)
+    }
+
+    // 如果是动态表单需要渲染固定组件
+    route = handleDynamicFormRoute(item, route)
+
+    // step-2 匹配子应用路由
+    const app = activeRule.some((path) => route.path.startsWith(path))
+    if (!app) {
+      route.meta['isBootstrap'] = true
+      // 只有一级菜单
+      if (!hasChild) {
+        router.addRoute('root', route)
+      }
+    }
+    return route
+  })
+}
+
+// 生成 meta 信息
+function generateMetaInfo(item) {
+  // 存储角标的key
+  if (item.key) {
+    const arrayList = [...store.state.app.cornerKeys, item.key]
+    store.commit('SET_CORNERKEYS', [...new Set(arrayList)])
+  }
+
+  return {
+    icon: item.menuIconurl || 'example',
+    noCache: !item.isCache,
+    title: item.menuName ? item.menuName.replace('[PC]', '') : '',
+    enTitle: item.menuEnName || item.menuName,
+    params: item.parameter,
+    //这些菜单都是主要的路由菜单，都可以从菜单列表进入。
+    isMainRouteMenu: true,
+    menuCode: item.menuCode,
+    menuId: item.menuId,
+    isFetch: item.isFetch,
+    fetchPath: item.fetchPath,
+    subscriptKey: item.subscriptKey || null,
+    subscriptStatus: item.subscriptStatus || null,
+    key: item.key || null,
+    userManualUrl: item.userManualUrl,
+  }
+}
+
+// 请求菜单角标数据
+
+// 处理 path 路径
+function generatePath(item, isHttpUrl, parentPath) {
+  let path = `${parentPath}/${isHttpUrl ? item.menuCode : item.menuUrl}`
+  // 菜单URL设置中/开头的，忽略父级URL
+  if (path && path.indexOf('//') > -1 && !item.originalAddr) {
+    const pathArr = path.split('//')
+    path = '/' + pathArr[1]
+  }
+
+  return path
+}
+
+// 处理一级菜单路由
+function handleFirstRoute(item, route) {
+  return {
+    ...route,
+    icon: item.menuIconurl,
+    noChild: true,
+  }
+}
+
+// 处理 http 链接路由
+function handleHttpRoute(item, route) {
+  return {
+    ...route,
+    path: `/third-view/${item.menuId}`,
+    name: 'third-view',
+    meta: {
+      ...route.meta,
+      iframe: true,
+      isBootstrap: true,
+      url: item.menuUrl,
+      menuId: item.menuId,
+    },
+    component: Vue.defineAsyncComponent(() => import('@/views/third-view.vue')),
+  }
+}
+
+// 处理 动态表单 路由
+function handleDynamicFormRoute(item, route) {
+  const params = item.parameter && item.parameter
+  if (params && params.length > 10 && (params.indexOf('{') > -1 || params.indexOf('}') > -1)) {
+    try {
+      const paramJson = JSON.parse(params)
+      // 如果是动态表单需要渲染固定组件
+      if (paramJson && paramJson.menu_type === 'DYNAMIC_FORM') {
+        route.meta.isBootstrap = true
+        return {
+          ...route,
+          path: `${route.path}/:formId`,
+          // component: () => import('@/views/dynamic-form/index.vue')
+          component: { ...FormRender },
+        }
+      } else {
+        return route
+      }
+    } catch (e) {
+      console.log(new Error(e))
+    }
+  } else {
+    return route
+  }
+}
+
+// 获取真实的动态表单路由，增加一个动态表单浏览器刷新，按钮权限获取失败 daxiong
+function getRealDynamicFormPath(route) {
+  let isDynamicForm = ''
+  if (route.path.includes(':formId')) {
+    const params = (route.meta.params && JSON.parse(route.meta.params)) || {}
+    const path = JSON.parse(JSON.stringify(route.path)).replace(':formId', '')
+    isDynamicForm = path + params['diy_code']
+  }
+  return isDynamicForm
+}
+
+// 获取第三方系统的token
+function fromThreeSystemToken() {
+  try {
+    const arr = window.location.search.split('?')[1]
+    if (!arr) return
+    const obj: any = changeUrl(arr)
+    if (obj.token) {
+      setToken(obj.token, obj.token)
+    }
+  } catch {}
+  function changeUrl(arr) {
+    const parr = arr.split('&')
+    const obj = {}
+    for (const i of parr) {
+      const arr = i.split('=')
+      obj[arr[0]] = arr[1]
+    }
+    return obj
+  }
+}
+
+// 需要清除的数据
+function clearCookieData(to) {
+  if (to.path === '/login') {
+    removeCookie('VUE_GS_CHATGPT')
+  }
+}

package/references/front-demo/src/plugins/i18n.ts

@@ -0,0 +1,3 @@
+import { createI18n } from 'vue-i18n'
+
+const i18n = createI18n({})

package/references/front-demo/src/plugins/pinia.ts

@@ -0,0 +1,7 @@
+import { createPinia } from 'pinia'
+import type { App } from 'vue'
+
+export function setupPinia(app: App) {
+  const pinia = createPinia()
+  app.use(pinia)
+}

package/references/front-demo/src/qiankun.js

@@ -0,0 +1,114 @@
+import { $emit } from '@/utils/events'
+import { initGlobalState } from 'qiankun'
+import { getCurrentInstance } from 'vue'
+import { getLanguage } from '@/utils/auth'
+// import store from '@/store'
+import getStore from '@/store/piniaToVuex'
+const store = getStore()
+// import { i18n } from '@/lang'
+import { areas } from '@/utils/areas'
+
+// 需要注入到微应用的数据
+// 是否生成环境
+const isProd = process.env.NODE_ENV === 'production'
+
+// 微应用部署的域名存储再 .env 文件中，打包时可根据环境替换
+const VUE_APP_MICRO_URL = '' //process.env.VUE_APP_MICRO_URL
+
+const VUE_SUBPATH = window.VUE_SUBPATH ?? '/'
+// 需要微应用监听的数据
+const state = {
+  // 国际化
+  locale: getLanguage() || 'zh-cn',
+  // 子应用容器 loading
+  pageLoading: true,
+  // 需要基座添加 tag 标签页的静态路由
+  staticRoute: null,
+  // 全屏
+  fullscreen: false,
+  // 当前的tag
+  tag: {},
+  // tag的旧值集合
+  oldTags: [],
+  // tag的新值集合
+  newTags: [],
+  // 按钮权限列表
+  authButtonList: null,
+  // 子应用容器高度
+  appMainHeight: 0,
+  // 侧边栏展开状态
+  sidebarOpened: true,
+  // 获取主题色
+  themeColor: '',
+}
+
+export const microApps = [
+  // 工作台
+  {
+    name: 'worktable',
+    entry: isProd ? `${VUE_SUBPATH}micro/worktable/` : `${VUE_APP_MICRO_URL}:8097`,
+    container: '#mainContainer',
+    activeRule: ['/worktable', '/FlowCharts', '/form-url'],
+    loader: (loading) => store.commit('SET_MICRO_PAGE_LOADING', loading),
+  },
+]
+
+// 获取微引用列表
+export const getMicroapps = () => {
+  const instance = getCurrentInstance().proxy || {}
+  const Bus = instance?.$bus
+  const props = {
+    // 基座的 vuex
+    store: instance.$store,
+    I18n: instance.I18n,
+    messages: instance.I18n.global.messages,
+    // 基座的 i18n 翻译，基本上是通用的翻译
+    // messages: i18n.messages,
+    // 当前语言类型
+    // local: i18n.locale,
+    // 页面埋点统计实例
+    // 子应用关闭系统页签方法
+    closeTagView: (view) => {
+      $emit(Bus, 'close-tag-from-micro', view)
+    },
+    // 电话号码区号
+    areas,
+    /**
+     * 用于注册tab标签关闭之前的钩子信息
+     * 回调函数可以进行抛出 Error 进行中断处理，
+     * 或者通过返回 boolean 进行处理，true:表示执行关闭，false：不执行关闭
+     * path 参数 不建议使用 fullPath，因为要考虑到 keep-alive 的问题
+     * 但是可以进行通过 回调参数的 view 信息进行定向判断处理
+     * 需要注意的是，当进行标签页全部关闭，或关闭其它标签页的情况下，不会进行触发事件
+     * @param {string} pull 路由路径
+     * @param {(view)=> Promise<any> | boolean} callback
+     */
+    closeTagBefore: (path, callback) => {
+      $emit(Bus, 'close-tag-before-micro', path, callback)
+    },
+    /**
+     * 页面跳转处理
+     * @param {string} options.origin 采用的跳转类型： window | router。 默认 router
+     * @param {string} options.path 跳转路径
+     * 跳转方式：
+     *  window: 'href', 'open','replace','back','forward','go',
+     *  router: 'push', 'replace'
+     * @param {string} options.type 跳转方式
+     * @param {Object,Number,string, Array} options.params
+     * @param {Function} options.callback
+     */
+    pageTo(options) {
+      $emit(Bus, 'page-to-micro', options)
+    },
+    Bus,
+    $microProps: action,
+  }
+  return microApps.map((e) => {
+    return {
+      ...e,
+      props,
+    }
+  })
+}
+
+export const action = initGlobalState(state)

package/references/front-demo/src/router/index.ts

@@ -0,0 +1,132 @@
+// @ts-nocheck
+import * as VueRouter from 'vue-router'
+
+declare const window: any
+
+export const routes: Array = [
+  {
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录', enTitle: 'Login' },
+  },
+  { path: '/404', component: () => import('@/views/404.vue'), meta: { title: '404' } },
+  {
+    path: '/third-login',
+    component: () => import('@/views/third-login/index.vue'),
+    meta: { title: '第三方登录', enTitle: 'thirdPartyLogin' },
+  },
+
+  { path: '/FlowCharts/flow_details', component: () => import('@/views/layout/Frame.vue') },
+  { path: '/FlowCharts/flow_complete', component: () => import('@/views/layout/Frame.vue') },
+  { path: '/form-url/form-render/:formId', component: () => import('@/views/layout/Frame.vue') },
+  {
+    path: '/',
+    name: 'root',
+    component: () => import('@/views/layout/Layout.vue'),
+    children: [
+      {
+        path: 'home',
+        name: 'home',
+        meta: {
+          title: '主页',
+          enTitle: '{"zh-tw":"主頁","en-us":"Home","hu-hu":"honlap","vi-vn":"Trang chủ"}',
+          icon: 'menu',
+          noCache: true,
+          hideInMenu: true,
+          isMainRouteMenu: true,
+          isBootstrap: true,
+        },
+        component: () => import('@/views/home-page/index.vue'),
+      },
+      {
+        path: 'person-info',
+        name: 'personInfo',
+        meta: {
+          title: '个人中心',
+          enTitle:
+            '{"zh-tw":"個人中心","en-us":"personalCenter","hu-hu":"Személyes központ","vi-vn":"Trung tâm cá nhân"}',
+          icon: 'menu',
+          noCache: true,
+          hideInMenu: true,
+          isBootstrap: true,
+        },
+        component: () => import('@/views/person-info'),
+      },
+      {
+        path: 'dynamic-form/render/:formId',
+        name: 'form-render',
+        props: { pageMode: true },
+        noCache: true,
+        hidden: true,
+        meta: {
+          icon: '',
+          title: '动态表单',
+          enTitle:
+            '{"zh-tw":"動態表單","en-us":"Form Render","hu-hu":"Dinamikus űrlapok","vi-vn":"Biểu mẫu động"}',
+          noCache: true,
+          hideInMenu: true,
+          isMainRouteMenu: true,
+          isBootstrap: true,
+        },
+        component: () => import('@/views/dynamic-form/index.vue'),
+      },
+      {
+        path: 'letters',
+        name: 'letters',
+        meta: {
+          title: '消息中心',
+          enTitle:
+            '{"zh-tw":"訊息中心","en-us":"letters","hu-hu":"Üzenetközpont","vi-vn":"Trung tâm thông điệp"}',
+          noCache: true,
+          hideInMenu: true,
+          isBootstrap: true,
+        },
+        component: () => import('@/views/letters'),
+      },
+      {
+        path: 'product-master-data/list',
+        name: 'productList',
+        meta: {
+          title: '产品列表',
+          enTitle:
+            '{"zh-tw":"產品列表","en-us":"Product List","hu-hu":"Terméklista","vi-vn":"Danh sách sản phẩm"}',
+          noCache: true,
+          hideInMenu: false,
+          isBootstrap: true,
+        },
+        component: () => import('@/views/product-master-data/index.vue'),
+      },
+      // 不要删
+      // {
+      //   path: '*',
+      //   name: 'default',
+      //   component: () => import('@/views/layout/MiddleView')
+      // }
+    ],
+  },
+  // {
+  //   path: '/:pathMatch(.*)*',
+  //   name: 'microp',
+  //   meta: {
+  //     title: '微应用',
+  //     noCache: true,
+  //     hideInMenu: true
+  //   },
+  //   component: () => import('@/views/layout/Layout.vue'),
+  // },
+  // { path: '', redirect: '/home' }
+]
+
+const router = VueRouter.createRouter({
+  history: VueRouter.createWebHistory(window.VUE_SUBPATH ?? '/'),
+  routes,
+  scrollBehavior: () => ({
+    top: 0,
+  }),
+  linkActiveClass: 'is-active',
+})
+
+// 模拟 vue-router4 中的 useRouter
+export const useRouter = () => router
+
+export default router