格式转换 SVG 图标批量优化与转 React 组件 AI 提示词 (Prompts)

这篇 Prompt 能帮你做什么

目标是生成一个可部署的在线工具：把一批 SVG 图标上传后，自动做结构清理与一致性处理（删除冗余节点、合并/展开 path、统一 viewBox、规范化属性、按规则保留/替换颜色），并一键导出 React 组件（含类型定义、索引文件、可选的 SVGO 配置与转换报告）。

交付物（必须产出）

1）完整项目源码与文件树；2）本地运行命令与环境要求；3）部署说明（例如 Vercel/Node）；4）最小可用的 UI 与交互；5）自动化测试或 QA checklist；6）处理报告导出（JSON/CSV 任选其一）。

Prompt：生成 Next.js 在线 SVG 批量优化与 React 组件转换工具

你是资深前端工程师 + 构建工具工程师。请从 0 生成一个“在线 SVG 批量优化与 React 组件转换”工具的完整可运行项目。

【技术栈要求】
- Next.js 14（App Router）+ Type 
- UI 用简单的 Tailwind 或原生 CSS 均可
- SVG 优化用 svgo（可配置）
- SVG -> React 组件用 @svgr/core
- 支持 Node 18+；不依赖本地二进制（纯 JS 依赖优先）

【功能需求】
1) 页面：上传区（支持拖拽与多文件）、规则配置区、结果预览区、导出区。
2) 输入：多文件 SVG（.svg），可选 zip（如实现 zip 解析就加分）。
3) 规则配置（提供默认值，并允许用户修改）：
   - 统一 viewBox：缺失则根据 width/height 补齐；存在则保留
   - 去除 width/height（可选），改为响应式
   - 颜色策略：
     a) 保留原色
     b) 统一替换为 currentColor
     c) 将指定颜色映射成 CSS 变量（例如 --icon-primary / --icon-secondary）
   - 清理策略：移除  data/defs/empty groups；合并重复 path；移除无效属性
   - 命名策略：根据文件名生成组件名（PascalCase），并处理冲突
4) 输出：
   - React 组件（每个 SVG 一个 .tsx）
   - index.ts 导出汇总
   - types.d.ts（如需要）
   - 一份 report.json：每个文件的优化前后大小、变更项、告警（例如缺失 viewBox、使用外链引用等）
5) 下载：打包下载 zip（包含生成的组件与 report）。
6) 安全：限制单次上传数量与大小；对 SVG 进行基本安全过滤（例如去除  /on* 事件）。

【代码组织】
- 输出完整文件树（用树状结构展示）
- 给出每个关键文件的完整代码：
  - app/page.tsx（UI）
  - app/api/convert/route.ts（转换 API）
  - lib/convert.ts（核心转换逻辑）
  - lib/rules.ts（规则定义与默认值）
  - lib/report.ts（报告生成）
  - lib/zip.ts（打包下载，如实现）
  - tests（或 e2e）至少覆盖：命名冲突、viewBox 处理、currentColor 替换、恶意属性清理

【运行与部署】
- 提供本地运行命令：pnpm/npm/yarn 三选一（写清版本与命令）
- 提供部署到 Vercel 的步骤（包含环境变量如有）

【验收标准】
- 我复制你的代码后能直接安装依赖并运行
- 上传 5 个 SVG 能在 10 秒内得到结果（合理的实现即可）
- report.json 结构清晰可读
- 转换失败时有用户可理解的错误提示

请直接输出：文件树 -> 关键代码 -> 运行命令 -> 部署说明 -> 测试/QA。

Prompt：补充生成 QA checklist 与测试用例（可直接复制执行）

基于上面的项目，请补充：
1) QA checklist（至少 25 条，覆盖上传/规则配置/输出/报错/安全/性能/兼容性）。
2) 自动化测试建议：优先用 Vitest + Node 环境单测核心转换逻辑；如有精力再加 Playwright E2E。
3) 给出至少 6 个可用于测试的最小 SVG 字符串样例（包含：缺失 viewBox、有 width/height、含 style、含多色、含无效属性、含潜在危险   等）。
输出格式：先给 checklist（可复制），再给测试代码文件与运行命令。