Prompt Engineering for Nuxt

写一个上传组件

在 AI 视频平台（Nuxt4 + Nuxt UI）中，创建一个视频上传组件 `VideoUploader.vue`：

技术要求：
- 使用 `useChunkUpload` composable（已有，见 composables/useChunkUpload.ts）
- UI 使用 Nuxt UI 的 UButton、UProgress 组件
- 拖拽上传区域，支持点击选择文件
- 文件类型限制：video/*，最大 2GB

功能：
- 选择文件后显示文件名和大小
- 上传过程中显示进度条（百分比）
- 上传完成后跳转到 /video/[id]/edit
- 上传失败显示错误提示

不要：
- 不要创建新的 composable，使用现有的 useChunkUpload
- 不要用原生 fetch，useChunkUpload 内部已处理

创建 Nuxt Nitro API 路由 `server/api/videos/[id]/like.post.ts`：

功能：切换视频点赞状态（已赞则取消，未赞则添加）

要求：
- 使用 requireAuth(event) 做认证
- 使用 Zod 做空 body 校验（不需要参数）
- 操作 likes 表（schema 已在 packages/database/schema/likes.ts）
- 同时更新 videos 表的 likeCount（sql 原子操作）
- 返回 { liked: boolean }

参考现有路由：server/api/videos/[id]/danmaku.post.ts

创建 Nuxt 页面 `pages/video/[id].vue`：

数据获取：
- 使用 useFetch 获取 /api/videos/:id（SSR）
- 使用 useSeoMeta 设置标题、描述、OG 图片
- 404 时使用 showError({ statusCode: 404 })

组件组合：
- VideoPlayer（已有，props: src, poster）
- LikeButton（已有，props: videoId, initialLiked, initialCount）
- 视频标题、描述、标签、播放量、创建时间
- 相关视频推荐（调用 /api/videos/related?id=xxx）

布局：
- 使用 default layout
- 左侧 2/3 视频 + 信息，右侧 1/3 相关视频
- 响应式：移动端单列

创建 composable `composables/useVideoFilter.ts`：

功能：视频列表的筛选和排序状态管理

输入：
- 初始查询参数从 route.query 读取

状态：
- category: string | null（分类筛选）
- sortBy: 'latest' | 'popular' | 'trending'
- duration: 'short' | 'medium' | 'long' | null

输出：
- query: computed 的查询参数对象（用于传给 useFetch）
- reset(): 重置所有筛选
- 每次状态变化自动同步到 URL query（使用 router.replace）

注意：
- SSR 安全（初始值从 route.query 读取）
- 不要在 composable 内调用 useFetch（由调用者负责）

功能：视频收藏
├── 任务 1：数据库 schema（favorites 表 + migration）
├── 任务 2：API 路由（收藏/取消/列表）
├── 任务 3：Composable（useFavorite）
├── 任务 4：UI 组件（FavoriteButton + 收藏列表页）
└── 任务 5：测试

重构：视频状态管理
├── 任务 1：抽取 useVideoPlayer composable
├── 任务 2：抽取 useVideoProgress composable  
├── 任务 3：抽取 useVideoQuality composable
├── 任务 4：重构 VideoPlayer.vue 使用新 composables
└── 任务 5：验证所有功能正常

上一步我们创建了 packages/database/schema/favorites.ts。
现在基于这个 schema，创建 API 路由：
- @packages/database/schema/favorites.ts
- 参考 @server/api/videos/[id]/like.post.ts 的风格

项目已有：
- favorites schema：id, userId, videoId, createdAt（唯一约束 userId+videoId）
- 用户系统：requireAuth(event) 返回 session.user.id

创建 server/api/favorites/ 下的 CRUD 路由

第 1 轮：创建一个视频搜索页面，使用 /api/search 接口
         → AI 生成基础版本

第 2 轮：添加搜索防抖（300ms）和加载骨架屏
         → AI 在现有代码上增强

第 3 轮：搜索结果为空时显示推荐视频，从 /api/videos/popular 获取
         → AI 添加空状态处理

第 4 轮：添加搜索历史（localStorage），最多保存 10 条
         → AI 添加历史功能

差：重新生成，上次的不对
好：上面的代码有两个问题：
    1. useFetch 不应该在 onMounted 里调用，直接在 setup 顶层调用
    2. computed 里不要用 .value，直接引用 ref 变量名
    请修正这两处

为 [实体名] 创建完整的 CRUD 模块：

数据库：
- Schema 文件：packages/database/schema/[实体].ts
- 字段：[列出字段和类型]
- 关系：[外键关系]

API 路由（server/api/[实体]/）：
- index.get.ts：分页列表（支持 page, limit, search 参数）
- [id].get.ts：详情
- index.post.ts：创建（需要认证）
- [id].put.ts：更新（需要认证 + 权限检查）
- [id].delete.ts：删除（需要认证 + 权限检查）

所有路由使用 Zod 校验，返回 typed 响应。
参考现有的 videos 模块实现风格。

在现有 [页面/组件] 上添加 [功能名]：

当前代码：@[文件路径]

需要添加：
- [具体功能描述]
- [交互行为]
- [边界情况]

约束：
- 不要修改现有的 [xxx] 逻辑
- 使用现有的 [yyy] composable
- 保持与现有代码相同的风格

Bug：[描述现象]
预期行为：[描述正确行为]
实际行为：[描述错误行为]
复现步骤：[1, 2, 3]

相关文件：
- @[文件 1]
- @[文件 2]

请分析根本原因并修复。如果需要看更多代码请告诉我。

重构 @[文件路径]：

目标：[重构目标，如"拆分过长的组件"、"提取重复逻辑"]

当前问题：
- [问题 1]
- [问题 2]

约束：
- 保持所有现有功能不变
- 保持组件的 public API（props, emits）不变
- 新文件放在 [目录]

请先给出重构方案，我确认后再实施。