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.from === 'user'">
                <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>

            <div v-show="item.from === 'ai' && item.loading" class="ai-loading">
              <span>思考中</span> <n-spin size="small" />
            </div>
            <div class="ai-hint" v-show="item.from === 'ai'">（注：本回答由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([])
//聊天记录最后一个索引
let lastIndex = ref(0)
//主题
const echartsTheme = ['简约风', '商务风', '科技风']

// let bar = 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')
  })
  // //先存储AI回答，作为交互提示，接口响应后再做更新
  // setMessageItem({
  //   from: 'ai',
  //   text: '',
  //   time: moment().format('YYYY/MM/DD HH:mm:ss'),
  //   loading: true //ai思考中
  // })
  // try {
  //   const res = await getAiMsg({ prompt: keyWord.value })
  //   if (res.type) {
  //     console.log('图表形式')
  //   } 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 = index => {
  bar.changeColorStyle(index)
}
</script>

<style lang="scss" scoped></style>