fix FileExplorer style

src/layout/MainLayout.vue

@@ -27,7 +27,7 @@
 			:disabled="!tabBarStore.isShowing"
 			@change="onChangeTab"
 		>
-			<t-tab-bar-item class="bg-transparent" v-for="item in tabList" :key="item.value" :value="item.value">
+			<t-tab-bar-item class="item g-transparent" v-for="item in tabList" :key="item.value" :value="item.value">
 				<template #icon>
 					<t-icon :name="item.icon" />
 				</template>
@@ -144,10 +144,11 @@ const bodyHeight = computed(() => {
 
 <style scoped lang="less">
 .main-layout {
+	--safe-top: env(safe-area-inset-top, 0px);
 	box-sizing: border-box;
 	position: relative;
 	min-height: 100vh;
-	padding-top: v-bind(navBarPadding);
+	padding-top: calc(v-bind(navBarPadding) + var(--safe-top));
 	padding-bottom: v-bind(tabBarPadding);
 	transition: padding-bottom .24s ease;
 
@@ -178,10 +179,10 @@ const bodyHeight = computed(() => {
 		width: 100%;
 		position: relative;
 		z-index: 1;
-		min-height: v-bind(bodyHeight);
+		min-height: calc(v-bind(bodyHeight) - var(--safe-top));
 
 		&.is-fixed-height {
-			height: v-bind(bodyHeight);
+			height: calc(v-bind(bodyHeight) - var(--safe-top));
 			min-height: 0;
 			overflow: hidden;
 		}
@@ -203,6 +204,30 @@ const bodyHeight = computed(() => {
 			pointer-events: none;
 			transform: translateY(calc(100% + 1rem));
 		}
+
+		.item {
+			margin: 0;
+			padding: 0;
+			--td-tab-bar-height: 52px;
+
+			:deep(.t-tab-bar-item__content) {
+				border-radius: 0;
+			}
+
+			&:first-child {
+
+				:deep(.t-tab-bar-item__content) {
+					border-radius: 99px 0 0 99px;
+				}
+			}
+
+			&:last-child {
+
+				:deep(.t-tab-bar-item__content) {
+					border-radius: 0 99px 99px 0;
+				}
+			}
+		}
 	}
 }
 

src/pages/file/FileExplorerList.vue

@@ -1,5 +1,5 @@
 <template>
-	<t-cell-group theme="card" class="list-view">
+	<t-cell-group theme="card" class="file-explorer-list">
 		<recycle-scroller
 			class="scroller"
 			:items="items"
@@ -7,8 +7,9 @@
 			key-field="path"
 			v-slot="{ item }"
 		>
-			<t-swipe-cell class="swipe">
+			<t-swipe-cell>
 				<t-cell
+					class="cell"
 					:title="item.name"
 					:arrow="item.type === 'dir'"
 					:note="item.size"
@@ -37,15 +38,22 @@ const emit = defineEmits<{
 </script>
 
 <style scoped lang="less">
-.list-view {
+.file-explorer-list {
 	overflow: hidden;
 
 	:deep(.t-cell-group) {
 		margin: 0;
 	}
-}
 
-.scroller {
+	.scroller {
-	height: 100%;
+		height: 100%;
+
+		.vue-recycle-scroller__item-view {
+
+			&:last-child .cell:after {
+				border-bottom: 0;
+			}
+		}
+	}
 }
 </style>

src/pages/file/FileExplorerPage.vue

@@ -1,15 +1,5 @@
 <template>
 	<div class="page">
-		<section v-if="currentSegments.length" class="go-up" @click="openParent">
-			<div class="icon dir">
-				<t-icon name="rollback" />
-			</div>
-			<div class="meta">
-				<p class="name">返回上一级</p>
-				<p class="desc">当前目录的父级目录</p>
-			</div>
-		</section>
-
 		<section v-if="currentItems.length" class="content">
 			<file-explorer-list
 				v-if="displayMode === 'list'"
@@ -22,7 +12,6 @@
 				@open="openItem"
 			/>
 		</section>
-
 		<t-empty v-else description="当前目录为空" />
 	</div>
 </template>
@@ -57,7 +46,7 @@ const emit = defineEmits<{
 const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
-const navBarRightOwner = "file-explorer-page";
+const navBarRightOwner = `file-explorer-page-${Math.random().toString(36).slice(2)}`;
 
 const fileTree: FileEntry[] = [
 	{
@@ -184,15 +173,21 @@ const navBarRightRenderer = defineComponent({
 	name: "file-explorer-nav-right",
 	setup() {
 		const buttonComponent = resolveComponent("t-button");
+		const iconComponent = resolveComponent("t-icon");
 
 		return () => h(buttonComponent, {
 			size: "small",
 			variant: "text",
 			theme: "primary",
 			class: "nav-switch",
+			shape: "square",
+			"aria-label": displayModeActionText.value,
 			onClick: toggleDisplayMode
 		}, {
-			default: () => displayModeActionText.value
+			icon: () => h(iconComponent, {
+				name: displayMode.value === "list" ? "grid-view" : "view-list",
+				size: "1.5rem"
+			})
 		});
 	}
 });
@@ -333,6 +328,8 @@ async function syncPath(nextSegments: string[]): Promise<void> {
 
 	.nav-switch {
 		padding: 0;
+		width: 2rem;
+		height: 2rem;
 	}
 
 	.go-up {