@arronqzy/vue-view 0.1.9 → 0.1.11

package/src/panel/components/config/PanelConfigViewportSection.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+import { Select } from "ant-design-vue";
+import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../../types";
+import {
+  VIEWPORT_OVERFLOW_MODES,
+  normalizeViewportOverflow,
+  type ViewportOverflowMode,
+} from "../../utils/viewportPlacement";
+import ConfigFieldGroup from "./ConfigFieldGroup.vue";
+import ConfigSection from "./ConfigSection.vue";
+
+const { t } = useI18n();
+const props = defineProps<{
+  element: PanelElement;
+  layers: PanelLayer[];
+  isEditable: boolean;
+  open: boolean;
+  forceOpen?: boolean;
+  setReferenceCopyMode?: (id: string, mode: ReferenceCopyMode) => void;
+  updateElement: (
+    id: string,
+    patch: Partial<PanelElement>,
+    options?: { batchId?: string; meta?: Record<string, unknown> }
+  ) => void;
+}>();
+
+const emit = defineEmits<{
+  "update:open": [value: boolean];
+}>();
+
+const overflowLabelKey: Record<ViewportOverflowMode, string> = {
+  "scroll-x": "panel.config.viewportOverflowScrollX",
+  "scroll-y": "panel.config.viewportOverflowScrollY",
+  scroll: "panel.config.viewportOverflowScroll",
+  clip: "panel.config.viewportOverflowClip",
+};
+
+function patch(next: Partial<PanelElement>) {
+  props.updateElement(props.element.id, next);
+}
+</script>
+
+<template>
+  <ConfigSection
+    :title="t('panel.config.sectionViewport')"
+    :open="open"
+    :force-open="forceOpen"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #hint>
+      {{ t("panel.config.viewportHint") }}
+    </template>
+    <ConfigFieldGroup :title="t('panel.config.groupRefSource')">
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.refLayer") }}</div>
+        <Select
+          size="small"
+          class="w-full"
+          :value="element.refLayerId ?? '__none__'"
+          :disabled="!isEditable"
+          @update:value="(v) => patch({ refLayerId: v === '__none__' ? undefined : String(v) })"
+        >
+          <Select.Option value="__none__">{{ t("panel.config.noneNoRef") }}</Select.Option>
+          <Select.Option
+            v-for="layer in layers.filter((l) => l.id !== element.layerId)"
+            :key="layer.id"
+            :value="layer.id"
+          >
+            {{ layer.name }}
+          </Select.Option>
+        </Select>
+      </label>
+    </ConfigFieldGroup>
+    <ConfigFieldGroup
+      :title="t('panel.config.groupCopyStrategy')"
+      collapsible
+      :default-open="false"
+    >
+      <template #hint>
+        {{ t("panel.config.copyStrategyHint") }}
+      </template>
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.copyMode") }}</div>
+        <Select
+          size="small"
+          class="w-full"
+          :value="element.refCopyMode ?? 'shallow'"
+          :disabled="!isEditable"
+          @update:value="(v) => setReferenceCopyMode?.(element.id, v as ReferenceCopyMode)"
+        >
+          <Select.Option value="shallow">{{ t("panel.config.shallowFollow") }}</Select.Option>
+          <Select.Option value="deep">{{ t("panel.config.deepFreeze") }}</Select.Option>
+        </Select>
+      </label>
+    </ConfigFieldGroup>
+    <ConfigFieldGroup :title="t('panel.config.groupViewportOverflow')">
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.viewportOverflow") }}</div>
+        <Select
+          size="small"
+          class="w-full"
+          :value="normalizeViewportOverflow(element.viewportOverflow)"
+          :disabled="!isEditable"
+          @update:value="(v) => patch({ viewportOverflow: v as ViewportOverflowMode })"
+        >
+          <Select.Option v-for="mode in VIEWPORT_OVERFLOW_MODES" :key="mode" :value="mode">
+            {{ t(overflowLabelKey[mode]) }}
+          </Select.Option>
+        </Select>
+      </label>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>

package/src/panel/components/elementsLayerNodes.ts

@@ -16,6 +16,12 @@ import type { PanelElement } from "../types";
 import { buildChartOption, CHART_TYPES } from "../utils/chartOptionBuilder";
 import { PREVIEW_LAYOUT_EVENT } from "../utils/panelStateIO";
 import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
+import {
+  isViewportNode,
+  normalizeViewportOverflow,
+  viewportOverflowStyle,
+  viewportWindowContentScale,
+} from "../utils/viewportPlacement";
 import TableNodeContent from "./table/TableNodeContent.vue";
 import Scene3dNodeContent from "@arronqzy/view-scene3d/vue";
 
@@ -712,15 +718,25 @@ export const ReferenceNodeContent = defineComponent({
       const sourceHeight = Math.max(1, maxY - minY);
       const innerW = Math.max(1, p.element.width);
       const innerH = Math.max(1, p.element.height);
-      const scale = Math.max(0.05, Math.min(innerW / sourceWidth, innerH / sourceHeight));
-      const mappedW = sourceWidth * scale;
-      const mappedH = sourceHeight * scale;
+      const windowFit = isViewportNode(p.element);
+      const windowScale = windowFit
+        ? viewportWindowContentScale(p.element, p.allElements)
+        : { scaleX: 1, scaleY: 1 };
+      const scaleX = windowFit
+        ? windowScale.scaleX
+        : Math.max(0.05, Math.min(innerW / sourceWidth, innerH / sourceHeight));
+      const scaleY = windowFit ? windowScale.scaleY : scaleX;
+      const mappedW = sourceWidth * scaleX;
+      const mappedH = sourceHeight * scaleY;
       return {
         minX,
         minY,
-        scale,
-        offsetX: (innerW - mappedW) / 2,
-        offsetY: (innerH - mappedH) / 2,
+        scaleX,
+        scaleY,
+        sourceWidth: mappedW,
+        sourceHeight: mappedH,
+        offsetX: windowFit ? 0 : (innerW - mappedW) / 2,
+        offsetY: windowFit ? 0 : (innerH - mappedH) / 2,
       };
     });
 
@@ -739,20 +755,27 @@ export const ReferenceNodeContent = defineComponent({
         ]);
       }
 
-      return h("div", { class: "pointer-events-none relative h-full w-full overflow-hidden" }, [
-        ...sourceNodes.value.map((node) => {
+      const overflowCss = isViewportNode(p.element)
+        ? viewportOverflowStyle(normalizeViewportOverflow(p.element.viewportOverflow))
+        : { overflowX: "hidden" as const, overflowY: "hidden" as const };
+      const canScroll =
+        isViewportNode(p.element) &&
+        (overflowCss.overflowX === "auto" || overflowCss.overflowY === "auto");
+
+      const innerNodes = sourceNodes.value.map((node) => {
           const box = getNodeAABB(node);
-          const left = layout.value!.offsetX + (box.left - layout.value!.minX) * layout.value!.scale;
-          const top = layout.value!.offsetY + (box.top - layout.value!.minY) * layout.value!.scale;
-          const width = Math.max(12, node.width * layout.value!.scale);
-          const height = Math.max(10, node.height * layout.value!.scale);
-          const boxWidth = Math.max(12, (box.right - box.left) * layout.value!.scale);
-          const boxHeight = Math.max(10, (box.bottom - box.top) * layout.value!.scale);
+          const left = layout.value!.offsetX + (box.left - layout.value!.minX) * layout.value!.scaleX;
+          const top = layout.value!.offsetY + (box.top - layout.value!.minY) * layout.value!.scaleY;
+          const width = Math.max(12, node.width * layout.value!.scaleX);
+          const height = Math.max(10, node.height * layout.value!.scaleY);
+          const boxWidth = Math.max(12, (box.right - box.left) * layout.value!.scaleX);
+          const boxHeight = Math.max(10, (box.bottom - box.top) * layout.value!.scaleY);
           return h(
             "div",
             {
               key: node.id,
               class: "absolute overflow-visible",
+              "data-viewport-item": isViewportNode(p.element) ? "true" : undefined,
               style: { left, top, width: boxWidth, height: boxHeight },
             },
             [
@@ -760,6 +783,7 @@ export const ReferenceNodeContent = defineComponent({
                 "div",
                 {
                   class: "absolute",
+                  "data-viewport-item": isViewportNode(p.element) ? "true" : undefined,
                   style: {
                     left: (boxWidth - width) / 2,
                     top: (boxHeight - height) / 2,
@@ -777,7 +801,7 @@ export const ReferenceNodeContent = defineComponent({
                         previewLayoutKey: p.previewLayoutKey,
                         previewMode: p.previewMode,
                       })
-                    : node.materialType === "reference"
+                    : node.materialType === "reference" || node.materialType === "viewport"
                       ? h(ReferenceNodeContent as Component, {
                           element: node,
                           allElements: p.allElements,
@@ -800,8 +824,42 @@ export const ReferenceNodeContent = defineComponent({
               ),
             ]
           );
-        }),
-      ]);
+        });
+
+      return h(
+        "div",
+        {
+          class: "relative h-full w-full",
+          style: {
+            overflowX: overflowCss.overflowX,
+            overflowY: overflowCss.overflowY,
+            pointerEvents: isViewportNode(p.element) ? "auto" : "none",
+          },
+          onWheel: canScroll
+            ? (e: WheelEvent) => {
+                e.stopPropagation();
+              }
+            : undefined,
+        },
+        [
+          h(
+            "div",
+            {
+              class: "pointer-events-none relative",
+              "data-viewport-sizer": isViewportNode(p.element) ? "true" : undefined,
+              style: isViewportNode(p.element)
+                ? {
+                    width: layout.value.sourceWidth,
+                    height: layout.value.sourceHeight,
+                    minWidth: "100%",
+                    minHeight: "100%",
+                  }
+                : { width: "100%", height: "100%" },
+            },
+            innerNodes
+          ),
+        ]
+      );
     };
   },
 }) as Component;

package/src/panel/components/materialSidebarData.ts

@@ -26,6 +26,7 @@ const MATERIAL_LABEL_KEYS: Record<string, string> = {
   text: "panel.material.text",
   rect: "panel.material.rect",
   grid: "panel.material.grid",
+  viewport: "panel.material.viewport",
   image: "panel.material.image",
   video: "panel.material.video",
   audio: "panel.material.audio",
@@ -68,6 +69,7 @@ export function getDefaultCategories(t: TranslateFn): MaterialCategory[] {
         { id: "geometry", title: t("panel.material.geometry") },
         { id: "scene3d", title: t("panel.material.scene3d") },
         { id: "grid", title: t("panel.material.grid") },
+        { id: "viewport", title: t("panel.material.viewport") },
         { id: "image", title: t("panel.material.image") },
         { id: "reference", title: t("panel.material.reference") },
       ],

package/src/panel/hooks/usePanelElements.ts

@@ -16,6 +16,7 @@ import {
   DEFAULT_LAYER_ID,
   getDefaultChartConfig,
   getDefaultGridConfig,
+  getDefaultViewportConfig,
   getDefaultNodeName,
   getDefaultScene3dConfigForMaterial,
   getDefaultSizeByMaterial,
@@ -569,7 +570,10 @@ export function usePanelElements() {
       .filter((n) => isPanelElementNode(n) && n.props)
       .map((n) => n.props as PanelElement);
     const desiredMode = options?.referenceCopyMode;
-    if (nextProps.materialType === "reference" && desiredMode) {
+    if (
+      (nextProps.materialType === "reference" || nextProps.materialType === "viewport") &&
+      desiredMode
+    ) {
       if (desiredMode === "deep" && nextProps.refLayerId) {
         nextProps.refCopyMode = "deep";
         nextProps.refSnapshot = buildDeepReferenceSnapshot(all, nextProps.refLayerId);
@@ -611,7 +615,9 @@ export function usePanelElements() {
       name: getDefaultNodeName(materialType, t),
       ...getDefaultTextContent(materialType, t),
       ...getDefaultGridConfig(materialType),
-      refCopyMode: materialType === "reference" ? "shallow" : undefined,
+      ...getDefaultViewportConfig(materialType),
+      refCopyMode:
+        materialType === "reference" || materialType === "viewport" ? "shallow" : undefined,
       chart: getDefaultChartConfig(materialType, t),
       table: getDefaultTableConfig(materialType, t),
       geometryShape: materialType === "geometry" ? "rect" : undefined,
@@ -712,7 +718,7 @@ export function usePanelElements() {
       .filter((n) => isPanelElementNode(n) && n.props)
       .map((n) => n.props as PanelElement);
     const target = all.find((el) => el.id === id);
-    if (!target || target.materialType !== "reference") return;
+    if (!target || (target.materialType !== "reference" && target.materialType !== "viewport")) return;
     const currentLayers =
       (current.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
     const layer = currentLayers.find((l) => l.id === target.layerId);
@@ -904,7 +910,7 @@ export function usePanelElements() {
       if (target.isMapping) return false;
       const willBeDeleted = mode === "remove" && el.layerId === layerId;
       if (willBeDeleted) return false;
-      if (el.materialType !== "reference") return false;
+      if (el.materialType !== "reference" && el.materialType !== "viewport") return false;
       if (el.refLayerId !== layerId) return false;
       return (el.refCopyMode ?? "shallow") !== "deep";
     });

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -1,6 +1,7 @@
 import { computed, onMounted, onUnmounted, ref, shallowRef, toValue, watch, type MaybeRefOrGetter } from "vue";
 import {
   BlueprintGraph,
+  parseBlueprintData,
   type BlueprintDocument,
   type BlueprintMetaDraft,
 } from "@arronqzy/vue-blueprint";
@@ -23,6 +24,8 @@ import {
   type WorkspaceSnapshot,
 } from "../library/workspace-snapshot";
 import { runBusyTask } from "../utils/async-work";
+import { createEmptyPanelState, normalizeImportedPanelState } from "../utils/panelStateIO";
+import { AbuilderEvents, emitAbuilderEvent } from "../library/event-subscription";
 
 export type UseWorkspaceProjectsOptions = {
   exportPanelData: () => State;
@@ -39,13 +42,21 @@ export type UseWorkspaceProjectsOptions = {
   panelRevision: MaybeRefOrGetter<unknown>;
   /** 工作区记录应用到编辑器后的回调（用于恢复蓝图面板等 UI 状态） */
   onProjectApplied?: (record: WorkspaceProjectRecord) => void;
+  /** 外部传入的初始工作区，挂载后自动加载（不触发 onProjectApplied） */
+  initialWorkspace?: MaybeRefOrGetter<WorkspaceProjectRecord | null | undefined>;
+  nameSpace?: MaybeRefOrGetter<string | null | undefined>;
 };
 
-export function buildOnlinePreviewUrl(projectId: string): string {
+export function buildOnlinePreviewUrl(
+  projectId: string,
+  nameSpace?: string | null
+): string {
   const url = new URL(window.location.href);
   url.search = "";
   url.searchParams.set("preview", "online");
   url.searchParams.set("projectId", projectId);
+  const ns = (nameSpace ?? "").trim();
+  if (ns) url.searchParams.set("ns", ns);
   const previewInstanceId =
     typeof crypto !== "undefined" && "randomUUID" in crypto
       ? crypto.randomUUID()
@@ -54,8 +65,31 @@ export function buildOnlinePreviewUrl(projectId: string): string {
   return url.toString();
 }
 
+function previewWindowName(projectId: string, nameSpace?: string | null): string {
+  const ns = (nameSpace ?? "").trim();
+  return ns ? `abuilder-preview-${ns}-${projectId}` : `abuilder-preview-${projectId}`;
+}
+
+function hasWorkspacePayload(
+  record?: WorkspaceProjectRecord | null
+): record is WorkspaceProjectRecord {
+  if (!record || typeof record !== "object") return false;
+  return Boolean(
+    record.panelState ||
+      record.blueprintDocument ||
+      record.id ||
+      record.productName ||
+      record.titleIconDataUrl
+  );
+}
+
+function workspaceApplyKey(record: WorkspaceProjectRecord): string {
+  return `${record.id ?? "anon"}:${record.updatedAt ?? 0}`;
+}
+
 export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
   const { t, locale } = useI18nOptional();
+  const nameSpace = () => toValue(options.nameSpace) ?? null;
   const projects = ref<WorkspaceProjectListItem[]>([]);
   const activeProjectId = ref<string | null>(null);
   const activeProjectName = ref<string | null>(null);
@@ -77,7 +111,8 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
 
   function resolveProjectName() {
     void locale.value;
-    return toValue(options.productName).trim() || t("panel.defaults.unnamedProduct");
+    const name = toValue(options.productName);
+    return (typeof name === "string" ? name : "").trim() || t("panel.defaults.unnamedProduct");
   }
 
   function buildCurrentSnapshot(): WorkspaceSnapshot {
@@ -90,13 +125,15 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
   }
 
   async function refreshProjects() {
-    projects.value = await listWorkspaceProjects();
+    projects.value = await listWorkspaceProjects(nameSpace());
   }
 
-  onMounted(() => {
-    void refreshProjects();
-    previewPollTimer = window.setInterval(refreshPreviewing, 2000);
-  });
+  watch(
+    () => nameSpace(),
+    () => {
+      void refreshProjects();
+    }
+  );
 
   onUnmounted(() => {
     if (previewPollTimer !== undefined) window.clearInterval(previewPollTimer);
@@ -122,36 +159,104 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     return !workspaceSnapshotsEqual(buildCurrentSnapshot(), syncedSnapshotRef.value);
   });
 
-  function applyProjectRecord(record: WorkspaceProjectRecord) {
+  function applyProjectRecord(
+    record: WorkspaceProjectRecord,
+    applyOptions?: { notifyApplied?: boolean }
+  ) {
+    const parsedBlueprint = parseBlueprintData(record.blueprintDocument);
     const blueprintDocument =
-      record.blueprintDocument ?? BlueprintGraph.empty().document;
+      parsedBlueprint.value ?? BlueprintGraph.empty().document;
     const blueprintMeta: BlueprintMetaDraft = {
       name: record.blueprintMeta?.name ?? t("panel.defaults.unnamedBlueprint"),
       remark: record.blueprintMeta?.remark ?? "",
     };
+    const panelState =
+      normalizeImportedPanelState(record.panelState) ?? createEmptyPanelState();
+    const productName =
+      typeof record.productName === "string" && record.productName.trim()
+        ? record.productName
+        : t("panel.defaults.unnamedProduct");
+    const titleIconDataUrl = record.titleIconDataUrl ?? "";
 
-    options.importPanelData(record.panelState);
+    options.importPanelData(panelState);
     options.setBlueprintGraph(BlueprintGraph.fromDocument(blueprintDocument));
     options.setBlueprintMeta(blueprintMeta);
-    options.setProductName(record.productName);
-    options.setTitleIconDataUrl(record.titleIconDataUrl ?? "");
-    activeProjectId.value = record.id;
-    activeProjectName.value = record.name;
+    options.setProductName(productName);
+    options.setTitleIconDataUrl(titleIconDataUrl);
+    activeProjectId.value = record.id || null;
+    activeProjectName.value = record.name ?? null;
     syncedSnapshotRef.value = cloneWorkspaceSnapshot({
       blueprintDocument,
       blueprintMeta,
-      productName: record.productName,
-      titleIconDataUrl: record.titleIconDataUrl ?? "",
+      productName,
+      titleIconDataUrl,
     });
     syncedPanelRevision = toValue(options.panelRevision);
     pendingRevisionSync = true;
-    options.onProjectApplied?.({
-      ...record,
-      blueprintDocument,
-      blueprintMeta,
+    if (applyOptions?.notifyApplied !== false) {
+      options.onProjectApplied?.({
+        ...record,
+        blueprintDocument,
+        blueprintMeta,
+        panelState,
+        productName,
+        titleIconDataUrl: titleIconDataUrl || undefined,
+      });
+    }
+  }
+
+  function applyEmptyWorkspace() {
+    options.importPanelData(createEmptyPanelState());
+    options.setBlueprintGraph(BlueprintGraph.empty());
+    options.setBlueprintMeta({
+      name: t("panel.defaults.unnamedBlueprint"),
+      remark: "",
     });
+    options.setProductName(t("panel.defaults.unnamedProduct"));
+    options.setTitleIconDataUrl("");
+    activeProjectId.value = null;
+    activeProjectName.value = null;
+    syncedSnapshotRef.value = null;
   }
 
+  let bootstrapped = false;
+  let appliedWorkspaceKey: string | null = null;
+
+  function bootstrapInitialWorkspace() {
+    const initialWorkspace = toValue(options.initialWorkspace) ?? null;
+    if (!bootstrapped) {
+      bootstrapped = true;
+      if (hasWorkspacePayload(initialWorkspace)) {
+        applyProjectRecord(initialWorkspace, { notifyApplied: false });
+        appliedWorkspaceKey = workspaceApplyKey(initialWorkspace);
+      } else {
+        applyEmptyWorkspace();
+      }
+      return;
+    }
+    if (!hasWorkspacePayload(initialWorkspace)) return;
+    const key = workspaceApplyKey(initialWorkspace);
+    if (appliedWorkspaceKey === key) return;
+    appliedWorkspaceKey = key;
+    applyProjectRecord(initialWorkspace, { notifyApplied: false });
+  }
+
+  onMounted(() => {
+    bootstrapInitialWorkspace();
+    void refreshProjects();
+    previewPollTimer = window.setInterval(refreshPreviewing, 2000);
+  });
+
+  watch(
+    () => {
+      const record = toValue(options.initialWorkspace);
+      return record ? workspaceApplyKey(record) : "";
+    },
+    () => {
+      bootstrapInitialWorkspace();
+    }
+  );
+
   async function persistProject(persistOptions: {
     id?: string;
     name: string;
@@ -161,7 +266,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     const now = Date.now();
     const id = persistOptions.id ?? createWorkspaceProjectId();
     const createdAt = persistOptions.createdAt ?? now;
-    const name = persistOptions.name.trim() || resolveProjectName();
+    const name = (persistOptions.name ?? "").trim() || resolveProjectName();
 
     const record: WorkspaceProjectRecord = {
       id,
@@ -171,13 +276,14 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
       panelState: options.exportPanelData(),
       blueprintDocument: snapshot.blueprintDocument,
       blueprintMeta: snapshot.blueprintMeta,
-      productName: snapshot.productName,
+      productName:
+        typeof snapshot.productName === "string" ? snapshot.productName : resolveProjectName(),
       titleIconDataUrl: snapshot.titleIconDataUrl || undefined,
     };
 
-    await putWorkspaceProject(record);
-    writeWorkspacePreviewCache(record);
-    broadcastWorkspaceProjectUpdate(id, now);
+    await putWorkspaceProject(record, nameSpace());
+    writeWorkspacePreviewCache(record, nameSpace());
+    broadcastWorkspaceProjectUpdate(id, now, nameSpace());
     activeProjectId.value = id;
     activeProjectName.value = name;
     syncedSnapshotRef.value = snapshot;
@@ -191,6 +297,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     return runBusyTask(t("common.savingWorkspace"), async () => {
       const name = resolveProjectName();
       const record = await persistProject({ name });
+      emitAbuilderEvent(AbuilderEvents.workspaceAdd, record);
       return { name, id: record.id };
     });
   }
@@ -201,7 +308,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
       return handleCreateProject();
     }
     return runBusyTask(t("common.savingWorkspace"), async () => {
-      const existing = await getWorkspaceProject(projectId);
+      const existing = await getWorkspaceProject(projectId, nameSpace());
       const name = resolveProjectName();
       const record = await persistProject({
         id: projectId,
@@ -214,7 +321,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
 
   async function handleOpenProject(id: string) {
     await runBusyTask(t("common.loadingWorkspace"), async () => {
-      const record = await getWorkspaceProject(id);
+      const record = await getWorkspaceProject(id, nameSpace());
       if (!record) {
         await refreshProjects();
         throw new Error(t("panel.messages.workspaceNotFound"));
@@ -228,7 +335,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
       if (!activeProjectId.value) {
         throw new Error(t("panel.messages.saveWorkspaceFirst"));
       }
-      const existing = await getWorkspaceProject(activeProjectId.value);
+      const existing = await getWorkspaceProject(activeProjectId.value, nameSpace());
       if (!existing) {
         activeProjectId.value = null;
         activeProjectName.value = null;
@@ -237,18 +344,19 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
         throw new Error(t("panel.messages.workspaceNotFound"));
       }
       const name = resolveProjectName() || existing.name;
-      await persistProject({
+      const record = await persistProject({
         id: activeProjectId.value,
         name,
         createdAt: existing.createdAt,
       });
+      emitAbuilderEvent(AbuilderEvents.workspaceSync, record);
       return name;
     });
   }
 
   async function handleDeleteProject(id: string) {
     await runBusyTask(t("common.deletingWorkspace"), async () => {
-      await deleteWorkspaceProject(id);
+      await deleteWorkspaceProject(id, nameSpace());
       if (activeProjectId.value === id) {
         activeProjectId.value = null;
         activeProjectName.value = null;
@@ -266,9 +374,10 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
         await handleSyncProject();
       }
       const record =
-        (await getWorkspaceProject(id)) ?? readWorkspacePreviewCache(id);
+        (await getWorkspaceProject(id, nameSpace())) ??
+        readWorkspacePreviewCache(id, nameSpace());
       if (record) {
-        writeWorkspacePreviewCache(record);
+        writeWorkspacePreviewCache(record, nameSpace());
       }
       const existing = previewWindows.get(id);
       if (existing && !existing.closed) {
@@ -280,9 +389,10 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
         refreshPreviewing();
         return;
       }
+      const ns = nameSpace();
       const win = window.open(
-        buildOnlinePreviewUrl(id),
-        `abuilder-preview-${id}`
+        buildOnlinePreviewUrl(id, ns),
+        previewWindowName(id, ns)
       );
       if (win) {
         previewWindows.set(id, win);