M5-4详细设计：动画状态与交互协调层

这份设计文档说明 M5-4 为什么选择动画与复杂交互场景，以及它将如何接入现有方法库。

设计目标

把动画与复杂交互从“效果实现问题”还原成“状态设计与协调层设计问题”，并用一篇案例把多浮层、多反馈、多链路场景讲清楚。

为什么在 M5-4 选复杂交互

当前方法库已经覆盖：

• 页面型重构
• 基础组件型重构
• 运行时边界型重构
• 框架场景型重构
• 状态管理型重构

下一步最自然补的，就是“高交互页面”这条线。因为它会同时牵动前面所有层面：

• 页面状态装配
• 业务状态与局部交互状态分层
• 动画请求与视觉反馈协调
• 组件职责和时序边界

本轮案例的复杂度中心

本轮复杂度中心主要有四个：

• 业务状态与动画状态混杂
• 多个浮层和交互反馈并存
• 一次操作触发多个 UI 区域联动
• 动画触发入口不统一

与现有框架的映射关系

本轮将重点强化统一框架中的这些步骤：

• 第二步：找到真正的复杂度中心
• 第四步：判断状态应该放在页面、组件还是 composable
• 第五步：用容器组件与展示组件重新切边界
• 第七步：把副作用和派生状态分开

本轮交付物

本轮预期交付物包括：

• 新案例：../动画与复杂交互链路重构.md
• 新任务拆解：13-M5-4任务拆解-动画与复杂交互场景.md
• 新详细设计：14-M5-4详细设计-动画状态与交互协调层.md
• 新开发记录：15-开发记录-动画与复杂交互链路重构.md

设计约束

本轮继续遵循当前项目约束：

• 不直接修改独立 demo 源码
• 只提炼可复用方法进入文档
• 每轮新增案例都同步更新入口、导航和总框架

完成后的预期效果

完成后，当前方法库将会继续补齐“高交互页面”这一块，让它不只覆盖页面、组件、SSR、Nuxt 和状态中心，还覆盖复杂交互链路设计。