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 文件统一使用 `
```
## 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 文件统一使用 `