安和鱼APP添加自定义游戏人生页面

<pre id="games-config" class="games-config" style="display:none;">
{
  "games_page_label": "游戏人生",
  "games_page_title": "我的游戏人生",
  "games_page_summary": "跟 云坠 一起探索第九艺术",
  "games_page_background": "https://bu.dusays.com/2025/09/07/68bda1fe950c1.png",
  "games_page_button_text": "Steam",
  "games_page_button_link": "https://steamcommunity.com/",
  "games_sections": [
    {
      "section_title": "最佳陪伴",
      "section_description": "不会错过的好游",
      "section_games": [
        {
          "game_title": "Minecraft",
          "game_publisher": "Mojang Studios",
          "game_summary": "《我的世界》着重于让玩家探索、交互并改变一个由许多方块组成的世界。",
          "game_cover": "https://bu.dusays.com/2025/09/07/68bda1fd5485c.jpg",
          "game_url": "https://www.minecraft.net"
        },
        {
          "game_title": "Forza Horizon 5",
          "game_publisher": "Playground Games",
          "game_summary": "这是您的地平线冒险，这是多元化的开放世界，这是充满冒险的开放世界，这是不断变化的开放世界，立即展开您的地平线冒险吧！",
          "game_cover": "https://bu.dusays.com/2025/09/08/68be69adb1c3f.jpg",
          "game_url": "https://store.steampowered.com/app/1551360/_5/"
        },
        {
          "game_title": "黑神话：悟空",
          "game_publisher": "游戏科学",
          "game_summary": "《黑神话：悟空》是一款以中国神话为背景的动作角色扮演游戏。你将扮演一位“天命人”，为了探寻昔日传说的真相，踏上一条充满危险与惊奇的西游之路。",
          "game_cover": "https://bu.dusays.com/2025/09/08/68be69adb2d37.jpg",
          "game_url": "https://store.steampowered.com/app/2358720/_/"
        },
        {
          "game_title": "Grand Theft Auto V",
          "game_publisher": "Rockstar Games",
          "game_summary": "《GTA5》是侠盗猎车手系列的第五部正统续作，时至今日依旧经久不衰，并且斩获各类奖项无数，被评价为至今为止最好的游戏作品之一。",
          "game_cover": "https://bu.dusays.com/2025/09/08/68be69ada2425.jpg",
          "game_url": "https://www.xiaoheihe.cn/games/detail/271590"
        },
        {
          "game_title": "It Takes Two",
          "game_publisher": "Hazelight Studios",
          "game_summary": "《双人成行》以其巧妙的合作机制、丰富的互动玩法和感人的故事而备受好评，是情侣、好友或家人一起游玩的绝佳选择。",
          "game_cover": "https://bu.dusays.com/2025/09/08/68be69adb5190.jpg",
          "game_url": "https://store.steampowered.com/app/1426210/_/"
        },
        {
          "game_title": "Detroit:Become Human",
          "game_publisher": "Quantic Dream",
          "game_summary": "在《底特律：化身为人》中，人类和机器人的命运都将掌握在您的手中，您将体验到史上最为复杂的分支故事——您所作出的每个选择都将影响游戏的结局。",
          "game_cover": "https://bu.dusays.com/2025/09/08/68be69adaab89.jpg",
          "game_url": "https://store.steampowered.com/app/1222140/_/"
        },
        {
          "game_title": "Titanfall® 2",
          "game_publisher": "Respawn Entertainment",
          "game_summary": "《泰坦陨落2》讲述了库柏为了助力反抗军击败IMC，加入反抗军成为步枪兵，一心盼望着能真正成为铁驭，让自己的梦想得以圆满实现的故事。",
          "game_cover": "https://bu.dusays.com/2025/09/08/68be69adb557a.jpg",
          "game_url": "https://store.steampowered.com/app/1237970/Titanfall_2/"
        },
        {
          "game_title": "Monster Hunter:World",
          "game_publisher": "CAPCOM Co., Ltd.",
          "game_summary": "在新建构的「Monster Hunter: World」中, 可以体验到你一直期盼的极致猎人生活。",
          "game_cover": "https://bu.dusays.com/2025/09/08/68be69adbdc3c.jpg",
          "game_url": "https://store.steampowered.com/app/582010/Monster_Hunter_World/"
        }
      ]
    }
  ]
}
</pre>

@import url("https://cdn.cbd.int/%61%6e%7a%68%69%79%75-theme-static@1.1.9/icon/ali_iconfont_css.css");

#games.games-page {
  --games-accent-color: #425aef;
  --games-primary-color: var(--games-accent-color);
  --games-accent-soft: rgba(66, 89, 239, 0.137);
  --games-ink-color: #363636;
  --games-text-inverse: #fff;
  --games-glass-bg: rgba(255, 255, 255, 0.2);
  --games-text-primary: #363636;
  --games-text-secondary: rgba(60, 60, 67, 0.8);
  --games-muted-overlay: rgba(153, 153, 153, 0.169);
  --games-surface-muted: #f7f7f9;
  --games-surface-card: #fff;
  --games-border-color: #e3e8f7;
  --games-surface-page: #f7f9fe;
  --games-shadow-card: 0 8px 16px -4px rgba(44, 45, 48, 0.047);
  --games-shadow-deep: 0 0 12px 4px rgba(0, 0, 0, 0.05);
  --games-border-default: 1px solid var(--games-border-color);
  --games-border-active: 1px solid var(--games-primary-color);
  --games-card-radius: 12px;
  --games-hero-radius: 24px;
  width: 100%;
  margin-top: 0;
  color: var(--games-text-primary);
  font-family: inherit;
}

:root[data-theme="dark"] #games.games-page,
html[data-theme="dark"] #games.games-page,
html.dark #games.games-page,
body.dark #games.games-page,
.dark #games.games-page {
  --games-accent-color: #f2b94b;
  --games-primary-color: var(--games-accent-color);
  --games-accent-soft: rgba(242, 185, 75, 0.137);
  --games-ink-color: #1f2329;
  --games-text-primary: #f7f7fa;
  --games-text-secondary: #a1a2b8;
  --games-text-inverse: #f6f6f6;
  --games-glass-bg: rgba(255, 255, 255, 0.14);
  --games-muted-overlay: rgba(161, 162, 184, 0.2);
  --games-surface-muted: #171b26;
  --games-surface-card: rgba(27, 31, 43, 0.88);
  --games-border-color: rgba(90, 98, 120, 0.45);
  --games-shadow-card: 0 8px 16px -4px rgba(0, 0, 0, 0.4);
  --games-shadow-deep: 0 4px 14px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #games.games-page,
  html:not(.light):not([data-theme="light"]) #games.games-page,
  body:not(.light):not([data-theme="light"]) #games.games-page {
    --games-accent-color: #f2b94b;
    --games-primary-color: var(--games-accent-color);
    --games-accent-soft: rgba(242, 185, 75, 0.137);
    --games-ink-color: #1f2329;
    --games-text-primary: #f7f7fa;
    --games-text-secondary: #a1a2b8;
    --games-text-inverse: #f6f6f6;
    --games-glass-bg: rgba(255, 255, 255, 0.14);
    --games-muted-overlay: rgba(161, 162, 184, 0.2);
    --games-surface-muted: #171b26;
    --games-surface-card: rgba(27, 31, 43, 0.88);
    --games-border-color: rgba(90, 98, 120, 0.45);
    --games-shadow-card: 0 8px 16px -4px rgba(0, 0, 0, 0.4);
    --games-shadow-deep: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
}

#games.games-page * {
  box-sizing: border-box;
  font-family: inherit;
}

#games.games-page a {
  color: inherit;
  text-decoration: none;
}


#games.games-page .games-hero-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 1rem;
}

#games.games-page .games-hero-card {
  width: 49%;
  border-radius: var(--games-hero-radius);
  background: var(--games-surface-card);
  border: var(--games-border-default);
  box-shadow: var(--games-shadow-card);
  position: relative;
  padding: 1rem 2rem;
  overflow: hidden;
}

#games.games-page .games-hero-layout.games-hero-card.games-page-hero.is-single {
  height: 19rem;
  width: 100%;
  color: var(--games-text-inverse);
  overflow: hidden;
  margin-top: 0;
  background-position: left 28%;
  background-repeat: no-repeat;
  background-size: cover;
}

#games.games-page .games-hero-card .games-hero-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
}

#games.games-page .games-hero-card .games-hero-label {
  opacity: 0.8;
  font-size: 12px;
  margin-bottom: 0.5rem;
}

#games.games-page .games-hero-card .games-hero-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

#games.games-page .games-hero-card .games-hero-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#games.games-page .games-hero-card .games-hero-footer .games-hero-summary {
  line-height: 1.5;
}

#games.games-page .games-hero-card .games-action-group {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
}

#games.games-page .games-hero-card .games-action-group .games-action-button {
  height: 40px;
  border-radius: 20px;
  justify-content: center;
  background: var(--games-glass-bg);
  color: var(--games-text-inverse) !important;
  display: inline-flex;
  align-items: center;
  z-index: 1;
  transition: 0.3s;
  cursor: pointer;
  border: 0;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateZ(0);
  padding: 0 14px;
}

#games.games-page .games-hero-card .games-action-group .games-action-button:link,
#games.games-page .games-hero-card .games-action-group .games-action-button:visited {
  color: var(--games-text-inverse) !important;
}

#games.games-page .games-hero-card .games-action-group .games-action-button i,
#games.games-page .games-hero-card .games-action-group .games-action-button svg {
  margin-right: 0.25rem;
  font-size: 22px;
  color: inherit !important;
}

#games.games-page .games-hero-card .games-action-group .games-action-button .games-action-text {
  margin-left: 4px;
  color: inherit !important;
}

#games.games-page .games-hero-card .games-action-group .games-action-button:hover {
  background: var(--games-primary-color);
  color: var(--games-text-inverse) !important;
}

#games.games-page .games-icon-font {
  font-family: "\61\6e\7a\68\69\79\75\66\6f\6e\74" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#games.games-page .games-section {
  margin-top: 1.15rem;
}

#games.games-page .games-section-title {
  margin: 1rem 0;
  line-height: 1;
}

#games.games-page .games-section-description {
  color: var(--games-text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
}

#games.games-page .games-collection .games-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -8px;
}

#games.games-page .games-grid-card {
  width: calc(25% - 12px);
  border-radius: var(--games-card-radius);
  border: var(--games-border-default);
  overflow: hidden;
  margin: 8px 6px;
  background: var(--games-surface-card);
  box-shadow: var(--games-shadow-card);
  min-height: 360px;
  position: relative;
}

#games.games-page .games-grid-card:hover {
  border: var(--games-border-active);
}

#games.games-page .games-grid-info {
  padding: 8px 16px 16px 16px;
  margin-top: 8px;
}

#games.games-page .games-grid-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: fit-content;
  cursor: pointer;
  display: inline-block;
}

#games.games-page .games-grid-title:hover {
  color: var(--games-primary-color);
}

#games.games-page .games-grid-title:focus-visible {
  outline: 2px solid var(--games-primary-color);
  outline-offset: 3px;
  border-radius: 4px;
}

#games.games-page .games-grid-meta {
  font-size: 12px;
  color: var(--games-text-secondary);
  line-height: 16px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#games.games-page .games-grid-description {
  line-height: 20px;
  color: var(--games-text-secondary);
  height: 80px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size: 14px;
}

#games.games-page .games-grid-cover {
  width: 100%;
  height: 200px;
  background: var(--games-surface-muted);
  display: flex;
  justify-content: center;
  align-items: center;
}

#games.games-page .games-grid-image {
  object-fit: cover;
  height: 100%;
  width: 100%;
  display: block;
}

#games.games-page .games-feedback-wrap {
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  pointer-events: none;
}

#games.games-page .games-feedback {
  background: rgba(30, 32, 40, 0.9);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

#games.games-page .games-feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:root[data-theme="dark"] #games.games-page .games-feedback,
html[data-theme="dark"] #games.games-page .games-feedback,
html.dark #games.games-page .games-feedback,
body.dark #games.games-page .games-feedback,
.dark #games.games-page .games-feedback {
  background: rgba(20, 22, 28, 0.95);
  color: #f7f7fa;
  border: 1px solid var(--games-border-color);
}

@media screen and (max-width: 1200px) {
  #games.games-page .games-grid-card {
    width: calc(50% - 12px);
  }
}

@media screen and (max-width: 768px) {
  #games.games-page .games-hero-layout {
    margin-top: 0;
  }

  #games.games-page .games-hero-card {
    width: 100% !important;
    margin-top: 1rem;
    padding: 1rem;
  }

  #games.games-page .games-hero-card .games-hero-content {
    padding: 1rem;
  }

  #games.games-page .games-hero-card .games-hero-title {
    font-size: 30px;
  }

  #games.games-page .games-hero-card .games-action-group {
    right: 1rem;
    bottom: 1rem;
  }

  #games.games-page .games-hero-card .games-action-group .games-action-button {
    background: none;
    padding: 0;
    width: auto;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
  }

  #games.games-page .games-hero-card .games-action-group .games-action-button .games-action-text {
    display: none;
  }

  #games.games-page .games-hero-card .games-action-group .games-action-button i {
    font-size: 1.1rem;
    background: #fff;
    color: var(--games-text-primary);
    border-radius: 50%;
    padding: 6px;
    height: 40px;
    width: 40px;
    margin-left: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :root[data-theme="dark"] #games.games-page .games-hero-card .games-action-group .games-action-button,
  html[data-theme="dark"] #games.games-page .games-hero-card .games-action-group .games-action-button,
  html.dark #games.games-page .games-hero-card .games-action-group .games-action-button,
  body.dark #games.games-page .games-hero-card .games-action-group .games-action-button,
  .dark #games.games-page .games-hero-card .games-action-group .games-action-button {
    color: var(--games-ink-color) !important;
  }

  #games.games-page .games-hero-card .games-action-group .games-action-button:hover {
    background: none !important;
  }

  #games.games-page .games-grid-card {
    width: 100%;
    min-height: 360px;
  }
}




#games.games-page .games-icon-arrow-circle-right::before {
  content: "\e67f";
}

(function () {
  "use strict";

  function normalizeTextValue(value) {
    return String(value || "")
      .replace(/\s+/g, " ")
      .trim();
  }

  function escapeHtmlValue(text) {
    return String(text || "")
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/\"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  function readGamesConfig() {
    var configNode =
      document.getElementById("games-config") ||
      document.querySelector("pre#games-config, textarea#games-config, template#games-config, [data-games-config]");

    if (!configNode) return null;

    try {
      var rawConfigText = configNode.textContent || configNode.innerText || "{}";
      return JSON.parse(rawConfigText);
    } catch (error) {
      console.error("[games] 配置解析失败", error);
      return null;
    }
  }

  function ensureGamesRootContainer() {
    var existingRoot = document.getElementById("games");
    if (existingRoot) return existingRoot;

    var configNode = document.getElementById("games-config");
    if (!configNode || !configNode.parentNode) return null;

    var gamesRoot = document.createElement("div");
    gamesRoot.id = "games";
    gamesRoot.className = "games-page";

    if (configNode.nextSibling) {
      configNode.parentNode.insertBefore(gamesRoot, configNode.nextSibling);
    } else {
      configNode.parentNode.appendChild(gamesRoot);
    }

    return gamesRoot;
  }

  function renderGameCardMarkup(gameConfig) {
    var gameTitle = escapeHtmlValue(gameConfig.game_title || "");
    var gameMeta = escapeHtmlValue(gameConfig.game_publisher || "");
    var gameSummary = escapeHtmlValue(gameConfig.game_summary || "");
    var gameCoverUrl = escapeHtmlValue(gameConfig.game_cover || "");
    var gameLinkUrl = escapeHtmlValue(gameConfig.game_url || "#");

    return (
      '<div class="games-grid-card" data-game-title="' + gameTitle + '" data-game-meta="' + gameMeta + '" data-game-summary="' + gameSummary + '">' +
      '  <div class="games-grid-cover">' +
      '    <img class="games-grid-image" src="' + gameCoverUrl + '" data-lazy-src="' + gameCoverUrl + '" alt="' + gameTitle + '" loading="lazy">' +
      '  </div>' +
      '  <div class="games-grid-info">' +
      '    <a class="games-grid-title" title="' + gameTitle + '" href="' + gameLinkUrl + '" target="_blank" rel="noopener">' + gameTitle + '</a>' +
      '    <div class="games-grid-meta">' + gameMeta + '</div>' +
      '    <div class="games-grid-description">' + gameSummary + '</div>' +
      '  </div>' +
      '</div>'
    );
  }

  function renderGameSectionMarkup(sectionConfig) {
    var sectionTitle = escapeHtmlValue(sectionConfig.section_title || "");
    var sectionDescription = escapeHtmlValue(sectionConfig.section_description || "");
    var gameList = Array.isArray(sectionConfig.section_games) ? sectionConfig.section_games : [];

    return (
      '<div class="games-section">' +
      '  <h2 class="games-section-title">' + sectionTitle + '</h2>' +
      '  <div class="games-section-description">' + sectionDescription + '</div>' +
      '  <div class="games-collection">' +
      '    <div class="games-grid">' + gameList.map(renderGameCardMarkup).join("") + '</div>' +
      '  </div>' +
      '</div>'
    );
  }

  function renderGamesPage(pageConfig) {
    var gamesRoot = ensureGamesRootContainer();
    if (!gamesRoot || !pageConfig) return;

    var heroBackgroundUrl = escapeHtmlValue(pageConfig.games_page_background || "");
    var heroLabelText = escapeHtmlValue(pageConfig.games_page_label || "");
    var heroTitleText = escapeHtmlValue(pageConfig.games_page_title || "");
    var heroSummaryText = escapeHtmlValue(pageConfig.games_page_summary || "");
    var actionButtonText = escapeHtmlValue(pageConfig.games_page_button_text || "Steam");
    var actionButtonLink = escapeHtmlValue(pageConfig.games_page_button_link || "https://steamcommunity.com/");
    var sectionList = Array.isArray(pageConfig.games_sections) ? pageConfig.games_sections : [];

    gamesRoot.innerHTML =
      '<div class="games-hero-layout games-hero-card games-page-hero is-single" style="background: url(' + heroBackgroundUrl + ') left 37% / cover no-repeat !important;">' +
      '  <div class="games-hero-content">' +
      '    <div class="games-hero-label">' + heroLabelText + '</div>' +
      '    <span class="games-hero-title">' + heroTitleText + '</span>' +
      '    <div class="games-hero-footer">' +
      '      <div class="games-hero-summary">' + heroSummaryText + '</div>' +
      '    </div>' +
      '    <div class="games-action-group">' +
      '      <a class="games-action-button" href="' + actionButtonLink + '" target="_blank" rel="noopener">' +
      '        <i class="games-icon-font games-icon-arrow-circle-right" style="font-size: 1.3rem;" aria-hidden="true"></i>' +
      '        <span class="games-action-text">' + actionButtonText + '</span>' +
      '      </a>' +
      '    </div>' +
      '  </div>' +
      '</div>' +
      sectionList.map(renderGameSectionMarkup).join("");

    gamesRoot.querySelectorAll("img.games-grid-image").forEach(function (imageNode) {
      var lazyImageUrl = normalizeTextValue(imageNode.getAttribute("data-lazy-src"));
      if (lazyImageUrl && !imageNode.getAttribute("src")) {
        imageNode.setAttribute("src", lazyImageUrl);
      }
    });
  }

  function initializeGamesPage() {
    var gamesConfig = readGamesConfig();
    if (!gamesConfig) return false;
    renderGamesPage(gamesConfig);
    return true;
  }

  function initializeGamesPageWithRetry() {
    if (initializeGamesPage()) return;

    var retryCount = 0;
    var maxRetryCount = 80;
    var retryTimer = null;
    var domObserver = null;

    function finishRetry() {
      if (retryTimer) clearInterval(retryTimer);
      if (domObserver) domObserver.disconnect();
    }

    retryTimer = setInterval(function () {
      retryCount += 1;
      if (initializeGamesPage() || retryCount >= maxRetryCount) {
        finishRetry();
      }
    }, 250);

    if (window.MutationObserver && document.documentElement) {
      domObserver = new MutationObserver(function () {
        if (initializeGamesPage()) {
          finishRetry();
        }
      });
      domObserver.observe(document.documentElement, { childList: true, subtree: true });
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initializeGamesPageWithRetry);
  } else {
    initializeGamesPageWithRetry();
  }
})();