@arronqzy/vue-view 0.1.24 → 0.1.26

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/preview-snapshot.ts

@@ -0,0 +1,252 @@
+import type { PanelElement, PanelLayer } from "../types";
+import { CHART_TYPES, buildChartOption } from "../utils/chartOptionBuilder";
+import {
+  computePanelSceneBounds,
+  resolvePreviewLayerElements,
+} from "../utils/panelStateIO";
+import {
+  capturePreviewLayerSnapshot,
+  capturePreviewSceneElement,
+  scaleDataUrl,
+  type CapturePreviewSceneOptions,
+} from "./capture-preview-snapshot";
+
+export type GetPreviewSnapshotOptions = CapturePreviewSceneOptions;
+
+type PreviewSnapshotProvider = () => Promise<string | null>;
+
+let previewSnapshotProvider: PreviewSnapshotProvider | null = null;
+
+export function registerPreviewSnapshotProvider(provider: PreviewSnapshotProvider | null) {
+  previewSnapshotProvider = provider;
+}
+
+function serializeNodeDom(
+  sourceNode: HTMLElement,
+  sourceElement: PanelElement,
+  minX: number,
+  minY: number,
+  isChartNode: boolean
+): string {
+  const clone = sourceNode.cloneNode(true) as HTMLElement;
+  clone.className = clone.className
+    .split(/\s+/)
+    .filter((cls) => cls && !cls.startsWith("ring-"))
+    .join(" ");
+  clone.removeAttribute("data-moveable-target");
+  clone.style.left = `${sourceElement.x - minX}px`;
+  clone.style.top = `${sourceElement.y - minY}px`;
+  const sourceCanvases = Array.from(sourceNode.querySelectorAll("canvas"));
+  const cloneCanvases = Array.from(clone.querySelectorAll("canvas"));
+  if (isChartNode) return clone.outerHTML;
+  sourceCanvases.forEach((srcCanvas, idx) => {
+    const clonedCanvas = cloneCanvases[idx];
+    if (!clonedCanvas) return;
+    try {
+      const dataUrl = srcCanvas.toDataURL("image/png");
+      const img = document.createElement("img");
+      img.src = dataUrl;
+      img.style.width = "100%";
+      img.style.height = "100%";
+      img.style.objectFit = "fill";
+      img.style.display = "block";
+      clonedCanvas.replaceWith(img);
+    } catch {
+      // ignore tainted canvas
+    }
+  });
+  return clone.outerHTML;
+}
+
+function waitFrames(count = 2): Promise<void> {
+  return new Promise((resolve) => {
+    let remaining = count;
+    const step = () => {
+      remaining -= 1;
+      if (remaining <= 0) resolve();
+      else requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+  });
+}
+
+export type BuildEditorPreviewSnapshotSceneOptions = {
+  canvasRoot: HTMLElement | null;
+  allElements: PanelElement[];
+  layers: PanelLayer[];
+  activeLayerId: string;
+  outputScale: boolean;
+  retryCount?: number;
+};
+
+export async function buildEditorPreviewSnapshotScene(
+  options: BuildEditorPreviewSnapshotSceneOptions
+): Promise<{ scene: HTMLElement; width: number; height: number } | null> {
+  const retryCount = options.retryCount ?? 0;
+  const layerElements = resolvePreviewLayerElements(
+    options.allElements,
+    options.layers,
+    options.activeLayerId
+  );
+  if (!layerElements.length) return null;
+
+  const sceneBounds = computePanelSceneBounds(layerElements);
+  const mountedNodes = layerElements.map((el) => ({
+    el,
+    node:
+      options.canvasRoot?.querySelector<HTMLElement>(`[data-element-id="${el.id}"]`) ??
+      null,
+  }));
+  const mountedCount = mountedNodes.filter((item) => !!item.node).length;
+  if (mountedCount < layerElements.length && retryCount < 20) {
+    await new Promise((resolve) => window.setTimeout(resolve, 80));
+    return buildEditorPreviewSnapshotScene({ ...options, retryCount: retryCount + 1 });
+  }
+
+  const previewNodesHtml = mountedNodes
+    .map((item) => {
+      if (!item.node) return "";
+      return serializeNodeDom(
+        item.node,
+        item.el,
+        sceneBounds.minX,
+        sceneBounds.minY,
+        CHART_TYPES.has(item.el.materialType ?? "")
+      );
+    })
+    .filter(Boolean)
+    .join("");
+  if (!previewNodesHtml && retryCount < 20) {
+    await new Promise((resolve) => window.setTimeout(resolve, 80));
+    return buildEditorPreviewSnapshotScene({ ...options, retryCount: retryCount + 1 });
+  }
+  if (!previewNodesHtml) return null;
+
+  const host = document.createElement("div");
+  host.setAttribute("data-preview-snapshot-host", "true");
+  host.style.position = "fixed";
+  host.style.left = "-100000px";
+  host.style.top = "0";
+  host.style.width = `${sceneBounds.width}px`;
+  host.style.height = `${sceneBounds.height}px`;
+  host.style.overflow = "hidden";
+  host.style.pointerEvents = "none";
+  host.style.background = "#ffffff";
+
+  const scene = document.createElement("div");
+  scene.id = "preview-scene";
+  scene.className = "relative shrink-0 origin-top-left";
+  scene.style.width = `${sceneBounds.width}px`;
+  scene.style.height = `${sceneBounds.height}px`;
+  scene.style.transformOrigin = "left top";
+  scene.innerHTML = previewNodesHtml;
+  host.appendChild(scene);
+  document.body.appendChild(host);
+
+  const gridNodeIds = layerElements
+    .filter((el) => el.materialType === "grid")
+    .map((el) => el.id);
+  for (const id of gridNodeIds) {
+    const gridNode = scene.querySelector<HTMLElement>(`[data-element-id="${id}"]`);
+    const content = gridNode?.firstElementChild as HTMLElement | null;
+    if (content) {
+      content.innerHTML = "";
+      content.removeAttribute("style");
+    }
+  }
+
+  const chartNodes = layerElements.filter((el) =>
+    CHART_TYPES.has(el.materialType ?? "")
+  );
+  for (const el of chartNodes) {
+    const hostEl = scene.querySelector<HTMLElement>(`[data-element-id="${el.id}"] > div`);
+    if (!hostEl) continue;
+    hostEl.innerHTML = "";
+    const chart = (
+      await import("echarts")
+    ).init(hostEl, null, { renderer: el.chart?.renderMode ?? "canvas" });
+    chart.setOption(buildChartOption(el) ?? {}, true);
+    chart.resize();
+  }
+
+  await waitFrames(2);
+  return { scene, width: sceneBounds.width, height: sceneBounds.height };
+}
+
+export function disposePreviewSnapshotScene(scene: HTMLElement) {
+  const host = scene.parentElement;
+  host?.remove();
+}
+
+async function finalizePreviewSnapshot(
+  dataUrl: string,
+  options?: GetPreviewSnapshotOptions
+): Promise<string> {
+  if (!options) return dataUrl;
+  const mimeType = options.mimeType ?? "image/png";
+  const quality = options.quality ?? 0.92;
+  if (options.maxWidth || options.maxHeight) {
+    return scaleDataUrl(dataUrl, options.maxWidth, options.maxHeight, mimeType, quality);
+  }
+  if (mimeType === "image/jpeg" && !dataUrl.startsWith("data:image/jpeg")) {
+    return scaleDataUrl(dataUrl, undefined, undefined, mimeType, quality);
+  }
+  return dataUrl;
+}
+
+/**
+ * 获取当前预览画面的 base64 图片（data URL），可用于工作区缩略图等场景。
+ * 优先使用编辑器或在线预览页注册的截图提供者，其次尝试页面上的 `#preview-scene`。
+ */
+export async function getPreviewSnapshot(
+  options?: GetPreviewSnapshotOptions
+): Promise<string> {
+  let dataUrl: string | null = null;
+  if (previewSnapshotProvider) {
+    dataUrl = await previewSnapshotProvider();
+  }
+
+  if (!dataUrl) {
+    const scene = document.getElementById("preview-scene");
+    if (scene instanceof HTMLElement) {
+      const width = scene.offsetWidth || Number.parseFloat(scene.style.width) || 1;
+      const height = scene.offsetHeight || Number.parseFloat(scene.style.height) || 1;
+      return capturePreviewSceneElement(scene, width, height, options);
+    }
+    throw new Error(
+      "Preview snapshot is unavailable. Mount the editor or open online preview first."
+    );
+  }
+
+  return finalizePreviewSnapshot(dataUrl, options);
+}
+
+export async function captureEditorPreviewSnapshot(
+  options: BuildEditorPreviewSnapshotSceneOptions & GetPreviewSnapshotOptions
+): Promise<string | null> {
+  const retryCount = options.retryCount ?? 0;
+  const layerElements = resolvePreviewLayerElements(
+    options.allElements,
+    options.layers,
+    options.activeLayerId
+  );
+  if (!layerElements.length) return null;
+
+  const mountedCount = layerElements.filter((el) =>
+    Boolean(options.canvasRoot?.querySelector(`[data-element-id="${el.id}"]`))
+  ).length;
+  if (mountedCount < layerElements.length && retryCount < 20) {
+    await new Promise((resolve) => window.setTimeout(resolve, 80));
+    return captureEditorPreviewSnapshot({ ...options, retryCount: retryCount + 1 });
+  }
+
+  return capturePreviewLayerSnapshot({
+    canvasRoot: options.canvasRoot,
+    elements: layerElements,
+    backgroundColor: options.backgroundColor,
+    maxWidth: options.maxWidth,
+    maxHeight: options.maxHeight,
+    mimeType: options.mimeType,
+    quality: options.quality,
+  });
+}

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

@@ -1,3 +1,67 @@
+/*
+ * 物料侧栏：容器查询写在源 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），否则多选组框线会被节点盖住，只剩锚点可见
@@ -37,14 +101,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 #fff !important;
+  border-color: #fff !important;
   background: #1990ff !important;
   background: var(--moveable-color) !important;
   z-index: 10 !important;