Skip to content

Commit 6141ae9

Browse files
u2bou2bo
u2bo
and
u2bo
authored
[app-platform] bugfix: 修复本地开发环境表单配置指导信息 #394 (#397)
* [app-platform] bugfix: 修复本地开发环境表单配置指导信息#395 * [app-platform] bugfix: 修复本地开发环境表单配置指导信息#394 * [app-platform] 移除template.zip二进制文件，调整为目录文件方式，增加模版文件说明 * [app-platform] 修正readme针对app-engine static resource path的配置说明 --------- Co-authored-by: u2bo <285077078@qq.com>
1 parent 1dda8aa commit 6141ae9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1827
-0
lines changed

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,22 @@ fit:
9090
- 'modelengine.fit'
9191
```
9292
93+
配置本地智能表单路径，首先创建目录`.\app-builder\smart_form` 此目录可根据实际情况修改，然后copy项目中的
94+
`example\app-demo\normal-form`及`smart-form`中的所有内容到上述目录，打包`template`目录内容`template.zip`
95+
并复制到`smart-form` 结果如下所示：
96+
```yml
97+
app-builder/
98+
├── smart_form/
99+
│ ├── 6befc536-7e6d-48b5-8dcb-1c4d04ca4e92
100+
│ ├── 17b732c9-5272-42a6-a79d-8d0334a8aa19
101+
│ ├── 7958d851-8062-49bd-b21e-d7372991c905
102+
│ ├── b6255699-2e4f-409f-a578-b87b7435e389
103+
│ ├── e85bd769-0212-4305-b56b-01e77faa14ff
104+
│ ├── temporary
105+
│ └── template.zip
106+
```
107+
108+
93109
加入数据库配置项，修改后的配置项如下所示：
94110

95111
```yml
@@ -111,6 +127,14 @@ fit:
111127
minIdle: ${midIdle} # 将 minIdle 替换为连接池的最小空闲连接数。
112128
maxActive: ${maxActive} # 将 maxActive 替换为数据库连接池的最大活动连接数。
113129
# 可根据具体需求，添加连接池所需配置项。
130+
app-engine:
131+
resource:
132+
path: ${localFormPath} # 配置本地的智能表单根路径，win下如 D:\\app-builder\\
133+
form:
134+
path-prefix: ${localFormPath} # 配置本地的智能表单根路径，win下如 D:\\app-builder\\
135+
136+
137+
114138
```
115139

116140
**启动命令**

‎examples/template/react模板/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎examples/template/react模板/.npmrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
strict-ssl=false
2+
package-lock=true
3+
registry=https://registry.npmjs.org/

‎examples/template/react模板/README.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# 自定义组件开发说明
2+
## 前提条件
3+
* 开发工具建议使用vscode， 基础安装要求建议node版本为18及以上, npm版本为10及以上。
4+
* React组件建议使用antd组件库，模板默认版本为4.24.13。
5+
6+
## 操作步骤
7+
### 约束条件
8+
上传的组件包需要为zip压缩包，解压后大小不能超过5M，包含且只能包含三个部分：
9+
* 表单代码打包的静态资源文件 build文件夹。
10+
* 表单的出入参配置文件 config.json。
11+
* 表单的预览图 form.jpg/form.png/form.jpeg 大小不能超过1M。
12+
## 开发组件代码
13+
### 创建文件
14+
* 用户在 /src/components文件夹下创建自己的组件文件，类型为.tsx。
15+
### 表单获取流程数据
16+
在流程中使用智能表单节点或结束节点选用表单时，可以将前序节点的输出作为表单初始化的数据使用。假设表单需要的数据结构为：
17+
```
18+
{
19+
"a": "你好",
20+
"b": "Demo1"
21+
}
22+
```
23+
在表单里使用如下代码：
24+
data就是由流程传输给表单的，格式为{“a": "", "b": ""}的json数据，可以使用这个数据来初始化表单。
25+
26+
通信过程为：
27+
1. 智能表单监听 `message` 消息后，发送消息通知流程，智能表单已经启动，可以接收流程数据。
28+
2. 流程接收到 `app-engine-form-ready` 消息后，发送流程数据给智能表单。
29+
30+
代码如下：
31+
```javascript
32+
window.addEventListener('message', handleMessage);
33+
window.parent.postMessage({ type: 'app-engine-form-ready', uniqueId }, '*');
34+
```
35+
注意：这里data的数据结构与config.json的入参配置一致。
36+
```
37+
const {data, terminateClick, resumingClick, restartClick} = useContext(DataContext);
38+
```
39+
### 表单调用内置接口
40+
平台提供了三个内置接口：继续对话（resumingClick），重新对话（restartClick），终止对话（terminateClick）。使用这几个内置接口，可以与流程进行交互。
41+
在表单里使用如下代码，可以以调用方法的形式使用内置接口。
42+
```
43+
const {data, terminateClick, resumingClick, restartClick} = useContext(DataContext);
44+
```
45+
1. 终止对话接口
46+
终止对话接口适用于配置在**智能表单**节点的表单，适用于用户希望在流程的中间过程中，想要终止本地对话的场景。具体的过程是：
47+
```
48+
应用流程进行到智能表单节点，流程暂停 ---> 用户与表单进行交互，触发终止对话接口 ---> 流程终止，对话结束
49+
```
50+
使用示例：
51+
```
52+
如果表单里有按钮用于触发终止对话：
53+
<Button onClick={onTerminateClick}>终止对话</Button>
54+
55+
调用终止对话接口:
56+
const onTerminateClick = () => {
57+
terminateClick({content: //字符串，终止对话后希望显示的文本});
58+
}
59+
如果希望点击终止对话后，显示的文本是"终止对话"
60+
terminateClick({content: "终止会话"});
61+
```
62+
**注意：在结束节点使用的表单如果调用终止对话接口，会出现错误。**
63+
2. 继续对话接口
64+
继续对话接口适用于配置在**智能表单**节点的表单，适用于用户希望在流程的中间过程使用表单，进行一次人工交互，交互结束后流程继续的场景。具体的过程是：
65+
```
66+
应用流程进行到智能表单节点，流程暂停 ---> 用户与表单进行交互，触发继续对话接口 ---> 流程继续进行到下一个节点
67+
```
68+
使用示例：
69+
```
70+
如果表单里有按钮用于触发继续对话：
71+
<Button onClick={onResumeClick}>继续对话</Button>
72+
73+
调用继续对话接口:
74+
const onResumeClick = () => {
75+
resumingClick({params: //这里是表单的出参数据});
76+
}
77+
如果表单的出参有两个，String 类型的"a"，Int 类型的"b":
78+
resumingClick({params: {a: "hello", b: 1}});
79+
```
80+
**注意：在结束节点使用的表单如果调用继续对话接口，会出现错误。**
81+
3. 重新对话接口
82+
重新对话接口适用于配置在**结束**节点的表单，适用于用户希望在流程结束后，想使用相同的问题重新再发起一次对话。具体的过程是：
83+
```
84+
应用流程进行到结束节点，流程结束 ---> 表单展示流程输出，用户与表单进行交互，触发重新对话接口 ---> 再次从头发起一次流程
85+
```
86+
使用示例：
87+
```
88+
如果表单里有按钮用于触发重新对话：
89+
<Button onClick={onRestartClick}>重新对话</Button>
90+
91+
调用重新对话接口:
92+
const onRestartClick = () => {
93+
restartClick({params: //这里是表单的出参数据});
94+
}
95+
如果表单的出参有两个，String 类型的"a"，Int 类型的"b":
96+
restartClick({params: {a: "hello", b: 1}});
97+
```
98+
**注意：在智能表单节点使用的表单如果调用重新对话接口，需要先执行终止对话接口，将流程停止，再执行重新对话接口。**
99+
### 表单调用外部接口
100+
* 如果想在表单中调用非平台内置的接口，需要保证接口支持跨域调用。
101+
### 表单使用图片
102+
* 表单使用图片文件时，需要将图片放置在/src/assets/images目录下
103+
* 表单路径需要写为"./src/assets/images/图片文件名
104+
示例：
105+
```
106+
<img src="./src/assets/images/empty.png" alt="" height="100px" width="100px"/>
107+
```
108+
### 表单添加样式文件
109+
* 可以在/src/styles目录下添加样式文件，请使用.scss类型
110+
### 调试表单
111+
```
112+
执行 npm install
113+
执行 npm start
114+
启动表单项目，可以查看是否符合预期
115+
```
116+
### 打包表单代码
117+
```
118+
执行 npm run build 将组件打包在build文件夹里
119+
```
120+
## 表单出入参配置
121+
* 表单的出入参配置需要为json文件，名称为config.json。
122+
* 文件内容表示表单的出入参的类型、描述以及参数顺序等信息，需要符合[json schema规范](https://json-schema.apifox.cn/)。
123+
### 约束
124+
* 最外层parameters字段是入参，入参第一层必须type为object。
125+
* 必须包含name，支持中文、英文、数字、空格、中划线、下划线组合。
126+
* 可以包含description, 对参数进行描述。
127+
* 必须包含parameters。
128+
* 必须包含required, 内容不可以为properties下参数名之外的参数名。
129+
* 可以包含order, 若写必须为properties下所有参数名的列表；若不写，则默认按照properties下所有参数名的顺序。
130+
* 必须包含return，return字段是出参。
131+
### 示例
132+
```
133+
// 这是一个表单的出入参都为 字段名："a", 类型：String;
134+
{
135+
"schema": {
136+
"parameters": {
137+
"type": "object",
138+
"required": [
139+
"a",
140+
"b"
141+
],
142+
"properties": {
143+
"a": {
144+
"type": "string",
145+
"default": ""
146+
},
147+
"b": {
148+
"type": "string",
149+
"default": ""
150+
}
151+
}
152+
},
153+
"return": {
154+
"type": "object",
155+
"properties": {
156+
"a": {
157+
"type": "string"
158+
},
159+
"b": {
160+
"type": "string"
161+
}
162+
}
163+
}
164+
}
165+
}
166+
```
167+
## 表单预览图
168+
* 表单预览图的类型支持为.jpg/.png/.jpeg, 名称为form，大小不超过1M。
169+
## 打包
170+
* 将build文件夹、config.json、form.png打成zip压缩包，压缩包名称支持大小写英文、中文和数字的字符串,可以包含中划线(-)和下划线(_),但不能以中划线(-)和下划线(_)开头或结尾。

‎examples/template/react模板/config.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"schema": {
3+
"parameters": {
4+
"type": "object",
5+
"required": [
6+
"a",
7+
"b"
8+
],
9+
"properties": {
10+
"a": {
11+
"type": "string",
12+
"default": "haha"
13+
},
14+
"b": {
15+
"type": "string",
16+
"default": "heihei"
17+
}
18+
}
19+
},
20+
"return": {
21+
"type": "object",
22+
"properties": {
23+
"a": {
24+
"type": "string"
25+
},
26+
"b": {
27+
"type": "string"
28+
}
29+
}
30+
}
31+
}
32+
}

‎examples/template/react模板/form.png‎

18.9 KB
Loading

‎examples/template/react模板/package.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "remote-component",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack serve --progress --profile --mode development --host 127.0.0.1 --port 3350 --config webpack.dev.js",
8+
"build": "webpack --mode production --config webpack.prod.js"
9+
},
10+
"license": "ISC",
11+
"devDependencies": {
12+
"@ant-design/icons": "4.8.3",
13+
"@babel/core": "^7.20.12",
14+
"@babel/plugin-transform-runtime": "^7.12.17",
15+
"@babel/preset-env": "^7.12.13",
16+
"@babel/preset-react": "^7.12.13",
17+
"@babel/preset-typescript": "^7.24.7",
18+
"@types/node": "^20.12.12",
19+
"@types/react": "^18.2.74",
20+
"@types/react-dom": "^16.9.2",
21+
"babel-loader": "^8.2.2",
22+
"babel-plugin-dynamic-import-webpack": "^1.1.0",
23+
"clean-webpack-plugin": "^3.0.0",
24+
"copy-webpack-plugin": "^10.2.0",
25+
"css-loader": "^6.8.1",
26+
"cssnano": "^5.1.15",
27+
"eslint": "^7.32.0",
28+
"file-loader": "^6.2.0",
29+
"happypack": "^5.0.1",
30+
"html-webpack-plugin": "^5.5.0",
31+
"lodash": "4.17.21",
32+
"mini-css-extract-plugin": "^1.6.2",
33+
"postcss-import": "^14.0.0",
34+
"postcss-loader": "^4.0.4",
35+
"prettier": "3.2.5",
36+
"sass": "^1.69.5",
37+
"sass-loader": "^13.3.2",
38+
"style-loader": "^2.0.0",
39+
"typescript": "^5.4.5",
40+
"uglifyjs-webpack-plugin": "^2.2.0",
41+
"url-loader": "^4.1.1",
42+
"webpack": "5.89.0",
43+
"webpack-cli": "5.1.4",
44+
"webpack-dev-server": "4.15.1",
45+
"webpack-merge": "5.10.0",
46+
"webpack-subresource-integrity": "5.1.0",
47+
"less-loader": "12.2.0",
48+
"less": "4.2.0"
49+
},
50+
"dependencies": {
51+
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
52+
"antd": "4.24.13",
53+
"react": "^18.1.0",
54+
"react-dom": "^18.1.0",
55+
"react-i18next": "^11.8.13"
56+
}
57+
}

‎examples/template/react模板/public/favicon.ico‎

3.78 KB
Binary file not shown.

‎examples/template/react模板/public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>React App</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎examples/template/react模板/public/logo192.png‎

5.22 KB
Loading

0 commit comments

Comments
 (0)