feat: 移动端样式修复 (#56)

* feat: 移动端优化

* feat: 部份移动端问题修复

src/components/business/Chat/layout/Layout.vue

@@ -22,13 +22,14 @@ const getContainerClass = computed(() => {
   return [
     'h-full',
     { 'pt-14': isMobile.value },
+    { 'pb-[70px]': isMobile.value },
     { 'pl-[260px]': !isMobile.value && !collapsed.value },
   ]
 })
 </script>
 
 <template>
-  <div class="h-screen p-4" :class="[{ 'p-0': isMobile }]">
+  <div class="h-screen" :class="[isMobile ? 'p-0' : 'p-4']">
     <div class="h-full overflow-hidden" :class="getMobileClass">
       <NLayout class="z-40 transition" :class="getContainerClass" has-sider>
         <Sider />

src/components/business/Chat/layout/header/index.vue

@@ -23,7 +23,7 @@ function handleUpdateCollapsed() {
 
 <template>
   <header class="fixed top-0 left-0 right-0 z-50 border-b bg-white/80 backdrop-blur">
-    <div class="relative flex items-center justify-between px-4 h-14">
+    <div class="relative flex items-center justify-between h-14">
       <button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
         <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
         <SvgIcon v-else class="text-2xl" icon="ri:align-right" />

src/components/business/Chat/layout/sider/index.vue

@@ -29,7 +29,10 @@ watch(
   (val) => {
     appStore.setSiderCollapsed(val)
   },
-  { flush: 'post' },
+  {
+    immediate: true,
+    flush: 'post',
+  },
 )
 </script>
 
@@ -42,6 +45,7 @@ watch(
     collapse-mode="transform"
     position="absolute"
     bordered
+    style="z-index: 50;"
     @update-collapsed="handleUpdateCollapsed"
   >
     <div class="flex flex-col h-full" :class="[{ 'pt-14': isMobile }]">
@@ -63,4 +67,7 @@ watch(
       </footer>
     </div>
   </NLayoutSider>
+  <template v-if="isMobile">
+    <div v-show="!collapsed" class="absolute inset-0 z-40 bg-black/40" @click="handleUpdateCollapsed" />
+  </template>
 </template>