AITools - AI 辅助工具库

AITools 是一个基于 Vue 2 的 AI 辅助工具库，提供了消息气泡组件、富文本编辑器和各种实用工具函数，旨在提升 AI 应用开发效率。

目录结构

AITools/
├── MessageBubble/          # 消息气泡组件
│   └── index.vue
├── W4Editor/               # 富文本编辑器组件
│   ├── js/                 # 编辑器相关 JS 工具
│   │   ├── docx-utils/     # DOCX 处理工具
│   │   ├── generateDocx.js # DOCX 生成器
│   │   └── wangEditor.min.js # 编辑器核心
│   ├── ai-auxiliary-func-btns.vue # AI 辅助功能按钮
│   └── index.vue
├── utils/                  # 工具函数集合
│   ├── MessageQueue.js     # 消息队列
│   ├── XStream.js          # 流处理
│   ├── auth.js             # 认证相关
│   ├── chatMessage.js      # 聊天消息处理
│   ├── errorCode.js        # 错误码定义
│   ├── generateDocx.js     # DOCX 生成
│   ├── html-docx.js        # HTML 转 DOCX
│   ├── index.js            # 工具函数入口
│   ├── jsencrypt.js        # 加密工具
│   ├── md.js               # Markdown 处理
│   ├── permission.js       # 权限管理
│   ├── request.js          # 请求工具
│   ├── ruoyi.js            # 若依框架工具
│   ├── scroll-to.js        # 滚动工具
│   ├── validate.js         # 验证工具
│   └── wangEditorToDocx.js # WangEditor 转 DOCX
├── .npmrc                  # npm 配置
└── package.json            # 项目配置

安装

# 使用 npm 安装
npm install max-ai-tools

# 使用 yarn 安装
yarn add max-ai-tools

核心组件

MessageBubble - 消息气泡组件

用于显示聊天消息，支持 Markdown 渲染、文件上传下载、点赞点踩等功能。

基本用法

<template>
  <MessageBubble
    :message-md="message.content"
    :avarat-url="message.avatar"
    :name="message.name"
    :place-ment="message.placement"
    :working="message.working"
    :files="message.files"
  />
</template>

<script>
import { MessageBubble } from 'max-ai-tools';

export default {
  components: {
    MessageBubble
  },
  data() {
    return {
      message: {
        content: '# 你好，世界\n这是一个 **Markdown** 消息',
        avatar: 'https://example.com/avatar.png',
        name: 'AI 助手',
        placement: 'left',
        working: false,
        files: []
      }
    };
  }
};
</script>

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | messageMd | String | 必填 | Markdown 格式的消息内容 | | avaratUrl | String | - | 头像 URL | | name | String | - | 发送者名称 | | placeMent | String | 'left' | 消息位置（'left' 或 'right'） | | working | Boolean | false | 是否正在处理中 | | files | Array | [] | 附件列表 | | tipUserText | String | '开始检索知识中...' | 处理中提示文本 | | messageId | String | - | 消息 ID | | showGenerate | Boolean | false | 是否显示重新生成按钮 | | needDownload | Boolean | true | 是否需要下载按钮 |

事件

| 事件名 | 说明 | 参数 | |--------|------|------| | dzan | 点赞 | messageId, flag | | dcai | 点踩 | messageId, flag | | regenerate | 重新生成 | messageId | | online-edit | 在线编辑 | messageId |

W4Editor - 富文本编辑器组件

集成了 AI 辅助功能的富文本编辑器，支持 DOCX 导出等功能。

基本用法

<template>
  <W4Editor
    v-model="content"
    :id="'editor1'"
  />
</template>

<script>
import { W4Editor } from 'max-ai-tools';

export default {
  components: {
    W4Editor
  },
  data() {
    return {
      content: '<p>初始内容</p>'
    };
  }
};
</script>

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value / v-model | String | '' | 编辑器内容 | | id | String | 必填 | 编辑器唯一标识 | | showAIToolsDialog | Boolean | true | 是否显示 AI 工具对话框 | | showEditToolbar | Boolean | true | 是否显示编辑工具栏 |

工具函数

导入

import * as utils from 'max-ai-tools/utils';
// 或
import { formatDate, debounce } from 'max-ai-tools/utils';

常用工具函数

日期时间处理

// 格式化日期
tools.formatDate(new Date()); // 2026-01-13 14:30:00

// 格式化相对时间
tools.formatTime(Date.now() - 3600000); // 1小时前

字符串处理

// 获取 URL 查询参数
tools.getQueryObject('?name=test&age=20'); // { name: 'test', age: '20' }

// HTML 转纯文本
tools.html2Text('<p>Hello <strong>world</strong></p>'); // Hello world

// 下划转驼峰
tools.camelCase('hello_world'); // helloWorld

函数工具

// 防抖
const debouncedFn = tools.debounce(() => {
  console.log('执行');
}, 300);

// 节流
const throttledFn = tools.throttle(() => {
  console.log('执行');
}, 1000);

// 深拷贝
const obj = { a: { b: 1 } };
const copy = tools.deepClone(obj);

DOM 操作

// 添加类
const element = document.getElementById('test');
tools.addClass(element, 'active');

// 移除类
tools.removeClass(element, 'active');

// 切换类
tools.toggleClass(element, 'active');

依赖

• docx@^9.5.1 - DOCX 文档生成
• markdown-it@^13.0.1 - Markdown 渲染
• highlight.js@^11.7.0 - 代码高亮
• echarts@^5.4.0 - 图表渲染

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

许可证

MIT

更新日志

v1.0.2

• 优化了 MessageBubble 组件的 Markdown 渲染
• 修复了文件下载功能的 bug

v1.0.1

• 添加了 W4Editor 组件的 AI 辅助功能
• 完善了工具函数集合

v1.0.0

• 初始版本发布
• 包含 MessageBubble 和 W4Editor 组件
• 提供基础工具函数

贡献

欢迎提交 Issue 和 Pull Request！

联系方式

如有问题，请通过以下方式联系：

• Email: [email protected]
• GitHub: https://github.com/max/ai-tools
• Gitee: https://gitee.com/max/ai-tools