硬核Web开发命题，覆盖纯前端到全栈

这里整理了五条基于真实开发场景的 Web 开发命题。这些命题覆盖了从纯前端交互到全栈应用的多个维度，旨在考察开发者对技术细节的把控能力以及工程化思维。所有命题均去除了冗余修饰，直击核心需求，适合用于技术面试、代码考核或高阶练习。

一、个人电影收藏管理器（纯前端·中等难度）

核心目标：构建一个无后端的单页应用，实现本地数据的完整 CRUD 流程。

功能需求：
1. 数据录入：用户可添加电影条目，字段包括片名（必填）、年份（1900-202范围校验）、类型（动作/喜剧/科幻/恐怖多选或单选）、评分（1-5星交互式选择）。
2. 列表展示：采用卡片式布局，支持响应式适配（移动端单列，桌面端多列 Grid 或 Flex-wrap）。
3. 筛选与排序：提供按类型筛选的功能，支持按评分高低或年份新旧进行升序/降序排列。提供一键重置筛选状态的按钮。
4. 数据持久化：所有操作实时同步至 localStorage，确保页面刷新后数据不丢失。
5. 交互细节：实现表单基础校验（如片名非空），删除操作需有二次确认或直接移除并更新视图。按钮需具备悬停状态反馈，但严禁使用复杂的入场动画或位移过渡，保持界面清爽。

技术约束：
- 栈选择：HTML5/CSS3 + 原生 JavaScript (ES6+) 或 Vue/React 框架（禁止引入 AntD/MUI 等大型 UI 库）。
- 运行环境：纯静态文件，无需 Node.js 后端或任何外部 API。
- 难点考察：状态管理与 DOM 更新的同步效率，localStorage 的数据结构设计。

二、简约待办事项板（纯前端·简单难度）

核心目标：极简主义的任务管理工具，重点考察代码的整洁度与基础 DOM 操作能力。

功能需求：
1. 任务创建：包含任务名称输入框、可选的截止日期选择器及添加按钮。
2. 状态切换：任务列表中每项支持标记为“已完成”或“未完成”，已完成项需显示删除线样式。
3. 列表逻辑：新任务默认插入列表顶部（按时间倒序）。支持单项删除。
4. 主题适配：可选实现暗色/亮色模式切换，或通过 CSS 变量预留接口。
5. 持久化：使用 localStorage 保存任务状态。

技术约束：
- 栈选择：原生 JavaScript 操作 DOM，CSS3 基础布局。
- 限制条件：禁止使用拖拽库、模态框组件或复杂的状态管理库（如 Redux）。
- 难点考察：在零依赖情况下实现清晰的代码结构，以及移动优先的响应式布局处理。

三、3D 旋转产品展示台（纯前端·3D 中等难度）

核心目标：基于 Three.js 构建交互式 3D 场景，考察 WebGL 基础与资源加载管理。

功能需求：
1. 场景搭建：中央放置一个旋转展示台（圆形平面或环面几何体），上方加载 glTF/GLB 模型（可使用官方 Horse.glb 示例或基本几何体替代，但代码需保留加载外部模型的通用接口）。
2. 交互控制：集成 OrbitControls，支持鼠标拖拽旋转视角、滚轮缩放。
3. 灯光系统：配置环境光、点光源和平行光，确保模型呈现正确的明暗关系与阴影效果（开启 castShadow/receiveShadow）。
4. 自动化特性：提供开关按钮控制展示台的自动旋转。背景需使用深色星空纹理或渐变天空盒。
5. 异常处理：模型加载过程中显示 Loading 状态，加载失败时展示友好的错误提示文本。

技术约束：
- 栈选择：Three.js (r128+)，包含 OrbitControls 和 GLTFLoader。
- 性能要求：使用 requestAnimationFrame 优化渲染循环，避免内存泄漏。
- 难点考察：3D 坐标系理解、光照参数调试、异步资源加载的生命周期管理。

四、横版跑酷小游戏（纯前端·游戏复杂难度）

核心目标：使用 Phaser 3 引擎开发具备物理碰撞与粒子特效的游戏 Demo。

功能需求：
1. 核心玩法：主角自动向右奔跑，玩家通过空格键或触摸屏幕触发跳跃。
2. 障碍生成：随机生成障碍物（如移动锯片或地面坑洞），间隔 1-2 秒，超出屏幕左边界后自动销毁以释放内存。
3. 物理系统：利用 Arcade Physics 实现重力模拟与碰撞检测。
4. 视觉反馈：相机跟随主角水平滚动；跳跃时产生灰尘粒子特效；碰撞障碍物时触发红色闪烁或爆炸粒子效果，并立即终止游戏。
5. 计分系统：每越过一个障碍物加 10 分，游戏结束时显示最终得分与历史最高分（localStorage 存储），并提供重新开始按钮。

技术约束：
- 栈选择：Phaser 3 (Canvas/WebGL 渲染)。
- 性能优化：严格管理对象池，及时销毁离屏实体，防止帧率下降。
- 难点考察：游戏循环逻辑、物理引擎参数调优、粒子系统配置及游戏状态机管理。

五、名人名言收藏夹（全栈·简单难度）

核心目标：基于 Next.js App Router 构建轻量级全栈应用，考察服务端组件与数据库交互。

功能需求：
1. 数据展示：首页通过 Server Component 直接获取并渲染名言列表（引用内容 + 作者）。
2. 数据写入：提供表单提交新功能，通过 API Route 将数据写入 SQLite 数据库，提交成功后重新验证（revalidate）并刷新列表。
3. 数据删除：每条名言旁设有删除按钮，调用 DELETE API 移除对应记录。
4. 数据校验：后端需校验引用内容非空且长度小于 200 字符，作者字段非空。
5. 部署友好：无需 Docker 或复杂容器配置，本地执行 npm run dev 即可自动初始化 SQLite 文件并启动服务。

技术约束：
- 栈选择：Next.js 14+ (App Router)，SQLite (better-sqlite3 或 Prisma ORM)。
- 样式：Tailwind CSS 或原生 CSS，保持卡片式简洁布局。
- 难点考察：Next.js 服务端动作（Server Actions）或 API Route 的正确实现，数据库连接的单例模式处理，以及前后端数据流的闭环。

以上命题均摒弃了模糊的描述，明确了技术边界与验收标准。它们不仅考察编码能力，更侧重于开发者在特定约束下解决实际问题、优化性能以及构建可维护代码架构的能力。