hy-chat-result

红楹智能问答结果展示组件 - 支持指标卡片、参数设置、数据图表展示

📦 安装

# 使用 npm
npm install @lee_miranda/hy-chat-result

# 使用 yarn
yarn add @lee_miranda/hy-chat-result

# 使用 pnpm
pnpm add @lee_miranda/hy-chat-result

如果遇到依赖冲突

如果安装时提示 ERESOLVE unable to resolve dependency tree 错误，使用以下命令：

# 方式 1：忽略 peer 依赖检查（推荐）
npm install @lee_miranda/hy-chat-result --legacy-peer-deps

# 方式 2：强制安装
npm install @lee_miranda/hy-chat-result --force

依赖说明

安装本组件时，以下依赖会自动安装，无需手动安装：

• echarts - 图表库
• markdown-it - Markdown 解析
• highlight.js - 代码高亮
• dompurify - HTML 安全处理
• marked - Markdown 渲染

需要手动确保项目中已安装：

| 依赖 | 版本要求 | |------|----------| | vue | ^2.6.0 或 ^2.7.0 | | element-ui | ^2.13.0+ |

🚀 快速开始

方式一：全局注册（推荐）

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import HyChatResult from '@lee_miranda/hy-chat-result'
import '@lee_miranda/hy-chat-result/dist/hy-chat-result.css'

Vue.use(ElementUI)

// 使用插件（默认会自动读取 window.APIURL.hwchatHost）
Vue.use(HyChatResult)

// 或者手动指定 API 地址
// Vue.use(HyChatResult, {
//   apiHost: 'https://your-api-server.com'
// })

API 地址配置说明

组件会按以下优先级获取 API 地址：

1. 手动设置：通过 apiHost prop 或 setApiHost() 方法设置
2. 全局配置：自动读取 window.APIURL.hwchatHost
3. 代理配置：开发环境可配置 /hwchatHost 代理

// 方式 1：在项目中配置全局变量（推荐）
window.APIURL = {
  hwchatHost: 'https://your-api-server.com'
}

// 方式 2：组件 prop 传入
<HyChatResult api-host="https://your-api-server.com" />

// 方式 3：直接调用 API
import { setApiHost } from 'hy-chat-result'
setApiHost('https://your-api-server.com')

方式二：局部引入（完整示例）

<template>
  <div class="chat-page">
    <!-- 聊天结果展示区域 -->
    <div class="chat-content">
      <HyChatResult
        ref="chatResult"
        :token="token"
        :show-user-question="true"
        @request-start="onStart"
        @request-complete="onComplete"
        @request-error="onError"
      />
    </div>

    <!-- 底部输入区域 -->
    <div class="input-area">
      <div class="input-wrapper">
        <el-input
          v-model="inputText"
          :disabled="isLoading"
          type="textarea"
          :rows="2"
          placeholder="请输入您想了解的内容..."
          @keyup.enter.native="handleSend"
        />
        <div class="btn-group">
          <el-button
            v-if="!isLoading"
            type="primary"
            :disabled="!inputText.trim()"
            @click="handleSend">
            发送
          </el-button>
          <el-button
            v-else
            type="danger"
            @click="handleStop">
            停止
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { HyChatResult } from '@lee_miranda/hy-chat-result'
import '@lee_miranda/hy-chat-result/dist/hy-chat-result.css'

export default {
  name: 'ChatDemo',
  components: {
    HyChatResult
  },
  data() {
    return {
      token: 'your-auth-token', // 必填：认证 Token
      inputText: '',
      isLoading: false
    }
  },
  methods: {
    // 发送问题
    handleSend() {
      if (!this.inputText.trim() || this.isLoading) return
      this.$refs.chatResult.sendQuestion(this.inputText)
      this.inputText = ''
    },

    // 停止请求
    handleStop() {
      this.$refs.chatResult.stopRequest()
    },

    // 请求开始
    onStart(data) {
      this.isLoading = true
      console.log('请求开始:', data.type)
    },

    // 请求完成
    onComplete(data) {
      this.isLoading = false
      console.log('请求完成:', data)
    },

    // 请求错误
    onError({ error }) {
      this.isLoading = false
      this.$message.error(error.message || '请求失败')
    }
  }
}
</script>

<style scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f7fa;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.input-area {
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
}

.input-wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.input-wrapper .el-textarea {
  flex: 1;
}

.btn-group {
  display: flex;
  gap: 8px;
}

.btn-group .el-button {
  height: 40px;
  min-width: 80px;
}
</style>

📖 API 文档

HyChatResult 主组件

这是主要的聊天结果展示组件，集成了所有子组件和 API 调用逻辑。

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | apiHost | API 服务器地址 | String | '' | | showUserQuestion | 是否显示用户问题 | Boolean | true | | token | 认证 Token（必填，用于 API 认证） | String | '' | | question | 初始问题（设置后自动发起请求） | String | '' | | chatId | 会话 ID（用于继续已有对话） | String | '' |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | request-start | 请求开始时触发 | { type, query?, params?, index? } | | request-complete | 请求完成时触发 | { type, chatId, chatData } | | request-error | 请求错误时触发 | { error, type } | | request-stop | 用户停止请求时触发 | - | | chat-clear | 对话清空时触发 | - | | chat-id-update | 会话 ID 更新时触发 | chatId | | chunk-received | 收到流式数据块时触发 | { data, ctx } |

Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | sendQuestion(query) | 发送问题 | query: String | | stopRequest() | 停止当前请求 | - | | clearChat() | 清空对话 | - | | getChatData() | 获取当前对话数据 | 返回 { chatId, chatData } |

HyIndicators 指标卡片组件

用于展示和选择指标的卡片组件。

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | IndicatorsData | 指标数据 | Object | {} | | chatIndex | 当前聊天索引 | Number | 0 | | loading | 是否显示加载状态 | Boolean | false |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | next | 点击下一步时触发 | (params, chatIndex) |

HyParamSet 参数设置组件

用于设置查询参数的表单组件。

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | paramsSetData | 参数配置数据 | Object | {} | | chatIndex | 当前聊天索引 | Number | 0 | | loading | 是否显示加载状态 | Boolean | false | | disabled | 是否禁用表单 | Boolean | false |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | confirm | 点击确认时触发 | (params, chatIndex) | | prev | 点击上一步时触发 | (chatIndex) |

HyMarkdownEcharts Markdown 图表组件

用于渲染 Markdown 内容和 ECharts 图表的组件。

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | content | Markdown 内容（支持嵌入 ECharts 配置） | String | '' |

🔧 API 方法

除了组件，还可以直接使用 API 方法：

import {
  setApiHost,
  getApiHost,
  setAuthToken,
  getAuthToken,
  hwChatStream,
  indexSetStream,
  paramSetStream,
  cancelStreamRequest,
  cancelAllStreamRequests
} from '@lee_miranda/hy-chat-result'

// 设置 API 地址
setApiHost('https://your-api-server.com')

// 设置认证 Token（必须）
setAuthToken('your-auth-token')

// 发起聊天流式请求
const cancelFn = hwChatStream(
  { chatID: '', query: '分析比亚迪的盈利能力' },
  (chunk) => console.log('收到数据:', chunk),
  (result) => console.log('完成:', result),
  (error) => console.error('错误:', error)
)

// 取消请求
cancelFn()
// 或
cancelStreamRequest('hwChatStream_request')

📋 数据结构

聊天记录结构

interface ChatItem {
  userQuestion: string;      // 用户问题
  sysAnswers: AnswerItem[];  // 系统回答列表
}

interface AnswerItem {
  id: string;
  answerType: number;        // 0=普通文本, 1=指标卡片, 2=参数设置, 3=数据结果, 5=已停止
  content: string;           // 内容（JSON 字符串或普通文本）
  showType: 'TEXT' | 'CARD'; // 显示类型
  describeAnswer?: string;   // 描述数据（用于图表展示）
  statusContent?: string;    // 状态信息（如 "正在分析..."）
}

指标数据结构

interface IndicatorsData {
  Action: '下一步' | '确认' | '完成';
  Components: ComponentItem[];
  HasPreStep: boolean;
  PlanText: string;
  Title: string;
}

interface ComponentItem {
  Name: string;
  Operable: boolean;
  Component: {
    Title: string;
    FieldType: string;
    DataType: string;
    CompType: string;
    SelValue: string[];
    SelValue1: string[];
    Value: string[];
  }[];
}

🎨 样式自定义

组件使用 SCSS 编写样式，你可以通过以下方式自定义：

方式一：覆盖 CSS 变量（如支持）

:root {
  --hy-primary-color: #409eff;
  --hy-text-color: #333;
  --hy-border-color: #e8e8e8;
}

方式二：覆盖类名

.hy-chat-result {
  // 自定义样式
}

.hy-indicators-card {
  .card-header {
    background: linear-gradient(135deg, #your-color 0%, #your-color2 100%);
  }
}

📝 完整示例

<template>
  <div class="app">
    <!-- 输入框 -->
    <div class="input-area">
      <el-input
        v-model="inputText"
        placeholder="请输入问题"
        @keyup.enter.native="handleSend"
      />
      <el-button type="primary" @click="handleSend">发送</el-button>
      <el-button @click="handleStop">停止</el-button>
      <el-button @click="handleClear">清空</el-button>
    </div>

    <!-- 聊天结果展示 -->
    <div class="chat-area">
      <HyChatResult
        ref="chatResult"
        :api-host="apiHost"
        :show-user-question="true"
        @request-start="onStart"
        @request-complete="onComplete"
        @request-error="onError"
        @chat-id-update="onChatIdUpdate"
      />
    </div>
  </div>
</template>

<script>
import { HyChatResult } from '@lee_miranda/hy-chat-result'
import '@lee_miranda/hy-chat-result/dist/hy-chat-result.css'

export default {
  components: { HyChatResult },

  data() {
    return {
      apiHost: 'https://your-api-server.com',
      inputText: '',
      chatId: ''
    }
  },

  methods: {
    handleSend() {
      if (!this.inputText.trim()) return
      this.$refs.chatResult.sendQuestion(this.inputText)
      this.inputText = ''
    },

    handleStop() {
      this.$refs.chatResult.stopRequest()
    },

    handleClear() {
      this.$refs.chatResult.clearChat()
      this.chatId = ''
    },

    onStart(data) {
      console.log('请求开始:', data.type)
    },

    onComplete(data) {
      console.log('请求完成:', data)
      // 可以保存聊天记录
      localStorage.setItem('chatData', JSON.stringify(data.chatData))
    },

    onError({ error, type }) {
      this.$message.error(error.message || '请求失败')
    },

    onChatIdUpdate(chatId) {
      this.chatId = chatId
    }
  }
}
</script>

<style scoped>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.input-area {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.chat-area {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  min-height: 400px;
}
</style>

🔨 本地开发

# 进入组件目录
cd packages/hy-chat-result

# 安装依赖
npm install

# 构建
npm run build

📄 License

MIT