155 lines
6.2 KiB
Markdown
155 lines
6.2 KiB
Markdown
# 组件与样式模块
|
||
|
||
## 组件
|
||
|
||
### 布局组件
|
||
|
||
#### 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
|
||
- 容器宽度: max-w-[1440px]
|
||
|
||
#### Footer (`src/components/layout/Footer.tsx`)
|
||
- 前台底部页脚
|
||
- Logo + 简介 + 发现/分类/关于链接 + 社交图标(GitHub/Twitter)
|
||
|
||
### Provider组件
|
||
|
||
#### AuthProvider (`src/components/providers/auth-provider.tsx`)
|
||
- NextAuth SessionProvider 包裹组件
|
||
- 用于在客户端组件中访问session
|
||
|
||
#### ThemeProvider (`src/components/ThemeProvider.tsx`) 🆕
|
||
- 暗色/浅色双主题 Provider
|
||
- 提供 `theme` state、`toggleTheme()`、`setTheme(mode)` 方法
|
||
- 监听 `prefers-color-scheme` 媒体查询
|
||
- 持久化到 `localStorage("zhuiguang-theme")`
|
||
|
||
#### CompareProvider (`src/components/common/CompareProvider.tsx`) 🆕
|
||
- 工具对比 Context Provider
|
||
- 管理 `compareList` (最多4个工具)
|
||
- 提供 `addToCompare`、`removeFromCompare`、`clearCompare`、`isInCompare` 方法
|
||
|
||
### 公共组件
|
||
|
||
#### HeroBanner (`src/components/common/HeroBanner.tsx`) 🔄
|
||
- 文件: `src/components/common/HeroBanner.tsx`
|
||
- 用途: 页面顶部横屏海报（Canvas粒子动画+SVG装饰+渐变背景）
|
||
- 6种配色方案: `SCHEMES` 配置表 (`cosmos`/`aurora`/`dawn`/`forest`/`crimson`/`orange`)
|
||
- Props: `{ title: string, highlight: string, colorScheme: ColorScheme, stats: {label, value, unit}[], slogan: string, subSlogan?: string }`
|
||
- 动画: Canvas星星闪烁+流星效果，每种配色有独立的星星颜色、流星颜色、背景渐变、SVG装饰图案
|
||
- 使用页面: `/`(cosmos蓝) `/skills`(orange橙) `/daily`(dawn金) `/reviews`(aurora紫) `/community`(forest绿)
|
||
|
||
#### LoginModal (`src/components/common/LoginModal.tsx`)
|
||
- 登录/注册弹窗，支持模式切换
|
||
- 邮箱+密码认证，注册可选填昵称
|
||
- bg-white/95 backdrop-blur-xl
|
||
|
||
#### LoginForm (`src/components/common/LoginForm.tsx`)
|
||
- 登录表单组件
|
||
- 邮箱+密码输入 + 提交按钮 + 错误提示
|
||
|
||
#### 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评论项
|
||
- 支持嵌套回复、点赞、排序
|
||
|
||
#### CommentForm (`src/components/common/CommentForm.tsx`)
|
||
- 评论输入表单，支持评分选择
|
||
- 字数限制、评分验证
|
||
|
||
#### 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
|
||
- 基于 class-variance-authority
|
||
|
||
#### 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
|
||
|
||
### Next.js配置 (`next.config.mjs`)
|
||
- 图片域名: remotePatterns 允许所有https域名
|
||
- 图片格式: avif, webp
|
||
- 缓存: 静态资源365天不可变，API安全头
|
||
- 安全头: X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy
|
||
- Logo缓存: 开发环境no-cache，生产环境1天immutable
|
||
|
||
### 设计规范
|
||
- 圆角: 统一使用 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
|