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

package/template-gx-design-thin/src/services/userCenter/account.ts

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function getUserInfo() {
+  return request({
+    url: '/user/queryUserDetail',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function getUserList() {
+  return request({
+    url: '/user/account/list',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function getAccountGroupList() {
+  return request({
+    url: '/user/account/group',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function getAccountCount() {
+  return request({
+    url: '/user/account/count',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function updateUserDetails(data) {
+  return request({
+    url: '/user/account/update',
+    method: 'post',
+    data,
+    isMock: true
+  })
+}

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

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+export * from './account'
+
+export function login(data) {
+  return request({
+    url: '/user/login',
+    method: 'post',
+    data,
+    isMock: true
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/user/logout',
+    method: 'get',
+    isMock: true
+  })
+}
+
+export function register() {
+  return request({
+    url: '/user/register',
+    method: 'post',
+    isMock: true
+  })
+}

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

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

package/template-gx-design-thin/src/store/modules/dict.ts

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

package/template-gx-design-thin/src/store/modules/global.ts

@@ -0,0 +1,42 @@
+import { reactive } from 'vue'
+import { defineStore } from 'pinia'
+import type { ThemeConfig } from '@gx-design-vue/pro-provider'
+import { themeConfig as proThemeConfig } from '@gx-design-vue/pro-provider'
+import type { BasicLayoutProps } from '@gx-design-vue/pro-layout'
+import { handleThemeConfig } from '@gx-design-vue/pro-layout'
+import { defaultSettings, theme } from '@gx-config'
+import logo from '@/assets/logo.png'
+
+const layoutThemeConfig = {
+  ...proThemeConfig,
+  title: defaultSettings.title
+} as ThemeConfig
+
+/**
+ * @Author      gx12358
+ * @DateTime    2022/1/11
+ * @lastTime    2022/1/11
+ * @description store-global 全局属性
+ */
+export interface GlobalState {
+  globalLayout: BasicLayoutProps;
+  keepAlive: boolean;
+  showProgressBar: boolean;
+  disabledScrollTop: boolean;
+}
+
+export const useStoreGlobal = defineStore('global', () => {
+  const state = reactive<GlobalState>({
+    keepAlive: true,
+    showProgressBar: true,
+    disabledScrollTop: false,
+    globalLayout: {
+      logo,
+      ...handleThemeConfig({ ...layoutThemeConfig, primaryColor: theme.colorPrimary })
+    }
+  })
+
+  return {
+    ...toRefs(state)
+  }
+})

package/template-gx-design-thin/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-gx-design-thin/src/store/modules/routes.ts

@@ -0,0 +1,113 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+import type { AppRouteModule, MenuDataItem } from '@gx-design-vue/pro-layout'
+import { asyncRoutes, localRoutes } from '@/router/routes'
+import { getMenuList } from '@/services/systemCenter'
+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;
+}
+
+type RouteStateKey = keyof RoutesState
+
+export const useStoreRoutes = defineStore('routes', () => {
+  const state = reactive<RoutesState>({
+    routes: [],
+    routerLoadList: [],
+    meunLoading: false,
+    routerLoading: false
+  })
+
+  /**
+   * @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 getMenuList()
+    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 setRouteState: (params: Partial<Record<RouteStateKey, RoutesState[RouteStateKey]>>) => void = (params) => {
+    Object.assign(state, params)
+  }
+
+  return {
+    ...toRefs(state),
+    setRoutes,
+    setAllRoutes,
+    resetRoute,
+    addRouterLoadList,
+    setRouteState
+  }
+})

package/template-gx-design-thin/src/store/modules/tabsRouter.ts

@@ -0,0 +1,76 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface TabsRouterState {
+  visitedRoutes: Recordable[];
+}
+
+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
+  }
+})

package/template-gx-design-thin/src/store/modules/user.ts

@@ -0,0 +1,136 @@
+import { reactive, toRefs } from 'vue'
+import { defineStore } from 'pinia'
+import { notification } from 'ant-design-vue'
+import { defaultSettings } from '@gx-config'
+import type { UserDetails, UserInfo } from '@gx-mock/config/user'
+import { defaultUser } from '@gx-mock/config/user'
+import { getUserInfo, login, logout } from '@/services/userCenter'
+import { getAccessToken, removeAccessToken, setAccessToken } from '@/utils/accessToken'
+import { timeFix } from '@/utils/util'
+import { useStoreRoutes } from './routes'
+import { useStorePermission } from './permission'
+import { useStoreTabsRouter } from './tabsRouter'
+import { isObject } from '@gx-design-vue/pro-utils'
+import { cloneDeep } from 'lodash-es'
+
+const { tokenName, loginInterception } = defaultSettings
+
+export interface UserState {
+  accessToken: string;
+  userInfo: UserDetails;
+}
+
+type UserStateKey = keyof UserState
+
+export const useStoreUser = defineStore('user', () => {
+  const routes = useStoreRoutes()
+  const auth = useStorePermission()
+  const tabsRouter = useStoreTabsRouter()
+
+  const state = reactive<UserState>({
+    accessToken: getAccessToken(),
+    userInfo: {} as UserDetails
+  })
+
+  const userDetails = computed<UserDetails>(() => state.userInfo)
+
+  const setState: (params: Partial<Record<UserStateKey, UserState[UserStateKey]>>) => void = (params) => {
+    Object.assign(state, params)
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 登录拦截放行时，设置虚拟角色
+   */
+  const setVirtualUserInfo = () => {
+    auth.changeValue('admin', true)
+    auth.changeValue('role', defaultUser.roles)
+    auth.changeValue('ability', defaultUser.permissions)
+    setState({
+      userInfo: defaultUser.user as UserDetails
+    })
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 登录
+   */
+  const userLogin = async (params): Promise<boolean> => {
+    const response: ResponseResult<{ expiresIn: number; }> = await login(params)
+    const accessToken = response?.data?.[tokenName]
+    if (accessToken) {
+      const expiresIn = response?.data?.expiresIn
+      state.accessToken = accessToken
+      setAccessToken(accessToken, expiresIn ? expiresIn * 60 * 1000 : 0)
+      return true
+    }
+    return false
+  }
+
+  const updateUserInfo = async () => {
+    const response: ResponseResult<UserInfo> = await getUserInfo()
+    const { user, roles, permissions } = response?.data || {} as UserInfo
+    if (response && user && isObject(user)) {
+      if (user.userName && roles && Array.isArray(roles)) {
+        auth.changeValue('role', roles)
+        auth.changeValue('ability', permissions)
+
+        setState({
+          userInfo: cloneDeep(user)
+        })
+        notification.success({
+          message: `欢迎登录${state.userInfo?.userName}`,
+          description: `${timeFix()}！`
+        })
+      }
+    }
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 获取用户信息
+   */
+  const checkUserPremission = async () => {
+    if (loginInterception)
+      await updateUserInfo()
+    else setVirtualUserInfo()
+    return Object.keys(state.userInfo).length
+  }
+
+  const resetPermissions = () => {
+    state.accessToken = ''
+    removeAccessToken()
+    auth.changeValue('admin', false)
+    auth.changeValue('role', [])
+    auth.changeValue('ability', [])
+    routes.resetRoute()
+    tabsRouter.blankingTabs()
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/5/15
+   * @lastTime    2022/5/15
+   * @description 用户退出登录
+   */
+  const userLogut = async () => {
+    await logout()
+    resetPermissions()
+  }
+
+  return {
+    ...toRefs(state),
+    userDetails,
+    userLogin,
+    userLogut,
+    setState,
+    resetPermissions,
+    checkUserPremission
+  }
+})

package/template-gx-design-thin/src/utils/accessToken.ts

@@ -0,0 +1,80 @@
+import { defaultSettings } from '@gx-config'
+import {
+  delCookie,
+  getStorage,
+  removeStorage,
+  setCookie,
+  setStorage
+} from '@/utils/storage'
+
+const { storage, tokenTableName } = defaultSettings
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/12/27
+ * @lastTime    2021/12/27
+ * @description 获取accessToken
+ */
+export function getAccessToken() {
+  return getStorage({ key: tokenTableName, type: storage || 'localStorage' })
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 存储accessToken
+ * @param accessToken
+ * @returns {void|*}
+ */
+export function setAccessToken(accessToken: string, expired?: number) {
+  if (storage) {
+    if (storage === 'localStorage') {
+      return setStorage({
+        key: tokenTableName,
+        value: accessToken,
+        expired
+      })
+    } else if (storage === 'sessionStorage') {
+      return setStorage({
+        key: tokenTableName,
+        value: accessToken,
+        expired,
+        type: 'session'
+      })
+    } else if (storage === 'cookie') {
+      return setCookie(tokenTableName, accessToken, expired)
+    } else {
+      return setStorage({
+        key: tokenTableName,
+        value: accessToken,
+        expired
+      })
+    }
+  } else {
+    return setStorage({
+      key: tokenTableName,
+      value: accessToken,
+      expired
+    })
+  }
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 移除accessToken
+ * @returns {void|Promise<void>}
+ */
+export function removeAccessToken() {
+  if (storage) {
+    if (storage === 'localStorage') {
+      return removeStorage(tokenTableName)
+    } else if (storage === 'sessionStorage') {
+      return removeStorage(tokenTableName, 'session')
+    } else if (storage === 'cookie') {
+      return delCookie(tokenTableName)
+    } else {
+      return removeStorage(tokenTableName)
+    }
+  } else {
+    return removeStorage(tokenTableName)
+  }
+}

package/template-gx-design-thin/src/utils/crypto/base64.ts

@@ -0,0 +1,101 @@
+export default class Base64 {
+  _keyStr: string
+
+  constructor() {
+    this._keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+  }
+
+  _utf8_encode(string: string) {
+    string = string.replace(/\r\n/g, '\n')
+    let utftext = ''
+    for (let n = 0; n < string.length; n++) {
+      const c = string.charCodeAt(n)
+      if (c < 128) {
+        utftext += String.fromCharCode(c)
+      } else if ((c > 127) && (c < 2048)) {
+        utftext += String.fromCharCode((c >> 6) | 192)
+        utftext += String.fromCharCode((c & 63) | 128)
+      } else {
+        utftext += String.fromCharCode((c >> 12) | 224)
+        utftext += String.fromCharCode(((c >> 6) & 63) | 128)
+        utftext += String.fromCharCode((c & 63) | 128)
+      }
+    }
+    return utftext
+  }
+
+  _utf8_decode(utftext: string) {
+    let string = ''
+    let i = 0
+    let c = 0
+    let c1 = 0
+    let c2 = 0
+    while (i < utftext.length) {
+      c = utftext.charCodeAt(i)
+      if (c < 128) {
+        string += String.fromCharCode(c)
+        i++
+      } else if ((c > 191) && (c < 224)) {
+        c1 = utftext.charCodeAt(i + 1)
+        string += String.fromCharCode(((c & 31) << 6) | (c1 & 63))
+        i += 2
+      } else {
+        c1 = utftext.charCodeAt(i + 1)
+        c2 = utftext.charCodeAt(i + 2)
+        string += String.fromCharCode(((c & 15) << 12) | ((c1 & 63) << 6) | (c2 & 63))
+        i += 3
+      }
+    }
+    return string
+  }
+
+  encode(input: string) {
+    let output = ''
+    let chr1, chr2, chr3, enc1, enc2, enc3, enc4
+    let i = 0
+    input = this._utf8_encode(input)
+    while (i < input.length) {
+      chr1 = input.charCodeAt(i++)
+      chr2 = input.charCodeAt(i++)
+      chr3 = input.charCodeAt(i++)
+      enc1 = chr1 >> 2
+      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
+      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
+      enc4 = chr3 & 63
+      if (Number.isNaN(chr2)) {
+        enc3 = enc4 = 64
+      } else if (Number.isNaN(chr3)) {
+        enc4 = 64
+      }
+      output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(
+        enc3) + this._keyStr.charAt(enc4)
+    }
+    return output
+  }
+
+  decode(input: string) {
+    let output = ''
+    let chr1, chr2, chr3
+    let enc1, enc2, enc3, enc4
+    let i = 0
+    input = input.replace(/[^A-Za-z0-9+/=]/g, '')
+    while (i < input.length) {
+      enc1 = this._keyStr.indexOf(input.charAt(i++))
+      enc2 = this._keyStr.indexOf(input.charAt(i++))
+      enc3 = this._keyStr.indexOf(input.charAt(i++))
+      enc4 = this._keyStr.indexOf(input.charAt(i++))
+      chr1 = (enc1 << 2) | (enc2 >> 4)
+      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
+      chr3 = ((enc3 & 3) << 6) | enc4
+      output = output + String.fromCharCode(chr1)
+      if (enc3 !== 64) {
+        output = output + String.fromCharCode(chr2)
+      }
+      if (enc4 !== 64) {
+        output = output + String.fromCharCode(chr3)
+      }
+    }
+    output = this._utf8_decode(output)
+    return output
+  }
+}