# 组件与样式模块

## 组件

### 布局组件

#### Header (`src/components/layout/Header.tsx`)
- 前台顶部导航栏
- Logo + 导航链接(工具库/技能库/分类浏览) + 搜索框 + 登录/用户按钮
- 移动端汉堡菜单
- 滚动时背景模糊效果（bg-white/80 backdrop-blur-2xl）
- 搜索框: bg-muted/50 focus:bg-white focus:ring-2 focus:ring-primary/10

#### Footer (`src/components/layout/Footer.tsx`)
- 前台底部页脚
- Logo + 简介 + 发现/分类/关于链接 + 社交图标(GitHub/Twitter)

### Provider组件

#### AuthProvider (`src/components/providers/auth-provider.tsx`)
- NextAuth SessionProvider 包裹组件
- 用于在客户端组件中访问session

### 公共组件

#### LoginModal (`src/components/common/LoginModal.tsx`)
- 登录/注册弹窗，支持模式切换
- 邮箱+密码认证，注册可选填昵称
- bg-white/95 backdrop-blur-xl

#### SkillReviewCard (五维评测雷达图)
- 文件: `src/components/common/SkillReviewCard.tsx`
- 用途: 技能详情页展示五维评测雷达图和维度详情卡片
- 依赖: chart.js, react-chartjs-2 (dynamic import, ssr: false)
- Props: `{ slug: string }`
- 数据源: `/api/skills/${slug}/review`
- 五维度: 场景与能力(capability) / 开发体验(devExp) / 成本与许可(costLicense) / 社区健康(community) / 性能稳定(performance)
- 评分色标: ≥4绿色(emerald) / ≥3黄色(amber) / <3红色(red)
- 设计规范: 遵循浅色主题设计系统，紫色(violet)主色调雷达图

### ReviewSection (`src/components/common/ReviewSection.tsx`)
- 用户评论/评价组件，支持评分和文字评论
- 支持tool和skill两种类型
- bg-white/80卡片，bg-white/60评论项

#### FavoriteButton (`src/components/common/FavoriteButton.tsx`)
- 收藏按钮，乐观更新
- text-gray-500 hover:text-red-500

#### CategorySidebar (`src/components/common/CategorySidebar.tsx`)
- 分类侧边栏，支持搜索和分类选择
- bg-muted/50搜索框

### UI组件 (shadcn/ui)

#### Button (`src/components/ui/button.tsx`)
- 6种变体: default, outline, secondary, ghost, destructive, link
- 4种尺寸: default, sm, lg, icon

#### Card (`src/components/ui/card.tsx`)
- Card/CardHeader/CardTitle/CardDescription/CardContent/CardFooter

#### Dialog (`src/components/ui/dialog.tsx`)
- 基于 @radix-ui/react-dialog
- Dialog/DialogTrigger/DialogContent/DialogHeader/DialogTitle/DialogDescription/DialogFooter/DialogClose
- 遮罩层: bg-black/80

---

## 样式系统

### 全局样式 (`src/app/globals.css`)
- 浅色主题CSS变量（HSL色系）
- shadcn/ui 主题变量
- 自定义工具类:
  - `.glow-sm` / `.glow-md` / `.glow-lg` - 发光效果
  - `.gradient-text` - 渐变文字（蓝→紫→粉）
  - `.gradient-border` - 渐变边框
  - `.glass` / `.glass-sm` - 毛玻璃效果（bg-white/80 + backdrop-blur）
  - `.card-shine` - 卡片光泽动画
  - `.dot-grid` - 点阵网格背景
  - `.animate-fade-in` - 淡入动画
  - `.animate-slide-up` - 上滑动画
  - `.animate-float` - 浮动动画
  - `.animate-pulse-glow` - 脉冲发光

### Tailwind配置 (`tailwind.config.ts`)
- 浅色模式: class策略
- 主题色系: HSL CSS变量（background: 210 20% 98%, foreground: 222 47% 11%, primary: 221 83% 53%等）
- 动画: fade-in, slide-up, float, glow-pulse
- 自定义字体: Geist Sans, Geist Mono

### 设计规范
- 圆角: 统一使用 rounded-xl (12px) 或 rounded-2xl (16px)
- 边框: border-border/40 (40%透明度)
- 背景: bg-white/80 (毛玻璃) / bg-white/60 (卡片) / bg-muted/50 (输入框)
- 阴影: shadow-sm (卡片) / shadow-md (悬浮)
- 间距: 统一使用 Tailwind 间距系统
- 动画: transition-all duration-200

### 颜色规范（浅色主题）
- 文字颜色: 使用 -600/-700 系列（如 text-blue-700, text-emerald-600）
- 背景颜色: 使用 -50 系列（如 bg-blue-50, bg-emerald-50）
- 边框颜色: 使用 -200/60 系列（如 border-blue-200/60, border-emerald-200/60）
- 严禁使用暗色主题的 -400 文字、-500/10 背景、-500/20 边框
- 输入框: bg-muted/50 focus:bg-white focus:ring-2 focus:ring-primary/10

### 定价模型颜色
- free: bg-emerald-50 text-emerald-700 border-emerald-200/60
- freemium: bg-blue-50 text-blue-700 border-blue-200/60
- paid: bg-amber-50 text-amber-700 border-amber-200/60
- subscription: bg-purple-50 text-purple-700 border-purple-200/60

### 来源类型颜色
- github: bg-slate-50 text-slate-700
- gitlab: bg-orange-50 text-orange-700
- huggingface: bg-yellow-50 text-yellow-700