fix(mobile): back navigation issue on mobile

This commit is contained in:
Clover You
2026-02-12 16:25:08 +08:00
committed by Dawn
parent 78df34233e
commit f2cc82d180
15 changed files with 23 additions and 65 deletions

View File

@@ -1,7 +1,8 @@
<template>
<div class="flex flex-col flex-1 min-h-0">
<div class="flex flex-col flex-1 min-h-0 relative">
<img v-if="bgmURL" :src="bgmURL" class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<!-- 页面容器 -->
<div class="flex w-full items-start flex-col flex-1 min-h-0">
<div class="flex w-full items-start flex-col flex-1 min-h-0 z-1">
<div class="w-full">
<slot name="header"></slot>
</div>
@@ -11,16 +12,17 @@
</div>
</div>
<slot name="footer"></slot>
<slot v-if="showFooter" name="footer" class="z-1"></slot>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
showFooter: {
type: Boolean,
default: true
}
import bgImg from '@/assets/mobile/chat-home/background.webp'
const { showFooter = true, background = true } = defineProps<{ showFooter?: boolean; background?: string | boolean }>()
const bgmURL = computed(() => {
return typeof background === 'boolean' && background ? bgImg : background
})
</script>

View File

@@ -63,6 +63,7 @@ const formattedMsgCount = computed(() => {
})
const handleBack = async () => {
console.log(router)
router.back()
}

View File

@@ -11,10 +11,6 @@
<template #container>
<div class="flex flex-col overflow-auto h-full">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-100vw h-100vh z-0 dark:opacity-20" />
<!-- 页面全部内容 -->
<div class="flex flex-col flex-1 items-center p-15px z-2 my-15">
<n-card class="flex flex-col rounded-15px py-10">

View File

@@ -9,10 +9,7 @@
</template>
<template #container>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<div class="flex flex-col gap-15px py-15px px-20px flex-1 min-h-0 z-1">
<n-card size="small" embedded class="rounded-10px p-0" content-class="p-0!">
<div class="flex py-10px rounded-10px w-full items-center gap-10px" @click="clickInfo">

View File

@@ -1,14 +1,11 @@
<template>
<AutoFixHeightPage :show-footer="false">
<template #header>
<HeaderBar :isOfficial="false" class="bg-white" border :hidden-right="true" room-name="公告详情" />
<HeaderBar :isOfficial="false" border :hidden-right="true" room-name="公告详情" />
</template>
<template #container>
<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" />
<div class="flex flex-col flex-1 gap-15px py-15px px-20px">
<div v-if="loading" class="flex justify-center items-center h-200px">
<n-spin size="large" />

View File

@@ -1,14 +1,11 @@
<template>
<AutoFixHeightPage :show-footer="false">
<template #header>
<HeaderBar :isOfficial="false" class="bg-white" border :hidden-right="true" room-name="群公告" />
<HeaderBar :isOfficial="false" border :hidden-right="true" room-name="群公告" />
</template>
<template #container>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<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 }">

View File

@@ -1,9 +1,5 @@
<template>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<AutoFixHeightPage :show-footer="false">
<template #header>
<HeaderBar

View File

@@ -1,9 +1,5 @@
<template>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<AutoFixHeightPage :show-footer="false">
<template #header>
<HeaderBar

View File

@@ -10,11 +10,7 @@
</template>
<template #container>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<PersonalInfo :is-my-page="isMyPage" :is-show="isShow"></PersonalInfo>
<div class="top-0 flex-1 flex w-full border-#13987F border-1">

View File

@@ -5,10 +5,7 @@
</template>
<template #container>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<div class="flex flex-col flex-1 gap-20px py-15px px-20px">
<n-form class="rounded-15px p-10px shadow" label-placement="left" label-width="100px">
<n-form-item>

View File

@@ -5,11 +5,7 @@
</template>
<template #container>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<div class="flex flex-col flex-1 gap-20px py-15px px-20px">
<n-date-picker panel type="date" block class="m-auto rounded-16px" />

View File

@@ -1,5 +1,5 @@
<template>
<AutoFixHeightPage :show-footer="false" class="z-1">
<AutoFixHeightPage :show-footer="false">
<template #header>
<HeaderBar
:isOfficial="false"
@@ -9,10 +9,7 @@
:room-name="t('mobile_edit_profile.title')" />
</template>
<template #container>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<div class="p-20px">
<!-- 头像 -->
<div class="flex justify-center mb-50px">

View File

@@ -6,9 +6,6 @@
<template #container>
<div class="flex flex-col overflow-auto h-full">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-100vw h-100vh z-0 dark:opacity-20" />
<div class="flex flex-col p-20px gap-20px">
<!-- 设置项 -->
<div

View File

@@ -1,9 +1,5 @@
<template>
<div class="flex flex-col overflow-auto h-full">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-100vw h-100vh z-0 dark:opacity-20" />
<AutoFixHeightPage :show-footer="false" class="z-1">
<template #container>
<div class="z-2 flex flex-col gap-1 overflow-auto h-full">

View File

@@ -1,8 +1,5 @@
<template>
<div class="flex flex-col overflow-auto h-full relative">
<img
src="@/assets/mobile/chat-home/background.webp"
class="absolute fixed top-0 left-0 w-full h-full z-0 dark:opacity-20" />
<div class="flex flex-col overflow-auto h-full">
<!-- 设置区 -->
<Settings />