@hd-front-end/ai-assistant-sdk-vue2

@hd-front-end/ai-assistant-sdk-vue2

AI助手SDK的Vue 2版本，提供完整的AI对话、数据可视化和页面交互能力。

特性

• ✅ 双重API导出：同时支持Composable API和Mixin API
• ✅ TypeScript支持：完整的类型定义
• ✅ 声明式命令系统：通过$_hdAiCommands选项优雅地注册AI命令
• ✅ 样式隔离：BEM命名规范，零污染
• ✅ Vue版本兼容：支持Vue 2.6/2.7
• ✅ 渐进增强：为Vue 3迁移铺路

安装

pnpm add @hd-front-end/ai-assistant-sdk-vue2

Vue 2.6项目需要额外安装

pnpm add @vue/composition-api

Vue 2.7项目无需额外依赖

Vue 2.7已内置Composition API。

使用方式

方式1: Composable API（推荐 - 现代Vue2项目）

适用于TypeScript 4.0+、vue-class-component v7+的项目。

// main.ts - 注册插件
import Vue from 'vue';
import { AIAssistantPlugin } from '@hd-front-end/ai-assistant-sdk-vue2';

Vue.use(AIAssistantPlugin, {
  apiUrl: 'http://localhost:8080/api/chat',
  botId: 'your-bot-id'
});

// 组件中使用Composable API
import { useAIChat } from '@hd-front-end/ai-assistant-sdk-vue2/composable';

export default {
  setup() {
    const { chatList, isLoading, sendMessage } = useAIChat();
    
    return {
      chatList,
      isLoading,
      sendMessage
    };
  }
};

方式2: Mixin API（兼容 - 遗留Vue2项目）

适用于TypeScript 3.0+、vue-class-component v6的项目。

// main.ts - 注册插件
import Vue from 'vue';
import { AIAssistantPlugin } from '@hd-front-end/ai-assistant-sdk-vue2';

Vue.use(AIAssistantPlugin, {
  apiUrl: 'http://localhost:8080/api/chat',
  botId: 'your-bot-id'
});

// 组件中使用Mixin API
import { AiChatMixin } from '@hd-front-end/ai-assistant-sdk-vue2/mixin';

export default {
  mixins: [AiChatMixin],
  
  // 声明式注册AI命令
  $_hdAiCommands: {
    'navigation.nextPage': function(params) {
      this.$router.push({ name: 'nextPage' });
    },
    'data.export': function(params) {
      this.exportData(params.format);
    }
  },
  
  methods: {
    async handleSend() {
      await this.$_hdAi_sendMessage('你好');
    }
  }
};

声明式命令系统

通过$_hdAiCommands选项优雅地注册AI命令：

export default {
  mixins: [AiChatMixin],
  
  $_hdAiCommands: {
    // 命令会自动绑定this到组件实例
    'navigation.go': function(params: { page: string }) {
      this.$router.push({ name: params.page });
    },
    
    'data.refresh': function() {
      this.loadData();
    }
  },
  
  methods: {
    loadData() {
      // 业务逻辑
    }
  }
};

优势：

• ✅ 声明式配置，符合Vue开发者习惯
• ✅ 自动生命周期管理（注册和清理）
• ✅ this自动绑定到组件实例
• ✅ 支持多个Mixin的命令合并
• ✅ TypeScript类型安全

样式定制

方式1: CSS变量（运行时）

:root {
  --hd-ai-primary-color: #1890ff;
  --hd-ai-border-radius: 4px;
  --hd-ai-spacing-unit: 8px;
}

方式2: SCSS变量（编译时）

// 在项目的全局SCSS文件中
$hd-ai-primary-color: $--color-primary; // 映射到Element UI主色

@import "~@hd-front-end/ai-assistant-sdk-vue2/src/assets/styles/variables";

API文档

详细API文档请参考：API Documentation

示例项目

• zl-portal-ui - 使用Composable API
• phoenix-web-ui - 使用Mixin API

许可证

MIT