From 5a7297d877e2dffd89194f9adb01d3f0cc5ffe52 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 3 Jun 2026 14:40:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=BB=BA=E9=A1=B5=E6=96=B9=E6=A1=88):=20?=
 =?UTF-8?q?=E5=BB=BA=E9=A1=B5=E6=96=B9=E6=A1=88=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/活动页/建页执行流程.md | 6 +++++-
 docs/活动页/建页操作模板.md | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/活动页/建页执行流程.md b/docs/活动页/建页执行流程.md
index 1741be6..ec6c927 100644
--- a/docs/活动页/建页执行流程.md
+++ b/docs/活动页/建页执行流程.md
@@ -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
diff --git a/docs/活动页/建页操作模板.md b/docs/活动页/建页操作模板.md
index b1c0cb7..2bc1f94 100644
--- a/docs/活动页/建页操作模板.md
+++ b/docs/活动页/建页操作模板.md
@@ -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`。