feat: 完成移动端适配

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>