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

package/template-mobile-vant-cli/src/pages/user/login/index.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+interface UserState {
+  userName: string
+  password: string
+}
+
+const { user } = useStore()
+const router = useRouter()
+
+const loading = ref(false)
+
+const userForm = reactive<UserState>({
+  userName: 'admin',
+  password: 'gx.design'
+})
+
+const userRules = reactive({
+  userName: [ { required: true, message: '用户名是必填项！' } ],
+  password: [ { required: true, message: '密码是必填项！' } ]
+})
+
+const handleSubmit = async () => {
+  const response = await user.userLogin(toRaw(userForm))
+  if (response) {
+    router.push({ path: '/' })
+  }
+}
+</script>
+
+<template>
+  <div class="h-100vh w-full flex flex-col items-center pt-150">
+    <img class="h-40" src="@/assets/logo.png" alt="logo">
+    <div class="mt-50 w-75%">
+      <van-form validate-trigger="onSubmit">
+        <div class="overflow-hidden rounded-3xl">
+          <van-field
+            v-model="userForm.userName"
+            :rules="userRules.userName"
+            name="userName"
+            placeholder="用户名: admin"
+          />
+        </div>
+        
+        <div class="mt-24 overflow-hidden rounded-3xl">
+          <van-field
+            v-model="userForm.password"
+            type="password"
+            :rules="userRules.password"
+            name="password"
+            placeholder="密码: gx.design"
+          />
+        </div>
+        
+        <div class="mt-24">
+          <van-button
+            :loading="loading"
+            type="primary"
+            native-type="submit"
+            round
+            block
+            @click="handleSubmit"
+          >
+            登录
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+</style>

package/template-mobile-vant-cli/src/plugins/dayjs/index.ts

@@ -0,0 +1,3 @@
+import dayjs from 'dayjs'
+
+dayjs.locale('zh-cn')

package/template-mobile-vant-cli/src/plugins/index.ts

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

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

@@ -0,0 +1,18 @@
+import type { MenuDataItem } from '@gx-design-vue/pro-layout'
+import type { Router } from 'vue-router'
+import getPageTitle from '@/utils/pageTitle'
+import { createPermissionGuard } from './permissions'
+import { createStateGuard } from './stateGuard'
+
+export function setupRouterGuard(router: Router) {
+  createPageGuard(router)
+  createPermissionGuard(router)
+  createStateGuard(router)
+}
+
+export function createPageGuard(router: Router) {
+  router.afterEach((to) => {
+    const { meta } = to as MenuDataItem
+    document.title = getPageTitle(meta?.title || '')
+  })
+}

package/template-mobile-vant-cli/src/router/guard/permissions.ts

@@ -0,0 +1,41 @@
+import type { Router } from 'vue-router'
+import { defaultSettings } from '@gx-config'
+
+const { loginInterception, routesWhiteList } = defaultSettings.system
+
+export function createPermissionGuard(router: Router) {
+  const userStore = useStoreUser()
+
+  router.beforeEach(async (to, _, next) => {
+    if (loginInterception) {
+      const token = userStore.accessToken
+      if (routesWhiteList.includes(to.path)) {
+        if (token) {
+          next({ path: '/', replace: true })
+        }
+        next()
+        return
+      }
+      if (!token) {
+        userStore.resetPermissions()
+        next({ path: '/user/login', replace: true })
+        return
+      }
+
+      const hasUserId = userStore.userInfo.userId
+
+      if (hasUserId) {
+        next()
+        return
+      }
+
+      const status = await userStore.checkUserPremission()
+      if (status !== 1) {
+        userStore.resetPermissions()
+        next({ path: '/user/login', replace: true })
+        return
+      }
+    }
+    next()
+  })
+}

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)
 }