@u-cad/cad-editor-vue

基于 Vue3 的 WebCAD 预览与标注组件，支持 DWG/DXF 查看、编辑、预览与 CAD 标注：

• 查看：加载 DWG/DXF 图纸，缩放、平移、图层管理
• 编辑（Write 模式）：导入 DWG/DXF 图纸，导出 DXF、图片，点位标注（图标库、标注管理面板、导出/导入 JSON）
• 预览（Read / Review 模式）：只读查看图纸，标注只读显示

安装

npm install @u-cad/cad-editor-vue
# 需要 vue、element-plus、vue-i18n 作为宿主依赖
npm install vue element-plus vue-i18n

快速开始（组件方式）

<template>
  <CadEditor ref="editorRef" :base-url="'/cad-data/'" :webworker-file-urls="webworkerUrls" @save-annotations="onSave" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CadEditor, i18n } from '@u-cad/cad-editor-vue';
import '@u-cad/cad-editor-vue/style.css';

const editorRef = ref();

// Web Worker 文件 URL（public/assets/ 下的本地资源，与页面同源）
const webworkerUrls = {
  dwgParser: '/assets/libredwg-parser-worker.js',
  mtextRender: '/assets/mtext-renderer-worker.js'
};

// 加载 CAD 文件与标注数据
editorRef.value?.loadData('/path/to/canteen.dwg', {
  version: '1.0',
  annotations: []
});

// 保存标注（触发 save-annotations 事件）
editorRef.value?.saveAnnotations();

const onSave = (data: object) => {
  console.log('标注数据:', data);
};
</script>

需要 app.use(ElementPlus) 和 app.use(i18n)（i18n 由组件导出）。

Props

| Prop | 类型 | 默认 | 说明 | | ------------------- | ------------------- | ------------ | ------------------------------------------------------ | | cadUrl | string | — | 初始 CAD 文件 URL（可用 loadData 动态加载） | | mode | 0 \| 4 \| 8 | 8（Write） | 打开模式：0=Read / 4=Review / 8=Write | | locale | 'zh' \| 'en' | 'zh' | 语言 | | theme | 'light' \| 'dark' | 'dark' | 主题 | | baseUrl | string | — | 资源 base URL（fonts/templates/data） | | webworkerFileUrls | object | 包内默认 | DWG/MTEXT worker URL（默认指向包内 worker/，可覆盖） | | annotationTrigger | 'click' \| 'hover' | 'click' | 标注事件触发方式（仅只读/预览模式生效；编辑模式强制点击，避免与拖拽冲突）：click=点击触发，hover=鼠标移入触发 | | defaultViewMode | 'pan' \| 'select' | 'pan' | 打开文档后的默认视图交互模式：pan=默认平移视图（左键拖动平移，避免误选实体；选择实体需手动切「选择图元」），select=默认选择图元（左键拾取实体，中键平移） | | uiVisibility | object | 全显示 | 界面工具显隐配置（按模式分组，见下方说明）。底部工具隐藏时「当前坐标位置」默认右下角显示（可经 showCurrentPosition 关闭） | | showCurrentPosition | boolean | true | 是否显示鼠标实时位置（当前坐标），独立于底部工具显隐 |

uiVisibility 说明（界面工具显隐）

按打开模式分组配置工具显隐，缺省全部显示：

uiVisibility?: {
  write?: {                        // 编辑模式（Write）
    ribbon?: boolean               // 顶部菜单（Ribbon）
    statusBar?: boolean            // 底部工具（状态栏）
    verticalToolbar?: boolean      // 右侧竖向工具
  }
  readonly?: {                     // 只读/预览模式（Read/Review）
    title?: boolean                // 标题（文件名）
    mainMenu?: boolean             // 左侧菜单工具
    languageSelector?: boolean     // 右侧语言工具
    statusBar?: boolean            // 底部工具
    verticalToolbar?: boolean      // 右侧竖向工具
  }
}

坐标默认常显：底部工具（statusBar: false）隐藏时，「当前坐标位置」默认在画布右下角悬浮显示（不随底部工具隐藏）；如需一并关闭，用 showCurrentPosition: false。

<CadEditor :ui-visibility="{ readonly: { statusBar: false } }" />
<!-- 只读/预览模式隐藏底部工具，坐标默认右下角显示 -->
<CadEditor :show-current-position="false" />
<!-- 单独关闭鼠标实时坐标 -->

暴露方法

| 方法 | 说明 | | -------------------------------- | --------------------------------------------------------------------------- | | loadData(cadUrl, jsonData?) | 加载 CAD 文件与标注数据（对象或 JSON 字符串） | | loadAnnotations(json, append?) | 单独加载标注数据。append=true 追加（冲突 id 重新生成），默认 false 覆盖 | | saveAnnotations() | 保存标注，触发 @save-annotations 事件 | | exportAnnotations() | 导出标注 JSON 字符串 |

事件

| 事件 | 参数 | 说明 | | ------------------ | ---------- | --------------------------------------------------------------------------------------------------------- | | save-annotations | object | 保存标注时触发，携带标注数据对象 | | annotation-click | Annotation | 点击标注时触发（编辑模式，或只读/预览模式且 annotationTrigger='click'），携带该标注数据 | | annotation-hover | Annotation | 鼠标移入标注时触发（只读/预览模式且 annotationTrigger='hover'），携带该标注数据 |

触发方式说明：编辑模式（Write）下标注可拖拽移动，鼠标移入会与拖拽冲突，故仅支持点击触发；只读/预览模式（Read/Review）可通过 annotationTrigger 配置为点击或鼠标移入，两种方式互斥（启用鼠标移入后点击不再触发回调）。回调参数为标注数据对象（字段见「标注数据格式」的 Annotation 表）。

标注数据格式

标注数据以 JSON 文档承载，格式如下：

{
  "version": "1.0",
  "annotations": [
    {
      "id": "msr3k7evutyrpp",
      "type": "point",
      "x": 47855.12,
      "y": 24848.06,
      "icon": "data:image/svg+xml;charset=utf-8,%3Csvg...",
      "name": "设备",
      "data": [
        { "label": "设备", "value": "水泵" },
        { "label": "功率", "value": "15kW" }
      ],
      "visible": true,
      "locked": false
    }
  ]
}

顶层结构

| 字段 | 类型 | 必填 | 说明 | | ------------ | ----------- | ---- | -------------------------------------- | | version | string | ✅ | 标注数据版本，当前 "1.0" | | annotations | Annotation[] | ✅ | 标注数组，可为空 [] |

标注字段（Annotation）

| 字段 | 类型 | 必填 | 说明 | | --------- | -------------- | ---- | -------------------------------------------------------------------- | | id | string | ✅ | 唯一标识（追加模式下冲突 id 会自动重新生成） | | type | string | ✅ | 标注类型：当前 point；预留 circle/rectangle/line/text | | x | number | ✅* | CAD 世界坐标 X（point 类型） | | y | number | ✅* | CAD 世界坐标 Y（point 类型） | | icon | string | ✅* | 图标 data URI（base64 或 SVG URL 编码），JSON 自包含 | | name | string | — | 标注名称（列表/叠加层 tip 显示），缺省空 | | data | {label,value}[] | ✅ | 附加数据（点击标注弹窗展示），可为 [] | | visible | boolean | — | 是否可见（false 时叠加层隐藏），缺省视为 true | | locked | boolean | — | 是否锁定（锁定后不可拖拽移动），缺省视为 false |

* point 类型必填（x/y/icon）；扩展类型用 geometry 字段，point 不填。

坐标说明

• x/y 存储 CAD 世界坐标（非屏幕坐标），缩放/平移时标注自动跟随
• 通过 worldToScreen() 实时转换到屏幕位置，无需消费方处理

图标编码

• 图标统一为 data URI（base64 或 data:image/svg+xml;charset=utf-8, + URL 编码），保证 JSON 完全自包含
• 内置图标 + 自定义上传图标均转为此格式，跨环境可显示

类型扩展（预留）

| type | 几何字段（geometry） | 状态 | | ---------- | --------------------------------------------- | ------ | | point | x/y + icon | ✅ 已实现 | | circle | { center:{x,y}, radius } | 预留 | | rectangle| { min:{x,y}, max:{x,y} } | 预留 | | line | { start:{x,y}, end:{x,y} } | 预留 | | text | { x, y, text } | 预留 |

校验规则

导入时校验（非法数据抛异常）：

• version 宽松校验（可缺省，兼容旧数据；存在则须为字符串）
• annotations 须为数组
• 每条标注：id/type 为字符串，data 为数组

iframe 方式

<iframe src="https://host/?cadUrl=xxx.dwg&jsonUrl=xxx.json&jsonMode=append" />

• ?cadUrl=：CAD 文件 URL（必选）
• ?jsonUrl=：标注 JSON 地址，CAD 完成后自动加载（可选）
• ?jsonMode=append：追加模式（缺省覆盖）
• 保存时自动 postMessage 回传 { type: 'save-annotations', data }

运行中动态加载标注（postMessage）：

iframe.contentWindow.postMessage({
  type: 'load-annotations',
  data: { version: '1.0', annotations: [...] },
  append: true   // true 追加 / 缺省覆盖
}, '*')

Web Worker 配置

worker 已打包进包内 worker/ 目录，通过 import.meta.url 相对加载，随部署保持可访问即可。

| 文件 | 用途 | | ---- | ---- | | libredwg-parser-worker.js | DWG 文件解析 Worker | | libredwg-web.wasm | DWG 解析引擎 WASM（被 parser worker 加载） | | mtext-renderer-worker.js | MTEXT 多行文字渲染 Worker |

这些文件是 CAD 解析/渲染的运行依赖，需随部署目录一起发布并可被浏览器访问（同目录或 CDN）。

包内容

@u-cad/cad-editor-vue/
├── package.json       # 发布配置
├── cad-editor.js      # 核心代码（压缩）
├── style.css          # 组件样式
├── index.d.ts         # 类型声明
├── worker/            # DWG/MTEXT worker + wasm
└── README.md