feat: 优化原生端顶部间距与资源栏样式

根据平台动态调整主内容区与资源栏的顶部间距,原生端顶部间距由60px提升至80px,资源栏与展开栏的padding与定位同步适配,提升Android/Capacitor端显示一致性。
This commit is contained in:
谦君
2025-12-20 03:41:16 +08:00
parent 8e34d08545
commit dc5f1c1370

View File

@@ -201,16 +201,26 @@
<!-- 主内容区 --> <!-- 主内容区 -->
<SidebarInset> <SidebarInset>
<div class="flex flex-col h-full pt-[60px]"> <div class="flex flex-col h-full" :class="Capacitor.isNativePlatform() ? 'pt-[80px]' : 'pt-[60px]'">
<!-- 顶部资源栏 - 固定定位 --> <!-- 顶部资源栏 - 固定定位 -->
<header <header
v-if="planet" v-if="planet"
class="fixed top-0 right-0 left-0 z-40 bg-card border-b px-4 sm:px-6 py-3 shadow-md" ref="header"
:class="sidebarOpen ? 'lg:left-[var(--sidebar-width)]' : 'lg:left-[var(--sidebar-width-icon)]'" class="fixed top-0 right-0 left-0 z-40 bg-card border-b px-4 sm:px-6 shadow-md"
:class="[
sidebarOpen ? 'lg:left-[var(--sidebar-width)]' : 'lg:left-[var(--sidebar-width-icon)]',
Capacitor.isNativePlatform() ? 'py-6' : 'py-3'
]"
> >
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<!-- 第一行菜单资源预览状态 --> <!-- 第一行菜单资源预览状态 -->
<div class="grid items-center gap-3 sm:gap-6" style="grid-template-columns: auto 1fr auto"> <div
class="grid items-center gap-3 sm:gap-6"
style="grid-template-columns: auto 1fr auto"
:class="{
'relative top-3': Capacitor.isNativePlatform()
}"
>
<!-- 左侧汉堡菜单移动端/ 占位PC端 --> <!-- 左侧汉堡菜单移动端/ 占位PC端 -->
<div> <div>
<SidebarTrigger class="lg:hidden" data-tutorial="mobile-menu" /> <SidebarTrigger class="lg:hidden" data-tutorial="mobile-menu" />
@@ -221,7 +231,7 @@
<div class="min-w-0 overflow-hidden"> <div class="min-w-0 overflow-hidden">
<div <div
class="resource-bar flex items-center gap-3 sm:gap-6 justify-start sm:justify-center" class="resource-bar flex items-center gap-3 sm:gap-6 justify-start sm:justify-center"
:class="resourceBarExpanded ? 'hidden' : 'overflow-x-auto'" :class="[resourceBarExpanded ? 'hidden' : 'overflow-x-auto']"
> >
<div <div
v-for="resourceType in resourceTypes" v-for="resourceType in resourceTypes"
@@ -283,8 +293,11 @@
> >
<div <div
v-if="planet && resourceBarExpanded" v-if="planet && resourceBarExpanded"
class="fixed top-[60px] right-0 left-0 z-30 bg-card border-b px-4 py-3 shadow-md lg:hidden" class="fixed right-0 left-0 z-30 bg-card border-b px-4 py-3 shadow-md lg:hidden"
:class="sidebarOpen ? 'lg:left-[var(--sidebar-width)]' : 'lg:left-[var(--sidebar-width-icon)]'" :class="[
sidebarOpen ? 'lg:left-[var(--sidebar-width)]' : 'lg:left-[var(--sidebar-width-icon)]',
Capacitor.isNativePlatform() ? 'top-[80px]' : 'top-[60px]'
]"
> >
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div v-for="resourceType in resourceTypes" :key="resourceType.key" class="bg-muted/50 rounded-lg p-2.5"> <div v-for="resourceType in resourceTypes" :key="resourceType.key" class="bg-muted/50 rounded-lg p-2.5">
@@ -394,19 +407,14 @@
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
<!-- 详情弹窗 --> <!-- 详情弹窗 -->
<DetailDialog /> <DetailDialog />
<!-- 更新弹窗 --> <!-- 更新弹窗 -->
<UpdateDialog v-model:open="showUpdateDialog" :version-info="updateInfo" /> <UpdateDialog v-model:open="showUpdateDialog" :version-info="updateInfo" />
<!-- 弱引导提示系统 --> <!-- 弱引导提示系统 -->
<HintToast /> <HintToast />
<!-- Toast 通知 --> <!-- Toast 通知 -->
<Sonner position="top-center" /> <Sonner position="top-center" />
<!-- 重命名星球对话框 --> <!-- 重命名星球对话框 -->
<Dialog v-model:open="renameDialogOpen"> <Dialog v-model:open="renameDialogOpen">
<DialogContent class="sm:max-w-md"> <DialogContent class="sm:max-w-md">
@@ -2090,6 +2098,7 @@
} }
}) })
} }
// Android 返回键退出确认 // Android 返回键退出确认
if (Capacitor.isNativePlatform()) { if (Capacitor.isNativePlatform()) {
CapacitorApp.addListener('backButton', ({ canGoBack }) => { CapacitorApp.addListener('backButton', ({ canGoBack }) => {