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

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

@@ -1,104 +0,0 @@
-<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

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

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

@@ -1,76 +0,0 @@
-<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

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

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

@@ -1,7 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-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

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

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

@@ -1,84 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,244 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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
-}