优化对话

src/components/classRoomHelper/component/dialogArea.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="dialog" v-loading="loading">
+	<div class="dialog">
 		<div v-show="cardType == 0">
 			<div class="d_top" ref="chatRef">
 				<div class="d_t_chat" v-for="(item,index) in chatList" :key="index">
@@ -18,7 +18,7 @@
 							<span>Ai</span>
 						</div>
 						<div class="d_t_c_a_right">
-							<div class="d_t_c_a_r_content">{{ item.content }}</div>
+							<div class="d_t_c_a_r_content"  v-loading="loading && index==chatList.length-1">{{ item.content }}</div>
 							<div class="d_t_c_a_r_time">{{item.time}}</div>
 						</div>
 						
@@ -33,7 +33,7 @@
 				<div class="d_b_inputArea">
 					<div class="d_b_tape" @click="goTape()"></div>
 					<div class="d_b_input">
-						<el-input class="d_b_i_left" v-model="text"></el-input>
+						<el-input :disabled="loading" @keyup.enter.native="send()" class="d_b_i_left" v-model="text"></el-input>
 						<div class="d_b_i_right" @click="sendFile()">
 							<span></span>
 						</div>
@@ -127,22 +127,35 @@
 		},
 		methods: {
 			choiceRole(){
+				if(this.loading)return this.$message.info("请稍等")
 				this.cardType = 1;
 			},
 			sendFile(){
+				if(this.loading)return this.$message.info("请稍等")
 				this.$message.info("点击了附件")
 			},
 			goTape(){
+				if(this.loading)return this.$message.info("请稍等")
 				this.$message.info(`点击了语音`)
 			},
 			send(){
+				if (this.loading) return this.$message.info("请稍等");
+				if(this.text.trim().length==0)return this.$message.info("请输入内容")
 				this.loading = true;
 				this.chatList.push({
 					role:"user",
 					content:this.text,
 					time:new Date().toLocaleString().replace(/\//ig,'-')
 				})
-
+				
+				this.chatList.push({
+					role:"ai",
+					content:"",//这里需要调用接口
+					time:new Date().toLocaleString().replace(/\//ig,'-')
+				})
+				this.$nextTick(() => {
+				  	this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+					});;
 				setTimeout(()=>{
 					let aiContent="对不起，这个问题我回答不了。"
 					switch(this.text){
@@ -171,16 +184,21 @@
 								break;
 						}
 					}
-					this.chatList.push({
-						role:"ai",
-						content:aiContent,//这里需要调用接口
-						time:new Date().toLocaleString().replace(/\//ig,'-')
-					})
+					// this.chatList.push({
+					// 	role:"ai",
+					// 	content:aiContent,//这里需要调用接口
+					// 	time:new Date().toLocaleString().replace(/\//ig,'-')
+					// })
+					this.chatList[this.chatList.length - 1].content = aiContent;
+          this.chatList[
+            this.chatList.length - 1
+          ].time = new Date().toLocaleString().replace(/\//gi, "-");
+					this.loading = false;
 					this.$nextTick(() => {
 				  	this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
-					});;
+					});
 					this.text = "";
-					this.loading = false;
+					
 				},5000)
 				// this.chatList.push({
 				// 	role:"user",
@@ -201,6 +219,11 @@
 				this.rightSubjects = this.subjectsType;
 				this.rightRole = this.roleType;
 				this.chatList = [];
+				this.chatList.push({
+					role:"ai",
+					content:"",//这里需要调用接口
+					time:new Date().toLocaleString().replace(/\//ig,'-')
+				})
 				setTimeout(()=>{
 					let aiContent = "你好";
 					switch(this.rightRole){
@@ -280,11 +303,10 @@
 							aiContent = "你好，我是安培，电磁学的先驱之一，提出了电流的磁效应。"
 							break;
 					}
-					this.chatList.push({
-						role:"ai",
-						content:aiContent,//这里需要调用接口
-						time:new Date().toLocaleString().replace(/\//ig,'-')
-					})
+					this.chatList[this.chatList.length - 1].content = aiContent;
+          this.chatList[
+            this.chatList.length - 1
+          ].time = new Date().toLocaleString().replace(/\//gi, "-");
 					this.loading = false;
 				},2000)
 
@@ -594,8 +616,9 @@
 	height: 35px;
 	font-size: 14px;
 	box-sizing: border-box;
-	padding: 0 10px;
+	padding: 0 9px;
 	background-color: #F3F7FD;
+	border: solid 1px #F3F7FD;
 	border-radius: 5px;
 	margin-right:8px;
 	margin-bottom: 8px;
@@ -635,7 +658,8 @@
 	margin: 5px;
 	cursor: pointer;
 	box-sizing: border-box;
-	padding: 0 5px;
+	padding: 0 4px;
+	border: solid 1px #F0F2F5;
 }
 
 .r_b_itemActive{

src/components/classRoomHelper/component/searchArea.vue

@@ -1,146 +1,218 @@
 <template>
-	<div class="search" v-loading="loading">
-			<div class="s_top" ref="chatRef">
-				<div class="s_t_chat">
-					<div class="s_t_c_ai">
-						<div class="s_t_c_a_left">
-							<span>Ai</span>
-						</div>
-						<div class="s_t_c_a_right">
-							<div class="s_t_c_a_r_content2">
-								<div class="s_t_c_a_r_c_title">
-									<img :src="require('../../../assets/icon/course/idea.png')">
-									<span>猜你想搜:</span>
-								</div>
-								<div class="s_t_c_a_r_c_item" @click="sendAiIdea('不同国家的垃圾分类标准和方法？')">1.垃圾分类标准：不同国家的垃圾分类标准和方法？</div>
-								<div class="s_t_c_a_r_c_item" @click="sendAiIdea('可回收垃圾的处理流程和再利用方法？')">2.可回收垃圾处理：可回收垃圾的处理流程和再利用方法？</div>
-								<div class="s_t_c_a_r_c_item" @click="sendAiIdea('有害垃圾对环境和人体健康的潜在影响？')">3.有害垃圾的影响：有害垃圾对环境和人体健康的潜在影响？</div>
-							</div>
-							<div class="s_t_c_a_r_time">{{ new Date().toLocaleString().replace(/\//ig,'-') }}</div>
-						</div>
-					</div>
-				</div>
-				<div class="s_t_chat" v-for="(item,index) in chatList" :key="index">
-					<div class="s_t_c_user" v-if="item.role =='user'">
-						<div class="s_t_c_u_left">
-							<div class="s_t_c_u_l_content">{{item.content}}</div>
-							<div class="s_t_c_u_l_time">{{item.time}}</div>
-						</div>
-						<div class="s_t_c_u_right">
-							<span>我</span>
-						</div>
-					</div>
-
-					<div class="s_t_c_ai" v-if="item.role =='ai'">
-						<div class="s_t_c_a_left">
-							<span>Ai</span>
-						</div>
-						<div class="s_t_c_a_right">
-							<div class="s_t_c_a_r_content" v-if="item.type==0">{{ item.content }}</div>
-							<div class="s_t_c_a_r_contentImage" v-if="item.type==1">
-								<span>为你找到以下图片</span>
-								<!-- <el-image 
+  <div class="search">
+    <div class="s_top" ref="chatRef">
+      <div class="s_t_chat">
+        <div class="s_t_c_ai">
+          <div class="s_t_c_a_left">
+            <span>Ai</span>
+          </div>
+          <div class="s_t_c_a_right">
+            <div class="s_t_c_a_r_content2">
+              <div class="s_t_c_a_r_c_title">
+                <img :src="require('../../../assets/icon/course/idea.png')" />
+                <span>猜你想搜:</span>
+              </div>
+              <div
+                class="s_t_c_a_r_c_item"
+                v-for="(item, index) in wantSearch"
+                :key="index"
+                @click="sendAiIdea(item.label)"
+              >
+                {{ index + 1 }}.{{ item.title }}：{{ item.label }}
+              </div>
+            </div>
+            <div class="s_t_c_a_r_time">
+              {{ new Date().toLocaleString().replace(/\//gi, "-") }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="s_t_chat"
+        v-for="(item, index) in chatList"
+        :key="index"
+      >
+        <div class="s_t_c_user" v-if="item.role == 'user'">
+          <div class="s_t_c_u_left">
+            <div class="s_t_c_u_l_content">{{ item.content }}</div>
+            <div class="s_t_c_u_l_time">{{ item.time }}</div>
+          </div>
+          <div class="s_t_c_u_right">
+            <span>我</span>
+          </div>
+        </div>
+
+        <div class="s_t_c_ai" v-if="item.role == 'ai'">
+          <div class="s_t_c_a_left">
+            <span>Ai</span>
+          </div>
+          <div class="s_t_c_a_right">
+            <div
+              class="s_t_c_a_r_content"
+              v-loading="loading && index == chatList.length - 1"
+              v-if="item.type == 0"
+            >{{ item.content }}
+            </div>
+            <div
+              class="s_t_c_a_r_contentImage"
+              v-loading="loading && index == chatList.length - 1"
+              v-if="item.type == 1"
+            >
+              <span>为您找到以下图片</span>
+              <!-- <el-image 
   							  style="width: 45%;height: 125px;margin: 1% 1.5%;"
   							  v-for="(item,index) in item.content"
 									:key="index"
 									:src="item"
   							  :preview-src-list="item">
   							</el-image> -->
-								<img v-for="(item,index) in item.content" @click.stop="$hevueImgPreview(item)" :key="index" :src="item">
-							</div>
-							<div class="s_t_c_a_r_time">{{item.time}}</div>
-						</div>
-						
-					</div>
-				</div>
-				
-			</div>
-			<div class="s_bottom">
-				<div class="s_b_btnArea">
-					<!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
-					<div class="s_b_ba-item">
-						<el-checkbox style="display: flex;"  v-model="imageCheck">图片</el-checkbox>
-					</div>
-					<div class="s_b_ba-item">
-						<el-checkbox style="display: flex;" v-model="videoCheck">视频</el-checkbox>
-					</div>
-				</div>
-				<div class="s_b_inputArea">
-					<div class="s_b_tape" @click="goTape()"></div>
-					<div class="s_b_input">
-						<el-input class="s_b_i_left" v-model="text"></el-input>
-						<div class="s_b_i_right" @click="sendFile()">
-							<span></span>
-						</div>
-					</div>
-					<div class="s_b_btn" @click="send()">
-						<span></span>
-					</div>
-				</div>
-			</div>
-	</div>
+              <img
+                v-for="(item, index) in item.content"
+                @click.stop="$hevueImgPreview(item)"
+                :key="index"
+                :src="item"
+              />
+            </div>
+            <div class="s_t_c_a_r_time">{{ item.time }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="s_bottom">
+      <div class="s_b_btnArea">
+        <!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
+        <div class="s_b_ba-item">
+          <el-checkbox
+            :disabled="loading"
+            style="display: flex;"
+            v-model="imageCheck"
+            >图片</el-checkbox
+          >
+        </div>
+        <div class="s_b_ba-item">
+          <el-checkbox
+            :disabled="loading"
+            style="display: flex;"
+            v-model="videoCheck"
+            >视频</el-checkbox
+          >
+        </div>
+      </div>
+      <div class="s_b_inputArea">
+        <div class="s_b_tape" @click="goTape()"></div>
+        <div class="s_b_input">
+          <el-input
+            :disabled="loading"
+						@keyup.enter.native="send()"
+            class="s_b_i_left"
+            v-model="text"
+          ></el-input>
+          <div class="s_b_i_right" @click="sendFile()">
+            <span></span>
+          </div>
+        </div>
+        <div class="s_b_btn" @click="send()">
+          <span></span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data(){
-			return{
-				text:"",
-				loading:false,
-				imageCheck:false,
-				videoCheck:false,
-				chatList:[
-				{
-						role:"ai",
-						content:`您好，有什么可以帮助您的吗？`,
-						time:new Date().toLocaleString().replace(/\//ig,'-'),
-						type:0,
-					},
-// 					{
-// 						role:"user",
-// 						content:"正十三边形的每个角是多少度？",
-// 						time:"2023-11-11 11:10:11"
-// 					},
-// 					{
-// 						role:"ai",
-// 						content:`小朋友们，你们知道正十三边形吗？就像我们班有13个好朋友站成一个圈圈一样。如果我们想知道每个人转身看向下一个人需要转多少度，我们可以这样想：首先，所有朋友手拉手围成的圈圈是360度，对吧？但是，我们不能直接算每个人转身的角度，因为那是外面的角度，我们要算里面的角度，就像每个人转身时脚尖指向圈心的角度。
-// 我们先用一个小技巧，算出所有内角加起来是多少度。方法是：(13-2)乘以180度，得到1980度。这是因为，想象成一个多边形，它可以分成11个三角形，每个三角形的角度和是180度。
-// 然后，我们把1980度平分给13个角，就是每个角的度数了。算一算，1980除以13等于152度。所以，正十三边形的每个角是152度。就像每个人转身看下一个朋友，每个人需要转152度一样。`,
-// 						time:"2023-11-11 11:10:11"
-// 					},
-				],
-			}
-		},
-		methods: {
-			choiceRole(){
-				this.cardType = 1;
-			},
-			sendFile(){
-				this.$message.info("点击了附件")
-			},
-			goTape(){
-				this.$message.info(`点击了语音`)
-			},
-			send(){
-				this.loading = true;
-				setTimeout(()=>{
-
-					this.chatList.push({
-						role:"user",
-						content:this.text,
-						time:new Date().toLocaleString().replace(/\//ig,'-')
-					})
-
-					let aiContent="对不起，这个问题我回答不了。"
-					let type = 0;
-
-					switch(this.text){
-						case "帮我查找几张常见的不同类型的垃圾图片":
-							aiContent = ['https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png'];
-							type = 1;
-							break;
-						case "帮我查找一些B站的视频，介绍垃圾如何处理":
-							aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
+export default {
+  data() {
+    return {
+      text: "",
+      loading: false,
+      imageCheck: false,
+      videoCheck: false,
+      wantSearch: [
+        {
+          index: 1,
+          title: "垃圾分类标准",
+          label: "不同国家的垃圾分类标准和方法？"
+        },
+        {
+          index: 2,
+          title: "可回收垃圾处理",
+          label: "可回收垃圾的处理流程和再利用方法？"
+        },
+        {
+          index: 3,
+          title: "有害垃圾的影响",
+          label: "有害垃圾对环境和人体健康的潜在影响？"
+        }
+      ],
+      chatList: [
+        {
+          role: "ai",
+          content: `您好，有什么可以帮助您的吗？`,
+          time: new Date().toLocaleString().replace(/\//gi, "-"),
+          type: 0
+        }
+        // 					{
+        // 						role:"user",
+        // 						content:"正十三边形的每个角是多少度？",
+        // 						time:"2023-11-11 11:10:11"
+        // 					},
+        // 					{
+        // 						role:"ai",
+        // 						content:`小朋友们，你们知道正十三边形吗？就像我们班有13个好朋友站成一个圈圈一样。如果我们想知道每个人转身看向下一个人需要转多少度，我们可以这样想：首先，所有朋友手拉手围成的圈圈是360度，对吧？但是，我们不能直接算每个人转身的角度，因为那是外面的角度，我们要算里面的角度，就像每个人转身时脚尖指向圈心的角度。
+        // 我们先用一个小技巧，算出所有内角加起来是多少度。方法是：(13-2)乘以180度，得到1980度。这是因为，想象成一个多边形，它可以分成11个三角形，每个三角形的角度和是180度。
+        // 然后，我们把1980度平分给13个角，就是每个角的度数了。算一算，1980除以13等于152度。所以，正十三边形的每个角是152度。就像每个人转身看下一个朋友，每个人需要转152度一样。`,
+        // 						time:"2023-11-11 11:10:11"
+        // 					},
+      ]
+    };
+  },
+  methods: {
+    choiceRole() {
+      this.cardType = 1;
+    },
+    sendFile() {
+			if (this.loading) return this.$message.info("请稍等");
+      this.$message.info("点击了附件");
+    },
+    goTape() {
+			if (this.loading) return this.$message.info("请稍等");
+      this.$message.info(`点击了语音`);
+    },
+    send() {
+      if (this.loading) return this.$message.info("请稍等");
+			if(this.text.trim().length==0)return this.$message.info("请输入内容")
+      this.loading = true;
+      this.chatList.push({
+        role: "user",
+        content: this.text,
+        time: new Date().toLocaleString().replace(/\//gi, "-")
+      });
+			
+      this.chatList.push({
+        role: "ai",
+        content: "",
+        type: 0,
+        time: new Date().toLocaleString().replace(/\//gi, "-")
+      });
+      this.$nextTick(() => {
+        this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+      });
+      setTimeout(() => {
+        let aiContent = "对不起，这个问题我回答不了。";
+        let type = 0;
+
+        switch (this.text) {
+          case "帮我查找几张常见的不同类型的垃圾图片":
+            aiContent = [
+              "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png",
+              "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png",
+              "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png",
+              "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png"
+            ];
+            type = 1;
+            break;
+          case "帮我查找一些B站的视频，介绍垃圾如何处理":
+            aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
 1.【科普短视频】垃圾会被怎么处理? - 这个视频通过简短的内容向观众展示垃圾处理的过程。
 https://www.bilibili.com/video/BV1UD4y1U71a
 
@@ -149,19 +221,19 @@ https://www.bilibili.com/video/BV1bt41157wH
  
 3.【环保短片】震撼环保公益短片《致我们的地球》- 这部短片通过震撼的画面和内容，强调了环保问题的重要性。
 https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
-							type = 0;
-							break;
-						case "不同国家的垃圾分类标准和方法？":
-							aiContent=`好的，我们来聊聊不同国家是怎么分类垃圾的。垃圾分类就像是帮助垃圾找到它们正确的家，这样我们的环境才能更干净，地球也会更健康。
+            type = 0;
+            break;
+          case "不同国家的垃圾分类标准和方法？":
+            aiContent = `好的，我们来聊聊不同国家是怎么分类垃圾的。垃圾分类就像是帮助垃圾找到它们正确的家，这样我们的环境才能更干净，地球也会更健康。
 •日本：日本的垃圾分类做得非常细致。他们不仅仅是分可回收和不可回收，而是将垃圾分成很多种类，比如瓶子、罐头、纸张、塑料等等。在日本，居民需要按照当地的规定把垃圾分类好，然后放在特定的垃圾袋里，在指定的时间拿出去扔。如果分类错了，垃圾收集者可能不会带走垃圾哦。
 •德国：德国也非常重视垃圾分类。他们有一种叫做“绿点”的系统，很多包装上都有一个绿色的点。这意味着制造商已经支付了回收费用。德国人会把纸、塑料、玻璃和金属分开收集。他们甚至有专门的容器来收集旧衣服和鞋子。
 •美国：美国的垃圾分类方法比较简单，通常分为可回收物、有机物和其他垃圾。可回收物包括纸张、塑料、玻璃和金属等。有些城市还有专门的食物垃圾桶，用来收集厨余垃圾，这些可以被转化为肥料或者生产能源。
 •瑞典：瑞典几乎可以回收利用所有的垃圾。他们非常擅长把垃圾变成资源，比如将燃烧垃圾产生的热能用来供暖和供电。瑞典人也会把垃圾分类成多种类，确保每种垃圾都能找到最合适的处理方式。
-通过这些例子，我们可以看到，虽然不同国家的垃圾分类方法和标准不一样，但他们都有一个共同的目标，那就是保护我们的环境，让地球变得更美好。所以，我们每个人在日常生活中也要努力做好垃圾分类，为保护地球出一份力！`
-							type = 0;
-							break;
-						case "可回收垃圾的处理流程和再利用方法？":
-							aiContent = `好的，我们来聊聊可回收垃圾的处理流程和再利用方法，就像是给垃圾进行一次神奇的变身之旅。
+通过这些例子，我们可以看到，虽然不同国家的垃圾分类方法和标准不一样，但他们都有一个共同的目标，那就是保护我们的环境，让地球变得更美好。所以，我们每个人在日常生活中也要努力做好垃圾分类，为保护地球出一份力！`;
+            type = 0;
+            break;
+          case "可回收垃圾的处理流程和再利用方法？":
+            aiContent = `好的，我们来聊聊可回收垃圾的处理流程和再利用方法，就像是给垃圾进行一次神奇的变身之旅。
 首先，可回收垃圾是指那些可以被再次利用的垃圾，比如塑料瓶、纸张、玻璃瓶和金属罐头盒等。这些垃圾如果被正确处理，就可以变成新的东西，而不是被扔掉占用地球的空间。
 第一步：收集和分类
 想象一下，你在家里帮忙把不同的垃圾放在不同的垃圾桶里。比如，把塑料瓶放在一个桶里，把纸张放在另一个桶里。这样做的目的是为了让垃圾更容易被处理和回收。在学校或者社区，也有专门的垃圾桶来收集这些可回收的材料。
@@ -173,26 +245,36 @@ https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
 这些被处理过的材料，比如碎纸或者塑料颗粒，会被送到不同的工厂，变成新的产品。例如，旧报纸可以被制成新的纸张或者纸板，塑料瓶可以变成塑料椅子或者玩具，玻璃瓶可以熔化后再制成新的玻璃制品。
 第五步：重新使用
 最后，这些新制成的物品会被送到商店，人们可以再次购买使用。这样一来，我们就完成了一次“垃圾变宝贝”的神奇旅程。
-通过这个流程，我们不仅节省了资源，减少了垃圾，还帮助保护了我们的环境。所以，下次当你要扔东西时，记得先想想这个东西能不能被回收，然后放到正确的垃圾桶里哦！这样你也成为了保护地球的小小英雄！`
-							type = 0;
-							break;
-						case "有害垃圾对环境和人体健康的潜在影响？":
-							type = 0;
-							break;
-					}
-
-					if(this.imageCheck){
-						aiContent = ['https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png','https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png'];
-						type = 1;
-						this.chatList.push({
-							role:"ai",
-							content:aiContent,
-							type:type,
-							time:new Date().toLocaleString().replace(/\//ig,'-')
-						})
-					}
-					if(this.videoCheck){
-						aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
+通过这个流程，我们不仅节省了资源，减少了垃圾，还帮助保护了我们的环境。所以，下次当你要扔东西时，记得先想想这个东西能不能被回收，然后放到正确的垃圾桶里哦！这样你也成为了保护地球的小小英雄！`;
+            type = 0;
+            break;
+          case "有害垃圾对环境和人体健康的潜在影响？":
+            type = 0;
+            break;
+        }
+
+        if (this.imageCheck) {
+          aiContent = [
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8721713253471000.png",
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8731713253488299.png",
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8741713253506303.png",
+            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8751713253523152.png"
+          ];
+          type = 1;
+          this.chatList[this.chatList.length - 1].content = aiContent;
+          this.chatList[this.chatList.length - 1].type = type;
+          this.chatList[
+            this.chatList.length - 1
+          ].time = new Date().toLocaleString().replace(/\//gi, "-");
+          // this.chatList.push({
+          // 	role:"ai",
+          // 	content:aiContent,
+          // 	type:type,
+          // 	time:new Date().toLocaleString().replace(/\//ig,'-')
+          // })
+        }
+        if (this.videoCheck) {
+          aiContent = `当然，以下是关于垃圾处理的一些B站视频链接：
 							1.【科普短视频】垃圾会被怎么处理? - 这个视频通过简短的内容向观众展示垃圾处理的过程。
 							https://www.bilibili.com/video/BV1UD4y1U71a
 
@@ -201,367 +283,369 @@ https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
 
 							3.【环保短片】震撼环保公益短片《致我们的地球》- 这部短片通过震撼的画面和内容，强调了环保问题的重要性。
 							https://www.bilibili.com/video/BV1ZD4y1U7H7/ `;
-							type = 0;
-							this.chatList.push({
-								role:"ai",
-								content:aiContent,
-								type:type,
-								time:new Date().toLocaleString().replace(/\//ig,'-')
-							})
-					}
-					if(!this.imageCheck&&!this.videoCheck){
-						this.chatList.push({
-							role:"ai",
-							content:aiContent,
-							type:type,
-							time:new Date().toLocaleString().replace(/\//ig,'-')
-						})
-					}
-
+          type = 0;
+          this.chatList[this.chatList.length - 1].content = aiContent;
+          this.chatList[this.chatList.length - 1].type = type;
+          this.chatList[
+            this.chatList.length - 1
+          ].time = new Date().toLocaleString().replace(/\//gi, "-");
+          // this.chatList.push({
+          // 	role:"ai",
+          // 	content:aiContent,
+          // 	type:type,
+          // 	time:new Date().toLocaleString().replace(/\//ig,'-')
+          // })
+        }
+        if (!this.imageCheck && !this.videoCheck) {
+					this.chatList[this.chatList.length-1].content = aiContent;
+					this.chatList[this.chatList.length-1].type = type;
+					this.chatList[this.chatList.length-1].time = new Date().toLocaleString().replace(/\//ig,'-');
 					this.text = "";
-					this.$nextTick(() => {
-					  this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
-					});
-					this.loading = false;
-				},5000)
-				// this.chatList.push({
-				// 	role:"user",
-				// 	content:this.text,
-				// 	time:"2023-11-11 11:10:11"
-				// },{
-				// 	role:"ai",
-				// 	content:`小朋友，你真棒！`,//这里需要调用接口
-				// 	time:"2023-11-11 11:10:11"
-				// })
-				// this.text = "";
-				// // 元素滚动条触底
-				// this.$nextTick(() => {
-				//   this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
-				// });
-			},
-			sendAiIdea(text){
-				this.text = text;
-				this.send();
-			},
-			sendImage(){
-				this.$message.info("发送图片")
-			},
-			sendVideo(){
-				this.$message.info("发送视频")
-			},
-		},
-	}
+          // this.chatList.push({
+          //   role: "ai",
+          //   content: aiContent,
+          //   type: type,
+          //   time: new Date().toLocaleString().replace(/\//gi, "-")
+          // });
+        }
+        this.$nextTick(() => {
+          this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+        });
+        this.loading = false;
+      }, 5000);
+      // this.chatList.push({
+      // 	role:"user",
+      // 	content:this.text,
+      // 	time:"2023-11-11 11:10:11"
+      // },{
+      // 	role:"ai",
+      // 	content:`小朋友，你真棒！`,//这里需要调用接口
+      // 	time:"2023-11-11 11:10:11"
+      // })
+      // this.text = "";
+      // // 元素滚动条触底
+      // this.$nextTick(() => {
+      //   this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+      // });
+    },
+    sendAiIdea(text) {
+			if (this.loading) return this.$message.info("请稍等");
+      this.text = text;
+      this.send();
+    },
+    sendImage() {
+      this.$message.info("发送图片");
+    },
+    sendVideo() {
+      this.$message.info("发送视频");
+    }
+  }
+};
 </script>
 
 <style scoped>
-.search{
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
+.search {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-.s_top{
-	width: 100%;
-	height: calc(100% - 90px);
-	overflow-x: hidden;
-	box-sizing: border-box;
-	padding: 20px 0;
+.s_top {
+  width: 100%;
+  height: calc(100% - 90px);
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 20px 0;
 }
 
-.s_t_chat{
-	width: 100%;
-	display: flex;
-	box-sizing: border-box;
-	padding: 10px;
+.s_t_chat {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 10px;
 }
 
-.s_t_chat>div{
-	display: flex;
-	align-items: flex-start;
-	width: 100%;
+.s_t_chat > div {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
 }
 
-.s_t_c_user{
-	box-sizing: border-box;
-	padding-left: 35px;
+.s_t_c_user {
+  box-sizing: border-box;
+  padding-left: 35px;
 }
 
-.s_t_c_u_left{
-	width: 90%;
-	height: auto;
+.s_t_c_u_left {
+  width: 90%;
+  height: auto;
 }
 
-.s_t_c_u_l_content{
-	width: auto;
-	max-width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	padding: 10px;
-	color: white;
-	background-color: #3681FC;
-	border-radius: 8px 2px 8px 8px;
+.s_t_c_u_l_content {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  color: white;
+  background-color: #3681fc;
+  border-radius: 8px 2px 8px 8px;
   white-space: pre-line;
-	word-break: break-all;
+  word-break: break-all;
 }
 
-
-.s_t_c_a_r_contentImage>span{
-	display: block;
+.s_t_c_a_r_contentImage > span {
+  display: block;
 }
 
-.s_t_c_a_r_contentImage>img{
-	width: 45%;
-	height: 125px;
-	margin: 1% 1.5%;
-	cursor: pointer;
+.s_t_c_a_r_contentImage > img {
+  width: 45%;
+  height: 125px;
+  margin: 1% 1.5%;
+  cursor: pointer;
 }
 
-.s_t_c_a_r_contentImage{
-	width: auto;
-	max-width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	padding: 10px;
-	background-color: #F6F8FF;
-	border-radius: 2px 8px 8px 8px;
+.s_t_c_a_r_contentImage {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  background-color: #f6f8ff;
+  border-radius: 2px 8px 8px 8px;
   white-space: pre-line;
-	word-break: break-all;
+  word-break: break-all;
 }
 
-.s_t_c_u_l_time{
-	width: 100%;
-	display: flex;
-	justify-content: flex-end;
-	font-size: 12px;
-	color: #9F9F9F;
-	margin-top: 5px;
+.s_t_c_u_l_time {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+  color: #9f9f9f;
+  margin-top: 5px;
 }
 
-.s_t_c_u_right{
-	width: 35px;
-	height: 35px;
-	display: flex;
-	justify-content: center;
-	margin-left: 5px
+.s_t_c_u_right {
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  margin-left: 5px;
 }
 
-.s_t_c_u_right>span{
-	width: 32px;
-	height: 32px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	color: white;
-	background-color: #3681FC;
-	border-radius: 50%;;
+.s_t_c_u_right > span {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: #3681fc;
+  border-radius: 50%;
 }
 
-.s_t_c_ai{
-	box-sizing: border-box;
-	padding-right: 35px;
+.s_t_c_ai {
+  box-sizing: border-box;
+  padding-right: 35px;
 }
 
-.s_t_c_a_right{
-	min-width: 90%;
-	height: auto;
+.s_t_c_a_right {
+  min-width: 90%;
+  height: auto;
 }
 
-.s_t_c_a_r_content{
-	width: auto;
-	max-width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	padding: 10px;
-	background-color: #F6F8FF;
-	border-radius: 2px 8px 8px 8px;
+.s_t_c_a_r_content {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  background-color: #f6f8ff;
+  border-radius: 2px 8px 8px 8px;
   white-space: pre-line;
-	word-break: break-all;
-}
-
-.s_t_c_a_r_content2{
-	background-color: #F6F8FF;
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	padding: 10px;
-	border-radius: 2px 8px 8px 8px;
-	box-shadow: 0 0px 10px #c5cbee;
-}
-
-.s_t_c_a_r_c_title{
-	display: flex;
-	align-items: center;
-}
-.s_t_c_a_r_c_title>img{
-	width: 16px;
-	height: 16px;
-}
-
-.s_t_c_a_r_c_item{
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	padding: 10px;
-	background-color: #FFFFFF;
-	border-radius: 5px;
-	margin-top: 5px;
-	color: #666666;
-	font-size: 14px;
-	cursor: pointer;
-}
-
-.s_t_c_a_r_c_item:hover{
-	border: solid #B8D2FE 1px;
-	box-shadow: 0 0 5px 2px #B8D2FE;
-}
-
-.s_t_c_a_r_c_title>span{
-	font-weight: bold;
-}
-
-
-.s_t_c_a_r_time{
-	width: 100%;
-	display: flex;
-	justify-content: flex-start;
-	font-size: 12px;
-	color: #9F9F9F;
-	margin-top: 5px;
-}
-
-.s_t_c_a_left{
-	width: 35px;
-	height: 35px;
-	display: flex;
-	justify-content: center;
-	margin-right: 5px
-}
-
-.s_t_c_a_left>span{
-	width: 32px;
-	height: 32px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	color: white;
-	background-color: #3681FC;
-	border-radius: 50%;
-}
-
-.s_bottom{
-	width: 100%;
-	height: 90px;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-.s_b_btnArea{
-	width: 100%;
-	height: 30px;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	padding: 0 10px;
-}
-
-.s_b_ba-item{
-	width: auto;
-	box-sizing: border-box;
-	padding: 0 10px;
-	height: 25px;
-	background-color: white;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	/* 阴影 */
-	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
-	border-radius: 15px;
-	font-size: 14px;
-	cursor: pointer;
-	margin-right: 10px;
-}
-
-
-.s_b_inputArea{
-	width: 100%;
-	height: 55px;
-	box-sizing: border-box;
-	border-top: solid 1px #EDEDED;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.s_b_tape{
-	width: 35px;
-	height: 35px;
-	background: url("../../../assets/icon/course/tape.png") no-repeat;
-	background-size: 50% 60%;
-	background-position: center;
-	cursor: pointer;
-}
-
-.s_b_input{
-	width: 65%;
-	height: 45px;
-	background-color: #F3F3F3;
-	border-radius: 50px;
-	margin: 0 10px;
-	display: flex;
-	align-items: center;
-}
-
-.s_b_i_left{
-	width: calc(100% - 45px);
-	height: 100%;
-}
-
-.s_b_i_left>>>.el-input__inner{
-	border: none;
-	background-color: #F3F3F3;
-	outline: none;
-	border-radius: 50px 0 0 50px;
-}
-
-
-.s_b_i_right{
-	width: 45px;
-	height: 45px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.s_b_i_right>span{
-	width: 35px;
-	height: 35px;
-	background: url("../../../assets/icon/course/file.png") no-repeat;
-	background-size: 50% 60%;
-	background-position: center;
-	cursor: pointer;
-}
-
-.s_b_btn{
-	width: 40px;
-	height: 40px;
-	background-color: #3681FC;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 50%;
-	cursor: pointer;
-}
-
-.s_b_btn>span{
-	width: 30px;
-	height: 30px;
-	background: url("../../../assets/icon/course/send.png") no-repeat;
-	background-size: 70% 70%;
-	background-position: center;
-	
-}
-
-
-
-</style>
+  word-break: break-all;
+}
+
+.s_t_c_a_r_content2 {
+  background-color: #f6f8ff;
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 2px 8px 8px 8px;
+  box-shadow: 0 0px 10px #c5cbee;
+}
+
+.s_t_c_a_r_c_title {
+  display: flex;
+  align-items: center;
+}
+.s_t_c_a_r_c_title > img {
+  width: 16px;
+  height: 16px;
+}
+
+.s_t_c_a_r_c_item {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  margin-top: 10px;
+  color: #666666;
+  font-size: 14px;
+  cursor: pointer;
+  border: solid #ffffff 1px;
+  box-shadow: 0 0 5px 2px #ffffff;
+}
+
+.s_t_c_a_r_c_item:hover {
+  border: solid #b8d2fe 1px;
+  box-shadow: 0 0 5px 2px #b8d2fe;
+}
+
+.s_t_c_a_r_c_title > span {
+  font-weight: bold;
+}
+
+.s_t_c_a_r_time {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  font-size: 12px;
+  color: #9f9f9f;
+  margin-top: 5px;
+}
+
+.s_t_c_a_left {
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  margin-right: 5px;
+}
+
+.s_t_c_a_left > span {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: #3681fc;
+  border-radius: 50%;
+}
+
+.s_bottom {
+  width: 100%;
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.s_b_btnArea {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.s_b_ba-item {
+  width: auto;
+  box-sizing: border-box;
+  padding: 0 10px;
+  height: 25px;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 阴影 */
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
+  border-radius: 15px;
+  font-size: 14px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.s_b_inputArea {
+  width: 100%;
+  height: 55px;
+  box-sizing: border-box;
+  border-top: solid 1px #ededed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.s_b_tape {
+  width: 35px;
+  height: 35px;
+  background: url("../../../assets/icon/course/tape.png") no-repeat;
+  background-size: 50% 60%;
+  background-position: center;
+  cursor: pointer;
+}
+
+.s_b_input {
+  width: 65%;
+  height: 45px;
+  background-color: #f3f3f3;
+  border-radius: 50px;
+  margin: 0 10px;
+  display: flex;
+  align-items: center;
+}
+
+.s_b_i_left {
+  width: calc(100% - 45px);
+  height: 100%;
+}
+
+.s_b_i_left >>> .el-input__inner {
+  border: none;
+  background-color: #f3f3f3;
+  outline: none;
+  border-radius: 50px 0 0 50px;
+}
+
+.s_b_i_right {
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.s_b_i_right > span {
+  width: 35px;
+  height: 35px;
+  background: url("../../../assets/icon/course/file.png") no-repeat;
+  background-size: 50% 60%;
+  background-position: center;
+  cursor: pointer;
+}
+
+.s_b_btn {
+  width: 40px;
+  height: 40px;
+  background-color: #3681fc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.s_b_btn > span {
+  width: 30px;
+  height: 30px;
+  background: url("../../../assets/icon/course/send.png") no-repeat;
+  background-size: 70% 70%;
+  background-position: center;
+}
+</style>

src/components/classRoomHelper/component/taskArea.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="task" v-loading="loading">
+	<div class="task">
 		<div class="taskTop">
 			<div class="tt_title">任务时间分配</div>
 			<div class="tt_item">
@@ -66,7 +66,7 @@
 						<span>Ai</span>
 					</div>
 					<div class="t_t_c_a_right">
-						<div class="t_t_c_a_r_content" v-html="item.content"></div>
+						<div class="t_t_c_a_r_content" v-loading="loading && index == chatList.length - 1" v-html="item.content"></div>
 						<div class="t_t_c_a_r_time">{{item.time}}</div>
 					</div>
 					
@@ -77,15 +77,15 @@
 		<div class="t_bottom">
 			<div class="t_b_btnArea">
 				<!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
-				<div class="t_b_ba-item" @click="sendType('智能总结')">智能总结</div>
-				<div class="t_b_ba-item" @click="sendType('智能出题')">智能出题</div>
-				<div class="t_b_ba-item" @click="sendType('优秀标兵')">优秀标兵</div>
-				<div class="t_b_ba-item" @click="sendType('扩展知识')">扩展知识</div>
+				<div class="t_b_ba_item" @click="sendType('智能总结')">智能总结</div>
+				<div class="t_b_ba_item" @click="sendType('智能出题')">智能出题</div>
+				<div class="t_b_ba_item" @click="sendType('优秀标兵')">优秀标兵</div>
+				<div class="t_b_ba_item" @click="sendType('扩展知识')">扩展知识</div>
 			</div>
 			<div class="t_b_inputArea">
 				<div class="t_b_tape" @click="goTape()"></div>
 				<div class="t_b_input">
-					<el-input class="t_b_i_left" v-model="text"></el-input>
+					<el-input :disabled="loading" @keyup.enter.native="send()" class="t_b_i_left" v-model="text"></el-input>
 					<div class="t_b_i_right" @click="sendFile()">
 						<span></span>
 					</div>
@@ -132,20 +132,33 @@
 				this.cardType = 1;
 			},
 			sendFile(){
+				if (this.loading) return this.$message.info("请稍等");
 				this.$message.info("点击了附件")
 			},
 			goTape(){
+				if (this.loading) return this.$message.info("请稍等");
 				this.$message.info(`点击了语音`)
 			},
 			send(){
+				if (this.loading) return this.$message.info("请稍等");
+				if(this.text.trim().length==0)return this.$message.info("请输入内容")
 				this.loading = true;
-
+				this.chatList.push({
+					role:"user",
+					content:this.text,
+					time:new Date().toLocaleString().replace(/\//ig,'-')
+				})
+				
+				this.chatList.push({
+					role:"ai",
+					content:"",
+					time:new Date().toLocaleString().replace(/\//ig,'-')
+				})
+				this.$nextTick(() => {
+				  this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
+				});;
 				setTimeout(()=>{
-					this.chatList.push({
-						role:"user",
-						content:this.text,
-						time:new Date().toLocaleString().replace(/\//ig,'-')
-					})
+					
 
 					let aiContent="对不起，这个问题我回答不了。"
 
@@ -198,11 +211,15 @@ b.学生可以创建一个“绿色挑战”活动，鼓励家庭成员减少垃
 通过这些扩展活动，学生不仅能够加深对垃圾问题的理解，还能学习到如何在日常生活中实际应用这些知识，从而更有效地保护我们的环境。`;
 							break;
 					}
-					this.chatList.push({
-						role:"ai",
-						content:aiContent,
-						time:new Date().toLocaleString().replace(/\//ig,'-')
-					})
+					this.chatList[this.chatList.length - 1].content = aiContent;
+          this.chatList[
+            this.chatList.length - 1
+          ].time = new Date().toLocaleString().replace(/\//gi, "-");
+					// this.chatList.push({
+					// 	role:"ai",
+					// 	content:aiContent,
+					// 	time:new Date().toLocaleString().replace(/\//ig,'-')
+					// })
 					this.text = "";
 					this.$nextTick(() => {
 					  this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
@@ -225,6 +242,8 @@ b.学生可以创建一个“绿色挑战”活动，鼓励家庭成员减少垃
 				// });;
 			},
 			sendType(text){
+				
+				if (this.loading) return this.$message.info("请稍等");
 				this.text = text;
 				this.send();
 			},
@@ -305,6 +324,7 @@ b.学生可以创建一个“绿色挑战”活动，鼓励家庭成员减少垃
 	height: 30px;
 	display: flex;
 	justify-content: center;
+	align-items: center;
 	box-sizing: border-box;
 	border: solid 1px #E0EAFB;
 	color: #626466;
@@ -530,7 +550,7 @@ b.学生可以创建一个“绿色挑战”活动，鼓励家庭成员减少垃
 	overflow-y: hidden;
 }
 
-.t_b_ba-item{
+.t_b_ba_item{
 	width: auto;
 	box-sizing: border-box;
 	padding: 0 10px;
@@ -546,6 +566,11 @@ b.学生可以创建一个“绿色挑战”活动，鼓励家庭成员减少垃
 	cursor: pointer;
 	margin-right: 10px;
 	white-space: nowrap;
+	transition: .3s;
+}
+
+.t_b_ba_item:hover{
+	background-color: rgb(236, 236, 236);
 }