fix(mobile): Incorrect top safety area

2026-02-06 12:01:54 +08:00
parent 2f710099c7
commit d25e41656d
5 changed files with 132 additions and 146 deletions
--- a/src/mobile/layout/my/MyLayout.vue
+++ b/src/mobile/layout/my/MyLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <MobileLayout :topSafeAreaClass="computedTopAreaClass">
+  <MobileLayout>
    <div class="h-full flex flex-col">
      <!-- 页面全部内容 -->
      <div class="flex flex-col flex-1">
@@ -139,27 +139,5 @@ useMitt.on(MittEnum.QR_SCAN_EVENT, async (data: ScanData) => {
  }
 })

-const computedTopAreaClass = computed(() => {
-  return route.name !== 'mobileSimpleBio' ? 'bg-white' : ''
-})
-
 const route = useRoute()
 </script>
-
-<style lang="scss" scoped>
-// .page-view {
-//   // 进入时的动画
-//   animation: fade-slide-in 0.3s ease;
-// }
-
-// @keyframes fade-slide-in {
-//   from {
-//     transform: translateX(20px);
-//     opacity: 0;
-//   }
-//   to {
-//     transform: translateX(0);
-//     opacity: 1;
-//   }
-// }
-</style>
--- a/src/mobile/views/chat-room/MobileInviteGroupMember.vue
+++ b/src/mobile/views/chat-room/MobileInviteGroupMember.vue
@@ -1,33 +1,32 @@
 <template>
-  <MobileLayout>
-    <div class="flex w-full flex-col h-full">
+  <AutoFixHeightPage :show-footer="false">
+    <template #header>
      <HeaderBar
        :isOfficial="false"
        :hidden-right="true"
        :enable-default-background="false"
        :enable-shadow="false"
        room-name="邀请群友" />
+    </template>

+    <template #container>
      <!-- 顶部搜索框 -->
      <div class="px-16px mt-10px flex gap-3">
-        <div class="flex-1 py-5px shrink-0">
-          <n-input
-            v-model:value="keyword"
-            class="rounded-10px w-full relative text-14px"
-            placeholder="搜索联系人~"
-            clearable
-            spellCheck="false"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off">
-            <template #prefix>
-              <svg class="w-12px h-12px"><use href="#search"></use></svg>
-            </template>
-          </n-input>
-        </div>
-        <div class="flex justify-end items-center">
-          <n-button class="py-5px" @click="doSearch">搜索</n-button>
-        </div>
+        <n-input
+          round
+          v-model:value="keyword"
+          class="rounded-10px relative text-14px flex-1 shrink-0"
+          placeholder="搜索联系人~"
+          clearable
+          spellCheck="false"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off">
+          <template #prefix>
+            <svg class="w-12px h-12px"><use href="#search"></use></svg>
+          </template>
+        </n-input>
+        <n-button strong secondary round class="py-5px" @click="doSearch">搜索</n-button>
      </div>

      <!-- 好友列表 -->
@@ -74,16 +73,25 @@
          </n-checkbox-group>
        </n-scrollbar>
      </div>
+    </template>

+    <template #footer>
      <!-- 底部操作栏 -->
-      <div class="px-16px py-10px bg-white border-t border-gray-200 flex justify-between items-center">
-        <span class="text-14px">已选择 {{ selectedList.length }} 人</span>
-        <n-button type="primary" :disabled="selectedList.length === 0" :loading="isLoading" @click="handleInvite">
+      <div class="px-16px py-10px border-t border-gray-200 flex justify-between items-center">
+        <n-text class="text-14px">已选择 {{ selectedList.length }} 人</n-text>
+        <n-button
+          strong
+          secondary
+          round
+          type="primary"
+          :disabled="selectedList.length === 0"
+          :loading="isLoading"
+          @click="handleInvite">
          邀请
        </n-button>
      </div>
-    </div>
-  </MobileLayout>
+    </template>
+  </AutoFixHeightPage>
 </template>

 <script setup lang="ts">
--- a/src/mobile/views/chat-room/notice/NoticeList.vue
+++ b/src/mobile/views/chat-room/notice/NoticeList.vue
@@ -8,7 +8,7 @@
      <div class="flex flex-col overflow-auto h-full relative">
        <img
          src="@/assets/mobile/chat-home/background.webp"
-          class="absolute t-0 l-0 w-full h-full z-0 dark:opacity-20" />
+          class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
        <div class="flex flex-col flex-1 gap-15px py-15px px-20px">
          <RecycleScroller :items="announList" :item-size="15" key-field="id" class="flex flex-col gap-15px">
            <template #default="{ item }">
--- a/src/mobile/views/friends/AddFriends.vue
+++ b/src/mobile/views/friends/AddFriends.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="flex flex-1 flex-col relative bg-cover bg-center">
-    <HeaderBar
-      :isOfficial="false"
-      :hidden-right="true"
-      :enable-default-background="false"
-      :enable-shadow="false"
-      room-name="添加好友/群" />
+  <AutoFixHeightPage :show-footer="false">
+    <template #header>
+      <HeaderBar
+        :isOfficial="false"
+        :hidden-right="true"
+        :enable-default-background="false"
+        :enable-shadow="false"
+        room-name="添加好友/群" />
+    </template>

-    <div class="flex flex-col gap-1 overflow-auto h-full">
+    <template #container>
      <!-- 主要内容 -->
      <n-flex vertical :size="14">
        <!-- 搜索框 -->
@@ -132,8 +134,8 @@
          </n-tab-pane>
        </n-tabs>
      </n-flex>
-    </div>
-  </div>
+    </template>
+  </AutoFixHeightPage>
 </template>

 <script setup lang="ts">
--- a/src/mobile/views/friends/StartGroupChat.vue
+++ b/src/mobile/views/friends/StartGroupChat.vue
@@ -1,95 +1,93 @@
 <template>
-  <MobileLayout>
-    <div class="flex w-full flex-col h-full">
-      <HeaderBar
-        :isOfficial="false"
-        :hidden-right="true"
-        :enable-default-background="false"
-        :enable-shadow="false"
-        room-name="发起群聊" />
+  <div class="flex w-full flex-col h-full">
+    <HeaderBar
+      :isOfficial="false"
+      :hidden-right="true"
+      :enable-default-background="false"
+      :enable-shadow="false"
+      room-name="发起群聊" />

-      <!-- 顶部搜索框 -->
-      <div class="px-16px mt-10px flex gap-3">
-        <div class="flex-1 py-5px shrink-0">
-          <n-input
-            v-model:value="keyword"
-            placeholder="搜索联系人~"
-            clearable
-            round
-            spellCheck="false"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off">
-            <template #prefix>
-              <svg class="w-12px h-12px"><use href="#search"></use></svg>
-            </template>
-          </n-input>
-        </div>
-        <div class="flex justify-end items-center">
-          <n-button strong secondary round @click="doSearch">搜索</n-button>
-        </div>
+    <!-- 顶部搜索框 -->
+    <div class="px-16px mt-10px flex gap-3">
+      <div class="flex-1 py-5px shrink-0">
+        <n-input
+          v-model:value="keyword"
+          placeholder="搜索联系人~"
+          clearable
+          round
+          spellCheck="false"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off">
+          <template #prefix>
+            <svg class="w-12px h-12px"><use href="#search"></use></svg>
+          </template>
+        </n-input>
      </div>
-
-      <!-- 联系人列表 -->
-      <!-- 联系人列表 -->
-      <div ref="scrollArea" class="flex-1 overflow-y-auto px-16px mt-10px" :style="{ height: scrollHeight + 'px' }">
-        <n-scrollbar style="max-height: calc(100vh - 150px)">
-          <n-checkbox-group v-model:value="selectedList" class="flex flex-col gap-2">
-            <div
-              v-for="item in filteredContacts"
-              :key="item.uid"
-              class="rounded-10px border border-gray-200 overflow-hidden">
-              <n-checkbox
-                :value="item.uid"
-                size="large"
-                class="w-full flex items-center px-5px"
-                :class="[
-                  'cursor-pointer select-none transition-colors duration-150',
-                  selectedList.includes(item.uid)
-                    ? 'bg-[#f5f5f5] dark:bg-[#404040] border-blue-300'
-                    : 'hover:bg-[#f5f5f5] dark:hover:bg-[#404040] border-gray-200'
-                ]">
-                <template #default>
-                  <!-- ✅ 强制一行展示 -->
-                  <div class="flex items-center gap-10px px-8px py-10px">
-                    <!-- 头像 -->
-                    <n-avatar
-                      round
-                      :size="44"
-                      :src="AvatarUtils.getAvatarUrl(groupStore.getUserInfo(item.uid)!.avatar!)"
-                      fallback-src="/logo.png"
-                      style="border: 1px solid var(--avatar-border-color)" />
-                    <!-- 文字信息 -->
-                    <div class="flex flex-col leading-tight truncate">
-                      <span class="text-14px font-medium truncate">
-                        {{ groupStore.getUserInfo(item.uid)!.name }}
-                      </span>
-                      <div class="text-12px text-gray-500 flex items-center gap-4px truncate">
-                        <template v-if="getUserState(item.uid)">
-                          <img class="size-12px rounded-50%" :src="getUserState(item.uid)?.url" alt="" />
-                          <n-text>{{ getUserState(item.uid)?.title }}</n-text>
-                        </template>
-                        <template v-else>
-                          <n-badge :color="item.activeStatus === OnlineEnum.ONLINE ? '#1ab292' : '#909090'" dot />
-                          <n-text>{{ item.activeStatus === OnlineEnum.ONLINE ? '在线' : '离线' }}</n-text>
-                        </template>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </n-checkbox>
-            </div>
-          </n-checkbox-group>
-        </n-scrollbar>
-      </div>
-
-      <!-- 底部操作栏 -->
-      <div class="px-16px py-10px bg-white border-t border-gray-200 flex justify-between items-center">
-        <span class="text-14px">已选择 {{ selectedList.length }} 人</span>
-        <n-button type="primary" :disabled="selectedList.length === 0" @click="createGroup">发起群聊</n-button>
+      <div class="flex justify-end items-center">
+        <n-button strong secondary round @click="doSearch">搜索</n-button>
      </div>
    </div>
-  </MobileLayout>
+
+    <!-- 联系人列表 -->
+    <!-- 联系人列表 -->
+    <div ref="scrollArea" class="flex-1 overflow-y-auto px-16px mt-10px" :style="{ height: scrollHeight + 'px' }">
+      <n-scrollbar style="max-height: calc(100vh - 150px)">
+        <n-checkbox-group v-model:value="selectedList" class="flex flex-col gap-2">
+          <div
+            v-for="item in filteredContacts"
+            :key="item.uid"
+            class="rounded-10px border border-gray-200 overflow-hidden">
+            <n-checkbox
+              :value="item.uid"
+              size="large"
+              class="w-full flex items-center px-5px"
+              :class="[
+                'cursor-pointer select-none transition-colors duration-150',
+                selectedList.includes(item.uid)
+                  ? 'bg-[#f5f5f5] dark:bg-[#404040] border-blue-300'
+                  : 'hover:bg-[#f5f5f5] dark:hover:bg-[#404040] border-gray-200'
+              ]">
+              <template #default>
+                <!-- ✅ 强制一行展示 -->
+                <div class="flex items-center gap-10px px-8px py-10px">
+                  <!-- 头像 -->
+                  <n-avatar
+                    round
+                    :size="44"
+                    :src="AvatarUtils.getAvatarUrl(groupStore.getUserInfo(item.uid)!.avatar!)"
+                    fallback-src="/logo.png"
+                    style="border: 1px solid var(--avatar-border-color)" />
+                  <!-- 文字信息 -->
+                  <div class="flex flex-col leading-tight truncate">
+                    <span class="text-14px font-medium truncate">
+                      {{ groupStore.getUserInfo(item.uid)!.name }}
+                    </span>
+                    <div class="text-12px text-gray-500 flex items-center gap-4px truncate">
+                      <template v-if="getUserState(item.uid)">
+                        <img class="size-12px rounded-50%" :src="getUserState(item.uid)?.url" alt="" />
+                        <n-text>{{ getUserState(item.uid)?.title }}</n-text>
+                      </template>
+                      <template v-else>
+                        <n-badge :color="item.activeStatus === OnlineEnum.ONLINE ? '#1ab292' : '#909090'" dot />
+                        <n-text>{{ item.activeStatus === OnlineEnum.ONLINE ? '在线' : '离线' }}</n-text>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </n-checkbox>
+          </div>
+        </n-checkbox-group>
+      </n-scrollbar>
+    </div>
+
+    <!-- 底部操作栏 -->
+    <div class="px-16px py-10px bg-white border-t border-gray-200 flex justify-between items-center">
+      <span class="text-14px">已选择 {{ selectedList.length }} 人</span>
+      <n-button type="primary" :disabled="selectedList.length === 0" @click="createGroup">发起群聊</n-button>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">