@arronqzy/vue-view

@arronqzy/vue-view

Vue 3 视图编辑器，功能对齐 @arronqzy/react-view，组件用 Ant Design Vue。大多数 Vue 宿主应直接用 @arronqzy/abuilder-vue。

能力

• 无限平移 / 缩放（Infinite Viewer）、Moveable、Selecto 框选
• 图表、文本、表格、图片、音视频、几何、网格、三维、引用节点
• 多图层、映射图层、主图层、锁定与合并
• 按物料类型的配置侧栏，支持 Scope 模版
• IndexedDB 多项目、导入导出、跨标签同步
• 分屏蓝图（@arronqzy/vue-blueprint）和调试时的 Scope 回写
• VueViewOnlinePreview 只读预览

打开蓝图后的分屏和 React 版一样：上面视图，下面节点：

使用

import { createApp } from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
import { VueViewPanel } from "@arronqzy/vue-view";

createApp(VueViewPanel).use(Antd).mount("#app");

在线预览

import { VueViewOnlinePreview, parseOnlinePreviewSearchParams } from "@arronqzy/vue-view";

URL：?preview=online&projectId=<id>&pid=<instanceId>。传入 workspace 时优先于 projectId。

宿主集成

import {
  addEventSubscription,
  AbuilderEvents,
  parseWorkspaceData,
  createEmptyWorkspace,
  createWorkspaceProjectId,
} from "@arronqzy/vue-view";

创建 / 同步发出 workspace:add / workspace:sync，删除工作区发出 workspace:delete（参数 { ids, nameSpace }）。parseWorkspaceData 的 value 可作 initialWorkspace。

浏览器里的本地数据可以读取和清理，最后一个参数都是 nameSpace：

• 工作区：listWorkspaceProjects / getWorkspaceProject / deleteWorkspaceProject / clearWorkspaceProjects
• 蓝图库：listBlueprintLibrary / getBlueprintLibraryRecord / deleteBlueprintLibraryRecord / clearBlueprintLibrary
• 蓝图执行日志：listExecutionRunRecords / getExecutionRunRecord / deleteExecutionRunRecord / clearAllExecutionRunRecords / purgeExecutionRunsOlderThan / trimExecutionRunRecordsToMax，保留策略用 readExecutionLogSettings / writeExecutionLogSettings
• 接口集合：listApiCollectionRecords / deleteApiCollection / clearApiCollections
• clearAbuilderStorage：一次清空以上四类，返回各自删除数量

工作区、蓝图库的写入接口不导出（由编辑器自己维护）。getPreviewSnapshot 只在 React 包实现。

和 React 版的差别

• UI 是 Ant Design Vue
• 标尺是 canvas 实现（可换成 @scena/ruler）
• 画布状态仍是共享的 @arronqzy/rx-store

依赖

@arronqzy/rx-store、@arronqzy/vue-rx-store、@arronqzy/vue-blueprint、@arronqzy/blueprint-dsl、ant-design-vue、echarts、moveable、selecto、infinite-viewer。

许可证

MIT