chore(首页): 体验优化

src/components/markdown-render/markdown-render.vue

@@ -64,7 +64,8 @@ watchEffect(() => {
 
 <style lang="scss" scoped>
 .article-container {
-  letter-spacing: 0.1ch;
+  // letter-spacing: 0.1ch;
+  font-family: 'Microsoft YaHei UI';
   background-color: unset;
 }
 </style>

src/views/home/components/agent-about.vue

@@ -134,7 +134,7 @@ const handleRecommendQuestionListUpdate = debounce(
       <div v-else class="flex-center flex">
         <div class="font-600 flex items-center rounded-[31px] bg-[#ECEFFF] px-[38px] py-[11px] text-[18px]">
           <div
-            class="mr-[6px] h-[22px] w-[22px] bg-contain bg-no-repeat"
+            class="mr-[6px] h-[22px] w-[22px] rounded-[6px] bg-cover bg-no-repeat"
             :style="{ backgroundImage: `url(${currentAgentApplication.agentAvatar})` }"
           ></div>
           <span>{{ currentAgentApplication.agentTitle || '--' }}</span>

src/views/home/components/footer-operation.vue

@@ -44,9 +44,13 @@ const isQuestionSubmitBtnDisabled = computed(() => {
   getAgentApplicationSelectList()
 })()
 
-const messageListScrollToBottomThrottle = throttle(() => {
-  emit('messageListScrollToBottom')
-}, 1000)
+const messageListScrollToBottomThrottle = throttle(
+  () => {
+    emit('messageListScrollToBottom')
+  },
+  500,
+  { leading: true, trailing: true },
+)
 
 function getAgentApplicationSelectList() {
   fetchAgentApplicationSelectList<AgentApplicationRecordItem[]>().then((res) => {
@@ -130,12 +134,14 @@ function questionSubmit() {
       name: agentName,
     })
 
-    emit('messageListScrollToBottom')
+    setTimeout(() => {
+      emit('messageListScrollToBottom')
+    }, 200)
   })
 
   isAgentResponding.value = true
 
-  let isFirstClip = true
+  // let isFirstClip = true
   let messageContent = ''
 
   currentFetchEventSourceController.value = fetchEventStreamSource(
@@ -149,22 +155,20 @@ function questionSubmit() {
       onmessage: (message) => {
         messageContent += message
 
-        if (isFirstClip) {
-          emit('updateSpecifyMessageItem', currentLatestMessageItemKeyMap.value.get('assistant')!, {
-            content: message,
-            isAnswerLoading: false,
-          })
+        emit('updateSpecifyMessageItem', currentLatestMessageItemKeyMap.value.get('assistant')!, {
+          content: messageContent,
+        })
 
-          isFirstClip = false
-        } else {
-          emit('updateSpecifyMessageItem', currentLatestMessageItemKeyMap.value.get('assistant')!, {
-            content: messageContent,
-          })
-        }
+        messageListScrollToBottomThrottle()
+      },
+      onend: () => {
+        emit('updateSpecifyMessageItem', currentLatestMessageItemKeyMap.value.get('assistant')!, {
+          content: messageContent,
+          isAnswerLoading: false,
+        })
 
         messageListScrollToBottomThrottle()
       },
-      onend: () => {},
       onclose: () => {
         isAgentResponding.value = false
 
@@ -223,7 +227,7 @@ function handleQuestionSubmitEnter(event: KeyboardEvent) {
           <div class="box-border flex !w-[160px] w-full items-center justify-between px-[12px]">
             <div class="mr-[5px] flex flex-1 items-center overflow-hidden">
               <div
-                class="mr-[10px] h-[16px] w-[16px] bg-contain bg-no-repeat"
+                class="mr-[10px] h-[16px] w-[16px] rounded-[6px] bg-cover bg-no-repeat"
                 :class="{ 'bg-px-home-cuixiang_icon-png': !currentAgentApplication.agentAvatar }"
                 :style="{ backgroundImage: `url(${currentAgentApplication.agentAvatar})` }"
               ></div>
@@ -255,7 +259,7 @@ function handleQuestionSubmitEnter(event: KeyboardEvent) {
                   @click="handleApplicationChange(item)"
                 >
                   <div
-                    class="mr-[10px] h-[16px] w-[16px] bg-contain bg-no-repeat"
+                    class="mr-[10px] h-[16px] w-[16px] rounded-[6px] bg-cover bg-no-repeat"
                     :class="{ 'bg-px-home-cuixiang_icon-png': !item.agentAvatar }"
                     :style="{ backgroundImage: `url(${item.agentAvatar})` }"
                   ></div>

src/views/home/components/message-bubble-loading.vue

 <script setup lang="ts">
 interface Props {
-  activeColor: string
+  activeColor?: string
+  width?: string
 }
 
-const { activeColor = '#fff' } = defineProps<Props>()
+const { activeColor = '#fff', width = '6px' } = defineProps<Props>()
 </script>
 
 <template>
@@ -12,7 +13,7 @@ const { activeColor = '#fff' } = defineProps<Props>()
 
 <style lang="scss" scoped>
 .loader {
-  width: 6px;
+  width: v-bind('width');
   aspect-ratio: 1;
   border-radius: 50%;
   animation: l5 1s infinite linear alternate;

src/views/home/components/message-item.vue

@@ -32,7 +32,7 @@ const name = computed(() => {
 <template>
   <div class="mb-[20px] last:mb-0">
     <div class="flex">
-      <img class="h-[36px] w-[36px] object-contain" :src="avatarUrl" alt="Avatar" />
+      <img class="h-[36px] w-[36px] rounded-[6px] object-cover" :src="avatarUrl" alt="Avatar" />
 
       <div class="ml-[11px]">
         <div class="mb-[7px] text-[12px] text-[#999]">
@@ -46,17 +46,24 @@ const name = computed(() => {
             '!min-w-[80px]': messageItem.isAnswerLoading,
           }"
         >
-          <MarkdownRender
-            v-if="!messageItem.isAnswerLoading"
-            :raw-text-content="
-              messageItem.content ? messageItem.content : t('common_module.dialogue_module.empty_message_content')
-            "
-            :color="isAgentMessage ? '#fff' : '#192338'"
-          />
-
-          <div v-else class="flex h-[21px] items-center justify-center">
+          <div
+            v-if="messageItem.isAnswerLoading && !messageItem.content"
+            class="flex h-[21px] items-center justify-center"
+          >
             <MessageBubbleLoading :active-color="isAgentMessage ? '#fff' : '#192338'" />
           </div>
+          <template v-else>
+            <MarkdownRender
+              :raw-text-content="
+                messageItem.content ? messageItem.content : t('common_module.dialogue_module.empty_message_content')
+              "
+              :color="isAgentMessage ? '#fff' : '#192338'"
+            />
+
+            <div v-if="messageItem.isAnswerLoading" class="ml-[15px] pt-[12px]">
+              <MessageBubbleLoading active-color="#fff" width="5px" />
+            </div>
+          </template>
         </div>
       </div>
     </div>

src/views/personal-settings/personal-settings.vue

@@ -160,7 +160,7 @@ function handlePasswordChangeSubmit() {
 </script>
 
 <template>
-  <div class="h-full flex-col rounded-[20px] bg-white p-6 shadow-[0_2px_2px_#0000000a]">
+  <div class="h-full min-h-fit flex-col rounded-[20px] bg-white p-6 shadow-[0_2px_2px_#0000000a]">
     <div class="ml-[56px] pt-[6px]">
       <ul>
         <li class="font-600 flex items-center text-[18px]">