Widget:GameSwitcher - 版本历史

2026年6月20日 (六) 15:23 弃权者

2026-06-20T15:23:40Z

←上一版本		2026年6月20日 (六) 23:23的版本
第48行：		第48行：
	function moveIndicator( tab ) {		function moveIndicator( tab ) {
	var indicator = document.getElementById( 'gf-tab-indicator' );		var indicator = document.getElementById( 'gf-tab-indicator' );
	~~var switcher = document.getElementById( 'gf-switcher' );~~		if ( !indicator ) { return; }
	if ( !indicator ~~\|\| !switcher~~ ) { return; }
	~~/* 让switcher作为定位基准 */~~
	~~var switcherLeft = switcher.getBoundingClientRect().left;~~
	~~var tabLeft = tab.getBoundingClientRect().left;~~
	indicator.style.width = tab.offsetWidth + 'px';		indicator.style.width = tab.offsetWidth + 'px';
	indicator.style.transform = 'translateX(' + ~~( tabLeft - switcherLeft )~~ + 'px)';		indicator.style.transform = 'translateX(' + tab.offsetLeft + 'px)';
	}		}

弃权者：撤销弃权者（讨论）的修订版本18930

2026-06-20T15:22:02Z

撤销弃权者（讨论）的修订版本18930

←上一版本		2026年6月20日 (六) 23:22的版本
第137行：		第137行：
	applyFadeColor();		applyFadeColor();

	// var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );		var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
	// if ( firstActive ) {		if ( firstActive ) {
	// setTimeout( function () { moveIndicator( firstActive ); }, 50 );		setTimeout( function () { moveIndicator( firstActive ); }, 50 );
	// }		}

	~~var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );~~
	~~if ( firstActive ) {~~
	~~setTimeout( function () {~~
	~~var switcher = document.getElementById( 'gf-switcher' );~~
	~~var sr = switcher.getBoundingClientRect();~~
	~~var tr = firstActive.getBoundingClientRect();~~
	~~console.log( 'switcher left:', sr.left );~~
	~~console.log( 'tab left:', tr.left );~~
	~~console.log( 'tab width:', firstActive.offsetWidth );~~
	~~console.log( 'calculated offset:', tr.left - sr.left );~~
	~~console.log( 'indicator:', document.getElementById( 'gf-tab-indicator' ) );~~
	~~moveIndicator( firstActive );~~
	~~}, 50 );~~
	}
	tabs.forEach( function ( tab ) {		tabs.forEach( function ( tab ) {
	tab.addEventListener( 'click', function () {		tab.addEventListener( 'click', function () {

2026年6月20日 (六) 15:18 弃权者

2026-06-20T15:18:18Z

←上一版本		2026年6月20日 (六) 23:18的版本
第137行：		第137行：
	applyFadeColor();		applyFadeColor();

	var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );		// var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
	if ( firstActive ) {		// if ( firstActive ) {
	setTimeout( function () { moveIndicator( firstActive ); }, 50 );		// setTimeout( function () { moveIndicator( firstActive ); }, 50 );
	}		// }

			var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
			if ( firstActive ) {
			setTimeout( function () {
			var switcher = document.getElementById( 'gf-switcher' );
			var sr = switcher.getBoundingClientRect();
			var tr = firstActive.getBoundingClientRect();
			console.log( 'switcher left:', sr.left );
			console.log( 'tab left:', tr.left );
			console.log( 'tab width:', firstActive.offsetWidth );
			console.log( 'calculated offset:', tr.left - sr.left );
			console.log( 'indicator:', document.getElementById( 'gf-tab-indicator' ) );
			moveIndicator( firstActive );
			}, 50 );
			}
	tabs.forEach( function ( tab ) {		tabs.forEach( function ( tab ) {
	tab.addEventListener( 'click', function () {		tab.addEventListener( 'click', function () {

2026年6月20日 (六) 15:16 弃权者

2026-06-20T15:16:17Z

←上一版本		2026年6月20日 (六) 23:16的版本
第48行：		第48行：
	function moveIndicator( tab ) {		function moveIndicator( tab ) {
	var indicator = document.getElementById( 'gf-tab-indicator' );		var indicator = document.getElementById( 'gf-tab-indicator' );
	if ( !indicator ) { return; }		var switcher = document.getElementById( 'gf-switcher' );
			if ( !indicator \|\| !switcher ) { return; }
			/* 让switcher作为定位基准 */
			var switcherLeft = switcher.getBoundingClientRect().left;
			var tabLeft = tab.getBoundingClientRect().left;
	indicator.style.width = tab.offsetWidth + 'px';		indicator.style.width = tab.offsetWidth + 'px';
	indicator.style.transform = 'translateX(' + ~~tab.offsetLeft~~ + 'px)';		indicator.style.transform = 'translateX(' + ( tabLeft - switcherLeft ) + 'px)';
	}		}

2026年6月20日 (六) 14:33 弃权者

2026-06-20T14:33:14Z

←上一版本		2026年6月20日 (六) 22:33的版本
第46行：		第46行：
	}		}

	function moveIndicator( tab ) {		function moveIndicator( tab ) {
	var indicator = document.getElementById( 'gf-tab-indicator' );		var indicator = document.getElementById( 'gf-tab-indicator' );
	~~var switcher = document.getElementById( 'gf-switcher' );~~		if ( !indicator ) { return; }
	if ( !indicator ~~\|\| !switcher~~ ) { return; }		indicator.style.width = tab.offsetWidth + 'px';
	~~var sr = switcher.getBoundingClientRect();~~		indicator.style.transform = 'translateX(' + tab.offsetLeft + 'px)';
	~~var tr = tab.getBoundingClientRect();~~		}
	indicator.style.width = tr.~~width~~ + 'px';
	indicator.style.transform = 'translateX(' + ~~( tr.left - sr~~.~~left )~~ + 'px)';
	}

	var currentGame = 'gf';		var currentGame = 'gf';

2026年6月20日 (六) 14:23 弃权者

2026-06-20T14:23:39Z

←上一版本		2026年6月20日 (六) 22:23的版本
第1行：		第1行：
	<noinclude>		<noinclude>
	~~本Widget为~~少女前线系列多游戏首页提供切~~换交互逻辑~~。		少女前线系列多游戏首页切换Widget。调用方式：<code><nowiki>{{#widget:GameSwitcher}}</nowiki></code>
	~~不接受参数，直接在首页~~调用：<code><nowiki>{{#widget:~~GFHomepageSwitcher~~}}</nowiki></code>
	</noinclude><includeonly><script>		</noinclude><includeonly><script>
	( function () {		( function () {
第59行：		第58行：
	var currentGame = 'gf';		var currentGame = 'gf';
	var switching = false;		var switching = false;
	var pending = null; ~~/* { game, tabEl } */~~		var pending = null;

	function doSwitch( game, tabEl ) {		function doSwitch( game, tabEl ) {
第69行：		第68行：
	var inSlide = document.getElementById( 'hero-' + game );		var inSlide = document.getElementById( 'hero-' + game );

	~~/* Ken Burns重置 */~~
	~~if ( inSlide ) {~~
	~~var inFg = inSlide.querySelector( '.gf-hero-fg' );~~
	~~if ( inFg ) {~~
	~~inFg.style.transition = 'none';~~
	~~inFg.style.transform = window.innerWidth > 1200~~
	~~? 'translateX(-50%) scale(1.06)'~~
	~~: 'scale(1.06)';~~
	~~void inFg.offsetWidth;~~
	~~inFg.style.transition = '';~~
	}
	}

	~~/* 交叉淡入淡出 */~~
	if ( inSlide ) {		if ( inSlide ) {
	inSlide.style.zIndex = '1';		inSlide.style.zIndex = '1';
第92行：		第77行：
	}		}

	~~/* tab与指示器立即响应，不等动画 */~~
	tabs.forEach( function ( t ) {		tabs.forEach( function ( t ) {
	var on = t.getAttribute( 'data-game' ) === game;		var on = t.getAttribute( 'data-game' ) === game;
第100行：		第84行：
	if ( tabEl ) { moveIndicator( tabEl ); }		if ( tabEl ) { moveIndicator( tabEl ); }

	~~/* 内容面板立即切换 */~~
	panels.forEach( function ( p ) {		panels.forEach( function ( p ) {
	p.classList.toggle( 'active', p.id === 'content-' + game );		p.classList.toggle( 'active', p.id === 'content-' + game );
第111行：		第94行：
	slides.forEach( function ( s ) { s.style.zIndex = ''; } );		slides.forEach( function ( s ) { s.style.zIndex = ''; } );
	switching = false;		switching = false;

	~~/* 动画结束后执行期间积压的最后一次请求 */~~
	if ( pending && pending.game !== currentGame ) {		if ( pending && pending.game !== currentGame ) {
	var p = pending;		var p = pending;
第120行：		第101行：
	pending = null;		pending = null;
	}		}
	}, ~~720~~ );		}, 520 );
	}		}

第126行：		第107行：
	if ( game === currentGame ) { return; }		if ( game === currentGame ) { return; }
	if ( switching ) {		if ( switching ) {
	~~/* 记录最新目标，覆盖之前积压的 */~~
	pending = { game: game, tabEl: tabEl };		pending = { game: game, tabEl: tabEl };
	~~/* 指示器和tab状态立即跟手 */~~
	var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );		var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
	tabs.forEach( function ( t ) {		tabs.forEach( function ( t ) {

2026年6月20日 (六) 14:15 弃权者

2026-06-20T14:15:59Z

←上一版本		2026年6月20日 (六) 22:15的版本
第47行：		第47行：
	}		}

	~~/* 滑动指示器：根据当前active tab的位置和宽度移动 */~~
	function moveIndicator( tab ) {		function moveIndicator( tab ) {
	var indicator = document.getElementById( 'gf-tab-indicator' );		var indicator = document.getElementById( 'gf-tab-indicator' );
	var switcher = document.getElementById( 'gf-switcher' );		var switcher = document.getElementById( 'gf-switcher' );
	if ( !indicator \|\| !switcher ) { return; }		if ( !indicator \|\| !switcher ) { return; }
	var ~~switcherRect~~ = switcher.getBoundingClientRect();		var sr = switcher.getBoundingClientRect();
	var ~~tabRect~~ = tab.getBoundingClientRect();		var tr = tab.getBoundingClientRect();
	indicator.style.width = ~~tabRect~~.width + 'px';		indicator.style.width = tr.width + 'px';
	indicator.style.transform = 'translateX(' + ( ~~tabRect~~.left - ~~switcherRect~~.left ) + 'px)';		indicator.style.transform = 'translateX(' + ( tr.left - sr.left ) + 'px)';
	}		}

	var currentGame = 'gf';		var currentGame = 'gf';
	var switching = false;		var switching = false;
			var pending = null; /* { game, tabEl } */
	~~function switchGame(~~ game, tabEl ~~) {~~
	~~if ( game === currentGame \|\| switching ) { return;~~ }
	~~switching = true;~~

			function doSwitch( game, tabEl ) {
	var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );		var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
	var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );		var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
第72行：		第69行：
	var inSlide = document.getElementById( 'hero-' + game );		var inSlide = document.getElementById( 'hero-' + game );

	/* ~~先把新slide的fg~~重置~~为缩放状态，让Ken Burns重新触发~~ */		/* Ken Burns重置 */
	if ( inSlide ) {		if ( inSlide ) {
	var inFg = inSlide.querySelector( '.gf-hero-fg' );		var inFg = inSlide.querySelector( '.gf-hero-fg' );
	if ( inFg ) {		if ( inFg ) {
	inFg.style.transition = 'none';		inFg.style.transition = 'none';
	inFg.style.transform = window.innerWidth > 1200		inFg.style.transform = window.innerWidth > 1200
	? 'translateX(-50%) scale(1.06)'		? 'translateX(-50%) scale(1.06)'
	: 'scale(1.06)';		: 'scale(1.06)';
第95行：		第92行：
	}		}

	/* tab状态 */		/* tab与指示器立即响应，不等动画 */
	tabs.forEach( function ( t ) {		tabs.forEach( function ( t ) {
	var on = t.getAttribute( 'data-game' ) === game;		var on = t.getAttribute( 'data-game' ) === game;
第101行：		第98行：
	t.setAttribute( 'aria-selected', on ? 'true' : 'false' );		t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
	} );		} );

	~~/* 滑动指示器 */~~
	if ( tabEl ) { moveIndicator( tabEl ); }		if ( tabEl ) { moveIndicator( tabEl ); }

	/* 内容面板 */		/* 内容面板立即切换 */
	panels.forEach( function ( p ) {		panels.forEach( function ( p ) {
	p.classList.toggle( 'active', p.id === 'content-' + game );		p.classList.toggle( 'active', p.id === 'content-' + game );
	} );		} );

			currentGame = game;
			switching = true;

	setTimeout( function () {		setTimeout( function () {
	slides.forEach( function ( s ) {		slides.forEach( function ( s ) { s.style.zIndex = ''; } );
	s.style.zIndex = '';
	} );
	~~currentGame = game~~;
	switching = false;		switching = false;

			/* 动画结束后执行期间积压的最后一次请求 */
			if ( pending && pending.game !== currentGame ) {
			var p = pending;
			pending = null;
			doSwitch( p.game, p.tabEl );
			} else {
			pending = null;
			}
	}, 720 );		}, 720 );
			}

			function switchGame( game, tabEl ) {
			if ( game === currentGame ) { return; }
			if ( switching ) {
			/* 记录最新目标，覆盖之前积压的 */
			pending = { game: game, tabEl: tabEl };
			/* 指示器和tab状态立即跟手 */
			var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );
			tabs.forEach( function ( t ) {
			var on = t.getAttribute( 'data-game' ) === game;
			t.classList.toggle( 'active', on );
			t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
			} );
			if ( tabEl ) { moveIndicator( tabEl ); }
			return;
			}
			doSwitch( game, tabEl );
	}		}

第123行：		第145行：
	if ( !tabs.length ) { return; }		if ( !tabs.length ) { return; }

	~~/* 注入背景图 */~~
	Object.keys( heroImages ).forEach( function ( game ) {		Object.keys( heroImages ).forEach( function ( game ) {
	getWikiImageUrl( heroImages[ game ], function ( url ) {		getWikiImageUrl( heroImages[ game ], function ( url ) {
	var bg = document.getElementById( 'hero-' + game + '-bg' );		var bg = document.getElementById( 'hero-' + game + '-bg' );
	var fg = document.getElementById( 'hero-' + game + '-fg' );		var fg = document.getElementById( 'hero-' + game + '-fg' );
	var val = 'url("' + url + '")';		var val = 'url("' + url + '")';
	if ( bg ) { bg.style.backgroundImage = val; }		if ( bg ) { bg.style.backgroundImage = val; }
第136行：		第157行：
	applyFadeColor();		applyFadeColor();

	~~/* 初始化指示器位置 */~~
	var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );		var firstActive = document.querySelector( '#gf-homepage .gf-tab.active' );
	if ( firstActive ) {		if ( firstActive ) {
	~~/* 等布局稳定后再计算 */~~
	setTimeout( function () { moveIndicator( firstActive ); }, 50 );		setTimeout( function () { moveIndicator( firstActive ); }, 50 );
	}		}
第155行：		第174行：
	} );		} );

	~~/* 窗口resize时重新定位指示器 */~~
	window.addEventListener( 'resize', function () {		window.addEventListener( 'resize', function () {
	var active = document.querySelector( '#gf-homepage .gf-tab.active' );		var active = document.querySelector( '#gf-homepage .gf-tab.active' );

2026年6月20日 (六) 14:14 弃权者

2026-06-20T14:14:02Z

显示更改

2026年6月20日 (六) 09:20 弃权者

2026-06-20T09:20:41Z

←上一版本		2026年6月20日 (六) 17:20的版本
第41行：		第41行：
	\|\| style.getPropertyValue( '--background-color-base' ).trim()		\|\| style.getPropertyValue( '--background-color-base' ).trim()
	\|\| '#1d1e20';		\|\| '#1d1e20';
	var ~~defs~~ = {		var el = document.getElementById( 'gf-hero-fade-bottom' );
	'gf-hero-fade-bottom'~~: 'linear-gradient~~(~~to bottom, transparent 0%, ' + bg + ' 100%~~)',		if ( el ) {
	~~'gf-hero-fade-left':~~ 'linear-gradient(to ~~right~~, ~~' + bg + '~~ 0%, ~~transparent 100%)~~',		el.style.background = 'linear-gradient(to bottom, transparent 0%, ' + bg + ' 100%)';
	~~'gf-hero-fade-right': 'linear-gradient(to left, '~~ + bg + ' ~~0%, transparent~~ 100%)'		}
	};
	~~Object.keys( defs ).forEach( function ( id ) {~~
	~~var el = document.getElementById( id );~~
	~~if ( el ) { el.style.background = defs[ id ];~~ }
	~~} );~~
	}		}

	~~/* 当前正在显示的游戏，用于防止动画中途重复触发 */~~
	var currentGame = 'gf';		var currentGame = 'gf';
	var switching = false;		var switching = false;
第60行：		第54行：
	switching = true;		switching = true;

	var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );		var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
	var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );		var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
	var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );		var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );

	var outSlide = document.getElementById( 'hero-' + currentGame );		var outSlide = document.getElementById( 'hero-' + currentGame );
	var inSlide = document.getElementById( 'hero-' + game );		var inSlide = document.getElementById( 'hero-' + game );

	~~/* 新图先置于底层不透明度0，再淡入；旧图同时淡出 */~~
	if ( inSlide ) {		if ( inSlide ) {
	inSlide.style.zIndex = '1';		inSlide.style.zIndex = '1';
	inSlide.style.opacity = '0';		inSlide.style.opacity = '0';
	inSlide.style.transition = 'opacity 0.5s ease';		inSlide.style.transition = 'opacity 0.5s ease';
	~~/* 强制reflow让transition生效 */~~
	void inSlide.offsetWidth;		void inSlide.offsetWidth;
	inSlide.style.opacity = '1';		inSlide.style.opacity = '1';
	}		}
	if ( outSlide ) {		if ( outSlide ) {
	outSlide.style.zIndex = '0';		outSlide.style.zIndex = '0';
	outSlide.style.opacity = '1';		outSlide.style.opacity = '1';
	outSlide.style.transition = 'opacity 0.5s ease';		outSlide.style.transition = 'opacity 0.5s ease';
	void outSlide.offsetWidth;		void outSlide.offsetWidth;
	outSlide.style.opacity = '0';		outSlide.style.opacity = '0';
	}		}

	~~/* 内容面板切换 */~~
	panels.forEach( function ( p ) {		panels.forEach( function ( p ) {
	p.classList.toggle( 'active', p.id === 'content-' + game );		p.classList.toggle( 'active', p.id === 'content-' + game );
	} );		} );

	~~/* tab状态 */~~
	tabs.forEach( function ( t ) {		tabs.forEach( function ( t ) {
	var on = t.getAttribute( 'data-game' ) === game;		var on = t.getAttribute( 'data-game' ) === game;
第96行：		第86行：
	} );		} );

	~~/* 动画结束后清理zIndex，解除锁定 */~~
	setTimeout( function () {		setTimeout( function () {
	slides.forEach( function ( s ) {		slides.forEach( function ( s ) {
	s.style.zIndex = '';		s.style.zIndex = '';
	s.style.opacity = s.id === 'hero-' + game ? '1' : '0';		s.style.opacity = s.id === 'hero-' + game ? '1' : '0';
	s.style.transition = '';		s.style.transition = '';
	} );		} );
第112行：		第101行：
	if ( !tabs.length ) { return; }		if ( !tabs.length ) { return; }

	/* ~~预加载并~~注入~~背景图~~ */		/* 同时注入 bg（模糊层）和 fg（清晰层）*/
	Object.keys( heroImages ).forEach( function ( game ) {		Object.keys( heroImages ).forEach( function ( game ) {
	getWikiImageUrl( heroImages[ game ], function ( url ) {		getWikiImageUrl( heroImages[ game ], function ( url ) {
	var el = document.getElementById( 'hero-' + game );		var bg = document.getElementById( 'hero-' + game + '-bg' );
	if ( el ) ~~{ el.style.backgroundImage~~ = 'url("' + url + '")'; }		var fg = document.getElementById( 'hero-' + game + '-fg' );
			var val = 'url("' + url + '")';
			if ( bg ) { bg.style.backgroundImage = val; }
			if ( fg ) { fg.style.backgroundImage = val; }
	} );		} );
	} );		} );

2026年6月20日 (六) 09:10 弃权者

2026-06-20T09:10:02Z

←上一版本		2026年6月20日 (六) 17:10的版本
第13行：		第13行：
	};		};

	function ~~getWikiImageUrl~~( ~~filename, callback~~ ) {		function getApiBase() {
	~~var scriptPath = ( document.querySelector( 'meta[name="generator"]' ) \|\| {} ).content \|\| '';~~
	~~var origin = window.location.origin;~~
	~~var base = origin + '/api.php';~~

	~~/* 尝试从页面link标签或wgScriptPath推断api路径 */~~
	var canonical = document.querySelector( 'link[rel="canonical"]' );		var canonical = document.querySelector( 'link[rel="canonical"]' );
	if ( canonical ) {		if ( canonical ) {
	var match = canonical.href.match( /^(https?:\/\/[^\/]+(?:\/[^\/]+)*?)\/wiki\// );		var match = canonical.href.match( /^(https?:\/\/[^\/]+(?:\/[^\/]+)*?)\/wiki\// );
	if ( match ) {		if ( match ) { return match[ 1 ] + '/api.php'; }
	~~base =~~ match[ 1 ] + '/api.php';
	}
	}		}
			return window.location.origin + '/api.php';
			}

	fetch( ~~base~~ + '?action=query&titles=File:' + encodeURIComponent( filename ) +		function getWikiImageUrl( filename, callback ) {
			fetch( getApiBase() + '?action=query&titles=File:' + encodeURIComponent( filename ) +
	'&prop=imageinfo&iiprop=url&format=json&origin=*' )		'&prop=imageinfo&iiprop=url&format=json&origin=*' )
	.then( function ( r ) { return r.json(); } )		.then( function ( r ) { return r.json(); } )
第37行：		第33行：
	}		}
	} )		} )
	.catch( function ( e ) { console.warn( '~~GFWiki~~: 图片加载失败', filename, e ); } );		.catch( function ( e ) { console.warn( 'GameSwitcher: 图片加载失败', filename, e ); } );
	}		}

第55行：		第51行：
	} );		} );
	}		}

			/* 当前正在显示的游戏，用于防止动画中途重复触发 */
			var currentGame = 'gf';
			var switching = false;

	function switchGame( game ) {		function switchGame( game ) {
	document.querySelectorAll( '#gf-homepage .gf-tab' ).forEach( function ( t ) {		if ( game === currentGame \|\| switching ) { return; }
			switching = true;

			var slides = document.querySelectorAll( '#gf-homepage .gf-hero-slide' );
			var panels = document.querySelectorAll( '#gf-homepage .gf-content-panel' );
			var tabs = document.querySelectorAll( '#gf-homepage .gf-tab' );

			var outSlide = document.getElementById( 'hero-' + currentGame );
			var inSlide = document.getElementById( 'hero-' + game );

			/* 新图先置于底层不透明度0，再淡入；旧图同时淡出 */
			if ( inSlide ) {
			inSlide.style.zIndex = '1';
			inSlide.style.opacity = '0';
			inSlide.style.transition = 'opacity 0.5s ease';
			/* 强制reflow让transition生效 */
			void inSlide.offsetWidth;
			inSlide.style.opacity = '1';
			}
			if ( outSlide ) {
			outSlide.style.zIndex = '0';
			outSlide.style.opacity = '1';
			outSlide.style.transition = 'opacity 0.5s ease';
			void outSlide.offsetWidth;
			outSlide.style.opacity = '0';
			}

			/* 内容面板切换 */
			panels.forEach( function ( p ) {
			p.classList.toggle( 'active', p.id === 'content-' + game );
			} );

			/* tab状态 */
			tabs.forEach( function ( t ) {
	var on = t.getAttribute( 'data-game' ) === game;		var on = t.getAttribute( 'data-game' ) === game;
	t.classList.toggle( 'active', on );		t.classList.toggle( 'active', on );
	t.setAttribute( 'aria-selected', on ? 'true' : 'false' );		t.setAttribute( 'aria-selected', on ? 'true' : 'false' );
	} );		} );
	~~document.querySelectorAll~~( ~~'#gf-homepage .gf-hero-slide'~~ ).forEach( function ( s ) {
	s.~~classList~~.~~toggle(~~ '~~active~~', s.id === 'hero-' + game );		/* 动画结束后清理zIndex，解除锁定 */
	~~} );~~		setTimeout( function () {
	~~document~~.~~querySelectorAll(~~ '~~#gf-homepage .gf-content-panel~~' )~~.forEach( function ( p ) {~~		slides.forEach( function ( s ) {
	~~p.classList.toggle( 'active', p.id~~ ==~~= 'content-' + game )~~;		s.style.zIndex = '';
	} );		s.style.opacity = s.id === 'hero-' + game ? '1' : '0';
			s.style.transition = '';
			} );
			currentGame = game;
			switching = false;
			}, 520 );
	}		}

第74行：		第112行：
	if ( !tabs.length ) { return; }		if ( !tabs.length ) { return; }

			/* 预加载并注入背景图 */
	Object.keys( heroImages ).forEach( function ( game ) {		Object.keys( heroImages ).forEach( function ( game ) {
	getWikiImageUrl( heroImages[ game ], function ( url ) {		getWikiImageUrl( heroImages[ game ], function ( url ) {