快速入门流程

使用准备

用户可以在多API插件编排中拖入工作卡节点，在右侧抽屉中点击【创建工作卡】，前往配置工作卡。我们为用户初始化了一个简单的卡片模板，用户可以基于模板结合自己的需求进行卡片内容的构建 工作搭建平台初始化界面如下：

控件库说明

搭建工作卡的基本元素就是控件，控件目前分为两种：基本容器和基本控件。

• 基本容器：基础控件的布局载体，基础控件需要放在基本容器内进行编排。我们已经在初始化模板中为用户初始化好了几个弹性盒，用户可以直接拖拽控件进行使用
• 基本控件：搭建卡片的元素，包括文本，输入框，选择框，按钮等功能元素。我们在初始化模板中为用户初始化了一个输入框和一个按钮，并为按钮绑定了相应的事件变量

弹性盒

显隐设置：控制整个弹性盒或者单个控件元素在卡片上显示还是隐藏。如果用户想动态的改变某个布局的显隐状态，可以指定为从服务端获取的模式，然后为其配置动态变量。并在流执行的时候为动态变量赋值来完成显隐状态的变化，

• 值为1时布局显示
• 值为0时布局隐藏
  

容器方向：控制弹性盒内元素的布局方向

背景色：弹性盒填充颜色，支持16进制颜色编码

文字

主题色：控制文字颜色，目前固定内容支持以下几种配色，可以由服务端下发，支持十六进制颜色编码

可配置参数说明：

属性	含义	类型	是否必填	适用场景	Mock
id	控件id	string	否	客户端/web	id="unit_senior_select_1691742838005742"
font	字体大小	string	否	客户端/web	font="13"
color	字体颜色	string	否	客户端/web	color="#5c6473"
bold	字体粗细	string	否	客户端/web	bold="1"
lines	文字上线多少行 0为无限	string	否	客户端/web	lines="1"
align	文字对齐方式	string	否	客户端/web	align="center"
text	文本内容	string	是	客户端/web	text="${subtitle.content}"
richtext	富文本	string	否	客户端/web	richtext="${subtitle.content}"
click	点击事件	string	否	客户端/web	click="btn"
theme	主题	string	否	客户端/web	theme="blue"
auto_fold	超出最大行数是否自动折叠	string	否	客户端/web	auto_fold="1"
fold_text	折叠展开文案	string	否	客户端/web	fold_text="全文,收起"

图片

可配置参数说明：

属性	含义	类型	是否必填	适用场景	Mock
id	控件id	string	否	客户端/web	id="unit_senior_select_1691742838005742"
width_percent	百分百宽度	string	否	客户端/web	width_percent="100"
width	宽度	string	否	客户端/web	width="100"
height	高度	string	否	客户端/web	height="100"
src	图片网络来源	string	否	客户端/web	src="https://bj.bcebos.com/dev-platform/app/data/public/97ee9355b9ae4d11a3d5adf5c94fb11c"
auth	图片网络请求认证信息	string	否	客户端/web
local	图片本地资源名	string	否	客户端/web
mode	图片填充方式	string	否	客户端	aspect_fill aspect_fit aspect_fillw_top aspect_fillh_end aspect_clip_top_end aspect_noratio_fillh_end
tint_color	图片做为模板刷色	string	否	客户端/web
theme	主题	string	否	客户端/web	theme="blue"
corner_radius	图片圆角	string	否	客户端/web	corner_radius="4,4,4,4"
click	事件id	string	否	客户端/web
tips	hover时展示的tips，不传或传空则无hover	string	否	客户端/web

按钮

可配置参数说明：

属性	含义	类型	是否必填	适用场景	Mock
id	控件id	string	否	客户端/web	id="unit_senior_select_1691742838005742"
width_percent	百分百宽度	string	否	客户端/web	width_percent="100"
width	宽度	string	否	客户端/web	width="100"
height	高度	string	否	客户端/web	height="100"
font	字体大小	string	否	客户端/web	font="13"
state	按钮状态		否	客户端/web	state="normal"
color	标题颜色	颜色规范值	否	客户端/web	color="#C2D6FF"
border_width	固定为1像素，不支持指定
border_corner	边框圆角	正整数	否	客户端/web	border_corner="16"
border_color	边框颜色	颜色规范值	否	客户端/web
background_color	背景色	颜色规范字	否	客户端/web
theme	主题	主题名称	否	客户端/web	theme
show_tip	tips显示开关	用于控制是否显示tips		客户端	show_tip="1"

输入框

输入框可以帮助用户将输入自己想输入的文本，并结合数据上传进行数据提交。

可配置参数说明：

属性	含义	类型	是否必填	适用场景	Mock
id	控件id	string	否	web	id="time_selector_id"
width_percent	百分百宽度	string	否	web	width_percent="100"
width	宽度	string	否	web	width="100"
height	高度	string	否	web	height="100"
text	输入框默认值	string	否	web	text="${title.content}"
font	字体大小	string	否	web	font="13"
placeholder	输入框placeholder	string	否	web	placeholder="请输入"
state	输入框状态	string	否	web	state="normal"
limit	文字上限	string	否	web	limit="500"
max_display_lines	文字多行展示	string	否	web	max_display_lines="4"

选择框

选择框可以给用户提供可选条目，并结合数据上传事件进行数据提交。选择框支持单选、多选模式。通过配置选项的动态变量来提供下来选择条目。 例如：选项创建了option的动态变量，类型为字符串数组。

在调试时指定对应的字符串数组的参数，将参数中的item0和动态变量的item0绑定即可。

进行调试，效果如下

可配置参数说明：

属性	含义	类型	是否必填	适用场景	Mock
id	控件id	string	否	web	id="unit_senior_select_1691742838005742"
width_percent	百分百宽度	string	否	web	width_percent="100"
width	宽度	string	否	web	width="100"
height	高度	string	否	web	height="100"
font	字体大小	string	否	web	font="13"
placeholder	空态提示语	string	否	web	placeholder="请输入"
state	下拉框状态	string	否	web	state="normal"
multi_limit_count	多选上限/仅多选	string	否	web	multi_limit_count="4"
mode	0/1 配置单选/多选 多选场景目前桌面端支持，移动端还不支持	string	是	web	mode="0"
no_data_toast	无选项提示语	string	否	客户端	no_data_toast="选项为空"
searchMode	下拉框是否可搜索	string	是	web	searchMode="0"("0": 不搜索，“1”本地搜索，“2”远程搜索)
isDefaultRequest	远程搜索是否配置默认请求	string	是	web	isDefaultRequest="0"
type	搜索类型	string	否	web	type="city"
expand	自定义参数	array	否	web	expand=[realSpaceId: ""]

时间选择器

时间选择器支持用户从动态变量中获取默认时间值，并支持客户通过日历选择的方式调整时间输入参数。

可配置参数说明：

属性	含义	类型	是否必填	适用场景	Mock
id	控件id	String	否	web	id="time_selector_id"
placeholder	无内容时默认提示内容，灰色文案	String	否	web	placeholder="请输入时间"
sel_type	选择器类型	String	否	web	sel_type="1"
timestamp	当前时间戳（秒级）	String	否	web	timestamp="1692539044"
state	组件状态	String	否	web	state="disabled"
is_select_before	用于开始时间和结束时间的联动效果	String	否	web	isSelectBefore="true"
selected_timestamp	可选择的时间范围边界，时间戳（秒级）	String	否	web	selectedTimestamp="1692539044"
icon	最右侧icon图片链接，支持http链接	String	否	web	icon="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA…pgFqWj0bBaAiMhsCgCAEA53WhIfW9B60AAAAASUVORK5CYII="
select	选择时间后的回调事件，绑定对应的事件名称即可	String	否	web	select="botCard_time_select"

单复选

用户可以定义自己的单复选元素，可以指定模式为单选/复选。与选择框一样，用户需要为该控件提供选项的动态变量

可配置参数说明：

属性	含义	类型	是否必填	适用场景	Mock
id	控件id	string	否	web	id="unit_senior_select_1691742838005742"
width_percent	百分百宽度	string	否	web	width_percent="100"
width	宽度	string	否	web	width="100"
height	高度	string	否	web	height="100"
direction	布局方式	string	否	web	direction="column"
mode	单复选模式	string	否	web	mode="0"
options	选项	string	否	web	options="${asdsa.contents}"
limit	多选上限/仅多选	string	否	web	limit="4"
select	选择事件	string	否	web	select="asdsad"
optionsConfig	选项控制参数	string	否	web	{"type": "array", "array0": { "type": "array", "enable": { "type": "text", "content": "0" }, "selected": { "type": "text", "content": "0" } }, "array1": { "type": "array", "enable": { "type": "text", "content": "1" }, "selected": { "type": "text", "content": "1" } }}