美化ai对话框

src/components/AIChatter/AIChatter.module.scss

@@ -49,21 +49,41 @@
     left: 10px;
     right: 10px;
     height: 10%;
+    //background-color: red;
 
     .input-group {
       display: flex;
       align-items: center;
 
-      border: 1px solid #d9d9d9;
+      //border: 1px solid #d9d9d9;
+      border: 1px solid #ececec;
       border-radius: 5px;
+      //background-color: red;
 
-      .button {
-        width: 20px;
-        &:hover {
-          background-color: #d9d9d9;
-        }
+      & .button {
+        width: 140px;
+        //&:hover {
+        //  background-color: #d9d9d9;
+        //}
       }
     }
   }
 
 }
+
+//  .question-box {
+//    height: 10%;
+//
+//    .input-group {
+//            border: 1px solid #d9d9d9;
+//            border-radius: 5px;
+//      .button {
+//        width: 40px;
+//        &:hover {
+//          background-color: #d9d9d9;
+//        }
+//      }
+//    }
+//  }
+//
+//}

src/components/AIChatter/AIChatter.vue

@@ -53,22 +53,19 @@
         <el-input
             v-model="data.questionContent"
             ref="inputRef"
-            type="textarea"
-            :autosize="{ minRows: 1, maxRows: 2 }"
             :placeholder="`Message ${data.model} ...`"
-        />
-<!--        <el-spin v-if="data.loading" style="margin-right: 10px" />-->
+        >
+        </el-input>
         <el-button
-            type="text"
             :disabled="data.questionContent === ''"
             @click="handleSendQuestion"
-            :class="$style.button"
+            style="width: 40px; border: none"
             v-loading="data.loading"
         >
-          <el-icon v-if="!data.loading"><Top/></el-icon>
+          <el-icon><Top/></el-icon>
         </el-button>
         <el-dropdown @command="handleMenuClick">
-          <el-button type="text" :class="$style.button">
+          <el-button type="text" style="width: 40px;">
             <el-icon><ArrowDown/></el-icon>
           </el-button>
           <template #dropdown>
@@ -96,6 +93,17 @@
   import {onMounted, reactive, ref, defineProps, watch, onUnmounted} from "vue";
   import {ArrowDown, Top} from '@element-plus/icons-vue'
 
+  const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="fill: rgba(0, 0, 0, 0)"/>
+      `
+
   interface IProps {
     dialogueId: string;
     messages: IDialogue[]