@gx-design-vue/create-gx-cli 0.0.4 → 0.0.5

package/template-design-pro/src/layout/BasicLayout.vue

@@ -0,0 +1,104 @@
+<template>
+  <g-pro-layout
+    v-model:collapsed="baseState.collapsed"
+    v-model:selectedKeys="baseState.selectedKeys"
+    v-model:openKeys="baseState.openKeys"
+    v-bind="state"
+    :breadcrumb="{ routes: baseState.breadcrumb }"
+    @reloadPage="handleReloadPage"
+    @handleCollapse="toggleCollapse"
+    @menuHeaderClick="menuHeaderClick"
+  >
+    <template v-if="store.settings.layout === 'wide'" #menuExtraRender>
+      <div class="text-center"> 额外元素 </div>
+    </template>
+    <ProContent :animate="state.animate" :isRouterAlive="isRouterAlive" />
+  </g-pro-layout>
+</template>
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { useStore } from '@gx-vuex'
+import { RouteContextProps, getMenuData, clearMenuItem } from '@gx-design/ProLayout'
+import config from '/config/config'
+import ProContent from './ContentView.vue'
+
+const { animate } = config
+const { preset } = animate
+
+const store = useStore()
+const router = useRouter()
+
+const isRouterAlive = ref(true)
+const routeData: AppRouteModule[] = router.getRoutes() as any
+
+const { menuData } = getMenuData(clearMenuItem(routeData))
+
+const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
+  breadcrumb: [],
+  selectedKeys: [],
+  openKeys: [],
+  collapsed: false
+})
+
+const state = reactive({
+  menuData,
+  logoDirection: 'vertical',
+  loading: computed(() => store.routes.routerLoading),
+  layout: computed(() => store.settings.layout),
+  theme: computed(() => store.settings.theme),
+  splitMenus: computed(() => store.settings.splitMenus),
+  primaryColor: computed(() => store.settings.primaryColor),
+  fixedMultiTab: computed(() => store.settings.fixedMultiTab),
+  fixedHeader: computed(() => store.settings.fixedHeader),
+  fixSiderbar: computed(() => store.settings.fixSiderbar),
+  showTabsBar: computed(() => store.settings.showTabsBar),
+  autoHideHeader: computed(() => store.settings.autoHideHeader),
+  showProgressBar: computed(() => store.settings.showProgressBar),
+  animate: computed(() => store.settings.animate)
+})
+
+watch(
+  () => router.currentRoute,
+  () => {
+    const matched = router.currentRoute.value.matched.concat()
+    const breadcrumb = matched.map((item) => {
+      return {
+        path: item.path,
+        breadcrumbName: item.meta.title || ''
+      }
+    })
+    baseState.breadcrumb = cloneDeep(breadcrumb)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watchEffect(() => {
+  if (router.currentRoute) {
+    const matched = router.currentRoute.value.matched.concat()
+    baseState.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path)
+    baseState.openKeys = matched
+      .filter((r) => r.path !== router.currentRoute.value.path)
+      .map((r) => r.path)
+  }
+})
+
+const handleReloadPage = () => {
+  isRouterAlive.value = false
+  nextTick(() => {
+    isRouterAlive.value = true
+  })
+}
+
+const toggleCollapse = () => {
+  store.settings.toggleCollapse()
+}
+const menuHeaderClick = () => {
+  router.push('/')
+}
+
+provide('reloadPage', handleReloadPage)
+</script>

package/template-design-pro/src/layout/BlankLayout.vue

@@ -0,0 +1,5 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <component :is="Component" />
+  </router-view>
+</template>

package/template-design-pro/src/layout/ContentView.vue

@@ -0,0 +1,76 @@
+<template>
+  <router-view>
+    <template #default="{ route, Component }">
+      <page-transition
+        :disabled="animate.disabled"
+        :animate="animate.name"
+        :direction="animate.direction"
+      >
+        <template v-if="isRouterAlive">
+          <keep-alive v-if="keepAlive">
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+          <component v-else :is="Component" :key="route.fullPath" />
+        </template>
+      </page-transition>
+    </template>
+  </router-view>
+  <IframeView v-if="iframeSrc" :frameSrc="iframeSrc" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from '@gx-vuex'
+import PageTransition from '@/components/PageTransition/index.vue'
+import IframeView from '../views/Iframe/index.vue'
+
+defineProps({
+  isRouterAlive: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  contentStyle: {
+    type: Object,
+    required: false,
+    default: () => {
+      return {}
+    }
+  },
+  animate: {
+    type: Object,
+    required: false,
+    default: () => {
+      return {}
+    }
+  }
+})
+
+const route = useRoute()
+const store = useStore()
+const router = useRouter()
+
+const keepAlive = ref(false)
+
+const iframeSrc = computed(() => {
+  const meta = router.currentRoute.value?.meta
+  return meta?.target && Number(meta?.targetStatus) === 0 ? meta?.target : ''
+})
+
+watch(
+  () => route,
+  () => {
+    const { meta }: { meta: Meta } = route
+    if (!store.settings.showTabsBar && !meta.keepAlive) {
+      keepAlive.value = false
+    } else {
+      keepAlive.value = store.settings.keepAlive || store.settings.showTabsBar || meta.keepAlive
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+</script>

package/template-design-pro/src/layout/IframeView.vue

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

package/template-design-pro/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-design-pro/src/main.ts

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+
+import { router, setupRouter } from '@/router'
+import { setupRouterGuard } from '@/router/guard'
+
+import App from './App.vue'
+import { setupStore } from './store'
+import { setupGlobCommon } from './core'
+
+import 'uno.css'
+
+import 'animate.css/source/animate.css'
+import './global.less'
+
+import './plugins'
+
+function startApp() {
+  const app = createApp(App)
+
+  // 配置store
+  setupStore(app)
+
+  setupGlobCommon(app)
+
+  // 配置路由
+  setupRouter(app)
+
+  // 路由守卫
+  setupRouterGuard(router)
+
+  app.mount('#app')
+}
+
+startApp()

package/template-design-pro/src/plugins/index.ts

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

package/template-design-pro/src/router/guard/index.ts

@@ -0,0 +1,84 @@
+import type { Router } from 'vue-router'
+import NProgress from 'nprogress'
+import config from '/config/config'
+import { useStoreRoutes, useStoreSettings } from '@gx-vuex'
+import getPageTitle from '@/utils/pageTitle'
+import { scrollToContainer } from '@/utils/util'
+import { createStateGuard } from './stateGuard'
+import { createPermissionGuard } from './permissions'
+
+const {
+  routerLoadTime,
+  routesWhiteList
+} = config.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 settings = useStoreSettings()
+
+  router.afterEach((to) => {
+    const { meta }: any = to
+    document.title = getPageTitle(meta.title || '')
+    if (
+      settings.layout !== 'wide' &&
+      routes.routerLoadList.every(item => item !== to.path) &&
+      routesWhiteList.indexOf(to.path) === -1
+    ) {
+      routes.addRouterLoadList(to.path)
+    }
+  })
+}
+
+export function createPageLoadingGuard(router: Router) {
+  const routes = useStoreRoutes()
+  const settings = useStoreSettings()
+
+  router.beforeEach(async (to) => {
+    if (
+      settings.layout !== 'wide' &&
+      routes.routerLoadList.every(item => item !== to.path) &&
+      routesWhiteList.indexOf(to.path) === -1
+    ) {
+      routes.changeValue('routerLoading', true)
+    }
+
+    return true
+  })
+
+  router.afterEach((_) => {
+    if (settings.layout === 'wide') {
+      routes.changeValue('routerLoading', false)
+    } else {
+      setTimeout(() => {
+        routes.changeValue('routerLoading', false)
+      }, routerLoadTime || 200)
+    }
+  })
+}
+
+export function createScrollGuard(router: Router) {
+  router.afterEach((_) => {
+    scrollToContainer(0)
+  })
+}
+
+export function createProgressGuard(router: Router) {
+  const settings = useStoreSettings()
+  router.beforeEach(() => {
+    if (settings.showProgressBar) NProgress.start()
+    return true
+  })
+
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}

package/template-design-pro/src/router/guard/permissions.ts

@@ -0,0 +1,73 @@
+import type { Router, RouteRecordRaw } from 'vue-router'
+import config from '/config/config'
+import { useStoreUser, useStoreRoutes, useStorePermission } from '@gx-vuex'
+
+const {
+  authentication,
+  loginInterception,
+  recordRoute,
+  routesWhiteList
+} = config.defaultSettings
+
+export function createPermissionGuard(router: Router) {
+  const userStore = useStoreUser()
+  const routeStore = useStoreRoutes()
+  const permissionStore = useStorePermission()
+
+  router.beforeEach(async (to, _, next) => {
+    const token = loginInterception || userStore.accessToken
+
+    if (routesWhiteList.includes(to.path)) {
+      if ((to.path === '/') && 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 userInfo = loginInterception
+      ? await userStore.queryUserInfo() : await userStore.setVirtualRoles()
+
+    if (!userInfo) {
+      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.changeValue('meunLoading', false)
+
+    if (routes?.length) {
+      routes.forEach((route) => {
+        router.addRoute(route as RouteRecordRaw)
+      })
+      next({ path: to.fullPath, replace: true })
+      return
+    }
+    next({ path: '/exception/403', replace: true })
+  })
+}

package/template-design-pro/src/router/guard/stateGuard.ts

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

package/template-design-pro/src/router/helper/routeHelper.ts

@@ -0,0 +1,244 @@
+import { cloneDeep } from 'lodash-es'
+import { warning } from '@gx-design/utils'
+import { getMaxFloor } from '@gx-design-vue/pro-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, () => Promise<typeof import('*.vue')>>()
+
+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”文件。这将导致动态导入失败'
+    )
+    return
+  } else {
+    warning(true, '在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!')
+    return EXCEPTION_COMPONENT
+  }
+}
+
+/**
+ * @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?) => {
+  return routerMap.map((item: any) => {
+    const currentRouter: AppRouteModule = {
+      // 路由地址 动态拼接生成如 /dashboard/workplace
+      path: parent && parent.path
+        ? `${parent.path === '/'
+          ? ''
+          : (parent.path || '')}/${item.path}`
+        : `/${item.path}`,
+      // 路由名称，建议唯一
+      name: item.name || '',
+      // 该路由对应页面的 组件 优先根据组件名或者key从constantRouterComponents获取，没有则通过组件名地址查询
+      component: item.menuType === 'M' ? undefined : (
+        LayoutMap.get(item.component || item.key) ||
+        asyncImportRoute(item.component)
+      ),
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: {
+        title: item.title || '',
+        tagFixed: item.tagFixed,
+        tagHidden: item.tagHidden,
+        icon: item.icon || undefined,
+        homePage: item.homePage || 0,
+        iconType: item.iconType || undefined,
+        hideInMenu: item.hidden || false,
+        target: item.target,
+        targetStatus: item.targetStatus
+      }
+    }
+    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    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
+  })
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/5/14
+ * @lastTime    2021/5/14
+ * @description 将后台树形结构菜单数据添加后修改属性（具体修改看后台返回值）
+ */
+export function buildMenu(list: MenuDataItem[]) {
+  return list.map((item: 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:否
+      outLinkType = 0 //外链类型（选择是系统内则以iframe形式在系统内部展示，否则跳转新页面打开） 0:系统内 1:系统外
+    } = item.meta ?? item
+    const child = {
+      title,
+      level: 'tree',
+      name: item.name || title,
+      key: item.name || title,
+      icon,
+      menuType,
+      iconType: iconType || 1,
+      hidden: !!item.hidden,
+      homePage: homePageFlag,
+      path: item.path && item.path.length > 0
+        ? item.path
+        : undefined,
+      component: item.component,
+      redirect: item.redirect === 'noRedirect'
+        ? ''
+        : item.redirect,
+      tagFixed: tagFixed === '0',
+      tagHidden: tagHidden === '1',
+      target: isFrame === '0' ? item.target : '',
+      targetStatus: outLinkType || 0,
+      children: item.children && item.children.length > 0
+        ? buildMenu(item.children)
+        : []
+    }
+    return child
+  })
+}
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/5/14
+ * @lastTime    2021/5/14
+ * @description 将后台菜单数据变成树形结构（具体修改看后台返回值）
+ */
+export function buildtree(list: MenuDataItem[], arr: MenuDataItem[], parentId: string | number) {
+  list.forEach((item: MenuDataItem) => {
+    const {
+      title = '',
+      icon = '',
+      menuType,
+      iconType = 1, //菜单图标类型 0:本地 1:自定义 2:图片
+      tagFixed = '1', //标签栏固定状态（标签栏路由地址是否固定（只有标签栏为显示转态才生效））0:是 1:否
+      tagHidden = '0', //标签栏显示状态（隐藏的路由是否显示在标签栏中（只有标签栏为显示转态才生效））0:显示 1:隐藏
+      homePageFlag = 0, //是否为主页（选择后为登录后跳转改地址，不选择默认跳转 /）0:否 1:是
+      isFrame = '1', //是否外链 0:是 1:否
+      outLinkType = 0 //外链类型（选择是系统内则以iframe形式在系统内部展示，否则跳转新页面打开） 0:系统内 1:系统外
+    } = item.meta ?? item
+    if (item.parentId === parentId) {
+      const child: any = {
+        level: 'flat',
+        title,
+        name: item.name || title,
+        key: item.name || title,
+        icon,
+        menuType,
+        iconType,
+        hidden: item.hidden,
+        homePage: homePageFlag,
+        path: item.path && item.path.length > 0
+          ? item.path
+          : undefined,
+        component: item.component,
+        redirect: item.redirect === 'noRedirect'
+          ? ''
+          : item.redirect,
+        tagFixed: tagFixed === '0',
+        tagHidden: tagHidden === '1',
+        target: isFrame === '0' ? item.target : '',
+        targetStatus: outLinkType || 0,
+        children: []
+      }
+      buildtree(list, child.children, item.menuId)
+      if (child.children.length === 0) {
+        delete child.children
+      }
+      arr.push(child)
+    }
+  })
+}

package/template-design-pro/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
+}