chore(建页流程文件): md文件更新
This commit is contained in:
hzj
parent
a5298ae0e4
commit
aca38e9029
@ -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 处理记录
|
||||
|
||||
|
||||
@ -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. 路由和权限
|
||||
|
||||
每个新页面都要确认：
|
||||
|
||||
@ -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
|
||||
页面能打开
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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：性能分析和优化记录，不承载建页规则。
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user