yys

maven

6 天以前 4088aee5374b2bcebf28e590d612ca72ad44197c

 src/views/chatHome/chatHomeIndex/MobileChat.vue

@@ -14,7 +14,7 @@
                <span class="flash_cursor"></span>
              </template>
              <template v-else>
                <pre>{{ item.msg }}</pre>
                <pre style="font-family: none;">{{ item.msg }}</pre>
              </template>
            </div>
            <div class="chat-img" v-if="item.chatType == 1">
@@ -49,13 +49,13 @@
        </div>
      </div>
    </div>
<!--    <div class="chat-input-wrapper">-->
<!--      <div style="display: flex; align-items: center">-->
<!--          <input v-model="inputMsg" @change="sendText" class="input-text" autofocus placeholder="给DeepSeek发送消息" />-->
<!--          <img class="send-icon" src="@/assets/img/emoji/rocket.png" alt="" @click="sendText" />-->
    <div class="chat-input-wrapper">
      <div style="display: flex; align-items: center">
          <input v-model="inputMsg" @change="sendText" :disabled="loading" class="input-text" autofocus placeholder="给小智发送消息" />
          <img class="send-icon" src="@/assets/img/emoji/rocket.png" alt="" @click="sendText" />

<!--      </div>-->
<!--    </div>-->
      </div>
    </div>
  </div>
</template>

@@ -67,6 +67,7 @@
import headPortrait from '@/assets/img/head_portrait.jpg'
import FileCard from '@/components/FileCard.vue'
import { ElMessage } from "element-plus"
import {checking} from './ai-wd.js'

// 定义响应式数据
const route = useRoute()
@@ -86,7 +87,7 @@
const isSend = ref(false)
const fileList = ref([])
const isProcessing = ref(false)
const loading = ref(false)
const loading = ref(true)
const srcImgList = ref([])

// 删除图片
@@ -137,20 +138,19 @@
      chatType: 0, //信息类型，0文字，1图片
      uid: '1001' //uid
    }
    sendMsg(chatMsg)
    chatList.value.push(chatMsg)
    let chatGPT = {
      headImg: headPortrait,
      name: 'DeepSeek',
      headImg: chatGPTHeadImg,
      name: '小智',
      time: new Date().toLocaleTimeString(),
      msg: "",
      chatType: 0, //信息类型，0文字，1图片
      uid: '1002' //uid
    }
    chatList.value.push(chatGPT) // 将接收到的消息存储到 messages 数组
    simulateStreamingOutput(chatGPT, inputMsg.value)
    inputMsg.value = ''
    loading.value = true
    isSend.value = true
    websocketsend(chatMsg.msg)

  } else {
    ElMessage({
      message: '消息不能为空哦~',
@@ -185,7 +185,7 @@
    uid: '1002'
  })
  chatList.value.push({
    headImg: chatGPTHeadImg,
    headImg: headPortrait,
    name: '卧龙',
    time: new Date().toLocaleTimeString(),
    msg: route.query.keyWord,
@@ -203,36 +203,40 @@
  }
  chatList.value.push(replyMsg)
  scrollBottom()

  loading.value = false
  // 如果有查询关键字，则模拟流式输出
  if (route.query.keyWord) {
    simulateStreamingOutput(replyMsg)
    simulateStreamingOutput(replyMsg, route.query.keyWord)
  }
})
// 模拟流式输出
const simulateStreamingOutput = (msgObj) => {
  // 生成0.8-1.8秒之间的随机延迟
  const delay = Math.random() * 1000 + 800
const simulateStreamingOutput = async (msgObj, keyWord) => {
  loading.value = true
  // 生成0.8-1.3秒之间的随机延迟
  const delay = Math.random() * 500 + 800

  // 模拟回复内容（实际应用中应从API获取）
  const responseText = `关于"${route.query.keyWord}"的问题，我来为您解答：\n\n这是一个示例回复内容，展示流式输出效果。在实际应用中，这里会是来自AI的真实回复内容。\n\n请稍等，我正在整理相关信息...`

  const responseText = `关于"${keyWord}"的问题，我来为您解答：\n` + checking(keyWord)

  isSend.value = true

  let index = 0
  const interval = setInterval(() => {
    isSend.value = true
    if (index < responseText.length) {
      msgObj.msg += responseText.charAt(index)
      index++
      isSend.value = false
      scrollBottom()
    } else {
      clearInterval(interval)
      isSend.value = false
    }
  }, 50) // 每50ms输出一个字符，模拟流式效果
  setTimeout(() => {
    const interval = setInterval(() => {
      isSend.value = true
      if (index < responseText.length) {
        msgObj.msg += responseText.charAt(index)
        index++
        isSend.value = false
        scrollBottom()
      } else {
        clearInterval(interval)
        isSend.value = false
        loading.value = false
      }
    }, 50) // 每50ms输出一个字符，模拟流式效果
  }, delay)

}
</script>