@arronqzy/abuilder-vue 0.1.0

package/README.md

@@ -0,0 +1,47 @@
+# @arronqzy/abuilder-vue
+
+Vue 3 版 Abuilder 入口包，对应 React 版的 `@arronqzy/abuilder`。安装后即可通过 `<App />` 渲染完整编辑器。
+
+## 安装
+
+```bash
+pnpm add @arronqzy/abuilder-vue vue ant-design-vue
+```
+
+## 使用
+
+```ts
+import { createApp } from "vue";
+import Antd from "ant-design-vue";
+import "ant-design-vue/dist/reset.css";
+import { App } from "@arronqzy/abuilder-vue";
+
+createApp(App).use(Antd).mount("#app");
+```
+
+### 可选配置
+
+```vue
+<App class="h-screen" :initial-zoom="1" default-theme="dark" />
+```
+
+| Prop | 说明 | 默认 |
+|------|------|------|
+| `class` | 根容器 class | — |
+| `initialZoom` | 画布初始缩放 | `1` |
+| `defaultTheme` | `light` / `dark` | `dark` |
+| `previewSearch` | 覆盖预览 URL 查询串 | 当前 `location.search` |
+
+### 在线预览 URL
+
+当 URL 含 `?preview=online&projectId=<id>` 时，自动渲染 `VueViewOnlinePreview`（从 IndexedDB 加载工作区并执行蓝图生命周期）。
+
+## 依赖包
+
+- `@arronqzy/vue-view` — 视图编辑器（画布、工作区、配置侧栏）
+- `ant-design-vue` — UI 组件
+- `vue` — peer dependency
+
+## 许可证
+
+MIT

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@arronqzy/abuilder-vue",
+  "version": "0.1.0",
+  "description": "Abuilder Vue 3 可视化编辑器入口包",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.2.6",
+    "vue": "^3.5.13",
+    "@arronqzy/vue-view": "0.1.0"
+  },
+  "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/typescript-config": "1.0.0",
+    "@arronqzy/eslint-config": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint \"src/**/*.{ts,vue}\"",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "build": "pnpm run typecheck"
+  }
+}

package/src/App.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { ConfigProvider, theme } from "ant-design-vue";
+import {
+  VueViewPanel,
+  VueViewOnlinePreview,
+  parseOnlinePreviewSearchParams,
+} from "@arronqzy/vue-view";
+import type { AbuilderVueAppProps } from "./types";
+
+const props = withDefaults(defineProps<AbuilderVueAppProps>(), {
+  initialZoom: 1,
+  defaultTheme: "dark",
+});
+
+const search =
+  props.previewSearch ??
+  (typeof window !== "undefined" ? window.location.search : "");
+
+const previewParams = computed(() => parseOnlinePreviewSearchParams(search));
+
+const isDark = computed(() => props.defaultTheme === "dark");
+</script>
+
+<template>
+  <ConfigProvider
+    :theme="{
+      algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+    }"
+  >
+    <VueViewOnlinePreview
+      v-if="previewParams"
+      :project-id="previewParams.projectId"
+      :preview-instance-id="previewParams.previewInstanceId"
+    />
+    <VueViewPanel
+      v-else
+      :class="props.class"
+      :initial-zoom="props.initialZoom"
+    />
+  </ConfigProvider>
+</template>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export { default as App } from "./App.vue";
+export type { AbuilderVueAppProps } from "./types";
+
+export {
+  VueViewPanel,
+  VueViewOnlinePreview,
+  parseOnlinePreviewSearchParams,
+} from "@arronqzy/vue-view";

package/src/types.ts

@@ -0,0 +1,6 @@
+export type AbuilderVueAppProps = {
+  class?: string;
+  initialZoom?: number;
+  defaultTheme?: "dark" | "light";
+  previewSearch?: string;
+};