@arronqzy/vue-view 0.1.0

package/src/panel/hooks/useRafThrottledScroll.ts

@@ -0,0 +1,25 @@
+import { onUnmounted, ref, shallowRef } from "vue";
+
+export function useRafThrottledScroll() {
+  const scrollRef = shallowRef({ left: 0, top: 0 });
+  const scroll = ref({ left: 0, top: 0 });
+  let rafRef: number | null = null;
+
+  function onScrollChange(next: { left: number; top: number }) {
+    scrollRef.value = next;
+    if (rafRef != null) return;
+    rafRef = requestAnimationFrame(() => {
+      rafRef = null;
+      const latest = scrollRef.value;
+      if (scroll.value.left !== latest.left || scroll.value.top !== latest.top) {
+        scroll.value = { ...latest };
+      }
+    });
+  }
+
+  onUnmounted(() => {
+    if (rafRef != null) cancelAnimationFrame(rafRef);
+  });
+
+  return { scroll, scrollRef, onScrollChange };
+}

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -0,0 +1,240 @@
+import { computed, onMounted, ref, shallowRef, toValue, type MaybeRefOrGetter } from "vue";
+import {
+  BlueprintGraph,
+  type BlueprintDocument,
+  type BlueprintMetaDraft,
+} from "@arronqzy/vue-blueprint";
+import type { State } from "@arronqzy/rx-store";
+import {
+  createWorkspaceProjectId,
+  deleteWorkspaceProject,
+  getWorkspaceProject,
+  listWorkspaceProjects,
+  putWorkspaceProject,
+  type WorkspaceProjectListItem,
+  type WorkspaceProjectRecord,
+} from "../library/workspace-project-db";
+import { broadcastWorkspaceProjectUpdate } from "../library/workspace-project-sync";
+import { writeWorkspacePreviewCache, readWorkspacePreviewCache } from "../library/workspace-project-cache";
+import {
+  cloneWorkspaceSnapshot,
+  workspaceSnapshotsEqual,
+  type WorkspaceSnapshot,
+} from "../library/workspace-snapshot";
+
+export type UseWorkspaceProjectsOptions = {
+  exportPanelData: () => State;
+  importPanelData: (state: State) => boolean;
+  blueprintDocument: MaybeRefOrGetter<BlueprintDocument>;
+  blueprintMeta: MaybeRefOrGetter<BlueprintMetaDraft>;
+  setBlueprintGraph: (graph: ReturnType<typeof BlueprintGraph.fromDocument>) => void;
+  setBlueprintMeta: (meta: BlueprintMetaDraft) => void;
+  productName: MaybeRefOrGetter<string>;
+  setProductName: (name: string) => void;
+  titleIconDataUrl: MaybeRefOrGetter<string>;
+  setTitleIconDataUrl: (url: string) => void;
+  /** 视图面板修订号，用于检测未同步修改 */
+  panelRevision: MaybeRefOrGetter<unknown>;
+  /** 工作区记录应用到编辑器后的回调（用于恢复蓝图面板等 UI 状态） */
+  onProjectApplied?: (record: WorkspaceProjectRecord) => void;
+};
+
+export function buildOnlinePreviewUrl(projectId: string): string {
+  const url = new URL(window.location.href);
+  url.search = "";
+  url.searchParams.set("preview", "online");
+  url.searchParams.set("projectId", projectId);
+  const previewInstanceId =
+    typeof crypto !== "undefined" && "randomUUID" in crypto
+      ? crypto.randomUUID()
+      : `pv-${Date.now()}`;
+  url.searchParams.set("pid", previewInstanceId);
+  return url.toString();
+}
+
+export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
+  const projects = ref<WorkspaceProjectListItem[]>([]);
+  const activeProjectId = ref<string | null>(null);
+  const activeProjectName = ref<string | null>(null);
+  const syncedSnapshotRef = shallowRef<WorkspaceSnapshot | null>(null);
+
+  function resolveProjectName() {
+    return toValue(options.productName).trim() || "未命名产物";
+  }
+
+  function buildCurrentSnapshot(): WorkspaceSnapshot {
+    return {
+      panelState: options.exportPanelData(),
+      blueprintDocument: toValue(options.blueprintDocument),
+      blueprintMeta: { ...toValue(options.blueprintMeta) },
+      productName: toValue(options.productName),
+      titleIconDataUrl: toValue(options.titleIconDataUrl),
+    };
+  }
+
+  async function refreshProjects() {
+    projects.value = await listWorkspaceProjects();
+  }
+
+  onMounted(() => {
+    void refreshProjects();
+  });
+
+  const dirty = computed(() => {
+    if (!activeProjectId.value || !syncedSnapshotRef.value) return false;
+    void toValue(options.panelRevision);
+    void toValue(options.blueprintDocument);
+    void toValue(options.blueprintMeta);
+    void toValue(options.productName);
+    void toValue(options.titleIconDataUrl);
+    return !workspaceSnapshotsEqual(buildCurrentSnapshot(), syncedSnapshotRef.value);
+  });
+
+  function applyProjectRecord(record: WorkspaceProjectRecord) {
+    const blueprintDocument =
+      record.blueprintDocument ?? BlueprintGraph.empty().document;
+    const blueprintMeta: BlueprintMetaDraft = {
+      name: record.blueprintMeta?.name ?? "未命名蓝图",
+      remark: record.blueprintMeta?.remark ?? "",
+    };
+
+    options.importPanelData(record.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;
+    syncedSnapshotRef.value = cloneWorkspaceSnapshot({
+      panelState: record.panelState,
+      blueprintDocument,
+      blueprintMeta,
+      productName: record.productName,
+      titleIconDataUrl: record.titleIconDataUrl ?? "",
+    });
+    options.onProjectApplied?.({
+      ...record,
+      blueprintDocument,
+      blueprintMeta,
+    });
+  }
+
+  async function persistProject(persistOptions: {
+    id?: string;
+    name: string;
+    createdAt?: number;
+  }) {
+    const snapshot = buildCurrentSnapshot();
+    const now = Date.now();
+    const id = persistOptions.id ?? createWorkspaceProjectId();
+    const createdAt = persistOptions.createdAt ?? now;
+    const name = persistOptions.name.trim() || resolveProjectName();
+
+    const record: WorkspaceProjectRecord = {
+      id,
+      name,
+      createdAt,
+      updatedAt: now,
+      panelState: snapshot.panelState,
+      blueprintDocument: snapshot.blueprintDocument,
+      blueprintMeta: snapshot.blueprintMeta,
+      productName: snapshot.productName,
+      titleIconDataUrl: snapshot.titleIconDataUrl || undefined,
+    };
+
+    await putWorkspaceProject(record);
+    writeWorkspacePreviewCache(record);
+    broadcastWorkspaceProjectUpdate(id, now);
+    activeProjectId.value = id;
+    activeProjectName.value = name;
+    syncedSnapshotRef.value = cloneWorkspaceSnapshot(snapshot);
+    await refreshProjects();
+    return record;
+  }
+
+  async function handleCreateProject() {
+    const name = resolveProjectName();
+    const record = await persistProject({ name });
+    return { name, id: record.id };
+  }
+
+  async function handleSaveProject() {
+    if (!activeProjectId.value) {
+      return handleCreateProject();
+    }
+    const existing = await getWorkspaceProject(activeProjectId.value);
+    const name = resolveProjectName();
+    const record = await persistProject({
+      id: activeProjectId.value,
+      name,
+      createdAt: existing?.createdAt,
+    });
+    return { name, id: record.id };
+  }
+
+  async function handleOpenProject(id: string) {
+    const record = await getWorkspaceProject(id);
+    if (!record) {
+      await refreshProjects();
+      throw new Error("工作区不存在或已被删除");
+    }
+    applyProjectRecord(record);
+  }
+
+  async function handleSyncProject() {
+    if (!activeProjectId.value) {
+      throw new Error("请先保存工作区");
+    }
+    const existing = await getWorkspaceProject(activeProjectId.value);
+    if (!existing) {
+      activeProjectId.value = null;
+      activeProjectName.value = null;
+      syncedSnapshotRef.value = null;
+      await refreshProjects();
+      throw new Error("工作区不存在或已被删除");
+    }
+    const name = resolveProjectName() || existing.name;
+    await persistProject({
+      id: activeProjectId.value,
+      name,
+      createdAt: existing.createdAt,
+    });
+    return name;
+  }
+
+  async function handleDeleteProject(id: string) {
+    await deleteWorkspaceProject(id);
+    if (activeProjectId.value === id) {
+      activeProjectId.value = null;
+      activeProjectName.value = null;
+      syncedSnapshotRef.value = null;
+    }
+    await refreshProjects();
+  }
+
+  async function handlePreviewProject(id: string, previewOptions?: { syncFirst?: boolean }) {
+    if (previewOptions?.syncFirst && activeProjectId.value === id && dirty.value) {
+      await handleSyncProject();
+    }
+    const record =
+      (await getWorkspaceProject(id)) ?? readWorkspacePreviewCache(id);
+    if (record) {
+      writeWorkspacePreviewCache(record);
+    }
+    window.open(buildOnlinePreviewUrl(id), "_blank", "noopener,noreferrer");
+  }
+
+  return {
+    projects,
+    activeProjectId,
+    activeProjectName,
+    dirty,
+    handleCreateProject,
+    handleSaveProject,
+    handleOpenProject,
+    handleSyncProject,
+    handleDeleteProject,
+    handlePreviewProject,
+    refreshProjects,
+  };
+}

package/src/panel/lib/panel-ruler-canvas.ts

@@ -0,0 +1,139 @@
+export type RulerType = "horizontal" | "vertical";
+
+export type RulerOptions = {
+  type?: RulerType;
+  zoom?: number;
+  unit?: number;
+  segment?: number;
+  backgroundColor?: string;
+  lineColor?: string;
+  textColor?: string;
+  font?: string;
+  longLineSize?: number;
+  shortLineSize?: number;
+};
+
+/** 轻量标尺实现，API 对齐 @scena/ruler，避免额外原生依赖 */
+export class PanelRuler {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private options: Required<RulerOptions>;
+  private scrollPos = 0;
+  private ro: ResizeObserver | null = null;
+
+  constructor(container: HTMLElement, options: RulerOptions = {}) {
+    this.canvas = document.createElement("canvas");
+    this.canvas.style.display = "block";
+    this.canvas.style.width = "100%";
+    this.canvas.style.height = "100%";
+    container.appendChild(this.canvas);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D not supported");
+    this.ctx = ctx;
+    this.options = {
+      type: options.type ?? "horizontal",
+      zoom: options.zoom ?? 1,
+      unit: options.unit ?? 100,
+      segment: options.segment ?? 10,
+      backgroundColor: options.backgroundColor ?? "rgba(255,255,255,0.98)",
+      lineColor: options.lineColor ?? "rgba(15,23,42,0.22)",
+      textColor: options.textColor ?? "rgba(15,23,42,0.75)",
+      font: options.font ?? "10px system-ui, sans-serif",
+      longLineSize: options.longLineSize ?? 8,
+      shortLineSize: options.shortLineSize ?? 4,
+    };
+    this.ro = new ResizeObserver(() => this.resize());
+    this.ro.observe(container);
+    this.resize();
+  }
+
+  scroll(scrollPos: number) {
+    this.scrollPos = scrollPos;
+    this.draw();
+  }
+
+  setState(patch: Partial<RulerOptions>) {
+    Object.assign(this.options, patch);
+    this.draw();
+  }
+
+  resize() {
+    const parent = this.canvas.parentElement;
+    if (!parent) return;
+    const dpr = window.devicePixelRatio || 1;
+    const width = parent.clientWidth;
+    const height = parent.clientHeight;
+    this.canvas.width = Math.max(1, Math.floor(width * dpr));
+    this.canvas.height = Math.max(1, Math.floor(height * dpr));
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.draw();
+  }
+
+  destroy() {
+    this.ro?.disconnect();
+    this.canvas.remove();
+  }
+
+  private draw() {
+    const {
+      type,
+      zoom,
+      unit,
+      segment,
+      backgroundColor,
+      lineColor,
+      textColor,
+      font,
+      longLineSize,
+      shortLineSize,
+    } = this.options;
+    const width = this.canvas.width / (window.devicePixelRatio || 1);
+    const height = this.canvas.height / (window.devicePixelRatio || 1);
+    const ctx = this.ctx;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, width, height);
+
+    const step = (unit / segment) * zoom;
+    if (step <= 0) return;
+
+    const isHorizontal = type === "horizontal";
+    const span = isHorizontal ? width : height;
+    const startWorld = -this.scrollPos;
+    const startIndex = Math.floor(startWorld / step) - 1;
+    const endIndex = Math.ceil((startWorld + span) / step) + 1;
+
+    ctx.strokeStyle = lineColor;
+    ctx.fillStyle = textColor;
+    ctx.font = font;
+    ctx.textBaseline = "top";
+
+    for (let i = startIndex; i <= endIndex; i += 1) {
+      const world = i * step;
+      const px = world + this.scrollPos;
+      if (px < -step || px > span + step) continue;
+      const isMajor = i % segment === 0;
+      const lineLen = isMajor ? longLineSize : shortLineSize;
+      ctx.beginPath();
+      if (isHorizontal) {
+        ctx.moveTo(px + 0.5, height);
+        ctx.lineTo(px + 0.5, height - lineLen);
+        if (isMajor) {
+          const label = String(Math.round((i * unit) / segment));
+          ctx.fillText(label, px + 2, 2);
+        }
+      } else {
+        ctx.moveTo(width, px + 0.5);
+        ctx.lineTo(width - lineLen, px + 0.5);
+        if (isMajor) {
+          const label = String(Math.round((i * unit) / segment));
+          ctx.save();
+          ctx.translate(2, px + 2);
+          ctx.fillText(label, 0, 0);
+          ctx.restore();
+        }
+      }
+      ctx.stroke();
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { WorkspaceProjectRecord } from "./workspace-project-db";
+
+const CACHE_PREFIX = "arronqzy-workspace-preview:";
+
+export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void {
+  try {
+    localStorage.setItem(CACHE_PREFIX + record.id, JSON.stringify(record));
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+export function readWorkspacePreviewCache(
+  projectId: string
+): WorkspaceProjectRecord | null {
+  try {
+    const raw = localStorage.getItem(CACHE_PREFIX + projectId);
+    if (!raw) return null;
+    return JSON.parse(raw) as WorkspaceProjectRecord;
+  } catch {
+    return null;
+  }
+}

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

@@ -0,0 +1,111 @@
+import type { BlueprintDocument, BlueprintMetaDraft } from "@arronqzy/vue-blueprint";
+import type { State } from "@arronqzy/rx-store";
+
+const DB_NAME = "arronqzy-workspace-projects";
+const DB_VERSION = 1;
+const STORE_NAME = "projects";
+
+export type WorkspaceProjectListItem = {
+  id: string;
+  name: string;
+  updatedAt: number;
+  createdAt: number;
+};
+
+export type WorkspaceProjectRecord = {
+  id: string;
+  name: string;
+  createdAt: number;
+  updatedAt: number;
+  panelState: State;
+  blueprintDocument: BlueprintDocument;
+  blueprintMeta: BlueprintMetaDraft;
+  productName: string;
+  titleIconDataUrl?: string;
+};
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: "id" });
+        store.createIndex("updatedAt", "updatedAt", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function runTransaction<T>(
+  mode: IDBTransactionMode,
+  runner: (store: IDBObjectStore) => IDBRequest<T>
+): Promise<T> {
+  return openDb().then(
+    (db) =>
+      new Promise<T>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, mode);
+        const store = tx.objectStore(STORE_NAME);
+        const request = runner(store);
+        let result!: T;
+
+        request.onerror = () =>
+          reject(request.error ?? new Error("indexeddb-request-failed"));
+        request.onsuccess = () => {
+          result = request.result as T;
+        };
+
+        tx.oncomplete = () => {
+          db.close();
+          resolve(result);
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+}
+
+export function createWorkspaceProjectId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `ws-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export async function listWorkspaceProjects(): Promise<WorkspaceProjectListItem[]> {
+  const records = await runTransaction<WorkspaceProjectRecord[]>("readonly", (store) =>
+    store.getAll()
+  );
+  return records
+    .map((record) => ({
+      id: record.id,
+      name: record.name,
+      createdAt: record.createdAt,
+      updatedAt: record.updatedAt,
+    }))
+    .sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+export async function getWorkspaceProject(
+  id: string
+): Promise<WorkspaceProjectRecord | null> {
+  const record = await runTransaction<WorkspaceProjectRecord | undefined>("readonly", (store) =>
+    store.get(id)
+  );
+  return record ?? null;
+}
+
+export async function putWorkspaceProject(
+  record: WorkspaceProjectRecord
+): Promise<WorkspaceProjectRecord> {
+  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record));
+  return record;
+}
+
+export async function deleteWorkspaceProject(id: string): Promise<void> {
+  await runTransaction<undefined>("readwrite", (store) => store.delete(id));
+}

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

@@ -0,0 +1,41 @@
+const CHANNEL_PREFIX = "arronqzy-workspace-project";
+
+export type WorkspaceProjectSyncMessage = {
+  type: "updated";
+  projectId: string;
+  updatedAt: number;
+};
+
+export function getWorkspaceProjectChannelName(projectId: string): string {
+  return `${CHANNEL_PREFIX}:${projectId}`;
+}
+
+export function broadcastWorkspaceProjectUpdate(
+  projectId: string,
+  updatedAt: number
+): void {
+  if (typeof BroadcastChannel === "undefined") return;
+  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  channel.postMessage({
+    type: "updated",
+    projectId,
+    updatedAt,
+  } satisfies WorkspaceProjectSyncMessage);
+  channel.close();
+}
+
+export function subscribeWorkspaceProjectUpdates(
+  projectId: string,
+  onUpdate: (message: WorkspaceProjectSyncMessage) => void
+): () => void {
+  if (typeof BroadcastChannel === "undefined") {
+    return () => {};
+  }
+  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  channel.onmessage = (event: MessageEvent<WorkspaceProjectSyncMessage>) => {
+    const data = event.data;
+    if (!data || data.type !== "updated" || data.projectId !== projectId) return;
+    onUpdate(data);
+  };
+  return () => channel.close();
+}

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

@@ -0,0 +1,30 @@
+import {
+  blueprintDocumentsEqual,
+  type BlueprintDocument,
+  type BlueprintMetaDraft,
+} from "@arronqzy/vue-blueprint";
+import type { State } from "@arronqzy/rx-store";
+
+export type WorkspaceSnapshot = {
+  panelState: State;
+  blueprintDocument: BlueprintDocument;
+  blueprintMeta: BlueprintMetaDraft;
+  productName: string;
+  titleIconDataUrl: string;
+};
+
+export function workspaceSnapshotsEqual(
+  a: WorkspaceSnapshot,
+  b: WorkspaceSnapshot
+): boolean {
+  if (a.productName !== b.productName) return false;
+  if (a.titleIconDataUrl !== b.titleIconDataUrl) return false;
+  if (a.blueprintMeta.name !== b.blueprintMeta.name) return false;
+  if ((a.blueprintMeta.remark ?? "") !== (b.blueprintMeta.remark ?? "")) return false;
+  if (!blueprintDocumentsEqual(a.blueprintDocument, b.blueprintDocument)) return false;
+  return JSON.stringify(a.panelState) === JSON.stringify(b.panelState);
+}
+
+export function cloneWorkspaceSnapshot(snapshot: WorkspaceSnapshot): WorkspaceSnapshot {
+  return JSON.parse(JSON.stringify(snapshot)) as WorkspaceSnapshot;
+}

package/src/panel/parseOnlinePreviewSearchParams.ts

@@ -0,0 +1,13 @@
+export function parseOnlinePreviewSearchParams(search: string): {
+  projectId: string;
+  previewInstanceId?: 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;
+  return {
+    projectId,
+    previewInstanceId: params.get("pid") ?? undefined,
+  };
+}