@arronqzy/vue-view 0.1.9 → 0.1.11

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

@@ -0,0 +1,60 @@
+import type { WorkspaceProjectRecord } from "./workspace-project-db";
+
+export const AbuilderEvents = {
+  /** 添加工作区 */
+  workspaceAdd: "workspace:add",
+  /** 同步工作区 */
+  workspaceSync: "workspace:sync",
+} as const;
+
+export type AbuilderEventName = (typeof AbuilderEvents)[keyof typeof AbuilderEvents];
+
+/** 工作区完整数据（面板 + 蓝图），可用于外部持久化与再次加载 */
+export type WorkspaceData = WorkspaceProjectRecord;
+
+export type WorkspaceAddEventPayload = WorkspaceData;
+export type WorkspaceSyncEventPayload = WorkspaceData;
+
+export type AbuilderEventPayloadMap = {
+  [AbuilderEvents.workspaceAdd]: WorkspaceAddEventPayload;
+  [AbuilderEvents.workspaceSync]: WorkspaceSyncEventPayload;
+};
+
+type EventCallback = (payload: unknown) => void;
+
+const listeners = new Map<string, Set<EventCallback>>();
+
+export function emitAbuilderEvent<T extends AbuilderEventName>(
+  eventName: T,
+  payload: AbuilderEventPayloadMap[T]
+): void {
+  const set = listeners.get(eventName);
+  if (!set) return;
+  for (const callback of set) {
+    try {
+      callback(payload);
+    } catch (error) {
+      console.error(`[abuilder] event handler error (${eventName}):`, error);
+    }
+  }
+}
+
+export function addEventSubscription<T extends AbuilderEventName>(
+  eventName: T,
+  callback: (payload: AbuilderEventPayloadMap[T]) => void
+): { unsubscribe: () => void } {
+  let set = listeners.get(eventName);
+  if (!set) {
+    set = new Set();
+    listeners.set(eventName, set);
+  }
+  set.add(callback as EventCallback);
+  return {
+    unsubscribe: () => {
+      set.delete(callback as EventCallback);
+      if (set.size === 0) {
+        listeners.delete(eventName);
+      }
+    },
+  };
+}

package/src/panel/library/parse-workspace-data.ts

@@ -0,0 +1,142 @@
+import {
+  BlueprintGraph,
+  parseBlueprintData,
+  validateBlueprintData,
+  type BlueprintDocument,
+  type BlueprintMetaDraft,
+  type ParseCheckResult,
+} from "@arronqzy/vue-blueprint";
+import type { State } from "@arronqzy/rx-store";
+import { createEmptyPanelState, normalizeImportedPanelState } from "../utils/panelStateIO";
+import {
+  createWorkspaceProjectId,
+  type WorkspaceProjectRecord,
+} from "./workspace-project-db";
+
+export type { ParseCheckResult };
+
+export type WorkspaceParseCheckResult = ParseCheckResult & {
+  view: ParseCheckResult;
+  blueprint: ParseCheckResult;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function extractPanelState(data: unknown): unknown {
+  if (isRecord(data) && data.panelState !== undefined) return data.panelState;
+  return data;
+}
+
+function readBlueprintMeta(raw: unknown): BlueprintMetaDraft {
+  if (!isRecord(raw)) return { name: "", remark: "" };
+  return {
+    name: typeof raw.name === "string" ? raw.name : "",
+    remark: typeof raw.remark === "string" ? raw.remark : "",
+  };
+}
+
+/**
+ * 校验数据能否被视图解析（工作区 `panelState` 或裸面板状态均可）。
+ */
+export function parseViewData(
+  data: unknown
+): ParseCheckResult & { value?: State } {
+  if (data == null) {
+    return { ok: false, error: "empty" };
+  }
+  const normalized = normalizeImportedPanelState(extractPanelState(data));
+  if (!normalized) {
+    return { ok: false, error: "invalid-view-data" };
+  }
+  return { ok: true, value: normalized };
+}
+
+export function validateViewData(data: unknown): ParseCheckResult {
+  const parsed = parseViewData(data);
+  return parsed.ok ? { ok: true } : { ok: false, error: parsed.error };
+}
+
+export { parseBlueprintData, validateBlueprintData };
+
+/**
+ * 构造一份可交给 `initialWorkspace` 的空工作区。
+ */
+export function createEmptyWorkspace(
+  init?: Partial<WorkspaceProjectRecord>
+): WorkspaceProjectRecord {
+  const now = Date.now();
+  return {
+    id: init?.id || createWorkspaceProjectId(),
+    name: init?.name ?? "",
+    createdAt: init?.createdAt ?? now,
+    updatedAt: init?.updatedAt ?? now,
+    panelState: init?.panelState ?? createEmptyPanelState(),
+    blueprintDocument: init?.blueprintDocument ?? BlueprintGraph.empty().document,
+    blueprintMeta: init?.blueprintMeta ?? { name: "", remark: "" },
+    productName: init?.productName ?? "",
+    titleIconDataUrl: init?.titleIconDataUrl,
+  };
+}
+
+/**
+ * 校验完整工作区数据：视图 `panelState` 与蓝图 `blueprintDocument` 都要能解析。
+ */
+export function validateWorkspaceData(data: unknown): WorkspaceParseCheckResult {
+  if (data == null) {
+    const empty = { ok: false, error: "empty" } satisfies ParseCheckResult;
+    return { ok: false, error: "empty", view: empty, blueprint: empty };
+  }
+  if (!isRecord(data)) {
+    const invalid = { ok: false, error: "invalid-workspace-data" } satisfies ParseCheckResult;
+    return {
+      ok: false,
+      error: "invalid-workspace-data",
+      view: invalid,
+      blueprint: invalid,
+    };
+  }
+  const view = validateViewData(data);
+  const blueprint = validateBlueprintData(data);
+  const ok = view.ok && blueprint.ok;
+  return {
+    ok,
+    error: ok ? undefined : "invalid-workspace-data",
+    view,
+    blueprint,
+  };
+}
+
+/**
+ * 解析并规范化工作区。成功时 `value` 可直接作为 `initialWorkspace`。
+ */
+export function parseWorkspaceData(
+  data: unknown
+): WorkspaceParseCheckResult & { value?: WorkspaceProjectRecord } {
+  const check = validateWorkspaceData(data);
+  if (!check.ok || !isRecord(data)) {
+    return check;
+  }
+  const view = parseViewData(data);
+  const blueprint = parseBlueprintData(data);
+  if (!view.value || !blueprint.value) {
+    return check;
+  }
+  const now = Date.now();
+  return {
+    ...check,
+    value: {
+      id: typeof data.id === "string" && data.id ? data.id : createWorkspaceProjectId(),
+      name: typeof data.name === "string" ? data.name : "",
+      createdAt: typeof data.createdAt === "number" ? data.createdAt : now,
+      updatedAt: typeof data.updatedAt === "number" ? data.updatedAt : now,
+      panelState: view.value,
+      blueprintDocument: blueprint.value as BlueprintDocument,
+      blueprintMeta: readBlueprintMeta(data.blueprintMeta),
+      productName: typeof data.productName === "string" ? data.productName : "",
+      titleIconDataUrl:
+        typeof data.titleIconDataUrl === "string" ? data.titleIconDataUrl : undefined,
+    },
+  };
+}

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

@@ -1,11 +1,19 @@
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
 import type { WorkspaceProjectRecord } from "./workspace-project-db";
 
 const CACHE_PREFIX = "arronqzy-workspace-preview:";
 
-export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void {
+function previewCacheKey(projectId: string, nameSpace?: string | null): string {
+  return appStorageKey(CACHE_PREFIX + projectId, nameSpace);
+}
+
+export function writeWorkspacePreviewCache(
+  record: WorkspaceProjectRecord,
+  nameSpace?: string | null
+): void {
   try {
     localStorage.setItem(
-      CACHE_PREFIX + record.id,
+      previewCacheKey(record.id, nameSpace),
       JSON.stringify({ id: record.id, updatedAt: record.updatedAt })
     );
   } catch {
@@ -14,10 +22,11 @@ export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void
 }
 
 export function readWorkspacePreviewCache(
-  projectId: string
+  projectId: string,
+  nameSpace?: string | null
 ): WorkspaceProjectRecord | null {
   try {
-    const raw = localStorage.getItem(CACHE_PREFIX + projectId);
+    const raw = localStorage.getItem(previewCacheKey(projectId, nameSpace));
     if (!raw) return null;
     const parsed = JSON.parse(raw) as Partial<WorkspaceProjectRecord> | null;
     if (!parsed || typeof parsed !== "object" || !parsed.panelState) return null;

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

@@ -1,5 +1,6 @@
 import type { BlueprintDocument, BlueprintMetaDraft } from "@arronqzy/vue-blueprint";
 import type { State } from "@arronqzy/rx-store";
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
 
 const DB_NAME = "arronqzy-workspace-projects";
 const DB_VERSION = 1;
@@ -24,9 +25,9 @@ export type WorkspaceProjectRecord = {
   titleIconDataUrl?: string;
 };
 
-function openDb(): Promise<IDBDatabase> {
+function openDb(nameSpace?: string | null): Promise<IDBDatabase> {
   return new Promise((resolve, reject) => {
-    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    const request = indexedDB.open(appStorageKey(DB_NAME, nameSpace), DB_VERSION);
     request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
     request.onupgradeneeded = () => {
       const db = request.result;
@@ -41,9 +42,10 @@ function openDb(): Promise<IDBDatabase> {
 
 function runTransaction<T>(
   mode: IDBTransactionMode,
-  runner: (store: IDBObjectStore) => IDBRequest<T>
+  runner: (store: IDBObjectStore) => IDBRequest<T>,
+  nameSpace?: string | null
 ): Promise<T> {
-  return openDb().then(
+  return openDb(nameSpace).then(
     (db) =>
       new Promise<T>((resolve, reject) => {
         const tx = db.transaction(STORE_NAME, mode);
@@ -76,8 +78,10 @@ export function createWorkspaceProjectId(): string {
   return `ws-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
 }
 
-export async function listWorkspaceProjects(): Promise<WorkspaceProjectListItem[]> {
-  const db = await openDb();
+export async function listWorkspaceProjects(
+  nameSpace?: string | null
+): Promise<WorkspaceProjectListItem[]> {
+  const db = await openDb(nameSpace);
   return new Promise((resolve, reject) => {
     const tx = db.transaction(STORE_NAME, "readonly");
     const store = tx.objectStore(STORE_NAME);
@@ -109,21 +113,28 @@ export async function listWorkspaceProjects(): Promise<WorkspaceProjectListItem[
 }
 
 export async function getWorkspaceProject(
-  id: string
+  id: string,
+  nameSpace?: string | null
 ): Promise<WorkspaceProjectRecord | null> {
-  const record = await runTransaction<WorkspaceProjectRecord | undefined>("readonly", (store) =>
-    store.get(id)
+  const record = await runTransaction<WorkspaceProjectRecord | undefined>(
+    "readonly",
+    (store) => store.get(id),
+    nameSpace
   );
   return record ?? null;
 }
 
 export async function putWorkspaceProject(
-  record: WorkspaceProjectRecord
+  record: WorkspaceProjectRecord,
+  nameSpace?: string | null
 ): Promise<WorkspaceProjectRecord> {
-  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record));
+  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record), nameSpace);
   return record;
 }
 
-export async function deleteWorkspaceProject(id: string): Promise<void> {
-  await runTransaction<undefined>("readwrite", (store) => store.delete(id));
+export async function deleteWorkspaceProject(
+  id: string,
+  nameSpace?: string | null
+): Promise<void> {
+  await runTransaction<undefined>("readwrite", (store) => store.delete(id), nameSpace);
 }

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

@@ -1,3 +1,5 @@
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
+
 const CHANNEL_PREFIX = "arronqzy-workspace-project";
 
 export type WorkspaceProjectSyncMessage = {
@@ -6,16 +8,22 @@ export type WorkspaceProjectSyncMessage = {
   updatedAt: number;
 };
 
-export function getWorkspaceProjectChannelName(projectId: string): string {
-  return `${CHANNEL_PREFIX}:${projectId}`;
+export function getWorkspaceProjectChannelName(
+  projectId: string,
+  nameSpace?: string | null
+): string {
+  return appStorageKey(`${CHANNEL_PREFIX}:${projectId}`, nameSpace);
 }
 
 export function broadcastWorkspaceProjectUpdate(
   projectId: string,
-  updatedAt: number
+  updatedAt: number,
+  nameSpace?: string | null
 ): void {
   if (typeof BroadcastChannel === "undefined") return;
-  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  const channel = new BroadcastChannel(
+    getWorkspaceProjectChannelName(projectId, nameSpace)
+  );
   channel.postMessage({
     type: "updated",
     projectId,
@@ -26,12 +34,15 @@ export function broadcastWorkspaceProjectUpdate(
 
 export function subscribeWorkspaceProjectUpdates(
   projectId: string,
-  onUpdate: (message: WorkspaceProjectSyncMessage) => void
+  onUpdate: (message: WorkspaceProjectSyncMessage) => void,
+  nameSpace?: string | null
 ): () => void {
   if (typeof BroadcastChannel === "undefined") {
     return () => {};
   }
-  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  const channel = new BroadcastChannel(
+    getWorkspaceProjectChannelName(projectId, nameSpace)
+  );
   channel.onmessage = (event: MessageEvent<WorkspaceProjectSyncMessage>) => {
     const data = event.data;
     if (!data || data.type !== "updated" || data.projectId !== projectId) return;

package/src/panel/parseOnlinePreviewSearchParams.ts

@@ -1,13 +1,16 @@
 export function parseOnlinePreviewSearchParams(search: string): {
   projectId: string;
   previewInstanceId?: string;
+  nameSpace?: string;
 } | null {
   const params = new URLSearchParams(search);
   if (params.get("preview") !== "online") return null;
   const projectId = params.get("projectId") ?? params.get("id");
   if (!projectId) return null;
+  const nameSpace = (params.get("ns") ?? params.get("nameSpace") ?? "").trim();
   return {
     projectId,
     previewInstanceId: params.get("pid") ?? undefined,
+    nameSpace: nameSpace || undefined,
   };
 }

package/src/panel/types.ts

@@ -54,6 +54,8 @@ export type PanelElementStyle = {
 
 export type ReferenceCopyMode = "shallow" | "deep";
 
+export type ViewportOverflowMode = "scroll-x" | "scroll-y" | "scroll" | "clip";
+
 export type { PanelTableConfig } from "@arronqzy/view-table";
 import type { PanelTableConfig } from "@arronqzy/view-table";
 import type { Scene3dConfig } from "@arronqzy/view-scene3d";
@@ -84,6 +86,8 @@ export type PanelElement = {
   gridPadding?: number;
   gridSnapThreshold?: number;
   parentGridId?: string;
+  /** 视窗节点：只显示自身尺寸内的引用图层内容，超出部分滚动或裁剪 */
+  viewportOverflow?: ViewportOverflowMode;
   gridSlotIndex?: number;
   gridColSpan?: number;
   gridRowSpan?: number;

package/src/panel/utils/outputScale.ts

@@ -1,14 +1,27 @@
 /** 产物预览是否缩放内部内容（字体等）。默认 false：块仍按视口撑满，内容保持原尺寸以免失真。 */
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
+
 export const OUTPUT_SCALE_STORAGE_KEY = "panel:outputScale";
 
-export function readOutputScale(): boolean {
+export function readOutputScale(nameSpace?: string | null): boolean {
   try {
-    return localStorage.getItem(OUTPUT_SCALE_STORAGE_KEY) === "1";
+    return localStorage.getItem(appStorageKey(OUTPUT_SCALE_STORAGE_KEY, nameSpace)) === "1";
   } catch {
     return false;
   }
 }
 
+export function writeOutputScale(enabled: boolean, nameSpace?: string | null) {
+  try {
+    localStorage.setItem(
+      appStorageKey(OUTPUT_SCALE_STORAGE_KEY, nameSpace),
+      enabled ? "1" : "0"
+    );
+  } catch {
+    // ignore storage errors
+  }
+}
+
 export type PreviewFillScale = {
   vw: number;
   vh: number;

package/src/panel/utils/panelElementDefaults.ts

@@ -15,6 +15,7 @@ const DEFAULT_NODE_NAME_KEYS: Record<string, string> = {
   funnel: "panel.defaults.funnel",
   text: "panel.defaults.text",
   grid: "panel.defaults.grid",
+  viewport: "panel.defaults.viewport",
   image: "panel.defaults.image",
   video: "panel.defaults.video",
   audio: "panel.defaults.audio",
@@ -71,6 +72,8 @@ export function getDefaultSizeByMaterial(materialType: string) {
       return { width: 180, height: 120 };
     case "grid":
       return { width: 320, height: 220 };
+    case "viewport":
+      return { width: 360, height: 240 };
     case "image":
       return { width: 220, height: 140 };
     case "video":
@@ -145,6 +148,13 @@ export function getDefaultGridConfig(materialType: string) {
   } as const;
 }
 
+export function getDefaultViewportConfig(materialType: string) {
+  if (materialType !== "viewport") return {};
+  return {
+    viewportOverflow: "clip" as const,
+  };
+}
+
 export function getDefaultChartConfig(
   materialType: string,
   t: TranslateFn = tForLocale("zh-CN")

package/src/panel/utils/panelElementNodes.ts

@@ -26,9 +26,11 @@ export function buildDeepReferenceSnapshot(
   const layerNodes = allElements.filter((el) => el.layerId === layerId);
   return layerNodes.map((el) => {
     const cloned = clonePanelElement(el);
-    if (cloned.materialType === "reference" && cloned.refLayerId) {
-      cloned.refCopyMode = "deep";
-      cloned.refSnapshot = buildDeepReferenceSnapshot(allElements, cloned.refLayerId, nextVisited);
+    if (cloned.materialType === "reference" || cloned.materialType === "viewport") {
+      if (cloned.refLayerId) {
+        cloned.refCopyMode = "deep";
+        cloned.refSnapshot = buildDeepReferenceSnapshot(allElements, cloned.refLayerId, nextVisited);
+      }
     }
     return cloned;
   });

package/src/panel/utils/panelStateIO.ts

@@ -26,6 +26,24 @@ export function normalizeImportedPanelState(state: unknown): State | null {
   return next;
 }
 
+export function createEmptyPanelState(): State {
+  return {
+    root: {
+      id: "root",
+      type: "root",
+      props: {},
+      children: [],
+    },
+    selectedIds: [],
+    variables: {
+      counter: 0,
+      isOpen: false,
+      layers: [DEFAULT_LAYER],
+      activeLayerId: DEFAULT_LAYER_ID,
+    },
+  };
+}
+
 export function parseAllPanelElements(state: State): PanelElement[] {
   return (state.root.children ?? [])
     .filter((node) => {

package/src/panel/utils/viewportPlacement.ts

@@ -0,0 +1,73 @@
+export const VIEWPORT_OVERFLOW_MODES = [
+  "scroll-x",
+  "scroll-y",
+  "scroll",
+  "clip",
+] as const;
+
+export type ViewportOverflowMode = (typeof VIEWPORT_OVERFLOW_MODES)[number];
+
+export const DEFAULT_VIEWPORT_OVERFLOW: ViewportOverflowMode = "clip";
+
+export function isViewportOverflowMode(
+  value: unknown
+): value is ViewportOverflowMode {
+  return (
+    value === "scroll-x" ||
+    value === "scroll-y" ||
+    value === "scroll" ||
+    value === "clip"
+  );
+}
+
+export function normalizeViewportOverflow(
+  value: unknown
+): ViewportOverflowMode {
+  return isViewportOverflowMode(value) ? value : DEFAULT_VIEWPORT_OVERFLOW;
+}
+
+export function viewportOverflowStyle(mode: ViewportOverflowMode): {
+  overflowX: "hidden" | "auto";
+  overflowY: "hidden" | "auto";
+} {
+  switch (mode) {
+    case "scroll-x":
+      return { overflowX: "auto", overflowY: "hidden" };
+    case "scroll-y":
+      return { overflowX: "hidden", overflowY: "auto" };
+    case "scroll":
+      return { overflowX: "auto", overflowY: "auto" };
+    default:
+      return { overflowX: "hidden", overflowY: "hidden" };
+  }
+}
+
+export function isViewportNode(
+  el: { materialType?: string } | undefined
+): boolean {
+  return el?.materialType === "viewport";
+}
+
+/** 引用节点与视窗节点都通过选择图层来预览内容 */
+export function isLayerPreviewNode(
+  el: { materialType?: string } | undefined
+): boolean {
+  return el?.materialType === "reference" || el?.materialType === "viewport";
+}
+
+/**
+ * 视窗按自身宽高开窗；预览里节点会被整体拉满视口，
+ * 内部引用内容必须用同一套缩放，滚动比例才和编辑态一致。
+ */
+export function viewportWindowContentScale(
+  current: { id: string; width: number; height: number },
+  originals: ReadonlyArray<{ id: string; width: number; height: number }>
+): { scaleX: number; scaleY: number } {
+  const original = originals.find((n) => n.id === current.id);
+  const ow = Math.max(1, original?.width ?? current.width);
+  const oh = Math.max(1, original?.height ?? current.height);
+  return {
+    scaleX: Math.max(1, current.width) / ow,
+    scaleY: Math.max(1, current.height) / oh,
+  };
+}