@dhicn/helper

DHI 前端工具库，提供常用的辅助函数和工具类。

安装

npm install @dhicn/helper

使用方式

整体导入

import { Helper } from '@dhicn/helper'

// 使用 generic 模块
Helper.changeTheme('dark')
Helper.newGuid()

按需导入（推荐）

// 导入 generic 模块
import { changeTheme, newGuid, toFixed } from '@dhicn/helper'

// 导入日期格式化模块
import { DayFormatResult01, getCurrentYear } from '@dhicn/helper/date-formatter'

// 导入下载帮助模块
import { downloadHelper, downloadBlob } from '@dhicn/helper/download-helper'

// 导入存储模块
import { getStorage, shareStorage } from '@dhicn/helper/storage'

模块说明

generic - 通用工具函数

changeTheme

切换浅色/深色主题（适用于 Arco Design）

changeTheme(theme: 'dark' | 'light' = 'light'): void

newGuid

生成 GUID

newGuid(): string
// 示例：'550e8400-e29b-41d4-a716-446655440000'

toFixed

数字取小数位

toFixed(num?: number | string, fixed = 2): number
toFixedZero(num?: number | string, fixed = 2): string // 补全位为 0

Logger

系统日志工具，基于 debug 库实现

import { Logger } from '@dhicn/helper'

const logger = new Logger('my-app')
logger.debug('当前日期：%o', new Date())
logger.error('发生错误：%o', error)

特性：

• 支持 printf 风格格式化：%O, %o, %s, %d, %j
• 自动附加调用栈信息
• 支持 namespace 隔离，便于浏览器开发者工具筛选

html2canvas

将 HTML 元素转换为 Canvas 或图片

// 转换为 Canvas
html2canvas(target: HTMLElement, options?: Partial<Options>): Promise<HTMLCanvasElement>

// 转换为 Blob
html2imageBlob(target: HTMLElement, options?: Partial<Options>): Promise<Blob | null>

// 转换为 Base64
html2imageBase64(target: HTMLElement, options?: Partial<Options>): Promise<string>

// 复制到剪贴板
html2imageClipboard(
    target: HTMLElement,
    success?: (blob: Blob) => void,
    fail?: (err: any) => void,
    options?: Partial<Options>
): void

FullScreenElement

元素全屏控制类

import { FullScreenElement } from '@dhicn/helper'

const el = document.querySelector('#my-element')
const fullScreen = new FullScreenElement(el)

// 进入全屏
fullScreen.fullScreen()

// 退出全屏
fullScreen.fullScreenExit()

fixFontSize

根据窗口宽度动态调整根元素字体大小

fixFontSize(width = 1920): string

date-formatter - 日期时间格式化

基于 dayjs 实现的时间格式化工具。

预定义格式常量

// 格式到日
export const DayFormat00 = 'YYYY-MM-DD'
export const DayFormat01 = 'YYYY-MM-DD'
export const DayFormat02 = 'YYYY/MM/DD'
export const DayFormat03 = 'MM.DD'

// 格式到分
export const minuteFormat01 = 'YYYY-MM-DD HH:mm'
export const minuteFormat02 = 'YYYY/MM/DD HH:mm'
export const minuteFormat03 = 'YYYY.MM.DD HH:mm'
export const minuteFormatZ01 = 'YYYY-MM-DDTHH:mmZ'
export const minuteFormatZ02 = 'YYYY/MM/DDTHH:mmZ'
export const minuteFormatZ03 = 'YYYY.MM.DDTHH:mmZ'

// 格式到秒
export const SecondFormat01 = 'YYYY-MM-DD HH:mm:ss'
export const SecondFormat02 = 'YYYY/MM/DD HH:mm:ss'
export const SecondFormat03 = 'M/D/YYYY hh:mm:ss a'
export const SecondFormat04 = 'YYYY-MM-DD HH:mm:ss.SSS'
export const SecondFormat05 = 'YYYY-MM-DD HH:mm:ss.SSSS'
export const SecondFormatZ01 = 'YYYY-MM-DDTHH:mm:ssZ'
export const SecondFormatZ02 = 'YYYY/MM/DDTHH:mm:ssZ'

// 格式 HH:mm
export const HourMinuteFormat = 'HH:mm:ss'
export const HourMinuteFormat01 = 'HH:mm'

export const MonthMinuteFormat01 = 'MM/DD HH:mm'
export const MonthMinuteMask01 = 'MM/DD HH:mm'
export const MonthMinuteMask02 = 'YYYY/MM/DD HH:mm'
export const HourMinuteSecond = 'HH:mm:ss.SSSS'

// 只保留小时
export const HourFormat01 = 'H'

// 格式化为 2023/04/06 10:37AM
export const SecondFormat06 = 'YYYY/MM/DD hh:mma'
export const SecondFormat07 = 'YYYY-MM-DD hh:mmA'

格式化函数

DayFormatResult01(time: Date | number | string): string    // yyyy-MM-dd
DayFormatResult02(time: Date | number | string): string    // yyyy/MM/dd
MinuteFormat01Result01(time: Date | number | string): string  // yyyy-MM-dd HH:mm
MinuteFormat02Result(time: Date | number | string): string    // yyyy/MM/dd HH:mm
MinuteFormat03Result(time: Date | number | string): string    // yyyy.MM.dd HH:mm
SecondFormat01Result(time: Date | number | string): string    // yyyy-MM-dd HH:mm:ss
SecondFormat02Result(time: Date | number | string): string    // yyyy/MM/dd HH:mm:ss
SecondFormat04Result(time: Date | number | string): string    // yyyy/MM/dd HH:mm:ss.SSS
HourMinuteFormatResult(time: Date | number | string): string  // HH:mm:ss
HourMinuteFormat01Result(time: Date | number | string): string // HH:mm
HourFormat01Result(time: Date | number | string): string      // HH

日期工具函数

// 获取当前年/季度/月/周/日
getCurrentYear(): number
getCurrentQuarter(): number
getCurrentMonth(): number
getCurrentWeek(): number
getCurrentDay(): number

// 获取季度起止日期
getCurrentQuarterDateRange(): [string, string]

// 判断是否是今天
verdictToday(date: string | Date): boolean

// 获取日期范围
getDayRange(day: number = -2): [string, string]

// 分钟数取整
roundDownToFiveMinutes(timeStr: string | Date, step: number = 2): Date

// 获取周几（中文）
getWeekDay(date?: string | Date): number

// 获取时间范围
getTimeRange(date?: string | Date, step?: number): { startTime: string, endTime: string }

// 找到最接近的日期
closestTo(target: Date | string, dates: (Date | string)[]): Date | undefined

download-helper - 下载帮助

downloadHelper

GET 请求下载文件

downloadHelper(url: string): Promise<void>

downloadPostHelper

POST 请求下载文件

downloadPostHelper(request: Promise<any>): Promise<void>

downloadBuffer

下载 ArrayBuffer 数据

downloadBuffer(buffer: ArrayBuffer, fileName?: string, fileType?: string): void

downloadBlob

下载 Blob 数据

downloadBlob(blob: Blob, fileName?: string): void

storage - 本地存储

getStorage

获取带前缀的 localStorage 对象

import { getStorage } from '@dhicn/helper/storage'

const storage = getStorage('my-app_')
storage.set('user', { name: 'John' })
storage.get('user')
storage.remove('user')

shareStorage

跨项目共享存储（基于 pathname 自动隔离）

import { shareStorage } from '@dhicn/helper/storage'

shareStorage.set('config', { theme: 'dark' })
shareStorage.get('config')
shareStorage.remove('config')

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 代码检查
pnpm lint

# 代码格式化
pnpm format

依赖

• dayjs - 日期时间处理
• debug - 日志调试
• html2canvas - HTML 转 Canvas
• lodash-es - 工具函数库

版本历史

参见 CHANGELOG

License

MIT