112 lines
2.3 KiB
Markdown
112 lines
2.3 KiB
Markdown
# V0 项目转换规则
|
||
|
||
用于将 V0 生成的 Next.js 项目转换为本项目原型页面，保持视觉和功能，并符合 `rules/prototype-development-guide.md`。
|
||
|
||
## 目标
|
||
|
||
- 保持页面视觉一致性。
|
||
- 移除 Next.js 特有实现。
|
||
- 产出可在 `src/prototypes/<name>/` 中运行的 React 页面。
|
||
|
||
## 预处理
|
||
|
||
Make 服务端上传接口会自动运行内置 V0 预处理器。它会复制项目、分析路径别名和依赖，并生成任务文档与分析 JSON。预处理器不直接修改业务代码。
|
||
|
||
如果项目需要覆盖默认预处理行为，可以在目标项目中提供 `scripts/v0-converter.mjs`；否则使用服务端内置版本。
|
||
|
||
## 默认页面格式
|
||
|
||
默认转换为普通 React 页面。只有明确需要 Axhub / Axure 接管时才接入 Axure API。
|
||
|
||
```typescript
|
||
/**
|
||
* @name 页面名称
|
||
*
|
||
* 参考资料：
|
||
* - /rules/prototype-development-guide.md
|
||
*/
|
||
|
||
import './style.css';
|
||
import React from 'react';
|
||
|
||
export default function PageName() {
|
||
return (
|
||
<div />
|
||
);
|
||
}
|
||
```
|
||
|
||
需要 Axure API 时，再参考 `rules/axure-api-guide.md`。
|
||
|
||
## 移除 Next.js 代码
|
||
|
||
移除或替换：
|
||
|
||
- `"use client"`：删除。
|
||
- `next/navigation`：删除或改为组件内状态/普通链接。
|
||
- `next/image`：改为 `<img>`。
|
||
- `next/link`：改为 `<a>`。
|
||
- `Metadata`、`@vercel/*`：删除。
|
||
|
||
## 路径别名
|
||
|
||
将 `@/` 转换为相对路径：
|
||
|
||
```typescript
|
||
// V0
|
||
import { cn } from "@/lib/utils";
|
||
|
||
// 转换后
|
||
import { cn } from "../lib/utils";
|
||
```
|
||
|
||
以脚本生成的分析表为准逐项检查。
|
||
|
||
## 样式
|
||
|
||
`style.css` 以 Tailwind V4 入口开头：
|
||
|
||
```css
|
||
@import "tailwindcss";
|
||
```
|
||
|
||
随后合并源项目全局样式文件、主题变量和自定义样式。
|
||
|
||
## 依赖
|
||
|
||
排除：
|
||
|
||
- `next` 和 `next-*`
|
||
- `@vercel/*`
|
||
- `react` 和 `react-dom`
|
||
|
||
保留并按需安装：
|
||
|
||
- `class-variance-authority`
|
||
- `clsx`
|
||
- `tailwind-merge`
|
||
- `@radix-ui/*`
|
||
- `lucide-react`
|
||
- `recharts`
|
||
- `date-fns`
|
||
|
||
新增依赖优先使用 npm，便于生成项目在没有 pnpm 的用户环境中继续运行：
|
||
|
||
```bash
|
||
npm install <package-name>
|
||
```
|
||
|
||
## 验收
|
||
|
||
```bash
|
||
node scripts/check-app-ready.mjs /prototypes/[页面名]
|
||
```
|
||
|
||
要求：
|
||
|
||
- 状态为 `READY`。
|
||
- 页面正常渲染。
|
||
- 无控制台错误。
|
||
- 关键交互正常。
|
||
- 样式显示正确。
|