feat: 修改布局样式，引入lodash-es

web/src/views/CommunityView.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { SelectGroupOption, SelectOption } from "naive-ui";
+import { throttle } from "lodash-es";
+import AIAvatar from "@/assets/ai_avatar.png";
 import { ExclamationTriangleIcon, microphone, PaperAirplaneIcon, TrashIcon } from "@/assets/Icons";
+import UserAvatar from "@/assets/user_avatar.jpg";
 import markdown from "@/components/markdown.vue";
 import { useAsrStore, useChatStore } from "@/stores";
 
@@ -11,7 +14,7 @@ const { historyMessages, completing, modelList, modelInfo } = storeToRefs(chatSt
 const { isRecording } = storeToRefs(asrStore);
 
 const inputData = ref("");
-
+const scrollbarRef = ref<HTMLElement | null>(null);
 const options = ref<Array<SelectGroupOption | SelectOption>>([]);
 
 // 处理选中模型的 ID
@@ -59,14 +62,22 @@ const handleSendMessage = () => {
 };
 
 // 开关语音输入
-const toggleRecording = () => {
+const toggleRecording = throttle(() => {
   if (isRecording.value) {
     asrStore.stopRecording();
   }
   else {
     asrStore.startRecording();
   }
-};
+}, 500);
+
+watch(completing, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      scrollbarRef.value?.scrollTo({ top: 99999, behavior: "smooth" });
+    });
+  }
+});
 
 onMounted(() => {
   chatStore.getModelList();
@@ -75,21 +86,41 @@ onMounted(() => {
 
 <template>
   <div class="p-8 !pr-4 h-full w-full flex flex-col gap-4 border-l-[24px] border-l-[#FAFAFA] text-base">
-    <NScrollbar class="flex-1 pr-4">
+    <!-- 历史消息区 -->
+    <NScrollbar ref="scrollbarRef" class="flex-1 pr-4 relative">
       <div class="flex items-start mb-4">
-        <span class="text-base w-14 min-w-14">助手：</span>
-        <NTag type="success" class="text-base max-w-full !h-auto">
+        <span class="rounded-lg overflow-hidden">
+          <avatar :avatar="AIAvatar" />
+        </span>
+        <div class="text-base w-full max-w-full ml-2 flex flex-col items-start">
+          <span class="text-base font-bold">助手：</span>
           <span class="text-base">你好，我是你的智能助手，请问有什么可以帮助你的吗？</span>
-        </NTag>
+          <NDivider />
+        </div>
       </div>
       <div v-for="(msg, idx) in historyMessages" :key="idx" class="flex items-start mb-4">
-        <span v-if="msg.role === 'user'" class="text-base w-14 min-w-14">你：</span>
-        <span v-else class="text-base w-14 min-w-14">助手：</span>
-        <NTag :type="msg.role === 'user' ? 'info' : 'success'" class="max-w-full !h-auto">
-          <markdown :content="msg.content || ''" />
-        </NTag>
+        <span v-if="msg.role === 'user'" class="rounded-lg overflow-hidden">
+          <avatar :avatar="UserAvatar" />
+        </span>
+        <span v-else class="rounded-lg overflow-hidden">
+          <avatar :avatar="AIAvatar" />
+        </span>
+        <div class="text-base w-full max-w-full ml-2 flex flex-col items-start">
+          <span class="text-base font-bold">{{ msg.role === 'user' ? '你：' : '助手：' }}</span>
+          <div class="w-full max-w-full">
+            <markdown :content="msg.content || ''" />
+            <NDivider />
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="isRecording"
+        class="absolute inset-0 pointer-events-none flex items-center justify-center text-[#7A7A7A] text-2xl bg-white/80"
+      >
+        正在语音输入...
       </div>
     </NScrollbar>
+    <!-- 输入框 -->
     <NInput v-model:value="inputData" type="textarea" placeholder="在这里输入消息" @keyup.enter="handleSendMessage" />
     <!-- 操作区 -->
     <div class="flex justify-between items-center gap-2">