@gx-design-vue/create-gx-cli 0.1.10 → 0.1.11

package/template-gx-design-thin/src/layout/ContentView.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { BasicLayoutProps, Meta } from '@gx-design-vue/pro-layout'
+import { PageTranstion } from '@gx-design-vue/pro-layout'
+import IframeView from '../views/Iframe/index.vue'
+
+defineProps({
+  reloadStatus: {
+    type: Boolean as VuePropType<boolean>,
+    default: true
+  },
+  animate: {
+    type: Object as VuePropType<BasicLayoutProps['animate']>,
+    default: () => {
+      return {}
+    }
+  }
+})
+
+const { global } = useStore()
+const router = useRouter()
+
+const keepliveRouterNames = ref([])
+
+const iframeSrc = computed(() => {
+  const meta = router.currentRoute.value?.meta as Meta
+  return meta?.target && Number(meta?.targetStatus) === 0 ? meta?.target || '' : ''
+})
+
+watch(() => global.keepAlive, () => {
+  keepliveRouterNames.value = router.getRoutes()
+    .filter(item => global.keepAlive || (item.meta as Meta)?.keepAlive)
+    .map(item => item.name)
+}, { immediate: true })
+</script>
+
+<template>
+  <router-view>
+    <template #default="{ Component }">
+      <PageTranstion v-bind="animate">
+        <template v-if="reloadStatus">
+          <keep-alive :include="keepliveRouterNames">
+            <component :is="Component" />
+          </keep-alive>
+        </template>
+      </PageTranstion>
+    </template>
+  </router-view>
+  <IframeView v-if="iframeSrc" :frameSrc="iframeSrc" />
+</template>

package/template-gx-design-thin/src/layout/IframeView.vue

@@ -0,0 +1 @@
+<template></template>

package/template-gx-design-thin/src/layout/UserLayout.vue

@@ -0,0 +1,7 @@
+<template>
+  <div id="gx-user-layout">
+    <router-view v-slot="{ Component }">
+      <component :is="Component" />
+    </router-view>
+  </div>
+</template>

package/template-gx-design-thin/src/main.ts

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import { setupStore } from './store'
+import { setupGlobCommon } from './core'
+import { router, setupRouter } from './router'
+import { setupRouterGuard } from './router/guard'
+
+import 'uno.css'
+import 'nprogress/nprogress.css'
+import './design/index.less'
+
+// plugins
+import './plugins'
+
+function startApp() {
+  const app = createApp(App)
+
+  // store
+  setupStore(app)
+
+  // global
+  setupGlobCommon(app)
+
+  // route
+  setupRouter(app)
+
+  // guardRoute
+  setupRouterGuard(router)
+
+  app.mount('#app')
+}
+
+startApp()

package/template-gx-design-thin/src/plugins/index.ts

@@ -0,0 +1,2 @@
+// 加载插件
+import.meta.glob('./*.ts', { eager: true })

package/template-gx-design-thin/src/router/guard/index.ts

@@ -0,0 +1,83 @@
+import type { Router } from 'vue-router'
+import type { MenuDataItem } from '@gx-design-vue/pro-layout'
+import NProgress from 'nprogress'
+import { defaultSettings } from '@gx-config'
+import getPageTitle from '@/utils/pageTitle'
+import { scrollToContainer } from '@/utils/util'
+import { createStateGuard } from './stateGuard'
+import { createPermissionGuard } from './permissions'
+
+const { routesWhiteList } = defaultSettings
+
+export function setupRouterGuard(router: Router) {
+  createPageGuard(router)
+  createPageLoadingGuard(router)
+  createScrollGuard(router)
+  createProgressGuard(router)
+  createPermissionGuard(router)
+  createStateGuard(router)
+}
+
+export function createPageGuard(router: Router) {
+  const routes = useStoreRoutes()
+  const global = useStoreGlobal()
+
+  router.afterEach((to) => {
+    const { meta } = to as MenuDataItem
+    document.title = getPageTitle(meta.title || '')
+    if (
+      global.globalLayout.layout !== 'wide' && routes.routerLoadList.every(item => item !== to.path) && routesWhiteList.includes(
+        to.path)
+    ) {
+      routes.addRouterLoadList(to.path)
+    }
+  })
+}
+
+export function createPageLoadingGuard(router: Router) {
+  const routes = useStoreRoutes()
+  const global = useStoreGlobal()
+
+  router.beforeEach(async (to) => {
+    if (
+      global.globalLayout.layout !== 'wide' &&
+      routes.routerLoadList.every(item => item !== to.path) &&
+      routesWhiteList.includes(to.path)
+    ) {
+      routes.setRouteState({
+        routerLoading: true
+      })
+    }
+
+    return true
+  })
+
+  router.afterEach((_) => {
+    setTimeout(() => {
+      routes.setRouteState({
+        routerLoading: false
+      })
+    }, global.globalLayout.layout === 'wide' ? 0 : 200)
+  })
+}
+
+export function createScrollGuard(router: Router) {
+  const global = useStoreGlobal()
+
+  router.afterEach((_) => {
+    !global.disabledScrollTop && scrollToContainer({ count: 0 })
+  })
+}
+
+export function createProgressGuard(router: Router) {
+  const global = useStoreGlobal()
+  router.beforeEach(() => {
+    if (global.showProgressBar)
+      NProgress.start()
+    return true
+  })
+
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}

package/template-gx-design-thin/src/router/guard/permissions.ts

@@ -0,0 +1,70 @@
+import type { Router } from 'vue-router'
+import { defaultSettings } from '@gx-config'
+
+const { authentication, loginInterception, recordRoute, routesWhiteList } = defaultSettings
+
+export function createPermissionGuard(router: Router) {
+  const userStore = useStoreUser()
+  const routeStore = useStoreRoutes()
+  const permissionStore = useStorePermission()
+
+  router.beforeEach(async (to, _, next) => {
+    if (loginInterception) {
+      const token = userStore.accessToken
+      if (routesWhiteList.includes(to.path)) {
+        if (token) {
+          next({ path: '/', replace: true })
+        }
+        next()
+        return
+      }
+      if (!token) {
+        userStore.resetPermissions()
+        if (recordRoute) {
+          next({ path: '/user/login', query: { redirect: to.path }, replace: true })
+        } else {
+          next({ path: '/user/login', replace: true })
+        }
+        return
+      }
+
+      const hasRoles = permissionStore.role.length > 0
+      if (hasRoles) {
+        next()
+        return
+      }
+
+      const checkUserPremission = await userStore.checkUserPremission()
+      if (!checkUserPremission) {
+        userStore.resetPermissions()
+        if (recordRoute) {
+          next({ path: '/user/login', query: { redirect: to.path }, replace: true })
+        } else {
+          next({ path: '/user/login', replace: true })
+        }
+        return
+      }
+
+      const routes = authentication === 'all'
+        ? await routeStore.setAllRoutes()
+        : await routeStore.setRoutes()
+      routeStore.setRouteState({
+        meunLoading: false
+      })
+      if (routes?.length) {
+        routes.forEach((route) => {
+          router.addRoute(route as any)
+        })
+
+        console.log(routes)
+
+        next({ path: to.fullPath, replace: true })
+        return
+      }
+
+      next({ path: '/exception/403', replace: true })
+    }
+
+    next()
+  })
+}

package/template-gx-design-thin/src/router/guard/stateGuard.ts

@@ -0,0 +1,10 @@
+import type { Router } from 'vue-router'
+
+export function createStateGuard(router: Router) {
+  router.afterEach((to) => {
+    const user = useStoreUser()
+    if (to.path === '/user/login') {
+      user.resetPermissions()
+    }
+  })
+}

package/template-gx-design-thin/src/router/helper/routeHelper.ts

@@ -0,0 +1,231 @@
+import { cloneDeep } from 'lodash-es'
+import type { AppRouteModule, MenuDataItem } from '@gx-design-vue/pro-layout'
+import { getMaxFloor } from '@gx-design-vue/pro-utils'
+import { warning } from '@gx-design/utils'
+
+/**
+ * @description: default layout
+ */
+export const BasicLayout = () => import('@/layout/BasicLayout.vue')
+export const IframeView = () => import('@/layout/IframeView.vue')
+export const EXCEPTION_COMPONENT = () => import('@/views/exception/404/index.vue')
+
+const LayoutMap = new Map<string, any>()
+
+LayoutMap.set('BasicLayout', BasicLayout)
+LayoutMap.set('IframeView', IframeView)
+
+let dynamicViewsModules: Record<string, () => Promise<Recordable>>
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/5/14
+ * @lastTime    2021/5/14
+ * @description 根路由
+ */
+const rootRouter: MenuDataItem[] = buildMenu([
+  {
+    path: '/',
+    name: 'index',
+    meta: { title: '首页' },
+    component: 'BasicLayout',
+    redirect: '',
+    children: []
+  }
+])
+
+// Dynamic introduction
+function asyncImportRoute(component: string) {
+  dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}')
+  return dynamicImport(dynamicViewsModules, component)
+}
+
+function dynamicImport(
+  dynamicViewsModules: Record<string, () => Promise<Recordable>>,
+  component: string
+) {
+  const keys = Object.keys(dynamicViewsModules)
+  const matchKeys = keys.filter((key) => {
+    const k = key.replace('../../views', '')
+    if (!component)
+      return false
+    const startFlag = component.startsWith('/')
+    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx')
+    const startIndex = startFlag ? 0 : 1
+    const lastIndex = endFlag ? k.length : k.lastIndexOf('.')
+    return k.substring(startIndex, lastIndex) === component
+  })
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0]
+    return dynamicViewsModules[matchKey]
+  } else if (matchKeys?.length > 1) {
+    warning(
+      true,
+      '请不要在views文件夹下的同一层次目录中创建具有相同文件名的“.vue”和“.TSX”文件。这将导致动态导入失败'
+    )
+  } else {
+    warning(
+      true,
+      '在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!'
+    )
+    return EXCEPTION_COMPONENT
+  }
+
+  return false
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/5/14
+ * @lastTime    2021/5/14
+ * @description 将后台树形数据菜单和本地菜单结合
+ */
+export function getRootMenu(rows: MenuDataItem[]): MenuDataItem[] {
+  let menus: MenuDataItem[] = []
+  if (getMaxFloor(cloneDeep(rows)) > 1) {
+    menus = buildMenu(rows)
+  } else {
+    buildtree(rows, menus, 0)
+  }
+  rootRouter[0].children = menus
+  rootRouter[0].children.push({
+    key: 'externalLink',
+    path: '/externalLink',
+    meta: {
+      title: '外链地址'
+    },
+    hidden: true
+  } as MenuDataItem)
+  return cloneDeep(rootRouter)
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/5/14
+ * @lastTime    2021/5/14
+ * @description 格式化 后端 结构信息并递归生成层级路由表
+ */
+export const generator = (routerMap: MenuDataItem[], parent?: AppRouteModule) => {
+  return routerMap.map((item: MenuDataItem) => {
+    const parentPath = parent?.path || ''
+    const currentRouter: AppRouteModule = {
+      // 路由地址 动态拼接生成如 /dashboard/workplace
+      path: parentPath
+        ? `${parent.path === '/' ? '' : parentPath}/${item.path}`
+        : `/${item.path}`,
+      // 路由名称，建议唯一
+      name: item.name || '',
+      // 该路由对应页面的 组件 优先根据组件名或者key从constantRouterComponents获取，没有则通过组件名地址查询
+      component: item.component
+        ? (LayoutMap.get(item.component || item.key) || asyncImportRoute(item.component))
+        : undefined,
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      redirect: item.redirect,
+      meta: {
+        title: item.title || '',
+        tagFixed: item.tagFixed as boolean,
+        tagHidden: item.tagHidden as boolean,
+        icon: item.icon || undefined,
+        homePage: item.homePage || 0,
+        iconType: item.iconType || undefined,
+        hideInMenu: item.hideInMenu || false,
+        hideChildrenInMenu: item.hideChildrenInMenu || false,
+        target: item.target,
+        keepAlive: item.keepAlive,
+        targetStatus: item.targetStatus,
+        animateDisabled: item.animateDisabled,
+        currenFulltPath: item.currenFulltPath
+      }
+    }
+    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    if (!currentRouter.path.startsWith('http')) {
+      currentRouter.path = currentRouter.path.replace('//', '/')
+    }
+    // 重定向
+    item.redirect && (currentRouter.redirect = item.redirect)
+    // 是否有子菜单，并递归处理
+    if (item.children && item.children.length > 0) {
+      // Recursion
+      currentRouter.children = generator(item.children, currentRouter)
+    }
+    return currentRouter
+  })
+}
+
+function handleMenuParams(menuItem: MenuDataItem): MenuDataItem {
+  const {
+    title = '',
+    menuType,
+    icon = '',
+    iconType = 1, // 菜单图标类型 0:本地 1:自定义 2:图片
+    tagFixed = '1', // 标签栏固定状态（标签栏路由地址是否固定（只有标签栏为显示转态才生效））0:是 1:否
+    tagHidden = '0', // 标签栏显示状态（隐藏的路由是否显示在标签栏中（只有标签栏为显示转态才生效））0:显示 1:隐藏
+    homePageFlag = 0, // 是否为主页（选择后为登录后跳转改地址，不选择默认跳转 /）0:否 1:是
+    isFrame = '1', // 是否外链 0:是 1:否
+    keepAlive = false,
+    animateDisabled = false,
+    redirect,
+    currenFulltPath,
+    outLinkType = 0 // 外链类型（选择是系统内则以iframe形式在系统内部展示，否则跳转新页面打开） 0:系统内 1:系统外
+  } = menuItem.meta ?? menuItem
+  return {
+    title,
+    name: menuItem.name || title,
+    key: menuItem.name || title,
+    icon,
+    keepAlive,
+    menuType,
+    iconType: iconType || 1,
+    hideInMenu: !!menuItem.hidden,
+    hideChildrenInMenu: !!menuItem.hideChildrenInMenu,
+    homePage: homePageFlag,
+    path: menuItem.path && menuItem.path.length > 0
+      ? menuItem.path
+      : undefined,
+    component: menuItem.component,
+    redirect: redirect === 'noRedirect'
+      ? ''
+      : redirect,
+    animateDisabled,
+    currenFulltPath,
+    tagFixed: tagFixed === '0',
+    tagHidden: tagHidden === '1',
+    target: isFrame === '0' ? menuItem.target : '',
+    targetStatus: outLinkType || 0
+  }
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/5/14
+ * @lastTime    2021/5/14
+ * @description 将后台树形结构菜单数据添加后修改属性（具体修改看后台返回值）
+ */
+export function buildMenu(list: MenuDataItem[]) {
+  return list.map((muenuItem) => {
+    return { ...handleMenuParams(muenuItem), children: buildMenu(muenuItem.children || []) }
+  })
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/5/14
+ * @lastTime    2021/5/14
+ * @description 将后台菜单数据变成树形结构（具体修改看后台返回值）
+ */
+export function buildtree(
+  rootMenu: MenuDataItem[],
+  menuList: MenuDataItem[],
+  parentId: string | number
+) {
+  rootMenu.forEach((muenuItem) => {
+    if (muenuItem.parentId === parentId) {
+      const child: MenuDataItem = { ...handleMenuParams(muenuItem), children: [] }
+      buildtree(rootMenu, child.children, muenuItem.menuId)
+      if (child.children.length === 0) {
+        delete child.children
+      }
+      menuList.push(child)
+    }
+  })
+}

package/template-gx-design-thin/src/router/helper/utils.ts

@@ -0,0 +1,19 @@
+export function getFirstLastChild(data: any[]) {
+  let newPath
+  // 获取第一个children的path
+  const getRoutePath = function (newdata) {
+    let firstPath = ''
+    if (newdata.children && newdata.children.length > 0) {
+      firstPath = getRoutePath(newdata.children[0])
+    } else {
+      firstPath = `${newdata.path}`
+    }
+    return firstPath
+  }
+  if (data[0].children && data[0].children.length > 0) {
+    newPath = getRoutePath(data[0].children[0])
+  } else {
+    newPath = data[0].path
+  }
+  return newPath
+}

package/template-gx-design-thin/src/router/index.ts

@@ -0,0 +1,31 @@
+import type { App } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { defaultSettings } from '@gx-config'
+import { constantRoutes } from './routes'
+
+const { routerMode } = defaultSettings
+
+function handleRouterMode() {
+  switch (routerMode) {
+    case 'hash':
+      return createWebHashHistory()
+      break
+    case 'browser':
+      return createWebHistory()
+      break
+    default:
+      return createWebHashHistory()
+      break
+  }
+}
+
+export const router = createRouter({
+  history: handleRouterMode(),
+  routes: constantRoutes as unknown as RouteRecordRaw[]
+})
+
+// 配置路由器
+export function setupRouter(app: App<Element>) {
+  app.use(router)
+}

package/template-gx-design-thin/src/router/routes/index.ts

@@ -0,0 +1,86 @@
+import type { AppRouteModule } from '@gx-design-vue/pro-layout'
+import UserLayout from '@/layout/UserLayout.vue'
+import BlankLayout from '@/layout/BlankLayout.vue'
+import BasicLayout from '@/layout/BasicLayout.vue'
+
+// import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true })
+const routeModuleList: AppRouteModule[] = []
+
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+  const mod = (modules[key] as any).default || {}
+  const modList = Array.isArray(mod) ? [ ...mod ] : [ mod ]
+  routeModuleList.push(...modList)
+})
+
+// 基本路由
+export const constantRoutes: AppRouteModule[] = [
+  {
+    path: '/user',
+    component: UserLayout,
+    redirect: '/user/login',
+    children: [
+      {
+        path: '/user/login',
+        name: 'Login',
+        meta: {
+          hideInMenu: true,
+          title: '登录'
+        },
+        component: () => import('@/views/user/login/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/exception',
+    name: 'Exception',
+    component: BlankLayout,
+    redirect: '/exception/403',
+    meta: {
+      hideInMenu: true,
+      title: '错误页',
+      icon: 'error-warning-line'
+    },
+    children: [
+      {
+        path: '/exception/403',
+        name: 'Error403',
+        component: () => import('@/views/exception/403/index.vue'),
+        meta: {
+          hideInMenu: true,
+          title: '403',
+          icon: 'error-warning-line'
+        }
+      },
+      {
+        path: '/exception/404',
+        name: 'Error404',
+        component: () => import('@/views/exception/404/index.vue'),
+        meta: {
+          hideInMenu: true,
+          title: '404',
+          icon: 'error-warning-line'
+        }
+      }
+    ]
+  }
+]
+
+// authentication为all（后端生成的路由）本地路由
+export const asyncRoutes: AppRouteModule[] = routeModuleList
+
+// 自定义路由
+export const localRoutes: AppRouteModule[] = [
+  {
+    path: '/',
+    name: '首页',
+    component: BasicLayout,
+    redirect: '/workplace',
+    children: routeModuleList
+  },
+  {
+    path: '/:path(.*)*',
+    redirect: '/exception/404'
+  }
+]

package/template-gx-design-thin/src/router/routes/modules/dataSource.ts

@@ -0,0 +1,12 @@
+import type { AppRouteModule } from '@gx-design-vue/pro-layout'
+
+const dataSource: AppRouteModule = {
+  path: '/two',
+  name: 'Two',
+  component: () => import('@/views/Page/two.vue'),
+  meta: {
+    title: '页面2'
+  }
+}
+
+export default dataSource

package/template-gx-design-thin/src/services/common/index.ts

@@ -0,0 +1,11 @@
+import type { DownLoadRequestConfig } from '@/utils/fetchFile'
+import fetchFile from '@/utils/fetchFile'
+
+export function download(params: DownLoadRequestConfig) {
+  const { showTip = true, method = 'get' } = params
+  return fetchFile({
+    ...params,
+    showTip,
+    method
+  })
+}

package/template-gx-design-thin/src/services/systemCenter/index.ts

@@ -0,0 +1 @@
+export * from './menu'

package/template-gx-design-thin/src/services/systemCenter/menu.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getMenuList<T = any, R = undefined>() {
+  return request<T, R>({
+    url: `/menu/navigate`,
+    method: 'post',
+    isMock: true
+  })
+}