动态效果树

Author: biliww

docs/前端/14-前台轻动态装饰组件方案.md

@@ -381,3 +381,168 @@
 - 后续开发优先顺序确定为：文章封面星幕层 -> 首页粒子树 -> 全站统一微交互
 
 这份文档确认后，下一步即可按该方案进入组件开发阶段。
+
+## 十二、阶段验证后的方案校正
+
+结合本轮实际开发与页面试验，需要对上述方案做一轮更贴近现状的校正。
+
+### 12.1 已验证结论
+
+本轮已经验证过以下事实：
+
+- 文章详情页封面在“无图或弱纹理背景”下，轻动态装饰更容易成立
+- 一旦封面使用真实图片，浅云、薄雾、轻星流这类低对比装饰很容易被图片纹理吞没
+- 如果为了让装饰显眼而额外叠较重的洗色层、天空层或大面积蒙版，页面很容易变脏，破坏原有封面质感
+- 对 `Yunyu` 这种内容站而言，封面图本身已经承担了主要氛围表达，装饰层不宜再强行抢存在感
+
+因此，文章封面这条线当前不适合继续投入较多时间做“有图状态下也必须明显可见”的动态装饰。
+
+### 12.2 当前决定
+
+基于上述验证，本阶段做如下调整：
+
+- 暂停继续打磨文章详情页封面上的云层 / 星空轻动效
+- `YunyuStarfieldFlow` 保留为可选组件能力，但不作为当前前台第一优先级
+- 后续若要重新启用封面动效，只建议用于：
+  - 无图封面
+  - 纯渐变封面
+  - 专题页 / 分类页等可控背景场景
+
+换句话说：
+
+> 封面动态装饰不是不能做，而是不适合在“真实封面图”这个场景里继续死磕。
+
+## 十三、后续开发方向重排
+
+基于当前页面收益与试验结果，后续优先级建议调整为：
+
+### 新 P0：优先开发
+
+- `YunyuReveal`
+- `YunyuHoverLine`
+- 文章详情页阅读体验统一优化
+
+原因：
+
+- 这三项都能直接提升真实使用体验
+- 风险低，样式可控，不依赖特定封面素材
+- 更符合“内容站优先提升阅读质感”的方向
+
+### 新 P1：第二批开发
+
+- `YunyuParticleTree`
+- `YunyuWindLine`
+
+原因：
+
+- 首页主视觉仍然值得建立品牌记忆点
+- 但应优先在页面结构和阅读节奏稳定后再补
+
+### 新 P2：暂缓观察
+
+- `YunyuStarfieldFlow`
+- `YunyuSectionMist`
+
+原因：
+
+- 这两类更依赖具体页面氛围与素材条件
+- 当前直接收益不如阅读体验和统一微交互
+
+## 十四、下一步最建议直接开发的内容
+
+如果下一步要马上进入开发，建议从下面这组开始：
+
+### 14.1 第一项：`YunyuReveal`
+
+#### 目标
+
+统一首页分区、文章详情页信息区、延伸阅读区的进入节奏。
+
+#### 建议落点
+
+- `yunyu-web/app/components/motion/YunyuReveal.vue`
+
+#### 第一版能力
+
+- 进入视口后淡入
+- 同时做 `12px` 到 `16px` 的轻微上移
+- 支持 `delay`、`distance`、`once`
+- 支持 `prefers-reduced-motion`
+
+#### 第一批接入位置
+
+- 首页各主分区
+- 文章详情页标题下信息区
+- 文章详情页延伸阅读 / 推荐阅读区
+
+### 14.2 第二项：`YunyuHoverLine`
+
+#### 目标
+
+统一文章卡片标题、普通链接、按钮入口的 hover 反馈语言。
+
+#### 建议落点
+
+- `yunyu-web/app/components/motion/YunyuHoverLine.vue`
+
+#### 第一版能力
+
+- 悬停出现细下划线
+- 支持从左到右扫入
+- 支持浅色 / 深色主题
+- 支持文本链接和按钮风格
+
+#### 第一批接入位置
+
+- 文章列表标题
+- 首页分区更多入口
+- 页头导航链接
+
+### 14.3 第三项：文章详情页阅读体验统一优化
+
+#### 目标
+
+让文章页先从“漂亮”变成“更好读、更稳定、更统一”。
+
+#### 建议优化点
+
+- 标题、摘要、标签、元信息间距统一
+- 正文标题层级与段落留白再校正
+- 代码块、引用块、图片说明样式统一
+- 目录高亮与阅读进度联动再校正
+- 移动端阅读宽度和字号微调
+
+#### 涉及文件建议
+
+- `yunyu-web/app/pages/posts/[slug].vue`
+- `yunyu-web/app/components/common/PostCoverHero.vue`
+- `yunyu-web/app/components/common/` 下文章相关展示组件
+
+## 十五、更新后的推荐开发顺序
+
+基于当前阶段判断，建议后续按下面顺序推进：
+
+1. 先开发 `YunyuReveal`，统一全站进入节奏
+2. 再开发 `YunyuHoverLine`，统一全站链接与入口反馈
+3. 同步优化文章详情页阅读体验与目录联动
+4. 然后再回到首页主视觉，继续打磨 `YunyuParticleTree`
+5. 最后视整体气质决定是否恢复 `YunyuWindLine`、`YunyuSectionMist`、`YunyuStarfieldFlow`
+
+这个顺序更符合当前项目收益：
+
+- 先做高收益低风险项
+- 先统一气质，再补品牌记忆点
+- 暂时放下对封面动态装饰的执念
+
+## 十六、当前执行结论
+
+从当前阶段开始，这份文档的实际执行口径更新为：
+
+- 封面图上的轻动态装饰暂不继续深挖
+- 下一步优先转向 `YunyuReveal`、`YunyuHoverLine` 和文章阅读体验优化
+- 首页品牌型动态仍保留，但排到第二阶段
+- 后续所有轻动态仍然遵循“为内容让路”的总原则
+
+如果按本更新继续推进，下一步最适合直接进入开发的是：
+
+> `YunyuReveal` + 文章详情页阅读体验统一优化