# 建页操作模板这份文档只给用户看：告诉你第一次怎么提需求，以及专属 `页面创建信息.md` 里需要填什么。规则正文不在这里重复维护： - 建页阶段、路由、OSS、多语言图片、预加载、`children` 嵌套规则：看 [建页执行流程.md](./建页执行流程.md)。 - 组件用法、常用图片名、模块预设、配置代码片段：看 [建页资料库.md](./建页资料库.md)。 ## 1. 推荐操作流程第一次只告诉我页面名称和创建位置： ```text 新建活动页：Gulben Festival 创建位置：src/views/Activities/GulbenFestival ``` 或： ```text 新建排行榜页：Overall Season2 创建位置：src/views/Ranking/OverallSeason2 ``` 我会先做准备阶段： ```text 1. 创建页面目录。 2. 在页面目录中创建页面创建信息.md。 3. 根据页面创建信息.md 创建 page.config.js 初始配置。 4. 按需要创建本地 OSS 图片目录。 - 本地 OSS 图片目录仅用于开发期存放图片，方便页面读取本地资源；发布时图片由你上传到真实 OSS，不随项目提交 Git。 - Codex 仍会按需要创建这个文件夹，但不会生成 `.gitkeep`；空文件夹不被 Git 追踪是正常现象。 5. 立即按 route path 写入 `src/router/index.js`、`src/config/security.js`、`src/utils/permissionManager.js`；这一步属于首次新建页面准备工作，不等后续生成页面时再补。 6. 预填 route、OSS、图片清单、预加载和模块配置。 7. 不生成 index.vue，除非你明确要求继续创建页面；如果此时还没有 index.vue，不运行构建，等生成页面后再验证。 ``` 专属 md 优先放在页面目录里： ```text src/views/Activities/GulbenFestival/页面创建信息.md ``` 你补完 md 中一部分信息后，可以先让我生成可预览底座： ```text 按 src/views/Activities/GulbenFestival/页面创建信息.md 生成可预览底座 ``` 我会以这份 md 为需求源同步 `page.config.js`，生成 `index.vue` 的 loading、预加载、组件引用、图片工具、页面背景、顶部基础区域、一级/二级 tabs 容器和空内容占位。后续你再一步步告诉我： ```text 生成 CollectCards 的抽奖结构对接 Personal Rank 的 Ranking 接口生成 Room Rank 的 Reward 展示 ``` 我再按你指定的模块继续补，不会一次性把所有业务模块和接口都生成出来。 ## 2. 填写规则 - 没填的字段，初版页面先不猜。 - `页面创建信息.md` 是 `page.config.js` 和 `index.vue` 的生成来源；后续补需求先改 md，再同步代码。 - 如果你已经在 Vue 里实时调好了布局或样式，可以明确说“按实时 Vue 同步到 md”；这时 Codex 会反向更新 `页面创建信息.md`，不会用旧 md 覆盖当前 Vue。 - 每轮可以指定同步方向：`md -> vue` 或 `vue -> md`；方向不明确且两边冲突时，先确认再改。 - `index.vue` 采用渐进式生成：先生成可预览底座，再按你的指令逐步补模块和接口。 - 可预览底座只放预加载、组件引用、图片背景、基础顶部、tabs 容器和占位内容。 - 新建页面只要生成 `index.vue`，都会默认带统一加载动画：先展示 `LoadingContent`，关键图片/初始化完成后再显示正式页面。 - 开发预览阶段，能直接用内联样式表达的固定不变、一次性布局、尺寸、间距、定位，就直接写内联样式，方便实时调位置并减少不必要的 class 拆分；稳定后再按复用性抽成 class。 - 动态样式不要优先写 `:style="{ ... }"`，状态切换、选中态、方向、显隐、尺寸变化优先用 class。 - 可复用样式、伪类、媒体查询和 RTL 规则仍建议写 class。 - 生成的 Vue 文件统一使用 `