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

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

@@ -0,0 +1,30 @@
+import type { App } from 'vue';
+import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
+import config from '/config/config'
+import { constantRoutes } from './routes'
+
+const { routerMode } = config.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-design-pro/src/router/routes/index.ts

@@ -0,0 +1,85 @@
+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.globEager('./modules/**/*.ts')
+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: '/menu',
+    children: routeModuleList
+  },
+  {
+    path: '/:path(.*)*',
+    redirect: '/exception/404'
+  }
+]

package/template-design-pro/src/router/routes/modules/workplace.ts

@@ -0,0 +1,19 @@
+const workplace: AppRouteModule = {
+  path: '/menu-two',
+  name: 'menuTwo',
+  meta: {
+    title: '目录二'
+  },
+  children: [
+    {
+      path: '/menu-two1',
+      name: 'menuTwo1',
+      component: () => import('@/views/MenuTwo/index.vue'),
+      meta: {
+        title: '菜单二'
+      },
+    }
+  ]
+}
+
+export default workplace

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

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+import { stringify } from 'qs'
+
+export function getRouterList(params?: any) {
+  return request({
+    url: `/menu/navigate?${stringify(params)}`,
+    method: 'post',
+    isMock: true
+  })
+}

package/template-design-pro/src/services/controller/user.ts

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+export function login(data) {
+  return request({
+    url: '/auth/login',
+    method: 'post',
+    data,
+    isMock: true
+  })
+}
+
+export function getUserInfo() {
+  return request({
+    url: '/userInfo',
+    method: 'post',
+    isMock: true
+  })
+}
+
+export function logout(params) {
+  return request({
+    url: '/logout',
+    method: 'get',
+    isMock: true,
+    params
+  })
+}
+
+export function register() {
+  return request({
+    url: '/register',
+    method: 'post',
+    isMock: true
+  })
+}

package/template-design-pro/src/services/system/dictData.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询字典数据详细
+export function getDicts(dictCode) {
+  return request({
+    url: '/dict/data/type/' + dictCode,
+    method: 'get',
+    isMock: true
+  })
+}

package/template-design-pro/src/services/system/notices.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getNotices() {
+  return request({
+    url: '/notices',
+    method: 'post',
+    isMock: true
+  })
+}

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

@@ -0,0 +1,32 @@
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import { useStoreUser } from './modules/user'
+import { useStoreDict } from './modules/dict'
+import { useStoreRoutes } from './modules/routes'
+import { useStoreSettings } from './modules/settings'
+import { useStorePermission } from './modules/permission'
+import { useStoreTabsRouter } from './modules/tabsRouter'
+
+export {
+  useStoreUser,
+  useStoreDict,
+  useStoreRoutes,
+  useStoreSettings,
+  useStorePermission,
+  useStoreTabsRouter
+}
+
+export function useStore() {
+  return {
+    user: useStoreUser(),
+    dict: useStoreDict(),
+    routes: useStoreRoutes(),
+    settings: useStoreSettings(),
+    permission: useStorePermission(),
+    tabsRouter: useStoreTabsRouter()
+  }
+}
+
+export function setupStore(app: App<Element>) {
+  app.use(createPinia())
+}

package/template-design-pro/src/store/modules/dict.ts

@@ -0,0 +1,27 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/1/11
+ * @lastTime    2022/1/11
+ * @description store-dict 数字字典
+ */
+export interface DictState {
+  data: RecordType;
+}
+
+export const useStoreDict = defineStore('dict', () => {
+  const state = reactive({
+    data: {}
+  } as DictState)
+
+  const setDictData = (type, value) => {
+    state.data[type] = value
+  }
+
+  return {
+    ...toRefs(state),
+    setDictData
+  }
+})

package/template-design-pro/src/store/modules/permission.ts

@@ -0,0 +1,19 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useStorePermission = defineStore('permission', () => {
+  const state = reactive({
+    admin: false,
+    role: [],
+    ability: []
+  })
+
+  const changeValue = (type: string, value: any) => {
+    state[type] = value
+  }
+
+  return {
+    ...toRefs(state),
+    changeValue
+  }
+})

package/template-design-pro/src/store/modules/routes.ts

@@ -0,0 +1,110 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+import { asyncRoutes, localRoutes } from '@/router/routes'
+import { getRouterList } from '@/services/controller/router'
+import { generator, getRootMenu } from '@/router/helper/routeHelper'
+import { getFirstLastChild } from '@/router/helper/utils'
+import { getLevelData } from '@gx-design-vue/pro-utils'
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/1/11
+ * @lastTime    2022/1/11
+ * @description store-routes 路由
+ */
+export interface RoutesState {
+  routes: AppRouteModule[];
+  routerLoadList: string[];
+  meunLoading: boolean;
+  routerLoading: boolean;
+}
+
+export const useStoreRoutes = defineStore('routes', () => {
+  const state = reactive({
+    routes: [],
+    routerLoadList: [],
+    meunLoading: false,
+    routerLoading: false
+  } as RoutesState)
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description intelligence（前端静态路由）模式设置路由
+   */
+  const setRoutes = () => {
+    state.routes = localRoutes
+    return [ ...localRoutes ]
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description all（后端动态路由）
+   */
+  const setAllRoutes = async () => {
+    let routes: AppRouteModule[] = []
+    state.meunLoading = true
+    const response: ResponseResult<MenuDataItem[]> = await getRouterList()
+    if (response && (response?.data)?.length) {
+      const notFoundRouter: AppRouteModule = {
+        path: '/:path(.*)*',
+        redirect: '/exception/404',
+        hidden: true
+      }
+      const rootMenu = getRootMenu(response?.data || [])
+      const asyncRouteList = generator(rootMenu)
+      asyncRouteList[0].children = [ ...(asyncRouteList[0]?.children || []), ...asyncRoutes ]
+      const haveHomePage = getLevelData(asyncRouteList[0].children)
+        .find(item => item.meta ? item.meta.homePage === 1 : false)
+      asyncRouteList[0].redirect = haveHomePage ? haveHomePage.path : getFirstLastChild(asyncRouteList[0].children)
+      asyncRouteList.push(notFoundRouter)
+      routes = [ ...asyncRouteList ]
+    }
+    state.routes = routes
+    state.meunLoading = false
+    return routes
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 重置路由
+   */
+  const resetRoute = () => {
+    state.routes = []
+    state.routerLoadList = []
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 添加路由记录
+   */
+  const addRouterLoadList = (path) => {
+    state.routerLoadList.push(path)
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 修改state状态
+   */
+  const changeValue = (type, value) => {
+    state[type] = value
+  }
+
+  return {
+    ...toRefs(state),
+    setRoutes,
+    setAllRoutes,
+    resetRoute,
+    addRouterLoadList,
+    changeValue
+  }
+})

package/template-design-pro/src/store/modules/settings.ts

@@ -0,0 +1,102 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+import config from '/config/config'
+import { MenuTheme, themeConfig } from '/types/config'
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/1/11
+ * @lastTime    2022/1/11
+ * @description store-settings 系统配置
+ */
+export interface SettingsState {
+  logo: string | boolean;
+  title: themeConfig['title'];
+  animate: themeConfig['animate'];
+  layout: themeConfig['layout'];
+  headerHeight: themeConfig['headerHeight'];
+  primaryColor: themeConfig['primaryColor'];
+  wideWidth: themeConfig['wideWidth'];
+  fixSiderbar: themeConfig['fixSiderbar'];
+  fixedHeader: themeConfig['fixedHeader'];
+  fixedMultiTab: themeConfig['fixedMultiTab'];
+  splitMenus: themeConfig['splitMenus'];
+  showTabsBar: themeConfig['showTabsBar'];
+  autoHideHeader: themeConfig['autoHideHeader'];
+  showProgressBar: themeConfig['showProgressBar'];
+  keepAlive: boolean;
+  collapse: boolean;
+  theme: MenuTheme | undefined;
+}
+
+const { logo, title } = config.defaultSettings
+
+const {
+  layout,
+  theme,
+  animate,
+  primaryColor,
+  splitMenus,
+  wideWidth,
+  headerHeight,
+  fixedMultiTab,
+  fixedHeader,
+  fixSiderbar,
+  autoHideHeader,
+  showTabsBar,
+  showProgressBar
+} = config.theme
+
+export const useStoreSettings = defineStore('settings', () => {
+  const state = reactive({
+    logo,
+    title,
+    collapse: false,
+    theme,
+    layout,
+    wideWidth,
+    headerHeight,
+    primaryColor,
+    animate: animate || {
+      name: 'fade',
+      direction: 'default'
+    },
+    splitMenus: layout === 'mix' ? splitMenus : false,
+    autoHideHeader,
+    showTabsBar: layout === 'simple' || layout === 'wide' ? false : showTabsBar,
+    fixedMultiTab: layout === 'simple' || layout === 'wide' ? false : fixedMultiTab,
+    fixedHeader: layout === 'mix' || layout === 'wide' ? true : layout === 'simple' ? false : fixedHeader,
+    fixSiderbar: layout === 'mix' ? true : layout === 'wide' ? false : fixSiderbar,
+    keepAlive: false,
+    showProgressBar
+  } as SettingsState)
+
+  const toggleCollapse = () => {
+    state.collapse = !state.collapse
+  }
+
+  const changeAnimateMode = (value: string) => {
+    state.animate.name = value
+  }
+
+  const changeAnimateDirections = (value: string) => {
+    state.animate.direction = value
+  }
+
+  const handleShowAnimate = (value: boolean) => {
+    state.animate.disabled = value
+  }
+
+  const changeValue = (type, value) => {
+    state[type] = value
+  }
+
+  return {
+    ...toRefs(state),
+    changeValue,
+    toggleCollapse,
+    changeAnimateMode,
+    handleShowAnimate,
+    changeAnimateDirections
+  }
+})

package/template-design-pro/src/store/modules/tabsRouter.ts

@@ -0,0 +1,73 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface TabsRouterState {
+  visitedRoutes: RecordType[];
+}
+
+export const useStoreTabsRouter = defineStore('tabsRouter', () => {
+
+  const state = reactive({
+    visitedRoutes: []
+  } as TabsRouterState)
+
+  const addVisitedRoute = (route) => {
+    const target = state.visitedRoutes.find((item) => item.path === route.path)
+    if (target) {
+      if (route.fullPath !== target.fullPath) Object.assign(target, route)
+      return
+    }
+    if (route.tagFixed) {
+      state.visitedRoutes.unshift(Object.assign({}, route))
+    } else {
+      state.visitedRoutes.push(Object.assign({}, route))
+    }
+  }
+
+  const delVisitedRoute = (route) => {
+    state.visitedRoutes.forEach((item, index) => {
+      if (item.path === route.path) state.visitedRoutes.splice(index, 1)
+    })
+  }
+
+  const delOthersVisitedRoutes = (route) => {
+    state.visitedRoutes = state.visitedRoutes.filter(
+      (item) => item.meta.tagFixed || item.path === route.path
+    )
+  }
+
+  const delLeftVisitedRoutes = (route) => {
+    let index = state.visitedRoutes.length
+    state.visitedRoutes = state.visitedRoutes.filter((item) => {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+      return item.meta.tagFixed || index <= state.visitedRoutes.indexOf(item)
+    })
+  }
+
+  const delRightVisitedRoutes = (route) => {
+    let index = state.visitedRoutes.length
+    state.visitedRoutes = state.visitedRoutes.filter((item) => {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+      return item.meta.tagFixed || index >= state.visitedRoutes.indexOf(item)
+    })
+  }
+
+  const delAllVisitedRoutes = () => {
+    state.visitedRoutes = state.visitedRoutes.filter((item) => item.meta.tagFixed)
+  }
+
+  const blankingTabs = () => {
+    state.visitedRoutes = []
+  }
+
+  return {
+    ...toRefs(state),
+    blankingTabs,
+    addVisitedRoute,
+    delVisitedRoute,
+    delOthersVisitedRoutes,
+    delLeftVisitedRoutes,
+    delRightVisitedRoutes,
+    delAllVisitedRoutes,
+  }
+})