af-mobile-client-vue3 1.0.54

package/src/stores/modules/user.ts

@@ -0,0 +1,180 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { createStorage } from '@af-mobile-client-vue3/utils/Storage'
+import {
+  ACCESS_TOKEN,
+  APP_LOGIN_KEY,
+  APP_PERMISSIONS_KEY,
+  APP_ROLES_KEY,
+  APP_ROUTES_KEY,
+  CURRENT_USER,
+} from '@af-mobile-client-vue3/stores/mutation-type'
+import { OALogin, doLogout, login } from '@af-mobile-client-vue3/api/user'
+import crypto from '@af-mobile-client-vue3/utils/crypto'
+import router from '@af-mobile-client-vue3/router/index'
+
+const Storage = createStorage({ storage: localStorage })
+
+export interface UserInfo {
+  id: number
+  username: string
+  password: string
+  name: string
+  avatar: string
+  functions: Array<any>
+}
+
+interface IUserState {
+  token?: string
+  userInfo: UserInfo
+  lastUpdateTime: number
+  permissions: [{ id: string, operation: string[] }]
+  roles: [{ id: string, operation: string[] }]
+  routesConfig: Array<any>
+  single: Array<ExtraRouteRecordRaw>
+  login: any
+}
+
+type ExtraRouteRecordRaw = RouteRecordRaw & {
+  delete: boolean
+  fullPath: string
+}
+
+interface LoginParams {
+  username: string
+  password: string
+  resourceName: string
+}
+
+export const useUserStore = defineStore('app-user', () => {
+  const userState = ref<IUserState>({
+    userInfo: null,
+    token: undefined,
+    lastUpdateTime: 0,
+    // 旧营收产品$login对象
+    login: undefined,
+    permissions: null,
+    roles: null,
+    routesConfig: null,
+    single: [],
+  } as IUserState)
+  const getUserInfo = () => {
+    return userState.value.userInfo || Storage.get(CURRENT_USER, {}) || {}
+  }
+  const getLogin = () => {
+    return userState.value.login || Storage.get(APP_LOGIN_KEY, []) || {}
+  }
+  const getPermissions = () => {
+    return userState.value.permissions || Storage.get(APP_PERMISSIONS_KEY, []) || []
+  }
+  const getRoles = () => {
+    return userState.value.roles || Storage.get(APP_ROLES_KEY, []) || []
+  }
+  const getRoutesConfig = () => {
+    return userState.value.routesConfig || Storage.get(APP_ROUTES_KEY, []) || []
+  }
+  const getToken = () => {
+    return userState.value.token || Storage.get(ACCESS_TOKEN, '') as string
+  }
+  const getLastUpdateTime = () => {
+    return userState.value.lastUpdateTime
+  }
+  const setToken = (token: string | undefined) => {
+    Storage.set(ACCESS_TOKEN, token)
+  }
+  const setUserInfo = (info: UserInfo | null) => {
+    userState.value.userInfo = info
+    userState.value.lastUpdateTime = new Date().getTime()
+    Storage.set(CURRENT_USER, info)
+  }
+  const setLogin = (login) => {
+    userState.value.login = login
+    Storage.set(APP_LOGIN_KEY, login)
+  }
+  const setSingle = (page: ExtraRouteRecordRaw) => {
+    if (page.path && page.delete) {
+      // 删除
+      userState.value.single = userState.value.single.filter(item => item.fullPath !== page.path)
+    }
+    else if (userState.value.single.filter(item => item.meta.singlePage === page.meta.singlePage).length === 0) {
+      // 添加
+      userState.value.single.push(page)
+    }
+  }
+  const setPermissions = (permissions: [{ id: string, operation: string[] }]) => {
+    userState.value.permissions = permissions
+    Storage.set(APP_PERMISSIONS_KEY, permissions)
+  }
+  const setRoles = (roles: [{ id: string, operation: string[] }]) => {
+    userState.value.roles = roles
+    Storage.set(APP_PERMISSIONS_KEY, roles)
+  }
+  const setRoutesConfig = (routesConfig: Array<any>) => {
+    userState.value.routesConfig = routesConfig
+    Storage.set(APP_ROUTES_KEY, routesConfig)
+  }
+  const Login = async (params: LoginParams) => {
+    try {
+      let data: any
+      const compatible = import.meta.env.VITE_APP_COMPATIBLE
+      if (compatible === 'OA') {
+        data = await OALogin(params)
+        // save token
+        setToken(params.password)
+      }
+      else {
+        data = await login(params)
+        // save token
+        setToken(data.access_token)
+        // 第三方教培系统鉴权兼容
+        const LoginTicket = crypto.AESEncrypt(JSON.stringify(params), '3KMKqvgwR8ULbR8Z')
+        Storage.set('LoginTicket', LoginTicket)
+      }
+      return Promise.resolve(data)
+    }
+    catch (error) {
+      return Promise.reject(error)
+    }
+  }
+  const logout = async () => {
+    if (getToken) {
+      try {
+        await doLogout()
+      }
+      catch {
+        console.error('注销Token失败')
+      }
+    }
+    setToken(undefined)
+    setUserInfo(null)
+    Storage.remove(ACCESS_TOKEN)
+    Storage.remove(CURRENT_USER)
+    Storage.remove(APP_LOGIN_KEY)
+    Storage.remove(APP_PERMISSIONS_KEY)
+    Storage.remove(APP_ROLES_KEY)
+    Storage.remove(APP_ROUTES_KEY)
+    Storage.remove('LoginTicket')
+    router.push('/login')
+  }
+
+  return {
+    Login,
+    getToken,
+    getLastUpdateTime,
+    logout,
+    setUserInfo,
+    getUserInfo,
+    getLogin,
+    getPermissions,
+    getRoles,
+    getRoutesConfig,
+    setLogin,
+    setSingle,
+    setPermissions,
+    setRoles,
+    setRoutesConfig,
+  }
+})
+
+export default useUserStore

package/src/stores/mutation-type.ts

@@ -0,0 +1,7 @@
+export const CURRENT_USER = 'CURRENT-USER'
+export const ACCESS_TOKEN = 'Authorization'
+export const APP_LOGIN_KEY = 'admin.login'
+export const APP_PERMISSIONS_KEY = 'admin.permissions'
+export const APP_ROLES_KEY = 'admin.roles'
+export const APP_ROUTES_KEY = 'admin.routes'
+export const APP_WEB_CONFIG_KEY = 'admin.webconfig'

package/src/styles/app.less

@@ -0,0 +1,67 @@
+:root {
+  --base-interval-0: 7px;
+  --base-interval-1: 14px;
+  --base-interval-2: 28px;
+}
+
+#system-app {
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+}
+
+html {
+  background: var(--van-white);
+  color-scheme: light;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.slide-fadein-left-enter-active,
+.slide-fadein-left-leave-active,
+.slide-fadein-right-enter-active,
+.slide-fadein-right-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s;
+}
+
+.slide-fadein-left-enter-from,
+.slide-fadein-right-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.slide-fadein-left-leave-to,
+.slide-fadein-right-enter-from {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  will-change: transform;
+  transition: transform .3s;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  position: absolute;
+  backface-visibility: hidden;
+}
+
+.slide-right-enter-from,
+.slide-left-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-right-leave-to,
+.slide-left-enter-from {
+  transform: translateX(-100%);
+}

package/src/styles/login.less

@@ -0,0 +1,81 @@
+.form {
+  width: 100%;
+  padding: 0 40px;
+  .form_field {
+    padding-right: 0;
+    padding-left: 0;
+    :deep(.van-field__label) {
+      opacity: 0.7;
+      color: rgb(88, 88, 88);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 23px;
+      text-transform: uppercase;
+      text-indent: 10px;
+    }
+    :deep(.van-field__body) {
+      height: 40px;
+      border-radius: 5px;
+      background: rgb(251, 251, 251);
+      box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.1);
+      color: rgb(71, 71, 71);
+      font-size: 16px;
+      font-weight: 400;
+      padding: 8px 10px;
+      opacity: 0.6;
+    }
+  }
+  .extra_setting {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 12px;
+    .extra_setting_for_remember_password {
+      opacity: 0.7;
+      color: rgb(88, 88, 88);
+      span {
+        position: relative;
+        bottom: 3px;
+        left: 5px;
+      }
+    }
+    .extra_setting_for_reset_password {
+      position: relative;
+      top: 2px;
+      opacity: 0.7;
+      color: rgb(56, 149, 250);
+    }
+  }
+  .btn {
+    height: 50px;
+    :deep(.van-button__text) {
+      color: rgb(255, 255, 255);
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 23px;
+    }
+  }
+  .login_btn {
+    background: rgb(56, 149, 250);
+    margin-top: 104px;
+  }
+  .reset_btn {
+    margin: 24px 0;
+  }
+  .back_btn {
+    :deep(.van-button__text) {
+      color: rgb(56, 149, 250);
+    }
+  }
+  :deep(.van-cell) {
+    background: #ffffff;
+  }
+  :deep(.van-cell:after) {
+    border-bottom: none;
+  }
+}
+.login_form {
+  margin-top: 65px;
+}
+.forget_password_form {
+  margin-top: 15px;
+}

package/src/typing.ts

@@ -0,0 +1,3 @@
+import type { Ref } from 'vue'
+
+export type MaybeRef<T> = T | Ref<T>

package/src/utils/Storage.ts

@@ -0,0 +1,124 @@
+// 默认缓存期限为7天
+const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7
+
+/**
+ * 创建本地缓存对象
+ */
+export function createStorage({ prefixKey = '', storage = localStorage } = {}) {
+  /**
+   * 本地缓存类
+   * @class Storage
+   */
+  const Storage = class {
+    private storage = storage
+    private prefixKey?: string = prefixKey
+
+    private getKey(key: string) {
+      return `${this.prefixKey}${key}`.toUpperCase()
+    }
+
+    /**
+     * @description 设置缓存
+     * @param {string} key 缓存键
+     * @param {*} value 缓存值
+     * @param expire
+     */
+    set(key: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
+      const stringData = JSON.stringify({
+        value,
+        expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
+      })
+      this.storage.setItem(this.getKey(key), stringData)
+    }
+
+    /**
+     * 读取缓存
+     * @param {string} key 缓存键
+     * @param {*=} def 默认值
+     */
+    get(key: string, def: any = null) {
+      const item = this.storage.getItem(this.getKey(key))
+      if (item) {
+        try {
+          const data = JSON.parse(item)
+          const { value, expire } = data
+          // 在有效期内直接返回
+          if (expire === null || expire >= Date.now())
+            return value
+
+          this.remove(key)
+        }
+        catch (e) {
+          return def
+        }
+      }
+      return def
+    }
+
+    /**
+     * 从缓存删除某项
+     * @param {string} key
+     */
+    remove(key: string) {
+      this.storage.removeItem(this.getKey(key))
+    }
+
+    /**
+     * 清空所有缓存
+     * @memberOf Cache
+     */
+    clear(): void {
+      this.storage.clear()
+    }
+
+    /**
+     * 设置cookie
+     * @param {string} name cookie 名称
+     * @param {*} value cookie 值
+     * @param {number=} expire 过期时间
+     * 如果过期时间为设置，默认关闭浏览器自动删除
+     * @example
+     */
+    setCookie(name: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
+      document.cookie = `${this.getKey(name)}=${value}; Max-Age=${expire}`
+    }
+
+    /**
+     * 根据名字获取cookie值
+     * @param name
+     */
+    getCookie(name: string): string {
+      const cookieArr = document.cookie.split('; ')
+      for (let i = 0, length = cookieArr.length; i < length; i++) {
+        const kv = cookieArr[i].split('=')
+        if (kv[0] === this.getKey(name))
+          return kv[1]
+      }
+      return ''
+    }
+
+    /**
+     * 根据名字删除指定的cookie
+     * @param {string} key
+     */
+    removeCookie(key: string) {
+      this.setCookie(key, 1, -1)
+    }
+
+    /**
+     * 清空cookie，使所有cookie失效
+     */
+    clearCookie(): void {
+      const keys = document.cookie.match(/[^ =;]+(?==)/g)
+      if (keys) {
+        for (let i = keys.length; i--;)
+          document.cookie = `${keys[i]}=0;expire=${new Date(0).toUTCString()}`
+      }
+    }
+  }
+  return new Storage()
+}
+
+export const storage = createStorage()
+
+export default Storage

package/src/utils/authority-utils.ts

@@ -0,0 +1,87 @@
+/**
+ * 判断是否有路由的权限
+ * @param authority 路由权限配置
+ * @param permissions 用户权限集合
+ * @returns {boolean|*}
+ */
+function hasPermission(authority: any, permissions) {
+  let required: string = '*'
+  if (typeof authority === 'string')
+    required = authority
+  else if (Array.isArray(authority))
+    required = authority.toString()
+  else if (typeof authority === 'object')
+    required = authority.permission
+
+  return required === '*' || hasAnyItem(required, permissions, (r, t) => !!(r === t || r === t.id))
+}
+
+/**
+ * 判断是否有路由需要的角色
+ * @param authority 路由权限配置
+ * @param roles 用户角色集合
+ */
+function hasRole(authority, roles) {
+  let required
+  if (typeof authority === 'object')
+    required = authority.role
+
+  return authority === '*' || hasAnyItem(required, roles, (r, t) => !!(r === t || r === t.id))
+}
+
+/**
+ * 判断目标数组是否有所需元素
+ * @param {string | string[]}required 所需元素，数组或单个元素
+ * @param {string[] | object[]} source 目标数组
+ * @param {Function} filter 匹配条件
+ * (r: String, s: String|Object) => boolean
+ * @returns {boolean}
+ */
+function hasAnyItem(required, source, filter) {
+  if (!required)
+    return false
+
+  const checkedList = Array.isArray(required) ? required : [required]
+  return !!source.find(s => checkedList.find(r => filter(r, s)))
+}
+
+/**
+ * 路由权限校验
+ * @param route 路由
+ * @param permissions 用户权限集合
+ * @param roles 用户角色集合
+ * @returns {boolean}
+ */
+function hasAuthority(route, permissions, roles) {
+  // TODO 此处判断可能有问题
+  if (!route.meta.pAuthorities)
+    return true
+
+  const authorities = [...route.meta.pAuthorities, route.meta.authority]
+  for (const authority of authorities) {
+    if (!hasPermission(authority, permissions) && !hasRole(authority, roles))
+      return false
+  }
+  return true
+}
+
+/**
+ * 根据权限配置过滤菜单数据
+ * @param menuData
+ * @param permissions
+ * @param roles
+ */
+function filterMenu(menuData, permissions, roles) {
+  return menuData.filter((menu) => {
+    if (menu.meta && menu.meta.invisible === undefined) {
+      if (!hasAuthority(menu, permissions, roles))
+        return false
+    }
+    if (menu.children && menu.children.length > 0)
+      menu.children = filterMenu(menu.children, permissions, roles)
+
+    return true
+  })
+}
+
+export { filterMenu, hasAuthority }

package/src/utils/common.ts

@@ -0,0 +1,41 @@
+import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+
+export function hexToRgba(hex: string, opacity: number) {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, (r, g, b) => {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  opacity = opacity >= 0 && opacity <= 1 ? Number(opacity) : 1
+  return result
+    ? `rgba(${
+      [Number.parseInt(result[1], 16), Number.parseInt(result[2], 16), Number.parseInt(result[3], 16), opacity].join(
+        ',',
+      )
+    })`
+    : hex
+}
+
+// 引入本地图片
+export function getImageUrl(url, prefix?): string {
+  return new URL(prefix ? prefix + url : url, import.meta.url).href
+}
+
+// 获取路由属性
+export function getFunction(link?: string): { children?: any[], link?: string, name?: string, parentId?: string, sort?: number } {
+  const FunctionPage = useUserStore().getUserInfo()?.functions?.filter((item) => {
+    return item.link === import.meta.env.VITE_APP_PUBLIC_PATH.replace('/', '')
+  })
+  if (FunctionPage?.length > 0) {
+    if (link) {
+      if (FunctionPage[0].children?.length > 0) {
+        return FunctionPage[0].children?.filter((_item) => {
+          return _item.link === link
+        })[0]
+      }
+    }
+    return Object.assign({ children: [] }, FunctionPage[0])
+  }
+  return { children: [] }
+}

package/src/utils/crypto.ts

@@ -0,0 +1,39 @@
+import AesEncryptJS from 'crypto-js'
+export default {
+  /**
+   * AES加密
+   *
+   * @param word
+   * @returns {any}
+   */
+  AESEncrypt(word: string, encryKey: string): string {
+    const key = AesEncryptJS.enc.Utf8.parse(encryKey)
+    const srcs = AesEncryptJS.enc.Utf8.parse(word)
+    const encrypted = AesEncryptJS.AES.encrypt(srcs, key, {
+      mode: AesEncryptJS.mode.ECB,
+      padding: AesEncryptJS.pad.Pkcs7,
+    })
+    return encrypted.toString()
+  },
+  /**
+   * AES解密
+   *
+   * @param word
+   * @param encryKey
+   * @returns {any}
+   */
+  AESDecrypt(word: string, encryKey: string): any {
+    const key = AesEncryptJS.enc.Utf8.parse(encryKey)
+    const decrypt = AesEncryptJS.AES.decrypt(word, key, {
+      mode: AesEncryptJS.mode.ECB,
+      padding: AesEncryptJS.pad.Pkcs7,
+    })
+    const ret = AesEncryptJS.enc.Utf8.stringify(decrypt).toString()
+    try {
+      return JSON.parse(ret)
+    }
+    catch (e) {
+      return ret
+    }
+  },
+}

package/src/utils/dataUtil.ts

@@ -0,0 +1,42 @@
+/**
+ * 构造树型结构数据
+ * [label,value,children]
+ */
+export function handleTree(data: any, id?: string, parentId?: string, children?: string) {
+  const config = {
+    id: id || 'id',
+    parentId: parentId || 'parent_id',
+    childrenList: children || 'children',
+  }
+  const childrenListMap = {}
+  const nodeIds = {}
+  const tree = []
+  for (const d of data) {
+    const parentId = d[config.parentId]
+    if (childrenListMap[parentId] == null)
+      childrenListMap[parentId] = []
+
+    nodeIds[d[config.id]] = d
+    childrenListMap[parentId].push(d)
+  }
+  for (const d of data) {
+    const parentId = d[config.parentId]
+    if (nodeIds[parentId] == null)
+      tree.push(d)
+  }
+  for (const t of tree)
+    adaptToChildrenList(t)
+
+  function adaptToChildrenList(o) {
+    o.label = o.name
+    o.value = o.name
+    if (childrenListMap[o[config.id]] !== null)
+      o[config.childrenList] = childrenListMap[o[config.id]]
+
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList])
+        adaptToChildrenList(c)
+    }
+  }
+  return tree
+}