@arronqzy/abuilder 1.1.20 → 1.1.22
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 +48 -4
- package/dist/index.cjs +40 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -3
- package/dist/index.d.ts +10 -3
- package/dist/index.js +9 -5
- package/dist/index.js.map +1 -1
- package/dist/styles.css +45 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -36,9 +36,10 @@ createRoot(document.getElementById("root")!).render(<App />);
|
|
|
36
36
|
| `initialZoom` | 初始画布缩放 | `1` |
|
|
37
37
|
| `defaultTheme` | 编辑器主题 `"dark"` / `"light"` | `"dark"` |
|
|
38
38
|
| `locale` | 界面语言 `"zh-CN"` / `"en-US"`；省略则按 localStorage / 浏览器语言 | — |
|
|
39
|
+
| `nameSpace` | 隔离 IndexedDB / 缓存；同一页面多个 App 传入不同值 | — |
|
|
39
40
|
| `previewSearch` | 在线预览 URL 查询串；含 `?preview=online&projectId=...` 时进入预览 | `window.location.search` |
|
|
40
41
|
| `preview` | `true` 为预览页，`false` 为编辑面板 | `false` |
|
|
41
|
-
| `initialWorkspace` |
|
|
42
|
+
| `initialWorkspace` | 完整工作区数据；空则首次渲染空白，不会自动打开 IndexedDB 记录 | — |
|
|
42
43
|
|
|
43
44
|
```tsx
|
|
44
45
|
<App
|
|
@@ -67,12 +68,14 @@ createRoot(document.getElementById("root")!).render(<App />);
|
|
|
67
68
|
|
|
68
69
|
### 在线预览（URL）
|
|
69
70
|
|
|
70
|
-
URL 带 `?preview=online&projectId=<工作区ID>` 时自动进入预览模式（从 IndexedDB
|
|
71
|
+
URL 带 `?preview=online&projectId=<工作区ID>` 时自动进入预览模式（从 IndexedDB 加载）。若编辑器传了 `nameSpace`，预览 URL 会带 `ns=`，预览页用同一命名空间读库：
|
|
71
72
|
|
|
72
73
|
```tsx
|
|
73
|
-
<App previewSearch="?preview=online&projectId=xxx" />
|
|
74
|
+
<App previewSearch="?preview=online&projectId=xxx&ns=my-app" />
|
|
74
75
|
```
|
|
75
76
|
|
|
77
|
+
同一页面挂多个编辑器时，给每个 App 不同的 `nameSpace`，工作区 / 蓝图库 / 预览缓存不会互相覆盖。不传或空字符串保持原来的全局库名。
|
|
78
|
+
|
|
76
79
|
### 外部持久化完整流程
|
|
77
80
|
|
|
78
81
|
```tsx
|
|
@@ -160,6 +163,42 @@ syncSub.unsubscribe();
|
|
|
160
163
|
|
|
161
164
|
也可使用事件名字符串订阅，例如 `addEventSubscription("workspace:add", callback)`。
|
|
162
165
|
|
|
166
|
+
### 校验 / 解析工作区数据
|
|
167
|
+
|
|
168
|
+
把后端或文件里的 JSON 交给 `App` 之前：
|
|
169
|
+
|
|
170
|
+
- `validate*`：只回答能不能用，不改数据。
|
|
171
|
+
- `parseWorkspaceData`：校验通过后补齐 `id` / 时间戳 / 空字段，返回的 `value` 可直接作为 `initialWorkspace`。
|
|
172
|
+
- `createEmptyWorkspace`：构造一份形状正确的空工作区，不必自己猜字段。
|
|
173
|
+
|
|
174
|
+
```ts
|
|
175
|
+
import {
|
|
176
|
+
validateViewData,
|
|
177
|
+
validateBlueprintData,
|
|
178
|
+
validateWorkspaceData,
|
|
179
|
+
parseWorkspaceData,
|
|
180
|
+
createEmptyWorkspace,
|
|
181
|
+
createWorkspaceProjectId,
|
|
182
|
+
} from "@arronqzy/abuilder";
|
|
183
|
+
|
|
184
|
+
validateViewData(workspace.panelState); // { ok: true } 或 { ok: false, error: "invalid-view-data" }
|
|
185
|
+
validateBlueprintData(workspace.blueprintDocument);
|
|
186
|
+
validateWorkspaceData(workspace); // 同时检查视图 + 蓝图，结果里带 `view` / `blueprint`
|
|
187
|
+
|
|
188
|
+
const parsed = parseWorkspaceData(jsonFromBackend);
|
|
189
|
+
if (parsed.ok && parsed.value) {
|
|
190
|
+
// <App initialWorkspace={parsed.value} />
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
const blank = createEmptyWorkspace({ name: "未命名", id: createWorkspaceProjectId() });
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
也可把完整工作区对象传给 `validateViewData` / `parseViewData`（读 `panelState`）和 `validateBlueprintData` / `parseBlueprintData`（读 `blueprintDocument`）。只校验视图或只校验蓝图时用这两套，不要用 `parseWorkspaceData`（它要求两边都合法）。
|
|
197
|
+
|
|
198
|
+
`initialWorkspace` 为空（不传 / `null`）时，编辑器首次渲染空画布和空蓝图，**不会**自动选中 IndexedDB 里的第一条工作区。侧栏仍可列出已保存项目，需用户手动打开。传入的工作区会按这份数据完整显示。
|
|
199
|
+
|
|
200
|
+
IndexedDB 的 list / get / put / delete **不对外导出**。那是编辑器自己的浏览器缓存，和宿主后端双写会打架。宿主应订阅 `workspace:add` / `workspace:sync` 写入自己的存储，再用 `parseWorkspaceData` + `initialWorkspace` 灌回来。同一页多个编辑器用 `nameSpace` 隔离这份缓存。
|
|
201
|
+
|
|
163
202
|
### 获取预览快照
|
|
164
203
|
|
|
165
204
|
```ts
|
|
@@ -181,7 +220,7 @@ const thumbnail = await getPreviewSnapshot({
|
|
|
181
220
|
| `quality` | JPEG 质量 0–1 | `0.92` |
|
|
182
221
|
| `backgroundColor` | 背景色 | `"#ffffff"` |
|
|
183
222
|
|
|
184
|
-
需在 `App` / `ReactViewPanel` 或在线预览页已渲染且画布有内容时调用。
|
|
223
|
+
需在 `App` / `ReactViewPanel` 或在线预览页已渲染且画布有内容时调用。Vue 包 `@arronqzy/abuilder-vue` **没有**对等实现，不要从那边找同名导出。
|
|
185
224
|
|
|
186
225
|
### 高级导出
|
|
187
226
|
|
|
@@ -194,6 +233,9 @@ import {
|
|
|
194
233
|
addEventSubscription,
|
|
195
234
|
AbuilderEvents,
|
|
196
235
|
getPreviewSnapshot,
|
|
236
|
+
parseWorkspaceData,
|
|
237
|
+
createEmptyWorkspace,
|
|
238
|
+
createWorkspaceProjectId,
|
|
197
239
|
} from "@arronqzy/abuilder";
|
|
198
240
|
|
|
199
241
|
import type {
|
|
@@ -201,6 +243,8 @@ import type {
|
|
|
201
243
|
WorkspaceProjectRecord,
|
|
202
244
|
AbuilderEventName,
|
|
203
245
|
GetPreviewSnapshotOptions,
|
|
246
|
+
ParseCheckResult,
|
|
247
|
+
WorkspaceParseCheckResult,
|
|
204
248
|
} from "@arronqzy/abuilder";
|
|
205
249
|
```
|
|
206
250
|
|
package/dist/index.cjs
CHANGED
|
@@ -28,7 +28,8 @@ function App({
|
|
|
28
28
|
locale = null,
|
|
29
29
|
previewSearch,
|
|
30
30
|
preview = false,
|
|
31
|
-
initialWorkspace = null
|
|
31
|
+
initialWorkspace = null,
|
|
32
|
+
nameSpace = null
|
|
32
33
|
}) {
|
|
33
34
|
const [localeState, setLocaleState] = react.useState(locale);
|
|
34
35
|
const effectiveLocale = locale ?? localeState;
|
|
@@ -44,7 +45,8 @@ function App({
|
|
|
44
45
|
workspace: initialWorkspace,
|
|
45
46
|
projectId: initialWorkspace?.id,
|
|
46
47
|
locale: effectiveLocale,
|
|
47
|
-
onLocaleChange: setLocaleState
|
|
48
|
+
onLocaleChange: setLocaleState,
|
|
49
|
+
nameSpace
|
|
48
50
|
}
|
|
49
51
|
) });
|
|
50
52
|
}
|
|
@@ -55,7 +57,8 @@ function App({
|
|
|
55
57
|
projectId: previewParams.projectId,
|
|
56
58
|
previewInstanceId: previewParams.previewInstanceId,
|
|
57
59
|
locale: effectiveLocale,
|
|
58
|
-
onLocaleChange: setLocaleState
|
|
60
|
+
onLocaleChange: setLocaleState,
|
|
61
|
+
nameSpace: previewParams.nameSpace ?? nameSpace
|
|
59
62
|
}
|
|
60
63
|
) });
|
|
61
64
|
}
|
|
@@ -66,7 +69,8 @@ function App({
|
|
|
66
69
|
initialZoom,
|
|
67
70
|
initialWorkspace,
|
|
68
71
|
locale: effectiveLocale,
|
|
69
|
-
onLocaleChange: setLocaleState
|
|
72
|
+
onLocaleChange: setLocaleState,
|
|
73
|
+
nameSpace
|
|
70
74
|
}
|
|
71
75
|
) });
|
|
72
76
|
}
|
|
@@ -91,14 +95,46 @@ Object.defineProperty(exports, "addEventSubscription", {
|
|
|
91
95
|
enumerable: true,
|
|
92
96
|
get: function () { return reactView.addEventSubscription; }
|
|
93
97
|
});
|
|
98
|
+
Object.defineProperty(exports, "createEmptyWorkspace", {
|
|
99
|
+
enumerable: true,
|
|
100
|
+
get: function () { return reactView.createEmptyWorkspace; }
|
|
101
|
+
});
|
|
102
|
+
Object.defineProperty(exports, "createWorkspaceProjectId", {
|
|
103
|
+
enumerable: true,
|
|
104
|
+
get: function () { return reactView.createWorkspaceProjectId; }
|
|
105
|
+
});
|
|
94
106
|
Object.defineProperty(exports, "getPreviewSnapshot", {
|
|
95
107
|
enumerable: true,
|
|
96
108
|
get: function () { return reactView.getPreviewSnapshot; }
|
|
97
109
|
});
|
|
110
|
+
Object.defineProperty(exports, "parseBlueprintData", {
|
|
111
|
+
enumerable: true,
|
|
112
|
+
get: function () { return reactView.parseBlueprintData; }
|
|
113
|
+
});
|
|
98
114
|
Object.defineProperty(exports, "parseOnlinePreviewSearchParams", {
|
|
99
115
|
enumerable: true,
|
|
100
116
|
get: function () { return reactView.parseOnlinePreviewSearchParams; }
|
|
101
117
|
});
|
|
118
|
+
Object.defineProperty(exports, "parseViewData", {
|
|
119
|
+
enumerable: true,
|
|
120
|
+
get: function () { return reactView.parseViewData; }
|
|
121
|
+
});
|
|
122
|
+
Object.defineProperty(exports, "parseWorkspaceData", {
|
|
123
|
+
enumerable: true,
|
|
124
|
+
get: function () { return reactView.parseWorkspaceData; }
|
|
125
|
+
});
|
|
126
|
+
Object.defineProperty(exports, "validateBlueprintData", {
|
|
127
|
+
enumerable: true,
|
|
128
|
+
get: function () { return reactView.validateBlueprintData; }
|
|
129
|
+
});
|
|
130
|
+
Object.defineProperty(exports, "validateViewData", {
|
|
131
|
+
enumerable: true,
|
|
132
|
+
get: function () { return reactView.validateViewData; }
|
|
133
|
+
});
|
|
134
|
+
Object.defineProperty(exports, "validateWorkspaceData", {
|
|
135
|
+
enumerable: true,
|
|
136
|
+
get: function () { return reactView.validateWorkspaceData; }
|
|
137
|
+
});
|
|
102
138
|
exports.App = App;
|
|
103
139
|
//# sourceMappingURL=index.cjs.map
|
|
104
140
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/App.tsx"],"names":["jsx","useState","useMemo","parseOnlinePreviewSearchParams","ReactViewOnlinePreview","ThemeProvider","ReactViewPanel"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/App.tsx"],"names":["jsx","useState","useMemo","parseOnlinePreviewSearchParams","ReactViewOnlinePreview","ThemeProvider","ReactViewPanel"],"mappings":";;;;;;;;AA2CA,SAAS,YAAA,CAAa,EAAE,QAAA,EAAqC,EAAA;AAC3D,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;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,mDAAA;AAAA,MACV,YAAW,EAAA,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;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,IAAA;AAAA,EACnB,SAAY,GAAA;AACd,CAAqB,EAAA;AACnB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,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,sCACG,YACC,EAAA,EAAA,QAAA,kBAAAH,cAAA;AAAA,MAACI,gCAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,gBAAA;AAAA,QACX,WAAW,gBAAkB,EAAA,EAAA;AAAA,QAC7B,MAAQ,EAAA,eAAA;AAAA,QACR,cAAgB,EAAA,cAAA;AAAA,QAChB;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,aAAe,EAAA;AACjB,IAAA,sCACG,YACC,EAAA,EAAA,QAAA,kBAAAJ,cAAA;AAAA,MAACI,gCAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAc,CAAA,SAAA;AAAA,QACzB,mBAAmB,aAAc,CAAA,iBAAA;AAAA,QACjC,MAAQ,EAAA,eAAA;AAAA,QACR,cAAgB,EAAA,cAAA;AAAA,QAChB,SAAA,EAAW,cAAc,SAAa,IAAA;AAAA;AAAA,KAE1C,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACGJ,cAAA,CAAAK,gBAAA,EAAA,EAAc,YAA4B,EAAA,YAAA,EAAc,KACvD,EAAA,QAAA,kBAAAL,cAAA;AAAA,IAACM,wBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA;AAAA,MACA,gBAAA;AAAA,MACA,MAAQ,EAAA,eAAA;AAAA,MACR,cAAgB,EAAA,cAAA;AAAA,MAChB;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ","file":"index.cjs","sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\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 * 省略或空：首次显示空画布 / 空蓝图，不会自动选中 IndexedDB 中的工作区。\n */\n initialWorkspace?: WorkspaceProjectRecord | null;\n /**\n * 隔离 IndexedDB / localStorage / BroadcastChannel。\n * 同一页面挂多个 App 时传入不同值，避免工作区、蓝图库、预览缓存互相覆盖。\n * 省略或空字符串保持历史全局库名。\n */\n nameSpace?: string | null;\n};\n\nfunction PreviewShell({ children }: { children: ReactNode }) {\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 <div\n className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n data-theme=\"light\"\n >\n {children}\n </div>\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 nameSpace = 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>\n <ReactViewOnlinePreview\n workspace={initialWorkspace}\n projectId={initialWorkspace?.id}\n locale={effectiveLocale}\n onLocaleChange={setLocaleState}\n nameSpace={nameSpace}\n />\n </PreviewShell>\n );\n }\n\n if (previewParams) {\n return (\n <PreviewShell>\n <ReactViewOnlinePreview\n projectId={previewParams.projectId}\n previewInstanceId={previewParams.previewInstanceId}\n locale={effectiveLocale}\n onLocaleChange={setLocaleState}\n nameSpace={previewParams.nameSpace ?? nameSpace}\n />\n </PreviewShell>\n );\n }\n\n return (\n <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n <ReactViewPanel\n className={className}\n initialZoom={initialZoom}\n initialWorkspace={initialWorkspace}\n locale={effectiveLocale}\n onLocaleChange={setLocaleState}\n nameSpace={nameSpace}\n />\n </ThemeProvider>\n );\n}\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -2,7 +2,7 @@ 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, I18nProvider, ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, WorkspaceAddEventPayload, WorkspaceData, WorkspaceProjectRecord, WorkspaceSyncEventPayload, addEventSubscription, getPreviewSnapshot, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
5
|
+
export { AbuilderEventName, AbuilderEventPayloadMap, AbuilderEvents, GetPreviewSnapshotOptions, I18nProvider, ParseCheckResult, ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, WorkspaceAddEventPayload, WorkspaceData, WorkspaceParseCheckResult, WorkspaceProjectRecord, WorkspaceSyncEventPayload, addEventSubscription, createEmptyWorkspace, createWorkspaceProjectId, getPreviewSnapshot, parseBlueprintData, parseOnlinePreviewSearchParams, parseViewData, parseWorkspaceData, validateBlueprintData, validateViewData, validateWorkspaceData } from '@arronqzy/react-view';
|
|
6
6
|
|
|
7
7
|
type AbuilderAppProps = {
|
|
8
8
|
className?: string;
|
|
@@ -25,10 +25,17 @@ type AbuilderAppProps = {
|
|
|
25
25
|
preview?: boolean;
|
|
26
26
|
/**
|
|
27
27
|
* 外部传入的完整工作区数据（面板 + 蓝图）。
|
|
28
|
-
*
|
|
28
|
+
* 编辑模式：挂载后按这份数据完整渲染；预览模式：直接渲染预览页。
|
|
29
|
+
* 省略或空：首次显示空画布 / 空蓝图，不会自动选中 IndexedDB 中的工作区。
|
|
29
30
|
*/
|
|
30
31
|
initialWorkspace?: WorkspaceProjectRecord | null;
|
|
32
|
+
/**
|
|
33
|
+
* 隔离 IndexedDB / localStorage / BroadcastChannel。
|
|
34
|
+
* 同一页面挂多个 App 时传入不同值，避免工作区、蓝图库、预览缓存互相覆盖。
|
|
35
|
+
* 省略或空字符串保持历史全局库名。
|
|
36
|
+
*/
|
|
37
|
+
nameSpace?: string | null;
|
|
31
38
|
};
|
|
32
|
-
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, preview, initialWorkspace, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, preview, initialWorkspace, nameSpace, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
33
40
|
|
|
34
41
|
export { type AbuilderAppProps, App };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ 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, I18nProvider, ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, WorkspaceAddEventPayload, WorkspaceData, WorkspaceProjectRecord, WorkspaceSyncEventPayload, addEventSubscription, getPreviewSnapshot, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
5
|
+
export { AbuilderEventName, AbuilderEventPayloadMap, AbuilderEvents, GetPreviewSnapshotOptions, I18nProvider, ParseCheckResult, ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, WorkspaceAddEventPayload, WorkspaceData, WorkspaceParseCheckResult, WorkspaceProjectRecord, WorkspaceSyncEventPayload, addEventSubscription, createEmptyWorkspace, createWorkspaceProjectId, getPreviewSnapshot, parseBlueprintData, parseOnlinePreviewSearchParams, parseViewData, parseWorkspaceData, validateBlueprintData, validateViewData, validateWorkspaceData } from '@arronqzy/react-view';
|
|
6
6
|
|
|
7
7
|
type AbuilderAppProps = {
|
|
8
8
|
className?: string;
|
|
@@ -25,10 +25,17 @@ type AbuilderAppProps = {
|
|
|
25
25
|
preview?: boolean;
|
|
26
26
|
/**
|
|
27
27
|
* 外部传入的完整工作区数据（面板 + 蓝图）。
|
|
28
|
-
*
|
|
28
|
+
* 编辑模式：挂载后按这份数据完整渲染；预览模式：直接渲染预览页。
|
|
29
|
+
* 省略或空：首次显示空画布 / 空蓝图，不会自动选中 IndexedDB 中的工作区。
|
|
29
30
|
*/
|
|
30
31
|
initialWorkspace?: WorkspaceProjectRecord | null;
|
|
32
|
+
/**
|
|
33
|
+
* 隔离 IndexedDB / localStorage / BroadcastChannel。
|
|
34
|
+
* 同一页面挂多个 App 时传入不同值，避免工作区、蓝图库、预览缓存互相覆盖。
|
|
35
|
+
* 省略或空字符串保持历史全局库名。
|
|
36
|
+
*/
|
|
37
|
+
nameSpace?: string | null;
|
|
31
38
|
};
|
|
32
|
-
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, preview, initialWorkspace, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, preview, initialWorkspace, nameSpace, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
33
40
|
|
|
34
41
|
export { type AbuilderAppProps, App };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState, useMemo } from 'react';
|
|
2
2
|
import { ThemeProvider } from '@arronqzy/ui';
|
|
3
3
|
import { parseOnlinePreviewSearchParams, ReactViewOnlinePreview, ReactViewPanel } from '@arronqzy/react-view';
|
|
4
|
-
export { AbuilderEvents, I18nProvider, ReactViewOnlinePreview, ReactViewPanel, addEventSubscription, getPreviewSnapshot, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
4
|
+
export { AbuilderEvents, I18nProvider, ReactViewOnlinePreview, ReactViewPanel, addEventSubscription, createEmptyWorkspace, createWorkspaceProjectId, getPreviewSnapshot, parseBlueprintData, parseOnlinePreviewSearchParams, parseViewData, parseWorkspaceData, validateBlueprintData, validateViewData, validateWorkspaceData } from '@arronqzy/react-view';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
// src/App.tsx
|
|
@@ -27,7 +27,8 @@ function App({
|
|
|
27
27
|
locale = null,
|
|
28
28
|
previewSearch,
|
|
29
29
|
preview = false,
|
|
30
|
-
initialWorkspace = null
|
|
30
|
+
initialWorkspace = null,
|
|
31
|
+
nameSpace = null
|
|
31
32
|
}) {
|
|
32
33
|
const [localeState, setLocaleState] = useState(locale);
|
|
33
34
|
const effectiveLocale = locale ?? localeState;
|
|
@@ -43,7 +44,8 @@ function App({
|
|
|
43
44
|
workspace: initialWorkspace,
|
|
44
45
|
projectId: initialWorkspace?.id,
|
|
45
46
|
locale: effectiveLocale,
|
|
46
|
-
onLocaleChange: setLocaleState
|
|
47
|
+
onLocaleChange: setLocaleState,
|
|
48
|
+
nameSpace
|
|
47
49
|
}
|
|
48
50
|
) });
|
|
49
51
|
}
|
|
@@ -54,7 +56,8 @@ function App({
|
|
|
54
56
|
projectId: previewParams.projectId,
|
|
55
57
|
previewInstanceId: previewParams.previewInstanceId,
|
|
56
58
|
locale: effectiveLocale,
|
|
57
|
-
onLocaleChange: setLocaleState
|
|
59
|
+
onLocaleChange: setLocaleState,
|
|
60
|
+
nameSpace: previewParams.nameSpace ?? nameSpace
|
|
58
61
|
}
|
|
59
62
|
) });
|
|
60
63
|
}
|
|
@@ -65,7 +68,8 @@ function App({
|
|
|
65
68
|
initialZoom,
|
|
66
69
|
initialWorkspace,
|
|
67
70
|
locale: effectiveLocale,
|
|
68
|
-
onLocaleChange: setLocaleState
|
|
71
|
+
onLocaleChange: setLocaleState,
|
|
72
|
+
nameSpace
|
|
69
73
|
}
|
|
70
74
|
) });
|
|
71
75
|
}
|
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":";;;;;;;AA2CA,SAAS,YAAA,CAAa,EAAE,QAAA,EAAqC,EAAA;AAC3D,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;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,mDAAA;AAAA,MACV,YAAW,EAAA,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;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,IAAA;AAAA,EACnB,SAAY,GAAA;AACd,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,2BACG,YACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,sBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,gBAAA;AAAA,QACX,WAAW,gBAAkB,EAAA,EAAA;AAAA,QAC7B,MAAQ,EAAA,eAAA;AAAA,QACR,cAAgB,EAAA,cAAA;AAAA,QAChB;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,aAAe,EAAA;AACjB,IAAA,2BACG,YACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,sBAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAc,CAAA,SAAA;AAAA,QACzB,mBAAmB,aAAc,CAAA,iBAAA;AAAA,QACjC,MAAQ,EAAA,eAAA;AAAA,QACR,cAAgB,EAAA,cAAA;AAAA,QAChB,SAAA,EAAW,cAAc,SAAa,IAAA;AAAA;AAAA,KAE1C,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,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,gBAAA;AAAA,MACA,MAAQ,EAAA,eAAA;AAAA,MACR,cAAgB,EAAA,cAAA;AAAA,MAChB;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ","file":"index.js","sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\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 * 省略或空：首次显示空画布 / 空蓝图，不会自动选中 IndexedDB 中的工作区。\n */\n initialWorkspace?: WorkspaceProjectRecord | null;\n /**\n * 隔离 IndexedDB / localStorage / BroadcastChannel。\n * 同一页面挂多个 App 时传入不同值，避免工作区、蓝图库、预览缓存互相覆盖。\n * 省略或空字符串保持历史全局库名。\n */\n nameSpace?: string | null;\n};\n\nfunction PreviewShell({ children }: { children: ReactNode }) {\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 <div\n className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n data-theme=\"light\"\n >\n {children}\n </div>\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 nameSpace = 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>\n <ReactViewOnlinePreview\n workspace={initialWorkspace}\n projectId={initialWorkspace?.id}\n locale={effectiveLocale}\n onLocaleChange={setLocaleState}\n nameSpace={nameSpace}\n />\n </PreviewShell>\n );\n }\n\n if (previewParams) {\n return (\n <PreviewShell>\n <ReactViewOnlinePreview\n projectId={previewParams.projectId}\n previewInstanceId={previewParams.previewInstanceId}\n locale={effectiveLocale}\n onLocaleChange={setLocaleState}\n nameSpace={previewParams.nameSpace ?? nameSpace}\n />\n </PreviewShell>\n );\n }\n\n return (\n <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n <ReactViewPanel\n className={className}\n initialZoom={initialZoom}\n initialWorkspace={initialWorkspace}\n locale={effectiveLocale}\n onLocaleChange={setLocaleState}\n nameSpace={nameSpace}\n />\n </ThemeProvider>\n );\n}\n"]}
|
package/dist/styles.css
CHANGED
|
@@ -3832,6 +3832,10 @@ video {
|
|
|
3832
3832
|
inset: 0px;
|
|
3833
3833
|
}
|
|
3834
3834
|
|
|
3835
|
+
.inset-1\.5 {
|
|
3836
|
+
inset: 0.375rem;
|
|
3837
|
+
}
|
|
3838
|
+
|
|
3835
3839
|
.inset-2 {
|
|
3836
3840
|
inset: 0.5rem;
|
|
3837
3841
|
}
|
|
@@ -3861,6 +3865,10 @@ video {
|
|
|
3861
3865
|
left: 0.125rem;
|
|
3862
3866
|
}
|
|
3863
3867
|
|
|
3868
|
+
.left-1 {
|
|
3869
|
+
left: 0.25rem;
|
|
3870
|
+
}
|
|
3871
|
+
|
|
3864
3872
|
.left-1\/2 {
|
|
3865
3873
|
left: 50%;
|
|
3866
3874
|
}
|
|
@@ -3869,6 +3877,10 @@ video {
|
|
|
3869
3877
|
left: 0.5rem;
|
|
3870
3878
|
}
|
|
3871
3879
|
|
|
3880
|
+
.left-6 {
|
|
3881
|
+
left: 1.5rem;
|
|
3882
|
+
}
|
|
3883
|
+
|
|
3872
3884
|
.left-\[var\(--rv-ruler-size\)\] {
|
|
3873
3885
|
left: var(--rv-ruler-size);
|
|
3874
3886
|
}
|
|
@@ -3893,10 +3905,18 @@ video {
|
|
|
3893
3905
|
top: 0.125rem;
|
|
3894
3906
|
}
|
|
3895
3907
|
|
|
3908
|
+
.top-1 {
|
|
3909
|
+
top: 0.25rem;
|
|
3910
|
+
}
|
|
3911
|
+
|
|
3896
3912
|
.top-2 {
|
|
3897
3913
|
top: 0.5rem;
|
|
3898
3914
|
}
|
|
3899
3915
|
|
|
3916
|
+
.top-4 {
|
|
3917
|
+
top: 1rem;
|
|
3918
|
+
}
|
|
3919
|
+
|
|
3900
3920
|
.top-\[calc\(100\%\+6px\)\] {
|
|
3901
3921
|
top: calc(100% + 6px);
|
|
3902
3922
|
}
|
|
@@ -4729,6 +4749,10 @@ video {
|
|
|
4729
4749
|
border-radius: 1rem;
|
|
4730
4750
|
}
|
|
4731
4751
|
|
|
4752
|
+
.rounded-\[2px\] {
|
|
4753
|
+
border-radius: 2px;
|
|
4754
|
+
}
|
|
4755
|
+
|
|
4732
4756
|
.rounded-full {
|
|
4733
4757
|
border-radius: 9999px;
|
|
4734
4758
|
}
|
|
@@ -4749,6 +4773,15 @@ video {
|
|
|
4749
4773
|
border-radius: 0.75rem;
|
|
4750
4774
|
}
|
|
4751
4775
|
|
|
4776
|
+
.rounded-l {
|
|
4777
|
+
border-top-left-radius: 0.25rem;
|
|
4778
|
+
border-bottom-left-radius: 0.25rem;
|
|
4779
|
+
}
|
|
4780
|
+
|
|
4781
|
+
.rounded-tl {
|
|
4782
|
+
border-top-left-radius: 0.25rem;
|
|
4783
|
+
}
|
|
4784
|
+
|
|
4752
4785
|
.border {
|
|
4753
4786
|
border-width: 1px;
|
|
4754
4787
|
}
|
|
@@ -5106,10 +5139,22 @@ video {
|
|
|
5106
5139
|
background-color: hsl(var(--primary) / 0.15);
|
|
5107
5140
|
}
|
|
5108
5141
|
|
|
5142
|
+
.bg-primary\/30 {
|
|
5143
|
+
background-color: hsl(var(--primary) / 0.3);
|
|
5144
|
+
}
|
|
5145
|
+
|
|
5109
5146
|
.bg-primary\/35 {
|
|
5110
5147
|
background-color: hsl(var(--primary) / 0.35);
|
|
5111
5148
|
}
|
|
5112
5149
|
|
|
5150
|
+
.bg-primary\/40 {
|
|
5151
|
+
background-color: hsl(var(--primary) / 0.4);
|
|
5152
|
+
}
|
|
5153
|
+
|
|
5154
|
+
.bg-primary\/45 {
|
|
5155
|
+
background-color: hsl(var(--primary) / 0.45);
|
|
5156
|
+
}
|
|
5157
|
+
|
|
5113
5158
|
.bg-primary\/5 {
|
|
5114
5159
|
background-color: hsl(var(--primary) / 0.05);
|
|
5115
5160
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arronqzy/abuilder",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.22",
|
|
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.
|
|
27
|
-
"@arronqzy/i18n": "0.1.
|
|
28
|
-
"@arronqzy/react-blueprint": "1.0.
|
|
29
|
-
"@arronqzy/react-view": "1.0.
|
|
26
|
+
"@arronqzy/blueprint-dsl": "1.0.11",
|
|
27
|
+
"@arronqzy/i18n": "0.1.8",
|
|
28
|
+
"@arronqzy/react-blueprint": "1.0.13",
|
|
29
|
+
"@arronqzy/react-view": "1.0.22",
|
|
30
30
|
"@arronqzy/rx-store": "1.0.5",
|
|
31
31
|
"@arronqzy/ui": "1.0.6"
|
|
32
32
|
},
|