@arronqzy/abuilder 1.1.15 → 1.1.17
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.
- package/README.md +160 -5
- package/dist/index.cjs +55 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +13 -2
- package/dist/index.d.ts +13 -2
- package/dist/index.js +44 -19
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -7,7 +7,8 @@ Abuilder **一站式可视化编辑器** npm 包。安装后在 React 应用中
|
|
|
7
7
|
- **视图编辑**：拖拽物料、图层、缩放平移、多选、图表与 Scope 配置
|
|
8
8
|
- **蓝图编辑**：节点连线、调试执行、蓝图库与执行日志
|
|
9
9
|
- **工作区**：多项目、IndexedDB 持久化、导入导出
|
|
10
|
-
- **在线预览**：独立预览页，支持 URL
|
|
10
|
+
- **在线预览**：独立预览页，支持 URL 参数或外部工作区数据
|
|
11
|
+
- **宿主集成**：事件订阅、预览快照、外部工作区加载与预览/编辑模式切换
|
|
11
12
|
|
|
12
13
|
## 安装
|
|
13
14
|
|
|
@@ -27,27 +28,161 @@ import "@arronqzy/abuilder/styles.css";
|
|
|
27
28
|
createRoot(document.getElementById("root")!).render(<App />);
|
|
28
29
|
```
|
|
29
30
|
|
|
30
|
-
###
|
|
31
|
+
### App 参数
|
|
32
|
+
|
|
33
|
+
| 参数 | 说明 | 默认值 |
|
|
34
|
+
|------|------|--------|
|
|
35
|
+
| `className` | 编辑面板根节点 class | — |
|
|
36
|
+
| `initialZoom` | 初始画布缩放 | `1` |
|
|
37
|
+
| `defaultTheme` | 编辑器主题 `"dark"` / `"light"` | `"dark"` |
|
|
38
|
+
| `locale` | 界面语言 `"zh-CN"` / `"en-US"`；省略则按 localStorage / 浏览器语言 | — |
|
|
39
|
+
| `previewSearch` | 在线预览 URL 查询串；含 `?preview=online&projectId=...` 时进入预览 | `window.location.search` |
|
|
40
|
+
| `preview` | `true` 为预览页，`false` 为编辑面板 | `false` |
|
|
41
|
+
| `initialWorkspace` | 完整工作区数据；编辑模式加载到面板，预览模式直接渲染 | — |
|
|
31
42
|
|
|
32
43
|
```tsx
|
|
33
44
|
<App
|
|
34
45
|
className="h-screen"
|
|
35
46
|
defaultTheme="dark"
|
|
36
47
|
initialZoom={1}
|
|
37
|
-
locale="zh-CN"
|
|
48
|
+
locale="zh-CN"
|
|
49
|
+
preview={false}
|
|
50
|
+
initialWorkspace={savedWorkspace}
|
|
38
51
|
/>
|
|
39
52
|
```
|
|
40
53
|
|
|
41
54
|
编辑器顶栏「设置 → 语言」可运行时切换中文 / English（写入 `localStorage` key `abuilder.locale`）。
|
|
42
55
|
|
|
43
|
-
###
|
|
56
|
+
### 编辑 / 预览模式
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
// 编辑模式（默认）：加载工作区到面板
|
|
60
|
+
<App key={workspace.id} initialWorkspace={workspace} />
|
|
61
|
+
|
|
62
|
+
// 预览模式：根据工作区数据直接渲染预览页
|
|
63
|
+
<App key={workspace.id} preview initialWorkspace={workspace} />
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
切换工作区时建议配合 `key`，确保完整重新加载。
|
|
44
67
|
|
|
45
|
-
URL
|
|
68
|
+
### 在线预览（URL）
|
|
69
|
+
|
|
70
|
+
URL 带 `?preview=online&projectId=<工作区ID>` 时自动进入预览模式（从 IndexedDB 加载）：
|
|
46
71
|
|
|
47
72
|
```tsx
|
|
48
73
|
<App previewSearch="?preview=online&projectId=xxx" />
|
|
49
74
|
```
|
|
50
75
|
|
|
76
|
+
### 外部持久化完整流程
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import { useEffect, useState } from "react";
|
|
80
|
+
import {
|
|
81
|
+
App,
|
|
82
|
+
addEventSubscription,
|
|
83
|
+
AbuilderEvents,
|
|
84
|
+
type WorkspaceData,
|
|
85
|
+
} from "@arronqzy/abuilder";
|
|
86
|
+
import "@arronqzy/abuilder/styles.css";
|
|
87
|
+
|
|
88
|
+
function HostApp() {
|
|
89
|
+
const [workspace, setWorkspace] = useState<WorkspaceData | null>(null);
|
|
90
|
+
const [isPreview, setIsPreview] = useState(false);
|
|
91
|
+
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
const sub = addEventSubscription(AbuilderEvents.workspaceSync, async (data) => {
|
|
94
|
+
await saveToMyBackend(data);
|
|
95
|
+
setWorkspace(data);
|
|
96
|
+
});
|
|
97
|
+
return () => sub.unsubscribe();
|
|
98
|
+
}, []);
|
|
99
|
+
|
|
100
|
+
if (!workspace) return <App />;
|
|
101
|
+
|
|
102
|
+
return (
|
|
103
|
+
<>
|
|
104
|
+
<button onClick={() => setIsPreview(false)}>编辑</button>
|
|
105
|
+
<button onClick={() => setIsPreview(true)}>预览</button>
|
|
106
|
+
<App
|
|
107
|
+
key={`${workspace.id}-${workspace.updatedAt}-${isPreview}`}
|
|
108
|
+
preview={isPreview}
|
|
109
|
+
initialWorkspace={workspace}
|
|
110
|
+
/>
|
|
111
|
+
</>
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### 工作区事件订阅
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
import {
|
|
120
|
+
addEventSubscription,
|
|
121
|
+
AbuilderEvents,
|
|
122
|
+
type WorkspaceData,
|
|
123
|
+
} from "@arronqzy/abuilder";
|
|
124
|
+
|
|
125
|
+
const addSub = addEventSubscription(
|
|
126
|
+
AbuilderEvents.workspaceAdd,
|
|
127
|
+
async (workspace: WorkspaceData) => {
|
|
128
|
+
await saveToServer(workspace);
|
|
129
|
+
}
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
const syncSub = addEventSubscription(
|
|
133
|
+
AbuilderEvents.workspaceSync,
|
|
134
|
+
async (workspace) => {
|
|
135
|
+
await saveToServer(workspace);
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
|
|
139
|
+
addSub.unsubscribe();
|
|
140
|
+
syncSub.unsubscribe();
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
| 事件 | 常量 | 触发时机 | 回调参数 |
|
|
144
|
+
|------|------|----------|----------|
|
|
145
|
+
| `workspace:add` | `AbuilderEvents.workspaceAdd` | 创建工作区成功 | `WorkspaceData` |
|
|
146
|
+
| `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步工作区成功 | `WorkspaceData` |
|
|
147
|
+
|
|
148
|
+
`WorkspaceData`（即 `WorkspaceProjectRecord`）字段：
|
|
149
|
+
|
|
150
|
+
| 字段 | 说明 |
|
|
151
|
+
|------|------|
|
|
152
|
+
| `id` | 工作区 ID |
|
|
153
|
+
| `name` | 工作区名称 |
|
|
154
|
+
| `createdAt` / `updatedAt` | 时间戳 |
|
|
155
|
+
| `panelState` | 面板完整状态（rx-store） |
|
|
156
|
+
| `blueprintDocument` | 蓝图文档 |
|
|
157
|
+
| `blueprintMeta` | 蓝图元信息（名称、备注） |
|
|
158
|
+
| `productName` | 产品名称 |
|
|
159
|
+
| `titleIconDataUrl` | 标题图标（可选） |
|
|
160
|
+
|
|
161
|
+
也可使用事件名字符串订阅，例如 `addEventSubscription("workspace:add", callback)`。
|
|
162
|
+
|
|
163
|
+
### 获取预览快照
|
|
164
|
+
|
|
165
|
+
```ts
|
|
166
|
+
import { getPreviewSnapshot } from "@arronqzy/abuilder";
|
|
167
|
+
|
|
168
|
+
const thumbnail = await getPreviewSnapshot({
|
|
169
|
+
maxWidth: 320,
|
|
170
|
+
maxHeight: 180,
|
|
171
|
+
mimeType: "image/jpeg",
|
|
172
|
+
quality: 0.85,
|
|
173
|
+
});
|
|
174
|
+
// 返回 "data:image/jpeg;base64,..."
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
| 参数 | 说明 | 默认值 |
|
|
178
|
+
|------|------|--------|
|
|
179
|
+
| `maxWidth` / `maxHeight` | 等比缩放上限 | 不限制 |
|
|
180
|
+
| `mimeType` | `"image/png"` 或 `"image/jpeg"` | `"image/png"` |
|
|
181
|
+
| `quality` | JPEG 质量 0–1 | `0.92` |
|
|
182
|
+
| `backgroundColor` | 背景色 | `"#ffffff"` |
|
|
183
|
+
|
|
184
|
+
需在 `App` / `ReactViewPanel` 或在线预览页已渲染且画布有内容时调用。
|
|
185
|
+
|
|
51
186
|
### 高级导出
|
|
52
187
|
|
|
53
188
|
除 `App` 外，也可单独使用底层组件：
|
|
@@ -56,6 +191,16 @@ URL 带 `?preview=online&projectId=<工作区ID>` 时自动进入预览模式：
|
|
|
56
191
|
import {
|
|
57
192
|
ReactViewPanel,
|
|
58
193
|
ReactViewOnlinePreview,
|
|
194
|
+
addEventSubscription,
|
|
195
|
+
AbuilderEvents,
|
|
196
|
+
getPreviewSnapshot,
|
|
197
|
+
} from "@arronqzy/abuilder";
|
|
198
|
+
|
|
199
|
+
import type {
|
|
200
|
+
WorkspaceData,
|
|
201
|
+
WorkspaceProjectRecord,
|
|
202
|
+
AbuilderEventName,
|
|
203
|
+
GetPreviewSnapshotOptions,
|
|
59
204
|
} from "@arronqzy/abuilder";
|
|
60
205
|
```
|
|
61
206
|
|
|
@@ -77,6 +222,16 @@ import {
|
|
|
77
222
|
- 构建工具需支持 CSS 导入（Vite / Webpack 5 等）
|
|
78
223
|
- 根节点容器建议 `height: 100%`（样式已包含 `#root` / `#app` 规则）
|
|
79
224
|
|
|
225
|
+
本地开发时若样式缺失，需先构建 CSS：
|
|
226
|
+
|
|
227
|
+
```bash
|
|
228
|
+
pnpm -C packages/ui run build:css
|
|
229
|
+
pnpm -C packages/react-view run build:css
|
|
230
|
+
pnpm -C packages/abuilder run build:css
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
`apps/web` 的 `pnpm dev` 会通过 `predev` 自动执行上述步骤。
|
|
234
|
+
|
|
80
235
|
## 许可证
|
|
81
236
|
|
|
82
237
|
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -7,12 +7,33 @@ var reactView = require('@arronqzy/react-view');
|
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
9
9
|
// src/App.tsx
|
|
10
|
+
function PreviewShell({
|
|
11
|
+
locale,
|
|
12
|
+
onLocaleChange,
|
|
13
|
+
children
|
|
14
|
+
}) {
|
|
15
|
+
if (typeof document !== "undefined") {
|
|
16
|
+
document.documentElement.classList.remove("dark");
|
|
17
|
+
document.documentElement.classList.add("light");
|
|
18
|
+
document.documentElement.dataset.theme = "light";
|
|
19
|
+
}
|
|
20
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.I18nProvider, { locale, onLocaleChange, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: "light min-h-[100vh] w-full bg-white text-gray-900",
|
|
24
|
+
"data-theme": "light",
|
|
25
|
+
children
|
|
26
|
+
}
|
|
27
|
+
) });
|
|
28
|
+
}
|
|
10
29
|
function App({
|
|
11
30
|
className,
|
|
12
31
|
initialZoom,
|
|
13
32
|
defaultTheme = "dark",
|
|
14
33
|
locale = null,
|
|
15
|
-
previewSearch
|
|
34
|
+
previewSearch,
|
|
35
|
+
preview = false,
|
|
36
|
+
initialWorkspace = null
|
|
16
37
|
}) {
|
|
17
38
|
const [localeState, setLocaleState] = react.useState(locale);
|
|
18
39
|
const effectiveLocale = locale ?? localeState;
|
|
@@ -21,30 +42,38 @@ function App({
|
|
|
21
42
|
() => reactView.parseOnlinePreviewSearchParams(search),
|
|
22
43
|
[search]
|
|
23
44
|
);
|
|
45
|
+
if (preview) {
|
|
46
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PreviewShell, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
+
reactView.ReactViewOnlinePreview,
|
|
48
|
+
{
|
|
49
|
+
workspace: initialWorkspace,
|
|
50
|
+
projectId: initialWorkspace?.id
|
|
51
|
+
}
|
|
52
|
+
) });
|
|
53
|
+
}
|
|
24
54
|
if (previewParams) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
document.documentElement.classList.add("light");
|
|
28
|
-
document.documentElement.dataset.theme = "light";
|
|
29
|
-
}
|
|
30
|
-
return /* @__PURE__ */ jsxRuntime.jsx(react$1.I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
31
|
-
"div",
|
|
55
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PreviewShell, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
56
|
+
reactView.ReactViewOnlinePreview,
|
|
32
57
|
{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
|
-
reactView.ReactViewOnlinePreview,
|
|
37
|
-
{
|
|
38
|
-
projectId: previewParams.projectId,
|
|
39
|
-
previewInstanceId: previewParams.previewInstanceId
|
|
40
|
-
}
|
|
41
|
-
)
|
|
58
|
+
projectId: previewParams.projectId,
|
|
59
|
+
previewInstanceId: previewParams.previewInstanceId
|
|
42
60
|
}
|
|
43
61
|
) });
|
|
44
62
|
}
|
|
45
|
-
return /* @__PURE__ */ jsxRuntime.jsx(react$1.I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
63
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
64
|
+
reactView.ReactViewPanel,
|
|
65
|
+
{
|
|
66
|
+
className,
|
|
67
|
+
initialZoom,
|
|
68
|
+
initialWorkspace
|
|
69
|
+
}
|
|
70
|
+
) }) });
|
|
46
71
|
}
|
|
47
72
|
|
|
73
|
+
Object.defineProperty(exports, "AbuilderEvents", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
get: function () { return reactView.AbuilderEvents; }
|
|
76
|
+
});
|
|
48
77
|
Object.defineProperty(exports, "ReactViewOnlinePreview", {
|
|
49
78
|
enumerable: true,
|
|
50
79
|
get: function () { return reactView.ReactViewOnlinePreview; }
|
|
@@ -53,6 +82,14 @@ Object.defineProperty(exports, "ReactViewPanel", {
|
|
|
53
82
|
enumerable: true,
|
|
54
83
|
get: function () { return reactView.ReactViewPanel; }
|
|
55
84
|
});
|
|
85
|
+
Object.defineProperty(exports, "addEventSubscription", {
|
|
86
|
+
enumerable: true,
|
|
87
|
+
get: function () { return reactView.addEventSubscription; }
|
|
88
|
+
});
|
|
89
|
+
Object.defineProperty(exports, "getPreviewSnapshot", {
|
|
90
|
+
enumerable: true,
|
|
91
|
+
get: function () { return reactView.getPreviewSnapshot; }
|
|
92
|
+
});
|
|
56
93
|
Object.defineProperty(exports, "parseOnlinePreviewSearchParams", {
|
|
57
94
|
enumerable: true,
|
|
58
95
|
get: function () { return reactView.parseOnlinePreviewSearchParams; }
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/App.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/App.tsx"],"names":["jsx","I18nProvider","useState","useMemo","parseOnlinePreviewSearchParams","ReactViewOnlinePreview","ThemeProvider","ReactViewPanel"],"mappings":";;;;;;;;;AAqCA,SAAS,YAAa,CAAA;AAAA,EACpB,MAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAIG,EAAA;AACD,EAAI,IAAA,OAAO,aAAa,WAAa,EAAA;AACnC,IAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,MAAA,CAAO,MAAM,CAAA;AAChD,IAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,GAAA,CAAI,OAAO,CAAA;AAC9C,IAAS,QAAA,CAAA,eAAA,CAAgB,QAAQ,KAAQ,GAAA,OAAA;AAAA;AAG3C,EACE,uBAAAA,cAAA,CAACC,oBAAa,EAAA,EAAA,MAAA,EAAgB,cAC5B,EAAA,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,mDAAA;AAAA,MACV,YAAW,EAAA,OAAA;AAAA,MAEV;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;AAEO,SAAS,GAAI,CAAA;AAAA,EAClB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAe,GAAA,MAAA;AAAA,EACf,MAAS,GAAA,IAAA;AAAA,EACT,aAAA;AAAA,EACA,OAAU,GAAA,KAAA;AAAA,EACV,gBAAmB,GAAA;AACrB,CAAqB,EAAA;AACnB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIE,eAAwB,MAAM,CAAA;AACpE,EAAA,MAAM,kBAAkB,MAAU,IAAA,WAAA;AAElC,EAAA,MAAM,SACJ,aACC,KAAA,OAAO,WAAW,WAAc,GAAA,MAAA,CAAO,SAAS,MAAS,GAAA,EAAA,CAAA;AAE5D,EAAA,MAAM,aAAgB,GAAAC,aAAA;AAAA,IACpB,MAAMC,yCAA+B,MAAM,CAAA;AAAA,IAC3C,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,uBACGJ,cAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,eAAA,EAAiB,gBAAgB,cACrD,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACK,gCAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,gBAAA;AAAA,QACX,WAAW,gBAAkB,EAAA;AAAA;AAAA,KAEjC,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,aAAe,EAAA;AACjB,IAAA,uBACGL,cAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,eAAA,EAAiB,gBAAgB,cACrD,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACK,gCAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAc,CAAA,SAAA;AAAA,QACzB,mBAAmB,aAAc,CAAA;AAAA;AAAA,KAErC,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAAL,cAAA,CAACC,oBAAa,EAAA,EAAA,MAAA,EAAQ,eAAiB,EAAA,cAAA,EAAgB,gBACrD,QAAC,kBAAAD,cAAA,CAAAM,gBAAA,EAAA,EAAc,YAA4B,EAAA,YAAA,EAAc,KACvD,EAAA,QAAA,kBAAAN,cAAA;AAAA,IAACO,wBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ","file":"index.cjs","sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\nimport { I18nProvider } from \"@arronqzy/i18n/react\";\nimport type { Locale } from \"@arronqzy/i18n\";\nimport {\n ReactViewOnlinePreview,\n ReactViewPanel,\n parseOnlinePreviewSearchParams,\n} from \"@arronqzy/react-view\";\nimport type { WorkspaceProjectRecord } from \"@arronqzy/react-view\";\n\nexport type AbuilderAppProps = {\n className?: string;\n initialZoom?: number;\n /** 编辑器默认主题 */\n defaultTheme?: \"dark\" | \"light\";\n /**\n * 界面语言。省略时按 localStorage → 浏览器语言 → zh-CN 解析。\n */\n locale?: Locale | null;\n /**\n * 在线预览模式的 URL 查询串。\n * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。\n */\n previewSearch?: string;\n /**\n * 是否为预览模式。`true` 时根据 `initialWorkspace` 直接渲染预览页；`false` 为编辑面板。\n * @default false\n */\n preview?: boolean;\n /**\n * 外部传入的完整工作区数据（面板 + 蓝图）。\n * 编辑模式：挂载后加载到面板；预览模式：直接渲染预览页。\n */\n initialWorkspace?: WorkspaceProjectRecord | null;\n};\n\nfunction PreviewShell({\n locale,\n onLocaleChange,\n children,\n}: {\n locale: Locale | null;\n onLocaleChange: (locale: Locale) => void;\n children: ReactNode;\n}) {\n if (typeof document !== \"undefined\") {\n document.documentElement.classList.remove(\"dark\");\n document.documentElement.classList.add(\"light\");\n document.documentElement.dataset.theme = \"light\";\n }\n\n return (\n <I18nProvider locale={locale} onLocaleChange={onLocaleChange}>\n <div\n className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n data-theme=\"light\"\n >\n {children}\n </div>\n </I18nProvider>\n );\n}\n\nexport function App({\n className,\n initialZoom,\n defaultTheme = \"dark\",\n locale = null,\n previewSearch,\n preview = false,\n initialWorkspace = null,\n}: AbuilderAppProps) {\n const [localeState, setLocaleState] = useState<Locale | null>(locale);\n const effectiveLocale = locale ?? localeState;\n\n const search =\n previewSearch ??\n (typeof window !== \"undefined\" ? window.location.search : \"\");\n\n const previewParams = useMemo(\n () => parseOnlinePreviewSearchParams(search),\n [search]\n );\n\n if (preview) {\n return (\n <PreviewShell locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ReactViewOnlinePreview\n workspace={initialWorkspace}\n projectId={initialWorkspace?.id}\n />\n </PreviewShell>\n );\n }\n\n if (previewParams) {\n return (\n <PreviewShell locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ReactViewOnlinePreview\n projectId={previewParams.projectId}\n previewInstanceId={previewParams.previewInstanceId}\n />\n </PreviewShell>\n );\n }\n\n return (\n <I18nProvider locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n <ReactViewPanel\n className={className}\n initialZoom={initialZoom}\n initialWorkspace={initialWorkspace}\n />\n </ThemeProvider>\n </I18nProvider>\n );\n}\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { Locale } from '@arronqzy/i18n';
|
|
3
3
|
export { Locale } from '@arronqzy/i18n';
|
|
4
|
-
|
|
4
|
+
import { WorkspaceProjectRecord } from '@arronqzy/react-view';
|
|
5
|
+
export { AbuilderEventName, AbuilderEventPayloadMap, AbuilderEvents, GetPreviewSnapshotOptions, ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, WorkspaceAddEventPayload, WorkspaceData, WorkspaceProjectRecord, WorkspaceSyncEventPayload, addEventSubscription, getPreviewSnapshot, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
5
6
|
|
|
6
7
|
type AbuilderAppProps = {
|
|
7
8
|
className?: string;
|
|
@@ -17,7 +18,17 @@ type AbuilderAppProps = {
|
|
|
17
18
|
* 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。
|
|
18
19
|
*/
|
|
19
20
|
previewSearch?: string;
|
|
21
|
+
/**
|
|
22
|
+
* 是否为预览模式。`true` 时根据 `initialWorkspace` 直接渲染预览页；`false` 为编辑面板。
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
preview?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* 外部传入的完整工作区数据（面板 + 蓝图）。
|
|
28
|
+
* 编辑模式：挂载后加载到面板；预览模式：直接渲染预览页。
|
|
29
|
+
*/
|
|
30
|
+
initialWorkspace?: WorkspaceProjectRecord | null;
|
|
20
31
|
};
|
|
21
|
-
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
32
|
+
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, preview, initialWorkspace, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
22
33
|
|
|
23
34
|
export { type AbuilderAppProps, App };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { Locale } from '@arronqzy/i18n';
|
|
3
3
|
export { Locale } from '@arronqzy/i18n';
|
|
4
|
-
|
|
4
|
+
import { WorkspaceProjectRecord } from '@arronqzy/react-view';
|
|
5
|
+
export { AbuilderEventName, AbuilderEventPayloadMap, AbuilderEvents, GetPreviewSnapshotOptions, ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, WorkspaceAddEventPayload, WorkspaceData, WorkspaceProjectRecord, WorkspaceSyncEventPayload, addEventSubscription, getPreviewSnapshot, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
5
6
|
|
|
6
7
|
type AbuilderAppProps = {
|
|
7
8
|
className?: string;
|
|
@@ -17,7 +18,17 @@ type AbuilderAppProps = {
|
|
|
17
18
|
* 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。
|
|
18
19
|
*/
|
|
19
20
|
previewSearch?: string;
|
|
21
|
+
/**
|
|
22
|
+
* 是否为预览模式。`true` 时根据 `initialWorkspace` 直接渲染预览页；`false` 为编辑面板。
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
preview?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* 外部传入的完整工作区数据（面板 + 蓝图）。
|
|
28
|
+
* 编辑模式：挂载后加载到面板；预览模式：直接渲染预览页。
|
|
29
|
+
*/
|
|
30
|
+
initialWorkspace?: WorkspaceProjectRecord | null;
|
|
20
31
|
};
|
|
21
|
-
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
32
|
+
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, preview, initialWorkspace, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
22
33
|
|
|
23
34
|
export { type AbuilderAppProps, App };
|
package/dist/index.js
CHANGED
|
@@ -2,16 +2,37 @@ import { useState, useMemo } from 'react';
|
|
|
2
2
|
import { ThemeProvider } from '@arronqzy/ui';
|
|
3
3
|
import { I18nProvider } from '@arronqzy/i18n/react';
|
|
4
4
|
import { parseOnlinePreviewSearchParams, ReactViewOnlinePreview, ReactViewPanel } from '@arronqzy/react-view';
|
|
5
|
-
export { ReactViewOnlinePreview, ReactViewPanel, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
5
|
+
export { AbuilderEvents, ReactViewOnlinePreview, ReactViewPanel, addEventSubscription, getPreviewSnapshot, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
// src/App.tsx
|
|
9
|
+
function PreviewShell({
|
|
10
|
+
locale,
|
|
11
|
+
onLocaleChange,
|
|
12
|
+
children
|
|
13
|
+
}) {
|
|
14
|
+
if (typeof document !== "undefined") {
|
|
15
|
+
document.documentElement.classList.remove("dark");
|
|
16
|
+
document.documentElement.classList.add("light");
|
|
17
|
+
document.documentElement.dataset.theme = "light";
|
|
18
|
+
}
|
|
19
|
+
return /* @__PURE__ */ jsx(I18nProvider, { locale, onLocaleChange, children: /* @__PURE__ */ jsx(
|
|
20
|
+
"div",
|
|
21
|
+
{
|
|
22
|
+
className: "light min-h-[100vh] w-full bg-white text-gray-900",
|
|
23
|
+
"data-theme": "light",
|
|
24
|
+
children
|
|
25
|
+
}
|
|
26
|
+
) });
|
|
27
|
+
}
|
|
9
28
|
function App({
|
|
10
29
|
className,
|
|
11
30
|
initialZoom,
|
|
12
31
|
defaultTheme = "dark",
|
|
13
32
|
locale = null,
|
|
14
|
-
previewSearch
|
|
33
|
+
previewSearch,
|
|
34
|
+
preview = false,
|
|
35
|
+
initialWorkspace = null
|
|
15
36
|
}) {
|
|
16
37
|
const [localeState, setLocaleState] = useState(locale);
|
|
17
38
|
const effectiveLocale = locale ?? localeState;
|
|
@@ -20,28 +41,32 @@ function App({
|
|
|
20
41
|
() => parseOnlinePreviewSearchParams(search),
|
|
21
42
|
[search]
|
|
22
43
|
);
|
|
44
|
+
if (preview) {
|
|
45
|
+
return /* @__PURE__ */ jsx(PreviewShell, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsx(
|
|
46
|
+
ReactViewOnlinePreview,
|
|
47
|
+
{
|
|
48
|
+
workspace: initialWorkspace,
|
|
49
|
+
projectId: initialWorkspace?.id
|
|
50
|
+
}
|
|
51
|
+
) });
|
|
52
|
+
}
|
|
23
53
|
if (previewParams) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
document.documentElement.classList.add("light");
|
|
27
|
-
document.documentElement.dataset.theme = "light";
|
|
28
|
-
}
|
|
29
|
-
return /* @__PURE__ */ jsx(I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsx(
|
|
30
|
-
"div",
|
|
54
|
+
return /* @__PURE__ */ jsx(PreviewShell, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsx(
|
|
55
|
+
ReactViewOnlinePreview,
|
|
31
56
|
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
children: /* @__PURE__ */ jsx(
|
|
35
|
-
ReactViewOnlinePreview,
|
|
36
|
-
{
|
|
37
|
-
projectId: previewParams.projectId,
|
|
38
|
-
previewInstanceId: previewParams.previewInstanceId
|
|
39
|
-
}
|
|
40
|
-
)
|
|
57
|
+
projectId: previewParams.projectId,
|
|
58
|
+
previewInstanceId: previewParams.previewInstanceId
|
|
41
59
|
}
|
|
42
60
|
) });
|
|
43
61
|
}
|
|
44
|
-
return /* @__PURE__ */ jsx(I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsx(
|
|
62
|
+
return /* @__PURE__ */ jsx(I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsx(
|
|
63
|
+
ReactViewPanel,
|
|
64
|
+
{
|
|
65
|
+
className,
|
|
66
|
+
initialZoom,
|
|
67
|
+
initialWorkspace
|
|
68
|
+
}
|
|
69
|
+
) }) });
|
|
45
70
|
}
|
|
46
71
|
|
|
47
72
|
export { App };
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/App.tsx"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/App.tsx"],"names":[],"mappings":";;;;;;;;AAqCA,SAAS,YAAa,CAAA;AAAA,EACpB,MAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAIG,EAAA;AACD,EAAI,IAAA,OAAO,aAAa,WAAa,EAAA;AACnC,IAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,MAAA,CAAO,MAAM,CAAA;AAChD,IAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,GAAA,CAAI,OAAO,CAAA;AAC9C,IAAS,QAAA,CAAA,eAAA,CAAgB,QAAQ,KAAQ,GAAA,OAAA;AAAA;AAG3C,EACE,uBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,MAAA,EAAgB,cAC5B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,mDAAA;AAAA,MACV,YAAW,EAAA,OAAA;AAAA,MAEV;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;AAEO,SAAS,GAAI,CAAA;AAAA,EAClB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAe,GAAA,MAAA;AAAA,EACf,MAAS,GAAA,IAAA;AAAA,EACT,aAAA;AAAA,EACA,OAAU,GAAA,KAAA;AAAA,EACV,gBAAmB,GAAA;AACrB,CAAqB,EAAA;AACnB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAwB,MAAM,CAAA;AACpE,EAAA,MAAM,kBAAkB,MAAU,IAAA,WAAA;AAElC,EAAA,MAAM,SACJ,aACC,KAAA,OAAO,WAAW,WAAc,GAAA,MAAA,CAAO,SAAS,MAAS,GAAA,EAAA,CAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,MAAM,+BAA+B,MAAM,CAAA;AAAA,IAC3C,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,uBACG,GAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,eAAA,EAAiB,gBAAgB,cACrD,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,sBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,gBAAA;AAAA,QACX,WAAW,gBAAkB,EAAA;AAAA;AAAA,KAEjC,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,aAAe,EAAA;AACjB,IAAA,uBACG,GAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,eAAA,EAAiB,gBAAgB,cACrD,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,sBAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAc,CAAA,SAAA;AAAA,QACzB,mBAAmB,aAAc,CAAA;AAAA;AAAA,KAErC,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,MAAA,EAAQ,eAAiB,EAAA,cAAA,EAAgB,gBACrD,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,YAA4B,EAAA,YAAA,EAAc,KACvD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ","file":"index.js","sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\nimport { I18nProvider } from \"@arronqzy/i18n/react\";\nimport type { Locale } from \"@arronqzy/i18n\";\nimport {\n ReactViewOnlinePreview,\n ReactViewPanel,\n parseOnlinePreviewSearchParams,\n} from \"@arronqzy/react-view\";\nimport type { WorkspaceProjectRecord } from \"@arronqzy/react-view\";\n\nexport type AbuilderAppProps = {\n className?: string;\n initialZoom?: number;\n /** 编辑器默认主题 */\n defaultTheme?: \"dark\" | \"light\";\n /**\n * 界面语言。省略时按 localStorage → 浏览器语言 → zh-CN 解析。\n */\n locale?: Locale | null;\n /**\n * 在线预览模式的 URL 查询串。\n * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。\n */\n previewSearch?: string;\n /**\n * 是否为预览模式。`true` 时根据 `initialWorkspace` 直接渲染预览页；`false` 为编辑面板。\n * @default false\n */\n preview?: boolean;\n /**\n * 外部传入的完整工作区数据（面板 + 蓝图）。\n * 编辑模式：挂载后加载到面板；预览模式：直接渲染预览页。\n */\n initialWorkspace?: WorkspaceProjectRecord | null;\n};\n\nfunction PreviewShell({\n locale,\n onLocaleChange,\n children,\n}: {\n locale: Locale | null;\n onLocaleChange: (locale: Locale) => void;\n children: ReactNode;\n}) {\n if (typeof document !== \"undefined\") {\n document.documentElement.classList.remove(\"dark\");\n document.documentElement.classList.add(\"light\");\n document.documentElement.dataset.theme = \"light\";\n }\n\n return (\n <I18nProvider locale={locale} onLocaleChange={onLocaleChange}>\n <div\n className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n data-theme=\"light\"\n >\n {children}\n </div>\n </I18nProvider>\n );\n}\n\nexport function App({\n className,\n initialZoom,\n defaultTheme = \"dark\",\n locale = null,\n previewSearch,\n preview = false,\n initialWorkspace = null,\n}: AbuilderAppProps) {\n const [localeState, setLocaleState] = useState<Locale | null>(locale);\n const effectiveLocale = locale ?? localeState;\n\n const search =\n previewSearch ??\n (typeof window !== \"undefined\" ? window.location.search : \"\");\n\n const previewParams = useMemo(\n () => parseOnlinePreviewSearchParams(search),\n [search]\n );\n\n if (preview) {\n return (\n <PreviewShell locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ReactViewOnlinePreview\n workspace={initialWorkspace}\n projectId={initialWorkspace?.id}\n />\n </PreviewShell>\n );\n }\n\n if (previewParams) {\n return (\n <PreviewShell locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ReactViewOnlinePreview\n projectId={previewParams.projectId}\n previewInstanceId={previewParams.previewInstanceId}\n />\n </PreviewShell>\n );\n }\n\n return (\n <I18nProvider locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n <ReactViewPanel\n className={className}\n initialZoom={initialZoom}\n initialWorkspace={initialWorkspace}\n />\n </ThemeProvider>\n </I18nProvider>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arronqzy/abuilder",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.17",
|
|
4
4
|
"description": "Abuilder 可视化编辑器 — 安装后即可通过 <App /> 渲染完整应用",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"./styles.css": "./dist/styles.css"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@arronqzy/blueprint-dsl": "1.0.
|
|
26
|
+
"@arronqzy/blueprint-dsl": "1.0.9",
|
|
27
27
|
"@arronqzy/i18n": "0.1.7",
|
|
28
|
-
"@arronqzy/react-
|
|
29
|
-
"@arronqzy/react-
|
|
28
|
+
"@arronqzy/react-blueprint": "1.0.10",
|
|
29
|
+
"@arronqzy/react-view": "1.0.17",
|
|
30
30
|
"@arronqzy/rx-store": "1.0.5",
|
|
31
31
|
"@arronqzy/ui": "1.0.6"
|
|
32
32
|
},
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"postcss-import": "^16.1.0",
|
|
44
44
|
"tsup": "^8.4.0",
|
|
45
45
|
"typescript": "^5.5.4",
|
|
46
|
-
"@arronqzy/
|
|
47
|
-
"@arronqzy/
|
|
46
|
+
"@arronqzy/eslint-config": "0.0.0",
|
|
47
|
+
"@arronqzy/typescript-config": "1.0.0"
|
|
48
48
|
},
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|