From a6d5ab9166f902588297876124b438499210a75f Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Fri, 6 Jun 2025 04:20:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E4=B8=80=E7=9B=B4=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/css/body.css |  6 +--
 client/js/ui.js     | 91 ++++++++++++++++++++++++++-------------------
 2 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/client/css/body.css b/client/css/body.css
index 2baea6e..e4fae6c 100644
--- a/client/css/body.css
+++ b/client/css/body.css
@@ -20,10 +20,7 @@ body {
 	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 	transform-style: preserve-3d;
 	transform-origin: center center; /* 设置旋转中心为卡片中心 */
-}
-
-.flip-card.flipped .flip-card-inner {
-	transform: rotateX(180deg);
+	transform: rotateX(0deg); /* 初始状态 */
 }
 
 .flip-card-front,
@@ -32,6 +29,7 @@ body {
 	top: 0;
 	left: 0;
 	width: 100%;
+	height: 100%;
 	backface-visibility: hidden;
 	border-radius: 14px;
 	padding: 39px 15px 20px 15px;
diff --git a/client/js/ui.js b/client/js/ui.js
index 258ea71..f02caf8 100644
--- a/client/js/ui.js
+++ b/client/js/ui.js
@@ -591,18 +591,21 @@ export function initFlipCard() {
 	const backBtn = document.getElementById('back-btn');
 	
 	if (!flipCard || !helpBtn || !backBtn) return;
-		// 检测是否为触摸设备 / Detect touch device
+	
+	// 检测是否为触摸设备 / Detect touch device
 	// 更准确的触摸设备检测方法
 	const isTouchDevice = window.matchMedia('(hover: none) and (pointer: coarse)').matches;
 	
-	// 翻转到帮助页面 / Flip to help page
-	function flipToHelp() {
-		flipCard.classList.add('flipped');
-	}
+	// 当前旋转角度 / Current rotation angle
+	let currentRotation = 0;
 	
-	// 翻转回登录页面 / Flip back to login page
-	function flipToLogin() {
-		flipCard.classList.remove('flipped');
+	// 执行翻转操作 / Execute flip operation
+	function performFlip() {
+		currentRotation += 180;
+		const flipCardInner = flipCard.querySelector('.flip-card-inner');
+		if (flipCardInner) {
+			flipCardInner.style.transform = `rotateX(${currentRotation}deg)`;
+		}
 	}
 	
 	if (isTouchDevice) {
@@ -610,47 +613,59 @@ export function initFlipCard() {
 		helpBtn.addEventListener('click', (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			flipToHelp();
+			performFlip();
 		});
 		
 		backBtn.addEventListener('click', (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			flipToLogin();
-		});
-	} else {
-		// 桌面端：鼠标悬停切换 / Desktop: hover to toggle
-		let hoverTimeout;
+			performFlip();
+		});	} else {
+		// 桌面端：鼠标悬停持续旋转 / Desktop: hover to continuously rotate
+		let rotationInterval;
+		let isHovering = false;
 		
-		helpBtn.addEventListener('mouseenter', () => {
-			clearTimeout(hoverTimeout);
-			hoverTimeout = setTimeout(() => {
-				flipToHelp();
-			}, 30); // 30ms延迟，避免误触
+		// 开始持续旋转
+		function startContinuousRotation() {
+			if (isHovering) return; // 避免重复启动
+			isHovering = true;
+			
+			// 立即执行一次旋转
+			performFlip();
+			
+			// 然后每800ms旋转一次（与CSS动画时长一致）
+			rotationInterval = setInterval(() => {
+				if (isHovering) {
+					performFlip();
+				}
+			}, 800);
+		}
+		
+		// 停止持续旋转
+		function stopContinuousRotation() {
+			isHovering = false;
+			if (rotationInterval) {
+				clearInterval(rotationInterval);
+				rotationInterval = null;
+			}
+		}
+		
+		// 帮助按钮事件
+		helpBtn.addEventListener('mouseenter', startContinuousRotation);
+		helpBtn.addEventListener('mouseleave', stopContinuousRotation);
+		helpBtn.addEventListener('click', (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			performFlip();
 		});
 		
-		helpBtn.addEventListener('mouseleave', () => {
-			clearTimeout(hoverTimeout);
-		});
-		
-		// 鼠标离开卡片时返回登录页面
-		flipCard.addEventListener('mouseleave', () => {
-			clearTimeout(hoverTimeout);
-			hoverTimeout = setTimeout(() => {
-				flipToLogin();
-			}, 30); // 30ms延迟，给用户时间查看内容
-		});
-		
-		// 鼠标进入卡片时取消返回
-		flipCard.addEventListener('mouseenter', () => {
-			clearTimeout(hoverTimeout);
-		});
-		
-		// 返回按钮点击事件（桌面端也可以点击）
+		// 返回按钮事件（同样的逻辑）
+		backBtn.addEventListener('mouseenter', startContinuousRotation);
+		backBtn.addEventListener('mouseleave', stopContinuousRotation);
 		backBtn.addEventListener('click', (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			flipToLogin();
+			performFlip();
 		});
 	}
 }
\ No newline at end of file