From 3fc693eab8e7ef0110a77a6e47db5eb551760b38 Mon Sep 17 00:00:00 2001 From: Jurangren Date: Wed, 6 Aug 2025 15:11:44 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 引入CSS变量，通过`clamp()`函数实现布局、字体和间距的自适应调整。 * 移除部分固定宽度限制，使页面元素能更好地适应不同屏幕尺寸。 * 针对移动设备视图，优化了容器宽度和内容偏移的显示效果。 * 更新了用户提示信息，引导用户通过空格键进入游戏详情视图。 --- index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++--------- src/main.js | 2 +- 2 files changed, 66 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 51d8e59..9525569 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,51 @@ padding: 0; } + /* Custom responsive variables */ + :root { + /* 基准宽度为 2560px (2K) */ + --base-width: 2560px; + + /* 白色容器宽度：原 max-w-4xl (896px) */ + --main-container-width: clamp(550px, 35vw, 896px); + + /* 游戏标题大小 */ + --game-title-font-size: clamp(22px, 1.8vw, 34px); /* 调整以放大 */ + /* VNDB 标题大小 */ + --vndb-title-font-size: clamp(20px, 1.5vw, 32px); + /* 游戏描述字体大小 */ + --vndb-description-font-size: clamp(14px, 0.8vw, 18px); /* 调整以放大 */ + /* AI 文本框字体大小 */ + --ai-text-font-size: clamp(14px, 0.8vw, 18px); + /* 章节标题大小 */ + --section-title-font-size: clamp(20px, 1.5vw, 26px); /* 调整以放大 */ + /* 普通文字大小 (咱家的使用须知内容) */ + --general-text-font-size: clamp(14px, 0.8vw, 18px); + + /* VNDB 信息面板宽度：原 max-w-md (448px) */ + --vndb-info-panel-width: clamp(300px, 18vw, 448px); + /* 游戏描述文本框最大高度 */ + --vndb-description-max-height: clamp(120px, 15vh, 300px); + /* VNDB 信息面板顶部位置：原 top-32 (128px) */ + --vndb-info-panel-top: clamp(100px, 10vh, 150px); /* 调整以根据分辨率向下调整 */ + /* VNDB 标题底部外边距 */ + --vndb-title-margin-bottom: clamp(20px, 3vw, 60px); /* 调整以随着分辨率变化更大 */ + /* VNDB 标题底部外边距 */ + --vndb-title-margin-bottom: clamp(20px, 2vw, 40px); /* 调整以减小间距 */ + + /* scrollable-content 宽度：原 max-w-4xl (896px) */ + --scrollable-content-width: clamp(700px, 35vw, 896px); + /* scrollable-content 偏移：原 translate-x-[calc(16.666667%_+_4rem)] */ + --scrollable-content-translate-x: calc(clamp(10%, 8.333333vw, 16.666667%) + clamp(2rem, 2vw, 4rem)); + } + + @media (max-width: 767px) { /* For mobile viewports */ + :root { + --main-container-width: 100%; + --scrollable-content-translate-x: 0; + } + } + /* Custom animations and styles that are difficult to replicate with Tailwind */ @keyframes glowing-border { 0% { @@ -221,23 +266,28 @@
+ class="flex justify-center w-full mx-auto gap-8 transition-opacity duration-500 ease-in-out group-[.locked-mode]/body:opacity-0 group-[.locked-mode]/body:pointer-events-none">
+ class="relative w-full flex-shrink-0 transition-transform duration-800 ease-in-out group-[.vndb-mode]/body:translate-x-[var(--scrollable-content-translate-x)] group-[.vndb-mode]/body:max-md:translate-x-0" + style="max-width: var(--scrollable-content-width);">
-
+ class="container mx-auto w-full bg-white/95 rounded-[8px] shadow-xl px-0 py-0 z-10 relative flex flex-col transition-all duration-300" + style="width: var(--main-container-width); margin-top: var(--main-container-margin-top);"> +
随图 @@ -245,7 +295,8 @@

+ class="font-extrabold text-indigo-700 drop-shadow-lg inline-flex items-center gap-2 md:gap-3 whitespace-nowrap" + style="font-size: var(--game-title-font-size);"> Galgame 聚合搜索

@@ -328,10 +379,11 @@
-

+

咱家的使用须知

-
    +
    • 首先，衷心感谢
-
+
@@ -428,7 +480,8 @@
-
+
diff --git a/src/main.js b/src/main.js index c8998bb..e0ac993 100644 --- a/src/main.js +++ b/src/main.js @@ -1939,7 +1939,7 @@ async function translateAndStreamDescription(description, characters) { } // Show the one-time toast notification if (!hasShownViewToggleToast && !isMobileView) { - const toastMessage = "再次点击按钮或空格键退出游戏介绍"; + const toastMessage = "按下空格键进入游戏详情视图"; showToast(toastMessage); hasShownViewToggleToast = true; hasShownViewToggleToast = true; From 410fb815a9b6077dcff43cfe5cab7f80d282a031 Mon Sep 17 00:00:00 2001 From: Jurangren Date: Wed, 6 Aug 2025 15:53:49 +0800 Subject: [PATCH 2/2] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E4=B8=BB?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=AE=BD=E5=BA=A6=E4=BB=A5=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 调整 `index.html` 中 `--main-container-width` CSS 变量。 * 将 `clamp` 函数中的 `35vw` 调整为 `42vw`。 * 扩大主内容容器在宽屏设备上的显示区域。 --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9525569..a59d2ed 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@ --base-width: 2560px; /* 白色容器宽度：原 max-w-4xl (896px) */ - --main-container-width: clamp(550px, 35vw, 896px); + --main-container-width: clamp(550px, 42vw, 896px); /* 游戏标题大小 */ --game-title-font-size: clamp(22px, 1.8vw, 34px); /* 调整以放大 */