@arronqzy/vue-view 0.1.0

package/README.md

@@ -0,0 +1,50 @@
+# @arronqzy/vue-view
+
+Vue 3 版 Abuilder **视图编辑器**，使用 **Ant Design Vue** 作为 UI 组件库，功能与 `@arronqzy/react-view` 对齐。
+
+## 功能
+
+- **画布**：无限平移/缩放（Infinite Viewer）、Moveable 拖拽/缩放/旋转、Selecto 框选
+- **物料**：图表（ECharts）、文本、图片、音视频、几何、网格、引用节点
+- **图层**：多图层、映射图层、主图层、锁定与合并
+- **配置侧栏**：按物料类型的完整属性编辑、Scope 模版与预览
+- **工作区**：IndexedDB 多项目、导入导出、跨标签页同步
+- **蓝图集成**：分屏蓝图编辑器、调试 Scope 绑定
+- **在线预览**：`VueViewOnlinePreview` 独立预览页
+
+## 使用
+
+```ts
+import { createApp } from "vue";
+import Antd from "ant-design-vue";
+import "ant-design-vue/dist/reset.css";
+import { VueViewPanel } from "@arronqzy/vue-view";
+
+createApp(VueViewPanel).use(Antd).mount("#app");
+```
+
+### 在线预览
+
+```ts
+import { VueViewOnlinePreview, parseOnlinePreviewSearchParams } from "@arronqzy/vue-view";
+```
+
+URL 参数：`?preview=online&projectId=<id>&pid=<instanceId>`
+
+## 依赖
+
+- `@arronqzy/rx-store` — 画布状态
+- `@arronqzy/vue-rx-store` — Vue composables
+- `@arronqzy/vue-blueprint` — 蓝图编辑器
+- `@arronqzy/blueprint-dsl` — 蓝图 DSL
+- `ant-design-vue`、`echarts`、`moveable`、`selecto`、`infinite-viewer`
+
+## 与 React 版差异
+
+- UI 使用 **Ant Design Vue**，非 shadcn/Radix
+- 标尺使用 canvas 兼容实现（可替换为 `@scena/ruler`）
+- 共享 `@arronqzy/rx-store` 与 `panel/utils` 数据逻辑
+
+## 许可证
+
+MIT

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@arronqzy/vue-view",
+  "version": "0.1.0",
+  "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.2.6",
+    "dayjs": "^1.11.13",
+    "echarts": "^6.0.0",
+    "immer": "^11.0.1",
+    "infinite-viewer": "^0.29.1",
+    "moveable": "^0.53.0",
+    "rxjs": "^7.8.2",
+    "selecto": "^1.26.3",
+    "uuid": "^13.0.0",
+    "vue": "^3.5.13",
+    "@arronqzy/blueprint-dsl": "1.0.3",
+    "@arronqzy/vue-rx-store": "0.1.0",
+    "@arronqzy/vue-blueprint": "0.1.0",
+    "@arronqzy/rx-store": "1.0.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^8.57.0",
+    "typescript": "^5.5.4",
+    "vue-tsc": "^2.2.0",
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint \"src/**/*.{ts,vue}\"",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "build": "pnpm run typecheck"
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,62 @@
+declare module "echarts" {
+  export type EChartsOption = Record<string, unknown>;
+  export interface ECharts {
+    setOption(option: EChartsOption, notMerge?: boolean): void;
+    resize(): void;
+    dispose(): void;
+  }
+  export function init(
+    dom: HTMLElement,
+    theme?: unknown,
+    opts?: { renderer?: "canvas" | "svg" }
+  ): ECharts;
+}
+
+declare module "infinite-viewer" {
+  export type InfiniteViewerOptions = {
+    margin?: number;
+    threshold?: number;
+    useMouseDrag?: boolean;
+    useWheelScroll?: boolean;
+    preventWheelClick?: boolean;
+    displayVerticalScroll?: boolean;
+    displayHorizontalScroll?: boolean;
+  };
+
+  export default class InfiniteViewer {
+    constructor(
+      containerElement: HTMLElement,
+      viewportElement?: HTMLElement,
+      options?: InfiniteViewerOptions
+    );
+    on(eventName: "scroll", handler: () => void): void;
+    scrollTo(scrollLeft: number, scrollTop: number): void;
+    getScrollLeft(): number;
+    getScrollTop(): number;
+    getContainer(): HTMLElement;
+    destroy(): void;
+  }
+}
+
+declare module "moveable" {
+  export type MoveableOptions = Record<string, unknown>;
+
+  export default class Moveable {
+    constructor(container: HTMLElement, options?: MoveableOptions);
+    target: HTMLElement | HTMLElement[] | null;
+    zoom: number;
+    on(eventName: string, handler: (e: any) => void): void;
+    updateRect(): void;
+    destroy(): void;
+  }
+}
+
+declare module "selecto" {
+  export type SelectoOptions = Record<string, unknown>;
+
+  export default class Selecto {
+    constructor(options?: SelectoOptions);
+    on(eventName: string, handler: (e: any) => void): void;
+    destroy(): void;
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as VueViewPanel } from "./panel/VueViewPanel.vue";
+export { default as VueViewOnlinePreview } from "./panel/VueViewOnlinePreview.vue";
+export { parseOnlinePreviewSearchParams } from "./panel/parseOnlinePreviewSearchParams";
+export type * from "./panel/types";

package/src/panel/VueViewOnlinePreview.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import {
+  BlueprintGraph,
+  documentToRunnableGraph,
+  getBlueprintLibraryRecord,
+  listBlueprintLibrary,
+  useBlueprintPageLifecycle,
+  type BlueprintLibraryListItem,
+} from "@arronqzy/vue-blueprint";
+import type { LibraryBlueprintResolver, PageLifecyclePhase } from "@arronqzy/blueprint-dsl";
+import type { State } from "@arronqzy/rx-store";
+import ElementsLayer from "./components/ElementsLayer.vue";
+import {
+  clearViewElementScopes,
+  getViewElementScope,
+  setViewElementScopes,
+  useViewScopeStoreVersion,
+} from "./scope/view-scope-store";
+import { resolvePanelElementScope } from "./utils/scope-template";
+import { getWorkspaceProject } from "./library/workspace-project-db";
+import { readWorkspacePreviewCache } from "./library/workspace-project-cache";
+import { subscribeWorkspaceProjectUpdates } from "./library/workspace-project-sync";
+import {
+  computePanelSceneBounds,
+  getActiveLayerId,
+  normalizeImportedPanelState,
+  notifyPreviewLayoutChanged,
+  parseAllPanelElements,
+  parsePanelLayers,
+  resolvePreviewLayerElements,
+} from "./utils/panelStateIO";
+
+const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
+
+const props = defineProps<{
+  projectId: string;
+  previewInstanceId?: string;
+}>();
+
+const loadError = ref<string | null>(null);
+const panelState = ref<State | null>(null);
+const projectRevision = ref(0);
+const blueprintGraph = ref(BlueprintGraph.empty());
+const blueprintLibraryItems = ref<BlueprintLibraryListItem[]>([]);
+const layoutRevision = ref(0);
+const layoutReady = ref(false);
+const sceneRef = ref<HTMLDivElement | null>(null);
+
+const layers = computed(() => (panelState.value ? parsePanelLayers(panelState.value) : []));
+const activeLayerId = computed(() =>
+  panelState.value ? getActiveLayerId(panelState.value) : "layer-1"
+);
+const allElements = computed(() =>
+  panelState.value ? parseAllPanelElements(panelState.value) : []
+);
+
+async function loadWorkspaceRecord(projectId: string) {
+  const fromDb = await getWorkspaceProject(projectId);
+  if (fromDb) return fromDb;
+  return readWorkspacePreviewCache(projectId);
+}
+
+function applyTitleIcon(titleIconDataUrl?: string) {
+  if (!titleIconDataUrl) return;
+  for (const rel of ["icon", "shortcut icon"]) {
+    document.querySelector(`link[rel='${rel}']`)?.remove();
+    const link = document.createElement("link");
+    link.rel = rel;
+    link.type = "image/png";
+    link.href = titleIconDataUrl;
+    document.head.appendChild(link);
+  }
+}
+
+async function loadProject() {
+  const record = await loadWorkspaceRecord(props.projectId);
+  if (!record) {
+    loadError.value = "工作区不存在或已被删除";
+    panelState.value = null;
+    return;
+  }
+  const normalized = normalizeImportedPanelState(record.panelState);
+  if (!normalized) {
+    loadError.value = "工作区数据格式无效";
+    panelState.value = null;
+    return;
+  }
+  loadError.value = null;
+  clearViewElementScopes();
+  panelState.value = normalized;
+  blueprintGraph.value = BlueprintGraph.fromDocument(record.blueprintDocument);
+  document.title = record.productName.trim() || record.name || "预览";
+  applyTitleIcon(record.titleIconDataUrl);
+  projectRevision.value += 1;
+}
+
+onMounted(() => {
+  void loadProject();
+});
+
+onMounted(() => {
+  const unsub = subscribeWorkspaceProjectUpdates(props.projectId, () => {
+    void loadProject();
+  });
+  onUnmounted(unsub);
+});
+
+watch(projectRevision, () => {
+  void listBlueprintLibrary().then((items) => {
+    blueprintLibraryItems.value = items;
+  });
+});
+
+const blueprintLibraryNameById = computed(
+  () => new Map(blueprintLibraryItems.value.map((item) => [item.id, item.name]))
+);
+
+const resolveLibraryBlueprint: LibraryBlueprintResolver = async (libraryBlueprintId) => {
+  const record = await getBlueprintLibraryRecord(libraryBlueprintId);
+  if (!record) return null;
+  const items = await listBlueprintLibrary();
+  const nameById = new Map(items.map((item) => [item.id, item.name]));
+  return documentToRunnableGraph(record.document, { libraryNameById: nameById });
+};
+
+function handleViewScopeUpdate(viewElementIds: string[], scope: unknown) {
+  setViewElementScopes(viewElementIds, scope);
+}
+
+const layerElements = computed(() =>
+  resolvePreviewLayerElements(allElements.value, layers.value, activeLayerId.value)
+);
+
+const scopeStoreVersion = useViewScopeStoreVersion();
+const scopedLayerElements = computed(() => {
+  void scopeStoreVersion.value;
+  return layerElements.value.map((el) =>
+    resolvePanelElementScope(el, getViewElementScope(el.id))
+  );
+});
+
+const sceneBounds = computed(() => computePanelSceneBounds(scopedLayerElements.value));
+
+const displayElements = computed(() =>
+  scopedLayerElements.value.map((el) => ({
+    ...el,
+    x: el.x - sceneBounds.value.minX,
+    y: el.y - sceneBounds.value.minY,
+  }))
+);
+
+function applySceneFit() {
+  const scene = sceneRef.value;
+  if (!scene) return;
+  const vw = window.innerWidth || 1;
+  const vh = window.innerHeight || 1;
+  const sw = Math.max(1, sceneBounds.value.width);
+  const sh = Math.max(1, sceneBounds.value.height);
+  const scaleX = vw / sw;
+  const scaleY = vh / sh;
+  if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY)) return;
+  scene.style.transform = `scale(${scaleX}, ${scaleY})`;
+  layoutRevision.value += 1;
+  notifyPreviewLayoutChanged();
+}
+
+watch(
+  [
+    panelState,
+    () => displayElements.value.length,
+    () => layerElements.value.length,
+    sceneBounds,
+    projectRevision,
+  ],
+  () => {
+    if (!panelState.value || layerElements.value.length === 0) return;
+    layoutReady.value = false;
+    applySceneFit();
+    requestAnimationFrame(() => {
+      applySceneFit();
+      requestAnimationFrame(() => {
+        notifyPreviewLayoutChanged();
+        layoutReady.value = true;
+      });
+    });
+  },
+  { deep: true }
+);
+
+const lifecycleReady = computed(
+  () => Boolean(panelState.value && layerElements.value.length > 0 && layoutReady.value)
+);
+
+useBlueprintPageLifecycle({
+  graph: blueprintGraph,
+  active: ref(true),
+  enabled: lifecycleReady,
+  bootPhases: PREVIEW_BOOT_PHASES,
+  bootKey: computed(() => projectRevision.value),
+  waitForPageReady: true,
+  onUpdated: computed(
+    () => `${activeLayerId.value}|${layerElements.value.length}|${projectRevision.value}|${layoutRevision.value}`
+  ),
+  resolveLibraryBlueprint,
+  libraryNameById: blueprintLibraryNameById,
+  rootLibraryBlueprintId: ref(null),
+  onViewScopeUpdate: handleViewScopeUpdate,
+});
+
+onMounted(() => {
+  const onResize = () => applySceneFit();
+  window.addEventListener("resize", onResize);
+  onUnmounted(() => window.removeEventListener("resize", onResize));
+});
+
+function noopUpdate() {}
+function noopSelect() {}
+</script>
+
+<template>
+  <div
+    v-if="loadError"
+    class="flex min-h-screen w-full items-center justify-center bg-white px-6 text-center text-sm text-gray-600"
+  >
+    {{ loadError }}
+  </div>
+
+  <div
+    v-else-if="!panelState"
+    class="flex min-h-screen w-full items-center justify-center bg-white text-sm text-gray-600"
+  >
+    加载预览中…
+  </div>
+
+  <div
+    v-else-if="layerElements.length === 0"
+    class="flex min-h-screen w-full flex-col items-center justify-center gap-2 bg-white px-6 text-center text-sm text-gray-600"
+  >
+    <div>当前工作区没有可预览的视图节点</div>
+    <div class="text-xs text-gray-400">请先在编辑器中点击「同步」或「创建工作区」后再预览</div>
+  </div>
+
+  <div
+    v-else
+    class="min-h-screen w-full overflow-hidden bg-white text-gray-900"
+    data-preview-mode="online"
+    :data-project-id="projectId"
+    :data-preview-instance-id="previewInstanceId ?? ''"
+    :data-preview-node-count="String(displayElements.length)"
+  >
+    <div id="preview-root" class="overflow-hidden" style="width: 100vw; height: 100vh">
+      <div
+        ref="sceneRef"
+        id="preview-scene"
+        class="relative shrink-0 origin-top-left"
+        :style="{
+          width: `${sceneBounds.width}px`,
+          height: `${sceneBounds.height}px`,
+          transformOrigin: 'left top',
+        }"
+      >
+        <ElementsLayer
+          :elements="displayElements"
+          :all-elements="allElements"
+          :selected-ids="[]"
+          :update-element="noopUpdate"
+          :layer-locked="true"
+          :preview-mode="true"
+          :preview-layout-key="layoutRevision"
+          @select-ids="noopSelect"
+        />
+      </div>
+    </div>
+  </div>
+</template>