Desktop 内置浏览器刷新时应显示停止 X,网页 tab favicon 应显示 loading 动效
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 395
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 776
Description
**提交人**: Justin
**客户端版本**: 0.1.38
---
## 现象
Desktop 右侧内置浏览器刷新网页时,顶部刷新 icon 自身旋转,而对应网页 tab 左侧 favicon 没有加载反馈。当前视觉状态与常见浏览器(包括 Codex)的交互逻辑相反。
## 复现步骤
1. 打开 Desktop 右侧内置浏览器并进入任意网页。
2. 点击顶部浏览器工具栏的刷新按钮。
3. 观察刷新按钮和对应网页 tab 左侧图标的状态。
## 期望行为
- 加载期间,顶部刷新按钮切换为静态终止 X,点击后停止当前加载。
- loading 圆圈动效显示在对应网页 tab 顶部左侧 favicon 位置。
- 加载结束后,终止 X 恢复为刷新图标,tab 左侧恢复网页 favicon;若无 favicon,则恢复现有 fallback。
- reduced-motion 下不强制旋转,仍能区分 loading 与 idle。
## 实际行为
- 加载期间,顶部 RotateCw 刷新图标旋转。
- tab 左侧 favicon 没有加载动效。
## 根因分析
BrowserChrome 将 isLoading 直接接到刷新按钮的 spinning,使 RotateCw 旋转;WebBrowserTabPillIcon 只消费 favicon/isAudible,没有消费 WebView 的 isLoading。
## 相关代码
- apps/desktop/src/renderer/features/right-sidebar/plugins/web-browser/BrowserChrome.tsx
- apps/desktop/src/renderer/features/right-sidebar/plugins/web-browser/index.tsx
- apps/desktop/src/renderer/features/right-sidebar/plugins/web-browser/BrowserTabBody.tsx
- apps/desktop/src/renderer/features/right-sidebar/hooks/useBrowserWebview.ts
- tests: BrowserChrome.test.ts、WebBrowserTabPillIcon.test.tsx
## 建议修复方向
保持现有 WebView loading 状态机和停止行为不变,仅调整 UI 状态传递与渲染:给 browser tab pill 提供当前 tab 的加载状态,在 favicon 位置显示符合设计规范的 loading ring;BrowserChrome loading 状态显示静态 X,不再旋转刷新图标。同步更新定向组件测试。
## 风险说明
仅影响 Desktop 内置浏览器的加载反馈视觉与停止按钮图标,不改变导航、停止、favicon 获取或持久化协议。实现时需兼容同组 favicon 状态的并行修复。
## 验收标准
- 点击刷新后工具栏显示静态 X,aria-label/tooltip 表示停止。
- 点击 X 可停止加载。
- 加载期间对应网页 tab 左侧 favicon 位置显示 loading 圆圈动效。
- 加载结束后 tab 恢复 favicon/fallback,工具栏恢复刷新图标。
- 相关 TypeScript 与定向测试通过。
---
**版本区域**: CN
**OS**: darwin arm64 (27.0.0)
**界面语言**: en
Contributor guide
Research direction
Start with apps/desktop/src/renderer/features/right-sidebar/plugins/web-browser/BrowserChrome.tsx and index.tsx, then trace the loading state through BrowserTabBody.tsx and useBrowserWebview.ts. Update the tab and toolbar loading feedback while preserving the existing stop behavior, and run BrowserChrome.test.ts and WebBrowserTabPillIcon.test.tsx. Done means the toolbar shows a static stop X during loading, the tab shows a loading ring, and both restore their idle states afterward.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- electron, typescript
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100