style: Optimize chat page style

Author: wangdan-fit2cloud

ui/src/components/ai-chat/component/answer-content/index.vue

@@ -6,7 +6,7 @@
         <LogoIcon v-else height="32px" width="32px" />
       </div>
       <div class="content" @mouseup="openControl">
-        <el-card shadow="always" class="dialog-card mb-8">
+        <el-card shadow="always" class="mb-8 border-r-8">
           <MdRenderer
             v-if="
               (chatRecord.write_ed === undefined || chatRecord.write_ed === true) &&
@@ -27,10 +27,10 @@
               :send-message="chatMessage"
             ></MdRenderer>
           </template>
-          <span v-else-if="chatRecord.is_stop" shadow="always" class="dialog-card">
+          <span v-else-if="chatRecord.is_stop" shadow="always">
             {{ $t('chat.tip.stopAnswer') }}
           </span>
-          <span v-else shadow="always" class="dialog-card">
+          <span v-else shadow="always">
             {{ $t('chat.tip.answerLoading') }} <span class="dotting"></span>
           </span>
           <!-- 知识来源 -->

ui/src/components/ai-chat/component/prologue-content/index.vue

@@ -6,7 +6,7 @@
       <LogoIcon v-else height="32px" width="32px" />
     </div>
     <div class="content" v-if="prologue">
-      <el-card shadow="always" class="dialog-card" style="--el-card-padding: 10px 16px 12px">
+      <el-card shadow="always" class="border-r-8" style="--el-card-padding: 10px 16px 12px">
         <MdRenderer
           :source="prologue"
           :send-message="sendMessage"

ui/src/components/ai-chat/component/question-content/index.vue

@@ -1,20 +1,14 @@
 <template>
   <!-- 问题内容 -->
   <div class="question-content item-content mb-16 lighter">
-    <div class="content mr-16">
+    <div
+      class="content mr-12 p-12-16 border-r-8"
+      :class="document_list.length >= 2 ? 'media_2' : `media_${document_list.length}`"
+    >
       <div class="text break-all pre-wrap">
         <div class="mb-8" v-if="document_list.length">
-          <el-row :gutter="10">
-            <el-col
-              v-for="(item, index) in document_list"
-              :key="index"
-              :xs="24"
-              :sm="props.type === 'debug-ai-chat' ? 24 : 12"
-              :md="props.type === 'debug-ai-chat' ? 24 : 12"
-              :lg="props.type === 'debug-ai-chat' ? 24 : 12"
-              :xl="props.type === 'debug-ai-chat' ? 24 : 12"
-              class="mb-8 w-full"
-            >
+          <el-space wrap class="w-full media-file-width">
+            <template v-for="(item, index) in document_list" :key="index">
               <el-card shadow="never" style="--el-card-padding: 8px" class="download-file cursor">
                 <div class="download-button flex align-center" @click="downloadFile(item)">
                   <el-icon class="mr-4">
@@ -29,8 +23,8 @@
                   </div>
                 </div>
               </el-card>
-            </el-col>
-          </el-row>
+            </template>
+          </el-space>
         </div>
         <div class="mb-8" v-if="image_list.length">
           <el-space wrap>
@@ -53,17 +47,8 @@
           </el-space>
         </div>
         <div class="mb-8" v-if="audio_list.length">
-          <el-row :gutter="10">
-            <el-col
-              v-for="(item, index) in audio_list"
-              :key="index"
-              :xs="24"
-              :sm="props.type === 'debug-ai-chat' ? 24 : 12"
-              :md="props.type === 'debug-ai-chat' ? 24 : 12"
-              :lg="props.type === 'debug-ai-chat' ? 24 : 12"
-              :xl="props.type === 'debug-ai-chat' ? 24 : 12"
-              class="mb-8"
-            >
+          <el-space wrap>
+            <template v-for="(item, index) in audio_list" :key="index">
               <div class="file cursor border-r-4" v-if="item.url">
                 <audio
                   :src="item.url"
@@ -72,10 +57,10 @@
                   class="border-r-4"
                 />
               </div>
-            </el-col>
-          </el-row>
+            </template>
+          </el-space>
         </div>
-        {{ chatRecord.problem_text }}
+        <span> {{ chatRecord.problem_text }}</span>
       </div>
     </div>
     <div class="avatar">
@@ -140,6 +125,16 @@ onMounted(() => {})
 .question-content {
   display: flex;
   justify-content: flex-end;
+  padding-left: var(--padding-left);
+  width: 100%;
+  box-sizing: border-box;
+
+  .content {
+    background: #d6e2ff;
+    padding-left: 16px;
+    padding-right: 16px;
+
+  }
 
   .download-file {
     height: 43px;
@@ -163,5 +158,44 @@ onMounted(() => {})
       display: none;
     }
   }
+  .media-file-width {
+    :deep(.el-space__item) {
+      min-width: 40% !important;
+      flex-grow: 1;
+    }
+  }
+  .media_2 {
+    flex: 1;
+  }
+  .media_0 {
+    flex: inherit;
+  }
+  .media_1 {
+    width: 50%;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .question-content {
+    .media-file-width {
+      :deep(.el-space__item) {
+        min-width: 100% !important;
+      }
+    }
+    .media_1 {
+      width: 100%;
+    }
+  }
+}
+.debug-ai-chat {
+  .question-content {
+    .media-file-width {
+      :deep(.el-space__item) {
+        min-width: 100% !important;
+      }
+    }
+    .media_1 {
+      width: 100%;
+    }
+  }
 }
 </style>

ui/src/components/ai-chat/component/user-form/index.vue

@@ -7,7 +7,7 @@
     class="mb-16"
     style="padding: 0 24px"
   >
-    <el-card shadow="always" class="dialog-card" style="--el-card-padding: 16px 8px">
+    <el-card shadow="always" class="border-r-8" style="--el-card-padding: 16px 8px">
       <div
         class="flex align-center cursor w-full"
         style="padding: 0 8px"

ui/src/components/ai-chat/index.scss

@@ -17,15 +17,12 @@
 
     .content {
       padding-left: var(--padding-left);
+      padding-right: var(--padding-left);
 
       :deep(ol) {
         margin-left: 16px !important;
       }
     }
-
-    .text {
-      padding: 6px 0;
-    }
   }
   &__operate {
     background: #f3f7f9;

ui/src/components/ai-chat/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="aiChatRef" class="ai-chat" :class="type == 'log' ? 'chart-log' : ''">
+  <div ref="aiChatRef" class="ai-chat" :class="type">
     <UserForm
       v-model:api_form_data="api_form_data"
       v-model:form_data="form_data"

ui/src/styles/app.scss

@@ -311,6 +311,9 @@ h5 {
 .border-r-4 {
   border-radius: 4px;
 }
+.border-r-8 {
+  border-radius: 8px;
+}
 
 .border-t-dashed {
   border-top: 1px dashed var(--el-border-color);
@@ -761,4 +764,4 @@ h5 {
   .responsive-dialog {
     width: 90% !important;
   }
-}
+}

ui/src/views/chat/pc/index.vue

@@ -101,7 +101,7 @@
         </div>
         <div class="chat-pc__right">
           <div class="right-header border-b mb-24 p-16-24 flex-between">
-            <h4 class="ellipsis-1" style="width: 70%">
+            <h4 class="ellipsis-1" style="width: 66%">
               {{ currentChatName }}
             </h4>