accounts/NAVBAR_UserMenu_Design.md at c0b22c314dbddfdcddbc970abe62b6848fc493c5

Haitao Pan 2a3e80c44f refactor(dashboard-fresh): extract user menu into standalone component

- Create islands/UserMenu.tsx with self-contained user menu functionality
  - Refactor islands/Navbar.tsx to use UserMenu component
  - Support both desktop and mobile layouts with single component

2025-11-05 09:18:56 +08:00

2.4 KiB

Raw Blame History

✅ 用户菜单组件迁移完成

📋 改进前后对比摘要

改进前 (Before):

❌ 用户菜单逻辑耦合在 Navbar.tsx 中 (~150 行代码)
❌ 桌面端和移动端各自维护一套用户菜单代码
❌ 状态管理 (accountMenuOpen, accountMenuRef, accountInitial) 分散
❌ 点击外部关闭逻辑与 Navbar 主逻辑混合
❌ 代码复用性差

改进后 (After):

✅ 独立的 UserMenu.tsx 组件 (138 行)
✅ 桌面端和移动端复用同一组件
✅ 自包含状态管理和事件处理
✅ 关注点分离 - Navbar 减少 ~100 行代码
✅ 更好的可维护性和可测试性

🏗️ Fresh 组件层次结构

routes/ ├── _app.tsx (服务端注入 user 状态) └── (具体路由页面)

islands/ ├── Navbar.tsx (主导航栏) │ ├── ← 集成用户菜单 │ ├── SearchDialog │ └── MobileMenu └── UserMenu.tsx (独立用户菜单岛) ├── 状态: isOpen (Signal) ├── 计算值: avatarInitial (Computed) ├── 效果: 点击外部关闭 (useEffect) └── 渲染: ├── 未登录 → 登录/注册按钮 └── 已登录 → 头像按钮 + 下拉卡片 ├── 用户信息区 (头像、昵称、邮箱) └── 操作按钮 (用户中心、退出登录)

🎨 关键 Tailwind 样式说明

设计一致性与 Navbar 保持统一:

头像按钮 bg-brand 品牌主色 shadow-[0_4px_12px_rgba(51,102,255,0.3)] 品牌色阴影 hover:bg-brand-light 悬停亮色 rounded-full 圆形
下拉卡片 rounded-xl 圆角卡片 border-brand-border 品牌边框色 shadow-[0_4px_20px_rgba(0,0,0,0.08)] 柔和阴影 bg-white 白色背景
用户信息区 bg-brand-surface 浅色背景 border-brand-border/60 半透明边框 text-brand-heading 标题色 text-brand-heading/70 次要文字 (70% 不透明度)
交互反馈 hover:bg-brand-surface 悬停背景 hover:bg-red-50 退出按钮悬停 (红色浅背景) text-red-600 退出按钮文字 (红色) transition 平滑过渡

2.4 KiB Raw Blame History

2.4 KiB

Raw Blame History