# 2026-10-11

## AI 学习助手悬浮按钮重设计
- 文件:`src/views/components/TrainingAiSidebar.vue`(收起态 `.ai-fab`)
- 原状:50px 纯图标圆形蓝球(MagicStick 图标),不够显眼
- 新设计:3D 黏土风 SVG 小助手(渐变头部、深蓝面罩发光眼、天线顶珠、星光点缀)+ 文字胶囊按钮(主标题"AI 学习助手" + 副标语"学习有疑问?随时问我")
- 动效:头像上下浮动(bob)、呼吸光环(pulse)、悬停上浮 + 小助手摆动(wiggle);含 prefers-reduced-motion 降级
- 尺寸:头像 44px,胶囊整体约 56px 高,固定右下角不遮挡内容;纯 SVG 内联无图片资源

### 追加:遮挡修复
- 用户反馈悬浮胶囊会遮挡底部「保存/Step 01-04/下一步」导航栏(step-navigation 为普通文档流,滚到底部即被压住)
- 方案:滚动方向感知自动隐藏 —— `.ai-fab` 增加 `is-hidden` 状态;window scroll 监听(rAF 节流,阈值 6px),向下滚动且 scrollY>40 时 translateY(150%)+opacity:0+pointer-events:none,向上滚动滑出;含 reduced-motion 兼容

### 追加:扇形展开交互
- 用户要求默认只展示头像,悬停时像扇子一样展开文字
- 实现:待机态按钮为 52px 圆形(padding 4px + 头像 44px),透明背景 + 圆形投影;渐变胶囊底色移到 `.ai-fab::before` 用 opacity 淡入(渐变本身不可 transition);文字用 max-width 0→180px + margin-left 0→10px + translateX(-10px)→0 展开,悬停/:focus-visible 均触发;滚动隐藏逻辑保留
- 调速:展开放慢至 0.55s cubic-bezier(0.22,1,0.36,1) ease-out(文字 opacity 延迟 0.08s),收合 0.32s ease-in 稍快回收;利用"transition 定义在目标态"机制区分展开/收合速度