2.3 KiB
2.3 KiB
图纸工作台 - 切分识别与编辑系统 (产品原型)
这是一个用于产品功能展示的交互式前端原型,旨在模拟一个专业的图纸切分、识别与编辑平台的核心功能。
该原型完全使用HTML、CSS和JavaScript(通过React库)构建,不包含任何后端服务或数据库,所有数据都存储在浏览器内存中,刷新页面会重置所有状态。
核心功能
- 层级结构管理:在左侧树状视图中展示和操作件号的层级关系。
- 图纸与表格预览:在中间区域展示图纸背景、可拖拽的数据表格,并支持通过输入件号动态创建层级。
- 数据编辑:在右侧区域编辑选中件号的详细信息,父项的重量等数据会根据子项自动汇总计算。
- 数据校验与导出:实现了“保存”时的数据校验逻辑,以及模拟生成和下载
.dxf文件的“导出”功能。
如何预览
因为这是一个纯静态项目,您不需要安装任何依赖(如Node.js, npm等)。您只需要一个现代浏览器(如Chrome, Firefox, Edge, Safari)即可。
方法一:直接在浏览器中打开 (最简单)
- 在文件管理器中找到项目所在的文件夹。
- 直接双击
index.html文件,或者将该文件拖拽到浏览器窗口中。
方法二:通过本地Web服务器运行 (推荐)
直接从文件系统打开HTML文件有时会因为浏览器的安全策略(CORS等)导致某些功能(如加载外部资源)出现问题。虽然本项目目前没有这类问题,但通过本地服务器预览是更专业、更可靠的方式。
如果您安装了 Python (macOS 和大多数 Linux 发行版都已预装),可以轻松启动一个本地服务器:
-
打开终端 (Terminal)。
-
进入项目目录:
cd /path/to/your/project/cad编辑页面(请将
/path/to/your/project/替换为实际的项目路径) -
启动服务器:
- 如果您使用 Python 3:
python3 -m http.server 8000 - 如果您使用 Python 2:
python -m SimpleHTTPServer 8000
- 如果您使用 Python 3:
-
在浏览器中访问: 打开您的浏览器,并访问地址:http://localhost:8000
现在您应该能看到并与这个产品原型进行交互了。