2a3e80c44f
- 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
68 lines
2.4 KiB
Markdown
68 lines
2.4 KiB
Markdown
✅ 用户菜单组件迁移完成
|
|
|
|
📋 改进前后对比摘要
|
|
|
|
改进前 (Before):
|
|
- ❌ 用户菜单逻辑耦合在 Navbar.tsx 中 (~150 行代码)
|
|
- ❌ 桌面端和移动端各自维护一套用户菜单代码
|
|
- ❌ 状态管理 (accountMenuOpen, accountMenuRef, accountInitial) 分散
|
|
- ❌ 点击外部关闭逻辑与 Navbar 主逻辑混合
|
|
- ❌ 代码复用性差
|
|
|
|
改进后 (After):
|
|
- ✅ 独立的 UserMenu.tsx 组件 (138 行)
|
|
- ✅ 桌面端和移动端复用同一组件
|
|
- ✅ 自包含状态管理和事件处理
|
|
- ✅ 关注点分离 - Navbar 减少 ~100 行代码
|
|
- ✅ 更好的可维护性和可测试性
|
|
|
|
🏗️ Fresh 组件层次结构
|
|
|
|
routes/
|
|
├── _app.tsx (服务端注入 user 状态)
|
|
└── (具体路由页面)
|
|
|
|
islands/
|
|
├── Navbar.tsx (主导航栏)
|
|
│ ├── <UserMenu user={user} language={language} /> ← 集成用户菜单
|
|
│ ├── SearchDialog
|
|
│ └── MobileMenu
|
|
└── UserMenu.tsx (独立用户菜单岛)
|
|
├── 状态: isOpen (Signal)
|
|
├── 计算值: avatarInitial (Computed)
|
|
├── 效果: 点击外部关闭 (useEffect)
|
|
└── 渲染:
|
|
├── 未登录 → 登录/注册按钮
|
|
└── 已登录 → 头像按钮 + 下拉卡片
|
|
├── 用户信息区 (头像、昵称、邮箱)
|
|
└── 操作按钮 (用户中心、退出登录)
|
|
|
|
🎨 关键 Tailwind 样式说明
|
|
|
|
设计一致性与 Navbar 保持统一:
|
|
|
|
1. 头像按钮
|
|
bg-brand 品牌主色
|
|
shadow-[0_4px_12px_rgba(51,102,255,0.3)] 品牌色阴影
|
|
hover:bg-brand-light 悬停亮色
|
|
rounded-full 圆形
|
|
|
|
2. 下拉卡片
|
|
rounded-xl 圆角卡片
|
|
border-brand-border 品牌边框色
|
|
shadow-[0_4px_20px_rgba(0,0,0,0.08)] 柔和阴影
|
|
bg-white 白色背景
|
|
|
|
3. 用户信息区
|
|
bg-brand-surface 浅色背景
|
|
border-brand-border/60 半透明边框
|
|
text-brand-heading 标题色
|
|
text-brand-heading/70 次要文字 (70% 不透明度)
|
|
|
|
4. 交互反馈
|
|
hover:bg-brand-surface 悬停背景
|
|
hover:bg-red-50 退出按钮悬停 (红色浅背景)
|
|
text-red-600 退出按钮文字 (红色)
|
|
transition 平滑过渡
|
|
|