Widget:GameSwitcher

<script> (function ($) { $(function () {

 var $switcher = $('.game-switcher');
 if (!$switcher.length) return;

 var $hero = $('#gs-hero-wrap');
 var $heroImg = $hero.find('img');
 var loaded = {};       // 内存缓存: { panelId: html }
 var prefetching = {};  // 防重复预取
 var storageKey = 'gs-cache-';

 // ============ 初始化 ============
 var $firstBtn = $switcher.find('.gs-tab-btn').first();
 if ($firstBtn.length) {
   $firstBtn.addClass('gs-active').attr('aria-selected', 'true');
   if ($heroImg.length && !$heroImg.attr('src')) {
     $heroImg.attr('src', $firstBtn.data('hero'));
   }
 }
 restoreHash();

 // ============ 点击 ============
 $switcher.on('click', '.gs-tab-btn', function () {
   activate($(this));
 });

 // ============ 键盘 ============
 $switcher.on('keydown', '.gs-tab-btn', function (e) {
   if (e.key === 'Enter' || e.key === ' ') {
     e.preventDefault();
     activate($(this));
   }
   if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
     e.preventDefault();
     var $btns = $switcher.find('.gs-tab-btn');
     var idx = $btns.index(this);
     var next = e.key === 'ArrowRight' ? idx + 1 : idx - 1;
     if (next >= 0 && next < $btns.length) {
       $btns.eq(next).focus();
     }
   }
 });

 // ============ 悬停预加载 ============
 $switcher.on('mouseenter', '.gs-tab-btn', function () {
   var panelId = $(this).data('panel');
   var pageName = $(this).data('page');
   if (pageName && !loaded[panelId] && !prefetching[panelId]) {
     prefetch(panelId, pageName);
   }
 });

 // ============ URL hash ============
 $(window).on('hashchange', restoreHash);

 // ============ 激活面板 ============
 function activate($btn) {
   if ($btn.hasClass('gs-active')) return;

   var panelId = $btn.data('panel');
   var heroSrc = $btn.data('hero');
   var pageName = $btn.data('page');

   // 1. 头图淡入淡出
   switchHero(heroSrc);

   // 2. 按钮高亮
   $switcher.find('.gs-tab-btn')
     .removeClass('gs-active')
     .attr('aria-selected', 'false');
   $btn.addClass('gs-active').attr('aria-selected', 'true');

   // 3. 面板切换
   var $panel = $('#' + panelId);
   $switcher.find('.gs-content-panel').removeClass('gs-active');

   if (!$panel.length) {

$panel = $('

', {

       id: panelId,
       class: 'gs-content-panel gs-active'
     }).appendTo('.gs-content');
     loadContent($panel, panelId, pageName);
   } else {
     $panel.addClass('gs-active');
   }

   // 4. URL hash
   setHash(panelId);

   // 5. 后台静默预取其余
   schedulePrefetchOthers();
 }

 // ============ 头图切换（预加载 + 淡入淡出） ============
 function switchHero(url) {
   if (!$hero.length || !url) return;
   var current = $heroImg.attr('src');
   if (current === url) return;

   $('<img>').on('load', function () {
     $hero.addClass('gs-hero--fade');
     setTimeout(function () {
       $heroImg.attr('src', url);
       $hero.removeClass('gs-hero--fade');
     }, 160);
   }).attr('src', url);
 }

 // ============ 内容加载 ============
 function loadContent($panel, panelId, pageName) {
   if (loaded[panelId]) {
     $panel.html(loaded[panelId]);
     return;
   }

   var stored = mw.storage.get(storageKey + panelId);
   if (stored) {
     loaded[panelId] = stored;
     $panel.html(stored);
     return;
   }

   if (!pageName) return;

$panel.html('

加载中...

');

   $.get(mw.util.wikiScript('api'), {
     action: 'parse',
     page: pageName,
     prop: 'text',
     format: 'json',
     disablelimitreport: 1
   }).then(function (data) {
     if (data.parse && data.parse.text) {
       var html = data.parse.text['*'];
       loaded[panelId] = html;
       try { mw.storage.set(storageKey + panelId, html); } catch (e) {}
       $panel.html(html);
     }
   }).fail(function () {

$panel.html('

加载失败，<a href="javascript:location.reload()">刷新</a>重试

');

   });
 }

 // ============ 预加载 ============
 function prefetch(panelId, pageName) {
   prefetching[panelId] = true;

   var stored = mw.storage.get(storageKey + panelId);
   if (stored) {
     loaded[panelId] = stored;
     prefetching[panelId] = false;
     return;
   }

   $.get(mw.util.wikiScript('api'), {
     action: 'parse',
     page: pageName,
     prop: 'text',
     format: 'json',
     disablelimitreport: 1
   }).then(function (data) {
     if (data.parse && data.parse.text) {
       var html = data.parse.text['*'];
       loaded[panelId] = html;
       try { mw.storage.set(storageKey + panelId, html); } catch (e) {}
     }
   }).always(function () {
     prefetching[panelId] = false;
   });
 }

 function schedulePrefetchOthers() {
   setTimeout(function () {
     $switcher.find('.gs-tab-btn').each(function () {
       var panelId = $(this).data('panel');
       var pageName = $(this).data('page');
       if (!loaded[panelId] && !prefetching[panelId] && pageName) {
         prefetch(panelId, pageName);
       }
     });
   }, 500);
 }

 // ============ URL hash ============
 function setHash(panelId) {
   try { history.replaceState(null, , '#' + panelId); } catch (e) {}
 }

 function restoreHash() {
   var hash = window.location.hash.replace('#', );
   if (hash && hash.indexOf('panel-') === 0) {
     var $btn = $switcher.find('[data-panel="' + hash + '"]');
     if ($btn.length && !$btn.hasClass('gs-active')) {
       activate($btn);
     }
   }
 }

}); }(jQuery)); </script>