feat: 实现部分聊天机器人样式

src/views/AIRobotChat/src/AIRobotChat.vue

@@ -60,6 +60,13 @@ const progressStatus = {
 
 const progressInterval = ref()
 const handleSend = () => {
+  if (!inputVModel.value) return
+  messages.value.push({
+    type: 'user',
+    content: inputVModel.value
+  })
+  inputVModel.value = ''
+  textareaRef.value.style.height = '29px' // 重置高度
   queryTime.value = 0
   messages.value.push({
     type: 'robot',
@@ -106,6 +113,13 @@ const handlePause = () => {
   queryTime.value = -2
   messages.value[messages.value.length - 1].content = progressStatus.cancel
 }
+
+const emit = defineEmits(['close'])
+// 关闭聊天窗口
+const handleClose = () => {
+  progressInterval.value && clearInterval(progressInterval.value)
+  emit('close')
+}
 </script>
 
 <template>
@@ -124,7 +138,7 @@ const handlePause = () => {
             class="font_family icon-icon_maximized__window_b"
             @click="modalSize = 'large'"
           ></span>
-          <span class="font_family icon-icon_collapsed__to_widget_b"></span>
+          <span @click="handleClose" class="font_family icon-icon_collapsed__to_widget_b"></span>
         </div>
       </div>
     </div>
@@ -140,6 +154,13 @@ const handlePause = () => {
         v-for="(msg, index) in messages"
         :key="index"
       >
+        <!-- 请求失败后的提示icon -->
+        <span
+          v-if="queryTime === -3 && index === messages.length - 1"
+          class="font_family icon-icon_warning_fill_b"
+          style="margin-top: 1px; color: #c9353f"
+        ></span>
+        <!-- loading icon -->
         <img
           class="loading-img"
           v-if="queryTime > -1 && queryTime < 120 && index === messages.length - 1"
@@ -159,9 +180,10 @@ const handlePause = () => {
           src="./image/userBubbleLight.png"
           alt=""
         />
+        <!-- 暂停回答 icon -->
         <div
           class="pause-btn"
-          v-if="index === messages.length && queryTime > 30 && queryTime < 120"
+          v-if="index === messages.length - 1 && queryTime > 30 && queryTime < 120"
           @click="handlePause"
         >
           <div class="dot"></div>
@@ -180,7 +202,11 @@ const handlePause = () => {
         @focus="isFooterInputFocus = true"
         @blur="isFooterInputFocus = false"
       />
-      <div class="input-icon" :class="[inputVModel ? 'input-style' : '']" @click="handleSend">
+      <div
+        class="input-icon"
+        :class="[inputVModel ? 'input-style' : 'disable']"
+        @click="handleSend"
+      >
         <span class="font_family icon-icon_send_b"></span>
       </div>
     </div>
@@ -308,6 +334,9 @@ const handlePause = () => {
       padding: 1px 0 0 2px;
       border-radius: 50%;
       cursor: pointer;
+      &.disable {
+        cursor: not-allowed;
+      }
     }
     .input-style {
       background-color: var(--color-theme);

src/views/Layout/src/LayoutView.vue

@@ -14,6 +14,11 @@ const handleMenuCollapse = (val: boolean) => {
   isCollapse.value = val
   val ? (leftAsideWidth.value = '64px') : (leftAsideWidth.value = '232px')
 }
+
+const isShowAIRobotChat = ref(true)
+const handleColseRobotChat = () => {
+  isShowAIRobotChat.value = false
+}
 </script>
 <template>
   <el-container class="layout-container">
@@ -44,7 +49,7 @@ const handleMenuCollapse = (val: boolean) => {
       </el-main>
     </el-container>
     <!-- <AIRobot></AIRobot> -->
-    <AIRobotChat></AIRobotChat>
+    <AIRobotChat v-if="isShowAIRobotChat" @close="handleColseRobotChat"></AIRobotChat>
     <ScoringGrade></ScoringGrade>
   </el-container>
 </template>