feat: 完成移动端适配

web/src/views/CommunityView.vue

@@ -10,14 +10,15 @@ import {
 } from "@/assets/Icons";
 import UserAvatar from "@/assets/user_avatar.jpg";
 import markdown from "@/components/markdown.vue";
-import { useAsrStore, useChatStore } from "@/stores";
+import { useAsrStore, useChatStore, useLayoutStore } from "@/stores";
 
 const chatStore = useChatStore();
-const asrStore = useAsrStore();
-
 const { historyMessages, completing, modelList, modelInfo } =
   storeToRefs(chatStore);
+const asrStore = useAsrStore();
 const { isRecording } = storeToRefs(asrStore);
+const layoutStore = useLayoutStore();
+const { hiddenLeftSidebar, simpleMode } = storeToRefs(layoutStore);
 
 const inputData = ref("");
 const scrollbarRef = ref<HTMLElement | null>(null);
@@ -93,7 +94,8 @@ 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"
+    class="p-8 !pr-4 h-full w-full flex flex-col gap-4 border-l-[24px] border-l-[#FAFAFA] transition-all ease-in-out text-base"
+    :class="{ '!border-l-0': hiddenLeftSidebar || simpleMode }"
   >
     <!-- 历史消息区 -->
     <NScrollbar ref="scrollbarRef" class="flex-1 pr-4 relative">
@@ -182,16 +184,28 @@ onMounted(() => {
           </template>
           <template #trigger>
             <NButton :disabled="isRecording || completing" type="warning">
-              清除历史
-              <TrashIcon class="!w-4 !h-4 ml-1" />
+              <template v-if="!simpleMode">清除历史</template>
+              <TrashIcon
+                class="!w-4 !h-4"
+                :class="{
+                  'ml-1': !simpleMode
+                }"
+              />
             </NButton>
           </template>
           <span>确定要清除历史消息吗？</span>
         </NPopconfirm>
 
         <NButton :disabled="completing" @click="toggleRecording">
-          {{ isRecording ? "停止输入" : "语音输入" }}
-          <microphone class="!w-4 !h-4 ml-1" />
+          <template v-if="!simpleMode">
+            {{ isRecording ? "停止输入" : "语音输入" }}
+          </template>
+          <microphone
+            class="!w-4 !h-4"
+            :class="{
+              'ml-1': !simpleMode
+            }"
+          />
         </NButton>
         <NButton
           :disabled="isRecording"