From 0f03841f448e94216bc8eed352641c15d7087964 Mon Sep 17 00:00:00 2001
From: Marcus <1922576605@qq.com>
Date: Sun, 29 Jun 2025 10:11:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/Icons/index.ts                 |  1 +
 .../Icons/svg/heroicons/ChevronLeftIcon.svg   |  3 ++
 web/src/layouts/BasicLayout.vue               | 29 +++++++++---
 web/src/stores/index.ts                       |  1 +
 web/src/stores/layout_store.ts                | 44 +++++++++++++++++++
 web/src/utils/media.ts                        |  1 +
 web/src/views/CommunityView.vue               | 30 +++++++++----
 7 files changed, 96 insertions(+), 13 deletions(-)
 create mode 100644 web/src/assets/Icons/svg/heroicons/ChevronLeftIcon.svg
 create mode 100644 web/src/stores/layout_store.ts

diff --git a/web/src/assets/Icons/index.ts b/web/src/assets/Icons/index.ts
index 46a27bd..3410309 100644
--- a/web/src/assets/Icons/index.ts
+++ b/web/src/assets/Icons/index.ts
@@ -1,3 +1,4 @@
+export { default as ChevronLeftIcon } from "./svg/heroicons/ChevronLeftIcon.svg?component";
 export { default as ExclamationTriangleIcon } from "./svg/heroicons/ExclamationTriangleIcon.svg?component";
 export { default as microphone } from "./svg/heroicons/MicrophoneIcon.svg?component";
 export { default as PaperAirplaneIcon } from "./svg/heroicons/PaperAirplaneIcon.svg?component";
diff --git a/web/src/assets/Icons/svg/heroicons/ChevronLeftIcon.svg b/web/src/assets/Icons/svg/heroicons/ChevronLeftIcon.svg
new file mode 100644
index 0000000..eb55f6e
--- /dev/null
+++ b/web/src/assets/Icons/svg/heroicons/ChevronLeftIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+</svg>
diff --git a/web/src/layouts/BasicLayout.vue b/web/src/layouts/BasicLayout.vue
index a7e626a..d2c6c0d 100644
--- a/web/src/layouts/BasicLayout.vue
+++ b/web/src/layouts/BasicLayout.vue
@@ -1,15 +1,31 @@
 <script setup lang="ts">
-import { NImage } from "naive-ui";
+import { ChevronLeftIcon } from "@/assets/Icons";
 import logo from "@/assets/logo.png";
-import { useChatStore } from "@/stores";
+import { useChatStore, useLayoutStore } from "@/stores";
 
 const chatStore = useChatStore();
 const { onlineCount } = storeToRefs(chatStore);
+const layoutStore = useLayoutStore();
+const { hiddenLeftSidebar, simpleMode } = storeToRefs(layoutStore);
 </script>
 
 <template>
-  <div class="h-screen flex overflow-hidden">
-    <div class="flex-none w-[200px] h-full flex flex-col">
+  <div class="relative h-screen flex overflow-hidden">
+    <div
+      class="absolute left-0 top-0 bottom-0 z-10 flex-none w-[200px] h-full flex flex-col bg-white transition-all ease-in-out"
+      :class="{
+        '-translate-x-[200px]': hiddenLeftSidebar
+      }"
+    >
+      <div
+        @click="hiddenLeftSidebar = !hiddenLeftSidebar"
+        class="absolute -right-3 translate-y-1/2 top-1/2 z-20 w-[24px] h-[24px] bg-[#0094c526] rounded-full flex items-center justify-center cursor-pointer"
+        :class="{
+          'rotate-180 -right-8': hiddenLeftSidebar
+        }"
+      >
+        <ChevronLeftIcon class="!w-4 !h-4 text-[#777]" />
+      </div>
       <router-link class="w-full my-6 cursor-pointer" to="/">
         <NImage
           class="w-full object-cover"
@@ -40,7 +56,10 @@ const { onlineCount } = storeToRefs(chatStore);
         </div>
       </div>
     </div>
-    <div class="flex-1 relative">
+    <div
+      class="flex-1 relative"
+      :class="{ 'ml-[200px]': !hiddenLeftSidebar && !simpleMode }"
+    >
       <RouterView />
     </div>
   </div>
diff --git a/web/src/stores/index.ts b/web/src/stores/index.ts
index 0637980..cea2a56 100644
--- a/web/src/stores/index.ts
+++ b/web/src/stores/index.ts
@@ -1,2 +1,3 @@
 export * from "./asr_store";
 export * from "./chat_store";
+export * from "./layout_store";
\ No newline at end of file
diff --git a/web/src/stores/layout_store.ts b/web/src/stores/layout_store.ts
new file mode 100644
index 0000000..98db981
--- /dev/null
+++ b/web/src/stores/layout_store.ts
@@ -0,0 +1,44 @@
+import { matchMedia } from "@/utils";
+
+export const useLayoutStore = defineStore("layout", () => {
+  // 侧边栏状态
+  const hiddenLeftSidebar = ref(false);
+  // 简洁按钮
+  const simpleMode = ref(false);
+
+  const handleResize = () => {
+    matchMedia(
+      "sm",
+      () => {
+        hiddenLeftSidebar.value = true;
+      },
+      () => {
+        hiddenLeftSidebar.value = false;
+      }
+    );
+    matchMedia(
+      "536",
+      () => {
+        simpleMode.value = true;
+      },
+      () => {
+        simpleMode.value = false;
+      }
+    );
+  };
+
+  const toggleLeftSidebar = () => {
+    hiddenLeftSidebar.value = !hiddenLeftSidebar.value;
+  };
+
+  window.addEventListener("resize", handleResize);
+
+  onMounted(() => {
+    handleResize();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", handleResize);
+  });
+  return { hiddenLeftSidebar, toggleLeftSidebar, simpleMode };
+});
diff --git a/web/src/utils/media.ts b/web/src/utils/media.ts
index 0fc9615..e422f39 100644
--- a/web/src/utils/media.ts
+++ b/web/src/utils/media.ts
@@ -35,6 +35,7 @@ export const matchMedia = (
   }
 };
 
+/** 获取视窗宽度 */
 export const useWindowWidth = () => {
   const width = ref(window.innerWidth);
 
diff --git a/web/src/views/CommunityView.vue b/web/src/views/CommunityView.vue
index 5dea840..efb4876 100644
--- a/web/src/views/CommunityView.vue
+++ b/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"