# 使用手册

文档版本	内容修订	修订人	修订日期
V1.0	正式发布	王垚、高光辉	2020-12-10
V1.1	对新增功能补充描述	王垚	2021-01-23
v1.2	添加使用脚本发起网络请求示例	王垚	2021-03-08
v1.3	更新基础流程文档、补充事件系统新增功能	王垚	2021-08-08
v1.4	添加字体说明	王垚	2023-04-20
v1.5	更新文档内容、增加对变量的说明	王垚	2024-01-17

# 快速开始

本手册用于编辑器的使用，部署过程请参考《通用中控部署手册》

# 1. 项目首页

在项目部署结束后，在浏览器中输入对应的地址例如: http://127.0.0.1:3436 即可看到类似下图的页面。

如果显示连接状态: 成功，点击打开编辑器进入编辑器页面。
否则需要输入正确的服务器地址，然后点击开始连接。

# 2. 编辑器空白页

首次进入编辑器的时候，会看到一个空白页面，如果已经有制作完成的 .sccs 的数据包，可以选择导入项目，然后选择该文件即可完成项目的导入。如果没有数据包，则点击新建项目来创建一个全新的项目。

# 3. 新建项目

点击新建项目按钮后，会出现一个弹窗，在弹窗中输入项目名字，然后点击确定即可完成项目的创建。

# 4. 项目页面

新建完成后，会自动跳转到项目页面，点击左侧面板的 新建页面 按钮，选择 新建空页面 即可创建一个页面。

# 5. 添加元素

# 6. 调整元素属性

点击选中元素，之后就可以在右侧的属性面板中对按钮的各种属性进行调整了，可以调整元素的显示位置、宽高、颜色、字体大小等一系列内容，调整到自己想要的格式。

# 7. 添加点击事件

按照下图提示的操作步骤，添加一个脚本，该脚本会在用户点击按钮是进行触发，我们会在脚本中实现一个信息提示功能，提示信息会在用户点击按钮时弹出显示。

在编辑器窗口输入that.toast.show("我被点击了")，之后点击确定按钮。

点击保存按钮将事件内容保存。

# 8. 运行项目

在顶部导航栏的右侧

当点击按钮后，出现弹窗信息，则表明项目正常运行，如果没有出现弹窗，则检查上面步骤是否有遗漏和错误。

到这里，创建一个项目的简单流程就结束了，如果需要了解更多内容，请看下面的详细文档。

# 菜单介绍

项目是一个基本容器，是若干页面和功能的集合，每一个项目都可以看作是一个App应用。

# 1. 项目菜单

在顶部导航栏可以查看所有的项目，切换编辑的项目，还可以新建和删除项目。

# 2. 项目菜单功能

在菜单条目中，不同的操作方式对应不同的功能，如下图所示。

# 3. 导入导出项目

项目支持通过导出功能对项目进行离线备份存储和数据共享，通过导入功能加载备份或者别人共享的数据。

导出的文件格式为 .sccs 即 SANSI CENTER CONTROL SYSTEM 的缩写。

导出的文件存储在用户的下载目录中，名称格式为： 项目名称_v1.0.3_20210101081500.sccs 。

建议在项目完成编辑后使用导出功能，将项目导出备份到外置硬盘等设备中，万一后续因为硬盘损坏等原因导致程序数据丢失，也可以通过备份找回。

# 4. 项目运行入口

在项目编辑完成后，如果只需要运行项目，可以从首页的项目列表进入。

点击导航栏左上角的 LOGO 图标，返回到首页，即可在右侧看到所有的项目，点击列表条目即可直接运行项目。

# 页面介绍

所有运行展示的内容都是以页面为基础的，页面类似于网页，或者手机应用的页面，不同的是，在这套系统中，页面上显示的内容和对应的功能都是可以编辑调整的。

# 1. 新建页面

一个项目中可以新建多个页面，可以通过新建页面来创建一个全新的空白页面。

# 2. 页面条目

当新建多个页面后，则会像下图这样，同时存在多个页面条目。

淡蓝色背景的为当前选中的条目，表示当前编辑区域显示的是该页面。
可以通过点击页面条目来切换页面。
默认第一个页面为进入应用的首页。
可以通过鼠标左键按住条目并拖拽对页面条目进行排序。

# 3. 页面条目菜单

在页面条目上使用鼠标右键点击会展开一个菜单，该菜单提供更多页面操作的相关功能。

复制页面：复制当前的页面到本项目中。
拷贝：拷贝页面到暂存区，用于稍后粘贴页面。
粘贴页面：将暂存区的页面数据粘贴到当前项目中。
重命名：为当前页面重新命名。
保存为模板：将当前页面作为模板。
删除：从项目中移除当前页面。

# 元素

所有被添加到页面上的内容都可以被称为元素(或者组件)，不同的元素具有不同的功能和作用，在该平台中，有

# 1. 添加元素

所有元素都在元素面板中，通过选中拖动的方式添加到页面上，目前有9种基础元素和多个定制元素，元素的详情，请参考附录：附录三：基本元素

# 2. 元素列表

下面是9个基本元素被添加到页面上的样子，当一个元素被添加到页面上的时候，这个元素就会在左侧的元素列表中显示(左下角红框标记部分)，列表显示是有顺序的，如果元素之间有层级关系或者被遮挡，可以尝试调整排序的方式来解决该问题。

# 3. 元素列表菜单

在元素列表的条目上点击鼠标右键，可以展开一个操作菜单，可以在该菜单中对元素进行一些基本的操作，排序、重命名和删除。

需要注意的是，元素的名字就是元素的唯一 ID，该 ID 在元素操作中非常重要。

# 4. 元素菜单

直接在元素上右键，或者选中某一个元素后右键，可以展开该元素的菜单，这个菜单除了列表菜单中的排序功能外，还提供了剪切、复制、粘贴等功能。

元素可以选中后剪切(复制)，剪切(复制)的元素支持跨页面、跨项目粘贴，在编辑区域的空白位置也可以通过右键菜单粘贴元素。

# 5. 元素多选

鼠标在编辑区域按下左键并拖动，会产生一个选择区域，在选择区域内的元素就会被选中，被选中的元素会出现一个红色虚线框，一个也会在左下角的元素列表中用淡蓝色编辑如下图。

在多个元素同时被选中后，这些被选中的元素会临时称为一个元素组合，你可以对这个组合进行对齐操作。
目前支持的对齐方式如下：
左对齐、水平居中对齐、右对齐、水平分散对齐、顶部对齐、垂直居中对齐、底部对齐、垂直分散对齐。

# 6. 元素多选菜单

元素多选菜单和元素单选菜单类似，在多选元素后通过鼠标右键展开菜单，只不过相对于单选的元素菜单来说，它同样多了一个对齐选项，可以通过对齐选项来快速完成多元素的对齐工作。

# 7. 撤销与重做

页面内所有编辑的内容,包括但不限于添加元素、删除元素、移动元素、改变样式、添加事件、添加约束等均会被记录, 目前一个页面最多纪录50次操作,可以撤销到之前某个记录的状态,也可以使用重做恢复撤销的影响.

当按钮可以执行操作时，显示为黑色的，无法操作时，显示为灰色

# 属性

每一个元素都拥有自己的属性信息，可以通过调整属性来调整它的显示状态，包括但不限于元素的大小、位置、颜色等内容。

如下图，为一个按钮元素的属性面板，不同元素可以调整的属性各有不同，而且可能会跟随软件版本动态调整，所以具体可以调整的信息请以软件实际运行结果为准。

# 事件

元素的显示效果可以通过属性进行配置，但是想要元素具备功能，例如：点击后关闭大屏，则需要为元素配置上事件，需要注意的是，每一个元素都可以添加多个事件。

如下图，是新添加一个事件的过程：

# 事件权限

可以通过事件权限选择框为事件执行添加权限的控制，默认是所有用户均可执行，可以选择，仅限管理员，也可以具体指定到某个用户，

注意：在指定到某个用户时，记得取消所有用户的权限。

# 二次确认

在比较关键的事件上，例如：关闭屏幕，关闭系统等指令上，可以在通过配置二次确认来防止误触。

# 串并行

假设有如下的事件顺序

HTTP(串行)
TCP1(串行)
TCP2(并行)
TCP3(串行)
TCP4(并行)

实际运行顺序如下：

HTTP -> TCP1 TCP2 -> TCP3 TCP4

每一个并行都是起点，可以通过调整顺序支持来调整穿并行的策略。

实现原理

在触发事件时对所有事件进行遍历，得到应该触发的事件
根据事件列表中的串并行信息，将其分组，每一遇到并行就重新分组
根据分组执行事件，分组间并行，每一个组内串行

# 延迟触发

事件可以设置延迟触发时间，时间单位是毫秒(ms)，1秒 = 1000毫秒，例如延迟 2 秒执行就需要在里面填入 2000。

# 触发方式

所谓事件触发方式，就是在什么情况下会执行这个事件，所有元素都共有的触发类型是【元素加载时】和【元素移除时】，另外针对于不同的元素，还会有额外的触发类型，例如：可点击元素就会有【点击】、滑动条，时间选择器等会有【数值变化】、列表会有【条目被点击】。目前已有的触发方式如下：

触发方式	概述
元素加载时	当元素在页面上被加载显示时调用
元素移除时	当元素从页面上移除时调用
点击	当元素被点击时调用
数值变化	当元素的数值变化后调用
条目被点击	当元素的子条目被点击时调用

可以事件触发通过触发方式进行调整，如下图所示：

# 事件类型

目前的事件类型有5中，通过不同的时间类型执行不同的操作。

事件类型	概述
跳转页面	从项目中的一个页面跳转到另外一个页面
HTTP通信	发出一个 HTTP 请求
TCP通信	发出一个TCP请求，需要借助 Transfer 进行转发
UDP通信	发出一个UDP请求，需要借助 Transfer 进行转发
串口通信	发出一个串口请求，需要借助 Transfer 进行转发
执行脚本	执行脚本

事件大致分为三类：第一类跳转页面、第二类进行通信、第三类执行脚本。

其中执行脚本属于一种特殊的事件，在脚本中同样可以完成前两类事件，执行脚本支持的功能最多，但是需要有一定的编程基础。

# 1 跳转页面

跳转页面可以选择本项目内的页面或者返回上一页。

# 2 通信

目前支持的通信方式有 HTTP、TCP、UDP和串口，其中 HTTP 通信是客户端直接和 HTTP 服务进行通信。而TCP、UDP和串口通信目前则需要借助 Transfer 进行通信，原因是浏览器不具备直接发出这种类型通信的能力，所以需要借助 Transfer 转发服务来与之通信。

如下图，为不同通信方式需要配置的参数信息，可以看到，所有的通信方式都有一个【预处理(脚本)】和【结果处理(脚本)】，这两个脚本可以用于在通信前后对数据进行处理，也可以用于更新当前页面上元素的状态。

# 3 脚本

此处的脚本用的是 JS 语法，用户可以自定义功能逻辑。

# 变量

# 变量入口

变量全称环境变量，它的功能入口在顶部导航栏的位置，可以用于给项目内的组件提供全局的数据。

通常情况下用于存储一些固定的公共变量，如某个服务的IP地址，便于后续统一修改。

⚠️注意：一般情况下该变量在运行阶段不可以修改内容，如果需要可以动态修改的数据，请通过接口等方式进行。

通过编辑功能来调整变量。

# 新增变量

如下图再设置了 key 和 value 之后，点击保存即可存储变量。

# 变量使用

# 1. 按钮和文本显示内容引用变量

内置的文字和按钮组件支持对变量的引用，但大部份插件组件可能并不支持该引用。

使用的方式如下，通过两个花括号和变量名称进行引用，支持和普通文本进行混排。

文字内容 {{env.变量的key}}

# 2. 事件引用

在添加事件时，支持通过这种方式来引用变量中的服务地址。

# 3. 脚本引用

假如需要使用到脚本的话，可以通过脚本编辑器在脚本中使用相关的变量。

在脚本中不需要使用花括号，直接使用 env.变量的key 就可以了。

运行后点击效果如下：

# 字体功能

在 2.2.0 以上的版本中，支持字体功能，程序发布时会默认携带一些字体，也可以使用操作系统的字体，字体功能开放给项目和组件使用。

# 1. 项目字体

项目字体通过项目设置功能进入，支持设置西文字体和中文字体。

project-font-set

# 2. 组件字体

组件字体和项目字体类似，也可以设置西文字体和中文字体。

element-font-set

# 3. 注意事项

默认情况下仅设置中文字体即可，无需单独设置西文字体。
西文字体如如果设置了包括中文的字体格式，会覆盖掉中文的格式。
系统字体尽在本操作系统支持，如果在另外的操作系统上使用，需要安装相同的字体。
项目字体存放在安装目录下的 /lib/fonts 目录下，如果想要添加字体，可以将 ttf 格式文件复制到该目录后重启服务。
很多字体有中文和英文两种 font family，如 微软雅黑 和 Microsoft YaHei 使用两个是等价的。
如果设置系统字体后在其它设备访问无效果，请检查访问设备上是否已经安装该字体，或者使用项目字体代替。

# 远程开关机

远程开关机是通过中控页面远程打开和关闭其它设备的方法，比较常见的使用场景为通过中控开启和关闭和显示屏对应的播放电脑，需要注意的是，在进行远程开关机期间，中控服务自身所在的电脑需要处于运行状态，否则无法连接中控。

# 1. Windows 远程开机

远程开机使用的是通用的网络唤醒协议，只要是支持 Wake on LAN 的设备都可以通过该协议进行唤醒。

网络唤醒（Wake-on-LAN，简称WoL）是一个以太网计算机网络标准，允许一个已经关闭电源的计算机通过网络消息被唤醒。这个标准协议大多用在局域网，但是也可以通过互联网来使用。

在Windows操作系统上启用Wake-on-LAN (WoL)功能涉及到两个方面：网络适配器的设置和BIOS设置。请按照以下步骤操作：

# 步骤1: BIOS设置

重新启动你的计算机，进入BIOS设置。通常，这需要在启动过程中按特定的键，例如Delete，F2，F10或Esc（具体按键取决于你的主板）。
在BIOS中找到“电源管理”或类似名称的选项。
在“电源管理”设置中找到“Wake-on-LAN”或“WOL”或类似名称的选项，并启用它。
保存你的BIOS设置，并重新启动计算机。

此处以联想台式机的 BIOS 为例，不同主板的 BIOS 不同，请以根据具体型号查询开启方式。

# 步骤2: Windows系统设置

在Windows系统中，右键单击左下角的“开始”按钮，然后选择“设备管理器”。
在“设备管理器”中，展开“网络适配器”类别。
右键点击你的以太网适配器，然后选择“属性”。
在以太网适配器的“属性”窗口中，转到“高级”选项卡。
在“高级”选项卡中，找到“唤醒能力”、“魔术封包唤醒”或类似名称的选项，并将其设置为“Magic Packet”、“开启”、“ON”或类似的选项。
接下来，转到“电源管理”选项卡。
在“电源管理”选项卡中，确保选中“允许此设备唤醒计算机”复选框。
点击“确定”保存设置。

现在，你的Windows计算机应该已经配置为通过Wake-on-LAN功能响应Magic Packet。请注意，不同的计算机硬件和Windows版本可能具有略微不同的选项名称和设置过程，因此如果有任何差异，请参考计算机制造商或Windows文档。

# 步骤3: 获取对应网卡的 MAC 地址

通过命令提示符(cmd),输入 ipconfig /all 来查看所有网卡的信息，找到对应网卡的 MAC 地址。

sansi-wake-on-lan-5

# 步骤4: 测试开机指令

关闭 windows 系统
在中控所在电脑上打开浏览器，直接访问: http://127.0.0.1:3436/sansi/ccs/api/v1/transfer/power/wakeup/00-00-00-00-00-00, 将链接末尾的 MAC 地址更换为上一步得到的 MAC 地址。
如果对应设备被唤醒，说明流程是正确的

⚠️注意：

远程开关机需要中控版本 2.2.6 以上的版本，低版本无效

如果上述步骤无法唤醒设备，请依次排查以下几个问题
远程设备的 BIOS 是否开启了 Wake on LAN

对应的网卡是否配置正确

中控和目标设备是否在同一个路由器(交换机)下面，如果不在同一个下面，可能需要配置路由器/交换机的转发策略。

目标设备开机后，中控所在设备是否可以 ping 通目标设备的IP地址。

如果有多网卡，请排查设置的网络适配器是否是和中控在同一个网络下的网卡。

如果有多网卡，请排查填写的 MAC 地址是否是网卡对应的地址。

# 步骤5: 添加开机按钮

添加开机按钮有两种方式：

一种是通过插件，这种方式所有的操作都是可视化的，可以支持一键开启多台设备，但定制性略微差一些。

另一种是通过脚本，可定制性较强，但是需要一点点的编程基础，最好会 javascript 语言，可以根据自己的需求进行选择。

# 1. 通过插件

⚠️注意：远程开关机需要中控版本 2.2.6 以上的版本，低版本无效

ccs-plugin-wakeup-1

ccs-plugin-wakeup-2

ccs-plugin-wakeup-3

ccs-plugin-wakeup-4

ccs-plugin-wakeup-5

ccs-plugin-wakeup-6

ccs-plugin-wakeup-7

ccs-plugin-wakeup-8

# 1. 通过脚本

⚠️注意：远程开关机需要中控版本 2.2.6 以上的版本，低版本无效

iShot_2023-06-21_16.22.47

iShot_2023-06-21_16.29.13

脚本内容为：

// 请替换 00-00-00-00-00-00 为需要开机设备的 MAC 地址，不是自己设备的 MAC 地址
axios.get('/sansi/ccs/api/v1/transfer/power/wakeup/00-00-00-00-00-00')

添加脚本后点击保存，保存后运行，在目标设备关机后，点击按钮应该就可以正常唤醒目标设备了。

# 2. Widows 远程关机

远程关机有两种方案，一种是基于 SSH 协议的，另一种是基于三思远程关机服务的 SRS<\Sansi Remote Shutdown>。

# 2.1 基于 SSH 远程关机

# 步骤1：开启 OpenSSH

基于 SSH 的远程关机需要目标设备上先开启 SSH 服务，开启步骤如下：

windows-ssh-service-1

windows-ssh-service-2

windows-ssh-service-3

windows-ssh-service-4

windows-ssh-service-5

windows-ssh-service-6

windows-ssh-service-7

windows-ssh-service-8

windows-ssh-service-9

⚠️注意：

开启 SSH 服务存在一定的风险，请避免将目标设备暴露在公网上，以避免可能存在的问题。

# 步骤2：调整防火墙

可以选择关闭防火墙或者调整防火墙规则，以允许 OpenSSH 的 22 号端口通信。

调整防火墙可以参考：windows: 防火墙设置规则（给ssh开端口/ip） (opens new window)

# 步骤3：验证 SSH 登录

找另外一台设备安装 OpenSSH 客户端后，打开终端，通过以下命令登录目标设备：

# ccc 为用户名，替换为目标设备的用户名，192.168.1.99 替换为目标设备的地址
ssh ccc@192.168.1.99

如果是第一次连接，会提示保存公钥证书，输入 yes 即可。

输入上述命令后正常情况下会要求输入密码。

ssh-login-1

输入密码后如果可以看到一下界面，说明登录正常。

ssh-login-2

# 步骤4：添加关机按钮

添加关机按钮同样有两种方式，一种是通过插件，另一种是通过脚本。

# 1. 通过插件

⚠️注意：远程开关机需要中控版本 2.2.6 以上的版本，低版本无效

插件安装过程和开机部分相同，如果已安装可以忽略。

ccs-plugin-wakeup-1

ccs-plugin-wakeup-2

ccs-plugin-wakeup-3

ccs-plugin-wakeup-4

ccs-plugin-wakeup-5

此处注意将按钮功能切换为远程关机。

sansi-shutdown-1

sansi-shutdown-2

# 2. 通过脚本

⚠️注意：远程开关机需要中控版本 2.2.6 以上的版本，低版本无效

iShot_2023-06-21_16.22.47

sansi-script-shutdown-1

脚本内容为：

// 请根据现场配置情况将数据修改为现场的实际信息，如果有多个设备，可以将下面请求复制多条
axios.post('/sansi/ccs/api/v1/transfer/shutdown', {
    "os":"windows",
    "shitdown_type": "SSH",
    "ip":"192.168.158.65",
    "port": 22,
    "username":"CCC",
    "password":"my-password",
})

# 2.2 基于 SRS<\Sansi Remote Shutdown> 远程关机

# 步骤1: 下载程序

到中控辅助程序 (opens new window) 下载对应平台的 remote-shutdown-service-xxx 程序，针对于 windows，应该下载后缀为 exe 的服务，如下图。

sansi-remote-shutdown-1

# 步骤2: 配置程序

sansi-remote-shutdown-1

sansi-remote-shutdown-2

sansi-remote-shutdown-3

sansi-remote-shutdown-4

sansi-remote-shutdown-5

sansi-remote-shutdown-6

sansi-remote-shutdown-7

sansi-remote-shutdown-8

sansi-remote-shutdown-9

# 步骤3：验证程序

检查任务计划程序中对应的状态，应处于正在运行状态。
在中控所在电脑的浏览器输入 http://127.0.0.1:3436/sansi/ccs/api/v1/transfer/power/shutdown/192.168.1.99，将 ip 地址替换为目标设备的 ip 地址。
观察目标设备是否关机，如果关机，说明功能正常。

# 步骤4：添加关机按钮

# 1. 通过插件

插件的安装和使用方式和上面相同，唯一不同的就是配置信息，如下：

sansi-remote-shutdown-2

# 2. 通过脚本

脚本添加方式和上面一致，脚本内容为：

// 将 ip 替换为目标设备的 IP
axios.get("/sansi/ccs/api/v1/transfer/power/shutdown/192.168.1.99")

# 其它问题

1. 为什么不使用将 remote-shtdown 快捷方式放到 shell:startup 中来启动程序，而是通过“任务计划程序”

快捷方式放到 shell:startup 中只有在用户登录后才能启动，通过任务计划程序可以在用户登录前就启动，即设备开机后，还在用户登录页面的时候，程序就可以启动了，避免远程开机后必须用户登录才能远程关机。

2. 访问接口后无返回值无效果

检查任务计划是否处于正在运行状态
在需要远程关机的设备上用浏览器访问 http://127.0.0.1:3435/sansi/remote/shutdown 看是否会关机
如果本地访问无法关机请检查服务是否启动，任务计划程序中账户的权限，和 3435 端口是否被占用
如果本地访问正常关机，其它设备访问无法关机检查防火墙，路由器，ping 等内容

3. 如果被控设备是一个笔记本，偶尔会出现无法控制的情况

如果被控设备是一个笔记本，偶尔会出现无法控制的情况，请检查任务计划程序中的条件选项，确保红框部分内容没有勾选，如果勾选了，那么在笔记本不插电源时会自动停止服务，就会出现无法控制的情况。

sansi-remote-shutdown-13

# 附录一：快捷键

快捷键	功能
Ctrl + A	全选当前页面元素
Ctrl + X	剪切选中的元素
Ctrl + C	复制选中的元素
Ctrl + V	粘贴选中的元素
Ctrl + D	删除当前选中的元素
Backspace/Delete	删除当前选中的元素
方向键(上下左右)	移动当前选中的元素
Ctrl + Z	撤销
Ctrl + Shift + Z	重做

# 附录二：常用脚本示例

# 1. 输出调试信息

console.log('Hello')

# 2. 获取元素属性

// 获取自身的文本属性
let text1 = self.text
// 设置自身元素的文本属性
self.text = "替换文本"

// 获取其他元素的文本属性
let text2 = that['text[0]'].text
// 设置其他元素的文本属性
that['text[0]'].text = "替换文本"

不同元素暴露的属性各有不同，详情请参考《附录四：元素可动态调整的属性》

# 3. 弹出提示信息

that.toast.show('Hello')
that.toast.show('Hello', 'info')
that.toast.show('Hello', 'success')
that.toast.show('Hello', 'warning')
that.toast.show('Hello', 'error')

# 4. 展示确认弹窗

that.toast.confirm('请确认').then(data => {
  // 用户点击了确认
}).catch(err => {
  // 用户点击了取消
})

# 5. 发送网络请求

axios.get('/sansi/ccs/api/v1/project/projects').then(res => {
  console.log('res =', res)
  if(res.status  === 200) {
    that.toast.show('当前项目数量 '+res.data.data.length, 'info')
  } else {
    that.toast.show('Error: '+res.message, 'error')
  }
}).catch(err => {
  that.toast.show('Error: '+err.message, 'error')
})

更多 Axios 使用方法请参考：axios中文文档 (opens new window)

# 6. 脚本参数

参数	摘要
params	当前脚本所有的参数信息
self	指向触发该事件的元素自身
that	指向 VueComponent
router	路由
axios	网络请求接口

# 附录三：基本元素

元素名称	功能
按钮	提供可点击区域，触发可以通过点击触发相关事件。
图片	用于展示图片。
文字	用于显示文字。
滑动条	用于滑动调整数据，如屏幕亮度。
进度条	进度条，用于显示进度信息。
矩形	用于标记一块区域。
SVG	用于展示 SVG 图像。
列表	用于展示列表信息。
时间选择	用于提供时间选择。

# 附录四：元素可动态调整的属性

# 1. 通用属性

属性	类型	作用	参数示例
disabled	boolean	是否禁用	`true`， `false`
visible	boolean	是否显示	`true`， `false`

# 2. 按钮(Button)

属性	类型	作用	参数示例
normalImageUrl	url	默认图片	`/api/v1/assets/image/btn_0_n.png`
selectedImageUrl	url	选中图片	`/api/v1/assets/image/btn_0_s.png`
activedImageUrl	url	激活图片	`/api/v1/assets/image/btn_0_a.png`
disabledImageUrl	url	禁用图片	`/api/v1/assets/image/btn_0_d.png`
text	String	显示文本	`按钮` ，`Button`
backgroundColor	color	背景色	`#ffffff` ，`#ccffffff`
selected	boolean	是否选中	`true`， `false`

# 3. 文本(Text)

属性	类型	作用	参数示例
text	String	显示文本	`按钮` ，`Button`
textColor	color	文字颜色	`#ffffff` ，`#ccffffff`
backgroundColor	color	背景色	`#ffffff` ，`#ccffffff`

# 4. 图片(Image)

属性	类型	作用	参数示例
url	url	图片	`/api/v1/assets/image/img.png`
backgroundColor	color	背景色	`#ffffff` ，`#ccffffff`

# 5. 矩形(Rect)

属性	类型	作用	参数示例
backgroundColor	color	背景色	`#ffffff` ，`#ccffffff`

# 6. 滑动条(Slider)

属性	类型	作用	参数示例
value	number	当前数值	`0` ，`50`

# 7. 进度条(Progress)

属性	类型	作用	参数示例
value	number	当前数值	`0` ，`50`

# 8. 列表(List)

属性	类型	作用	参数示例
data	array	当前列表数组	`["条目1", "条目2"]`
clickedIndex(只读)	number	当前点击的条目index	`1`
clickedData(只读)	String	当前点击的条目内容	`"条目1"`
backgroundColor	color	背景色	`#ffffff` ，`#ccffffff`

# 9. 时间选择器(TimePicker)

属性	类型	作用	参数示例
value	date	当前选择的时间	`11:17:56`

# 10.矢量图像(SVG)

属性	类型	作用	参数示例
backgroundImage	url	背景图片	`/api/v1/assets/image/bg.png`
backgroundColor	color	背景色	`#ffffff` ，`#ccffffff`

← 部署手册常见问题 →