@xdmp-open/ui-lowcode 0.0.1 → 0.0.2
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/CHANGELOG.md +7 -7
- package/README.md +99 -0
- package/package.json +10 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
# @xdmp-open/ui-lowcode
|
|
2
2
|
|
|
3
|
-
## 0.
|
|
3
|
+
## 0.0.2
|
|
4
4
|
|
|
5
|
-
###
|
|
5
|
+
### 文档
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
- FormDef IR JSON 导入/导出（`schemaToIr` / `parseFormDefJson`）
|
|
7
|
+
- 补 LICENSE（Apache-2.0）与 README.md，对齐其它 ui 包
|
|
9
8
|
|
|
10
|
-
## 0.1
|
|
9
|
+
## 0.0.1
|
|
11
10
|
|
|
12
11
|
### 新增
|
|
13
12
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
13
|
+
- 薄设计器 `FormDesigner` / 路由页 `LowcodeFormDesignerPage`（控件板 + 画布预览 + 属性面板）
|
|
14
|
+
- FormDef IR JSON 导入/导出（`schemaToIr` / `parseFormDefJson`）
|
|
15
|
+
- 初版 `FormRenderer` 消费 FormDef preview schema（`controlType` 经 `@xdmp-open/ui-shared` Control Registry 映射）
|
package/README.md
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# @xdmp-open/ui-lowcode
|
|
2
|
+
|
|
3
|
+
XDMP 低代码（LCDP）FormDef 预览渲染与表单薄设计器（Vue 3 + Element Plus）。
|
|
4
|
+
|
|
5
|
+
消费后端 `lcdpPreview` 返回的 preview schema，或本地编辑 FormDef IR（`lcdp.ir/v1`）。控件映射经 `@xdmp-open/ui-shared` Control Registry（`resolveControl`），**不在 IR 中写入 Element/Vben/shadcn 专属 props**。
|
|
6
|
+
|
|
7
|
+
`vue`、`element-plus`、`@xdmp-open/ui-shared`（`^0.1.3`）为 peerDependencies。
|
|
8
|
+
|
|
9
|
+
## 安装
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pnpm add @xdmp-open/ui-lowcode @xdmp-open/ui-shared
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
宿主须同时声明 `@xdmp-open/ui-shared@^0.1.3`；`0.1.2` 缺少 `resolveControl`，npm 模式生产构建会失败。
|
|
16
|
+
|
|
17
|
+
## 用法
|
|
18
|
+
|
|
19
|
+
### 样式
|
|
20
|
+
|
|
21
|
+
在 `main.ts` 中，于 Element Plus 与 `ui-shared` 样式之后引入：
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import '@xdmp-open/ui-lowcode/style.css'
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 预览渲染
|
|
28
|
+
|
|
29
|
+
```vue
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { FormRenderer, type FormPreviewSchema } from '@xdmp-open/ui-lowcode'
|
|
32
|
+
|
|
33
|
+
const schema: FormPreviewSchema = {
|
|
34
|
+
name: 'demo-form',
|
|
35
|
+
moduleCode: 'demo',
|
|
36
|
+
fields: [
|
|
37
|
+
{ name: 'name', label: '名称', controlType: 'INPUT', required: true, span: 24 }
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<FormRenderer :schema="schema" />
|
|
44
|
+
</template>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### 薄设计器与宿主 shim
|
|
48
|
+
|
|
49
|
+
路由级页面导出 `LowcodeFormDesignerPage`；宿主保留菜单可解析的薄壳 re-export，例如：
|
|
50
|
+
|
|
51
|
+
```vue
|
|
52
|
+
<!-- views/lowcode/form-designer/index.vue -->
|
|
53
|
+
<script lang="ts">
|
|
54
|
+
export { LowcodeFormDesignerPage as default } from '@xdmp-open/ui-lowcode'
|
|
55
|
+
</script>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### FormDef IR 导入/导出
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import {
|
|
62
|
+
schemaToIr,
|
|
63
|
+
irToSchema,
|
|
64
|
+
parseFormDefJson,
|
|
65
|
+
type FormDefIrDocument
|
|
66
|
+
} from '@xdmp-open/ui-lowcode'
|
|
67
|
+
|
|
68
|
+
const ir: FormDefIrDocument = schemaToIr(schema)
|
|
69
|
+
const back = irToSchema(ir)
|
|
70
|
+
const fromFile = parseFormDefJson(jsonText) // 支持 IR 文档或裸 preview schema
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
典型后端流程：`lcdpFormValidate` → draft → publish → `lcdpPreview`。
|
|
74
|
+
|
|
75
|
+
## 导出清单
|
|
76
|
+
|
|
77
|
+
| 导出名 | 说明 |
|
|
78
|
+
| --- | --- |
|
|
79
|
+
| `FormRenderer` | 只读预览：schema → SearchForm + Control Registry |
|
|
80
|
+
| `FormDesigner` | 薄设计器（控件板 + 画布 + 属性面板） |
|
|
81
|
+
| `FormDesignerPage` / `LowcodeFormDesignerPage` | 带说明文案的设计器路由页 |
|
|
82
|
+
| `schemaToIr` / `irToSchema` / `parseFormDefJson` | FormDef IR ↔ preview schema |
|
|
83
|
+
| `FormPreviewSchema` / `FormDefIrDocument` 等 | TypeScript 类型 |
|
|
84
|
+
|
|
85
|
+
P1.5 Runtime 页（`AutoList` / `QueryForm` / `RuntimeForm`）与 `ui-lowcode-core` / adapter 分层尚未在本包交付；见平台 P1.5 设计规格。
|
|
86
|
+
|
|
87
|
+
## 宿主 Vite 约束
|
|
88
|
+
|
|
89
|
+
生产构建（未设置 `XDMP_PACKAGES_ROOT`）时，Vite `optimizeDeps.include` **须包含** `@xdmp-open/ui-lowcode` dist，与 `ui-shared` / `ui-admin` 一并预打包。完整约束见 [宿主 Vite 约束](../../docs/host-vite.md)。
|
|
90
|
+
|
|
91
|
+
本地联调 packages 源码：在宿主 `.env.local` 配置 `XDMP_PACKAGES_ROOT` 指向本 monorepo 根目录；**不要**在 `package.json` 使用 `link:`。
|
|
92
|
+
|
|
93
|
+
## 开发
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
pnpm build # vite lib mode + d.ts
|
|
97
|
+
pnpm test # vitest
|
|
98
|
+
pnpm typecheck # vue-tsc --noEmit
|
|
99
|
+
```
|
package/package.json
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xdmp-open/ui-lowcode",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "XDMP low-code FormRenderer / designer shell (Vue 3)",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "China Mobile IoT",
|
|
7
|
+
"homepage": "https://www.npmjs.com/package/@xdmp-open/ui-lowcode",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"xdmp",
|
|
10
|
+
"vue3",
|
|
11
|
+
"element-plus",
|
|
12
|
+
"lowcode",
|
|
13
|
+
"lcdp",
|
|
14
|
+
"ui"
|
|
15
|
+
],
|
|
7
16
|
"type": "module",
|
|
8
17
|
"publishConfig": {
|
|
9
18
|
"access": "public"
|