@arronqzy/react-view 1.0.38 → 1.0.40

package/src/panel/library/abuilder-view-handle.ts

@@ -0,0 +1,100 @@
+import { normalizeAppNameSpace } from "@arronqzy/blueprint-dsl";
+import type { WorkspaceProjectRecord } from "./workspace-project-db";
+
+/** 已挂载编辑面板的命令式句柄（也可通过 `ref` 拿到） */
+export type AbuilderViewHandle = {
+  /** 当前 nameSpace */
+  getNameSpace: () => string | null;
+  /** 导出当前编辑器中的完整工作区；尚无关联 id 时返回 null */
+  getCurrentWorkspace: () => WorkspaceProjectRecord | null;
+  /** 按 id 从 IndexedDB 打开，或直接应用完整记录 */
+  openWorkspace: (idOrRecord: string | WorkspaceProjectRecord) => Promise<void>;
+  /** 创建新工作区并写入 IndexedDB，发出 workspace:add */
+  createWorkspace: () => Promise<{ name: string; id: string }>;
+  /** 保存当前工作区到 IndexedDB，发出 workspace:sync；无 active 时等同创建 */
+  saveWorkspace: () => Promise<{ name: string; id: string }>;
+  /** 同步当前工作区到 IndexedDB，发出 workspace:sync */
+  syncWorkspace: () => Promise<string>;
+};
+
+const handles = new Set<AbuilderViewHandle>();
+
+export function registerAbuilderViewHandle(handle: AbuilderViewHandle): () => void {
+  handles.add(handle);
+  return () => {
+    handles.delete(handle);
+  };
+}
+
+function findHandle(nameSpace?: string | null): AbuilderViewHandle | null {
+  if (handles.size === 0) return null;
+  if (nameSpace === undefined) {
+    return handles.values().next().value ?? null;
+  }
+  const wanted = normalizeAppNameSpace(nameSpace);
+  for (const handle of handles) {
+    if (normalizeAppNameSpace(handle.getNameSpace()) === wanted) return handle;
+  }
+  return null;
+}
+
+/**
+ * 读取当前已挂载编辑器中的工作区快照。
+ * 同页多个实例时请传入 `nameSpace`；未挂载或尚无 active 工作区时返回 null。
+ */
+export function getCurrentWorkspace(
+  nameSpace?: string | null
+): WorkspaceProjectRecord | null {
+  return findHandle(nameSpace)?.getCurrentWorkspace() ?? null;
+}
+
+/**
+ * 命令式打开工作区（不 remount）。
+ * 同页多个实例时请传入 `nameSpace`。
+ */
+export async function openWorkspace(
+  idOrRecord: string | WorkspaceProjectRecord,
+  nameSpace?: string | null
+): Promise<void> {
+  const handle = findHandle(nameSpace);
+  if (!handle) {
+    throw new Error(
+      "No mounted Abuilder panel. Pass initialWorkspace or mount <App> first."
+    );
+  }
+  await handle.openWorkspace(idOrRecord);
+}
+
+export async function createWorkspace(
+  nameSpace?: string | null
+): Promise<{ name: string; id: string }> {
+  const handle = findHandle(nameSpace);
+  if (!handle) {
+    throw new Error(
+      "No mounted Abuilder panel. Pass initialWorkspace or mount <App> first."
+    );
+  }
+  return handle.createWorkspace();
+}
+
+export async function saveWorkspace(
+  nameSpace?: string | null
+): Promise<{ name: string; id: string }> {
+  const handle = findHandle(nameSpace);
+  if (!handle) {
+    throw new Error(
+      "No mounted Abuilder panel. Pass initialWorkspace or mount <App> first."
+    );
+  }
+  return handle.saveWorkspace();
+}
+
+export async function syncWorkspace(nameSpace?: string | null): Promise<string> {
+  const handle = findHandle(nameSpace);
+  if (!handle) {
+    throw new Error(
+      "No mounted Abuilder panel. Pass initialWorkspace or mount <App> first."
+    );
+  }
+  return handle.syncWorkspace();
+}

package/src/panel/library/event-subscription.ts

@@ -1,3 +1,4 @@
+import { normalizeAppNameSpace } from "@arronqzy/blueprint-dsl";
 import type { WorkspaceProjectRecord } from "./workspace-project-db";
 
 export const AbuilderEvents = {
@@ -7,10 +8,14 @@ export const AbuilderEvents = {
   workspaceSync: "workspace:sync",
   /** 删除工作区（界面删除，或调用 deleteWorkspaceProject / clearWorkspaceProjects） */
   workspaceDelete: "workspace:delete",
+  /** 蓝图库写入 / 删除 / 清空 */
+  blueprintLibraryChanged: "blueprint-library:changed",
   /** 开始上传接口集合 */
   apiCollectionUploadStart: "api-collection:upload-start",
   /** 上传接口集合成功 */
   apiCollectionUploadSuccess: "api-collection:upload-success",
+  /** 接口集合写入 / 删除 / 清空 */
+  apiCollectionChanged: "api-collection:changed",
 } as const;
 
 export type AbuilderEventName = (typeof AbuilderEvents)[keyof typeof AbuilderEvents];
@@ -18,8 +23,14 @@ export type AbuilderEventName = (typeof AbuilderEvents)[keyof typeof AbuilderEve
 /** 工作区完整数据（面板 + 蓝图），可用于外部持久化与再次加载 */
 export type WorkspaceData = WorkspaceProjectRecord;
 
-export type WorkspaceAddEventPayload = WorkspaceData;
-export type WorkspaceSyncEventPayload = WorkspaceData;
+export type WorkspaceAddEventPayload = WorkspaceData & {
+  /** 所属 nameSpace，默认库为 null */
+  nameSpace: string | null;
+};
+export type WorkspaceSyncEventPayload = WorkspaceData & {
+  /** 所属 nameSpace，默认库为 null */
+  nameSpace: string | null;
+};
 export type WorkspaceDeleteEventPayload = {
   /** 被删除的工作区 id */
   ids: string[];
@@ -27,9 +38,17 @@ export type WorkspaceDeleteEventPayload = {
   nameSpace: string | null;
 };
 
+export type BlueprintLibraryChangedEventPayload = {
+  nameSpace: string | null;
+  action: "put" | "delete" | "clear";
+  /** 涉及的蓝图 id；clear 时可能为空 */
+  ids?: string[];
+};
+
 export type ApiCollectionUploadStartEventPayload = {
   fileNames: string[];
   count: number;
+  nameSpace: string | null;
 };
 
 export type ApiCollectionUploadSuccessEventPayload = {
@@ -39,20 +58,57 @@ export type ApiCollectionUploadSuccessEventPayload = {
     apiCount: number;
     persistLocal: boolean;
   }>;
+  nameSpace: string | null;
+};
+
+export type ApiCollectionChangedEventPayload = {
+  nameSpace: string | null;
+  action: "put" | "delete" | "clear";
+  ids?: string[];
 };
 
 export type AbuilderEventPayloadMap = {
   [AbuilderEvents.workspaceAdd]: WorkspaceAddEventPayload;
   [AbuilderEvents.workspaceSync]: WorkspaceSyncEventPayload;
   [AbuilderEvents.workspaceDelete]: WorkspaceDeleteEventPayload;
+  [AbuilderEvents.blueprintLibraryChanged]: BlueprintLibraryChangedEventPayload;
   [AbuilderEvents.apiCollectionUploadStart]: ApiCollectionUploadStartEventPayload;
   [AbuilderEvents.apiCollectionUploadSuccess]: ApiCollectionUploadSuccessEventPayload;
+  [AbuilderEvents.apiCollectionChanged]: ApiCollectionChangedEventPayload;
+};
+
+export type AddEventSubscriptionOptions = {
+  /**
+   * 仅接收该 nameSpace 的事件。
+   * 省略则接收全部；传入空字符串 / null 表示默认库。
+   */
+  nameSpace?: string | null;
 };
 
 type EventCallback = (payload: unknown) => void;
 
 const listeners = new Map<string, Set<EventCallback>>();
 
+function resolvePayloadNameSpace(payload: unknown): string | null | undefined {
+  if (!payload || typeof payload !== "object") return undefined;
+  if (!("nameSpace" in payload)) return undefined;
+  const value = (payload as { nameSpace?: unknown }).nameSpace;
+  if (value === null || value === undefined) return null;
+  if (typeof value === "string") return value;
+  return undefined;
+}
+
+function matchesNameSpaceFilter(
+  payload: unknown,
+  filter: string | null | undefined
+): boolean {
+  if (filter === undefined) return true;
+  const wanted = normalizeAppNameSpace(filter);
+  const actual = resolvePayloadNameSpace(payload);
+  if (actual === undefined) return true;
+  return normalizeAppNameSpace(actual) === wanted;
+}
+
 export function emitAbuilderEvent<T extends AbuilderEventName>(
   eventName: T,
   payload: AbuilderEventPayloadMap[T]
@@ -70,17 +126,26 @@ export function emitAbuilderEvent<T extends AbuilderEventName>(
 
 export function addEventSubscription<T extends AbuilderEventName>(
   eventName: T,
-  callback: (payload: AbuilderEventPayloadMap[T]) => void
+  callback: (payload: AbuilderEventPayloadMap[T]) => void,
+  options?: AddEventSubscriptionOptions
 ): { unsubscribe: () => void } {
   let set = listeners.get(eventName);
   if (!set) {
     set = new Set();
     listeners.set(eventName, set);
   }
-  set.add(callback as EventCallback);
+  const filter =
+    options && Object.prototype.hasOwnProperty.call(options, "nameSpace")
+      ? options.nameSpace
+      : undefined;
+  const wrapped: EventCallback = (payload) => {
+    if (!matchesNameSpaceFilter(payload, filter)) return;
+    callback(payload as AbuilderEventPayloadMap[T]);
+  };
+  set.add(wrapped);
   return {
     unsubscribe: () => {
-      set.delete(callback as EventCallback);
+      set.delete(wrapped);
       if (set.size === 0) {
         listeners.delete(eventName);
       }

package/src/panel/library/workspace-project-sync.ts

@@ -11,6 +11,7 @@ export type WorkspaceProjectSyncMessage = {
 
 export type WorkspaceProjectsChangedMessage =
   | { type: "deleted"; projectIds: string[] }
+  | { type: "upserted"; projectIds: string[] }
   | { type: "cleared" };
 
 export function broadcastWorkspaceProjectsChanged(
@@ -33,7 +34,12 @@ export function subscribeWorkspaceProjectsChanged(
   const channel = new BroadcastChannel(appStorageKey(LIST_CHANNEL, nameSpace));
   channel.onmessage = (event: MessageEvent<WorkspaceProjectsChangedMessage>) => {
     const data = event.data;
-    if (!data || (data.type !== "deleted" && data.type !== "cleared")) return;
+    if (
+      !data ||
+      (data.type !== "deleted" && data.type !== "cleared" && data.type !== "upserted")
+    ) {
+      return;
+    }
     onChange(data);
   };
   return () => channel.close();

package/src/panel/library/workspace-storage.ts

@@ -4,16 +4,70 @@ import {
   deleteWorkspaceProject as deleteWorkspaceProjectRecord,
   getWorkspaceProject,
   listWorkspaceProjects,
+  putWorkspaceProject as putWorkspaceProjectRecord,
+  type WorkspaceProjectRecord,
 } from "./workspace-project-db";
 import {
   clearWorkspacePreviewCaches,
   removeWorkspacePreviewCache,
+  writeWorkspacePreviewCache,
 } from "./workspace-project-cache";
-import { broadcastWorkspaceProjectsChanged } from "./workspace-project-sync";
+import {
+  broadcastWorkspaceProjectUpdate,
+  broadcastWorkspaceProjectsChanged,
+} from "./workspace-project-sync";
 import { AbuilderEvents, emitAbuilderEvent } from "./event-subscription";
 
 export { listWorkspaceProjects, getWorkspaceProject };
-export type { WorkspaceProjectListItem } from "./workspace-project-db";
+export type { WorkspaceProjectListItem, WorkspaceProjectRecord } from "./workspace-project-db";
+
+export type PutWorkspaceProjectOptions = {
+  /**
+   * 写入后是否发出工作区事件。
+   * - `false` / 省略：只写 IndexedDB（宿主自己管后端时常用）
+   * - `"add"`：发出 `workspace:add`
+   * - `"sync"`：发出 `workspace:sync`
+   */
+  emitEvent?: false | "add" | "sync";
+};
+
+function resolvedNameSpace(nameSpace?: string | null): string | null {
+  return normalizeAppNameSpace(nameSpace) || null;
+}
+
+/**
+ * 写入 / 覆盖 IndexedDB 中的工作区（upsert），并更新预览缓存、通知其他标签页。
+ * `nameSpace` 需与面板的 `nameSpace` 一致。
+ */
+export async function putWorkspaceProject(
+  record: WorkspaceProjectRecord,
+  nameSpace?: string | null,
+  options?: PutWorkspaceProjectOptions
+): Promise<WorkspaceProjectRecord> {
+  const saved = await putWorkspaceProjectRecord(record, nameSpace);
+  writeWorkspacePreviewCache(saved, nameSpace);
+  broadcastWorkspaceProjectUpdate(saved.id, saved.updatedAt, nameSpace);
+  broadcastWorkspaceProjectsChanged(
+    { type: "upserted", projectIds: [saved.id] },
+    nameSpace
+  );
+  const ns = resolvedNameSpace(nameSpace);
+  if (options?.emitEvent === "add") {
+    emitAbuilderEvent(AbuilderEvents.workspaceAdd, { ...saved, nameSpace: ns });
+  } else if (options?.emitEvent === "sync") {
+    emitAbuilderEvent(AbuilderEvents.workspaceSync, { ...saved, nameSpace: ns });
+  }
+  return saved;
+}
+
+/** `putWorkspaceProject` 的别名 */
+export async function upsertWorkspaceProject(
+  record: WorkspaceProjectRecord,
+  nameSpace?: string | null,
+  options?: PutWorkspaceProjectOptions
+): Promise<WorkspaceProjectRecord> {
+  return putWorkspaceProject(record, nameSpace, options);
+}
 
 /**
  * 删除 IndexedDB 中保存的单个工作区（及其 localStorage 预览标记）。
@@ -28,7 +82,7 @@ export async function deleteWorkspaceProject(
   broadcastWorkspaceProjectsChanged({ type: "deleted", projectIds: [id] }, nameSpace);
   emitAbuilderEvent(AbuilderEvents.workspaceDelete, {
     ids: [id],
-    nameSpace: normalizeAppNameSpace(nameSpace) || null,
+    nameSpace: resolvedNameSpace(nameSpace),
   });
 }
 
@@ -44,7 +98,7 @@ export async function clearWorkspaceProjects(nameSpace?: string | null): Promise
   if (items.length > 0) {
     emitAbuilderEvent(AbuilderEvents.workspaceDelete, {
       ids: items.map((item) => item.id),
-      nameSpace: normalizeAppNameSpace(nameSpace) || null,
+      nameSpace: resolvedNameSpace(nameSpace),
     });
   }
   return items.length;

package/src/tailwind.css

@@ -26,6 +26,70 @@
   background: hsl(var(--foreground) / 0.45);
 }
 
+/*
+ * 物料侧栏：容器查询写在源 CSS 里（JIT 的 @[Npx] 经常未进 dist）
+ * 窄：单列、卡片最多 112px；宽：auto-fill 换行，单卡约 88–104px
+ */
+.rv-material-sidebar {
+  container-type: inline-size;
+  container-name: rv-material;
+}
+
+.rv-material-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: stretch;
+  gap: 0.375rem;
+}
+
+.rv-material-card {
+  width: 100%;
+  max-width: 112px;
+  justify-self: center;
+}
+
+@container rv-material (min-width: 200px) {
+  .rv-material-grid {
+    grid-template-columns: repeat(auto-fill, minmax(88px, 104px));
+  }
+
+  .rv-material-card {
+    max-width: none;
+    justify-self: stretch;
+  }
+}
+
+/*
+ * 配置侧栏：窄时多列表单改单列，避免挤成一团
+ */
+.scope-config-sidebar {
+  container-type: inline-size;
+  container-name: rv-config;
+}
+
+@container rv-config (max-width: 260px) {
+  .scope-config-sidebar .grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  .scope-config-sidebar .grid > * {
+    min-width: 0;
+  }
+}
+
+/*
+ * 节点选中描边：用倒数抵消画布 scale，屏幕上始终约 2px（勿用 ring/border，会随缩放变粗）
+ */
+.rv-node-selected {
+  box-shadow: 0 0 0 calc(2px / var(--rv-canvas-scale, 1)) rgb(59 130 246 / 0.9);
+}
+
+/* Selecto 框选：渲染在 body，线宽保持屏幕 1px */
+.selecto-selection {
+  border-width: 1px !important;
+  box-sizing: border-box !important;
+}
+
 /*
  * Moveable 控制框：
  * - 根节点必须高于画布元素 zIndex（节点默认 ≥1），否则多选组框线会被节点盖住，只剩锚点可见
@@ -65,14 +129,11 @@
   background: transparent !important;
 }
 
+/* 锚点尺寸交给 Moveable 的 scale(zoom) 补偿，勿写死 px 覆盖，否则放大后会偏粗 */
 .rv-moveable-layer .moveable-control {
-  width: 14px !important;
-  height: 14px !important;
-  margin-top: -7px !important;
-  margin-left: -7px !important;
   border-radius: 50% !important;
   box-sizing: border-box !important;
-  border: 2px solid hsl(var(--background)) !important;
+  border-color: hsl(var(--background)) !important;
   background: #1990ff !important;
   background: var(--moveable-color) !important;
   z-index: 10 !important;