提交

src/config/page.json

@@ -33,6 +33,6 @@
         "title": "新型全媒体授权登录"
     },
     "chatGptChat":{
-        "title": "智能对话"
+        "title": "chatgpt"
     }
 }

src/view/chatGptChat/index.vue

@@ -1,19 +1,32 @@
 <template>
   <div class="chatGptChat" ref="chatEle">
-    <div v-for="(item, index) in chat" :key="index">
+    <!-- <div v-for="(item, index) in chat" :key="index">
       <div v-if="item.text && item.type === 'robot'" class="chat">
         <van-image width="35px" height="35px" fit="contain" :src="robot" />
-        <div class="cahtText" v-html="item.text"></div>
+        <div class="cahtText" v-html="item.text">
+        </div>
       </div>
       <div v-if="item.text && item.type === 'user'" class="chat chatRight">
         <div class="cahtText" v-text="item.text"></div>
         <van-image width="35px" height="35px" fit="contain" :src="user" />
       </div>
+    </div> -->
+    <div v-for="(item, index) in chat" :key="index">
+      <div v-if="item.text && item.type === 'robot'" class="chat">
+        <van-image width="35px" height="35px" fit="contain" :src="robot" />
+        <div class="cahtText">
+            <textShow :text="item.text" />
+        </div>
+      </div>
+      <div v-if="item.text && item.type === 'user'" class="chat chatRight">
+        <van-image width="35px" height="35px" fit="contain" :src="userData.UserAvatar || user" />
+        <div class="cahtText" v-text="item.text"></div>
+      </div>
     </div>
     <div class="loading" v-if="load">
       <div class="loadSun"></div>
-      <div class="loadSun" style="animation-delay:0.2s;"></div>
-      <div class="loadSun" style="animation-delay:0.4s;"></div>
+      <div class="loadSun" style="animation-delay: 0.2s"></div>
+      <div class="loadSun" style="animation-delay: 0.4s"></div>
     </div>
     <van-field
       v-model="inputText"
@@ -24,7 +37,12 @@
       type="textarea"
     >
       <template #button>
-        <van-button :loading="load"  size="small" type="success" @click="saveText">
+        <van-button
+          :loading="load"
+          size="small"
+          type="success"
+          @click="saveText"
+        >
           发送
         </van-button>
       </template>
@@ -36,6 +54,8 @@ import robot from '../../assets/img/chat/robot_2.png';
 import user from '../../assets/img/chat/user.png';
 import { ref, nextTick } from 'vue';
 
+import textShow from './textShow.vue';
+
 import { ChartGpt } from '@/api/chatGpt';
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
@@ -44,7 +64,8 @@ import { ChartGpt } from '@/api/chatGpt';
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-console.log(window.$originData);
+console.log(window.$shanshipin);
+const userData = ref(window.$shanshipin || {});
 const chat = ref([]);
 const load = ref(false);
 const chatEle = ref(null);
@@ -55,12 +76,12 @@ function saveText() {
     text: inputText.value,
     type: 'user',
   });
+  load.value = true;
   nextTick(() => {
     // 滚动到最底层
     if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
       chatEle.value.scrollTop = chatEle.value.scrollHeight;
     }
-    load.value = true;
   });
   inputText.value = '';
   let prompt = [];
@@ -75,7 +96,7 @@ function saveText() {
       console.log(r);
       load.value = false;
       chat.value.push({
-        text: (r.result || '').replace(/\n/g, '<br />'),
+        text: (r.result || ''),
         type: 'robot',
       });
       nextTick(() => {
@@ -96,10 +117,9 @@ function saveText() {
   font-weight: 500;
   width: 100vw;
   height: 100vh;
-  padding: 1em;
   position: relative;
   padding-bottom: 55px;
-  background-color: #dddddd;
+  background-color: #ffffff;
   overflow-y: auto;
   .van-field {
     background-color: #eee;
@@ -114,13 +134,13 @@ function saveText() {
   }
 
   .chat {
-    padding: 0.5em 0;
+    padding: 1em 1.5em;
     width: 100%;
+    background-color: #f4f4f6;
     .cahtText {
       text-align: left;
       line-height: 1.5em;
       border-radius: 5px;
-      background-color: #ffffff;
       padding: 0.5em;
       display: inline-block;
       max-width: calc(100% - 40px);
@@ -135,8 +155,9 @@ function saveText() {
       margin-right: 5px;
     }
   }
+
   .chatRight {
-    text-align: right;
+    background: #ffffff;
   }
 
   .loading {

src/view/chatGptChat/textShow.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="text" v-html="EleText"></div>
+</template>
+<script setup>
+import { defineProps, ref } from 'vue';
+
+const prop = defineProps({
+  text: String,
+});
+
+const li = prop.text.replace(/\n/g, '^').split('');
+let index = 0;
+const EleText = ref(li[0] || '');
+let t = window.setInterval(() => {
+  if (index++ >= li.length) return window.clearInterval(t);
+  if (li[index] === '^') EleText.value += '<br />';
+  else EleText.value += li[index] || '';
+  console.log(EleText.value);
+}, 200);
+</script>
+<style lang="scss"></style>