From dee84e9307449562ed2a3cc6920dc307dcbbd7e1 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Sat, 4 Mar 2023 15:46:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20iOS=E5=AE=89=E5=85=A8=E8=B7=9D=E7=A6=BB?=
 =?UTF-8?q?=E5=92=8C=E8=BE=93=E5=85=A5=E6=BA=A2=E5=87=BA[#266]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/global.less                |  4 ++++
 src/views/chat/index.vue              |  2 +-
 src/views/chat/layout/sider/index.vue | 11 ++++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/styles/global.less b/src/styles/global.less
index cff90b8..f84a2d6 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -3,3 +3,7 @@ body,
 #app {
 	height: 100%;
 }
+
+body {
+	padding-bottom: constant(safe-area-inset-bottom);
+}
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 031729c..b34d39e 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -333,7 +333,7 @@ const wrapClass = computed(() => {
 const footerClass = computed(() => {
   let classes = ['p-4']
   if (isMobile.value)
-    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'h-14', 'overflow-hidden']
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'overflow-hidden']
   return classes
 })
 
diff --git a/src/views/chat/layout/sider/index.vue b/src/views/chat/layout/sider/index.vue
index b8f47c0..6a70beb 100644
--- a/src/views/chat/layout/sider/index.vue
+++ b/src/views/chat/layout/sider/index.vue
@@ -32,6 +32,15 @@ const getMobileClass = computed<CSSProperties>(() => {
   return {}
 })
 
+const mobileSafeArea = computed(() => {
+  if (isMobile.value) {
+    return {
+      paddingBottom: 'env(safe-area-inset-bottom)',
+    }
+  }
+  return {}
+})
+
 watch(
   isMobile,
   (val) => {
@@ -56,7 +65,7 @@ watch(
     :style="getMobileClass"
     @update-collapsed="handleUpdateCollapsed"
   >
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col h-full" :style="mobileSafeArea">
       <main class="flex flex-col flex-1 min-h-0">
         <div class="p-4">
           <NButton dashed block @click="handleAdd">