From 07c2ab1f255abd72fc4a67f8065d78a17796769b Mon Sep 17 00:00:00 2001
From: rogerwang2008 <rogerwang2008@163.com>
Date: Wed, 11 Nov 2026 04:10:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20page3=20=E9=93=BA=E3=80=8C=E9=BB=91?=
 =?UTF-8?q?=E3=80=8D=E8=83=8C=E6=99=AF=E5=B9=B6=E7=BB=9F=E4=B8=80=E9=85=8D?=
 =?UTF-8?q?=E8=89=B2=EF=BC=8Cpage1=20=E8=90=BD=E6=97=A5=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E4=B8=BA=E6=AD=A3=E5=9C=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

page3 空白格按 page1「天」的明度铺「黑」，nametag 与「演职员表」四周整格避让
（标题留白缩矮一格后居中，牌子整体上移一格）；电线、麻雀、草、消防栓配色并入
熔岩暖色族。page1 去掉太阳上下端帽，行宽按半径 8 的圆逐行取整。
标题非强调部分改用与两页小字一致的 #e6dac6。
---
 assets/css/common.css |  3 +-
 assets/css/page3.css  | 19 ++++++-----
 assets/js/page1.js    |  4 +--
 assets/js/page3.js    | 74 +++++++++++++++++++++++++++++--------------
 4 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/assets/css/common.css b/assets/css/common.css
index 4a9d2b9..d93e337 100644
--- a/assets/css/common.css
+++ b/assets/css/common.css
@@ -58,7 +58,8 @@ body {
 
 .title-panel .title {
   margin: 0;
-  color: #e6e6e6;
+  /* 同 page2 节目列表、page3 人名的「小字」色；甲子仍为纯白 */
+  color: #e6dac6;
   font-size: 1.8em;
   font-weight: 400;
   line-height: 1;
diff --git a/assets/css/page3.css b/assets/css/page3.css
index 08975db..5fbee53 100644
--- a/assets/css/page3.css
+++ b/assets/css/page3.css
@@ -1,23 +1,26 @@
-/* 第 3 页：无「天」背景；只保留电线、麻雀、草与前景标题 */
+/* 第 3 页：空白格铺淡色「黑」作墙；配色统一靠火山暖色：熔岩族为主，冷色只留电线一处，亮度整体收拢到 50–85% */
 
-.wire { color: #8794a5; }
-.sparrow { color: #ff7a3f; }
-.grass { color: #4fc353; }
-.hydrant { color: #a93b43; }
+/* 背景「黑」：与 page1「天」同明度的中性淡色 */
+.ink { color: rgba(200, 200, 208, 0.15); }
+
+.wire { color: color-mix(in srgb, #8794a5 65%, #000); }
+.sparrow { color: color-mix(in srgb, #ff7a3f 85%, #000); }
+.grass { color: color-mix(in srgb, #7bc14f 72%, #000); }
+.hydrant { color: color-mix(in srgb, #e0362a 75%, #000); }
 /* 火山岩 / 熔岩参考色，按明度 50% 处理 */
 .rock { color: color-mix(in srgb, #d07a38 50%, #000); }
 .lava-a { color: color-mix(in srgb, #ff8f3f 50%, #000); }
 .lava-b { color: color-mix(in srgb, #ff5a2a 50%, #000); }
 
 /* 前景标题：不参与网格，字号与位置自由；
-   top 的 em 相对自身 1.6em 字号，3.125em = 距顶部 5 个背景格 */
+   top 的 em 相对自身 1.6em 字号，2.9375em = 距顶部 4.7 格（居中于留空行 4–6） */
 .credits {
   position: absolute;
-  top: 3.125em;
+  top: 2.9375em;
   left: 50%;
   transform: translateX(-50%);
   margin: 0;
-  color: #f2f2f2;
+  color: #f5efe4;
   font-size: 1.6em;
   font-weight: 400;
   line-height: 1;
diff --git a/assets/js/page1.js b/assets/js/page1.js
index e0d54ca..249c719 100644
--- a/assets/js/page1.js
+++ b/assets/js/page1.js
@@ -11,10 +11,9 @@
     { x: 4, y: 16, tone: 'rose' },
   ];
 
-  /* 落日：整体下移贴近楼群，形成日落；
+  /* 落日：贴近楼群的日落圆盘，行宽按半径 8 的圆逐行取整（中心 x=14、y=26.5）；
      色调按数组顺序，顶部偏红 → 底部偏黄 */
   const sun = [
-    { y: 18, x: 12, w: 4 },
     { y: 19, x: 10, w: 8 },
     { y: 20, x: 9, w: 10 },
     { y: 21, x: 8, w: 12 },
@@ -30,7 +29,6 @@
     { y: 31, x: 8, w: 12 },
     { y: 32, x: 9, w: 10 },
     { y: 33, x: 10, w: 8 },
-    { y: 34, x: 13, w: 2 },
   ];
 
   /* 飞鸟：数量减少，间距不等，仅少量成对；上下拉开分布 */
diff --git a/assets/js/page3.js b/assets/js/page3.js
index ecf5d07..969905e 100644
--- a/assets/js/page3.js
+++ b/assets/js/page3.js
@@ -1,6 +1,6 @@
 /* 第 3 页场景数据
-   前景：演职员表；背景：电线、麻雀、草。
-   本页不铺「天」，空白格保持为空。 */
+   前景：演职员表与 nametag；背景：电线、麻雀、草、火山。
+   空白格铺淡色「黑」，nametag 与标题四周的空白格保持留空。 */
 
 (() => {
   /* 固定种子的噪声，保证每次渲染一致 */
@@ -93,11 +93,59 @@
     cls: 'lava-b',
   });
 
+  /* 扣空：整格留白，供前景文字与 nametag 避让（先扣空，其余背景字仍可覆盖） */
+  const clear = (x, y, w, h) =>
+    Array.from({ length: h }, (_, j) => ({
+      text: '　'.repeat(w),
+      x,
+      y: y + j,
+      cls: 'void',
+    }));
+
+  const NAMES = [
+    '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若',
+    '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛',
+    '李昀芷', '吴红霓', '鲍馨仪', '刘润泽', '李若熙', '马希予', '袁立桓',
+    '蒋子模', '李有睿', '王海心', '朱丽烨', '朱彦阳', '汪楚钧', '吴玥',
+    '张梓轩', '罗午阳', '郭柯言', '王之饶', '应玥', '湛茜茜', '黄钰涵',
+    '虞韫嘉',
+  ];
+
+  const TAG = {
+    cols: 4,
+    rows: 9,
+    width: 5,
+    height: 2,
+    gapX: 1,
+    gapY: 1,
+    left: 2,
+    top: 11,
+  };
+
+  /* 每个牌子占 5 × 2 格 */
+  const tagClear = [];
+  for (let row = 0; row < TAG.rows; row++) {
+    for (let col = 0; col < TAG.cols; col++) {
+      tagClear.push(
+        ...clear(
+          TAG.left + col * (TAG.width + TAG.gapX),
+          TAG.top + row * (TAG.height + TAG.gapY),
+          TAG.width,
+          TAG.height
+        )
+      );
+    }
+  }
+
   TextScene.render({
     cols: 28,
     rows: 44,
-    skyChar: '',
+    skyChar: '黑',
+    skyClass: 'ink',
     glyphs: [
+      /* 前景避让：演职员表（x10.8–17.2 / y4.7–6.3）四周留约半格，再是全部牌子 */
+      ...clear(9, 4, 10, 3),
+      ...tagClear,
       /* 电线：整行贯穿页面 */
       { text: '电线'.repeat(14), x: 0, y: 8, cls: 'wire' },
       /* 麻雀：竖排于从左到右第四格，落在电线上方 */
@@ -125,26 +173,6 @@
   scene.append(credits);
 
   /* 36 个 nametag：4 列 × 9 行，补满 */
-  const NAMES = [
-    '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若',
-    '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛',
-    '李昀芷', '吴红霓', '鲍馨仪', '刘润泽', '李若熙', '马希予', '袁立桓',
-    '蒋子模', '李有睿', '王海心', '朱丽烨', '朱彦阳', '汪楚钧', '吴玥',
-    '张梓轩', '罗午阳', '郭柯言', '王之饶', '应玥', '湛茜茜', '黄钰涵',
-    '虞韫嘉',
-  ];
-
-  const TAG = {
-    cols: 4,
-    rows: 9,
-    width: 5,
-    height: 2,
-    gapX: 1,
-    gapY: 1,
-    left: 2,
-    top: 12,
-  };
-
   let nameIndex = 0;
   for (let row = 0; row < TAG.rows; row++) {
     for (let col = 0; col < TAG.cols; col++) {