From d0914fa6830bf6b6cf7bbf617f0aa336a9f88fb5 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Sat, 29 Aug 2026 23:40:26 +0800
Subject: [PATCH] support iOS 26 navbar

---
 src/components/navbar/DefaultNavBar.vue | 152 +++++++++++++++++
 src/components/navbar/iOS26NavBar.vue   | 209 ++++++++++++++++++++++++
 src/components/navbar/index.vue         | 148 +++++++++++++++++
 src/layout/MainLayout.vue               | 180 +-------------------
 4 files changed, 516 insertions(+), 173 deletions(-)
 create mode 100644 src/components/navbar/DefaultNavBar.vue
 create mode 100644 src/components/navbar/iOS26NavBar.vue
 create mode 100644 src/components/navbar/index.vue

diff --git a/src/components/navbar/DefaultNavBar.vue b/src/components/navbar/DefaultNavBar.vue
new file mode 100644
index 0000000..266ed44
--- /dev/null
+++ b/src/components/navbar/DefaultNavBar.vue
@@ -0,0 +1,152 @@
+<template>
+	<t-navbar
+		ref="navBarRef"
+		class="nav-bar"
+		:left-arrow="!!navBarStore.canBack"
+		:z-index="20"
+		@left-click="emit('back')"
+	>
+		<template #title>
+			<div id="app-nav-title" class="slot">
+				<span v-if="!navBarStore.customTitleVisible" class="nav-title-text" v-text="navBarStore.title" />
+			</div>
+		</template>
+		<template v-if="navBarStore.customRightVisible || navBarStore.rightIcon || navBarStore.rightText" #right>
+			<div class="nav-right-slot">
+				<div v-if="navBarStore.customRightVisible" id="app-nav-right" />
+				<t-badge
+					v-else-if="navBarStore.rightIcon && navBarStore.rightBadge !== undefined"
+					class="badge"
+					:count="navBarStore.rightBadge"
+					:max-count="99"
+					:show-zero="false"
+				>
+					<button
+						class="button"
+						type="button"
+						:disabled="navBarStore.rightDisabled"
+						@click="emit('rightAction')"
+					>
+						<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+					</button>
+				</t-badge>
+				<button
+					v-else-if="navBarStore.rightIcon"
+					class="button"
+					type="button"
+					:disabled="navBarStore.rightDisabled"
+					@click="emit('rightAction')"
+				>
+					<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+				</button>
+				<span
+					v-else
+					v-text="navBarStore.rightText"
+					class="nav-text"
+					:style="{ color: navBarStore.rightDisabled ? 'var(--td-text-color-disabled)' : navBarStore.rightTextColor ? navBarStore.rightTextColor : 'var(--td-text-color-primary, #333)' }"
+					:class="{ clickable: !!navBarStore.rightAction && !navBarStore.rightDisabled, disabled: navBarStore.rightDisabled }"
+					@click="emit('rightAction')"
+				></span>
+			</div>
+		</template>
+	</t-navbar>
+</template>
+
+<script setup lang="ts">
+import { useNavBarStore } from "@/store/navBarStore";
+
+type TNavBarRef = { $el?: HTMLElement };
+
+const emit = defineEmits<{
+	back: [];
+	rightAction: [];
+}>();
+
+const navBarStore = useNavBarStore();
+const navBarRef = ref<TNavBarRef>();
+
+function getElement(): HTMLElement | undefined {
+	return navBarRef.value?.$el?.querySelector(".t-navbar__content") || undefined;
+}
+
+defineExpose({
+	getElement
+});
+</script>
+
+<style scoped lang="less">
+.nav-bar {
+
+	:deep(.t-navbar__content) {
+		color: var(--tui-black, #000);
+		overflow: visible;
+		box-shadow: 0 3px 8px rgba(0, 0, 0, .1);
+		background: rgba(250, 250, 250, .8);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+	}
+
+	.badge {
+
+		:deep(.t-badge__content) {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.button {
+		padding: 0;
+		border: none;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--td-text-color-primary, #333);
+		background: transparent;
+
+		&:disabled {
+			color: var(--td-text-color-disabled);
+			cursor: not-allowed;
+		}
+	}
+
+	.slot {
+		min-width: 0;
+	}
+
+	.nav-title-text {
+		overflow: hidden;
+		display: block;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.nav-right-slot {
+		width: 6rem;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+
+		:deep(.t-badge) {
+			display: inline-flex;
+		}
+	}
+
+	.nav-text {
+		cursor: default;
+
+		&.clickable {
+			cursor: pointer;
+		}
+
+		&.disabled {
+			cursor: not-allowed;
+		}
+	}
+}
+
+:deep(.t-navbar__right),
+:deep(.t-navbar__right-content) {
+	overflow: visible;
+}
+</style>
diff --git a/src/components/navbar/iOS26NavBar.vue b/src/components/navbar/iOS26NavBar.vue
new file mode 100644
index 0000000..f599c1a
--- /dev/null
+++ b/src/components/navbar/iOS26NavBar.vue
@@ -0,0 +1,209 @@
+<template>
+	<div ref="navBarRef" class="ios26-nav-bar">
+		<div class="left">
+			<button
+				v-if="navBarStore.canBack"
+				class="pill back"
+				type="button"
+				@click="emit('back')"
+			>
+				<t-icon name="chevron-left" size="1.35rem" />
+			</button>
+		</div>
+		<div id="title" class="pill title">
+			<span
+				v-if="!navBarStore.customTitleVisible"
+				class="text"
+				v-text="navBarStore.title"
+			/>
+		</div>
+		<div class="right">
+			<div
+				v-if="navBarStore.customRightVisible || navBarStore.rightIcon || navBarStore.rightText"
+				class="pill slot"
+			>
+				<div v-if="navBarStore.customRightVisible" id="app-nav-right" />
+				<t-badge
+					v-else-if="navBarStore.rightIcon && navBarStore.rightBadge !== undefined"
+					class="badge"
+					:count="navBarStore.rightBadge"
+					:max-count="99"
+					:show-zero="false"
+				>
+					<button
+						class="button"
+						type="button"
+						:disabled="navBarStore.rightDisabled"
+						@click="emit('rightAction')"
+					>
+						<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+					</button>
+				</t-badge>
+				<button
+					v-else-if="navBarStore.rightIcon"
+					class="button"
+					type="button"
+					:disabled="navBarStore.rightDisabled"
+					@click="emit('rightAction')"
+				>
+					<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+				</button>
+				<span
+					v-else
+					v-text="navBarStore.rightText"
+					class="text"
+					:style="{ color: navBarStore.rightDisabled ? 'var(--td-text-color-disabled)' : navBarStore.rightTextColor ? navBarStore.rightTextColor : 'var(--td-text-color-primary, #333)' }"
+					:class="{ clickable: !!navBarStore.rightAction && !navBarStore.rightDisabled, disabled: navBarStore.rightDisabled }"
+					@click="emit('rightAction')"
+				></span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useNavBarStore } from "@/store/navBarStore";
+
+const emit = defineEmits<{
+	back: [];
+	rightAction: [];
+}>();
+
+const navBarStore = useNavBarStore();
+const navBarRef = ref<HTMLElement>();
+
+function getElement(): HTMLElement | undefined {
+	return navBarRef.value;
+}
+
+defineExpose({
+	getElement
+});
+</script>
+
+<style scoped lang="less">
+.ios26-nav-bar {
+	top: calc(env(safe-area-inset-top, 0px) + 2rem);
+	left: 0;
+	right: 0;
+	z-index: 20;
+	height: 2.5rem;
+	padding: 0 .75rem;
+	position: fixed;
+
+	.pill {
+		height: 2.5rem;
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		border-radius: 999px;
+		background: rgba(250, 250, 250, .72);
+		box-shadow: 0 .25rem .875rem rgba(0, 0, 0, .1);
+		backdrop-filter: blur(18px) saturate(180%);
+		-webkit-backdrop-filter: blur(18px) saturate(180%);
+	}
+
+	.left,
+	.right,
+	#title {
+		top: 0;
+		position: absolute;
+	}
+
+	.left {
+		left: .75rem;
+
+		.back {
+			width: 2.5rem;
+			justify-content: center;
+		}
+	}
+
+	.title {
+		left: 50%;
+		padding: 0 1rem;
+		min-width: 8rem;
+		max-width: calc(100vw - 4rem);
+		transform: translateX(-50%);
+		justify-content: center;
+
+		.text {
+			overflow: hidden;
+			color: var(--td-text-color-primary, #333);
+			display: block;
+			font-size: 1rem;
+			font-weight: 600;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.right {
+		right: .75rem;
+		display: flex;
+		justify-content: flex-end;
+
+		.button {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.slot {
+			gap: .5rem;
+			max-width: 8rem;
+			padding: 0 .75rem;
+			justify-content: flex-end;
+
+			:deep(.t-badge) {
+				display: inline-flex;
+			}
+		}
+
+		.badge {
+
+			:deep(.t-badge__content) {
+				display: flex;
+				align-items: center;
+			}
+		}
+
+		.text {
+			overflow: hidden;
+			cursor: default;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			&.clickable {
+				cursor: pointer;
+			}
+
+			&.disabled {
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.back,
+	.right .button {
+		padding: 0;
+		border: none;
+		color: var(--td-text-color-primary, #333);
+		background: rgba(250, 250, 250, .72);
+
+		&:disabled {
+			color: var(--td-text-color-disabled);
+			cursor: not-allowed;
+		}
+	}
+
+	@media (prefers-color-scheme: dark) {
+
+		.pill,
+		.back,
+		.button {
+			background: rgba(36, 36, 36, .72);
+		}
+	}
+}
+</style>
diff --git a/src/components/navbar/index.vue b/src/components/navbar/index.vue
new file mode 100644
index 0000000..adf9c5d
--- /dev/null
+++ b/src/components/navbar/index.vue
@@ -0,0 +1,148 @@
+<template>
+	<ios26-nav-bar
+		v-if="navBarStore.isShowing && isIos26Standalone"
+		ref="navBarRef"
+		@back="doBack"
+		@right-action="doRightAction"
+	/>
+	<default-nav-bar
+		v-else-if="navBarStore.isShowing"
+		ref="navBarRef"
+		@back="doBack"
+		@right-action="doRightAction"
+	/>
+</template>
+
+<script setup lang="ts">
+import DefaultNavBar from "@/components/navbar/DefaultNavBar.vue";
+import Ios26NavBar from "@/components/navbar/iOS26NavBar.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+
+type NavBarExpose = {
+	getElement: () => HTMLElement | undefined;
+};
+
+const emit = defineEmits<{
+	heightChange: [value: string];
+}>();
+
+const router = useRouter();
+const navBarStore = useNavBarStore();
+
+// ---------- 导航高度 ----------
+
+const navBarRef = ref<NavBarExpose>();
+const isIos26Standalone = ref(false);
+let navBarResizeObs: ResizeObserver | undefined;
+
+onMounted(async () => {
+	isIos26Standalone.value = isIos26StandaloneMode();
+	await syncNavBarHeight();
+});
+
+watch(() => navBarStore.isShowing, async () => {
+	await syncNavBarHeight();
+}, { flush: "post" });
+
+onUnmounted(() => {
+	if (navBarResizeObs) {
+		navBarResizeObs.disconnect();
+	}
+});
+
+async function syncNavBarHeight(): Promise<void> {
+	if (navBarResizeObs) {
+		navBarResizeObs.disconnect();
+		navBarResizeObs = undefined;
+	}
+
+	emitLayoutHeight();
+	await nextTick();
+
+	const navBarElement = navBarRef.value?.getElement();
+	if (!navBarElement) {
+		navBarStore.setHeight(0);
+		return;
+	}
+
+	navBarResizeObs = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			navBarStore.setHeight(entry.contentRect.height);
+			emitLayoutHeight();
+			return;
+		}
+	});
+	navBarResizeObs.observe(navBarElement);
+	navBarStore.setHeight(navBarElement.getBoundingClientRect().height);
+	emitLayoutHeight();
+}
+
+function emitLayoutHeight(): void {
+	if (!navBarStore.isShowing) {
+		emit("heightChange", "0px");
+		return;
+	}
+	if (isIos26Standalone.value) {
+		emit("heightChange", "calc(env(safe-area-inset-top, 0px) + 5.25rem)");
+		return;
+	}
+	emit("heightChange", "48px");
+}
+
+function isIos26StandaloneMode(): boolean {
+	const nav = window.navigator as Navigator & { standalone?: boolean };
+	const isStandalone = nav.standalone === true || window.matchMedia("(display-mode: standalone)").matches;
+	if (!isStandalone) {
+		return false;
+	}
+
+	return 26 <= getIosEffectiveMajorVersion();
+}
+
+/**
+ * iOS 26 standalone 的 UA 可能仍带 iPhone OS 18_x，但 Version 主版本会暴露新 WebApp 行为。
+ */
+function getIosEffectiveMajorVersion(): number {
+	const nav = window.navigator;
+	const userAgent = nav.userAgent;
+	const isIosLike = /iP(hone|od|ad)/.test(userAgent) || (nav.platform === "MacIntel" && 1 < nav.maxTouchPoints);
+	if (!isIosLike) {
+		return 0;
+	}
+
+	const osMajor = getUserAgentMajorVersion(userAgent, /OS (\d+)[._]/);
+	const versionMajor = getUserAgentMajorVersion(userAgent, /Version\/(\d+)[._]/);
+	return Math.max(osMajor, versionMajor);
+}
+
+function getUserAgentMajorVersion(userAgent: string, pattern: RegExp): number {
+	const match = userAgent.match(pattern);
+	if (!match) {
+		return 0;
+	}
+
+	return Number(match[1]) || 0;
+}
+
+// ---------- 导航返回 ----------
+
+function doBack(): void {
+	if (navBarStore.backTo) {
+		router.push(navBarStore.backTo);
+		navBarStore.setBackTo(undefined);
+		return;
+	}
+
+	router.back();
+}
+
+// ---------- 右侧操作 ----------
+
+async function doRightAction(): Promise<void> {
+	if (navBarStore.rightDisabled || !navBarStore.rightAction) {
+		return;
+	}
+
+	await navBarStore.rightAction();
+}
+</script>
diff --git a/src/layout/MainLayout.vue b/src/layout/MainLayout.vue
index 62eb536..49c608c 100644
--- a/src/layout/MainLayout.vue
+++ b/src/layout/MainLayout.vue
@@ -1,57 +1,6 @@
 <template>
 	<div class="main-layout">
-		<t-navbar
-			ref="navBarRef"
-			v-if="navBarStore.isShowing"
-			class="nav-bar"
-			:left-arrow="!!navBarStore.canBack"
-			:z-index="20"
-			@left-click="doBack"
-		>
-			<template #title>
-				<div id="app-nav-title" class="nav-title-slot">
-					<span v-if="!navBarStore.customTitleVisible" class="nav-title-text" v-text="navBarStore.title" />
-				</div>
-			</template>
-			<template v-if="navBarStore.customRightVisible || navBarStore.rightIcon || navBarStore.rightText" #right>
-				<div class="nav-right-slot">
-					<div v-if="navBarStore.customRightVisible" id="app-nav-right" />
-					<t-badge
-						v-else-if="navBarStore.rightIcon && navBarStore.rightBadge !== undefined"
-						class="badge"
-						:count="navBarStore.rightBadge"
-						:max-count="99"
-						:show-zero="false"
-					>
-						<button
-							class="nav-btn"
-							type="button"
-							:disabled="navBarStore.rightDisabled"
-							@click="!navBarStore.rightDisabled && navBarStore.rightAction?.()"
-						>
-							<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
-						</button>
-					</t-badge>
-					<button
-						v-else-if="navBarStore.rightIcon"
-						class="nav-btn"
-						type="button"
-						:disabled="navBarStore.rightDisabled"
-						@click="!navBarStore.rightDisabled && navBarStore.rightAction?.()"
-					>
-						<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
-					</button>
-					<span
-						v-else
-						v-text="navBarStore.rightText"
-						class="nav-text"
-						:style="{ color: navBarStore.rightDisabled ? 'var(--td-text-color-disabled)' : navBarStore.rightTextColor ? navBarStore.rightTextColor : '#333' }"
-						:class="{ clickable: !!navBarStore.rightAction && !navBarStore.rightDisabled, disabled: navBarStore.rightDisabled }"
-						@click="!navBarStore.rightDisabled && navBarStore.rightAction?.()"
-					></span>
-				</div>
-			</template>
-		</t-navbar>
+		<app-nav-bar @height-change="onChangeNavBarHeight" />
 		<div class="router-view">
 			<page-transition />
 		</div>
@@ -77,63 +26,24 @@
 </template>
 
 <script setup lang="ts">
+import AppNavBar from "@/components/navbar/index.vue";
 import PageTransition from "@/components/PageTransition.vue";
-import {useNavBarStore} from "@/store/navBarStore";
 import {useTabBarStore} from "@/store/tabBarStore";
 import { permissionCodes } from "@/utils/permission";
 import { useUserStore } from "timi-web-api";
 
 const route = useRoute();
 const router = useRouter();
-const navBarStore = useNavBarStore();
 const tabBarStore = useTabBarStore();
 const userStore = useUserStore();
 
-// ---------- 导航高度 ----------
-
-const navBarRef = ref();
-let navBarResizeObs: ResizeObserver | undefined;
-
-onMounted(() => {
-	if (!navBarRef.value) {
-		return;
-	}
-
-	navBarResizeObs = new ResizeObserver((entries) => {
-		for (const entry of entries) {
-			navBarStore.setHeight(entry.contentRect.height);
-			return;
-		}
-	});
-	navBarResizeObs.observe(navBarRef.value.$el.querySelector(".t-navbar__content"));
-});
-
-onUnmounted(() => {
-	if (navBarResizeObs) {
-		navBarResizeObs.disconnect();
-	}
-});
-
-// ---------- 导航返回 ----------
-
-function doBack(): void {
-	if (navBarStore.backTo) {
-		router.push(navBarStore.backTo);
-		navBarStore.setBackTo(undefined);
-		return;
-	}
-
-	router.back();
-}
-
 // ---------- 导航边距 ----------
 
-const navBarHeight = computed(() => {
-	if (navBarStore.isShowing) {
-		return "48px";
-	}
-	return "0px";
-});
+const navBarHeight = ref("0px");
+
+function onChangeNavBarHeight(value: string): void {
+	navBarHeight.value = value;
+}
 
 // ---------- Tab 切换 ----------
 
@@ -236,82 +146,6 @@ const tabBarHeight = computed(() => {
 	height: 100%;
 	transition: padding-bottom .24s ease;
 
-	.nav-bar {
-
-		:deep(.t-navbar__content) {
-			color: var(--tui-black, #000);
-			overflow: visible;
-			box-shadow: 0 3px 8px rgba(0, 0, 0, .1);
-			background: rgba(250, 250, 250, .8);
-			backdrop-filter: blur(10px);
-			-webkit-backdrop-filter: blur(10px);
-		}
-
-		.badge {
-
-			:deep(.t-badge__content) {
-				display: flex;
-				align-items: center;
-			}
-		}
-
-		.nav-btn {
-			padding: 0;
-			border: none;
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			color: var(--td-text-color-primary, #333);
-			background: transparent;
-
-			&:disabled {
-				color: var(--td-text-color-disabled);
-				cursor: not-allowed;
-			}
-		}
-
-		.nav-title-slot {
-			min-width: 0;
-		}
-
-		.nav-title-text {
-			overflow: hidden;
-			display: block;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-
-		.nav-right-slot {
-			width: 6rem;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: flex-end;
-
-			:deep(.t-badge) {
-				display: inline-flex;
-			}
-		}
-
-		.nav-text {
-			cursor: default;
-
-			&.clickable {
-				cursor: pointer;
-			}
-
-			&.disabled {
-				cursor: not-allowed;
-			}
-		}
-
-	}
-
-	:deep(.t-navbar__right),
-	:deep(.t-navbar__right-content) {
-		overflow: visible;
-	}
-
 	.router-view {
 		height: 100%;
 	}