docs: 名单添加虞韫嘉

- 姓名按 4 列 × 9 行排列，仍保留右下角空位
- 大区块背景 alpha 0.5，不再为每个姓名单独绘制底板

README.md

@@ -49,7 +49,7 @@ python -m http.server 8000
 现有页面：
 
 - `page1.html`：完整日落城市文字画，空白处铺淡色「天」。
-- `page3.html`：无「天」背景的演职员表；前景标题「演职员表」，背景为电线、麻雀、枪、草、消防栓与下半屏火山。
+- `page3.html`：无「天」背景的演职员表；含 35 个演职员 nametag、电线、麻雀、草、消防栓与下半屏火山。
 
 共用与专属：
 

assets/css/page3.css

@@ -1,8 +1,7 @@
-/* 第 3 页：无「天」背景；只保留电线、麻雀、枪、草与前景标题 */
+/* 第 3 页：无「天」背景；只保留电线、麻雀、草与前景标题 */
 
 .wire { color: #8794a5; }
 .sparrow { color: #ff7a3f; }
-.gun { color: #8b6f55; }
 .grass { color: #4fc353; }
 .hydrant { color: #a93b43; }
 /* 火山岩 / 熔岩参考色，按暗度 70% 压暗（保留 30% 明度） */
@@ -26,3 +25,25 @@
   white-space: nowrap;
   z-index: 1;
 }
+
+/* 演职员表大区块：4 × 9 姓名网格，背景 alpha 0.5 */
+.nametag-block {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  display: grid;
+  background: rgba(10, 8, 6, 0.5);
+}
+
+.nametag-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e6dac6;
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+}

assets/js/page3.js

@@ -1,5 +1,5 @@
 /* 第 3 页场景数据
-   前景：演职员表；背景：电线、麻雀、枪、草。
+   前景：演职员表；背景：电线、麻雀、草。
    本页不铺「天」，空白格保持为空。 */
 
 (() => {
@@ -102,17 +102,8 @@
       { text: '电线'.repeat(14), x: 0, y: 8, cls: 'wire' },
       /* 麻雀：竖排于从左到右第四格，落在电线上方 */
       { text: '麻雀', x: 3, y: 6, cls: 'sparrow', vertical: true },
-      /* 火山铺在底部背景，枪、草、消防栓在其上层 */
+      /* 火山铺在底部背景，草、消防栓在其上层 */
       ...volcano,
-      /* 枪：多个「枪」拼出枪形，占最右 4 列，枪口指向左上方的麻雀 */
-      { text: '枪', x: 24, y: 20, cls: 'gun' },
-      { text: '枪', x: 25, y: 20, cls: 'gun' },
-      { text: '枪', x: 25, y: 21, cls: 'gun' },
-      { text: '枪', x: 26, y: 21, cls: 'gun' },
-      { text: '枪', x: 26, y: 22, cls: 'gun' },
-      { text: '枪', x: 27, y: 22, cls: 'gun' },
-      { text: '枪', x: 27, y: 23, cls: 'gun' },
-      { text: '枪', x: 27, y: 24, cls: 'gun' },
       /* 草：最底部一排 */
       { text: '草'.repeat(28), x: 0, y: 43, cls: 'grass' },
       /* 消防栓：最后三行分散竖排九根，左侧留 2 格 */
@@ -131,4 +122,56 @@
   credits.className = 'credits';
   credits.textContent = '演职员表';
   scene.append(credits);
+
+  /* 35 个姓名：4 列 × 9 行，放在一个半透明大区块上 */
+  const NAMES = [
+    '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若',
+    '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛',
+    '李昀芷', '吴红霓', '鲍馨仪', '刘润泽', '李若熙', '马希予', '袁立桓',
+    '蒋子模', '李有睿', '王海心', '朱丽烨', '朱彦阳', '汪楚钧', '吴玥',
+    '张梓轩', '罗午阳', '郭柯言', '王之饶', '应玥', '湛茜茜', '黄钰涵',
+  ];
+
+  const TAG = {
+    cols: 4,
+    rows: 9,
+    width: 3,
+    height: 1,
+    gapX: 1,
+    gapY: 1,
+    padding: 1,
+    top: 12,
+  };
+
+  const blockWidth =
+    TAG.padding * 2 + TAG.cols * TAG.width + (TAG.cols - 1) * TAG.gapX;
+  const blockHeight =
+    TAG.padding * 2 + TAG.rows * TAG.height + (TAG.rows - 1) * TAG.gapY;
+
+  const block = document.createElement('div');
+  block.className = 'nametag-block';
+  block.style.top = `${TAG.top}em`;
+  block.style.width = `${blockWidth}em`;
+  block.style.height = `${blockHeight}em`;
+  block.style.padding = `${TAG.padding}em`;
+  block.style.gridTemplateColumns = `repeat(${TAG.cols}, ${TAG.width}em)`;
+  block.style.gridAutoRows = `${TAG.height}em`;
+  block.style.columnGap = `${TAG.gapX}em`;
+  block.style.rowGap = `${TAG.gapY}em`;
+  scene.append(block);
+
+  let nameIndex = 0;
+  for (let row = 0; row < TAG.rows; row++) {
+    for (let col = 0; col < TAG.cols; col++) {
+      if (row === TAG.rows - 1 && col === TAG.cols - 1) continue;
+
+      const name = NAMES[nameIndex++];
+      if (!name) break;
+
+      const label = document.createElement('div');
+      label.className = 'nametag-name';
+      label.textContent = name;
+      block.append(label);
+    }
+  }
 })();

references/演职员表.txt

@@ -0,0 +1,36 @@
+郑滕飞
+秦雪莹
+关宸宇
+王天晓
+谢雨舟
+储明威
+庞熙若
+刘婉莹
+陈彦淇
+古雅文
+周胤伯
+郑佳欣
+娄敬庭
+张加弛
+李昀芷
+吴红霓
+鲍馨仪
+刘润泽
+李若熙
+马希予
+袁立桓
+蒋子模
+李有睿
+王海心
+朱丽烨
+朱彦阳
+汪楚钧
+吴玥
+张梓轩
+罗午阳
+郭柯言
+王之饶
+应玥
+湛茜茜
+黄钰涵
+虞韫嘉