@arronqzy/react-view 1.0.21 → 1.0.23

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

@@ -1,6 +1,7 @@
 import type { BlueprintDocument } from "@arronqzy/react-blueprint";
 import type { BlueprintMetaDraft } from "@arronqzy/react-blueprint";
 import type { State } from "@arronqzy/rx-store";
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
 
 const DB_NAME = "arronqzy-workspace-projects";
 const DB_VERSION = 1;
@@ -25,9 +26,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;
@@ -42,9 +43,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);
@@ -77,8 +79,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);
@@ -110,21 +114,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/utils/outputScale.ts

@@ -1,17 +1,22 @@
 /** 产物预览是否缩放内部内容（字体等）。默认 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) {
+export function writeOutputScale(enabled: boolean, nameSpace?: string | null) {
   try {
-    localStorage.setItem(OUTPUT_SCALE_STORAGE_KEY, enabled ? "1" : "0");
+    localStorage.setItem(
+      appStorageKey(OUTPUT_SCALE_STORAGE_KEY, nameSpace),
+      enabled ? "1" : "0"
+    );
   } catch {
     // ignore storage errors
   }

package/src/panel/utils/panelSelection.ts

@@ -0,0 +1,57 @@
+export function formatRelativeTime(
+  timestamp: number,
+  now: number,
+  t: (key: string, params?: Record<string, string | number>) => string
+): string {
+  const diff = Math.max(0, now - timestamp);
+  const sec = Math.floor(diff / 1000);
+  if (sec < 60) return t("common.secondsAgo", { sec });
+  const min = Math.floor(sec / 60);
+  if (min < 60) return t("common.minutesAgo", { min });
+  const hour = Math.floor(min / 60);
+  if (hour < 24) return t("common.hoursAgo", { hour });
+  const day = Math.floor(hour / 24);
+  return t("common.daysAgo", { day });
+}
+
+export function getSelectedTargetsFromIds(
+  container: HTMLElement | null,
+  ids: string[],
+) {
+  if (!container) return [];
+  const targets: HTMLElement[] = [];
+  for (const id of ids) {
+    const el = container.querySelector<HTMLElement>(
+      `[data-element-id="${id}"]`,
+    );
+    if (el) targets.push(el);
+  }
+  return targets;
+}
+
+export function shouldClearSelectionOnBlank(target: HTMLElement | null) {
+  if (!target) return false;
+  if (
+    target.closest(".rv-selectable") ||
+    target.closest(".moveable-control-box") ||
+    target.closest(".moveable-group") ||
+    target.closest(".moveable-line") ||
+    target.closest(".moveable-control") ||
+    target.closest(".moveable-direction")
+  ) {
+    return false;
+  }
+  if (
+    target.closest("button") ||
+    target.closest("input") ||
+    target.closest("select") ||
+    target.closest("textarea") ||
+    target.closest("label") ||
+    target.closest("a") ||
+    target.closest("[role='menuitem']") ||
+    target.closest("[data-radix-popper-content-wrapper]")
+  ) {
+    return false;
+  }
+  return true;
+}

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) => {