Skip to main content

常用工具函数 Utils

1. 🔧 cn​

  • 合并 Tailwind CSS 类名
  • 使用 clsx + tailwind-merge 合并多个类名，并自动去重/合并冲突。

📦 引入方式​

import { cn } from '@npmqg/utils-cn';

🧪 使用示例​

import React from 'react';

import { cn } from '@npmqg/utils-cn';

const Button = ({ isActive }) => {
  return (
    <button
      className={cn(
        'px-4 py-2 text-white',
        isActive ? 'bg-blue-500' : 'bg-gray-500',
        'bg-blue-600', // 会被合并/覆盖
      )}
    >
      Click me
    </button>
  );
};

🔧 典型用途​

  • 合并多个条件类名
  • 自动去重 Tailwind CSS 冲突
  • 处理动态样式更安全可靠

2. 🔧 message​

该模块封装了基于 sweetalert2 的顶部轻量提示 toast，用于在界面顶部快速展示简短的反馈信息，如成功提示、错误警告等。

📦 引入方式​

import { message } from '@npmqg/utils-message';

🧩 快速使用​

📚 成功提示​

message.success('保存成功');

错误提示​

message.error('保存失败，请重试');

📚 警告提示​

message.warning('请输入完整信息');

📚 信息提示​

message.info('同步中，请稍候...');

📚 问题提示（罕见使用）​

message.question('确定要退出吗？');

🧩 API 说明​

方法名类型说明
success(...)(...args: any[]) => void显示成功提示（✅）
error(...)(...args: any[]) => void显示错误提示（❌）
warning(...)(...args: any[]) => void显示警告提示（⚠️）
info(...)(...args: any[]) => void显示信息提示（ℹ️）
question(...)(...args: any[]) => void显示问题提示（❓，较少使用）

📌 注意事项​

  • 所有方法均为 非阻塞异步弹出，不需要等待；
  • 默认显示 2 秒后自动关闭；
  • 如果在非浏览器或 SSR 环境中使用，请判断是否存在 window；
  • 如果你想在每个请求中统一使用该 Toast，可结合 fetch 或 axios 拦截器使用。

🔧 其他​

src/lib/public.js

该模块收集了一批在 Electron + Web 项目中常用的实用函数，如复制、下载、快捷键监听、剪切板操作、loading 管理等。

📑 快速目录​

    1. 🔐 onClearLoginOutTime
    1. 📦 setLoading
    1. 🖼 getBase64
    1. 📋 onCopyContent / onCopy
    1. 🔗 onJumpLink
    1. ⌨️ onSetFastKey / onSetFlowKey / onSetFlowContextKey
    1. 📜 contentFormat / contentType
    1. 🌈 thinkLanguageHljs
    1. 📱 isMobile
    1. 📍 onSetLastCursor
    1. 💾 onDownload
    1. 🎨 onScrollStyle
    1. 🧱 isObject

🔐 onClearLoginOutTime​

退出登录：清除全局 token 状态。

onClearLoginOutTime();

📦 setLoading​

设置全局 loading 状态。

setLoading(true);

🖼 getBase64​

将 File 对象转换为 base64。

const base64 = await getBase64(file);

📋 onCopyContent / onCopy​

从指定元素复制内容到剪切板。

<button onClick={onCopyContent}>copy</button>

手动复制内容：

onCopy('内容文本', '复制成功');

🔗 onJumpLink​

通过 Electron 或浏览器打开外部链接。

<a onClick={(e) => onJumpLink(e, 'https://example.com')}>跳转</a>

⌨️ 快捷键相关​

onSetFastKey

注册常规软件快捷键（禁用 Ctrl+R 等）。

useEffect(() => {
  onSetFastKey();
}, []);

onSetFlowKey

流程图快捷键绑定（保存、撤销）。

onKeyDown={(e) => onSetFlowKey(e, onSave, onRestore)}

onSetFlowContextKey

流程图右键快捷键绑定（复制、删除）。

onKeyDown={(e) => onSetFlowContextKey(e, duplicateNode, deleteNode)}

📜 内容处理​

contentFormat

格式化 <think> 标签为代码块。

const formatted = contentFormat('<think>思考内容</think>');

contentType

从流式响应 JSON 中提取内容。

const content = contentType(rawJson, 'think'); // or 'content'

🌈 thinkLanguageHljs​

注册自定义高亮语言给 highlight.js。

hljs.registerLanguage('think', thinkLanguageHljs);

📱 isMobile​

判断当前设备是否为移动端。

if (isMobile()) {
  console.log('手机访问');
}

📍 onSetLastCursor​

在最后一个文本节点后插入光标占位元素。

const htmlWithCursor = onSetLastCursor(rawHTML);

💾 onDownload​

创建并点击下载链接。

onDownload('https://example.com/file.zip');

🎨 onScrollStyle​

插入自定义滚动条样式（支持响应式）。

useEffect(() => {
  onScrollStyle();
}, []);

🧱 isObject​

判断某值是否为对象（非 null）。

if (isObject(value)) {
  // do something
}