copyCoder
提示词例子
根据 B站首页截图 获得如下提示词：
<summary_title>
创建详细组件时需满足以下要求：
1. 对客户端组件使用 'use client' 指令
2. 使用 Tailwind CSS 工具类实现响应式设计
3. 使用 Lucide React 图标库（来自 lucide-react 包）。除非特别要求，否则不使用其他 UI 库
4. 在适当的地方使用 picsum.photos 的库存照片，仅使用已知存在的有效 URL
5. 配置 next.config.js 的 image remotePatterns 以启用 picsum.photos 的库存照片
6. 创建包含所有页面必要导航项的根布局 layout.tsx
7. 必须在正确位置实现导航元素项，即左侧边栏、顶部标题栏
8. 准确实现必要的网格布局
9. 遵循正确的导入实践：
- 使用 @/ 路径别名
- 保持组件导入的组织性
- 用新的完整代码更新当前的 src/app/page.tsx
- 不要忘记根路由(page.tsx)处理
- 在停止之前必须完成整个提示内容
视频内容平台仪表板与网格布局
</summary_title>
<image_analysis>
1. 导航元素：
- 顶部标题栏包含：搜索栏、用户档案、通知
- 主导航栏包含：分类（游戏、娱乐、新闻等）
- 次级导航包含：趋势、流行、最新
2. 布局组件：
- 标题栏高度：60px
- 搜索栏宽度：240px
- 视频缩略图卡片：280px × 156px
- 桌面端采用4列网格布局
- 网格项之间间距16px
3. 内容部分：
- 主横幅部分 (1140px × 320px)
- 视频网格部分
- 缩略图预览卡片包含：
- 视频缩略图
- 标题（最多2行）
- 频道信息
- 观看次数和时间戳
- 时长标记
4. 交互控件：
- 带自动完成的搜索栏
- 带活动状态的分类标签
- 视频卡片的悬停状态
- 点赞/分享按钮
- 用户菜单下拉框
5. 颜色：
- 主要：#FF2B4C（红色强调）
- 背景：#F4F4F4
- 文本：#222222
- 次要文本：#666666
- 边框：#E5E5E5
6. 网格/布局结构：
- 容器最大宽度：1200px
- 响应式网格：
- 桌面端：4列
- 平板端：3列
- 移动端：1列
- 外边距24px
- 网格间隔16px
</image_analysis>
<development_planning>
1. 项目结构：
src/
├── components/
│ ├── layout/
│ │ ├── Header
│ │ ├── Navigation
│ │ └── VideoGrid
│ ├── features/
│ │ ├── Search
│ │ ├── VideoCard
│ │ └── CategoryNav
│ └── shared/
├── assets/
├── styles/
├── hooks/
└── utils/
2. 主要功能：
- 无限滚动视频网格
- 搜索功能
- 分类筛选
- 视频预览卡片
- 响应式布局
3. 状态管理：
interface AppState {
├── videos: {
│ ├── items: Video[]
│ ├── loading: boolean
│ ├── currentPage: number
│ └── filter: FilterOptions
├── search: {
│ ├── query: string
│ ├── results: SearchResult[]
│ └── loading: boolean
├── }
}
4. 路由：
const routes = [
├── '/',
├── '/category/:id',
├── '/search',
└── '/video/:id'
]
5. 组件架构：
- VideoGrid (容器)
├── VideoCard (展示型)
├── CategoryNav (容器)
├── SearchBar (容器)
└── Pagination (展示型)
6. 响应式断点：
$breakpoints: (
├── 'sm': '320px',
├── 'md': '768px',
├── 'lg': '1024px',
└── 'xl': '1200px'
);
</development_planning>
后续拆分的需求：页面结构分析
Next.js 基于导航菜单项的路由结构（不包括主路由）。确保用组件包装所有路由：
路由：
- /search-bar
- /user-profile
- /notifications
- /categories-gaming
- /entertainment
- /news
- /etc
- /trending
- /popular
- /latest
页面实现：
/search-bar:
核心目的：使用户能够通过过滤器和建议搜索站点内容
关键组件：
- 带自动完成的搜索输入
- 过滤选项（日期、类型、类别）
- 带无限滚动的搜索结果网格
- 最近搜索历史
布局结构：
- 顶部固定搜索栏
- 左侧过滤面板（移动端可折叠）
- 带响应式网格的主要结果区域
/user-profile:
核心目的：显示和管理用户信息和活动
关键组件：
- 带头像和统计数据的个人资料头部
- 活动信息流
- 历史记录
- 账户设置
- 已保存项目
布局结构：
- 个人资料头部横幅
- 头部下方的导航标签
- 带侧边栏的主要内容区域
/notifications:
核心目的：显示用户通知和提醒
关键组件：
- 带类别的通知列表
- 已读/未读状态
- 操作按钮
- 过滤选项
布局结构：
- 顶部类别栏
- 可滚动通知列表
- 快速操作侧边栏
/categories-gaming:
核心目的：显示游戏相关内容和子类别
关键组件：
- 游戏子类别导航
- 精选游戏轮播
- 热门直播/内容
- 相关讨论
布局结构：
- 带精选内容的主要部分
- 子类别的网格布局
- 带热门项目的侧边栏
/entertainment:
核心目的：展示娱乐内容和新闻
关键组件：
- 媒体轮播
- 新闻信息流
- 名人动态
- 即将发布
布局结构：
- 精选滑块
- 多列内容网格
- 带亮点的侧边栏
/news:
核心目的：展示各类别的最新新闻
关键组件：
- 突发新闻横幅
- 新闻类别标签
- 文章预览
- 分享按钮
布局结构：
- 头条新闻部分
- 主要新闻网格
- 快速链接侧边栏
/trending:
核心目的：显示当前流行内容
关键组件：
- 热门话题列表
- 实时更新
- 类别过滤器
- 分享功能
布局结构：
- 趋势图表
- 内容卡片网格
- 趋势侧边栏
/popular:
核心目的：按指标显示最受欢迎的内容
关键组件：
- 人气指标
- 时间段选择器
- 内容预览
- 交互式图表
布局结构：
- 统计概览
- 热门内容网格
- 分析侧边栏
/latest:
核心目的：显示最新内容
关键组件：
- 实时信息流
- 类别过滤器
- 排序选项
- 快速查看预览
布局结构：
- 新内容提醒横幅
- 时间顺序信息流
- 快速过滤侧边栏
布局：
MainLayout：
- 适用路由：所有路由
- 核心组件：
- 带导航的页眉
- 页脚
- 侧边栏
- 内容区域
- 响应式行为：
- 移动端可折叠侧边栏
- 小屏幕上的堆叠布局
- 流动容器宽度
ContentLayout：
- 适用路由：/categories-*, /entertainment, /news
- 核心组件：
- 类别导航
- 内容区域
- 相关项目侧边栏
- 响应式行为：
- 网格根据屏幕大小调整列数
- 侧边栏在移动端移至底部
- 小屏幕上可滚动的类别导航
FeedLayout：
- 适用路由：/trending, /popular, /latest
- 核心组件：
- 信息流头部
- 内容流
- 过滤面板
- 响应式行为：
- 移动端单列
- 小屏幕上的浮动过滤按钮
- 支持无限滚动