你将得到什么
这篇内容提供 1 条可直接复制使用的 AI 提示词(Prompts),用于让 AI 生成一个可运行、可构建、可部署的「在线 CAD 图纸预览与解析」工具项目。
交付物(由 AI 生成,要求一次性给全):完整项目源码、清晰文件树、安装/运行命令、部署说明、API 说明、以及测试用例或 QA checklist。
适用场景
适合设计/制造/施工协作时做快速审图:上传 DXF/DWG 后在线查看、按图层筛选、测量关键尺寸、导出解析报告;也适合在发给客户/同事前做“图层与单位是否正确”的自检。
功能范围(避免生成渲染图)
本文只做“预览/检查/提取/报告”,不引导生成任何渲染图、海报或插画。
建议功能清单:
- 支持上传 DXF(必须)与 DWG(可选:通过服务端转换为 DXF 后再解析)。
- 画布预览:缩放/平移/适配窗口、黑白/深色背景切换。
- 图层面板:图层列表、显隐切换、按名称搜索。
- 单位与尺寸:识别单位、基础测量(点到点距离/多段线长度/面积)、显示标注。
- 解析报告:统计实体类型数量、图层数量、最大/最小坐标范围、疑似异常(空图层、超大坐标、单位缺失)。
- 导出:JSON 报告下载;可选导出 SVG 预览图(仅矢量导出,不做渲染图生成)。
AI 提示词(Prompts)
你是资深全栈工程师 + 前端可视化工程师 + 架构师。
请生成一个“在线 CAD 图纸预览与图层/尺寸提取工具”的完整可运行项目,要求:
1) 项目定位
- 一个可部署的 Web 应用:用户上传 DXF(必须)/DWG(可选)文件,在浏览器中预览并分析。
- 只做预览/检查/提取/报告,不要引导或实现任何“生成渲染图/海报/插画/出图”的功能。
2) 技术栈(必须按此生成)
- 前端:Next.js 14(App Router)+ Type + TailwindCSS
- 画布渲染:基于 Canvas 2D(或 SVG)实现 DXF 预览(请说明取舍)
- DXF 解析:使用 npm 包(例如 dxf-parser 或等价方案),并写清解析过程与数据结构
- 后端:Next.js Route Handlers(/api)实现上传、解析、报告生成
- 文件存储:本地临时(内存/磁盘)即可;不要依赖第三方云存储
3) 功能需求(必须全部实现)
- 上传页面:拖拽上传;限制文件大小;显示解析进度;错误提示
- 预览页面:缩放/平移;适配窗口;图层面板(显隐+搜索)
- 测量工具:点击两点显示距离;多段线长度与面积(至少实现一种)
- 报告页面:
- 基础统计:图层数量、实体数量、实体类型分布
- 几何范围:minX/minY/maxX/maxY
- 异常提示:单位缺失、坐标过大、空图层
- 导出:下载 JSON 报告(并提供示例结构)
4) DWG(可选增强,必须“可开关”)
- 如果实现 DWG:请提供一个可选的服务端转换层(开关配置)。
- 默认关闭 DWG;当用户上传 DWG 且未开启转换时,给出清晰提示:仅支持 DXF,或引导转换。
- 若采用任何原生依赖,请提供 Dockerfile 与本地开发说明;否则请保持纯 JS 方案。
5) 交付物(必须输出且结构清晰)
- 完整源码(按文件逐个给出)
- 文件树(tree 形式)
- 安装与运行命令:npm s(dev/build/start/lint)
- 部署说明:以 Vercel 或 Docker 为主(任选其一必须可用)
- API 文档:列出接口、请求/响应示例
- 测试或 QA:至少提供一个 Playwright 用例 或 一份覆盖关键路径的 QA checklist
6) 质量要求
- Type 类型完善;关键函数有注释;错误处理完整
- 不要输出与需求无关的长篇科普
现在开始输出项目:先给出总体架构与页面路由,再给文件树,然后逐文件给代码。
参数与扩展建议
如果你希望更贴合实际团队流程,可以在 Prompt 末尾追加:是否需要“权限控制/分享链接/批注协作/审图对比”等,但请仍以预览与检查为核心。
QA checklist(发布前自检)
- DXF 上传后可稳定渲染(至少含 LINE、LWPOLYLINE、CIRCLE 等常见实体)。
- 图层显隐切换不影响其它图层;搜索结果准确。
- 测量工具在缩放/平移后仍准确;单位显示合理。
- 报告 JSON 可下载,字段齐全且可复现。
- 上传异常(空文件/超大文件/解析失败)有明确错误提示。