fix: AI回复头像调整(#1592)

1Panel-dev · Nov 13, 2024 · d1002f4 · d1002f4
1 parent 1a1e932
commit d1002f4
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 189 deletions.
diff --git a/ui/src/components/ai-chat/component/answer-content/index.vue b/ui/src/components/ai-chat/component/answer-content/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="item-content mb-16 lighter">
-    <div v-for="(answer_text, index) in chatRecord.answer_text_list">
+    <div v-for="(answer_text, index) in chatRecord.answer_text_list" :key="index">
       <div class="avatar">
-        <img v-if="application.avatar" :src="application.avatar" height="30px" />
-        <LogoIcon v-else height="30px" />
+        <img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
+        <LogoIcon v-else height="32px" width="32px" />
       </div>
       <div class="content">
         <el-card shadow="always" class="dialog-card">
@@ -23,17 +23,17 @@
             <KnowledgeSource :data="chatRecord" :type="application.type" />
           </div>
         </el-card>
+        <OperationButton
+          :type="type"
+          :application="application"
+          :chat-record="chatRecord"
+          :loading="loading"
+          :start-chat="startChat"
+          :stop-chat="stopChat"
+          :regenerationChart="regenerationChart"
+        ></OperationButton>
       </div>
     </div>
-    <OperationButton
-      :type="type"
-      :application="application"
-      :chat-record="chatRecord"
-      :loading="loading"
-      :start-chat="startChat"
-      :stop-chat="stopChat"
-      :regenerationChart="regenerationChart"
-    ></OperationButton>
   </div>
 </template>
 <script setup lang="ts">
@@ -80,15 +80,4 @@ const startChat = (chat: chatType) => {
   props.chatManagement.write(chat.id)
 }
 </script>
-<style lang="scss" scoped>
-.avatar {
-  float: left;
-}
-.content {
-  padding-left: var(--padding-left);
-
-  :deep(ol) {
-    margin-left: 16px !important;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -1,5 +1,4 @@
 <template>
-  <div></div>
   <div class="ai-chat__operate p-16-24">
     <slot name="operateBefore" />
     <div class="operate-textarea flex chat-width">
@@ -316,77 +315,5 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scope>
-.ai-chat {
-  &__operate {
-    background: #f3f7f9;
-    position: relative;
-    width: 100%;
-    box-sizing: border-box;
-    z-index: 10;
-
-    &:before {
-      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
-      content: '';
-      position: absolute;
-      width: 100%;
-      top: -16px;
-      left: 0;
-      height: 16px;
-    }
-
-    .operate-textarea {
-      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
-      background-color: #ffffff;
-      border-radius: 8px;
-      border: 1px solid #ffffff;
-      box-sizing: border-box;
-
-      &:has(.el-textarea__inner:focus) {
-        border: 1px solid var(--el-color-primary);
-      }
-
-      .el-textarea__inner {
-        border-radius: 8px !important;
-        box-shadow: none;
-        resize: none;
-        padding: 12px 16px;
-        box-sizing: border-box;
-      }
-
-      .operate {
-        padding: 6px 10px;
-        .el-icon {
-          font-size: 20px;
-        }
-
-        .sent-button {
-          max-height: none;
-          .el-icon {
-            font-size: 24px;
-          }
-        }
-
-        .el-loading-spinner {
-          margin-top: -15px;
-
-          .circular {
-            width: 31px;
-            height: 31px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.chat-width {
-  max-width: 80%;
-  margin: 0 auto;
-}
-@media only screen and (max-width: 1000px) {
-  .chat-width {
-    max-width: 100% !important;
-    margin: 0 auto;
-  }
-}
+@import '../../index.scss';
 </style>
diff --git a/ui/src/components/ai-chat/component/prologue-content/index.vue b/ui/src/components/ai-chat/component/prologue-content/index.vue
@@ -2,8 +2,8 @@
   <!-- 开场白组件 -->
   <div class="item-content mb-16">
     <div class="avatar">
-      <img v-if="application.avatar" :src="application.avatar" height="30px" />
-      <LogoIcon v-else height="30px" />
+      <img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
+      <LogoIcon v-else height="32px" width="32px" />
     </div>
     <div class="content">
       <el-card shadow="always" class="dialog-card">
@@ -32,4 +32,5 @@ const prologue = computed(() => {
   return temp.replace(/-\s.+/g, toQuickQuestion)
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+</style>
diff --git a/ui/src/components/ai-chat/component/question-content/index.vue b/ui/src/components/ai-chat/component/question-content/index.vue
@@ -7,10 +7,10 @@
         :src="application.user_avatar"
         alt=""
         fit="cover"
-        style="width: 30px; height: 30px; display: block"
+        style="width: 32px; height: 32px; display: block"
       />
       <AppAvatar v-else>
-        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+        <img src="@/assets/user-icon.svg" style="width: 50%" alt="" />
       </AppAvatar>
     </div>
     <div class="content">
@@ -28,54 +28,4 @@ defineProps<{
 }>()
 </script>
 <style lang="scss" scoped>
-.ai-chat {
-  &__content {
-    padding-top: 0;
-    box-sizing: border-box;
-
-    .avatar {
-      float: left;
-    }
-
-    .content {
-      padding-left: var(--padding-left);
-
-      :deep(ol) {
-        margin-left: 16px !important;
-      }
-    }
-
-    .text {
-      padding: 6px 0;
-    }
-
-    .problem-button {
-      width: 100%;
-      border: none;
-      border-radius: 8px;
-      background: var(--app-layout-bg-color);
-      height: 46px;
-      padding: 0 12px;
-      line-height: 46px;
-      box-sizing: border-box;
-      color: var(--el-text-color-regular);
-      -webkit-line-clamp: 1;
-      word-break: break-all;
-
-      &:hover {
-        background: var(--el-color-primary-light-9);
-      }
-
-      &.disabled {
-        &:hover {
-          background: var(--app-layout-bg-color);
-        }
-      }
-
-      .el-icon {
-        color: var(--el-color-primary);
-      }
-    }
-  }
-}
 </style>
diff --git a/ui/src/components/ai-chat/component/user-form/index.vue b/ui/src/components/ai-chat/component/user-form/index.vue
@@ -290,15 +290,4 @@ onMounted(() => {
   handleInputFieldList()
 })
 </script>
-<style lang="scss" scoped>
-.chat-width {
-  max-width: 80%;
-  margin: 0 auto;
-}
-@media only screen and (max-width: 1000px) {
-  .chat-width {
-    max-width: 100% !important;
-    margin: 0 auto;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/ai-chat/index.scss b/ui/src/components/ai-chat/index.scss
@@ -0,0 +1,129 @@
+.ai-chat {
+  --padding-left: 40px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  color: var(--app-text-color);
+  box-sizing: border-box;
+  &__content {
+    padding-top: 0;
+    box-sizing: border-box;
+
+    .avatar {
+      float: left;
+    }
+
+    .content {
+      padding-left: var(--padding-left);
+
+      :deep(ol) {
+        margin-left: 16px !important;
+      }
+    }
+
+    .text {
+      padding: 6px 0;
+    }
+
+    .problem-button {
+      width: 100%;
+      border: none;
+      border-radius: 8px;
+      background: var(--app-layout-bg-color);
+      height: 46px;
+      padding: 0 12px;
+      line-height: 46px;
+      box-sizing: border-box;
+      color: var(--el-text-color-regular);
+      -webkit-line-clamp: 1;
+      word-break: break-all;
+
+      &:hover {
+        background: var(--el-color-primary-light-9);
+      }
+
+      &.disabled {
+        &:hover {
+          background: var(--app-layout-bg-color);
+        }
+      }
+
+      .el-icon {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+  &__operate {
+    background: #f3f7f9;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
+
+    &:before {
+      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
+      content: '';
+      position: absolute;
+      width: 100%;
+      top: -16px;
+      left: 0;
+      height: 16px;
+    }
+
+    .operate-textarea {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
+
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      .el-textarea__inner {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 12px 16px;
+        box-sizing: border-box;
+      }
+
+      .operate {
+        padding: 6px 10px;
+        .el-icon {
+          font-size: 20px;
+        }
+
+        .sent-button {
+          max-height: none;
+          .el-icon {
+            font-size: 24px;
+          }
+        }
+
+        .el-loading-spinner {
+          margin-top: -15px;
+
+          .circular {
+            width: 31px;
+            height: 31px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.chat-width {
+  max-width: 80%;
+  margin: 0 auto;
+}
+@media only screen and (max-width: 1000px) {
+  .chat-width {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}