💋 Sync 2026-11-03 13:49:21

luci-theme-liquid/htdocs/luci-static/liquid/main.js

@@ -1910,6 +1910,95 @@
 		m.insertBefore(w.firstChild, m.firstChild);
 	}
 
+	/* ===== 登录页：卡片与固定页脚的重叠检测（Duo 外屏/内屏、iOS 工具栏展开等）=====
+	   起因：外屏登录框下半截被页脚压住（连登录按钮都被盖）、内屏轻微覆盖。
+	   为什么不用 UA/分辨率判断设备：iOS 的 EdgiOS UA 只有 OS 版本+浏览器构建号，
+	   读不到机型与屏幕形态；分辨率能区分内外屏但会误伤同尺寸的其它设备。
+	   这里直接量几何——整个 stack（顶部胶囊+卡片）的上下边 vs 视口安全区与
+	   页脚顶线（fixed bottom:4+自身高），重叠才分级处理：
+	     clear=页脚留净空(卡片上移) / fit=整栈 zoom 等比缩小(不滚动、页脚始终
+	   可见、顶部胶囊不裁)。不重叠的平台零变化。监听 resize / orientationchange
+	   / visualViewport 以覆盖 iOS 工具栏展开收起引起的视口变化。 */
+	function syncLoginFooterClearance() {
+		var body = document.body;
+		if (!body || !body.classList.contains('liquid-login'))
+			return;
+		var overlay = document.getElementById('liquid-login');
+		var stack = overlay && overlay.querySelector('.liquid-login-stack');
+		var card = stack && stack.querySelector('.modal.login');
+		var foot = document.querySelector('p.luci');
+		if (!overlay || !stack || !card || !foot)
+			return;
+
+		/* 复位到"零变化"基线 */
+		body.classList.remove('liquid-login-clear');
+		body.classList.remove('liquid-login-fit');
+		stack.style.zoom = '';
+
+		function geom() {
+			var sr = stack.getBoundingClientRect();
+			var fh = foot.offsetHeight || 0;
+			var vh = overlay.clientHeight;
+			return {
+				top: sr.top,
+				bottom: sr.bottom,
+				height: sr.height,
+				footTop: vh - 4 - fh,
+				vh: vh
+			};
+		}
+		function fits() {
+			var g = geom();
+			/* 顶部不被裁(留8px)、底部不进页脚区(留8px气口)、卡片不超高 */
+			return g.top >= 8 && g.bottom <= g.footTop - 8 &&
+				card.getBoundingClientRect().height <= g.vh - 8;
+		}
+
+		if (fits())
+			return;                       /* 不重叠 → 一个 class 都不加（其它平台零变化） */
+
+		/* 级1 clear：给页脚留净空，卡片整体上移一点（解决轻微覆盖） */
+		body.classList.add('liquid-login-clear');
+		if (fits())
+			return;
+
+		/* 级2 fit：整栈等比缩小（zoom）——小屏不滚动、页脚固定可见、
+		   顶部胶囊不被裁（用户要求：缩小登录页所有元素比例）。
+		   注意 flex 是垂直居中：栈底 = (内容高+缩放后高)/2，不能按顶对齐公式
+		   算，改为"保留 clear 净空 + 逐次收敛"——每缩 8% 复测一次直到 fits。 */
+		body.classList.add('liquid-login-clear');   /* fit 期间保留净空，整体上移 */
+		body.classList.add('liquid-login-fit');
+		var scale = 1;
+		stack.style.zoom = scale;
+		for (var i = 0; i < 12 && !fits(); i++) {
+			scale = Math.max(scale * 0.92, 0.4);   /* 0.4 兜底，避免缩到不可读 */
+			stack.style.zoom = scale;
+			if (scale <= 0.401)
+				break;
+		}
+	}
+
+	function scheduleLoginFooterClearance() {
+		if (window.requestAnimationFrame)
+			window.requestAnimationFrame(syncLoginFooterClearance);
+		else
+			syncLoginFooterClearance();
+	}
+
+	scheduleLoginFooterClearance();
+	window.addEventListener('load', scheduleLoginFooterClearance);
+	window.addEventListener('resize', scheduleLoginFooterClearance);
+	window.addEventListener('orientationchange', scheduleLoginFooterClearance);
+	if (window.visualViewport)
+		window.visualViewport.addEventListener('resize', scheduleLoginFooterClearance);
+	setTimeout(scheduleLoginFooterClearance, 300);   /* 字体/布局落定后复核 */
+	if (window.MutationObserver) {
+		/* 输密码报错会让卡片变高 → 重新判定 */
+		new MutationObserver(scheduleLoginFooterClearance)
+			.observe(document.getElementById('liquid-login') || document.body,
+				{ childList: true, subtree: true, characterData: true });
+	}
+
 	/* 窗口尺寸变化时重新计算已打开下拉框的方向 */
 	window.addEventListener('resize', function () {
 		setTimeout(adjustDropdownDirection, 60);