ai-assistant/src/views/AI/chat/index.vue

<template>
  <div class="chat-container">
    <div class="chat-list" ref="scrollContainer">
      <!-- <div>
        <div class="echarts-box" id="barEcharts"></div>
        <div class="echatrs-theme">
          <div class="theme-title">风格切换：</div>
          <div class="theme-list">
            <div class="theme-item" @click="handlerTheme(index)" v-for="(item, index) in echartsTheme" :key="index">
              {{ item }}
            </div>
          </div>
        </div>
      </div> -->

      <AiHint></AiHint>

      <div
        v-for="(item, index) in messageList"
        :key="index"
        :class="['chat-item', item.from == 'user' ? 'user-message' : 'ai-message']"
      >
        <!-- 头像 -->
        <img :src="item.from == 'user' ? userIcon : aiIcon" class="user-icon" alt="" />
        <!-- 内容 -->
        <div class="message-content">
          <div class="message-time">{{ item.time }}</div>
          <div class="message-text">
            <!-- 纯文本 -->
            <div class="text-ros">
              <span>{{ item.text }}</span>
              <div v-show="item.add">
                <n-tooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <n-icon size="14" style="cursor: pointer">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 12 12"
                      >
                        <g fill="none">
                          <path
                            d="M6.5 1.75a.75.75 0 0 0-1.5 0V5H1.75a.75.75 0 0 0 0 1.5H5v3.25a.75.75 0 0 0 1.5 0V6.5h3.25a.75.75 0 0 0 0-1.5H6.5V1.75z"
                            fill="currentColor"
                          ></path>
                        </g>
                      </svg>
                    </n-icon>
                  </template>
                  <span> 添加为常用问题 </span>
                </n-tooltip>
              </div>
            </div>
            <!-- 图表 -->
            <section v-if="item.chartType">
              <div class="echarts-box" :id="item.chartType + index"></div>
              <div class="echatrs-theme">
                <div class="theme-title">风格切换：</div>
                <div class="theme-list">
                  <div
                    class="theme-item"
                    @click="handlerTheme(item, themeIndex)"
                    v-for="(themeItem, themeIndex) in echartsTheme"
                    :key="themeIndex"
                    :class="item.chartInstanceActiveIndex == themeIndex ? 'activeTheme' : ''"
                  >
                    {{ themeItem }}
                  </div>
                </div>
              </div>
            </section>

            <!-- 思考 -->
            <div v-show="item.from === 'ai' && item.loading" class="ai-loading">
              <span>思考中</span> <n-spin size="small" content-class="spin-class" />
            </div>
            <!-- 免责 -->
            <div class="ai-hint" v-show="item.from === 'ai' && (item.text || item.chartType)">
              （注：本回答由AI生成，内容仅供参考）
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <n-input
      class="chat-input"
      round
      v-model:value="keyWord"
      type="textarea"
      placeholder="请输入需要统计的数据"
      :autosize="{ minRows: 5 }"
    >
      <template #suffix>
        <div class="chat-suffix">
          <span>常用问题</span>
          <n-button :loading="loading" size="small" :class="['chat-send']" :bordered="false" @click="handleSend">
          </n-button>
        </div>
      </template>
    </n-input>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { getAiMsg } from '@/api/ai.js'
import moment from 'moment'
import { LineChart, BarChart, PieChart } from './class/index'
import { AiHint } from '../components'
import userIcon from '@/assets/images/ai/user-icon.png'
import aiIcon from '@/assets/images/ai/ai-icon.png'
//输入框加载
let loading = ref(false)
//搜索关键字
let keyWord = ref('')
//聊天记录list
let messageList = reactive([])
//聊天室容器
const scrollContainer = ref(null)
//聊天记录最后一个索引
let lastIndex = ref(0)
//主题
const echartsTheme = ['简约风', '商务风', '科技风']
let stopWatch = null

/**
 * 页面初始完成
 */
onMounted(() => {
  // bar = new PieChart('barEcharts', {
  //   title:'图表标题',
  //   unit:'元',
  //   data: [
  //   { value: 1048, name: 'Search Engine' },
  //       { value: 735, name: 'Direct' },
  //       { value: 580, name: 'Email' },
  //       { value: 484, name: 'Union Ads' },
  //       { value: 300, name: 'Video Ads' },
  //       { value: 200, name: 'qq Ads' },
  //       { value: 100, name: 'vx Ads' }
  //   ]
  // })
})

/**
 * 问答
 */
const handleSend = async () => {
  loading.value = true
  //存储用户回答
  setMessageItem({
    from: 'user',
    text: keyWord.value,
    time: moment().format('YYYY/MM/DD HH:mm:ss'),
    add: true
  })
  //先存储AI回答，作为交互提示，接口响应后再做更新
  setMessageItem({
    from: 'ai',
    text: '',
    time: moment().format('YYYY/MM/DD HH:mm:ss'),
    loading: true, //ai思考中
    chartInstanceItem: null,
    chartInstanceActiveIndex: 0,
    chartType: null,
    xData: [],
    yData: []
  })
  try {
    const res = await getAiMsg({ prompt: keyWord.value })
    if (res.type) {
      // 更新
      updataMessageItem({
        from: 'ai',
        text: '',
        time: moment().format('YYYY/MM/DD HH:mm:ss'),
        loading: false, //ai思考中
        chartInstanceItem: null,
        chartInstanceActiveIndex: 0,
        chartType: res.chartType,
        xData: res.xData,
        yData: res.yData,
        title: res.title,
        unit: res.unit
      })
      nextTick(() => {
        const itemData = messageList[lastIndex.value]
        //饼图
        if (res.chartType === 'pie') {
          itemData.chartInstanceItem = new PieChart(`${res.chartType}${lastIndex.value}`, {
            title: res.title,
            unit: res.unit,
            xData: res.xData,
            data: res.yData
          })
        } else if (res.chartType === 'bar') {
          itemData.chartInstanceItem = new BarChart(`${res.chartType}${lastIndex.value}`, {
            title: res.title,
            unit: res.unit,
            xData: res.xData,
            data: res.yData
          })
        } else if (res.chartType === 'line') {
          itemData.chartInstanceItem = new LineChart(`${res.chartType}${lastIndex.value}`, {
            title: res.title,
            unit: res.unit,
            xData: res.xData,
            data: res.yData
          })
        }
      })
    } else {
      //纯文本
      updataMessageItem({
        from: 'ai',
        text: res,
        time: moment().format('YYYY/MM/DD HH:mm:ss'),
        loading: false
      })
    }
  } catch {
    updataMessageItem({
      from: 'ai',
      text: '服务器繁忙，请稍后再试。',
      time: moment().format('YYYY/MM/DD HH:mm:ss'),
      loading: false
    })
  }
}
/**
 * 存储聊天室数据
 * @param obj
 */

const setMessageItem = obj => {
  messageList.push(obj)
  lastIndex.value = messageList.length - 1
}

/**
 * ai回答后更新对应数据
 * @param data
 */
const updataMessageItem = data => {
  messageList[lastIndex.value] = data
  keyWord.value = ''
  loading.value = false
}

/**
 * 图表切换主题
 * @param index
 */
const handlerTheme = (item, index) => {
  pauseWatching()
  item.chartInstanceActiveIndex = index
  item.chartInstanceItem.changeColorStyle(index)
  setTimeout(()=>{
    startWatching()
  },1000)
 
}

// 聊天室自动滚动条下拉

const startWatching = () => {
  stopWatch = watch(messageList, newVal => {
    nextTick(() => {
      if (scrollContainer.value) {
        scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
      }
    })
  })
}

const pauseWatching = () => {
  if (stopWatch) {
    stopWatch() // 调用停止函数
    stopWatch = null
  }
}
onMounted(() => {
  startWatching()
})
</script>

<style lang="scss" scoped>
/* 设置滚动条整体样式 */
::-webkit-scrollbar {
  width: 0px;
}
</style>