@gx-design-vue/create-gx-cli 0.1.15 → 0.1.16

package/template-mobile-vant-cli/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-mobile-vant-cli/src/router/index.ts

@@ -1,25 +1,31 @@
 import type { App } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
-import { createRouter, createWebHashHistory } from 'vue-router'
-import settings from '@/settings'
-import getPageTitle from '@/utils/pageTitle'
-import { constantRoutes } from './routes'
+import { defaultSettings } from '@gx-config'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { routerList } from './routes'
 
-export const router = createRouter({
-  history: createWebHashHistory(),
-  routes: constantRoutes as unknown as RouteRecordRaw[]
-})
+const { routerMode } = defaultSettings.system
 
-const doRouterPermission = () => {
-  router.afterEach((to) => {
-    const { meta }: any = to
-    document.title = getPageTitle(settings.title, meta.title || '')
-  })
+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: routerList as unknown as RouteRecordRaw[]
+})
+
 // 配置路由器
 export function setupRouter(app: App<Element>) {
   app.use(router)
-
-  doRouterPermission()
 }

package/template-mobile-vant-cli/src/router/routes/index.ts

@@ -0,0 +1,46 @@
+import BasicLayout from '@/layout/BasicLayout/index.vue'
+import UserLayout from '@/layout/UserLayout/index.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 notFoundRoute: AppRouteModule = {
+  path: '/:path(.*)*',
+  name: 'NotFound',
+  redirect: '/'
+}
+
+// 自定义路由
+export const routerList: AppRouteModule[] = [
+  {
+    path: '/user',
+    component: UserLayout,
+    name: 'UserLayout',
+    redirect: '/user/login',
+    children: [
+      {
+        path: '/user/login',
+        name: 'Login',
+        meta: {
+          title: '登录'
+        },
+        component: () => import('@/pages/user/login/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/',
+    name: '首页',
+    component: BasicLayout,
+    children: routeModuleList
+  },
+  notFoundRoute
+]

package/template-mobile-vant-cli/src/router/routes/modules/dataSource.ts

@@ -0,0 +1,32 @@
+export default [
+  {
+    path: '/',
+    name: 'Home',
+    meta: {
+      name: '首页',
+      icon: 'wap-home-o',
+      isMenu: true
+    },
+    component: () => import('@/pages/Home/index.vue')
+  },
+  {
+    path: '/account',
+    name: 'Account',
+    meta: {
+      name: '我的',
+      title: '个人中心',
+      icon: 'user-o',
+      isMenu: true
+    },
+    component: () => import('@/pages/Account/index.vue')
+  },
+  {
+    path: '/account/detail',
+    name: 'AccountDetails',
+    meta: {
+      title: '账号详情',
+      menuSelectKey: 'Account'
+    },
+    component: () => import('@/pages/Account/details.vue')
+  }
+] as AppRouteModule[]

package/template-mobile-vant-cli/src/services/userCenter/account.ts

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function getUserInfo<T, D = undefined>() {
+  return request<T, D>({
+    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-mobile-vant-cli/src/services/userCenter/index.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+export * from './account'
+
+export function login<T, D>(data) {
+  return request<T, D>({
+    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-mobile-vant-cli/src/store/index.ts

@@ -1,13 +1,16 @@
 import type { App } from 'vue'
 import { createPinia } from 'pinia'
 import { useStoreGlobal } from './modules/global'
+import { useStoreUser } from './modules/user'
 
 export {
-  useStoreGlobal
+  useStoreGlobal,
+  useStoreUser,
 }
 
 export function useStore() {
   return {
+    user: useStoreUser(),
     global: useStoreGlobal()
   }
 }

package/template-mobile-vant-cli/src/store/modules/global.ts

@@ -1,6 +1,5 @@
-import { reactive, toRefs } from 'vue'
+import { useReactiveState } from '@gx-design-vue/pro-hooks'
 import { defineStore } from 'pinia'
-import { deepCopy } from '@gx-design-vue/pro-utils'
 
 /**
  * @Author      gx12358
@@ -9,22 +8,16 @@ import { deepCopy } from '@gx-design-vue/pro-utils'
  * @description store-global 全局属性
  */
 export interface GlobalState {
-  token?: string; // app token
+  disabledScrollTop: boolean;
 }
 
-type GlobalStateKey = keyof GlobalState
-
 export const useStoreGlobal = defineStore('global', () => {
-  const state = reactive<GlobalState>({
-    token: ''
+  const [ state, setValue ] = useReactiveState<GlobalState>({
+    disabledScrollTop: false
   })
 
-  const setGlobalData: (params: Partial<Record<GlobalStateKey, GlobalState[GlobalStateKey]>>) => void = (params) => {
-    Object.assign(state, deepCopy(params))
-  }
-
   return {
-    ...toRefs(state),
-    setGlobalData
+    ...state,
+    setValue
   }
 })

package/template-mobile-vant-cli/src/store/modules/user.ts

@@ -0,0 +1,107 @@
+import { getUserInfo, login, logout } from '@/services/userCenter'
+import { getAccessToken, removeAccessToken, setAccessToken } from '@/utils/accessToken'
+import { defaultSettings } from '@gx-config'
+import { useReactiveState } from '@gx-design-vue/pro-hooks'
+import { isArray, isNumber, isObject } from '@gx-design-vue/pro-utils'
+import { defineStore } from 'pinia'
+
+const { loginInterception } = defaultSettings.system
+
+export interface UserState {
+  accessToken: string;
+  userInfo: UserDetails;
+}
+
+// 0 返回登录页 1 成功 2 返回注册页
+export type CheckUserStatus = 0 | 1 | 2
+
+export const useStoreUser = defineStore('user', () => {
+  const [ state, setValue ] = useReactiveState<UserState>({
+    accessToken: getAccessToken(),
+    userInfo: {} as UserDetails
+  }, { omitNil: false, omitEmpty: false })
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 登录拦截放行时，设置虚拟角色
+   */
+  const setVirtualUserInfo = (): CheckUserStatus => {
+    return 1
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 登录
+   */
+  const userLogin = async (params: any): Promise<boolean> => {
+    const response: ResponseResult<{ token: string; expiresIn: number }> = await login(params)
+    if (response) {
+      const accessToken = response.data?.token
+      if (accessToken) {
+        setValue({ accessToken })
+        setAccessToken(accessToken, response.data?.expiresIn ? response.data?.expiresIn * 60 * 1000 : 0)
+        return true
+      }
+    }
+
+    return false
+  }
+
+  const updateUserInfo = async (): Promise<CheckUserStatus> => {
+    let status: CheckUserStatus = 0
+    const response: ResponseResult<null, UserInfo> = await getUserInfo()
+    const { user, roles } = response || {} as UserInfo
+    if (response && user && isObject(user)) {
+      if (isNumber(user.userId) && roles && isArray(roles)) {
+        status = 1
+        setValue({ userInfo: { ...user } })
+      }
+    }
+    return status
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/1/11
+   * @lastTime    2022/1/11
+   * @description 获取用户信息
+   */
+  const checkUserPremission = async (): Promise<CheckUserStatus> => {
+    let status: CheckUserStatus = 0
+    if (loginInterception) {
+      status = await updateUserInfo()
+    } else {
+      status = setVirtualUserInfo()
+    }
+    return status
+  }
+
+  const resetPermissions = () => {
+    removeAccessToken()
+    setValue({ accessToken: '', userInfo: {} })
+  }
+
+  /**
+   * @Author      gx12358
+   * @DateTime    2022/5/15
+   * @lastTime    2022/5/15
+   * @description 用户退出登录
+   */
+  const userLogut = async () => {
+    await logout()
+    resetPermissions()
+  }
+
+  return {
+    ...state,
+    userLogin,
+    userLogut,
+    setValue,
+    resetPermissions,
+    checkUserPremission
+  }
+})

package/template-mobile-vant-cli/src/utils/accessToken.ts

@@ -0,0 +1,97 @@
+import {
+  delCookie,
+  getCookie,
+  getStorage,
+  removeStorage,
+  setCookie,
+  setStorage
+} from '@/utils/storage'
+import { defaultSettings } from '@gx-config'
+
+const { storage, storageName } = defaultSettings.token
+
+/**
+ * @Author      gx12358
+ * @DateTime    2021/12/27
+ * @lastTime    2021/12/27
+ * @description 获取accessToken
+ */
+export function getAccessToken() {
+  if (storage) {
+    if (storage === 'localStorage') {
+      return getStorage({ key: storageName, originKey: true })
+    } else if (storage === 'sessionStorage') {
+      return getStorage({ key: storageName, type: 'session', originKey: true })
+    } else if (storage === 'cookie') {
+      return getCookie(storageName)
+    } else {
+      return getStorage({ key: storageName, originKey: true })
+    }
+  } else {
+    return getStorage({ key: storageName, originKey: true })
+  }
+}
+
+/**
+ * @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: storageName,
+        originKey: true,
+        value: accessToken,
+        expired
+      })
+    } else if (storage === 'sessionStorage') {
+      return setStorage({
+        key: storageName,
+        originKey: true,
+        value: accessToken,
+        expired,
+        type: 'session'
+      })
+    } else if (storage === 'cookie') {
+      return setCookie(storageName, accessToken, expired)
+    } else {
+      return setStorage({
+        key: storageName,
+        originKey: true,
+        value: accessToken,
+        expired
+      })
+    }
+  } else {
+    return setStorage({
+      key: storageName,
+      originKey: true,
+      value: accessToken,
+      expired
+    })
+  }
+}
+
+/**
+ * @author gx12358 2539306317@qq.com
+ * @description 移除accessToken
+ * @returns {void|Promise<void>}
+ */
+export function removeAccessToken() {
+  if (storage) {
+    if (storage === 'localStorage') {
+      return removeStorage({ key: storageName, originKey: true })
+    } else if (storage === 'sessionStorage') {
+      return removeStorage({ key: storageName, type: 'session', originKey: true })
+    } else if (storage === 'cookie') {
+      return delCookie(storageName)
+    } else {
+      return removeStorage({ key: storageName, originKey: true })
+    }
+  } else {
+    return removeStorage({ key: storageName, originKey: true })
+  }
+}

package/template-mobile-vant-cli/src/utils/crypto/index.ts

@@ -1,10 +1,9 @@
+import { isArray, isJSONStr, isObject } from '@gx-design-vue/pro-utils'
+import CryptoProJS from 'crypto-js'
+import * as CryptoJS from 'crypto-js/core'
 import 'crypto-js/enc-utf8'
 import 'crypto-js/tripledes'
 import 'crypto-js/sha1'
-import * as CryptoJS from 'crypto-js/core'
-import CryptoProJS from 'crypto-js'
-import { isJSONStr } from '@/utils/validate'
-import { isArray, isObject } from '@gx-design-vue/pro-utils'
 
 const key = '1234123412ABCDEF' // 十六位十六进制数作为密钥
 

package/template-mobile-vant-cli/src/utils/env.ts

@@ -22,10 +22,10 @@ export function isPro(): boolean {
  * @Author      gx12358
  * @DateTime    2022/4/1
  * @lastTime    2022/4/1
- * @description 环境：非本地开发环境
+ * @description 环境：非开发环境
  */
 export function isBuild(): boolean {
-  return typeViteEnv('VITE_NODE_ENV') === 'production'
+  return typeViteEnv('VITE_APP_ENV') !== 'dev'
 }
 
 /**

package/template-mobile-vant-cli/src/utils/pageTitle.ts

@@ -1,14 +1,20 @@
+import { defaultSettings } from '@gx-config'
+
+const { title, titleReverse, titleSeparator } = defaultSettings.system
+
 /**
- * @author gx12358 2539306317@qq.com
+ * @Author      gx12358
+ * @DateTime    2024/9/20
+ * @lastTime    2024/9/20
  * @description 设置标题
- * @param pageTitle
- * @returns {string}
  */
-export default function getPageTitle(title: string, pageTitle: string) {
-  const newTitles: string[] = []
+export default function getPageTitle(pageTitle: string) {
+  let newTitles: string[] = []
   if (pageTitle)
     newTitles.push(pageTitle)
   if (title)
     newTitles.push(title)
-  return newTitles.join('-')
+  if (titleReverse)
+    newTitles = newTitles.reverse()
+  return newTitles.join(titleSeparator)
 }

package/template-mobile-vant-cli/src/utils/request/XHR.ts

@@ -1,14 +1,11 @@
 import type { AxiosError } from 'axios'
+import type { GAxiosInstance, GAxiosOptions, GAxiosResponse } from './typings'
+import { isFunction } from '@gx-design-vue/pro-utils'
 import axios from 'axios'
 import { cloneDeep } from 'lodash-es'
 import qs from 'qs'
-import { isFunction } from '@gx-design-vue/pro-utils'
-import type { GAxiosInstance, GAxiosOptions, GAxiosResponse } from './typings'
-import { ContentTypeEnum, RequestEnum } from './typings'
 import { AxiosCanceler } from './axiosCancel'
-
-export const getPendingUrl = (config: GAxiosOptions) => config.cancelKey || [ config.method, config.url ].join(
-  '&')
+import { ContentTypeEnum, RequestEnum } from './typings'
 
 /**
  * @Author      gx12358
@@ -99,8 +96,8 @@ export class GAxios {
     }
   }
 
-  request<T = ResponseResult | boolean>(config: GAxiosOptions): Promise<T> {
-    let conf: GAxiosOptions = cloneDeep(config)
+  request<T = ResponseResult | boolean>(config?: GAxiosOptions): Promise<T> {
+    let conf = cloneDeep(config || {} as GAxiosOptions)
 
     const opt: GAxiosOptions = Object.assign({}, this.options, conf)
 
@@ -117,10 +114,11 @@ export class GAxios {
         .then((res: GAxiosResponse) => {
           if (transformResponseHook && isFunction(transformResponseHook)) {
             try {
-              const ret = transformResponseHook(res, config)
+              const ret = transformResponseHook(res, config || {})
               resolve(ret)
-            } catch (err) {
-              resolve(false as any)
+            } catch (error) {
+              console.error('request-error', error)
+              resolve(false as unknown as Promise<T>)
               return
             }
             return

package/template-mobile-vant-cli/src/utils/request/axiosCancel.ts

@@ -1,7 +1,7 @@
 import type { Canceler } from 'axios'
-import axios from 'axios'
-import { isFunction } from '@gx-design-vue/pro-utils'
 import type { GAxiosOptions } from './typings'
+import { isFunction } from '@gx-design-vue/pro-utils'
+import axios from 'axios'
 
 export const getPendingUrl = (
   config: GAxiosOptions,
@@ -15,12 +15,12 @@ export class AxiosCanceler {
   constructor(ignoreCancel?: boolean) {
     this.pendingMap = new Map<string, Canceler>()
 
-    this.ignoreCancelToken = ignoreCancel
+    this.ignoreCancelToken = !!ignoreCancel
   }
 
   /**
    * Add request
-   * @param {Object} config
+   * @param {object} config
    */
   addPending(config: GAxiosOptions) {
     !this.ignoreCancelToken && this.removePending(config)
@@ -46,7 +46,7 @@ export class AxiosCanceler {
 
   /**
    * Removal request
-   * @param {Object} config
+   * @param {object} config
    */
   removePending(config: GAxiosOptions, key?: string) {
     const url = getPendingUrl(config, key)

package/template-mobile-vant-cli/src/utils/request/checkStatus.ts

@@ -1,9 +1,25 @@
+import { router } from '@/router'
+import { useStoreUser } from '@/store'
+import { showToast } from 'vant'
+
 /**
  * @author gx12358 2539306317@qq.com
  * @description 处理code异常
  * @param {*} code
  * @param {*} msg
  */
-export const handleCode = (_code: number, _msg: string) => {
-  // 这里处理不同状态
+export const handleCode = (code: number, msg: string) => {
+  const user = useStoreUser()
+  switch (code) {
+    case 401:
+      user.resetPermissions()
+      router.push({ path: '/user/login' })
+      break
+    default:
+      showToast({
+        type: 'fail',
+        message: msg || '后端接口异常'
+      })
+      break
+  }
 }