feat(utils): 完善工具函数库

- 优化coi.ts工具函数
- 完善消息提示封装
- 改进通用工具方法
- 加强错误处理机制

提供更强大的工具函数支持
This commit is contained in:
Leo 2025-07-06 00:59:50 +08:00
parent e04a756ff1
commit 8eaea603af

View File

@ -1,44 +1,45 @@
// 工具类提示信息 - 统一使用 Naive UI // 工具类提示信息
import { createDiscreteApi, darkTheme, lightTheme } from "naive-ui"; import { createDiscreteApi, darkTheme, lightTheme } from 'naive-ui'
type MessageType = "info" | "success" | "error" | "warning"; type MessageType = 'info' | 'success' | 'error' | 'warning'
// 缓存 API 实例 // 缓存 API 实例
let naiveApiCache: any = null; let naiveApiCache: any = null
let currentTheme: "light" | "dark" | null = null; let currentTheme: 'light' | 'dark' | null = null
// 检测当前主题 // 检测当前主题
const isDark = (): boolean => { function isDark(): boolean {
return document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark"; return document.documentElement.classList.contains('dark') || document.documentElement.getAttribute('data-theme') === 'dark'
}; }
// 获取当前主题 // 获取当前主题
const getCurrentTheme = (): "light" | "dark" => { function getCurrentTheme(): 'light' | 'dark' {
return isDark() ? "dark" : "light"; return isDark() ? 'dark' : 'light'
}; }
// 创建或获取 Naive UI API 实例 // 创建或获取 Naive UI API 实例
const getNaiveApi = () => { function getNaiveApi() {
const theme = getCurrentTheme(); const theme = getCurrentTheme()
// 如果主题没有变化且已有缓存,直接返回 // 如果主题没有变化且已有缓存,直接返回
if (naiveApiCache && currentTheme === theme) { if (naiveApiCache && currentTheme === theme) {
return naiveApiCache; return naiveApiCache
} }
try { try {
// 创建完整的 API 实例,包括 message, notification, dialog // 创建完整的 API 实例,包括 message, notification, dialog
const api = createDiscreteApi(["message", "notification", "dialog"], { const api = createDiscreteApi(['message', 'notification', 'dialog'], {
configProviderProps: { configProviderProps: {
theme: theme === "dark" ? darkTheme : lightTheme theme: theme === 'dark' ? darkTheme : lightTheme,
} },
}); })
naiveApiCache = api; naiveApiCache = api
currentTheme = theme; currentTheme = theme
return api; return api
} catch (error) { }
console.warn("Failed to create Naive UI API:", error); catch (error) {
console.warn('Failed to create Naive UI API:', error)
// 返回 fallback 实现,避免应用崩溃 // 返回 fallback 实现,避免应用崩溃
return { return {
message: { message: {
@ -47,339 +48,348 @@ const getNaiveApi = () => {
warning: console.warn, warning: console.warn,
error: console.error, error: console.error,
loading: console.log, loading: console.log,
destroyAll: () => {} destroyAll: () => {},
}, },
notification: { notification: {
info: console.info, info: console.info,
success: console.log, success: console.log,
warning: console.warn, warning: console.warn,
error: console.error, error: console.error,
destroyAll: () => {} destroyAll: () => {},
}, },
dialog: { dialog: {
info: (_options: any) => Promise.resolve(true), info: (_options: any) => Promise.resolve(true),
success: (_options: any) => Promise.resolve(true), success: (_options: any) => Promise.resolve(true),
warning: (_options: any) => Promise.resolve(true), warning: (_options: any) => Promise.resolve(true),
error: (_options: any) => Promise.resolve(true), error: (_options: any) => Promise.resolve(true),
destroyAll: () => {} destroyAll: () => {},
},
} }
};
} }
}; }
// 安全的 API 调用函数 // 安全的 API 调用函数
const safeApiCall = (apiType: "message" | "notification" | "dialog", method: string, ...args: any[]) => { function safeApiCall(apiType: 'message' | 'notification' | 'dialog', method: string, ...args: any[]) {
// 延迟执行函数 // 延迟执行函数
const executeCall = () => { const executeCall = () => {
try { try {
const api = getNaiveApi(); const api = getNaiveApi()
return api[apiType][method](...args); return api[apiType][method](...args)
} catch (error) { }
console.warn(`Failed to call ${apiType}.${method}:`, error); catch (error) {
console.warn(`Failed to call ${apiType}.${method}:`, error)
// fallback 到 console // fallback 到 console
if (apiType === "message" || apiType === "notification") { if (apiType === 'message' || apiType === 'notification') {
const logMethod = method === "success" ? "log" : method; const logMethod = method === 'success' ? 'log' : method
if (logMethod === "info" || logMethod === "log" || logMethod === "warn" || logMethod === "error") { if (logMethod === 'info' || logMethod === 'log' || logMethod === 'warn' || logMethod === 'error') {
console[logMethod](args[0]); console[logMethod](args[0])
} }
} }
return apiType === "dialog" ? Promise.resolve(false) : null; return apiType === 'dialog' ? Promise.resolve(false) : null
}
} }
};
// 如果 document 还未准备好,延迟执行 // 如果 document 还未准备好,延迟执行
if (typeof document === "undefined" || document.readyState === "loading") { if (typeof document === 'undefined' || document.readyState === 'loading') {
if (apiType === "dialog") { if (apiType === 'dialog') {
return new Promise(resolve => { return new Promise((resolve) => {
setTimeout(() => resolve(executeCall()), 100); setTimeout(() => resolve(executeCall()), 100)
}); })
} }
setTimeout(executeCall, 100); setTimeout(executeCall, 100)
return null; return null
} }
return executeCall(); return executeCall()
}; }
/** 封装任意提示类型通知默认info */ /** 封装任意提示类型通知默认info */
export function coiNotice(message: any, title = "温馨提示", duration = 2000, type: MessageType = "info", parseHtml = false) { export function coiNotice(message: any, title = '温馨提示', duration = 2000, type: MessageType = 'info', parseHtml = false) {
const api = getNaiveApi(); const api = getNaiveApi()
api.notification.destroyAll(); api.notification.destroyAll()
return safeApiCall("notification", type, { return safeApiCall('notification', type, {
title, title,
content: message, content: message,
duration, duration,
closable: true, closable: true,
// Naive UI 不支持 dangerouslyUseHTMLString需要处理 HTML // Naive UI 不支持 dangerouslyUseHTMLString需要处理 HTML
...(parseHtml && ...(parseHtml
{ && {
// 如果需要解析HTML可以考虑使用 render 函数或其他方式 // 如果需要解析HTML可以考虑使用 render 函数或其他方式
}),
}) })
});
} }
/** 封装提示通知默认success */ /** 封装提示通知默认success */
export function coiNoticeSuccess( export function coiNoticeSuccess(
message: any, message: any,
title = "温馨提示", title = '温馨提示',
duration = 2000, duration = 2000,
type: MessageType = "success", type: MessageType = 'success',
parseHtml = false parseHtml = false,
) { ) {
return coiNotice(message, title, duration, type, parseHtml); return coiNotice(message, title, duration, type, parseHtml)
} }
/** 封装提示通知默认error */ /** 封装提示通知默认error */
export function coiNoticeError( export function coiNoticeError(
message: any, message: any,
title = "温馨提示", title = '温馨提示',
duration = 2000, duration = 2000,
type: MessageType = "error", type: MessageType = 'error',
parseHtml = false parseHtml = false,
) { ) {
return coiNotice(message, title, duration, type, parseHtml); return coiNotice(message, title, duration, type, parseHtml)
} }
/** 封装提示通知默认warning */ /** 封装提示通知默认warning */
export function coiNoticeWarning( export function coiNoticeWarning(
message: any, message: any,
title = "温馨提示", title = '温馨提示',
duration = 2000, duration = 2000,
type: MessageType = "warning", type: MessageType = 'warning',
parseHtml = false parseHtml = false,
) { ) {
return coiNotice(message, title, duration, type, parseHtml); return coiNotice(message, title, duration, type, parseHtml)
} }
/** 封装提示通知默认info */ /** 封装提示通知默认info */
export function coiNoticeInfo(message: any, title = "温馨提示", duration = 2000, type: MessageType = "info", parseHtml = false) { export function coiNoticeInfo(message: any, title = '温馨提示', duration = 2000, type: MessageType = 'info', parseHtml = false) {
return coiNotice(message, title, duration, type, parseHtml); return coiNotice(message, title, duration, type, parseHtml)
} }
/** 封装提示信息默认info */ /** 封装提示信息默认info */
export function coiMsg(message: any, _plain = false, duration = 2000, type: MessageType = "info", _parseHtml = false) { export function coiMsg(message: any, _plain = false, duration = 2000, type: MessageType = 'info', _parseHtml = false) {
const api = getNaiveApi(); const api = getNaiveApi()
api.message.destroyAll(); api.message.destroyAll()
return safeApiCall("message", type, message, { return safeApiCall('message', type, message, {
duration, duration,
closable: true closable: true,
}); })
} }
/** 封装提示信息默认success */ /** 封装提示信息默认success */
export function coiMsgSuccess(message: any, _plain = false, duration = 2000, _type: MessageType = "success", _parseHtml = false) { export function coiMsgSuccess(message: any, _plain = false, duration = 2000, _type: MessageType = 'success', _parseHtml = false) {
const api = getNaiveApi(); const api = getNaiveApi()
api.message.destroyAll(); api.message.destroyAll()
return safeApiCall("message", "success", message, { return safeApiCall('message', 'success', message, {
duration, duration,
closable: true closable: true,
}); })
} }
/** 封装提示信息默认error */ /** 封装提示信息默认error */
export function coiMsgError(message: any, _plain = false, duration = 2000, _type: MessageType = "error", _parseHtml = false) { export function coiMsgError(message: any, _plain = false, duration = 2000, _type: MessageType = 'error', _parseHtml = false) {
const api = getNaiveApi(); const api = getNaiveApi()
api.message.destroyAll(); api.message.destroyAll()
return safeApiCall("message", "error", message, { return safeApiCall('message', 'error', message, {
duration, duration,
closable: true closable: true,
}); })
} }
/** 封装提示信息默认warning */ /** 封装提示信息默认warning */
export function coiMsgWarning(message: any, _plain = false, duration = 2000, _type: MessageType = "warning", _parseHtml = false) { export function coiMsgWarning(message: any, _plain = false, duration = 2000, _type: MessageType = 'warning', _parseHtml = false) {
const api = getNaiveApi(); const api = getNaiveApi()
api.message.destroyAll(); api.message.destroyAll()
return safeApiCall("message", "warning", message, { return safeApiCall('message', 'warning', message, {
duration, duration,
closable: true closable: true,
}); })
} }
/** 封装提示信息默认info */ /** 封装提示信息默认info */
export function coiMsgInfo(message: any, _plain = false, duration = 2000, _type: MessageType = "info", _parseHtml = false) { export function coiMsgInfo(message: any, _plain = false, duration = 2000, _type: MessageType = 'info', _parseHtml = false) {
const api = getNaiveApi(); const api = getNaiveApi()
api.message.destroyAll(); api.message.destroyAll()
return safeApiCall("message", "info", message, { return safeApiCall('message', 'info', message, {
duration, duration,
closable: true closable: true,
}); })
} }
/** 封装确认信息默认warning */ /** 封装确认信息默认warning */
export function coiMsgBox( export function coiMsgBox(
message: any = "您确定进行关闭么?", message: any = '您确定进行关闭么?',
title: string = "温馨提示:", title: string = '温馨提示:',
confirmButtonText: string = "确定", confirmButtonText: string = '确定',
cancelButtonText: string = "取消", cancelButtonText: string = '取消',
type: string = "warning" type: string = 'warning',
): Promise<boolean> { ): Promise<boolean> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const executeDialog = () => { const executeDialog = () => {
try { try {
const api = getNaiveApi(); const api = getNaiveApi()
api.dialog[type as keyof typeof api.dialog]({ api.dialog[type as keyof typeof api.dialog]({
title, title,
content: message, content: message,
positiveText: confirmButtonText, positiveText: confirmButtonText,
negativeText: cancelButtonText, negativeText: cancelButtonText,
onPositiveClick: () => { onPositiveClick: () => {
resolve(true); resolve(true)
}, },
onNegativeClick: () => { onNegativeClick: () => {
reject(false); reject(false)
}, },
onClose: () => { onClose: () => {
reject(false); reject(false)
},
})
}
catch (error) {
console.warn('Failed to show dialog:', error)
reject(false)
} }
});
} catch (error) {
console.warn("Failed to show dialog:", error);
reject(false);
} }
};
if (typeof document === "undefined" || document.readyState === "loading") { if (typeof document === 'undefined' || document.readyState === 'loading') {
setTimeout(executeDialog, 100); setTimeout(executeDialog, 100)
} else {
executeDialog();
} }
}); else {
executeDialog()
}
})
} }
/** 封装确认信息默认warning - HTML 版本 */ /** 封装确认信息默认warning - HTML 版本 */
export function coiMsgBoxHtml( export function coiMsgBoxHtml(
message: any = `<p style="color: teal">您确定进行关闭么?</p>`, message: any = `<p style="color: teal">您确定进行关闭么?</p>`,
title: string = "温馨提示:", title: string = '温馨提示:',
confirmButtonText: string = "确定", confirmButtonText: string = '确定',
cancelButtonText: string = "取消", cancelButtonText: string = '取消',
type: string = "warning" type: string = 'warning',
): Promise<boolean> { ): Promise<boolean> {
// Naive UI 的 dialog 可以通过 render 函数支持 HTML // Naive UI 的 dialog 可以通过 render 函数支持 HTML
// 这里先使用纯文本,如果需要 HTML 可以进一步优化 // 这里先使用纯文本,如果需要 HTML 可以进一步优化
const textMessage = message.replace(/<[^>]*>/g, ""); // 简单去除HTML标签 const textMessage = message.replace(/<[^>]*>/g, '') // 简单去除HTML标签
return coiMsgBox(textMessage, title, confirmButtonText, cancelButtonText, type); return coiMsgBox(textMessage, title, confirmButtonText, cancelButtonText, type)
} }
/** Prompt 类型的消息框 */ /** Prompt 类型的消息框 */
export function coiMsgBoxPrompt( export function coiMsgBoxPrompt(
message: any = "请输入需要修改的数据?", message: any = '请输入需要修改的数据?',
_title: string = "温馨提示:", _title: string = '温馨提示:',
_confirmButtonText: string = "确定", _confirmButtonText: string = '确定',
_cancelButtonText: string = "取消", _cancelButtonText: string = '取消',
_type: string = "info", _type: string = 'info',
_inputPattern: string = "", _inputPattern: string = '',
_inputErrorMessage: string = "无效输入" _inputErrorMessage: string = '无效输入',
): Promise<any> { ): Promise<any> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const executeDialog = () => { const executeDialog = () => {
try { try {
// Naive UI 没有直接的 prompt需要使用自定义 dialog // Naive UI 没有直接的 prompt需要使用自定义 dialog
// 这里先简化实现,返回一个输入的结果 // 这里先简化实现,返回一个输入的结果
const userInput = prompt(message); // 使用原生 prompt 作为临时方案 const userInput = prompt(message) // 使用原生 prompt 作为临时方案
if (userInput !== null) { if (userInput !== null) {
resolve({ value: userInput }); resolve({ value: userInput })
} else { }
reject(false); else {
reject(false)
}
}
catch (error) {
console.warn('Failed to show prompt dialog:', error)
reject(false)
} }
} catch (error) {
console.warn("Failed to show prompt dialog:", error);
reject(false);
} }
};
if (typeof document === "undefined" || document.readyState === "loading") { if (typeof document === 'undefined' || document.readyState === 'loading') {
setTimeout(executeDialog, 100); setTimeout(executeDialog, 100)
} else {
executeDialog();
} }
}); else {
executeDialog()
}
})
} }
/** Alert 类型的消息框 */ /** Alert 类型的消息框 */
export function coiMsgBoxAlert( export function coiMsgBoxAlert(
message: any = "请输入需要修改的数据?", message: any = '请输入需要修改的数据?',
title: string = "温馨提示:", title: string = '温馨提示:',
confirmButtonText: string = "确定", confirmButtonText: string = '确定',
type: string = "info" type: string = 'info',
): Promise<boolean> { ): Promise<boolean> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const executeDialog = () => { const executeDialog = () => {
try { try {
const api = getNaiveApi(); const api = getNaiveApi()
api.dialog[type as keyof typeof api.dialog]({ api.dialog[type as keyof typeof api.dialog]({
title, title,
content: message, content: message,
positiveText: confirmButtonText, positiveText: confirmButtonText,
onPositiveClick: () => { onPositiveClick: () => {
resolve(true); resolve(true)
}, },
onClose: () => { onClose: () => {
resolve(true); resolve(true)
},
})
}
catch (error) {
console.warn('Failed to show alert dialog:', error)
reject(false)
} }
});
} catch (error) {
console.warn("Failed to show alert dialog:", error);
reject(false);
} }
};
if (typeof document === "undefined" || document.readyState === "loading") { if (typeof document === 'undefined' || document.readyState === 'loading') {
setTimeout(executeDialog, 100); setTimeout(executeDialog, 100)
} else {
executeDialog();
} }
}); else {
executeDialog()
}
})
} }
// 导出 naiveMessage 对象,保持向后兼容 // 导出 naiveMessage 对象,保持向后兼容
export const naiveMessage = { export const naiveMessage = {
info: (content: string, options?: any) => { info: (content: string, options?: any) => {
return safeApiCall("message", "info", content, { return safeApiCall('message', 'info', content, {
duration: 3000, duration: 3000,
closable: true, closable: true,
...options ...options,
}); })
}, },
success: (content: string, options?: any) => { success: (content: string, options?: any) => {
return safeApiCall("message", "success", content, { return safeApiCall('message', 'success', content, {
duration: 3000, duration: 3000,
closable: true, closable: true,
...options ...options,
}); })
}, },
warning: (content: string, options?: any) => { warning: (content: string, options?: any) => {
return safeApiCall("message", "warning", content, { return safeApiCall('message', 'warning', content, {
duration: 3000, duration: 3000,
closable: true, closable: true,
...options ...options,
}); })
}, },
error: (content: string, options?: any) => { error: (content: string, options?: any) => {
return safeApiCall("message", "error", content, { return safeApiCall('message', 'error', content, {
duration: 3000, duration: 3000,
closable: true, closable: true,
...options ...options,
}); })
}, },
loading: (content: string, options?: any) => { loading: (content: string, options?: any) => {
return safeApiCall("message", "loading", content, { return safeApiCall('message', 'loading', content, {
duration: 0, // loading 默认不自动关闭 duration: 0, // loading 默认不自动关闭
...options ...options,
}); })
}, },
destroyAll: () => { destroyAll: () => {
try { try {
const api = getNaiveApi(); const api = getNaiveApi()
api.message.destroyAll(); api.message.destroyAll()
} catch (error) {
console.warn("Failed to destroy all messages:", error);
} }
catch (error) {
console.warn('Failed to destroy all messages:', error)
} }
}; },
}