@@ -557,6 +557,10 @@ export function initLoginForm() {
557557 // Only initialize if login form is empty
558558 loginFormContainer . innerHTML = generateLoginForm ( false ) ;
559559 }
560+
561+ // 为登录页面添加class，用于手机适配
562+ // Add class to login page for mobile adaptation
563+ document . body . classList . add ( 'login-page' ) ;
560564}
561565
562566// Listen for language change events to refresh UI
@@ -577,4 +581,76 @@ window.addEventListener('regenerateLoginForm', () => {
577581 if ( loginFormContainer ) {
578582 loginFormContainer . innerHTML = generateLoginForm ( false ) ;
579583 }
580- } ) ;
584+ } ) ;
585+
586+ // 初始化翻转卡片功能
587+ // Initialize flip card functionality
588+ export function initFlipCard ( ) {
589+ const flipCard = document . getElementById ( 'flip-card' ) ;
590+ const helpBtn = document . getElementById ( 'help-btn' ) ;
591+ const backBtn = document . getElementById ( 'back-btn' ) ;
592+
593+ if ( ! flipCard || ! helpBtn || ! backBtn ) return ;
594+ // 检测是否为触摸设备 / Detect touch device
595+ // 更准确的触摸设备检测方法
596+ const isTouchDevice = window . matchMedia ( '(hover: none) and (pointer: coarse)' ) . matches ;
597+
598+ // 翻转到帮助页面 / Flip to help page
599+ function flipToHelp ( ) {
600+ flipCard . classList . add ( 'flipped' ) ;
601+ }
602+
603+ // 翻转回登录页面 / Flip back to login page
604+ function flipToLogin ( ) {
605+ flipCard . classList . remove ( 'flipped' ) ;
606+ }
607+
608+ if ( isTouchDevice ) {
609+ // 移动端：点击切换 / Mobile: click to toggle
610+ helpBtn . addEventListener ( 'click' , ( e ) => {
611+ e . preventDefault ( ) ;
612+ e . stopPropagation ( ) ;
613+ flipToHelp ( ) ;
614+ } ) ;
615+
616+ backBtn . addEventListener ( 'click' , ( e ) => {
617+ e . preventDefault ( ) ;
618+ e . stopPropagation ( ) ;
619+ flipToLogin ( ) ;
620+ } ) ;
621+ } else {
622+ // 桌面端：鼠标悬停切换 / Desktop: hover to toggle
623+ let hoverTimeout ;
624+
625+ helpBtn . addEventListener ( 'mouseenter' , ( ) => {
626+ clearTimeout ( hoverTimeout ) ;
627+ hoverTimeout = setTimeout ( ( ) => {
628+ flipToHelp ( ) ;
629+ } , 30 ) ; // 30ms延迟，避免误触
630+ } ) ;
631+
632+ helpBtn . addEventListener ( 'mouseleave' , ( ) => {
633+ clearTimeout ( hoverTimeout ) ;
634+ } ) ;
635+
636+ // 鼠标离开卡片时返回登录页面
637+ flipCard . addEventListener ( 'mouseleave' , ( ) => {
638+ clearTimeout ( hoverTimeout ) ;
639+ hoverTimeout = setTimeout ( ( ) => {
640+ flipToLogin ( ) ;
641+ } , 30 ) ; // 30ms延迟，给用户时间查看内容
642+ } ) ;
643+
644+ // 鼠标进入卡片时取消返回
645+ flipCard . addEventListener ( 'mouseenter' , ( ) => {
646+ clearTimeout ( hoverTimeout ) ;
647+ } ) ;
648+
649+ // 返回按钮点击事件（桌面端也可以点击）
650+ backBtn . addEventListener ( 'click' , ( e ) => {
651+ e . preventDefault ( ) ;
652+ e . stopPropagation ( ) ;
653+ flipToLogin ( ) ;
654+ } ) ;
655+ }
656+ }
0 commit comments