feat(建页方案): 建页方案初始化文件调整

This commit is contained in:
hzj 2026-06-03 14:40:49 +08:00
parent 77863ae058
commit 5a7297d877
2 changed files with 9 additions and 2 deletions

View File

@ -142,8 +142,9 @@ page.config.js 是 md 的结构化落地结果,不能脱离 md 自行新增业
如果发现 page.config.js 或 index.vue 与 md 不一致,优先询问或按 md 同步,而不是反向猜测 md。
生成 vue 页面时必须渐进式生成:先生成可预览底座,再按用户后续指令逐个补模块和接口。
可预览底座只包含预加载、组件引用、图片工具、背景、基础顶部、标签容器和空内容占位,方便用户实时预览页面效果。
新建页面只要生成 `index.vue`,必须补充统一加载动画:模板首层使用 `v-if="isLoading"` 展示居中的 `LoadingContent`,主页面内容使用 `v-else`,避免加载阶段提前挂载背景图和业务节点。`isLoading` 默认为 `true`,进入页面时至少执行一次 `completePreloading()`;即使 blocking 预加载列表为空,也要通过 `finally` 关闭 loading防止页面卡死。
业务模块不得一次性全部生成;抽奖、任务、排行榜、奖励、弹窗、接口对接都要等用户明确说生成哪一块再做。
开发预览阶段,样式优先靠近结构:固定不变、一次性的布局尺寸、间距、定位可以优先写内联样式,方便实时调整;可复用样式、状态样式、伪类/媒体查询/RTL 规则、复杂模块样式仍使用 class。
开发预览阶段,样式优先靠近结构:能直接用内联样式表达的固定不变、一次性布局尺寸、间距、定位,直接写在模板内联样式里,方便实时调整并减少不必要的 class 拆分;可复用样式、状态样式、伪类/媒体查询/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`,不要散在模板内联样式里。
@ -161,6 +162,8 @@ page.config.js 是 md 的结构化落地结果,不能脱离 md 自行新增业
如果同一个模块在不同页面存在接口或字段差异,且没有提供参考页面,要先问用户参考哪个页面的模块。
参考页面只作为结构和接口参考,不把新页面当成复制旧页面。
新增 js/vue 文件尽量加中文注释。
页面后续更新模块、接口或公共方法时,必须给新增/调整的方法和关键模块逻辑添加简短中文注释,说明用途、接口来源、字段映射或展示规则;模板里的主要 `div``section``itemCenter` 等结构模块也要补中文注释,说明当前块负责的视觉区域或业务含义;不要只堆代码,方便后续继续按模块迭代。
页面任何模块都不要出现可见滚动条。新建或更新页面时,推荐页面根容器固定 `height: 100vh``overflow: hidden`,由内部主内容容器负责 `overflow-y: auto` 垂直滚动,并隐藏滚动条;需要滚动时允许内容滚动,但必须通过 `scrollbar-width: none``-ms-overflow-style: none``::-webkit-scrollbar { display: none; }` 隐藏可见滚动条。
docs 下文件和文件夹使用中文命名。
页面底座以能运行、可预览、结构清楚、方便继续逐步补模块为目标。
```
@ -325,6 +328,7 @@ src/config/imageCacheVersion.js
4. 两个列表都要走同一套 imageUrl/getImgName 规则,保证本地 OSS、线上 OSS、图片缓存和多语言后缀一致。
5. 后台预加载在 blocking 完成、页面可见后执行,优先使用 requestIdleCallback兼容时用 setTimeout。
6. 后台预加载失败只记录日志,不影响页面展示和交互。
7. 所有新建页面必须有统一加载动画:`isLoading=true``completePreloading()``try/catch/finally``<LoadingContent>{{ $t('loading') }}...</LoadingContent>`。加载态期间只渲染 loading 容器,不渲染正式页面背景、装饰图或业务模块。
```
## 7. 完成后写回专属 md

View File

@ -69,12 +69,15 @@ src/views/Activities/GulbenFestival/页面创建信息.md
- 每轮可以指定同步方向:`md -> vue``vue -> md`;方向不明确且两边冲突时,先确认再改。
- `index.vue` 采用渐进式生成:先生成可预览底座,再按你的指令逐步补模块和接口。
- 可预览底座只放预加载、组件引用、图片背景、基础顶部、tabs 容器和占位内容。
- 开发预览阶段,固定不变的一次性布局、尺寸、间距可以优先写内联样式,方便实时调位置;稳定后再统一抽成 class。
- 新建页面只要生成 `index.vue`,都会默认带统一加载动画:先展示 `LoadingContent`,关键图片/初始化完成后再显示正式页面。
- 开发预览阶段,能直接用内联样式表达的固定不变、一次性布局、尺寸、间距、定位,就直接写内联样式,方便实时调位置并减少不必要的 class 拆分;稳定后再按复用性抽成 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`,不额外加边框虚线。
- 页面后续更新模块、接口或方法时,新增/调整的方法和关键模块逻辑都要添加简短中文注释,说明用途、接口来源、字段映射或展示规则;模板里的主要 `div``section``itemCenter` 等结构模块也要补中文注释,说明当前块负责的视觉区域或业务含义。
- 页面任何模块都不要出现可见滚动条;推荐页面根容器固定 `height: 100vh``overflow: hidden`,由内部主内容容器负责 `overflow-y: auto` 垂直滚动并隐藏滚动条。
- 模块配置、接口参数、组件需求优先使用 JSON 代码块。
- 图片清单和预加载清单保留 Markdown 表格,方便检查。
- 一级标签下面还有二级标签或子区块时,在对应 section 中写 `children`