fix FileExplorer layout

src/components/PageTransition.vue

@@ -64,7 +64,7 @@ function calcDepth(sourceRoute: RouteLocationNormalized): number {
 }
 
 const unregisterGuard = router.beforeEach((to, from) => {
-	if (to.meta.tabBarVisible && from.meta.tabBarVisible) {
+	if (to.meta.tabBarRoot && from.meta.tabBarRoot) {
 		transitionName.value = "";
 		hasTransition.value = false;
 		return;
@@ -100,14 +100,16 @@ onUnmounted(() => {
 
 .page-transition {
 	width: 100%;
-	height: 100%;
+	display: grid;
+	min-height: 100%;
 	position: relative;
 	overflow-x: hidden;
 
 	.pages {
-		inset: 0;
-		height: 100%;
-		position: absolute;
+		grid-area: 1 / 1;
+		width: 100%;
+		min-height: 100%;
+		position: relative;
 		background: v-bind(pageBackground);
 		overflow-x: hidden;
 	}
@@ -116,10 +118,9 @@ onUnmounted(() => {
 	.push-left-leave-active,
 	.push-right-enter-active,
 	.push-right-leave-active {
-		inset: 0;
+		grid-area: 1 / 1;
 		width: 100%;
-		height: 100%;
-		position: absolute;
+		min-height: 100%;
 		transition: transform @duration @easing, opacity .2s linear;
 		backface-visibility: hidden;
 	}

src/layout/MainLayout.vue

@@ -14,7 +14,7 @@
 				</div>
 			</template>
 		</t-navbar>
-		<div class="router-view">
+		<div :class="{ 'is-fixed-height': isContentFixedHeight }" class="router-view">
 			<page-transition />
 		</div>
 		<t-tab-bar
@@ -82,7 +82,7 @@ function doBack(): void {
 
 const navBarPadding = computed(() => {
 	if (navBarStore.isShowing) {
-		return "3rem";
+		return `${navBarStore.height || 48}px`;
 	}
 
 	return "0";
@@ -97,10 +97,18 @@ const tabList = [
 	{ value: "/settings", icon: "setting" }
 ];
 
+function resolveTabValue(path: string): string {
+	if (path === "/" || path.startsWith("/files/")) {
+		return "/";
+	}
+
+	return path;
+}
+
 watch(
 	() => route.path,
 	(newPath: string) => {
-		tabVal.value = newPath;
+		tabVal.value = resolveTabValue(newPath);
 	},
 	{ immediate: true }
 );
@@ -125,19 +133,29 @@ const tabBarPadding = computed(() => {
 	return "0rem";
 });
 
+const isContentFixedHeight = computed(() => {
+	return route.meta.contentFixedHeight === true;
+});
+
 const bodyHeight = computed(() => {
-	return `calc(100% - ${navBarPadding.value} - ${tabBarPadding.value})`;
+	return `calc(100vh - ${navBarPadding.value} - ${tabBarPadding.value})`;
 });
 </script>
 
 <style scoped lang="less">
 .main-layout {
-	height: v-bind(bodyHeight);
+	box-sizing: border-box;
+	position: relative;
+	min-height: 100vh;
 	padding-top: v-bind(navBarPadding);
 	padding-bottom: v-bind(tabBarPadding);
 	transition: padding-bottom .24s ease;
 
 	.nav-bar {
+		top: 0;
+		left: 0;
+		right: 0;
+		position: fixed;
 		z-index: 999;
 
 		:deep(.t-navbar__content) {
@@ -157,11 +175,24 @@ const bodyHeight = computed(() => {
 	}
 
 	.router-view {
-		height: 100%;
+		width: 100%;
+		position: relative;
+		z-index: 1;
+		min-height: v-bind(bodyHeight);
+
+		&.is-fixed-height {
+			height: v-bind(bodyHeight);
+			min-height: 0;
+			overflow: hidden;
+		}
 	}
 
 	.tab-bar {
 		bottom: 1rem;
+		left: 1rem;
+		right: 1rem;
+		position: fixed;
+		z-index: 1000;
 		opacity: 1;
 		transform: translateY(0);
 		transition: opacity 520ms, transform 520ms var(--tui-bezier);

src/pages/file/FileExplorerPage.vue

@@ -325,7 +325,7 @@ async function syncPath(nextSegments: string[]): Promise<void> {
 <style scoped lang="less">
 .page {
 	gap: 1rem;
-	height: 100%;
+	height: calc(100% - 2rem);
 	display: flex;
 	padding: 1rem;
 	overflow: hidden;

src/router/index.ts

@@ -58,7 +58,10 @@ const router = createRouter({
 								navBarVisible: true,
 								navBarCanBack: true,
 								navBarTitle: "文件",
-								tabBarVisible: false
+								tabBarVisible: true,
+								tabBarPadding: false,
+								contentFixedHeight: true,
+								bodyBackground: "#F4F4F4"
 							},
 							component: FileExplorerPage
 						},

src/router/tabs.ts

@@ -12,7 +12,9 @@ const tabs: RouteRecordRaw[] = [
 			navBarVisible: true,
 			navBarTitle: "文件",
 			tabBarVisible: true,
-			tabBarPadding: true,
+			tabBarRoot: true,
+			tabBarPadding: false,
+			contentFixedHeight: true,
 			bodyBackground: "#F4F4F4"
 		},
 		component: FilePage
@@ -25,6 +27,7 @@ const tabs: RouteRecordRaw[] = [
 			navBarVisible: true,
 			navBarTitle: "状态",
 			tabBarVisible: true,
+			tabBarRoot: true,
 			tabBarPadding: true,
 			bodyBackground: "#FFF"
 		},
@@ -38,6 +41,7 @@ const tabs: RouteRecordRaw[] = [
 			navBarVisible: true,
 			navBarTitle: "设置",
 			tabBarVisible: true,
+			tabBarRoot: true,
 			tabBarPadding: true,
 			bodyBackground: "#FFF"
 		},

src/types/router.ts

@@ -9,6 +9,8 @@ declare module "vue-router" {
 		navBarTitle?: string;
 		tabBarVisible?: boolean;
 		tabBarPadding?: boolean;
+		tabBarRoot?: boolean;
+		contentFixedHeight?: boolean;
 		bodyBackground?: string;
 	}
 }