feat(ui): 侧边栏折叠与主题切换系统

[jsrcode]

概述

本 PR 实现了侧边栏折叠功能和完整的主题切换系统，显著提升应用的用户体验和个性化能力。

主要功能

1. 侧边栏折叠功能 ✨

• 可折叠设计：支持展开/收起两种模式
  • 展开模式：显示完整标签和图标（宽度 256px）
  • 收起模式：仅显示图标（宽度 72px）
• 状态持久化：折叠状态自动保存到 localStorage
• Tooltip 提示：收起模式下悬停显示完整标签名称
• 流畅动画：300ms 过渡动画，提供平滑视觉反馈
• 智能布局：所有导航项和控制按钮自适应折叠状态

2. 主题切换系统 🎨

• 三种模式支持：
  • 🌞 浅色模式（Light）
  • 🌙 深色模式（Dark）
  • 💻 跟随系统（System）
• ThemeProvider 上下文：全局主题状态管理
• 实时响应：系统主题变化时自动同步
• 持久化存储：主题偏好保存到 localStorage
• 主题色优化：深色模式主色调整为青色（HSL: 189 94% 43%），提升视觉舒适度

3. 新增 UI 组件

• Avatar 组件（基于 @radix-ui/react-avatar）
  • 预留用户头像功能接口
  • 支持图片加载失败时的 Fallback
• Tooltip 组件（基于 @radix-ui/react-tooltip）
  • 统一的提示气泡样式
  • 支持多方向显示（top/bottom/left/right）

4. HTTP 客户端优化 🔧

• 动态客户端创建：FileDownloader 改为每次请求时动态创建 HTTP 客户端
• 代理配置实时性：确保下载操作使用最新的代理配置（适配透明代理功能）

视觉改进

• ✅ 侧边栏按钮添加悬停动画（scale + shadow）
• ✅ 激活状态新增左侧指示条和阴影效果
• ✅ Logo 区域添加光晕效果
• ✅ 主题切换按钮集成到侧边栏底部
• ✅ 折叠按钮使用 Chevron 图标指示方向

技术实现

文件变更

• 新增文件：
  • src/hooks/useTheme.tsx - 主题管理 Hook
  • src/components/ui/avatar.tsx - Avatar 组件
  • src/components/ui/tooltip.tsx - Tooltip 组件
• 修改文件：
  • src/components/layout/AppSidebar.tsx - 侧边栏重构（+348/-105行）
  • src/main.tsx - 添加 ThemeProvider
  • src/index.css - 主题色调整
  • src-tauri/src/services/tool/downloader.rs - HTTP 客户端优化

依赖更新

• @radix-ui/react-avatar: ^1.1.11
• @radix-ui/react-tooltip: ^1.2.8

测试情况

• ✅ 所有代码检查通过（npm run check）
• ✅ ESLint：仅2个非阻塞性警告（react-refresh）
• ✅ Clippy：零警告
• ✅ Prettier/Rustfmt：格式正确
• ✅ 本地手动验证：
  • 侧边栏折叠/展开功能正常
  • 主题切换立即生效
  • 系统主题跟随正常
  • 状态持久化正确
  • Tooltip 显示正常

用户体验提升

1. 节省屏幕空间：折叠模式为主内容区域提供更多空间
2. 个性化主题：用户可根据偏好或环境选择合适的主题
3. 无缝切换：主题和折叠状态切换流畅自然
4. 直观操作：Tooltip 提示确保折叠模式下的可用性

风险评估

低风险

• 纯前端功能，不涉及后端逻辑
• 向后兼容，不破坏现有功能
• 使用成熟的 Radix UI 组件库

需要关注

• 首次使用时默认展开状态（符合预期）
• 系统主题模式需要浏览器支持 prefers-color-scheme

后续优化建议

• 添加侧边栏宽度自定义（拖拽调整）
• 支持更多主题色方案（蓝色、紫色等）
• 完善用户头像功能（当前为预留接口）
• 添加快捷键支持（如 Ctrl+B 切换侧边栏）

截图

（建议添加折叠前后对比、主题切换效果截图）

---

关联 Issue: 无（主动 UX 优化）