From aca38e9029a51bb2448c9d2362452e26fee35abf Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 26 May 2026 11:01:58 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E5=BB=BA=E9=A1=B5=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6):=20md=E6=96=87=E4=BB=B6=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/活动页/幸运美金第6季创建记录.md |  21 +-
 docs/活动页/建页执行流程.md          | 173 ++++++++++++---
 docs/活动页/建页操作模板.md          | 305 ++++++++++++++-------------
 docs/活动页/建页资料库.md            |  57 +++++
 docs/活动页/快速建立活动页方案.md    |  23 +-
 5 files changed, 380 insertions(+), 199 deletions(-)

diff --git a/docs/活动页/幸运美金第6季创建记录.md b/docs/活动页/幸运美金第6季创建记录.md
index b09b67e..1b73eac 100644
--- a/docs/活动页/幸运美金第6季创建记录.md
+++ b/docs/活动页/幸运美金第6季创建记录.md
@@ -250,24 +250,19 @@ useActivityRanking
 
 原因：Season6 当前标签页和排行榜与大量现有展示状态耦合，继续硬改收益不高。后续真正新建页面时，初始骨架应直接使用这两个 composable，避免一开始就写多个 `reward/rankShow/lotteryShow/incomeShow` 布尔值。
 
-## 14. 后续给 Codex 建类似页面时的输入
+## 14. 后续建类似页面
 
-以后建立同类页面时，不需要说“复制某页面”。建议先按 [建页操作模板.md](./建页操作模板.md) 让 Codex 创建专属页面信息 md，再把必要信息填进去，例如：
+这份记录只保留 Season6 的实际创建过程，不再维护通用建页输入规则。
+
+以后建立同类页面时：
 
 ```text
-页面类型：Activities
-新页面目录：src/views/Activities/LuckyDollars/Season7
-参考页面：src/views/Activities/LuckyDollars/Season6
-路由 path：/activities/lucky-dollars-season7
-OSS 图片路径：Activities/LuckyDollars/Season7/
-模块：reward / ranking / lottery / task / withdraw / history / rule
-排行榜分页方式：remote
-抽奖奖品展示：track-only
-多语言图片：按页面创建信息 md 的 3.1 图片清单处理
-接口参数：先沿用 Season6 或填写真实 activityId/activityCode
+1. 先按 建页操作模板.md 创建页面目录、页面创建信息.md 和 page.config.js。
+2. 在页面目录中的 页面创建信息.md 里补参考页面、图片、模块、接口和组件需求。
+3. 再让 Codex 按该 md 继续生成 index.vue 初版页面。
 ```
 
-Codex 应产出可运行初始版本，你再调整具体样式和图片对位。
+最新规则以 [建页执行流程.md](./建页执行流程.md) 为准，组件和配置片段以 [建页资料库.md](./建页资料库.md) 为准。
 
 ## 15. 本地图片 404 处理记录
 
diff --git a/docs/活动页/建页执行流程.md b/docs/活动页/建页执行流程.md
index f26b5cd..4a9f51d 100644
--- a/docs/活动页/建页执行流程.md
+++ b/docs/活动页/建页执行流程.md
@@ -17,16 +17,22 @@
 1. 根据路径判断页面类型：
    - src/views/Activities 下为 Activities
    - src/views/Ranking 下为 Ranking
-2. 在 docs/活动页/ 下创建专属页面信息 md。
-3. md 文件名使用中文或页面名，例如 LuckyDollars-Season7-创建信息.md。
-4. 预填页面类型、页面名称、页面目录、route path、route name、OSS 相对路径、本地开发目录。
-5. route path 和 route name 根据页面类型、页面名称、页面目录自动生成；用户后续可以自行修改。
-6. 安全白名单片段和权限页面片段也使用 route path 自动生成，不留空。
-7. OSS 相对路径和本地开发目录根据页面类型和页面目录自动生成；用户后续可以自行修改。
-8. 如果本地开发目录已存在且里面有图片，扫描图片文件并预填 3.1 多语言图片清单。
-9. 根据页面类型、3.1 图片清单和模块预设，自动预填 3.2、3.3、4.x 模块配置。
-10. 只把无法推断或风险较高的字段留空，并在备注中说明需要用户确认。
-11. 本轮不创建页面代码，除非用户明确要求继续创建页面。
+2. 创建页面目录。
+3. 在页面目录下创建专属页面信息 md，优先命名为 `页面创建信息.md`。
+   - 示例：`src/views/Activities/LuckyDollars/Season7/页面创建信息.md`
+   - 如果页面目录不适合存放，再放到 `docs/活动页/` 下。
+4. 以专属页面信息 md 为源创建 `page.config.js` 初始配置，只写可从页面信息和图片清单推断出的字段。
+5. 预填页面类型、页面名称、页面目录、route path、route name、OSS 相对路径、本地开发目录。
+6. route path 和 route name 根据页面类型、页面名称、页面目录自动生成；用户后续可以自行修改。
+7. 安全白名单片段和权限页面片段也使用 route path 自动生成，不留空。
+8. OSS 相对路径和本地开发目录根据页面类型和页面目录自动生成；用户后续可以自行修改。
+9. 如果用户要求，或 md 中“是否需要 Codex 自动创建本地开发目录”为“是”，创建 public/oss/h5/Azizi/... 本地图片目录。
+10. 如果本地开发目录已存在且里面有图片，扫描图片文件并预填 3.1 多语言图片清单。
+11. 根据页面类型、3.1 图片清单和模块预设，自动预填 3.2、3.3、4.x 模块配置。
+12. 可按 route path 生成路由、白名单、权限片段；是否立即写入 `src/router/index.js`、`src/config/security.js`、`src/utils/permissionManager.js` 取决于用户要求和当前是否需要保持构建通过。
+13. 只把无法推断或风险较高的字段留空，并在备注中说明需要用户确认。
+14. 本轮不创建 `index.vue`、组件目录或业务 composable，除非用户明确要求继续创建页面。
+15. 如果已经提前写入路由但 `index.vue` 尚未生成，不运行构建；构建验证放到生成 `index.vue` 后执行。
 ```
 
 路由自动生成规则：
@@ -82,36 +88,70 @@ rankingTopBg 统一解释为“排行榜前几名展示区背景”；历史 top
 只有图片名完全看不出功能时，才备注“待确认用途”，方便用户回头改。
 不再要求用户填写“多语言图片规则”；生成页面时直接读取 3.1 中每张图片的支持语言。
 3.2 和 3.3 默认按图片用途自动生成：首屏背景、默认标签页、顶部信息、默认模块放 blocking；弹窗、非默认标签页、抽奖结果、下方模块放 background。
+如果图片清单中存在 timeBg 或活动页常见顶部时间区域，新建 md 必须保留倒计时模块填空位，即使 enabled 先为 false。
 ```
 
-## 2. 用户补完专属 md 并要求继续建页时
+## 2. 用户补完专属 md 并要求生成可预览底座时
 
 执行顺序：
 
 ```text
 1. 读取专属页面信息 md。
-2. 读取 docs/活动页/建页操作模板.md。
-3. 读取 docs/活动页/建页资料库.md。
-4. 如果有参考页面，读取参考页面结构和接口用法。
-5. 只处理专属 md 中已填写的信息，未填写项跳过。
-6. 创建页面目录。
-7. 创建 page.config.js。
-8. 创建或生成 index.vue 初版。
-9. 如果专属 md 中“是否需要 Codex 自动创建本地开发目录”为“是”，创建 public/oss/h5/Azizi/... 本地图片目录。
-10. 添加路由。
-11. 补充 src/config/security.js。
-12. 补充 src/utils/permissionManager.js。
-13. 按需接入组件和 composable。
-14. 运行 npm run build。
-15. 把完成项、跳过项、待补项、验证结果写回专属 md。
+2. 读取同目录的 `page.config.js`；如果还不存在，则根据专属 md 创建。
+3. 读取 docs/活动页/建页操作模板.md。
+4. 读取 docs/活动页/建页资料库.md。
+5. 如果有参考页面，只读取可复用的基础结构和组件用法，不复制业务模块。
+6. 只处理专属 md 中已填写的信息，未填写项跳过。
+7. 以专属页面信息 md 为唯一生成源，同步更新 page.config.js，把已填写的活动字段、预加载、tabs、sections、children、popups、features 写入配置。
+8. 如果专属 md 中“是否需要 Codex 自动创建本地开发目录”为“是”，创建 public/oss/h5/Azizi/... 本地图片目录。
+9. 添加或确认路由。
+10. 补充或确认 src/config/security.js。
+11. 补充或确认 src/utils/permissionManager.js。
+12. 以专属页面信息 md 和 page.config.js 生成 index.vue 可预览底座；index.vue 不作为需求来源反向覆盖 md。
+13. 底座只生成 loading、预加载、组件引用、图片工具、页面背景、顶部基础区域、一级/二级 tabs 容器和空内容占位。
+14. 底座不接业务接口，不生成抽奖、任务、排行榜、奖励领取等完整业务模块，除非用户明确指定该模块。
+15. 运行 npm run build。
+16. 把完成项、跳过项、待补项、验证结果写回专属 md。
+```
+
+## 2.1 用户后续指定生成某个模块或对接接口时
+
+执行顺序：
+
+```text
+1. 读取专属页面信息 md 和 page.config.js。
+2. 只处理用户本轮明确指定的模块、接口或交互。
+3. 如果用户只要求生成视觉结构，就只补 DOM、样式、图片和占位数据。
+4. 如果用户明确要求对接接口，再补 api 调用、字段映射、loading/error/empty 状态。
+5. 每次生成后保持页面可运行、可实时预览。
+6. 按需要运行 npm run build 或局部校验。
+7. 把本轮完成项和待补项写回专属 md。
 ```
 
 ## 3. 执行原则
 
 ```text
 专属 md 没填的项，不猜。
+专属页面信息 md 默认是 page.config.js 和 index.vue 的需求源；用户补需求时优先改 md，再由 Codex 同步生成或更新 page.config.js 和 index.vue。
+如果用户要求按实时 Vue 记录、按当前页面反推、同步当前样式到 md，则以实时 `index.vue` 为源更新专属页面信息 md，不要用旧 md 覆盖用户刚调好的 Vue。
+每轮开始前根据用户本轮执行方案判断同步方向：`md -> page.config.js/vue` 或 `vue -> md`。如果同步方向不明确且两边存在冲突，先说明冲突并确认，不要静默覆盖。
+page.config.js 是 md 的结构化落地结果，不能脱离 md 自行新增业务模块；index.vue 是 md + page.config.js 的实现结果。
+如果发现 page.config.js 或 index.vue 与 md 不一致，优先询问或按 md 同步，而不是反向猜测 md。
+生成 vue 页面时必须渐进式生成：先生成可预览底座，再按用户后续指令逐个补模块和接口。
+可预览底座只包含预加载、组件引用、图片工具、背景、基础顶部、标签容器和空内容占位，方便用户实时预览页面效果。
+业务模块不得一次性全部生成；抽奖、任务、排行榜、奖励、弹窗、接口对接都要等用户明确说生成哪一块再做。
+开发预览阶段，样式优先靠近结构：固定不变、一次性的布局尺寸、间距、定位可以优先写内联样式，方便实时调整；可复用样式、状态样式、伪类/媒体查询/RTL 规则、复杂模块样式仍使用 class。
+动态样式不要优先使用 `:style="{ ... }"` 对象写法；涉及状态切换、选中态、方向、显隐、尺寸变化等动态效果时优先切换 class。只有必须绑定运行时数值且不适合枚举成 class 时，才使用动态 style。
+内联样式和 class 在普通静态场景下性能差异通常很小；需要避免的是大量节点重复生成动态 style 对象、频繁变更大段内联样式。开发结束或模块稳定后，再按复用性和可维护性统一抽成 class。
+生成的 Vue 文件统一使用 `<style lang="scss" scoped>`；页面基础样式固定放在 style 块顶部，包括 `* { color: #fff; }`、`.fullPage {}`、响应式基础字号 media query。阿语等 RTL 规则也集中写在 style 块中，使用 `[dir='rtl'] xxx`，不要散在模板内联样式里。
+除基础 media query 中设置响应式字号外，页面内其它展示字号统一使用 `font-size: 1em`，不要再写 `vw`、`px` 或 `clamp()` 字号，方便所有文本跟随统一基准字号变化。
+模块配置中如果出现 `images.container` 或 `containerImages` 这类整块大背景图，生成 Vue 时统一使用 `itemCenter` 承载；容器宽度先写 `100vw`，父级用 flex 从上往下排列，`gap`、`padding`、`margin` 初始先写 `0`，不额外加边框虚线，后续由用户按预览继续调整。
 专属 md 中需要用户填写的模块配置、接口参数、组件需求，优先使用 JSON 代码块，不使用 Markdown 表格。
 扫描生成的图片清单和预加载清单可以保留 Markdown 表格，因为它们主要用于检查和排序。
+专属 md 中的模块配置允许使用嵌套 `children` 描述二级标签页或子区块；生成 page.config.js 和 index.vue 时必须保留这个层级，不要拍平成同级模块。
+`children` 为空对象 `{}` 表示该区块暂时没有子模块；如果没有填写 `children`，不要自行补业务子模块。
+倒计时模块即使暂不启用也要保留位置，至少包含 enabled、deadline/endTime、images、fields、remark；截止日期未知时留空，不要猜。
+倒计时使用 timeBg 等图片承载天/时/分/秒时，生成 Vue 底座可以先用 itemCenter 分别渲染四个时间格；天数文案补 `D`，时分秒之间使用英文冒号 `:`；每个时间图片宽度优先控制在约 `20vw` 或更小，并加适当 padding / max-width，避免倒计时挤出移动端屏幕。
 模块图片优先从 3.1 图片清单中按图片名语义推断；推断不到时再参考建页资料库给默认名，并标记待确认。
 模块预设里的图片名只有在 3.1 图片清单存在时才直接写入；不存在时留空，并在 remark 中写“本地图片清单未扫描到 xxx，待确认”。
 常见模块接口优先走模块预设，不要求用户重复填写。
@@ -119,7 +159,51 @@ rankingTopBg 统一解释为“排行榜前几名展示区背景”；历史 top
 参考页面只作为结构和接口参考，不把新页面当成复制旧页面。
 新增 js/vue 文件尽量加中文注释。
 docs 下文件和文件夹使用中文命名。
-页面初版以能运行、结构清楚、方便微调为目标。
+页面底座以能运行、可预览、结构清楚、方便继续逐步补模块为目标。
+```
+
+Vue 页面基础样式模板：
+
+```scss
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.fullPage {
+  width: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+
+[dir='rtl'] .xxx {
+  /* 阿语方向相关样式写在这里 */
+}
+</style>
 ```
 
 ## 4. page.config.js 建议结构
@@ -141,7 +225,11 @@ export const pageConfig = {
   },
 
   modules: {
-    tabs: [],
+    tabs: {
+      enabled: false,
+      defaultValue: '',
+      items: [],
+    },
     sections: [],
     popups: [],
     features: [],
@@ -156,12 +244,39 @@ export const pageConfig = {
 含义：
 
 ```text
-tabs：标签页模块，如 reward、ranking、lottery、withdraw
-sections：页面区块，如 task、badgeReward、myInfo
+tabs：标签页模块，如 reward、ranking、lottery、withdraw；也可以是图片背景 + 文本标题的标签。
+sections：页面区块，如 task、badgeReward、myInfo；section 可包含 children，用于二级标签页或子区块。
 popups：弹窗，如 rule、help、history、result
 features：功能能力，如 countdown、barrage、transfer、exchange
 ```
 
+倒计时建议配置：
+
+```js
+{
+  name: 'countdown',
+  enabled: false,
+  deadline: '',
+  images: ['timeBg'],
+  fields: {
+    endTime: '',
+    remainingText: '',
+  },
+  remark: '天数补 D；天时分秒分别使用 itemCenter 图片背景；时分秒之间使用英文冒号；时间格宽度约 20vw 并避免溢出屏幕',
+}
+```
+
+嵌套 children 规则：
+
+```text
+1. children 用于描述当前 section 下的子结构，常见形态是 children.tabs + children.sections。
+2. children.tabs 的结构和 modules.tabs 一致。
+3. children.sections 的结构和 modules.sections 一致，可继续带 children。
+4. 只有 enabled 为 true 的 section 和 child section 才生成页面结构。
+5. children 中的 defaultValue 必须对应 children.sections 中某个已启用 section 的 name 或 value。
+6. 如果标签按钮只提供背景图，例如 tagBg/tagActiveBg/moduleBg/moduleActiveBg，页面生成时用图片背景容器展示文本，开发期可按 md 备注决定是否先不接翻译。
+```
+
 ## 5. 路由和权限
 
 每个新页面都要确认：
diff --git a/docs/活动页/建页操作模板.md b/docs/活动页/建页操作模板.md
index 6059fb2..65f6437 100644
--- a/docs/活动页/建页操作模板.md
+++ b/docs/活动页/建页操作模板.md
@@ -1,76 +1,88 @@
 # 建页操作模板
 
-这份文档只回答一个问题：你要怎么操作，才能让我快速生成 `src/views/Activities` 或 `src/views/Ranking` 的初版页面。
+这份文档只给用户看：告诉你第一次怎么提需求，以及专属 `页面创建信息.md` 里需要填什么。
 
-真正建页时不需要一次说完整需求。推荐先让我创建一份“页面创建信息 md”，你在里面按坑位填写；你没填的项，我生成初版时先不处理。
+规则正文不在这里重复维护：
 
-相关资料：
-
-- [建页资料库.md](./建页资料库.md)：组件用法、常用图片名、配置选项。
-- [建页执行流程.md](./建页执行流程.md)：我真正执行建页时遵守的流程。
-- [快速建立活动页方案.md](./快速建立活动页方案.md)：文档入口和总览。
+- 建页阶段、路由、OSS、多语言图片、预加载、`children` 嵌套规则：看 [建页执行流程.md](./建页执行流程.md)。
+- 组件用法、常用图片名、模块预设、配置代码片段：看 [建页资料库.md](./建页资料库.md)。
 
 ## 1. 推荐操作流程
 
 第一次只告诉我页面名称和创建位置：
 
 ```text
-新建活动页：LuckyDollars Season7
-创建位置：src/views/Activities/LuckyDollars/Season7
+新建活动页：Gulben Festival
+创建位置：src/views/Activities/GulbenFestival
 ```
 
-或者：
+或：
 
 ```text
 新建排行榜页：Overall Season2
 创建位置：src/views/Ranking/OverallSeason2
 ```
 
-我收到后只做一件事：在 `docs/活动页/` 下创建专属页面信息 md，例如：
+我会先做准备阶段：
 
 ```text
-docs/活动页/LuckyDollars-Season7-创建信息.md
+1. 创建页面目录。
+2. 在页面目录中创建 页面创建信息.md。
+3. 根据 页面创建信息.md 创建 page.config.js 初始配置。
+4. 按需要创建本地 OSS 图片目录。
+5. 预填 route、OSS、图片清单、预加载和模块配置。
+6. 不生成 index.vue，除非你明确要求继续创建页面。
 ```
 
-这份 md 会先填好：
+专属 md 优先放在页面目录里：
 
 ```text
-页面类型
-页面名称
-页面目录
-route path
-route name
-OSS 相对路径
-本地开发目录
+src/views/Activities/GulbenFestival/页面创建信息.md
 ```
 
-其中 `route path` 和 `route name` 会根据页面类型、页面名称、页面目录自动生成。你有特殊需求时，直接在 md 里改掉即可。
-
-`OSS 相对路径` 和 `本地开发目录` 也会根据页面类型和页面目录自动生成。你只需要选择是否让我自动创建本地开发目录。
-
-其它信息会尽量由图片扫描和模块预设先填好；只有无法推断的地方才留给你补。
-
-你填完后，再告诉我：
+你补完 md 中一部分信息后，可以先让我生成可预览底座：
 
 ```text
-按 docs/活动页/LuckyDollars-Season7-创建信息.md 继续生成初版页面
+按 src/views/Activities/GulbenFestival/页面创建信息.md 生成可预览底座
 ```
 
-我再根据你填写的信息创建页面、配置、路由、权限、本地 OSS 目录，并把执行结果写回这份专属 md。
+我会以这份 md 为需求源同步 `page.config.js`，生成 `index.vue` 的 loading、预加载、组件引用、图片工具、页面背景、顶部基础区域、一级/二级 tabs 容器和空内容占位。
+
+后续你再一步步告诉我：
+
+```text
+生成 CollectCards 的抽奖结构
+对接 Personal Rank 的 Ranking 接口
+生成 Room Rank 的 Reward 展示
+```
+
+我再按你指定的模块继续补，不会一次性把所有业务模块和接口都生成出来。
 
 ## 2. 填写规则
 
-- 模块配置：优先由 Codex 根据页面类型、扫描图片和参考页面自动预设；你只改不符合预期的地方。
-- 图片名和模块图片：优先从 `3.1 多语言图片清单` 和模块预设中自动推断，通常不用额外填写。
-- 模块接口：常见模块会自动预设，例如抽奖、奖池、任务、排行榜、中奖历史这类接口不用每次手写。
-- 没填且无法推断的模块：我先不实现，或标记为“待确认”。
-- 参考页面只作为结构和接口参考，不代表新页面就是复制旧页面。
-- 初版页面只保证结构、路径、接口位置、基础交互可用，图片对位和局部样式后续你再微调。
-- 需要你填写的模块配置、接口参数、组件需求，尽量使用 JSON 代码块，避免用 Markdown 表格对齐。
+- 没填的字段，初版页面先不猜。
+- `页面创建信息.md` 是 `page.config.js` 和 `index.vue` 的生成来源；后续补需求先改 md，再同步代码。
+- 如果你已经在 Vue 里实时调好了布局或样式，可以明确说“按实时 Vue 同步到 md”；这时 Codex 会反向更新 `页面创建信息.md`，不会用旧 md 覆盖当前 Vue。
+- 每轮可以指定同步方向：`md -> vue` 或 `vue -> md`；方向不明确且两边冲突时，先确认再改。
+- `index.vue` 采用渐进式生成：先生成可预览底座，再按你的指令逐步补模块和接口。
+- 可预览底座只放预加载、组件引用、图片背景、基础顶部、tabs 容器和占位内容。
+- 开发预览阶段，固定不变的一次性布局、尺寸、间距可以优先写内联样式，方便实时调位置；稳定后再统一抽成 class。
+- 动态样式不要优先写 `:style="{ ... }"`，状态切换、选中态、方向、显隐、尺寸变化优先用 class。
+- 可复用样式、伪类、媒体查询和 RTL 规则仍建议写 class。
+- 生成的 Vue 文件统一使用 `<style lang="scss" scoped>`，顶部固定放 `* { color: #fff; }`、`.fullPage {}` 和响应式基础字号 media query；阿语样式用 `[dir='rtl']` 集中写在 style 里。
+- 除基础 media query 外，页面内展示字号统一写 `font-size: 1em`，跟随响应式基准字号变化。
+- `images.container` / `containerImages` 这类模块大背景图统一用 `itemCenter`，宽度先写 `100vw`，父级从上往下 flex 排列，`gap`、`padding`、`margin` 初始写 `0`，不额外加边框虚线。
+- 模块配置、接口参数、组件需求优先使用 JSON 代码块。
+- 图片清单和预加载清单保留 Markdown 表格，方便检查。
+- 一级标签下面还有二级标签或子区块时，在对应 section 中写 `children`。
+- `children.tabs` 表示子标签，`children.sections` 表示子内容。
+- `children: {}` 表示当前区块暂时没有子模块。
+- 倒计时模块可以不启用，但要保留 `enabled`、截止日期、使用图片和 `remark` 填空位。
+- 如果备注写“开发期间不加翻译”，初版页面直接展示 md 里的文本。
 
 ## 3. 专属页面信息 md 模板
 
-我创建专属页面信息 md 时使用下面模板。基础信息会先填好，模块、预加载和图片用途会尽量根据扫描结果自动预设。
+创建新页面时，Codex 会按下面结构生成 `页面创建信息.md`。基础字段会先自动填好，图片和模块会尽量按扫描结果和预设补齐。
 
 ````md
 # 页面创建信息
@@ -91,30 +103,22 @@ OSS 相对路径
 - 是否加入 `src/config/security.js`：是 / 否
 - 是否加入 `src/utils/permissionManager.js`：是 / 否
 
-说明：`route path` 和 `route name` 由 Codex 先自动生成，你可以按需要修改。
-
-生成规则：
-
-| 页面类型 | 示例目录 | route path | route name |
-| --- | --- | --- | --- |
-| Activities | `src/views/Activities/LuckyDollars/Season6` | `/activities/lucky-dollars-season6` | `lucky-dollars-season6` |
-| Ranking | `src/views/Ranking/OverallSeason2` | `/ranking/overall-season2` | `overall-season2` |
-
-### 2.1 路由、白名单、权限片段说明
-
-专属页面信息 md 中可以展示这三个片段，但不需要你重复填写：
-
-```text
-路由代码片段：使用 route path、route name 和页面目录生成。
-安全白名单片段：值等于 route path，补充到 src/config/security.js。
-权限页面片段：值等于 route path，后面注释使用页面名称，补充到 src/utils/permissionManager.js。
-```
-
-示例：
+### 2.1 路由代码片段
 
 ```js
-'/activities/lucky-dollars-season6'
-'/activities/lucky-dollars-season6' // LuckyDollars Season6
+// 由 Codex 按 route path、route name 和页面目录生成
+```
+
+### 2.2 安全白名单片段
+
+```js
+// 由 Codex 按 route path 生成
+```
+
+### 2.3 权限页面片段
+
+```js
+// 由 Codex 按 route path 和页面名称生成
 ```
 
 ## 3. OSS 图片目录
@@ -124,63 +128,56 @@ OSS 相对路径
 - 是否需要 Codex 自动创建本地开发目录：是 / 否
 - 图片是否已放入本地目录：是 / 否
 
-说明：OSS 相对路径和本地开发目录由 Codex 自动预填。
-
-生成规则：
-
-| 页面类型 | 示例页面目录 | OSS 相对路径 | 本地开发目录 |
-| --- | --- | --- | --- |
-| Activities | `src/views/Activities/LuckyDollars/Season6` | `Activities/LuckyDollars/Season6/` | `public/oss/h5/Azizi/Activities/LuckyDollars/Season6/` |
-| Ranking | `src/views/Ranking/OverallSeason2` | `Ranking/OverallSeason2/` | `public/oss/h5/Azizi/Ranking/OverallSeason2/` |
-
-如果“是否需要 Codex 自动创建本地开发目录”填“是”，Codex 建页时会创建该目录，方便你直接把图片放进去。
-
 ### 3.1 多语言图片清单
 
-这部分可由 Codex 扫描本地开发目录自动生成。规则：
-
-- 无后缀图片视为 `en` 原图，例如 `rankBt.png`。
-- `_ar`、`_bn`、`_tr` 这类后缀视为对应语言，例如 `rankBt_ar.png`。
-- 扫描时会按基础图片名合并语言，例如 `rankBt.png` + `rankBt_ar.png` 生成 `rankBt | en, ar`。
-- 图片清单按图片名首字母排序，排序时忽略大小写，方便你快速找图。
-- 备注优先按 [建页资料库.md](./建页资料库.md) 的常用图片名整理成中文用途，例如 `bg0` 写“页面背景第 0 段”，`rankBt` 写“排行榜按钮”。
-- 如果资料库里没有对应图片名，Codex 可以按图片名语义自己起中文用途，例如 `taskTalk` 推断为“聊天任务图标”，`RewardRecharge500` 推断为“充值 500 奖励图”。
-- 新页面推荐用 `rankingTopBg` 表示“排行榜前几名展示区背景”；历史图片名 `topBg` 也按这个含义识别，不再按“页面顶部背景”处理。
-- 其它语言后缀可按页面实际情况扩展；没识别到对应语言图片时，页面代码回退使用原图。
-- 页面生成时不再单独填写“多语言图片规则”，直接以这张清单为准。
-
 | 图片名 | 支持语言 | 备注 |
 | --- | --- | --- |
 |  |  | Codex 扫描并匹配或推断中文用途，必要时你再改 |
 
 ### 3.2 进入页面前同步预加载图片
 
-这里填写需要和进入页面预加载动画同步的关键图片。Codex 生成页面时会先等待这些图片加载完成，再结束加载动画。
-
 | 图片名 | 是否包含多语言 | 备注 |
 | --- | --- | --- |
 |  |  |  |
 
 ### 3.3 进入页面后后台预加载图片
 
-这里填写不参与进入页面动画、但希望进入页面后继续自动预加载的图片。适合下方长背景、弹窗图、非默认标签页图片、抽奖结果图等。
-
 | 图片名 | 是否包含多语言 | 备注 |
 | --- | --- | --- |
 |  |  |  |
 
 ## 4. 模块配置
 
-这一部分会优先由 Codex 根据页面类型、扫描到的图片名和参考页面自动预设。你只需要改不符合预期的部分；删除或设为 `false` 的模块，初版页面会跳过。
+没有填写的模块，初版页面先不处理。
 
 ### 4.1 标签页模块
 
-填写方式：
+```json
+{
+  "enabled": true,
+  "defaultValue": "",
+  "items": []
+}
+```
+
+`items` 可以先写字符串；需要图片、翻译 key、埋点等信息时再改成对象。
+
+字符串写法：
 
 ```json
 {
-  "enabled": "",
-  "defaultValue": "",
+  "enabled": true,
+  "defaultValue": "Personal Rank",
+  "items": ["CollectCards to Win Prizes", "Personal Rank", "Room Rank"]
+}
+```
+
+对象写法：
+
+```json
+{
+  "enabled": true,
+  "defaultValue": "reward",
   "items": [
     {
       "value": "reward",
@@ -211,49 +208,90 @@ OSS 相对路径
     "enabled": "",
     "apis": [],
     "images": [],
-    "remark": "奖励区块"
+    "remark": "奖励区块",
+    "children": {}
   },
   {
     "name": "ranking",
     "enabled": "",
     "apis": [],
     "images": [],
-    "remark": "排行榜区块"
+    "remark": "排行榜区块",
+    "children": {}
   },
   {
     "name": "lottery",
     "enabled": "",
     "apis": [],
     "images": [],
-    "remark": "抽奖区块"
+    "remark": "抽奖区块",
+    "children": {}
   },
   {
     "name": "task",
     "enabled": "",
     "apis": [],
     "images": [],
-    "remark": "任务区块"
-  },
-  {
-    "name": "withdraw",
-    "enabled": "",
-    "apis": [],
-    "images": [],
-    "remark": "提现/兑换区块"
-  },
-  {
-    "name": "countdown",
-    "enabled": "",
-    "apis": [],
-    "images": [],
-    "remark": "倒计时区块"
+    "remark": "任务区块",
+    "children": {}
   }
 ]
 ```
 
-### 4.3 弹窗模块
+倒计时模块固定保留：
 
-常见弹窗：
+```json
+{
+  "name": "countdown",
+  "enabled": "",
+  "deadline": "",
+  "images": ["timeBg"],
+  "fields": {
+    "endTime": "",
+    "remainingText": ""
+  },
+  "remark": "天数补 D；天时分秒分别使用 itemCenter 图片背景；时分秒之间使用英文冒号；时间格宽度约 20vw 并避免溢出屏幕"
+}
+```
+
+嵌套标签示例：
+
+```json
+{
+  "name": "personalRank",
+  "enabled": true,
+  "apis": [],
+  "images": ["tagActiveBg", "tagBg"],
+  "remark": "一级标签，图片为背景图，使用 itemCenter 居中展示英文标题文本，开发期间不加翻译",
+  "children": {
+    "tabs": {
+      "enabled": true,
+      "defaultValue": "Reward",
+      "items": ["Reward", "Ranking"]
+    },
+    "sections": [
+      {
+        "name": "Reward",
+        "enabled": true,
+        "apis": [],
+        "images": ["moduleActiveBg", "moduleBg"],
+        "remark": "二级奖励标签",
+        "children": {}
+      },
+      {
+        "name": "Ranking",
+        "enabled": true,
+        "apis": [],
+        "images": ["moduleActiveBg", "moduleBg"],
+        "remark": "二级排行榜标签",
+        "children": {}
+      }
+    ]
+  }
+}
+```
+
+### 4.3 弹窗模块
 
 ```json
 [
@@ -265,14 +303,6 @@ OSS 相对路径
     "apis": [],
     "remark": "规则弹窗"
   },
-  {
-    "name": "help",
-    "triggerImage": "",
-    "backgroundImage": "",
-    "contentImage": "",
-    "apis": [],
-    "remark": "帮助弹窗"
-  },
   {
     "name": "history",
     "triggerImage": "",
@@ -280,22 +310,6 @@ OSS 相对路径
     "contentImage": "",
     "apis": [],
     "remark": "历史记录弹窗"
-  },
-  {
-    "name": "result",
-    "triggerImage": "",
-    "backgroundImage": "",
-    "contentImage": "",
-    "apis": [],
-    "remark": "中奖结果弹窗"
-  },
-  {
-    "name": "rewardDetail",
-    "triggerImage": "",
-    "backgroundImage": "",
-    "contentImage": "",
-    "apis": [],
-    "remark": "奖励详情弹窗"
   }
 ]
 ```
@@ -331,7 +345,6 @@ OSS 相对路径
   "extraApis": [],
   "displayMode": "track-only / prize-card / custom",
   "slotCount": "",
-  "centerButtonPosition": "",
   "historyButtonPosition": "inside / below / absolute / external / hidden",
   "images": {
     "background": "",
@@ -360,7 +373,7 @@ OSS 相对路径
 
 ## 6. 组件需求
 
-需要哪个就填“是”，不需要或没填的我先不接。
+需要哪个就填“是”，不需要或没填的初版页面先不接。
 
 ```json
 [
@@ -403,15 +416,15 @@ OSS 相对路径
 
 ### 7.1 已完成
 
-- 
+-
 
 ### 7.2 未填写所以跳过
 
-- 
+-
 
 ### 7.3 待你微调
 
-- 
+-
 
 ### 7.4 验证结果
 
@@ -419,19 +432,7 @@ OSS 相对路径
 - 备注：
 ````
 
-## 4. 预设选项说明
-
-这些选项填到专属页面信息 md 时，按下面含义理解。
-
-| 选项 | 可选值 | 说明 |
-| --- | --- | --- |
-| 页面类型 | `Activities` / `Ranking` | 活动页或排行榜页 |
-| 预加载方式 | `同步预加载` / `后台预加载` | 同步预加载参与进入动画，后台预加载不阻塞进入页面 |
-| 排行榜加载方式 | `remote` / `local` | `remote` 为接口分页，`local` 为前端切片 |
-| 抽奖展示方式 | `track-only` / `prize-card` / `custom` | 只转框 / 显示奖品卡 / 自定义格子 |
-| 历史按钮位置 | `inside` / `below` / `absolute` / `external` / `hidden` | 抽奖历史按钮放置方式 |
-
-## 5. 初版页面完成后你检查什么
+## 4. 初版页面完成后检查什么
 
 ```text
 页面能打开
diff --git a/docs/活动页/建页资料库.md b/docs/活动页/建页资料库.md
index 6803161..c622cb0 100644
--- a/docs/活动页/建页资料库.md
+++ b/docs/活动页/建页资料库.md
@@ -186,6 +186,7 @@ imageUrl('lottery') // 抽奖机/抽奖盘背景
 imageUrl('lotteryBg') // 抽奖区域背景
 imageUrl('prizeActiveFrame') // 抽奖高亮框
 imageUrl('draw1BtBg') // 单抽按钮背景
+imageUrl('draw5BtBg') // 五连抽按钮背景
 imageUrl('draw10BtBg') // 十连抽按钮背景
 imageUrl('resultBg') // 中奖结果弹窗背景
 imageUrl('resultBack') // 中奖结果上一页按钮
@@ -451,6 +452,62 @@ const { currentTab, visibleTabs, isTab, changeTab } = useActivityTabs(pageConfig
 })
 ```
 
+#### 4.2.1 嵌套标签 children
+
+用途：描述“一级标签下还有二级标签/子区块”的页面结构，例如 Gulben Festival 的 `Personal Rank` 和 `Room Rank` 下再分 `Reward / Ranking`。
+
+推荐配置形态：
+
+```js
+modules: {
+  tabs: {
+    enabled: true,
+    defaultValue: 'Personal Rank',
+    items: ['CollectCards to Win Prizes', 'Personal Rank', 'Room Rank'],
+  },
+  sections: [
+    {
+      name: 'personalRank',
+      enabled: true,
+      images: ['tagActiveBg', 'tagBg'],
+      children: {
+        tabs: {
+          enabled: true,
+          defaultValue: 'Reward',
+          items: ['Reward', 'Ranking'],
+        },
+        sections: [
+          {
+            name: 'Reward',
+            enabled: true,
+            images: ['moduleActiveBg', 'moduleBg'],
+            children: {},
+          },
+          {
+            name: 'Ranking',
+            enabled: true,
+            images: ['moduleActiveBg', 'moduleBg'],
+            children: {},
+          },
+        ],
+      },
+    },
+  ],
+}
+```
+
+生成规则：
+
+```text
+children 为空对象时，不生成子标签。
+children.tabs 控制当前 section 内部的二级标签状态。
+children.sections 控制当前 section 内部的二级内容。
+children.tabs.defaultValue 必须能匹配 children.sections 里的 name/value。
+items 是字符串时，直接用字符串作为 value 和显示文本；items 是对象时，优先使用 value、label、labelKey、buttonImage、activeButtonImage。
+备注写明“开发期间不加翻译”时，页面直接展示 md 里的英文文本。
+标签图片为背景时，优先用 itemCenter 或等价图片容器承载文本，不把整段文字做成图片。
+```
+
 ### 4.3 排行榜
 
 ```js
diff --git a/docs/活动页/快速建立活动页方案.md b/docs/活动页/快速建立活动页方案.md
index 0f1ec1c..4d90f32 100644
--- a/docs/活动页/快速建立活动页方案.md
+++ b/docs/活动页/快速建立活动页方案.md
@@ -1,6 +1,6 @@
 # 活动页与排行榜页建页文档总览
 
-当前 `src/views/Activities` 和 `src/views/Ranking` 的快速建页流程已经收敛为三份文档。
+当前 `src/views/Activities` 和 `src/views/Ranking` 的快速建页流程已经收敛为三份核心文档。规则只维护一份，避免多处重复后不一致。
 
 ## 1. 你主要看哪份
 
@@ -14,7 +14,7 @@
 告诉你怎么操作
 告诉你第一次只需要提供什么
 提供专属页面信息 md 模板
-保留需要填写的模块、接口、图片名、组件需求
+保留需要填写的模块、接口、图片名、组件需求入口
 ```
 
 以后新建页面时，推荐先告诉 Codex：
@@ -24,7 +24,7 @@
 创建位置：
 ```
 
-Codex 会先创建专属页面信息 md 给你填写。
+Codex 会先创建页面目录、页面创建信息 md 和 page.config.js 初始配置给你填写；页面创建信息 md 是 page.config.js 和 index.vue 的生成来源。index.vue 也采用渐进式生成：先生成可预览底座，后续你再逐步指定要生成的模块和接口。
 
 ## 2. 有用资料放在哪
 
@@ -36,6 +36,7 @@ Codex 会先创建专属页面信息 md 给你填写。
 常用组件用法
 常用 imageUrl 图片名和中文用途
 图片工具、标签页、排行榜、抽奖配置片段
+模块预设和可复用代码片段
 ```
 
 ## 3. Codex 执行流程放在哪
@@ -45,9 +46,11 @@ Codex 会先创建专属页面信息 md 给你填写。
 用途：
 
 ```text
-规定 Codex 先建专属页面信息 md
+规定 Codex 先建页面目录、专属页面信息 md 和 page.config.js
+规定页面创建信息 md 优先放在页面目录中
 规定 Codex 只处理你填写过的信息
-规定 Codex 如何生成初版页面
+规定什么时候生成 index.vue 可预览底座，以及后续如何逐步补模块
+规定路由、OSS、多语言图片、预加载、children 等建页规则
 规定完成后要把结果写回专属 md
 ```
 
@@ -63,3 +66,13 @@ Codex 会先创建专属页面信息 md 给你填写。
 记录 LuckyDollars Season6 当时的创建过程
 作为历史参考，不作为新的通用模板
 ```
+
+## 5. 文档边界
+
+```text
+建页操作模板.md：用户入口和可填写模板，不维护完整规则。
+建页执行流程.md：唯一的流程和规则来源。
+建页资料库.md：组件、图片名、模块预设和代码片段。
+幸运美金第6季创建记录.md：历史案例，不再承载新规则。
+竞品H5与性能优化分析.md：性能分析和优化记录，不承载建页规则。
+```