CatchAdmin 专业版文档

主题

常用函数集合 ​

前端项目提供了非常多的常用函数，在文件 src/support/helper.ts 中。这些函数可以帮助我们更高效地开发前端应用。

环境变量相关 ​

env ​

获取环境变量的值。

typescript
env(key: string): any

参数：

  • key: 环境变量名称

返回值：

  • 对应环境变量的值

示例：

typescript
// 获取 API 基础 URL
const baseUrl = env('VITE_BASE_URL')
// 获取应用名称
const appName = env('VITE_APP_NAME')

isProd ​

判断当前环境是否是生产环境。

typescript
isProd(): boolean

返回值：

  • true: 当前是生产环境
  • false: 当前不是生产环境

示例：

typescript
if (isProd()) {
  // 生产环境下的逻辑
} else {
  // 开发环境下的逻辑
}

认证相关 ​

rememberAuthToken ​

保存认证令牌到缓存中。

typescript
rememberAuthToken(token: string): void

参数：

  • token: 认证令牌字符串

示例：

typescript
// 登录成功后保存令牌
rememberAuthToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...')

removeAuthToken ​

从缓存中移除认证令牌。

typescript
removeAuthToken(): void

示例：

typescript
// 退出登录时移除令牌
removeAuthToken()

getAuthToken ​

获取当前的认证令牌。

typescript
getAuthToken(): string | null

返回值：

  • 认证令牌字符串，如果不存在则返回 null

示例：

typescript
const token = getAuthToken()
if (token) {
  // 用户已登录
} else {
  // 用户未登录
}

getBearerToken ​

获取带有 Bearer 前缀的认证令牌，用于 HTTP 请求头。

typescript
getBearerToken(): string | null

返回值：

  • 带有 Bearer 前缀的认证令牌字符串，如果不存在则返回 null

示例：

typescript
const headers = {
  Authorization: getBearerToken()
}
// 发送请求
fetch('/api/user', { headers })

界面相关 ​

isMiniScreen ​

判断当前是否是小屏幕设备（宽度小于 500px）。

typescript
isMiniScreen(): boolean

返回值：

  • true: 当前是小屏幕
  • false: 当前不是小屏幕

示例：

typescript
if (isMiniScreen()) {
  // 小屏幕适配逻辑
} else {
  // 大屏幕适配逻辑
}

t ​

国际化翻译函数，基于 i18n。

typescript
t(translate: string): string

参数：

  • translate: 翻译键名

返回值：

  • 翻译后的文本

示例：

typescript
// 假设 i18n 配置中有 { "welcome": "欢迎使用" }
const message = t('welcome') // 结果: "欢迎使用"

setPageTitle ​

设置页面标题。

typescript
setPageTitle(title: string): void

参数：

  • title: 页面标题

示例：

typescript
// 设置页面标题为 "用户中心"
setPageTitle('用户中心')
// 如果有站点标题配置，结果会是 "用户中心-站点名称"

类型判断 ​

isUndefined ​

判断值是否是 undefined。

typescript
isUndefined(value: any): boolean

参数：

  • value: 要判断的值

返回值：

  • true: 值是 undefined
  • false: 值不是 undefined

示例：

typescript
if (isUndefined(user.name)) {
  // 处理 name 未定义的情况
}

isFunction ​

判断值是否是函数。

typescript
isFunction(value: any): boolean

参数：

  • value: 要判断的值

返回值：

  • true: 值是函数
  • false: 值不是函数

示例：

typescript
if (isFunction(callback)) {
  callback()
}

isBoolean ​

判断值是否是布尔类型。

typescript
isBoolean(value: any): boolean

参数：

  • value: 要判断的值

返回值：

  • true: 值是布尔类型
  • false: 值不是布尔类型

示例：

typescript
if (isBoolean(config.enabled)) {
  // 处理 enabled 是布尔值的情况
}

isNumber ​

判断值是否是数字类型。

typescript
isNumber(value: any): boolean

参数：

  • value: 要判断的值

返回值：

  • true: 值是数字类型
  • false: 值不是数字类型

示例：

typescript
if (isNumber(age)) {
  // 处理 age 是数字的情况
}

字符串处理 ​

ucfirst ​

将字符串的首字母转为大写。

typescript
ucfirst(str: string): string

参数：

  • str: 要处理的字符串

返回值：

  • 首字母大写后的字符串

示例：

typescript
const name = ucfirst('john') // 结果: "John"

lcfirst ​

将字符串的首字母转为小写。

typescript
lcfirst(str: string): string

参数：

  • str: 要处理的字符串

返回值：

  • 首字母小写后的字符串

示例：

typescript
const name = lcfirst('John') // 结果: "john"

randomString ​

生成指定长度的随机字符串。

typescript
randomString(e: number = 10): string

参数：

  • e: 生成的字符串长度，默认为 10

返回值：

  • 生成的随机字符串

示例：

typescript
// 生成默认长度(10)的随机字符串
const str1 = randomString()
// 生成长度为 5 的随机字符串
const str2 = randomString(5)

strToFunction ​

将字符串转换为函数。

typescript
strToFunction(str: string, params?: any): Function

参数：

  • str: 要转换的字符串
  • params: 可选的参数

返回值：

  • 转换后的函数

示例：

typescript
// 将字符串转换为函数
const fn = strToFunction('function() { return "Hello World"; }')
const result = fn() // 结果: "Hello World"

// 带参数的情况
const fn2 = strToFunction('function(name) { return "Hello " + name; }', { name: 'John' })
const result2 = fn2('John') // 结果: "Hello John"

文件处理 ​

generateFilename ​

生成唯一的文件名。

typescript
generateFilename(filename: string): string

参数：

  • filename: 原始文件名

返回值：

  • 生成的唯一文件名

示例：

typescript
const uniqueName = generateFilename('image.jpg')
// 结果可能是: "1634567890abcDEF.jpg"

getFileExt ​

获取文件的扩展名。

typescript
getFileExt(filename: string): string

参数：

  • filename: 文件名

返回值：

  • 文件的扩展名（包含点号）

示例：

typescript
const ext = getFileExt('document.pdf') // 结果: ".pdf"

getFilename ​

从路径中获取文件名。

typescript
getFilename(filename: string): string

参数：

  • filename: 文件路径

返回值：

  • 文件名

示例：

typescript
const name = getFilename('/path/to/document.pdf') // 结果: "document.pdf"

数组处理 ​

unique ​

数组去重。

typescript
unique(arr: Array<any>): Array<any>

参数：

  • arr: 要去重的数组

返回值：

  • 去重后的数组

示例：

typescript
const arr = [1, 2, 2, 3, 3, 4]
const uniqueArr = unique(arr) // 结果: [1, 2, 3, 4]

日期处理 ​

date ​

将时间戳转化成指定格式的日期字符串。

typescript
date(format: string, timestamp: number): string

参数：

  • format: 日期格式，如 'YYYY-MM-DD HH:mm:ss'
  • timestamp: 时间戳（秒）

返回值：

  • 格式化后的日期字符串

示例：

typescript
const formattedDate = date('YYYY-MM-DD HH:mm:ss', 1634567890)
// 结果可能是: "2021-10-18 15:31:30"

其他工具函数 ​

_window ​

获取全局配置。

typescript
_window(key: string): any

参数：

  • key: 配置键名

返回值：

  • 配置值，如果不存在则返回 null

示例：

typescript
const baseUrl = _window('BASE_URL')

getBaseUrl ​

获取项目的基础 URL。

typescript
getBaseUrl(): string

返回值：

  • 项目的基础 URL

示例：

typescript
const baseUrl = getBaseUrl()
// 在非生产环境下返回 '/api'
// 在生产环境下返回配置的 BASE_URL 或环境变量中的 VITE_BASE_URL

warpHost ​

为路径添加主机名，确保路径是完整的 URL。

typescript
warpHost(path: string | null): string | null

参数：

  • path: 路径

返回值：

  • 添加主机名后的完整 URL

示例：

typescript
const fullUrl = warpHost('/images/logo.png')
// 如果前后端不在同一域名下，结果可能是: "https://api.example.com/images/logo.png"
// 如果前后端在同一域名下，结果是: "/images/logo.png"