初始化项目版本
This commit is contained in:
111
rules/v0-project-converter.md
Normal file
111
rules/v0-project-converter.md
Normal file
@@ -0,0 +1,111 @@
|
||||
# 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`。
|
||||
- 页面正常渲染。
|
||||
- 无控制台错误。
|
||||
- 关键交互正常。
|
||||
- 样式显示正确。
|
||||
Reference in New Issue
Block a user