feat(capsule): AudioBars 用 cubic-bezier 缓动 + 加长 transition

[appergb]

User description

用户反馈

录音胶囊的语音条 UI 跳转有问题——目前是圆形跳成矩形，视觉效果不自然，且存在卡顿；动效不够优雅、速度太快。

根因

AudioBars 每个 bar 的 `height` 跟随 audio level 在 `2~24px` 间变化（`width=3`、`borderRadius:999`，height=2 视觉为圆点、height=24 为长条），但 transition 只有 `0.08s`。

audio level 由后端 RMS 回调驱动 ~60Hz 更新，每次 React re-render 修改 `inline style.height` 都重启 transition 动画——`0.08s` 在持续 retrigger 下永远卡在动画前段，视觉上是阶梯式跳变（"圆形跳成矩形" + 卡顿）。

修复

`Capsule.tsx:48` 的 transition：

```diff

• transition: 'height 0.08s var(--ol-motion-quick)',

• transition: 'height 0.18s cubic-bezier(0.22, 1, 0.36, 1)',
  ```

• `0.08s → 0.18s`：让多次高频 update 落在同一条缓动曲线里平滑混合
• `cubic-bezier(0.22, 1, 0.36, 1)` ≈ easeOutExpo：前段快后段慢，圆→长条的形变更自然
• 0.18s 仍跟得上音量节奏，不影响响应感

Test plan

• CI `Windows Tauri checks` + `pr_agent_job`
• 本地 mac build → 录音观察 audio bars 动效

---

PR Type

Bug fix, Enhancement

---

Description

• 延长 transition 至 0.18s，避免高频 update 中断动画

• 改用 cubic-bezier 缓动实现平滑圆形→长条形变

• 添加注释记录根因与修复思路

---

Diagram Walkthrough

flowchart LR
  A["AudioBars 组件"] -- "height transition" --> B["0.08s → 0.18s & cubic-bezier 缓动"]
  B -- "平滑混合 60Hz 更新" --> C["消除跳变与卡顿"]

Loading

File Walkthrough

	Relevant files
Bug fix	Capsule.tsx 延长过渡并改用 cubic-bezier 缓动平滑动画                                                            openless-all/app/src/components/Capsule.tsx 将 transition 时长从 0.08s 延长至 0.18s 缓动函数改为 cubic-bezier(0.22, 1, 0.36, 1) 添加解释性注释 +4/-1

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No major issues detected