你是一个前端工程师。请根据下面需求实现一个【项目类型/页面名称】。
1. 项目目标
- 我要做的是：【一句话描述页面/应用目标】
- 目标用户是：【谁会使用它】
- 使用场景是：【用户什么时候、为什么打开它】
- 最小可用版本 MVP 只需要包含：【列出 3-5 个核心功能】
- 暂时不要实现：【列出明确不做的功能，避免 AI 过度发挥】
2. 技术栈与项目约束
- 框架选择：【Vanilla JS / React / Vue / Next.js / 其他】
- 构建工具：【无构建，纯 HTML/CSS/JS / Vite / Next.js 内置 / 其他】
- 语言：【JavaScript / TypeScript】
- 样式方案：【普通 CSS / CSS Modules / Tailwind CSS / 组件库 / 其他】
- 输出形式：【单个 HTML 文件 / App.tsx + CSS / 完整项目目录 / 只给关键组件】
- 代码复杂度：【适合初学者讲解 / 正常工程写法 / 更可维护的分层写法】
3. 页面结构
页面需要包含以下区域：
- Header：【标题、导航、搜索入口等】
- Main：【核心内容区域，如卡片列表、表格、表单、图表】
- Sidebar/Filter：【筛选、分类、目录；如果不需要写“无”】
- Footer/Other：【底部信息或其他区域；如果不需要写“无”】
4. 数据与状态
- 数据来源：【写死 mock data / 从本地 JSON 读取 / 调用 API / 用户输入生成】
- 数据字段包括：【字段名 + 含义，如 title, authors, tags, year】
- 页面状态包括：【搜索关键词、筛选标签、加载中、错误、空结果、选中项等】
- 边界情况需要处理：【空数据 / 搜索无结果 / 字段缺失 / 网络失败 / 移动端窄屏】
5. 交互需求
用户可以：
- 【交互 1：例如输入关键词搜索】
- 【交互 2：例如点击标签筛选】
- 【交互 3：例如新增/删除/展开详情/复制链接】
交互完成后，页面应该：【描述用户能看到的变化】
6. 视觉与体验
- 整体风格：【简洁学术 / 科技感 / 可爱活泼 / 后台管理 / 极简黑白】
- 布局要求：【桌面端几列、移动端怎么变】
- 颜色/字体偏好：【如蓝白、暖色、系统默认字体】
- 可访问性要求：【按钮可点击、文字对比清楚、input 有 label】
7. 输出与验收
- 请输出：【需要的文件名和代码块】
- 请说明：【如何安装依赖、如何启动、如何构建】
- 验收标准：
1) 页面能在本地启动，无控制台报错；
2) 【核心功能 1】可用；
3) 【核心功能 2】可用；
4) 移动端布局不溢出；
5) 代码中关键部分有简短注释，方便课堂讲解。