ai-assistant-plugin

Vue 2 的 AI 助手浮层插件，无 Element UI 依赖，纯 Vue 2 + 原生 CSS，开箱即用。

功能特性

• 🪟 右下角浮层：非模态，不遮挡页面操作
• 🖱️ 拖拽移动：按住头部标题栏可拖动到任意位置
• 📐 拖拽缩放：右边缘 / 下边缘 / 右下角三个手柄调整宽高
• 💬 多轮对话：消息气泡，可连续追问
• ⚡ 结果操作：一键「插入 / 替换 / 复制 / 重新生成」
• 📌 固定侧边栏：可固定为右侧全高面板
• 🏢 外部数据透传：唤起时传入外部数据，自动带进后端请求体

一、安装

已构建为编译产物（dist/），源码不会发布，使用方无需任何额外配置：

npm install ai-assistant-plugin

二、引入并初始化

在项目入口文件（如 main.js）：

import Vue from 'vue'
import AiAssistant from 'ai-assistant-plugin'

Vue.use(AiAssistant, {
  baseUrl: 'http://10.66.4.104:9080/chat',  // AI 接口地址
  title: 'AI 助手'                            // 可选，面板标题（默认 "AI 助手"）
})

安装后，所有组件内都能通过 this.$aiAssistant 访问。

三、主动唤起

this.$aiAssistant.open({
  externalData: { bizType: 'order', bizId: '10086' },
  context: '输入框现有内容',
  onApply: ({ text, mode }) => {
    // mode: 'insert'（插入） | 'replace'（替换）
  }
})

open(config) 参数

| 字段 | 类型 | 必填 | 说明 | |---|---|---|---| | externalData | Object | 否 | 外部数据，透传给后端接口的 body.externalData | | context | String | 否 | 上下文（如输入框现有内容），会拼进发送给 AI 的消息 | | title | String | 否 | 面板标题，默认 AI 助手 | | baseUrl | String | 否 | 覆盖默认接口地址 | | onApply | Function | 否 | 回填回调，参数 { text, mode } |

四、完整示例

<template>
  <div>
    <input v-model="name" placeholder="请输入项目名称" />
    <button @click="openAi">AI 助手</button>
  </div>
</template>

<script>
export default {
  data() {
    return { name: '' }
  },
  methods: {
    openAi() {
      this.$aiAssistant.open({
        externalData: { bizType: 'order', bizId: '10086' },
        context: this.name,
        onApply: ({ text, mode }) => {
          // 替换：整体覆盖；插入：追加到末尾
          this.name = mode === 'replace' ? text : (this.name || '') + text
        }
      })
    }
  }
}
</script>

五、完整 API

| 成员 | 类型 | 说明 | |---|---|---| | $aiAssistant.open(config) | 方法 | 主动唤起 AI 助手 | | $aiAssistant.close() | 方法 | 关闭面板 | | $aiAssistant.isOpen | 属性 | 是否打开中（只读） | | $aiAssistant.destroy() | 方法 | 销毁全局实例（一般不需要调用） |

六、回填说明（onApply）

用户点击「插入」或「替换」时触发 onApply({ text, mode })：

• mode === 'replace'：整体替换
• mode === 'insert'：插入（建议插入到光标处，或追加到末尾）

示例：

onApply: ({ text, mode }) => {
  if (mode === 'replace') {
    this.value = text
  } else {
    // 简化示例：追加到末尾；实际项目可结合 selectionStart/End 插到光标处
    this.value = (this.value || '') + text
  }
}

七、接口约定

插件默认 POST baseUrl，请求体：

{
  "message": "用户输入",
  "externalData": { "deptId": "D001", "deptName": "研发部" }
}

响应（一次性 JSON，非流式）：

{
  "success": true,
  "code": 0,
  "data": { "answer": "回复文本" }
}

插件拿到 data.answer 后按小块（8 字符/15ms）模拟流式打字效果。

注意：只有 externalData 非空时，请求体才会包含 externalData 字段。

八、交互说明

| 操作 | 方式 | |---|---| | 移动面板 | 按住头部标题栏拖动 | | 调整宽度 | 拖拽面板右边缘 | | 调整高度 | 拖拽面板下边缘 | | 同时调整宽高 | 拖拽面板右下角 | | 固定侧边栏 | 点头部 📌 图标 | | 关闭 | 点头部 × 图标，或按 Esc | | 发送消息 | 输入框按 Enter | | 停止生成 | 生成中点击红色停止按钮 |

九、目录结构

ai-assistant-plugin/
├── src/
│   ├── index.js          # 插件入口（install + $aiAssistant API）
│   ├── AiAssistant.vue   # 核心浮层组件
│   └── service.js        # 接口调用
├── dist/                 # 构建产物（发布用）
│   ├── ai-assistant.common.js   # main 指向
│   ├── ai-assistant.umd.js
│   └── ai-assistant.umd.min.js
├── package.json
└── README.md

十、开发与发布

# 改源码后重新构建
npm run build

# 升级版本号（package.json 的 version），然后发布
npm publish