芋道前端utils文件夹

一、auth.ts

1.令牌相关方法

• getAccessToken(): 获取访问令牌
• getRefreshToken(): 获取刷新令牌
• setToken(token:TokenType): 设置访问令牌和刷新令牌
• removeToken(): 删除访问令牌和刷新令牌
• formatToken(token:string): 格式化令牌为 JWT 格式

2.登录表单相关方法

• getLoginForm(): 获取登录表单信息
• setLoginForm(loginForm: LoginFormType):设置登录表单信息
• removeLoginForm(): 删除登录表单信息

3.租户相关方法

• getTenantId(): 获取租户 ID
• setTenantId(username: string): 设置租户 ID

这些方法主要用于处理身份验证、登录表单和租户信息的存储和检索。它们使用了 wsCache 对象来进行缓存操作,并且在处理密码时使用了加密和解密函数。
需要注意的是,这个文件中还定义了一些类型和常量,如 LoginFormType 和各种缓存键名。这些不是方法,但对于理解和使用这些方法很重要。

二、color.ts

• isHexColor(color: string): 判断是否为十六进制颜色值
• rgbToHex(r: number, g:number, b: number): RGB 颜色值转换为十六进制颜色值
• hexToRGB(hex: string, opacity?:number): 十六进制颜色转换为 RGB 表示
• colorIsDark(color: string): 判断颜色是否为深色
• darken(color: string, amount: number): 使十六进制颜色变暗
• lighten(color:string, amount: number): 使十六进制颜色变亮
• calculateBestTextColor(hexColor:string): 根据背景色计算最佳文本颜色(黑色或白色)

三、constants.ts

定义一些常量

• CommonStatusEnum：定义了全局通用状态的枚举。
• UserTypeEnum：定义了全局用户类型的枚举。
• SystemMenuTypeEnum：定义了菜单的类型枚举。

四、dateUtil.ts

• formatToDateTime(date?: dayjs.ConfigType, format = DATE_TIME_FORMAT):string

• formatToDate(date?: dayjs.ConfigType, format = DATE_FORMAT): string

五、dict.ts

六、domUtils.ts

七、download.ts

八、filt.ts

九、formatter.ts

十、formatTime.ts

十一、formCreate.ts

十二、formRules.ts

十三、index.ts

十四、is.ts

is = (val: unknown, type: string)
isDef = <T = unknown>(val?: T): val is T
isUnDef = <T = unknown>(val?: T): val is T
isObject = (val: any): val is Record<any, any>
isEmpty = (val: any): boolean
isDate = (val: unknown): val is Date
isNull = (val: unknown): val is null
isNullAndUnDef = (val: unknown): val is null | undefined
isNullOrUnDef = (val: unknown): val is null | undefined
isNumber = (val: unknown): val is number
isPromise = <T = any>(val: unknown): val is Promise
isString = (val: unknown): val is string
isFunction = (val: unknown): val is Function
isBoolean = (val: unknown): val is boolean
isRegExp = (val: unknown): val is RegExp
isArray = (val: any): val is Array
isWindow = (val: any): val is Window
isElement = (val: unknown): val is Element
isMap = (val: unknown): val is Map<any, any>
isUrl = (path: string): boolean
isDark = (): boolean
isImgPath = (path: string): boolean
isEmptyVal = (val: any): boolean

十五、jsencrypt.ts

密钥对生成

• encrypt(txt: string)：加密
• decrypt(txt: string)：解密

十六、Logger.ts

isArray(obj: any): boolean
Logger.typeColor (type: string)
Logger.print (type = ‘default’, text: any, back = false)
Logger.printBack (type = ‘primary’, text)
Logger.pretty (type = ‘primary’, title, text)
Logger.prettyPrimary (title, …text)
Logger.prettySuccess (title, …text)
Logger.prettyWarn (title, …text)
Logger.prettyError = function (title, …text)
Logger.prettyInfo (title, …text)

十七、permission.ts

这个文件 src/utils/permission.ts 主要包含两个函数：checkPermi 和 checkRole，用于权限和角色的校验。
以下是对这两个函数的分析：

• checkPermi 函数：

功能：检查用户是否具有特定的权限。
参数：接收一个字符串数组 value，表示需要校验的权限。
逻辑：
首先检查 value 是否为非空数组。
从缓存中获取用户的权限列表。
使用 some 方法检查用户是否拥有所需的权限。
如果没有权限，打印错误信息并返回 false。

• checkRole 函数：

功能：检查用户是否具有特定的角色。
参数：接收一个字符串数组 value，表示需要校验的角色。
逻辑：
检查 value 是否为非空数组。
从缓存中获取用户的角色列表。
使用 some 方法检查用户是否拥有所需的角色。
如果没有角色，打印错误信息并返回 false。

代码改进建议
可以考虑将重复的逻辑提取到一个辅助函数中，以减少代码重复。增加类型检查和错误处理，以提高代码的健壮性。如果你有特定的修改需求或想要实现的功能，请告诉我，我可以提供相应的代码更新。

十八、propTypes.ts

这个文件 src/utils/propTypes.ts 定义了一个类型和一个类，用于处理 Vue.js 中的属性类型。以下是对文件的分析：

1. 导入模块：文件开始时导入了 vue-types 中的一些类型和函数，以及 Vue 的 CSSProperties 类型。
2. 定义类型：定义了一个 PropTypes 类型，它扩展了 VueTypesInterface，并添加了一个只读属性 style，该属性是一个可验证的类型，支持字符串和对象。
3. 创建新属性类型：使用 createTypes 函数创建了一个新的属性类型 newPropTypes，其中包含了多种基本类型（如 func, bool, string, number, object, integer）。
4. 定义类：定义了一个名为 propTypes 的类，继承自 newPropTypes。该类静态方法 get style 返回一个可验证的类型，允许字符串或对象。
   导出类：最后，文件导出了 propTypes 类，以便在其他模块中使用。
   代码示例

// src/utils/propTypes.ts
import { VueTypeValidableDef, VueTypesInterface, createTypes, toValidableType } from 'vue-types'
import { CSSProperties } from 'vue'

// 定义属性类型
type PropTypes = VueTypesInterface & {
  readonly style: VueTypeValidableDef<CSSProperties>
}

// 创建新的属性类型
const newPropTypes = createTypes({
  func: undefined,
  bool: undefined,
  string: undefined,
  number: undefined,
  object: undefined,
  integer: undefined
}) as PropTypes

// 定义类
class propTypes extends newPropTypes {
  static get style() {
    return toValidableType('style', {
      type: [String, Object]
    })
  }
}

// 导出类
export { propTypes }

以下是文件的简化版本，突出显示了主要结构和功能：
总结
这个文件主要用于定义和验证 Vue 组件的属性类型，确保在使用这些属性时能够进行类型检查和验证。这对于提高代码的可维护性和减少运行时错误非常重要。

十九、routerHelper.ts

这个文件 src/utils/routerHelper.ts 是一个用于 Vue.js 应用程序的路由帮助工具，主要功能包括注册异步组件、生成路由、处理路由的排序和降级等。以下是对文件中主要功能的分析：

1. 异步组件注册：
   registerComponent 函数用于根据给定的组件路径动态加载异步组件。它遍历所有模块，查找匹配的组件路径。
   路由生成：
   generateRoute 函数负责根据后端提供的路由信息生成 Vue Router 所需的路由配置。它处理了路由的元数据、组件路径解析、以及子路由的递归生成。
2. 路由排序：
   ascending 函数根据路由的 meta.rank 属性对路由进行升序排序，确保路由的显示顺序符合预期。
   路由降级：
   flatMultiLevelRoutes 函数用于将多级路由扁平化，简化路由结构，便于管理和使用。
3. 路径解析：
   pathResolve 函数用于解析路由路径，确保路径的正确性，处理外部链接和相对路径。
4. 其他辅助函数：
   包含一些辅助函数，如 toCamelCase 用于将字符串转换为驼峰命名法，getRedirect 用于获取重定向路径等。
   代码结构
   文件结构清晰，功能模块化，便于维护和扩展。每个函数都有明确的职责，且使用了 TypeScript 的类型定义，增强了代码的可读性和安全性。
   可能的改进
   错误处理：在某些函数中，可能需要增加更多的错误处理逻辑，以提高代码的健壮性。
   注释和文档：虽然有一些注释，但可以增加更多的文档说明，帮助其他开发者更快理解代码的功能和使用方法。
   如果你有特定的修改需求或想要进一步分析某个部分，请告诉我！

二十、tree.ts

这个文件是一个 TypeScript 文件，主要用于处理树形结构的数据。它定义了一些接口和函数，帮助将列表转换为树形结构，反之亦然，并提供了一些用于查找、过滤和遍历树的功能。以下是文件的主要组成部分和功能分析：

1. 接口定义：

   • TreeHelperConfig：定义了树结构的基本配置，包括节点的 ID、子节点和父节点的字段名。

2. 默认配置：

   • DEFAULT_CONFIG：提供了树结构的默认字段配置。

3. 主要功能：

   • listToTree<T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[]：将扁平的列表转换为树形结构。
   • treeToList<T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T：将树形结构转换为扁平的列表。
   • findNode<T = any>( tree: any, func: Fn, config: Partial<TreeHelperConfig> = {} ): T | null 和 findNodeAll<T = any>( tree: any, func: Fn, config: Partial<TreeHelperConfig> = {} ): T[] ：在树中查找单个或所有符合条件的节点。
   • findPath<T = any>( tree: any, func: Fn, config: Partial<TreeHelperConfig> = {} ): T | T[] | null 和 findPathAll (tree: any, func: Fn, config: Partial<TreeHelperConfig> = {})：查找从根节点到目标节点的路径。
   • filter<T = any>( tree: T[], func: (n: T) => boolean, config: Partial<TreeHelperConfig> = {} ): T[]：根据条件过滤树中的节点。
   • forEach<T = any>( tree: T[], func: (n: T) => any, config: Partial<TreeHelperConfig> = {} ): void：遍历树中的每个节点并执行回调函数。
   • treeMap<T = any>( treeData: T[], opt: { children?: string; conversion: Fn } ): T[] 和 treeMapEach( data: any, { children = 'children', conversion }: { children?: string; conversion: Fn } )：提取树的特定结构。
   • eachTree（(treeDatas: any[], callBack: Fn, parentNode = {})）：递归遍历树结构。
   • handleTree（(data: any[], id?: string, parentId?: string, children?: string)） 和 handleTree2（(data, id, parentId, children, rootId)）：构造树型结构数据。
   • checkSelectedNode（(tree: any[], nodeId: any, level = 2)）：校验选中的节点是否在指定层级。
   • treeToString（(tree: any[], nodeId)）：获取节点的完整结构。

4. 注释和文档：

   • 文件中包含了详细的注释，解释了每个函数的用途和参数，便于理解和使用。

如果你有特定的修改需求或想要添加的功能，请告诉我，我可以帮助你进行相应的代码更新。

二十一、tsxHelper.ts

• getSlot(slots: Slots, slot = ‘default’, data?: Recordable)：主要用于处理 Vue.js 中的插槽（slots）

以下是对文件的分析：
参数：

• slots: 插槽对象，类型为 Slots。
• slot: 可选参数，默认值为 ‘default’，表示要获取的插槽名称。
• data:可选参数，类型为 Recordable，用于传递给插槽函数的数据。

功能：
首先检查 slots 是否存在以及是否包含指定的 slot 属性。如果 slot 不存在，返回 null。
接着检查 slots[slot] 是否为函数，如果不是，输出错误信息并返回 null。
如果 slot 存在且是函数，则调用该函数并传入 data，返回其结果。
错误处理：
该函数在插槽不存在或不是函数时，会输出错误信息，帮助开发者调试。
总体来说，这个文件的主要目的是提供一个安全的方式来访问和调用 Vue 组件的插槽，确保在调用之前进行必要的检查。