@arronqzy/abuilder-vue 0.1.18 → 0.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +53 -42
  2. package/package.json +3 -3
  3. package/src/index.ts +2 -0
  4. package/src/version.ts +1 -1
package/README.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # @arronqzy/abuilder-vue
2
2
 
3
- Vue 3 版 Abuilder 入口包，对应 React 版的 `@arronqzy/abuilder`。安装后即可通过 `<App />` 渲染完整编辑器。
3
+ Vue 3 版入口，对应 React 的 `@arronqzy/abuilder`。功能对齐：无限画布、物料配置、图层、蓝图调试、工作区和中英切换。UI 是 Ant Design Vue，蓝图画布是 Vue Flow。
4
+
5
+ 本包 **0.1.20** 与 `@arronqzy/abuilder@1.1.36` 能力对齐（蓝图 Soft UI、接口集合、System 模版、JSON 错误高亮等）。中文全功能手册：仓库 `docs/Abuilder使用文档与功能说明.docx`。
6
+
7
+ ![同一套编辑器：上半视图，下半蓝图](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/40-blueprint-open.png)
4
8
 
5
9
  ## 安装
6
10
 
@@ -8,7 +12,7 @@ Vue 3 版 Abuilder 入口包，对应 React 版的 `@arronqzy/abuilder`。安装
8
12
  pnpm add @arronqzy/abuilder-vue vue ant-design-vue
9
13
  ```
10
14
 
11
- ## 使用
15
+ ## 最小用法
12
16
 
13
17
  ```ts
14
18
  import { createApp } from "vue";
@@ -19,7 +23,7 @@ import { App } from "@arronqzy/abuilder-vue";
19
23
  createApp(App).use(Antd).mount("#app");
20
24
  ```
21
25
 
22
- ### 可选配置
26
+ 必须 `use(Antd)`。语言切换时，Ant Design Vue 的 `ConfigProvider.locale` 会跟着变。
23
27
 
24
28
  ```vue
25
29
  <App
@@ -31,84 +35,91 @@ createApp(App).use(Antd).mount("#app");
31
35
  />
32
36
  ```
33
37
 
38
+ ## Props
39
+
34
40
  | Prop | 说明 | 默认 |
35
41
  |------|------|------|
36
42
  | `class` | 根容器 class | — |
37
43
  | `initialZoom` | 画布初始缩放 | `1` |
38
44
  | `defaultTheme` | `light` / `dark` | `dark` |
39
- | `locale` | `zh-CN` / `en-US`；省略则按 localStorage → 浏览器 → zh-CN | `null` |
40
- | `nameSpace` | 隔离 IndexedDB / 缓存；同一页面多个 App 传入不同值 | — |
45
+ | `locale` | `zh-CN` / `en-US`；省略则 localStorage → 浏览器 → 中文 | `null` |
46
+ | `nameSpace` | 隔离 IndexedDB；同一页多个 App 必须不同 | — |
41
47
  | `previewSearch` | 覆盖预览 URL 查询串 | 当前 `location.search` |
42
- | `preview` | `true` 为预览页（用 `initialWorkspace`），`false` 为编辑面板 | `false` |
43
- | `initialWorkspace` | 完整工作区；空则首次渲染空白，不会自动打开 IndexedDB 记录 | — |
48
+ | `preview` | `true` 为预览页 | `false` |
49
+ | `initialWorkspace` | 完整工作区。空则空白画布，不会自动打开 IndexedDB 记录 | — |
44
50
 
45
- 顶栏「语言」可运行时切换中文 / English（写入 `abuilder.locale`）。Ant Design Vue 的 `ConfigProvider.locale` 会随语言同步。
51
+ 顶栏可切换中文 / English（`abuilder.locale`）。
46
52
 
47
- ### 编辑 / 预览模式
53
+ ## 编辑和预览
48
54
 
49
55
  ```vue
50
- <!-- 编辑：把后端工作区灌进面板 -->
51
56
  <App :key="workspace.id" :initial-workspace="workspace" />
52
-
53
- <!-- 预览：根据同一份数据直接渲染预览页 -->
54
57
  <App :key="workspace.id" preview :initial-workspace="workspace" />
55
58
  ```
56
59
 
57
- 切换工作区时建议配合 `key`。URL 含 `?preview=online&projectId=<id>` 时也会进入预览（从 IndexedDB 加载）。传了 `nameSpace` 时预览 URL 会带 `ns=`。
60
+ 切换工作区时带 `key`。URL 含 `?preview=online&projectId=<id>` 时从 IndexedDB 进入预览。传了 `nameSpace` 时预览 URL 带 `ns=`。
58
61
 
59
- ### 外部持久化
62
+ ## 自己存工作区
60
63
 
61
- 创建 / 同步工作区时会发出事件，回调带完整 `WorkspaceData`，请写入自己的后端，不要去调编辑器内部的 IndexedDB：
64
+ 不要读写编辑器内部 IndexedDB。订阅事件，把完整对象交给自己的后端：
62
65
 
63
66
  ```ts
64
67
  import {
65
68
  addEventSubscription,
66
69
  AbuilderEvents,
67
- parseWorkspaceData,
68
- type WorkspaceData,
69
- } from "@arronqzy/abuilder-vue";
70
-
71
- const addSub = addEventSubscription(AbuilderEvents.workspaceAdd, async (workspace: WorkspaceData) => {
72
- await saveToServer(workspace);
73
- });
74
- const syncSub = addEventSubscription(AbuilderEvents.workspaceSync, async (workspace) => {
75
- await saveToServer(workspace);
76
- });
77
- addSub.unsubscribe();
78
- syncSub.unsubscribe();
79
- ```
80
-
81
- 从后端取回后用 `parseWorkspaceData` 规范化，再交给 `initialWorkspace`：
82
-
83
- ```ts
84
- import {
85
70
  parseWorkspaceData,
86
71
  createEmptyWorkspace,
87
72
  createWorkspaceProjectId,
88
- validateViewData,
89
- validateBlueprintData,
90
73
  validateWorkspaceData,
74
+ type WorkspaceData,
91
75
  } from "@arronqzy/abuilder-vue";
92
76
 
77
+ const syncSub = addEventSubscription(
78
+ AbuilderEvents.workspaceSync,
79
+ async (workspace: WorkspaceData) => {
80
+ await saveToServer(workspace);
81
+ }
82
+ );
83
+ syncSub.unsubscribe();
84
+
93
85
  const parsed = parseWorkspaceData(jsonFromBackend);
94
86
  if (parsed.ok && parsed.value) {
95
87
  // <App :initial-workspace="parsed.value" />
96
88
  }
97
89
 
98
90
  createEmptyWorkspace({ name: "未命名", id: createWorkspaceProjectId() });
99
- validateWorkspaceData(workspace); // 只检查，不改数据
91
+ validateWorkspaceData(workspace);
100
92
  ```
101
93
 
102
- `validate*` 只回答能不能用。`parseWorkspaceData` 会补齐 `id` / 时间戳 / 空字段。只检查视图或只检查蓝图时用 `validateViewData` / `parseViewData`、`validateBlueprintData` / `parseBlueprintData`。
94
+ | 事件 | 常量 | 何时触发 |
95
+ |------|------|----------|
96
+ | `workspace:add` | `AbuilderEvents.workspaceAdd` | 创建成功 |
97
+ | `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步成功 |
98
+
99
+ `validate*` 只检查。`parseWorkspaceData` 会补齐 `id`、时间戳和空字段。只检查视图用 `validateViewData` / `parseViewData`；只检查蓝图用 `validateBlueprintData` / `parseBlueprintData`。
100
+
101
+ `WorkspaceData` 字段与 React 版相同：`id`、`name`、`createdAt`、`updatedAt`、`panelState`、`blueprintDocument`、`blueprintMeta`、`productName`、`titleIconDataUrl`。
102
+
103
+ ## 和 React 版的差别
104
+
105
+ - **没有** `getPreviewSnapshot`。要缩略图就自己截预览 DOM，不要假设有同名导出。
106
+ - 组件是 Ant Design Vue，不是 `@arronqzy/ui`。
107
+ - 本包以源码发布（`exports` 指向 `src/`），宿主需要能编译 Vue SFC。
108
+
109
+ 本仓库演示：
110
+
111
+ ```bash
112
+ pnpm -C apps/web-vue dev
113
+ ```
103
114
 
104
- 本包 **没有** `getPreviewSnapshot`（React 的 `@arronqzy/abuilder` 才有画布截图）。Vue 侧若需要缩略图，请自行对预览 DOM 截图，不要假定存在同名导出。
115
+ `http://127.0.0.1:31012`。
105
116
 
106
- ## 依赖包
117
+ ## 依赖
107
118
 
108
119
  - `@arronqzy/vue-view` — 视图编辑器
109
- - `@arronqzy/i18n` — 共享中英文本
110
- - `ant-design-vue` — UI 组件
111
- - `vue` — peer dependency
120
+ - `@arronqzy/i18n` — 中英文案
121
+ - `ant-design-vue` — UI
122
+ - `vue` — peer
112
123
 
113
124
  ## 许可证
114
125
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arronqzy/abuilder-vue",
3
- "version": "0.1.18",
3
+ "version": "0.1.20",
4
4
  "description": "Abuilder Vue 3 可视化编辑器入口包",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -14,8 +14,8 @@
14
14
  "dependencies": {
15
15
  "ant-design-vue": "^4.2.6",
16
16
  "vue": "^3.5.13",
17
- "@arronqzy/i18n": "0.1.14",
18
- "@arronqzy/vue-view": "0.1.20"
17
+ "@arronqzy/vue-view": "0.1.21",
18
+ "@arronqzy/i18n": "0.1.16"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "vue": "^3.4.0"
package/src/index.ts CHANGED
@@ -25,5 +25,7 @@ export type {
25
25
  AbuilderEventPayloadMap,
26
26
  WorkspaceAddEventPayload,
27
27
  WorkspaceSyncEventPayload,
28
+ ApiCollectionUploadStartEventPayload,
29
+ ApiCollectionUploadSuccessEventPayload,
28
30
  WorkspaceData,
29
31
  } from "@arronqzy/vue-view";
package/src/version.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /** 与 packages/abuilder-vue/package.json 保持同步。 */
2
2
  export const ABUILDER_VUE_PACKAGE_NAME = "@arronqzy/abuilder-vue";
3
- export const ABUILDER_VUE_VERSION = "0.1.18";
3
+ export const ABUILDER_VUE_VERSION = "0.1.19";