@arronqzy/vue-view 0.1.23 → 0.1.25

package/README.md

@@ -49,9 +49,7 @@ import {
 } from "@arronqzy/vue-view";
 ```
 
-创建 / 同步发出 `workspace:add` / `workspace:sync`。`parseWorkspaceData` 的 `value` 可作 `initialWorkspace`。
-
-本地保存的工作区可用 `listWorkspaceProjects` / `deleteWorkspaceProject` / `clearWorkspaceProjects`（参数为 `nameSpace`）列出和清理。其余 IndexedDB 读写与 `getPreviewSnapshot` **不导出**，缩略图只在 React 包实现。
+创建 / 同步发出 `workspace:add` / `workspace:sync`（载荷含 `nameSpace`），删除发出 `workspace:delete`。另有 `blueprint-library:changed` / `api-collection:changed`。`parseWorkspaceData` 的 `value` 可作 `initialWorkspace`；带 `id` 时默认同步进 IndexedDB。也支持 `workspaceId` prop、`ref`（`AbuilderViewHandle`）以及 `put*` / `openWorkspace` / `getCurrentWorkspace` / `getPreviewSnapshot` 等与 React 对齐的公开 API。
 
 ## 和 React 版的差别
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,13 +23,13 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/i18n": "0.1.17",
     "@arronqzy/blueprint-dsl": "1.0.17",
-    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/i18n": "0.1.17",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/view-table": "0.1.8",
     "@arronqzy/vue-rx-store": "0.1.6",
-    "@arronqzy/vue-blueprint": "0.1.17"
+    "@arronqzy/view-table": "0.1.8",
+    "@arronqzy/vue-blueprint": "0.1.19",
+    "@arronqzy/rx-store": "1.0.8"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -39,8 +39,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/eslint-config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -15,10 +15,48 @@ export {
 export { createWorkspaceProjectId } from "./panel/library/workspace-project-db";
 export {
   listWorkspaceProjects,
+  getWorkspaceProject,
+  putWorkspaceProject,
+  upsertWorkspaceProject,
   deleteWorkspaceProject,
   clearWorkspaceProjects,
 } from "./panel/library/workspace-storage";
-export type { WorkspaceProjectListItem } from "./panel/library/workspace-storage";
+export type {
+  WorkspaceProjectListItem,
+  PutWorkspaceProjectOptions,
+} from "./panel/library/workspace-storage";
+export {
+  listBlueprintLibrary,
+  getBlueprintLibraryRecord,
+  putBlueprintLibraryRecord,
+  deleteBlueprintLibraryRecord,
+  clearBlueprintLibrary,
+  listExecutionRunRecords,
+  getExecutionRunRecord,
+  putExecutionRunRecord,
+  deleteExecutionRunRecord,
+  clearAllExecutionRunRecords,
+  purgeExecutionRunsOlderThan,
+  trimExecutionRunRecordsToMax,
+  readExecutionLogSettings,
+  writeExecutionLogSettings,
+  listApiCollectionRecords,
+  putApiCollection,
+  upsertApiCollectionFromJson,
+  deleteApiCollection,
+  clearApiCollections,
+  clearAbuilderStorage,
+} from "./panel/library/abuilder-storage";
+export type {
+  AbuilderStorageClearResult,
+  BlueprintLibraryListItem,
+  BlueprintLibraryRecord,
+  ExecutionRunRecord,
+  ExecutionLogSettings,
+  ApiCollectionRecord,
+  UpsertApiCollectionInput,
+  UpsertApiCollectionResult,
+} from "./panel/library/abuilder-storage";
 export {
   addEventSubscription,
   AbuilderEvents,
@@ -26,13 +64,27 @@ export {
 export type {
   AbuilderEventName,
   AbuilderEventPayloadMap,
+  AddEventSubscriptionOptions,
   WorkspaceAddEventPayload,
   WorkspaceSyncEventPayload,
+  WorkspaceDeleteEventPayload,
+  BlueprintLibraryChangedEventPayload,
   ApiCollectionUploadStartEventPayload,
   ApiCollectionUploadSuccessEventPayload,
+  ApiCollectionChangedEventPayload,
   WorkspaceData,
 } from "./panel/library/event-subscription";
+export {
+  getCurrentWorkspace,
+  openWorkspace,
+  createWorkspace,
+  saveWorkspace,
+  syncWorkspace,
+} from "./panel/library/abuilder-view-handle";
+export type { AbuilderViewHandle } from "./panel/library/abuilder-view-handle";
 export type {
   ParseCheckResult,
   WorkspaceParseCheckResult,
 } from "./panel/library/parse-workspace-data";
+export { getPreviewSnapshot } from "./panel/library/preview-snapshot";
+export type { GetPreviewSnapshotOptions } from "./panel/library/preview-snapshot";

package/src/panel/VueViewOnlinePreview.vue

@@ -40,6 +40,8 @@ import {
   resolvePreviewLayerElements,
 } from "./utils/panelStateIO";
 import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
+import { registerPreviewSnapshotProvider } from "./library/preview-snapshot";
+import { capturePreviewSceneElement } from "./library/capture-preview-snapshot";
 
 const { t, locale } = useI18n();
 useBlueprintDslLocaleSync();
@@ -292,6 +294,29 @@ onMounted(() => {
   onUnmounted(() => window.removeEventListener("resize", onResize));
 });
 
+watch(
+  [layoutReady, sceneRef, sceneBounds, fillScale, outputScale],
+  () => {
+    if (!layoutReady.value || !sceneRef.value) {
+      registerPreviewSnapshotProvider(null);
+      return;
+    }
+    registerPreviewSnapshotProvider(async () => {
+      const scene = sceneRef.value;
+      if (!scene) return null;
+      const width = outputScale.value
+        ? sceneBounds.value.width
+        : sceneBounds.value.width * fillScale.value.scaleX;
+      const height = outputScale.value
+        ? sceneBounds.value.height
+        : sceneBounds.value.height * fillScale.value.scaleY;
+      return capturePreviewSceneElement(scene, width, height);
+    });
+  },
+  { immediate: true }
+);
+onUnmounted(() => registerPreviewSnapshotProvider(null));
+
 function noopUpdate() {}
 function noopSelect() {}
 </script>

package/src/panel/VueViewPanel.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
+import {
+  registerAbuilderViewHandle,
+  type AbuilderViewHandle,
+} from "./library/abuilder-view-handle";
+import {
+  captureEditorPreviewSnapshot,
+  registerPreviewSnapshotProvider,
+} from "./library/preview-snapshot";
+import { readOutputScale } from "./utils/outputScale";
 import type { State } from "@arronqzy/rx-store";
 import {
   useBlueprintDslLocaleSync,
@@ -53,6 +62,7 @@ import {
 } from "./hooks/useWorkspaceProjects";
 import type { WorkspaceProjectRecord } from "./library/workspace-project-db";
 import { AbuilderEvents, emitAbuilderEvent } from "./library/event-subscription";
+import { subscribeBlueprintLibraryChanged } from "./library/blueprint-library-sync";
 import { type ViewportZoom } from "./viewportZoom";
 import PanelCanvas from "./components/PanelCanvas.vue";
 import ElementsLayer from "./components/ElementsLayer.vue";
@@ -89,6 +99,11 @@ const props = withDefaults(
     initialZoom?: number;
     nameSpace?: string | null;
     initialWorkspace?: WorkspaceProjectRecord | null;
+    /**
+     * 按 IndexedDB id 打开工作区（不 remount）。
+     * 与 initialWorkspace 同时存在时：首次优先完整记录；之后 id 变化从 IndexedDB 打开。
+     */
+    workspaceId?: string | null;
     /** 顶栏「设置 → 关于」展示的 npm 包名 */
     packageName?: string | null;
     /** 顶栏「设置 → 关于」展示的包版本号 */
@@ -98,6 +113,7 @@ const props = withDefaults(
     initialZoom: 1,
     nameSpace: null,
     initialWorkspace: null,
+    workspaceId: null,
     packageName: null,
     packageVersion: null,
   }
@@ -424,6 +440,14 @@ onMounted(() => {
   void refreshBlueprintLibrary();
 });
 
+watch(
+  () => props.nameSpace,
+  (nameSpace, _prev, onCleanup) => {
+    onCleanup(subscribeBlueprintLibraryChanged(() => void refreshBlueprintLibrary(), nameSpace));
+  },
+  { immediate: true }
+);
+
 function handleWorkspaceProjectApplied(record: WorkspaceProjectRecord) {
   workspaceBlueprintRef.value = {
     document: record.blueprintDocument,
@@ -461,9 +485,39 @@ const workspaceProjects = useWorkspaceProjects({
   panelRevision: computed(() => `${historyCursor.value}|${allElements.value.length}`),
   onProjectApplied: handleWorkspaceProjectApplied,
   initialWorkspace: () => props.initialWorkspace,
+  workspaceId: () => props.workspaceId,
   nameSpace: () => props.nameSpace,
 });
 
+const viewHandle: AbuilderViewHandle = {
+  getNameSpace: () => props.nameSpace ?? null,
+  getCurrentWorkspace: () => workspaceProjects.getCurrentWorkspaceRecord(),
+  openWorkspace: (idOrRecord) => workspaceProjects.handleOpenProject(idOrRecord),
+  createWorkspace: () => workspaceProjects.handleCreateProject(),
+  saveWorkspace: () => workspaceProjects.handleSaveProject(),
+  syncWorkspace: () => workspaceProjects.handleSyncProject(),
+};
+
+defineExpose(viewHandle);
+onUnmounted(registerAbuilderViewHandle(viewHandle));
+
+watch(
+  [canvasEl, allElements, layers, activeLayerId, () => props.nameSpace],
+  () => {
+    registerPreviewSnapshotProvider(async () =>
+      captureEditorPreviewSnapshot({
+        canvasRoot: canvasEl.value,
+        allElements: allElements.value,
+        layers: layers.value,
+        activeLayerId: activeLayerId.value,
+        outputScale: readOutputScale(props.nameSpace),
+      })
+    );
+  },
+  { immediate: true }
+);
+onUnmounted(() => registerPreviewSnapshotProvider(null));
+
 const blueprintLifecycleToken = computed(() => {
   const doc = blueprintGraph.value.document;
   const nodes = doc.nodes;
@@ -637,7 +691,10 @@ function handleApiCollectionUploadStart(info: {
   fileNames: string[];
   count: number;
 }) {
-  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, info);
+  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, {
+    ...info,
+    nameSpace: props.nameSpace ?? null,
+  });
 }
 
 function handleApiCollectionUploadSuccess(info: {
@@ -648,7 +705,10 @@ function handleApiCollectionUploadSuccess(info: {
     persistLocal: boolean;
   }>;
 }) {
-  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, info);
+  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, {
+    ...info,
+    nameSpace: props.nameSpace ?? null,
+  });
 }
 
 function handleApiCollectionSync(record: {