@arronqzy/abuilder-vue

Vue 3 版入口，对应 React 的 @arronqzy/abuilder。功能对齐：无限画布、物料配置、图层、蓝图调试、工作区和中英切换。UI 是 Ant Design Vue，蓝图画布是 Vue Flow。

本包 0.1.20 与 @arronqzy/[email protected] 能力对齐（蓝图 Soft UI、接口集合、System 模版、JSON 错误高亮等）。中文全功能手册：仓库 docs/Abuilder使用文档与功能说明.docx。

安装

pnpm add @arronqzy/abuilder-vue vue ant-design-vue

最小用法

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

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

必须 use(Antd)。语言切换时，Ant Design Vue 的 ConfigProvider.locale 会跟着变。

<App
  class="h-screen"
  :initial-zoom="1"
  default-theme="dark"
  locale="zh-CN"
  name-space="my-app"
/>

Props

| Prop | 说明 | 默认 | |------|------|------| | class | 根容器 class | — | | initialZoom | 画布初始缩放 | 1 | | defaultTheme | light / dark | dark | | locale | zh-CN / en-US；省略则 localStorage → 浏览器 → 中文 | null | | nameSpace | 隔离 IndexedDB；同一页多个 App 必须不同 | — | | previewSearch | 覆盖预览 URL 查询串 | 当前 location.search | | preview | true 为预览页 | false | | initialWorkspace | 完整工作区。空则空白画布，不会自动打开 IndexedDB 记录 | — |

顶栏可切换中文 / English（abuilder.locale）。

编辑和预览

<App :key="workspace.id" :initial-workspace="workspace" />
<App :key="workspace.id" preview :initial-workspace="workspace" />

切换工作区时带 key。URL 含 ?preview=online&projectId=<id> 时从 IndexedDB 进入预览。传了 nameSpace 时预览 URL 带 ns=。

自己存工作区

不要读写编辑器内部 IndexedDB。订阅事件，把完整对象交给自己的后端：

import {
  addEventSubscription,
  AbuilderEvents,
  parseWorkspaceData,
  createEmptyWorkspace,
  createWorkspaceProjectId,
  validateWorkspaceData,
  type WorkspaceData,
} from "@arronqzy/abuilder-vue";

const syncSub = addEventSubscription(
  AbuilderEvents.workspaceSync,
  async (workspace: WorkspaceData) => {
    await saveToServer(workspace);
  }
);
syncSub.unsubscribe();

const parsed = parseWorkspaceData(jsonFromBackend);
if (parsed.ok && parsed.value) {
  // <App :initial-workspace="parsed.value" />
}

createEmptyWorkspace({ name: "未命名", id: createWorkspaceProjectId() });
validateWorkspaceData(workspace);

| 事件 | 常量 | 何时触发 | |------|------|----------| | workspace:add | AbuilderEvents.workspaceAdd | 创建成功 | | workspace:sync | AbuilderEvents.workspaceSync | 同步成功 | | workspace:delete | AbuilderEvents.workspaceDelete | 删除工作区（界面删除，或调用 deleteWorkspaceProject / clearWorkspaceProjects），参数 { ids, nameSpace } |

validate* 只检查。parseWorkspaceData 会补齐 id、时间戳和空字段。只检查视图用 validateViewData / parseViewData；只检查蓝图用 validateBlueprintData / parseBlueprintData。

WorkspaceData 字段与 React 版相同：id、name、createdAt、updatedAt、panelState、blueprintDocument、blueprintMeta、productName、titleIconDataUrl。

清理浏览器里的本地数据

编辑器把工作区、蓝图库、蓝图执行日志、接口集合四类数据存在 IndexedDB 里，按 nameSpace 隔离。以后端为准时，可以清理本地副本，避免堆积：

| 数据 | 列出 / 读取 | 删除单条 | 清空 | |------|-------------|----------|------| | 工作区 | listWorkspaceProjects / getWorkspaceProject | deleteWorkspaceProject | clearWorkspaceProjects | | 蓝图库 | listBlueprintLibrary / getBlueprintLibraryRecord | deleteBlueprintLibraryRecord | clearBlueprintLibrary | | 蓝图执行日志 | listExecutionRunRecords / getExecutionRunRecord | deleteExecutionRunRecord | clearAllExecutionRunRecords | | 接口集合 | listApiCollectionRecords | deleteApiCollection | clearApiCollections |

import {
  listWorkspaceProjects,
  deleteWorkspaceProject,
  clearWorkspaceProjects,
  clearAbuilderStorage,
} from "@arronqzy/abuilder-vue";

const items = await listWorkspaceProjects(nameSpace);
await deleteWorkspaceProject(items[0].id, nameSpace);
const removed = await clearWorkspaceProjects(nameSpace); // 返回删除数量
const result = await clearAbuilderStorage(nameSpace); // { workspaces, blueprints, executionRuns, apiCollections }

nameSpace 要和 <App :name-space> 一致。清空函数返回删除数量；clearAbuilderStorage 不动主题、字号等偏好设置。删除工作区或蓝图库后，已挂载的编辑器会自动刷新列表，删除工作区还会发出 workspace:delete 事件。执行日志可用 purgeExecutionRunsOlderThan / trimExecutionRunRecordsToMax 按时间或条数清理，保留策略用 readExecutionLogSettings / writeExecutionLogSettings 读写。

和 React 版的差别

• 没有 getPreviewSnapshot。要缩略图就自己截预览 DOM，不要假设有同名导出。
• 组件是 Ant Design Vue，不是 @arronqzy/ui。
• 本包以源码发布（exports 指向 src/），宿主需要能编译 Vue SFC。

本仓库演示：

pnpm -C apps/web-vue dev

http://127.0.0.1:31012。

依赖

• @arronqzy/vue-view — 视图编辑器
• @arronqzy/i18n — 中英文案
• ant-design-vue — UI
• vue — peer

许可证

MIT