bugfix
This commit is contained in:
parent
89701ea6ff
commit
6871601020
@ -15,8 +15,8 @@ bricks.ProgressBar = class extends bricks.HBox {
|
|||||||
this.add_widget(this.text_w);
|
this.add_widget(this.text_w);
|
||||||
}
|
}
|
||||||
set_value(v){
|
set_value(v){
|
||||||
var pzt = (current / total) * 100;
|
var pzt = this.total_value ? (v / this.total_value) * 100 : 0;
|
||||||
pzt = Math.max(0, Math.min(100, percentage));
|
pzt = Math.max(0, Math.min(100, pzt));
|
||||||
this.text_w.set_style('width', pzt + '%')
|
this.text_w.set_style('width', pzt + '%')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
docs/ai/.progressbar.md.swp
Normal file
BIN
docs/ai/.progressbar.md.swp
Normal file
Binary file not shown.
44
docs/ai/accordion.md
Normal file
44
docs/ai/accordion.md
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
# Accordion
|
||||||
|
|
||||||
|
**控件功能**：Accordion 是一个可折叠的面板控件，允许用户通过点击标题按钮切换显示不同内容区域。常用于组织多个内容块，节省界面空间。
|
||||||
|
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `item_size` | String (可选) | 每个折叠项标题的高度，默认为 `'25px'`。 |
|
||||||
|
| `items` | Array\<Object\> | 折叠项列表，每个对象包含以下属性：<br>- `name`: 该项唯一标识符<br>- `icon`: 显示在按钮前的图标（可选）<br>- `label`: 按钮上显示的文字<br>- `content`: 子控件配置对象（widgettype 等），用于动态构建内容<br>- `refresh` (Boolean, 可选): 是否每次点击都重新加载内容 |
|
||||||
|
| `item_css` | String (可选) | 标题按钮的 CSS 类名，默认为 `'accordion-button'`。 |
|
||||||
|
| `content_css` | String (可选) | 内容区域的 CSS 类名，默认为 `'accordion-content'`。 |
|
||||||
|
|
||||||
|
示例：
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
item_size: '30px',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'panel1',
|
||||||
|
label: '基本信息',
|
||||||
|
icon: 'info',
|
||||||
|
content: { widgettype: 'Label', text: '这里是基本信息' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'panel2',
|
||||||
|
label: '设置',
|
||||||
|
refresh: true,
|
||||||
|
content: { widgettype: 'Form', fields: [...] }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 回调参数 | 说明 |
|
||||||
|
|--------|---------|----------|------|
|
||||||
|
| `click` (内部绑定) | 用户点击某个折叠项标题按钮时触发 | `event.target.bricks_widget` 指向被点击的 `Button` 实例 | 控制内容切换的核心事件，由内部自动绑定并处理内容加载与展示 |
|
||||||
|
|
||||||
|
> 注意：该控件自身不对外暴露自定义事件 API，但其行为依赖于 `Button` 的 `click` 事件来驱动内容切换逻辑。开发者可通过监听子控件事件实现扩展功能。
|
||||||
46
docs/ai/asr.md
Normal file
46
docs/ai/asr.md
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
# ASRClient
|
||||||
|
|
||||||
|
控件功能：实现语音识别客户端功能，通过 WebSocket 与服务器通信，实时发送音频数据并接收识别结果。提供开始/停止录音的交互按钮，并触发相应的事件。
|
||||||
|
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `start_icon` (String, 可选)
|
||||||
|
开始录音状态下的图标路径，默认为 `imgs/start_recording.svg`。
|
||||||
|
|
||||||
|
- `stop_icon` (String, 可选)
|
||||||
|
停止录音状态下的图标路径，默认为 `imgs/stop_recording.svg`。
|
||||||
|
|
||||||
|
- `ws_url` (String, 必填)
|
||||||
|
WebSocket 服务地址，用于建立与语音识别后端的连接。
|
||||||
|
|
||||||
|
- `icon_options` (Object, 可选)
|
||||||
|
图标控件的配置选项，将传递给 `bricks.Svg` 实例，可自定义图标显示样式。
|
||||||
|
|
||||||
|
- `ws_params` (Object, 可选)
|
||||||
|
发送至 WebSocket 服务器的额外参数，在发送音频数据时合并使用。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `start`
|
||||||
|
触发时机：用户点击图标开始录音时。
|
||||||
|
参数：无
|
||||||
|
|
||||||
|
- `stop`
|
||||||
|
触发时机：用户点击图标停止录音时。
|
||||||
|
参数：无
|
||||||
|
|
||||||
|
- `transtext`
|
||||||
|
触发时机：从服务器接收到语音识别结果时。
|
||||||
|
参数：
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"content": "识别出的文本内容",
|
||||||
|
"speaker": "说话人标识（如支持）",
|
||||||
|
"start": "该段语音起始时间戳",
|
||||||
|
"end": "该段语音结束时间戳"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
说明：此事件由 `response_data` 方法解析服务器消息后派发，供上层组件处理识别结果。
|
||||||
34
docs/ai/bar.md
Normal file
34
docs/ai/bar.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
# ChartBar
|
||||||
|
|
||||||
|
**控件功能**：用于展示柱状图（Bar Chart），基于 ECharts 扩展实现，支持从指定数据源获取数据并动态渲染多系列柱状图。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.EchartsExt`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|------------|--------|----|
|
||||||
|
| `data_url` | string | 可选，数据请求的 URL 地址，用于异步加载图表数据。 |
|
||||||
|
| `data_params`| object | 请求数据时携带的额外参数，配合 `data_url` 使用。 |
|
||||||
|
| `method` | string | 数据请求方式，如 `'GET'` 或 `'POST'`，默认为 `'GET'`。 |
|
||||||
|
| `data` | array | 可选，直接传入本地数据数组，格式为对象数组，每个对象表示一条记录。 |
|
||||||
|
| `nameField` | string | 指定哪一字段作为 X 轴分类名称（如类别、时间等）。 |
|
||||||
|
| `valueFields`| array | 字符串数组，指定一个或多个字段作为 Y 轴数值，用于生成多个数据系列（series）。 |
|
||||||
|
|
||||||
|
> 示例数据结构：
|
||||||
|
> ```json
|
||||||
|
> [
|
||||||
|
> { "category": "A", "value1": 10, "value2": 20 },
|
||||||
|
> { "category": "B", "value1": 15, "value2": 25 }
|
||||||
|
> ]
|
||||||
|
> ```
|
||||||
|
> 若 `nameField = "category"`，`valueFields = ["value1", "value2"]`，则会生成两个柱状系列。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 回调参数说明 |
|
||||||
|
|------------|--------|------------|
|
||||||
|
| `chart:loaded` | 图表数据加载完成并成功渲染后触发 | `event.detail` 包含原始数据和最终生成的 ECharts 配置项（options） |
|
||||||
|
| `chart:error` | 数据加载失败或解析异常时触发 | `event.detail` 包含错误信息，如 `message`, `url`, `status` 等 |
|
||||||
|
|
||||||
|
> 注：事件通过自定义事件机制派发，可通过 `addEventListener('chart:loaded', handler)` 监听。
|
||||||
109
docs/ai/brief.md
Normal file
109
docs/ai/brief.md
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
# bricks框架简介
|
||||||
|
## 目录
|
||||||
|
* bricks目标
|
||||||
|
* bricks概念
|
||||||
|
* bricks开发方法
|
||||||
|
* bricks运行
|
||||||
|
|
||||||
|
## bricks目标
|
||||||
|
* 无前端代码或极少代码
|
||||||
|
* 降低前端开发技术难度
|
||||||
|
* 数据驱动
|
||||||
|
* 常用控件包装
|
||||||
|
* 纯json开发
|
||||||
|
|
||||||
|
## bricks概念
|
||||||
|
* 控件与控件继承
|
||||||
|
* 事件以及事件处理
|
||||||
|
* 控件嵌套和页面组装
|
||||||
|
|
||||||
|
### 控件与控件继承
|
||||||
|
bricks采用控件这一概念来描述web GUI的显示部件，每个控件均映射到一个html
|
||||||
|
的标签类型的一个javascript类。每个控件均可以实例化，并可在页面显示。
|
||||||
|
控件分为：基本控件，容器控件。控件有内置方法，也能触发事件。
|
||||||
|
|
||||||
|
* 基本控件
|
||||||
|
|
||||||
|
基本控件是一个原子控件，不能有子控件。
|
||||||
|
|
||||||
|
* 容器控件
|
||||||
|
|
||||||
|
容器控件可以有子控件，bricks通过在容器控件添加子控件，以及在子容器控件中
|
||||||
|
在添加子子控件的方式来构造复杂的web页面。
|
||||||
|
|
||||||
|
bricks已实现的控件请参看[控件清单](widgets.md)
|
||||||
|
|
||||||
|
### 控件扩展
|
||||||
|
如果现有的控件没法满足系统要求，bricks支持控件扩展，控件扩展需遵守：
|
||||||
|
* 控件class继承自某一个控件的class
|
||||||
|
|
||||||
|
* 按照需求实现控件逻辑
|
||||||
|
|
||||||
|
* 在需要的地方用this.dispatch触发此控件的事件
|
||||||
|
|
||||||
|
假设需要扩展一个名字叫ExtContainer的控件
|
||||||
|
```
|
||||||
|
bricks.ExtContainer = class extends bricks.VBox {
|
||||||
|
constructor(opts){
|
||||||
|
super(opts);
|
||||||
|
/* 新控件的创建代码 */
|
||||||
|
}
|
||||||
|
......
|
||||||
|
/* 对象的其他方法，在需要的时候，在某个方法中，使用this.dispatch('new_event', data)方法引发事件 */
|
||||||
|
}
|
||||||
|
bricks.register('ExtContainer', bricks.ExtContainer); /* 注册新控件 */
|
||||||
|
```
|
||||||
|
新控件的使用，example.ui
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"widgettype":"ExtContainer",
|
||||||
|
"options":{
|
||||||
|
....
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
...
|
||||||
|
],
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"new_event",
|
||||||
|
"actiontype":"urlwidget",
|
||||||
|
"target":"some_container",
|
||||||
|
"options":{
|
||||||
|
"url":"{{entire_url('./some_ui.ui')}}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 事件以及事件处理
|
||||||
|
每个控件都能触发所映射dom元素的事件，以及控件js类的成员函数以及祖先类的
|
||||||
|
成员函数中dispatch出的事件
|
||||||
|
|
||||||
|
所以bricks控件的事件来源于两类，dom元素原生事件以及控件类中自定义的事件。
|
||||||
|
两类事件处理方式相同。
|
||||||
|
|
||||||
|
### 控件表达形式
|
||||||
|
在服务器的后台，以json文件的形式表达控件，每个ui文件定义一个控件，
|
||||||
|
对于容器控件，可以在ui文件中的subwidgets子属性中为此控件添加子控件
|
||||||
|
|
||||||
|
#### id属性
|
||||||
|
字符串属性，定义控件的id，让控件可以用getWidgetById找到，如果不给定，系统会自动生成一个id
|
||||||
|
#### options属性
|
||||||
|
字典属性，创建控件时的选项，每个控件可接受的选项请参看控件选项说明
|
||||||
|
#### binds属性
|
||||||
|
数组属性，定义零到多个事件响应，每个bind字典需要遵守[事件](event.md)要求
|
||||||
|
#### 容器控件特有属性
|
||||||
|
##### subwidgets
|
||||||
|
数组属性，定义容器控件的子控件，每个元素定义一个子控件，子控件遵守控件的数据要素要求
|
||||||
|
|
||||||
|
## 应用开发开发
|
||||||
|
使用存放在服务器后台的.ui后缀的json格式文件来开发，每个.ui文件定义一个控件， 支持基本控件和容器空间。
|
||||||
|
|
||||||
|
关于如何书写ui文件请参考[UI文件格式](descjson.md)
|
||||||
|
|
||||||
|
## 调试
|
||||||
|
ui文件可以直接调试，如在服务器根目录下的test目录下有一个hello.ui文件，
|
||||||
|
就可以在浏览器中用url：https://sername/test/hello.ui调试
|
||||||
|
|
||||||
35
docs/ai/button.md
Normal file
35
docs/ai/button.md
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
# Button
|
||||||
|
|
||||||
|
控件功能：一个可点击的按钮控件，支持图标、文本标签和自定义动作响应，常用于触发事件或执行操作。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `orientation` | string | 布局方向，可选值为 `'horizontal'` 或垂直（默认为垂直），影响内部元素排列方式。 |
|
||||||
|
| `height` | string | 控件高度，默认为 `100%`。 |
|
||||||
|
| `width` | string | 控件宽度，默认为 `100%`。 |
|
||||||
|
| `item_rate` | number | 图标和文本的尺寸缩放比例，默认为 `1`。 |
|
||||||
|
| `tooltip` | string | 鼠标悬停时显示的提示文字。 |
|
||||||
|
| `color` | string | 文本颜色，CSS 颜色值。 |
|
||||||
|
| `bgcolor` | string | 背景颜色，CSS 颜色值。 |
|
||||||
|
| `nonepack` | boolean | 是否去除内边距和边框，若为 `true` 则设置 `padding: 0` 和 `border: 0`。 |
|
||||||
|
| `name` | string | 控件唯一标识名称，用于设置 DOM 元素 ID。 |
|
||||||
|
| `icon` | string | 图标资源 URL，如果指定，则在按钮中创建并显示一个 `Icon` 控件。 |
|
||||||
|
| `label` | string | 按钮上显示的文本标签内容。 |
|
||||||
|
| `css` | object | 自定义 CSS 样式对象，将被合并到按钮样式中。 |
|
||||||
|
| `action` | object | 点击按钮时触发的动作配置，包含以下子属性：<br> - `target`: 目标组件/路径<br> - `datawidget`: 数据源控件<br> - `datamethod`: 获取数据的方法名<br> - `datascript`: 自定义脚本逻辑<br> - `dataparams`: 传递给动作的参数<br> - `rtdata`: 是否实时获取数据<br> - `actiontype`: 动作类型（如跳转、提交等） |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`click`**
|
||||||
|
当按钮被点击时触发。事件回调会接收到 `opts` 配置对象作为参数。
|
||||||
|
触发时机：用户点击按钮（包括图标或文本部分）后，调用 `target_clicked` 方法时派发。
|
||||||
|
示例监听：
|
||||||
|
```js
|
||||||
|
button.bind('click', function(opts) {
|
||||||
|
console.log('Button clicked with options:', opts);
|
||||||
|
});
|
||||||
|
```
|
||||||
26
docs/ai/camera.md
Normal file
26
docs/ai/camera.md
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
# Camera
|
||||||
|
|
||||||
|
控件功能：用于调用设备摄像头进行拍照或视频录制，支持切换摄像头、开始/停止录制、拍摄照片等功能。
|
||||||
|
类型：普通控件（基于 `Popup` 的扩展）
|
||||||
|
父类控件：`bricks.Popup`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `fps` | Number | 视频采集帧率，默认为 60 FPS |
|
||||||
|
| `type` | String | 控件模式，可选值为 `'picture'`（拍照模式）或 `'recorder'`（录像模式） |
|
||||||
|
| `auto_dismiss` | Boolean | 是否自动关闭弹窗，默认为 `false`（由代码中显式设置） |
|
||||||
|
|
||||||
|
> 注意：`opts.auto_dismiss = false;` 在构造函数中被强制设置。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 携带数据 |
|
||||||
|
|--------|--------|--------|
|
||||||
|
| `shot` | 用户点击拍照按钮时触发 | 拍摄得到的图片数据 URL（base64 格式的 JPEG 图像） |
|
||||||
|
| `recorded` | 视频录制结束后触发 | 录制完成的视频文件对象（`File` 类型，格式为 WebM） |
|
||||||
|
|
||||||
|
> 说明：
|
||||||
|
> - 当 `type='picture'` 时，点击拍摄按钮会触发 `shot` 事件并传出图像数据。
|
||||||
|
> - 当 `type='recorder'` 时，点击录制按钮开始/停止录制，停止后触发 `recorded` 事件并传出视频文件。
|
||||||
32
docs/ai/cols.md
Normal file
32
docs/ai/cols.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# Cols
|
||||||
|
|
||||||
|
控件功能：用于展示分页的、可滚动的多列数据列表，支持动态加载前后页数据，常用于内容墙、卡片式布局等场景。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `data_url` | String | 数据请求的 URL 地址，用于异步加载数据。 |
|
||||||
|
| `data_params` | Object | 请求数据时携带的初始参数对象。 |
|
||||||
|
| `data_method` | String | 请求方法（如 GET、POST），默认为 GET。 |
|
||||||
|
| `page_rows` | Number | 每页请求的数据行数。 |
|
||||||
|
| `cache_limit` | Number | 缓存的页数上限，用于控制内存中保留的历史数据页数量。 |
|
||||||
|
| `col_cwidth` | Number | 每一列的固定宽度（单位像素），用于动态列布局计算。 |
|
||||||
|
| `mobile_cols` | Number | 在移动端显示的列数，默认为 2。 |
|
||||||
|
| `title` | String | 可选标题文本，若存在则显示标题组件。 |
|
||||||
|
| `description` | String | 可选描述文本（支持 Markdown 格式），会渲染为说明内容。 |
|
||||||
|
| `toolbar` | Object | 工具栏配置对象，用于定义顶部操作按钮。 |
|
||||||
|
| `record_view` | Object | 单条记录的视图模板定义，描述如何渲染每一条数据项。 |
|
||||||
|
|
||||||
|
> 注：`record_view` 是一个控件配置对象，会被 `bricks.widgetBuild` 用来生成每个数据项的子控件。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 携带数据 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| `record_click` | 用户点击某一条记录时触发 | 点击记录对应的数据对象（`user_data`） |
|
||||||
|
| `command` | 当工具栏按钮被点击时，通过 `toolbar_w` 传递上来的命令事件，由 `command_handle` 转发为 `dispatch(name)` | 命令名称（来自 toolbar 的 `params.name`） |
|
||||||
|
|
||||||
|
> 说明：`dispatch('record_click', data)` 会向外广播该事件，供外部监听处理。
|
||||||
26
docs/ai/conform.md
Normal file
26
docs/ai/conform.md
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
# Conform
|
||||||
|
|
||||||
|
控件功能：用于显示一个确认对话框，包含消息内容和“确认”与“取消”操作按钮，常用于用户操作前的二次确认。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.PopupWindow`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `message` | String | 要显示的消息文本内容，支持多语言（i18n）和自动换行。 |
|
||||||
|
| `conform` | Object | 可选，用于自定义“确认”按钮的配置，如事件处理扩展、图标、标签等，会合并到默认配置中。 |
|
||||||
|
| `discard` | Object | 可选，用于自定义“取消”按钮的配置，行为同 `conform`。 |
|
||||||
|
| `timeout` | Number | 继承自父类，此处被强制设为 0，表示不启用自动关闭。 |
|
||||||
|
| `auto_open` | Boolean | 继承自父类，设为 true，表示构造后自动弹出显示。 |
|
||||||
|
|
||||||
|
> 注：`opts` 中其他继承自 `PopupWindow` 的参数也适用，但本控件内部重写了 `timeout` 和 `auto_open`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带数据 |
|
||||||
|
|--------|----------|--------|
|
||||||
|
| `conformed` | 用户点击“确认”按钮时触发 | 无特定数据，仅事件通知 |
|
||||||
|
| `cancelled` | 用户点击“取消”按钮时触发 | 无特定数据，仅事件通知 |
|
||||||
|
|
||||||
|
> 事件通过 `this.dispatch()` 派发，可通过实例绑定监听。
|
||||||
40
docs/ai/continueaudio.md
Normal file
40
docs/ai/continueaudio.md
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
# ContinueAudioPlayer
|
||||||
|
|
||||||
|
**控件功能**：
|
||||||
|
`ContinueAudioPlayer` 是一个用于连续播放音频的 Web Audio API 控件，支持通过 WebSocket 接收音频数据（如 Base64 编码的音频片段），并实现无缝续播。具备播放、暂停、恢复、重启、音量调节和静音切换等功能。
|
||||||
|
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|------------|--------|----|
|
||||||
|
| `ws_url` | string | （可选）WebSocket 服务地址，用于接收音频流数据（当前控件未直接实现 WebSocket 连接逻辑，需外部使用）。 |
|
||||||
|
| `onStart` | function | 音频开始播放时触发的回调函数。 |
|
||||||
|
| `onEnd` | function | 当前音频轨道播放结束时触发的回调函数。 |
|
||||||
|
| `onPause` | function | 暂停播放时触发的回调函数。 |
|
||||||
|
| `onResume` | function | 恢复播放时触发的回调函数。 |
|
||||||
|
| `onVolumeChange` | function | 音量变化或静音状态改变时触发，参数为当前输出音量值（0 或实际音量）。 |
|
||||||
|
|
||||||
|
> 示例：
|
||||||
|
> ```js
|
||||||
|
> new bricks.ContinueAudioPlayer({
|
||||||
|
> ws_url: 'wss://example.com/audio-stream',
|
||||||
|
> onStart: () => console.log('Audio started'),
|
||||||
|
> onEnd: () => console.log('Audio ended'),
|
||||||
|
> onPause: () => console.log('Paused'),
|
||||||
|
> onResume: () => console.log('Resumed'),
|
||||||
|
> onVolumeChange: (vol) => console.log('Volume:', vol)
|
||||||
|
> });
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 |
|
||||||
|
|------------------|--------|
|
||||||
|
| `onStart` | 调用 `handleAudioTrack` 成功解码并开始播放音频时触发。 |
|
||||||
|
| `onEnd` | 当前音频源播放完毕（`source.onended`）时触发。 |
|
||||||
|
| `onPause` | 调用 `pauseAudio` 并成功暂停音频上下文后触发。 |
|
||||||
|
| `onResume` | 调用 `resumeAudio` 并成功恢复音频上下文后触发。 |
|
||||||
|
| `onVolumeChange` | 调用 `setVolume` 或 `toggleMute` 导致输出音量变化时触发，传递当前有效音量值（静音时为 0）。 |
|
||||||
36
docs/ai/countdown.md
Normal file
36
docs/ai/countdown.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
# TimePassed
|
||||||
|
|
||||||
|
控件功能：显示自计时开始以来经过的时间（以时:分:秒格式展示），每秒自动更新一次。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts`：继承自 VBox 的选项对象，无特殊参数。
|
||||||
|
- 控件内部初始化时从零秒开始计时，并通过 `bricks.formatTime` 格式化时间显示。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- 无自定义事件触发。
|
||||||
|
- 内部使用 `schedule_once` 实现周期性更新，但不对外派发事件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Countdown
|
||||||
|
|
||||||
|
控件功能：实现一个倒计时控件，支持设定初始时间（如 "01:00:00"），启动后每秒递减并更新显示，倒计时结束时触发 `timeout` 事件。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts.limit_time`：字符串类型，表示倒计时的总时间，格式为 `"HH:MM:SS"` 或 `"MM:SS"` 或 `"SS"`。
|
||||||
|
- 示例：
|
||||||
|
- `"30"` → 30 秒
|
||||||
|
- `"01:30"` → 1 分 30 秒
|
||||||
|
- `"01:00:00"` → 1 小时
|
||||||
|
- `opts.text_rate`：可选参数，用于设置文本显示刷新率（若底层 Text 控件支持）。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `timeout`：当倒计时归零时，控件会调用 `this.dispatch('timeout')` 派发该事件，可用于通知外部逻辑执行后续操作。
|
||||||
29
docs/ai/datarow.md
Normal file
29
docs/ai/datarow.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# DataRow
|
||||||
|
|
||||||
|
**控件功能**：用于在表格或列表中展示一行数据，支持表头和数据行的渲染，可包含字段显示、复选框选择以及工具栏操作。常用于数据浏览界面中的行级交互。
|
||||||
|
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.HBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `opts.toolbar` | Array | 工具栏配置数组，定义该行上可显示的操作图标按钮（仅非表头行生效）。每个工具项将触发对应事件。 |
|
||||||
|
| `opts.fields` | Array | 字段定义数组，每个元素描述一个显示字段，包括 `name`、`label`、`uitype`、`cwidth` 等属性。 |
|
||||||
|
| `opts.css` | String/Object | 自定义样式类名或 CSS 属性对象，应用于该控件根元素。 |
|
||||||
|
| `opts.browserfields` | Object | 浏览模式下的字段控制选项：<br> - `exclouded`: 排除显示的字段名数组；<br> - `cwidth`: 指定各字段的列宽（以字符单位计）。 |
|
||||||
|
| `opts.editexclouded` | Array | 编辑模式下排除的字段列表（当前未使用）。 |
|
||||||
|
| `opts.header_css` | String/Object | 表头行专用的自定义样式。 |
|
||||||
|
| `opts.checkField` | String | 若设置，则在行首添加复选框控件，绑定到指定字段名，用于选择/反选记录。 |
|
||||||
|
|
||||||
|
> 注：`DataRow` 继承自 `HBox`，因此也支持其布局相关参数如 `height: 'auto'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 传递参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| `check_changed` | 当行内复选框状态改变时触发 | 触发该事件的 `DataRow` 实例本身 |
|
||||||
|
| `[tool.name]`（动态） | 点击工具栏中某个非空白图标按钮时触发，事件名为按钮的 `name` | 由 `IconBar` 触发，携带点击信息，通过 `my_dispatch` 转发至外部监听器 |
|
||||||
|
|
||||||
|
> 示例：若 `toolbar.tools` 中有 `{ name: 'delete' }`，则点击该图标会触发名为 `delete` 的事件。
|
||||||
46
docs/ai/dataviewer.md
Normal file
46
docs/ai/dataviewer.md
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
# DataViewer
|
||||||
|
|
||||||
|
**控件功能**：用于展示分页数据的容器控件，支持滚动加载前后页、行记录操作（增删改查）、工具栏命令响应，并可动态渲染数据行。常用于数据列表或表格类场景。
|
||||||
|
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `data_url` | String | 数据加载的接口 URL，供 `PageDataLoader` 使用 |
|
||||||
|
| `data_params` | Object | 请求数据时附加的参数，在每次请求中发送 |
|
||||||
|
| `page_rows` | Number | 每页请求的数据条数 |
|
||||||
|
| `data_method` | String | 请求方法（如 'GET' 或 'POST'），默认为 'GET' |
|
||||||
|
| `cache_limit` | Number | 缓存页数限制，控制内存中保留的历史页面数量 |
|
||||||
|
| `editable` | Object | 可选配置，定义新增、更新、克隆、删除等操作的图标和 URL |
|
||||||
|
| `.add_icon` | String | 新增按钮图标路径 |
|
||||||
|
| `.update_icon` | String | 更新按钮图标路径 |
|
||||||
|
| `.clone_icon` | String | 克隆按钮图标路径 |
|
||||||
|
| `.delete_icon` | String | 删除按钮图标路径 |
|
||||||
|
| `.new_data_url` | String | 新增记录提交的目标 URL |
|
||||||
|
| `.update_data_url` | String | 更新记录提交的目标 URL |
|
||||||
|
| `.delete_data_url` | String | 删除记录提交的目标 URL |
|
||||||
|
| `toolbar` | Object | 自定义工具栏描述对象，包含额外命令按钮 |
|
||||||
|
| `row_options` | Object | 行渲染相关选项 |
|
||||||
|
| `.fields` | Array | 字段定义数组，每个字段包含 name, uitype 等信息 |
|
||||||
|
| `.editexclouded` | Array | 在编辑/克隆时不显示的字段名列表 |
|
||||||
|
|
||||||
|
> ⚠️ 所有初始化参数通过 `opts` 传入，构造函数会自动设置宽度为 `'100%'`、高度为 `'100%'`、溢出隐藏。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名称 | 触发条件 | 传递数据（event.params）说明 |
|
||||||
|
|--------|--------|-----------------------------|
|
||||||
|
| `row_check_changed` | 当某一行的选择状态发生变化时触发（由子类或内部机制调用） | 包含该行用户数据的对象（`user_data`） |
|
||||||
|
| `<command>` | 工具栏中非内置按钮被点击时，以按钮 `name` 分发自定义事件 | 若当前有选中行，则携带该行的 `user_data`；否则为 null |
|
||||||
|
| `command` | 内部使用，来自 `IconTextBar` 的原始命令事件 | 原始工具项描述 `{ name, selected_row }` |
|
||||||
|
|
||||||
|
> 💡 特殊命令处理：
|
||||||
|
> - `add`: 弹出新增表单窗口
|
||||||
|
> - `update`: 弹出修改当前选中行的表单
|
||||||
|
> - `clone`: 弹出基于当前行复制的新建表单
|
||||||
|
> - `delete`: 弹出确认框并执行删除动作
|
||||||
|
|
||||||
|
---
|
||||||
40
docs/ai/descjson.md
Normal file
40
docs/ai/descjson.md
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
# 应用开发源码.ui后缀文件规格说明
|
||||||
|
Bricks在服务器端使用Json文件格式的.ui后缀文件存储控件描述文件，前端获得.ui文件的json后转化为json对象，并用此json对象调用widgetBuild函数创建Bricks控件。
|
||||||
|
|
||||||
|
.ui文件支持jinja2模版，所以可以动态生成前端控件属性和数据
|
||||||
|
|
||||||
|
控件描述数据规格要求
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"id" # 可选，缺少动态生成一个uuid类型的id
|
||||||
|
"widgettype" # widgettype是一个字符串属性。其值为Bricks中的注册的控件名称或"urlwidget" "options" # 对象类型，给定控件实例化的初始化参数，参看每个控件的说明
|
||||||
|
"subwidgets" # 数组类型，只有容器控件需要，数组中的每个元素为子控件的控件描述数据
|
||||||
|
"binds" # 定义事件处理，参看后面的事件处理说明
|
||||||
|
}
|
||||||
|
```
|
||||||
|
控件描述json文件必须含有“widgettype” 和”options“两个属性。“subwidgets”属性用来定义此控件包含的子控件。“binds”用于定义此控件或其子控件的事件处理
|
||||||
|
|
||||||
|
## widgettype说明
|
||||||
|
其值为Bricks中的注册的控件名称或"urlwidget", widgettype定义此控件是bricks的哪个控件，值为“urlwidget”时，控件数据从服务器中获取，其options有特殊约定
|
||||||
|
|
||||||
|
## options
|
||||||
|
控件初始化参数，可以是控件本身定义初始化参数，也可以是祖先类的初始化参数，当widgettype等于urlwidget时，options要符合下列规格
|
||||||
|
{
|
||||||
|
"url" # 获得控件数据的url
|
||||||
|
"method" # http方法（如“GET”，“POST” 。。。）
|
||||||
|
"params" # 字典数据，http请求所带的参数
|
||||||
|
}
|
||||||
|
|
||||||
|
## binds
|
||||||
|
列表属性，定义控件的事件处理，在列表中的每一项，定义一个事件处理， Bricks支持5种事件处理方法，
|
||||||
|
分别是urlwidget, method, script, registedfunction和event
|
||||||
|
|
||||||
|
在binds中这五种事件处理方法都可以定义，在同一个控件中可以灵活的使用不同事件处理方法来响应不同控件的不同事件，
|
||||||
|
支持：
|
||||||
|
* 可定义bings所在控件的事件处理
|
||||||
|
* 可定义binds所在控件的子（孙）控件的事件处理
|
||||||
|
* 可定义应用控件树上任何‘wid’对应的控件的事件处理
|
||||||
|
* 同一个控件的同一个事件，使用多个处理方法按定义顺序依次处理
|
||||||
|
|
||||||
|
详细事件处理请参看[bricks的事件处理](event.md)
|
||||||
|
|
||||||
77
docs/ai/docxviewer.md
Normal file
77
docs/ai/docxviewer.md
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
# DOCXviewer
|
||||||
|
|
||||||
|
**控件功能**：用于在网页中嵌入并显示 `.docx` 文档内容，通过 Mammoth.js 将 Word 文档转换为 HTML 并渲染。
|
||||||
|
**类型**：普通控件（继承自容器控件 VBox）
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `url` | String | 指向 .docx 文件的 URL 地址，将在 `on_parent` 事件触发时加载 |
|
||||||
|
|
||||||
|
> ⚠️ 注意：需提前引入 Mammoth.js 库（如 CDN 资源）才能正常工作。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 回调参数 | 说明 |
|
||||||
|
|--------|----------|---------|------|
|
||||||
|
| `on_parent` | 控件被添加到父容器后触发 | - | 自动调用 `set_url(this.url)` 开始加载并渲染文档 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# EXCELviewer
|
||||||
|
|
||||||
|
**控件功能**：用于查看 Excel 文件（`.xlsx` 或 `.xls`），支持多工作表切换展示表格数据。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `url` | String | 指向 Excel 文件的 URL 地址，在 `on_parent` 时加载 |
|
||||||
|
| `height` | String | 默认设置为 `"100%"`，确保高度占满父容器 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 回调参数 | 说明 |
|
||||||
|
|--------|----------|---------|------|
|
||||||
|
| `on_parent` | 控件挂载到父节点后 | - | 触发 `set_url(url)` 加载 Excel 数据 |
|
||||||
|
| `click`（子 Text 控件） | 点击某个 sheet 标签时 | sheetname, widget | 切换并显示对应的工作表内容 |
|
||||||
|
|
||||||
|
> ✅ 支持特性：
|
||||||
|
> - 动态生成工作表标签栏（HBox + Text）
|
||||||
|
> - 可滚动区域展示表格 HTML 内容（VScrollPanel）
|
||||||
|
> - 当前选中标签高亮（CSS 类 `selected`）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PDFviewer
|
||||||
|
|
||||||
|
**控件功能**：用于在页面中内嵌显示 PDF 文件，逐页渲染为 Canvas 图像。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `url` | String | PDF 文件的 URL 地址，由 `set_url` 使用 |
|
||||||
|
| `width` | String | 强制设为 `'100%'`，以适配父容器宽度 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 回调参数 | 说明 |
|
||||||
|
|--------|----------|---------|------|
|
||||||
|
| `on_parent` | 控件挂载完成后 | - | 调用 `set_url()` 启动 PDF 加载与渲染 |
|
||||||
|
| （内部 Promise） | PDF 成功加载后 | pdf 对象 | 遍历所有页调用 `add_page_content(page)` |
|
||||||
|
| （错误处理） | 加载失败时 | error | 输出 `'error'` 到控制台 |
|
||||||
|
|
||||||
|
> ✅ 渲染细节：
|
||||||
|
> - 使用 `pdfjsLib`（Mozilla PDF.js）解析和绘制 PDF
|
||||||
|
> - 每页使用 `<canvas>` 渲染，缩放比例固定为 `1.5`
|
||||||
|
> - 页面之间插入 `Splitter` 分隔条（视觉或布局用途）
|
||||||
|
|
||||||
|
> ⚠️ 注意：需确保全局已定义 `pdfjsLib` 并正确配置。
|
||||||
|
|
||||||
46
docs/ai/dynamicaccordion.md
Normal file
46
docs/ai/dynamicaccordion.md
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
# DynamicAccordion
|
||||||
|
|
||||||
|
**控件功能**: 动态可折叠列表控件，支持分页加载、远程数据获取、内容懒加载、增删改查操作及工具栏自定义。适用于展示大量可折叠结构化数据。
|
||||||
|
**类型**: 容器控件
|
||||||
|
**父类控件**: bricks.VScrollPanel
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `data_url` | String | 数据请求地址，用于加载列表数据 |
|
||||||
|
| `data_method` | String | 请求方法（GET/POST等），默认为 GET |
|
||||||
|
| `cache_limit` | Number | 缓存页数限制，控制内存中保留的数据页数量 |
|
||||||
|
| `page_rows` | Number | 每页请求的数据行数 |
|
||||||
|
| `row_cheight` | Number | 每行高度系数，默认为 `1.5` |
|
||||||
|
| `record_view` | Object/String | 每条记录在标题区的渲染模板（widget 描述或名称） |
|
||||||
|
| `content_rely_on` | String | 内容是否展开依赖的字段名 |
|
||||||
|
| `content_rely_value` | Any | 当 `content_rely_on` 字段等于该值时才加载内容 |
|
||||||
|
| `editable` | Object | 编辑配置对象，包含新增、修改、删除相关设置 |
|
||||||
|
| `.add_icon` | String | 新增按钮图标路径 |
|
||||||
|
| `.update_icon` | String | 更新按钮图标路径 |
|
||||||
|
| `.delete_icon` | String | 删除按钮图标路径 |
|
||||||
|
| `.form_cheight` | Number | 表单高度系数 |
|
||||||
|
| `.new_data_url` | String | 添加新记录提交地址 |
|
||||||
|
| `.update_data_url` | String | 更新记录提交地址 |
|
||||||
|
| `.delete_data_url` | String | 删除记录提交地址 |
|
||||||
|
| `fields` | Array | 字段定义数组，用于表单和数据显示 |
|
||||||
|
| `record_toolbar` | Object | 每行右侧工具栏配置（图标按钮组） |
|
||||||
|
| `record_toolbar_collapsable` | Boolean | 工具栏是否可折叠（暂未实现细节） |
|
||||||
|
| `header` | Object | 表头配置（预留） |
|
||||||
|
| `content_view` | Object/String | 展开后内容区域的渲染模板 |
|
||||||
|
| `title` | String | 控件顶部标题文本（可选） |
|
||||||
|
| `description` | String | 控件描述文本（可选） |
|
||||||
|
| `toolbar` | Object | 顶部工具栏配置（传给 `IconTextBar`） |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 参数 |
|
||||||
|
|--------|----------|------|
|
||||||
|
| `row_selected` | 用户点击某一行时触发 | `info`: 被点击的 `AccordionInfo` 实例 |
|
||||||
|
| 自定义事件（通过 `record_toolbar.tools[i].name` 定义） | 点击行内自定义工具按钮时触发 | `record`: 当前行数据对象 |
|
||||||
|
| `conformed`（内部使用） | 删除确认弹窗用户确认后触发 | 传递至 `delete_record_act` 方法处理 |
|
||||||
|
| `submited`（嵌套表单） | 新增/编辑表单提交成功后触发 | 响应数据 `event.params` |
|
||||||
|
| `cancel`（嵌套表单） | 表单取消操作时触发 | 关闭当前编辑区域 |
|
||||||
|
|
||||||
|
> 注：部分事件为子组件触发并由 `DynamicAccordion` 监听处理，例如 `submited`, `cancel`, `click` 等。
|
||||||
27
docs/ai/dynamiccolumn.md
Normal file
27
docs/ai/dynamiccolumn.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# DynamicColumn
|
||||||
|
|
||||||
|
控件功能：动态列布局容器，根据屏幕尺寸和配置自动调整网格列数与列宽，适用于响应式布局场景。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：Layout
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------------|--------|------|
|
||||||
|
| `col_cwidth` | Number | （可选）每列的字符宽度单位（基于 `charsize`），用于计算列宽。若未设置且无 `col_width`，默认为 20。 |
|
||||||
|
| `col_width` | Number | （可选）每列的固定像素宽度。优先级低于 `col_cwidth`。 |
|
||||||
|
| `col_cgap` | Number | （可选）列之间的间隙大小（以 `charsize` 为单位），默认值为 `0.5`。 |
|
||||||
|
| `mobile_cols`| Number | （可选）在移动端竖屏模式下强制使用的列数，默认值为 `1`。 |
|
||||||
|
|
||||||
|
> 注意：如果 `col_cwidth` 和 `col_width` 都未提供，则 `col_cwidth` 默认设为 20。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`on_parent`**
|
||||||
|
当控件被添加到父容器时触发，用于初始化或重新计算列宽。
|
||||||
|
|
||||||
|
- **`resize`**
|
||||||
|
浏览器窗口尺寸变化时触发，动态调整 `gridTemplateColumns` 和 `gap` 以适应新尺寸。
|
||||||
|
|
||||||
|
- **`charsize`**（来自 `bricks.app`）
|
||||||
|
字符尺寸发生变化时触发（通常因字体或缩放改变），用于重新计算基于字符单位的列宽和间隙。
|
||||||
512
docs/ai/event.md
Normal file
512
docs/ai/event.md
Normal file
@ -0,0 +1,512 @@
|
|||||||
|
# bricks控件的事件处理
|
||||||
|
bricks控件的事件处理是在控件描述数据的binds属性中添加事件处理数据来实现的
|
||||||
|
## bricks支持的事件处理类型
|
||||||
|
* urlwidget
|
||||||
|
* method
|
||||||
|
* script
|
||||||
|
* registerfunction
|
||||||
|
* event
|
||||||
|
|
||||||
|
例外还支持一种混合型
|
||||||
|
|
||||||
|
* actions
|
||||||
|
|
||||||
|
在事件处理定义中使用"actiontype"属性来定义事件处理类型
|
||||||
|
|
||||||
|
## 事件处理定义数据要素
|
||||||
|
|
||||||
|
所有事件处理类型都有的数据要素有
|
||||||
|
### wid
|
||||||
|
事件发起控件id，“self"表示是binds属性所在的控件，id支持“a.b.c“格式，说明从当前位置先找到id为a的控件，再从a位置找到控件id为b的控件，再从b位置找到id为c的控件
|
||||||
|
|
||||||
|
#### 特殊约定的控件id
|
||||||
|
* self -- binds所在的控件
|
||||||
|
* root -- <body>下的第一个控件
|
||||||
|
* body/app -- bricks.app
|
||||||
|
* -x -- 从当前位置向上找祖先类控件id为x的控件
|
||||||
|
|
||||||
|
### event
|
||||||
|
支持控件的html原生事件以及控件类中定义的事件，或者是event事件处理类型中dispatch_event属性中定义的事件
|
||||||
|
|
||||||
|
### actiontype
|
||||||
|
指定事件处理类型，支持“urlwidget", "method", "script", "registerfunction", "event"， 或者“actions”混合型
|
||||||
|
|
||||||
|
### conform
|
||||||
|
对象类型，确认控件的options，如存在，则此绑定需要用户确认后再执行
|
||||||
|
|
||||||
|
### datawidget
|
||||||
|
给事件添加动态参数时定义获取动态参数的控件的id，关于datawidget规则请查看[控件id](widgetid.md)
|
||||||
|
|
||||||
|
如果不需要使用动态参数，那么datawidget, datamethod, datascript, dataparams这几个属性可以不设置。
|
||||||
|
|
||||||
|
### datamethod
|
||||||
|
获取动态参数的方法
|
||||||
|
### datascript
|
||||||
|
获取动态参数的脚本
|
||||||
|
### dataparams
|
||||||
|
获取动态参数时需给定的参数, 可选，对象类型，k,v形式给定参数
|
||||||
|
|
||||||
|
### popup_options
|
||||||
|
当target为“Popup“或“PopupWindow”时，定义Popup或PopupWindow的参数
|
||||||
|
|
||||||
|
#### dismiss_events
|
||||||
|
字符串数组，每个字符串定义一个Popup, PopupWindow的子控件的事件，这些事件发生时将导致Popup, PopupWindow关闭
|
||||||
|
|
||||||
|
#### eventpos
|
||||||
|
Popup, PopupWindow窗体移动到鼠标位置
|
||||||
|
|
||||||
|
### 获取动态参数说明
|
||||||
|
绑定任务获取实时数据作为参数，需要给定以下属性：
|
||||||
|
* datawidget：字符串或控件类型，获取实时数据的控件
|
||||||
|
* datamethod：字符串类型，控件的方法，使用params作为参数调用，
|
||||||
|
获取实时数据的方法
|
||||||
|
* datascript：字符串类型， js脚本，使用return返回数据
|
||||||
|
* dataparams：参数
|
||||||
|
datamethod 优先datascript，从datawidget控件中通过datamethod
|
||||||
|
|
||||||
|
### target
|
||||||
|
事件处理的目标控件， 支持下面形式的target定义：
|
||||||
|
* 目标控件实例对象
|
||||||
|
* 字符串，且等于“Popup“
|
||||||
|
* 字符串，且等于”PopupWindow“
|
||||||
|
* 其他字符串（控件对象的id）
|
||||||
|
当actiontype为"urlwidget"时，target应该是一个容器控件，所生成的控件将插入或替代到“target”所代表的对象中，如果actiontype是其他类型,则在此对象中执行方法，脚本，定义函数，或定义事件
|
||||||
|
|
||||||
|
### conform
|
||||||
|
如果一个事件处理需要用户确认，可以在事件处理中指定一个conform属性来引发，当此事件发生时，会弹出一个确认窗口，用户确认后才会处理此事件，否则不处理
|
||||||
|
|
||||||
|
不同的事件处理方法也有部分不同的事件处理属性，一下分别说明：
|
||||||
|
|
||||||
|
### urlwidget方法
|
||||||
|
urlwidget事件处理方法是从后台获取一个控件描述文件，动态生成bricks控件，并将控件添加（添加，添加或替换）到事件target指定的控件中。
|
||||||
|
|
||||||
|
urlwidget绑定需要一个options属性和一个mode属性，在此属性中需要
|
||||||
|
* url：字符串类型， 获取desc数据的url
|
||||||
|
* mehtod：字符串类型，url调用的方法，缺省”GET“
|
||||||
|
* params：对象类型，调用的参数, 从datawidget获取的数据影响此属性
|
||||||
|
绑定创建的控件添加到target控件中
|
||||||
|
|
||||||
|
例子
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{
|
||||||
|
"width":"100%",
|
||||||
|
"height":"100%"
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"HBox",
|
||||||
|
"options":{
|
||||||
|
"height":"40px"
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"id":"replace",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"replace mode"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"insert",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"insert mode"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"append",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"append mode"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"main",
|
||||||
|
"widgettype":"Filler"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"replace",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"urlwidget",
|
||||||
|
"target":"main",
|
||||||
|
"options":{
|
||||||
|
"url":"{{entire_url('replace_text.ui')}}",
|
||||||
|
"params":{
|
||||||
|
"text":"Insert before"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid":"insert",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"urlwidget",
|
||||||
|
"target":"main",
|
||||||
|
"options":{
|
||||||
|
"url":"{{entire_url('insert_text.ui')}}",
|
||||||
|
"params":{
|
||||||
|
"text":"Insert before"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mode":"insert"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid":"append",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"urlwidget",
|
||||||
|
"target":"main",
|
||||||
|
"options":{
|
||||||
|
"url":"{{entire_url('subtext.ui')}}",
|
||||||
|
"params":{
|
||||||
|
"text":"Append After"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mode":"append"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
在上述例子中，我们使用了一个竖向排列的容器（VBox），并在此容器中添加了两个字控件，分别是一个横向排列的容器HBox，和一个填充器（Filler）
|
||||||
|
并在横向排列的子控件中添加了3个按钮控件, 每个Button定义了id， 分别是replace，insert，和append，在主控件（VBox）的binds中分别定义了三个事件处理，分别对应于3个Button的click事件，演示了三种子控件在target控件中插入的模式（替换所有子控件，插入在已有子控件之前，添加到已有子控件之后）
|
||||||
|
|
||||||
|
### method方法
|
||||||
|
需要指定target参数和method参数，
|
||||||
|
* target：类型为字符串或控件类型，
|
||||||
|
如果是字符串，使用“getWidgetById”函数获取控件实例。
|
||||||
|
* method：字符串，target实例的方法，
|
||||||
|
* params：传递给方法的参数
|
||||||
|
method绑定方法，将事件绑定到target控件的一个方法，并用params传递参数
|
||||||
|
|
||||||
|
例子
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{
|
||||||
|
"width":"100%",
|
||||||
|
"height":"100%"
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"HBox",
|
||||||
|
"options":{
|
||||||
|
"height":"40px"
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"id":"changetext",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"dynsize":false,
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"Change text"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"smaller",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"dynsize":false,
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"Small size"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"larger",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"dynsize":false,
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"larger size"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Filler",
|
||||||
|
"options":{},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"id":"text_1",
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"dynsize":true,
|
||||||
|
"text":"original text"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"changetext",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"method",
|
||||||
|
"target":"text_1",
|
||||||
|
"params":"new text",
|
||||||
|
"method":"set_text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid":"smaller",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"method",
|
||||||
|
"target":"app",
|
||||||
|
"method":"textsize_smaller"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid":"larger",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"method",
|
||||||
|
"target":"app",
|
||||||
|
"method":"textsize_bigger"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
上述例子中，三个Button分别驱动app中textsize_smaller()，textsize_bigger()来改变bricks字符大小，从而影响到text_1控件的显示大小
|
||||||
|
|
||||||
|
### script方法
|
||||||
|
绑定脚本，此方法将事件绑定到一个脚本，支持以下属性
|
||||||
|
* script：字符串，脚本正文
|
||||||
|
* params：对象类型，脚本可以访问params变量来获取参数。
|
||||||
|
脚本中可以使用以下变量：
|
||||||
|
* this 事件处理中target对应的控件实例
|
||||||
|
* params：参数对象，datawidget获得的数据会添加到params中
|
||||||
|
|
||||||
|
例子
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"id":"insert",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"click me"
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"target":"self",
|
||||||
|
"script":"console.log(this, params, event);"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
在上述例子中定义了使用“script”事件处理方法来处理Button的“click事件”， 在click后在控制台上把事件传过来的参数显示出来
|
||||||
|
|
||||||
|
### registerfunction方法
|
||||||
|
事件绑定一个注册函数， 参看[RegisterFunction](registerfunction.md)
|
||||||
|
支持以下属性：
|
||||||
|
* rfname：字符串，已注册的函数名称
|
||||||
|
* params：对象类型，调用注册函数时作为参数传递给注册函数。
|
||||||
|
|
||||||
|
```
|
||||||
|
<link rel="stylesheet" href="http://localhost:80/bricks/css/bricks.css">
|
||||||
|
|
||||||
|
<!-- support IE8 (for Video.js versions prior to v7) -->
|
||||||
|
<script src="http://localhost:80/bricks/3parties/videojs-ie8.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="http://localhost:80/bricks/3parties/marked.min.js"></script>
|
||||||
|
<script src="http://localhost:80/bricks/3parties/xterm.js"></script>
|
||||||
|
<script src="http://localhost:80/bricks/3parties/video.min.js"></script>
|
||||||
|
<script src="http://localhost:80/bricks/3parties/recorder.wav.min.js"></script>
|
||||||
|
<!--- <script src="http://localhost:80/bricks/3parties/videojs-contrib-hls.min.js"></script> --->
|
||||||
|
<script src="http://localhost:80/bricks/bricks.js"></script>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
if (bricks.is_mobile()){
|
||||||
|
alert('wh=' + window.innerWidth + ':' + window.innerHeight);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
var myfunc = function(params){
|
||||||
|
this.set_text(params.text);
|
||||||
|
}
|
||||||
|
bricks.RF.register('setText', myfunc);
|
||||||
|
const opts = {
|
||||||
|
"widget": {
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{
|
||||||
|
"width":"100%",
|
||||||
|
"height":"100%"
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"HBox",
|
||||||
|
"options":{
|
||||||
|
"height":"40px"
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"id":"changetext",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"dynsize":false,
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"Change text"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"smaller",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"dynsize":false,
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"Small size"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"larger",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"dynsize":false,
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"larger size"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Filler",
|
||||||
|
"options":{},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"id":"text_1",
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"dynsize":true,
|
||||||
|
"text":"original text"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"changetext",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"registerfunction",
|
||||||
|
"target":"text_1",
|
||||||
|
"params":{
|
||||||
|
"text":"new text"
|
||||||
|
},
|
||||||
|
"rfname":"setText"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid":"smaller",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"method",
|
||||||
|
"target":"app",
|
||||||
|
"method":"textsize_smaller"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid":"larger",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"method",
|
||||||
|
"target":"app",
|
||||||
|
"method":"textsize_bigger"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} };
|
||||||
|
const app = new bricks.App(opts);
|
||||||
|
app.run();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
在上述例子中，使用bricks.RF注册了一个setText函数， 并在主控件的binds区域定义了当changetext按钮点击后调用注册函数“setText”来处理
|
||||||
|
|
||||||
|
### event方法
|
||||||
|
绑定事件，需指定target，触发target对象的一个事件
|
||||||
|
支持以下属性
|
||||||
|
dispatch_event：需触发的事件名
|
||||||
|
params：传递给事件的参数，处理函数可以使用evemt.params获得此参数
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"id":"btn1",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"label":"press me"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"txt1",
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"otext":"I will dispatch a event when btn1 pressed",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"btn1",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"event",
|
||||||
|
"target":"txt1",
|
||||||
|
"dispatch_event":"gpc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"wid":"txt1",
|
||||||
|
"event":"gpc",
|
||||||
|
"actiontype":"script",
|
||||||
|
"target":"self",
|
||||||
|
"script":"alert('yield');"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
上述例子中，在主控件的binds区域定义了btn1的按钮点击后使用event处理类型来处理btn1的click事件，即转而触发“txt1”正文控件的“gpc”事件，并定义了当”txt1“正文控件在gpc事件发生后使用script事件处理方法alert一个消息
|
||||||
|
|
||||||
|
## 定义需要确认的事件处理
|
||||||
|
有时候我们需要客户确认后在处理事件，如果用户不确认，则放弃处理事件，比如在删除数据时我们通常需要用户确认一下
|
||||||
|
例子
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"id":"insert",
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"width":"80px",
|
||||||
|
"i18n":true,
|
||||||
|
"label":"click me"
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"conform":{
|
||||||
|
"title":"conformtest",
|
||||||
|
"message":"测试事件处理前的用户确认功能，确认码？"
|
||||||
|
},
|
||||||
|
"target":"self",
|
||||||
|
"script":"alert('确认过眼神!')"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
上述例子中定义了Button的click事件使用script事件处理方式来处理，但是在处理前需要显示信息，让用户确认是否继续，如果用户放弃则不处理事件，确认后正常的处理事件。
|
||||||
|
|
||||||
22
docs/ai/factory.md
Normal file
22
docs/ai/factory.md
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
# Factory_
|
||||||
|
|
||||||
|
## 控件功能
|
||||||
|
`Factory_` 是一个用于注册和获取控件（或组件）的工厂类，提供全局唯一的控件注册与管理机制。通过该类可以动态地注册自定义控件，并在需要时根据名称获取对应的控件构造函数或类。
|
||||||
|
|
||||||
|
- **类型**：普通控件（工具类/管理器）
|
||||||
|
- **父类控件**：无（原生 JavaScript 类）
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
- 无显式外部传参的构造函数。
|
||||||
|
- 内部初始化时创建一个 `widgets_kv` 对象，用于存储注册的控件映射表：
|
||||||
|
- 初始化包含一个保留键 `_t_`，值为 `1`，可能用于版本标识或存在性检测。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
- 本控件不触发任何 UI 事件。
|
||||||
|
- 提供以下方法作为核心行为接口：
|
||||||
|
- `register(name: string, widget: function/class)`
|
||||||
|
将指定名称 `name` 与控件类/函数 `widget` 进行绑定注册。
|
||||||
|
- `get(name: string): function/class | null`
|
||||||
|
根据名称查询已注册的控件，若不存在则返回 `null`。
|
||||||
|
|
||||||
|
> 注：此控件通常作为底层基础设施使用，被 `bricks` 框架用来统一管理所有可视化控件或业务组件的生命周期与访问入口。
|
||||||
117
docs/ai/floaticonbar.md
Normal file
117
docs/ai/floaticonbar.md
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
# IconBar
|
||||||
|
|
||||||
|
控件功能：创建一个图标工具栏，包含多个可点击的SVG图标按钮，支持选中状态和事件分发。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.HBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `opts.cheight` | Number | 子控件高度（字符单位），默认值为 `2` |
|
||||||
|
| `opts.rate` | Number | 缩放比例，影响图标大小，默认值为 `1` |
|
||||||
|
| `opts.margin` | String | 图标之间的左右边距，CSS格式（如 `'10px'`） |
|
||||||
|
| `opts.tools` | Array | 工具项数组，每个工具项是一个对象，包含以下字段：<br>- `name`: 工具名称（用于标识和事件）<br>- `icon`: SVG图标的URL<br>- `rate`: 当前图标的缩放比例（可选）<br>- `dynsize`: 是否动态调整尺寸（布尔值）<br>- `tip`: 提示文本（可选） |
|
||||||
|
|
||||||
|
> 如果未提供 `cheight` 或 `rate`，会自动设置默认值。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 携带数据 |
|
||||||
|
|--------|---------|--------|
|
||||||
|
| `desc.name`（即 `tools[i].name`） | 点击某个图标时触发，事件名为该图标的 `name` 字段 | 传递对应图标的 `desc` 对象 |
|
||||||
|
| `command` | 所有图标点击都会触发此统一事件 | 传递当前图标的 `desc` 对象 |
|
||||||
|
|
||||||
|
> 事件通过 `dispatch` 分发，可用于外部监听具体命令或通用操作。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# IconTextBar
|
||||||
|
|
||||||
|
控件功能：扩展自 `IconBar`，每个工具项显示为“图标 + 文本”组合形式，适用于需要标签说明的工具栏。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.IconBar`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
继承 `IconBar` 的所有参数，并增强 `tools` 数组中每一项的支持：
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `opts.tools[i].label` | String | 显示在图标旁边的文本标签 |
|
||||||
|
| `opts.tools[i].tip` | String | 鼠标悬停提示文本，会应用到整个图标+文本容器上 |
|
||||||
|
| 其他参数同 `IconBar` | —— | 支持 `name`, `icon`, `rate`, `dynsize` 等 |
|
||||||
|
|
||||||
|
> 每个工具项会被构造成一个水平布局（`HBox`），内部依次添加 `Svg` 和 `Text` 控件。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
与 `IconBar` 完全一致：
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 携带数据 |
|
||||||
|
|--------|---------|--------|
|
||||||
|
| `desc.name` | 点击某一项时触发，事件名为其 `name` | 对应的 `desc` 对象 |
|
||||||
|
| `command` | 所有点击均触发此事件 | 当前项的 `desc` 对象 |
|
||||||
|
|
||||||
|
> 事件绑定在整体 `HBox` 上，点击任意部分（图标或文字）都会触发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# FloatIconBar
|
||||||
|
|
||||||
|
控件功能：浮动式图标工具栏，初始只显示一个“外挂图标”，鼠标移入时展开完整的 `IconBar`。常用于侧边悬浮工具栏。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.HBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `opts` | Object | 传递给内部 `IconBar` 的配置对象，结构同 `IconBar` 的 `opts.tools` 等 |
|
||||||
|
| 内部使用 `bricks_resource('imgs/float-out.png')` | —— | 固定的浮出按钮图标 |
|
||||||
|
|
||||||
|
> 实际工具项由传入的 `opts` 构建内部 `IconBar` 使用。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
与内部 `IconBar` 保持一致：
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 携带数据 |
|
||||||
|
|--------|---------|--------|
|
||||||
|
| `desc.name` | 用户点击展开后的某个图标时触发 | 对应图标的 `desc` 对象 |
|
||||||
|
| `command` | 所有图标点击都会触发 | 当前图标的 `desc` 对象 |
|
||||||
|
|
||||||
|
> 事件来自内嵌的 `IconBar` 实例，自动透传。
|
||||||
|
|
||||||
|
此外还具备行为事件：
|
||||||
|
- `mousemove` 在浮出图标上触发展开菜单
|
||||||
|
- 页面任意位置 `click` 触发收起菜单（通过监听 `bricks.Body`）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# FloatIconTextBar
|
||||||
|
|
||||||
|
控件功能：浮动式“图标+文本”工具栏，是 `FloatIconBar` 的扩展版本，展开后显示带文字标签的工具项。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.FloatIconBar`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
与 `FloatIconBar` 相同：
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `opts` | Object | 包含 `tools` 数组及其他配置，在内部构建 `IconTextBar` 时使用 |
|
||||||
|
|
||||||
|
> 内部调用 `build_bar(opts)` 创建的是 `IconTextBar` 实例，因此支持 `label`、`tip` 等文本相关属性。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
与 `IconTextBar` 一致：
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 携带数据 |
|
||||||
|
|--------|---------|--------|
|
||||||
|
| `desc.name` | 点击展开后的某一项时触发 | 该项的 `desc` 对象 |
|
||||||
|
| `command` | 所有点击都触发 | 当前项的 `desc` 对象 |
|
||||||
|
|
||||||
|
> 所有事件均由内部 `IconTextBar` 实例发出，自动向上冒泡。
|
||||||
58
docs/ai/gobang.md
Normal file
58
docs/ai/gobang.md
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
# GobangPoint
|
||||||
|
|
||||||
|
控件功能：表示五子棋棋盘中的一个棋位点，根据状态显示为空、黑子或白子，并支持鼠标悬停效果。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：`bricks.Image`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `p_status` | Number | 棋位状态：0 表示空，1 表示黑子，2 表示白子 |
|
||||||
|
| `p_x` | Number | 水平位置，取值范围为 1 到 15 |
|
||||||
|
| `p_y` | Number | 垂直位置，取值范围为 1 到 15 |
|
||||||
|
| `tip` | String (可选) | 鼠标提示文本 |
|
||||||
|
|
||||||
|
> 注：构造函数会自动调用 `calc_url()` 根据位置和状态生成对应的图片路径，并通过 `set_url()` 设置图像源。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`mouseover`**
|
||||||
|
当鼠标进入控件区域时触发，调用 `set_current_position(true)`，设置当前坐标高亮样式（添加 `curpos` CSS 类）。
|
||||||
|
|
||||||
|
- **`mouseout`**
|
||||||
|
当鼠标离开控件区域时触发，调用 `set_current_position(false)`，移除高亮样式。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Gobang
|
||||||
|
|
||||||
|
控件功能：实现一个 15×15 的五子棋游戏界面容器，负责渲染棋盘、管理棋位状态、响应玩家回合逻辑。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
无显式外部传参，内部初始化如下：
|
||||||
|
|
||||||
|
- 自动创建一个 `Filler` 占位控件用于自适应布局
|
||||||
|
- 创建并渲染一个 15×15 的棋盘点阵（使用 `GobangPoint`）
|
||||||
|
- 绑定窗口尺寸变化响应，动态调整每个棋格大小以保持正方形且填满可用空间
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`element_resize`（绑定在 `filler` 上）**
|
||||||
|
当 `filler` 的 DOM 元素尺寸发生变化时触发，调用 `resize_area()` 方法重新计算每个棋格的宽高，确保棋盘等比缩放适配容器。
|
||||||
|
|
||||||
|
### 自定义方法说明
|
||||||
|
|
||||||
|
- `render_empty_area()`
|
||||||
|
初始化并渲染空白棋盘，创建嵌套的 `VBox` 和 `HBox` 结构来排列 15×15 的 `GobangPoint` 实例，并存储于 `this.area[i][j]` 中供后续操作。
|
||||||
|
|
||||||
|
- `resize_area()`
|
||||||
|
根据 `filler` 的实际尺寸动态计算每个棋格的大小（取最小边长除以 15），并对所有 `GobangPoint` 设置统一的宽高样式。
|
||||||
|
|
||||||
|
- `inform_go(party)`
|
||||||
|
（当前为空实现）用于通知指定方（如 `'black'` 或 `'white'`）进行下一步操作，可用于集成 AI 或网络对战逻辑。
|
||||||
|
|
||||||
|
> 注：该控件通过 `bricks.Factory.register('Gobang', bricks.Gobang);` 注册，可在模板中以 `<widget type="Gobang"/>` 形式使用。
|
||||||
21
docs/ai/html.md
Normal file
21
docs/ai/html.md
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# Html
|
||||||
|
|
||||||
|
控件功能：用于在页面中插入自定义的 HTML 内容。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：`bricks.JsWidget`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `html` (String)
|
||||||
|
要插入到控件中的 HTML 字符串内容。该内容将被设置为控件 DOM 元素的 `innerHTML`。
|
||||||
|
|
||||||
|
示例：
|
||||||
|
```js
|
||||||
|
new bricks.Html({
|
||||||
|
html: '<div style="color: red;">这是一个红色的文本</div>'
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无主要事件（继承自父类的通用事件，如 `init`, `render` 等，但本控件未定义特定事件）。
|
||||||
34
docs/ai/iconbarpage.md
Normal file
34
docs/ai/iconbarpage.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
# IconbarPage
|
||||||
|
|
||||||
|
控件功能：一个带有图标工具栏的页面容器，支持在顶部或底部放置图标工具栏（IconTextBar），点击工具项可动态加载并显示对应的内容组件。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts`：配置对象，包含以下属性：
|
||||||
|
- `bar_opts` *(Object)*：图标工具栏的配置选项，传递给 `bricks.IconTextBar`。
|
||||||
|
- `margin` *(String | Number)*：工具栏的外边距。
|
||||||
|
- `rate` *(Number)*：布局中所占比例。
|
||||||
|
- `tools` *(Array)*：工具项数组，每个工具项为一个对象，结构如下：
|
||||||
|
- `name` *(String)*：工具的名称，用于标识。
|
||||||
|
- `icon` *(String)*：图标的类名或路径。
|
||||||
|
- `label` *(String, 可选)*：工具的文本标签。
|
||||||
|
- `tip` *(String)*：鼠标悬停时的提示信息。
|
||||||
|
- `dynsize` *(Boolean)*：是否动态调整大小。
|
||||||
|
- `rate` *(Number)*：该工具在布局中的占比。
|
||||||
|
- `content` *(Object | String)*：描述要加载的子控件的配置或类型名，用于动态构建内容。
|
||||||
|
- `bar_at` *(String)*：指定工具栏位置，可选值为 `'top'` 或 `'bottom'`，默认为 `'top'`。
|
||||||
|
|
||||||
|
> 注意：构造函数会自动设置 `height: '100%'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `command` 事件：
|
||||||
|
- 来源：内部 `IconTextBar` 实例触发。
|
||||||
|
- 回调参数：`event.params` 包含被点击的 `tool` 对象。
|
||||||
|
- 行为：当用户点击某个工具图标时，`command_handle` 方法会被调用，并根据 `tool.content` 动态创建内容组件，替换当前显示区域的内容。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
bar.bind('command', this.command_handle.bind(this))
|
||||||
|
```
|
||||||
33
docs/ai/iframe.md
Normal file
33
docs/ai/iframe.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
# NewWindow
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
- **控件功能**：打开一个新浏览器窗口，加载指定 URL。
|
||||||
|
- **控件类型**：普通控件
|
||||||
|
- **父类控件**：`bricks.JsWidget`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|--------|------|------|
|
||||||
|
| `url` | string | 是 | 要在新窗口中打开的页面 URL。 |
|
||||||
|
| `name` | string | 否 | 新窗口的名称（即 `window.open` 的第二个参数），默认为 `'_blank'`，表示新建标签页。 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
无主要事件。该控件在初始化时立即执行 `window.open()`，不提供可监听的事件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Iframe
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
- **控件功能**：创建一个内嵌的 iframe 框架，用于在当前页面中嵌入另一个网页，支持设置高度并自动加载指定 URL。
|
||||||
|
- **控件类型**：普通控件
|
||||||
|
- **父类控件**：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|----------|--------|------|------|
|
||||||
|
| `url` | string | 是 | 要嵌入的 iframe 页面地址。 |
|
||||||
|
| `height` | string 或 number | 否 | iframe 的高度，默认值为 `'100%'`。 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
无主要事件。该控件在构造函数中直接设置 `src` 属性，加载页面，未定义自定义事件。
|
||||||
109
docs/ai/image.md
Normal file
109
docs/ai/image.md
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
# Image
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
用于显示图片的控件。支持设置图片 URL、默认错误备用图，以及将当前图像内容导出为 Base64 字符串。
|
||||||
|
**类型：** 普通控件
|
||||||
|
**父类控件：** `bricks.JsWidget`
|
||||||
|
|
||||||
|
### 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `url` | String | 图片的 URL 地址，构造时会自动设置到 `<img>` 元素的 `src` 属性 |
|
||||||
|
| `default_url` | String | 当图片加载失败时，自动切换为此 URL 显示备用图 |
|
||||||
|
| `height` | Number (可选) | 设置图片高度（可由 CSS 或 DOM 自动处理） |
|
||||||
|
| `width` | Number (可选) | 设置图片宽度（可由 CSS 或 DOM 自动处理） |
|
||||||
|
|
||||||
|
> 注：所有参数通过 `opts` 对象传入构造函数。
|
||||||
|
|
||||||
|
### 主要事件
|
||||||
|
|
||||||
|
无显式定义事件，但内部使用了原生 `<img>` 的 `onerror` 事件来处理加载失败情况：
|
||||||
|
|
||||||
|
- **`onerror` → 触发 `set_default_url()`**
|
||||||
|
当图片加载失败时，自动替换为 `default_url` 指定的备用图片，并清除错误监听以防止循环触发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Icon
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
基于 `Image` 扩展的图标控件，支持字符单位尺寸缩放（`charsize` 基础）、动态大小调整和布局适配。常用于界面中与文字对齐的小图标。
|
||||||
|
**类型：** 普通控件
|
||||||
|
**父类控件：** `bricks.Image`
|
||||||
|
|
||||||
|
### 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `url` | String | 图标图片地址，继承自 `Image` |
|
||||||
|
| `rate` | Number | 缩放倍率，默认为 `1`，实际大小 = `charsize * rate` |
|
||||||
|
| `cwidth` | Number | 占据的字符宽度，默认为 `1` |
|
||||||
|
| `cheight` | Number | 占据的字符高度，默认为 `1` |
|
||||||
|
| `dynsize` | Boolean | 是否启用动态尺寸调整，默认为 `true`，根据 `charsize_sizing()` 调整尺寸 |
|
||||||
|
|
||||||
|
> 注：`charsize` 来源于 `bricks.app.charsize`，是应用级字体基准单位。
|
||||||
|
|
||||||
|
### 主要事件
|
||||||
|
|
||||||
|
无独立事件定义，行为主要在初始化和属性变更后通过 `options_parse()` 触发重绘。
|
||||||
|
|
||||||
|
- **`options_parse()`**
|
||||||
|
在控件初始化时调用，用于解析并应用尺寸相关选项，包括设置 URL 和调整大小。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# StatedIcon
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
状态图标控件，可依据不同状态切换对应图标图像。适用于如开关状态、多态指示器等场景。
|
||||||
|
**类型：** 普通控件
|
||||||
|
**父类控件：** `bricks.Icon` （间接继承 `Image`）
|
||||||
|
|
||||||
|
### 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `states` | Array<{state: String, url: String}> | 状态数组，每个对象包含一个状态名和对应的图片 URL |
|
||||||
|
| `state` | String | 初始状态名称；若未指定，则默认使用 `states[0].state` |
|
||||||
|
| `rate`, `cwidth`, `cheight`, `dynsize` | 同上 | 继承自 `Icon` 的布局与样式参数 |
|
||||||
|
|
||||||
|
> 示例：
|
||||||
|
> ```js
|
||||||
|
> {
|
||||||
|
> states: [
|
||||||
|
> { state: 'normal', url: 'icon-normal.png' },
|
||||||
|
> { state: 'active', url: 'icon-active.png' }
|
||||||
|
> ],
|
||||||
|
> state: 'normal'
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
### 主要事件
|
||||||
|
|
||||||
|
- **`set_state(state)`**
|
||||||
|
方法：手动设置当前状态，控件会查找匹配的状态项并更新图片 URL，重新解析选项并渲染。
|
||||||
|
- 参数：`state` —— 要切换到的状态字符串
|
||||||
|
- 行为：遍历 `this.states`，找到对应项后调用 `super.options_parse()` 更新视图
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# BlankIcon
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
空白占位图标控件，不显示任何图像，仅作为具有固定字符尺寸的透明占位符，用于布局对齐或动态替换前的预留空间。
|
||||||
|
**类型：** 普通控件
|
||||||
|
**父类控件：** `bricks.JsWidget`
|
||||||
|
|
||||||
|
### 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `rate` | Number | 尺寸缩放比率，默认为 `1`，影响基于 `charsize` 的计算 |
|
||||||
|
| `cwidth` | Number | 占据的字符宽度，默认为 `1` |
|
||||||
|
| `cheight` | Number | 占据的字符高度，默认为 `1` |
|
||||||
|
| `dynsize` | Boolean | 是否启用动态尺寸调整，默认为 `true`，控制是否响应 `charsize_sizing()` |
|
||||||
|
|
||||||
|
### 主要事件
|
||||||
|
|
||||||
|
无公开事件或回调。其核心作用是在 UI 布局中保持与其他图标一致的尺寸行为，而不加载任何图像资源。
|
||||||
372
docs/ai/input.md
Normal file
372
docs/ai/input.md
Normal file
@ -0,0 +1,372 @@
|
|||||||
|
# UiType
|
||||||
|
|
||||||
|
**控件功能**：所有输入控件的基础类，提供通用的值获取、设置、重置、禁用等方法。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `name` | string | 控件名称（必填） |
|
||||||
|
| `value` / `defaultvalue` | any | 默认值 |
|
||||||
|
| `required` | boolean | 是否为必填项，默认 `false` |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：当控件值发生变化时触发，携带当前控件的键值对数据。
|
||||||
|
- `blur`：失去焦点时可能被派发（由子类实现）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiHide
|
||||||
|
|
||||||
|
**控件功能**：隐藏字段控件，用于存储不显示的数据，DOM 显示为 `display: none`。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiType`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
继承自 `UiType`，无额外参数。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：值变化时触发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiStr
|
||||||
|
|
||||||
|
**控件功能**：单行文本输入框，支持对齐、长度限制、占位符等功能。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiType`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `align` | string | 文本对齐方式：`left`, `center`, `right` |
|
||||||
|
| `length` | number | 最大字符数（maxlength） |
|
||||||
|
| `minlength` | number | 最小字符数（minlength） |
|
||||||
|
| `tip` | string | 提示信息（暂未使用） |
|
||||||
|
| `width` | string | 输入框宽度（如 `'200px'`） |
|
||||||
|
| `readonly` | string/boolean | 是否只读 |
|
||||||
|
| `required` | boolean | 是否必填 |
|
||||||
|
| `placeholder` | string | 占位符文本（支持国际化） |
|
||||||
|
| `css` | string | 自定义 CSS 类名 |
|
||||||
|
| `dynsize` | boolean | 是否动态调整字体大小，默认 `true` |
|
||||||
|
| `cfontsize` | number | 字体缩放比例 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `focus`：获得焦点时触发。
|
||||||
|
- `blur`：失去焦点时触发。
|
||||||
|
- `changed`：输入内容改变且通过正则校验后触发。
|
||||||
|
- `keydown`：按下 Enter 键时会触发 blur 事件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiPassword
|
||||||
|
|
||||||
|
**控件功能**：密码输入框，继承 `UiStr`，输入内容掩码显示。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiStr`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同 `UiStr`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
同 `UiStr`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiInt
|
||||||
|
|
||||||
|
**控件功能**：整数输入框，自动限制只能输入数字，右对齐显示。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiStr`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `length` | number | 输入最大位数（可选） |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：输入合法整数时触发。
|
||||||
|
- 值始终以整数形式返回（调用 `parseInt`）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiFloat
|
||||||
|
|
||||||
|
**控件功能**：浮点数输入框，支持小数位控制和步长设置。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiInt`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `dec_len` | number | 小数点后保留位数，默认为 2 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：输入合法浮点数时触发。
|
||||||
|
- 返回值为 `parseFloat(this.value)`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiTel
|
||||||
|
|
||||||
|
**控件功能**：电话号码输入框，使用 `<input type="tel">`，支持自定义 pattern。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiStr`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `pattern` | string | 正则表达式字符串，用于验证输入格式 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：输入符合 pattern 时触发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiEmail
|
||||||
|
|
||||||
|
**控件功能**：邮箱输入框，使用 `<input type="email">`，可附加自定义 pattern。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiStr`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `pattern` | string | 可选的自定义正则验证规则 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：输入合法邮箱格式时触发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiFile
|
||||||
|
|
||||||
|
**控件功能**：文件上传控件，支持拖拽上传、点击选择文件，可限定文件类型和多选。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `accept` | string | 接受的 MIME 类型前缀，如 `'image/'`, `'audio/'` |
|
||||||
|
| `multiple` | boolean | 是否允许多文件上传 |
|
||||||
|
| `width` | string | 容器宽度，默认 `'100%'` |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `dragenter` / `dragover` / `dragleave` / `drop`：拖拽相关事件处理高亮与文件接收。
|
||||||
|
- `changed`：选择或拖入文件后触发，传递文件对象或数组。
|
||||||
|
- `input`：原生 input change 事件监听。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiImage
|
||||||
|
|
||||||
|
**控件功能**：图像上传控件，支持拖拽、点击上传及拍照按钮，上传后预览图片。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`UiFile`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同 `UiFile`，默认 `accept='image/'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：文件选择或拍照完成后触发，附带 File 对象。
|
||||||
|
- `shot`：拍照完成事件由 `SysCamera` 派发并被捕获。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiAudio
|
||||||
|
|
||||||
|
**控件功能**：音频上传控件，支持录音功能（麦克风），上传后可播放预览。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`UiFile`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同 `UiFile`，默认 `accept='audio/'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：文件选择或录音完成后触发。
|
||||||
|
- `record_end`：录音结束事件由 `SysAudioRecorder` 派发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiVideo
|
||||||
|
|
||||||
|
**控件功能**：视频上传控件，支持录制视频功能（摄像头），上传后可播放预览。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`UiFile`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同 `UiFile`，默认 `accept='video/'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：文件选择或录制完成后触发。
|
||||||
|
- `record_end`：录像结束事件由 `SysVideoRecorder` 派发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiCheck
|
||||||
|
|
||||||
|
**控件功能**：复选框控件（视觉上是图标切换），表示布尔状态（true/false）。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiType`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `value` | boolean | 初始是否选中 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：状态切换时触发，携带 `{name: true/false}` 数据。
|
||||||
|
- `state_changed`：图标状态变更事件（来自 `MultipleStateIcon`）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiCheckBox
|
||||||
|
|
||||||
|
**控件功能**：多选/单选组控件，基于数据生成多个 `UiCheck` + 文本标签。支持静态数据或远程加载。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`UiType`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `label` | string | 分组标题 |
|
||||||
|
| `data` | array | 静态选项列表 `[ {text:'', value:''} ]` |
|
||||||
|
| `dataurl` | string | 远程数据 URL |
|
||||||
|
| `method` | string | 请求方式，默认 GET |
|
||||||
|
| `params` | object | 请求参数 |
|
||||||
|
| `textField` | string | 显示字段名，默认 `'text'` |
|
||||||
|
| `valueField` | string | 值字段名，默认 `'value'` |
|
||||||
|
| `value` / `defaultValue` | string/array | 默认选中值（单选为字符串，多选为数组） |
|
||||||
|
|
||||||
|
> 注：若 `multicheck` 属性存在且为真，则为多选模式。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：任一选项状态变化时触发，携带 `{name: selectedValue(s)}`。
|
||||||
|
- 内部绑定 `UiCheck` 的 `changed` 事件进行值更新。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiDate
|
||||||
|
|
||||||
|
**控件功能**：日期选择器，使用原生 `<input type="date">`，支持最小/最大日期限制。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiStr`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `max_date` | string | 最大允许日期（格式 YYYY-MM-DD） |
|
||||||
|
| `min_date` | string | 最小允许日期（格式 YYYY-MM-DD） |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `changed`：日期更改时触发。
|
||||||
|
- `blur` / `focus`：焦点事件由父类支持。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiText
|
||||||
|
|
||||||
|
**控件功能**：多行文本域（textarea），支持 Tab 缩进、回车换行、动态字体适配。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiType`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `rows` | number | 行数，默认 5 |
|
||||||
|
| `cols` | number | 列数，默认 40 |
|
||||||
|
| `readonly` | boolean | 是否只读 |
|
||||||
|
| `required` | boolean | 是否必填 |
|
||||||
|
| `value` / `defaultvalue` | string | 默认文本内容 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `input`：内容变化时更新内部值。
|
||||||
|
- `keydown`：拦截 Tab 和 Enter 键实现智能缩进与换行。
|
||||||
|
- `changed`：内容变化时手动派发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiCode
|
||||||
|
|
||||||
|
**控件功能**：下拉选择框（`<select>`），用于代码表选择，支持本地数据或异步加载。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`UiType`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `data` | array | 静态选项数据 `[ {text:'', value:''} ]` |
|
||||||
|
| `dataurl` | string | 异步获取选项的接口地址 |
|
||||||
|
| `method` | string | 请求方法，默认 GET |
|
||||||
|
| `params` | object | 请求参数 |
|
||||||
|
| `textField` | string | 显示字段，默认 `'text'` |
|
||||||
|
| `valueField` | string | 值字段，默认 `'value'` |
|
||||||
|
| `nullable` | boolean | 是否允许空选项（开头添加空项） |
|
||||||
|
| `value` / `defaultvalue` | string | 默认选中值 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `input`：选择项改变时触发，更新值并派发 `changed`。
|
||||||
|
- `changed`：值变更后向外通知。
|
||||||
|
- 支持外部事件驱动重新加载数据（如联动筛选）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# UiSearch
|
||||||
|
|
||||||
|
**控件功能**：搜索选择控件，点击图标弹出窗口展示表格供选择，常用于关联查询。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`HBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `search_url` | string | 弹窗中加载的页面 URL |
|
||||||
|
| `valueField` | string | 返回值对应的字段名 |
|
||||||
|
| `textField` | string | 显示文本对应的字段名 |
|
||||||
|
| `popup_options` | object | 弹窗配置参数 |
|
||||||
|
| `value` | string | 初始值 |
|
||||||
|
| `text` | string | 初始显示文本 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `click` on icon：打开搜索弹窗。
|
||||||
|
- `changed`：从弹窗选择记录后触发，带回选中的值。
|
||||||
|
- `dismiss`：关闭弹窗事件。
|
||||||
|
|
||||||
14
docs/ai/keypress.md
Normal file
14
docs/ai/keypress.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# KeyPress
|
||||||
|
|
||||||
|
控件功能：监听键盘按键事件，当用户按下任意键时，清除当前内容并显示按下的键名。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- 无特殊初始化参数，继承自 `bricks.VBox` 的通用参数（如布局相关选项等）。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `keydown`：绑定全局键盘按下事件，触发 `key_handler` 方法处理按键逻辑。
|
||||||
|
在该事件中获取 `event.key` 值，并动态创建显示按键信息的文本控件。
|
||||||
149
docs/ai/layout.md
Normal file
149
docs/ai/layout.md
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
# HBox
|
||||||
|
|
||||||
|
**控件功能**：水平布局容器，用于将子控件沿水平方向排列。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `options` (Object, 可选)：配置选项对象，继承自 `Layout` 的通用选项。
|
||||||
|
- 无特有参数，构造函数中仅调用父类并设置 CSS 类 `'hcontainer'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- 无特有事件。
|
||||||
|
- 继承自 `Layout` 的键盘导航事件支持（当启用 `keyselectable` 时）：
|
||||||
|
- `keydown`：处理方向键（左/右切换层级，上/下切换选中项，Enter 触发点击）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# FHBox
|
||||||
|
|
||||||
|
**控件功能**：固定水平布局容器，防止子元素换行，适用于不可折行的水平排列场景。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.HBox` → `bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `options` (Object, 可选)：配置选项对象。
|
||||||
|
- 无额外参数，构造函数中调用父类后设置样式 `flexWrap: 'nowrap'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- 与 `HBox` 相同，依赖 `Layout` 提供的键盘导航逻辑。
|
||||||
|
- 支持通过方向键进行焦点控制和 Enter 键触发点击。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# VBox
|
||||||
|
|
||||||
|
**控件功能**：垂直布局容器，用于将子控件沿垂直方向排列。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `options` (Object, 可选)：配置选项对象。
|
||||||
|
- 无特有参数，构造函数中仅设置 CSS 类 `'vcontainer'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- 无特有事件。
|
||||||
|
- 同样支持 `Layout` 定义的键盘导航机制（上下选择、左右进入/退出层级等）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# FVBox
|
||||||
|
|
||||||
|
**控件功能**：固定垂直布局容器，防止子元素换行，适用于不可折行的垂直排列。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox` → `bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `options` (Object, 可选)：配置选项对象。
|
||||||
|
- 无额外参数，构造函数中设置 `flexWrap: 'nowrap'`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- 与 `VBox` 相同，支持完整的键盘导航行为。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Filler
|
||||||
|
|
||||||
|
**控件功能**：弹性填充控件，用于在 Flex 布局中占据剩余空间，实现动态布局平衡。通常用于撑开其他组件间距。
|
||||||
|
**类型**：容器控件（但一般不添加子控件）
|
||||||
|
**父类控件**：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `options` (Object, 可选)：配置选项对象。
|
||||||
|
- 无特有参数，构造函数中设置 CSS 类 `'filler'`。
|
||||||
|
- 注释代码中曾计划设置 `flexGrow: 1` 和 `overflow: auto`，当前未启用。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- 无特有事件。
|
||||||
|
- 支持被纳入键盘导航栈（若显式启用 `keyselectable`），但实际用途较少。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ResponsableBox
|
||||||
|
|
||||||
|
> （注：类名可能应为 "ResponsiveBox"，拼写疑似笔误）
|
||||||
|
|
||||||
|
**控件功能**：响应式布局容器，能根据自身宽高比自动切换为横向或纵向布局模式。宽度大于高度时为横向（hcontainer），否则为纵向（vcontainer）。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts` (Object, 可选)：配置选项对象，传递给父类 `Layout`。
|
||||||
|
- 构造函数中绑定 `'element_resize'` 事件以监听尺寸变化。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `element_resize`：当容器尺寸发生变化时触发，驱动 `reset_type()` 方法重新判断布局方向。
|
||||||
|
- 自动调整 CSS 类和宽高样式：
|
||||||
|
- 宽 > 高：应用 `'hcontainer'`，高度 100%，宽度自适应。
|
||||||
|
- 高 ≥ 宽：应用 `'vcontainer'`，宽度 100%，高度自适应。
|
||||||
|
- 支持嵌套键盘导航，行为由 `Layout` 统一管理。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Layout
|
||||||
|
|
||||||
|
> 虽未直接注册工厂名（但其子类已注册），`Layout` 是所有上述容器的基类，核心功能集中在此。
|
||||||
|
|
||||||
|
**控件功能**：基础布局容器类，提供通用的子控件管理、键盘可选支持、标题/描述构建、工具栏集成等功能。是所有布局控件的共同父类。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.JsWidget`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `options` (Object, 可选)
|
||||||
|
- `keyselectable` (Boolean)：是否启用键盘选择功能，默认 `false`。
|
||||||
|
- `title` (String)：可选标题文本，会生成 `Title3` 控件。
|
||||||
|
- `description` (String)：可选描述文本，会生成 `Text` 控件。
|
||||||
|
- `toolbar` (Object)：工具栏配置，用于创建 `FloatTextIconBar`。
|
||||||
|
- 其他继承自 `JsWidget` 的通用参数。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `keydown`：全局绑定，由 `enable_key_select()` 激活，处理以下按键：
|
||||||
|
- `ArrowUp` / `ArrowDown`：上下切换选中子控件。
|
||||||
|
- `ArrowLeft`：调用 `up_level()`，返回上一层级。
|
||||||
|
- `ArrowRight`：调用 `down_level()`，进入下一层级。
|
||||||
|
- `Enter`：触发当前选中控件的 `click` 事件。
|
||||||
|
- `on_parent`：当控件被添加或移除出父容器时分发，通知子控件其父级变更。
|
||||||
|
- `element_resize`：仅 `ResponsableBox` 使用，但 `Layout` 提供 DOM 元素操作能力。
|
||||||
|
- `click`：可通过 `enter_handler()` 手动派发给选中子控件。
|
||||||
|
|
||||||
|
此外还提供以下关键方法（虽非事件，但影响事件流）：
|
||||||
|
|
||||||
|
- `enable_key_select()` / `disable_key_select()`：启用/禁用键盘导航，并维护全局栈 `key_selectable_stack`。
|
||||||
|
- `add_widget(w, index)`：添加子控件，自动插入 DOM 并建立父子关系。
|
||||||
|
- `remove_widget(w)` / `clear_widgets()`：移除控件，清理 DOM 与事件关联。
|
||||||
|
- `select_item(w)`：高亮指定子控件（需支持 `.selected(bool)` 方法）。
|
||||||
|
|
||||||
36
docs/ai/line.md
Normal file
36
docs/ai/line.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
# ChartLine
|
||||||
|
|
||||||
|
控件功能：用于展示折线图，基于 ECharts 扩展实现，支持通过配置数据源、字段映射和图表选项动态生成多条折线的数据可视化。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：`bricks.EchartsExt`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------------|--------|----|
|
||||||
|
| `data_url` | string |（可选）获取图表数据的接口 URL，若提供则自动请求数据 |
|
||||||
|
| `data_params`| object |（可选）发送请求时携带的参数，配合 `data_url` 使用 |
|
||||||
|
| `method` | string |（可选）请求数据时使用的 HTTP 方法，默认为 'GET' |
|
||||||
|
| `data` | array |（可选）直接传入的静态数据数组，格式为对象数组，如 `[{ name: 'A', value1: 10, value2: 20 }]` |
|
||||||
|
| `line_options`| object|（可选）额外的 ECharts 系列配置项，用于自定义线条样式、动画等 |
|
||||||
|
| `nameField` | string | 指定数据中作为 X 轴显示的字段名称，例如时间或类别字段 |
|
||||||
|
| `valueFields`| array | 指定一个或多个数值字段，每个字段将生成一条折线，如 `['sales', 'profit']` |
|
||||||
|
|
||||||
|
> 注：`data` 和 `data_url` 可二选一；若两者都存在，优先使用 `data_url` 获取数据。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`load`**
|
||||||
|
触发时机：控件初始化并成功加载/渲染数据后触发。
|
||||||
|
回调参数：`{ chart: ECharts 实例, data: 当前渲染的数据 }`
|
||||||
|
用途：可用于在图表渲染完成后执行自定义逻辑，如添加标记点、绑定外部交互。
|
||||||
|
|
||||||
|
- **`click`**
|
||||||
|
触发时机：用户点击图表中的某一点时触发。
|
||||||
|
回调参数：ECharts 原生 click 事件对象，包含 `seriesName`, `name`, `value`, `data` 等信息。
|
||||||
|
用途：实现数据点详情查看、联动其他组件等功能。
|
||||||
|
|
||||||
|
- **`datafetch`**
|
||||||
|
触发时机：从 `data_url` 成功获取数据后，但在渲染之前触发。
|
||||||
|
回调参数：`{ data: 服务器返回的原始数据 }`
|
||||||
|
用途：可在数据处理前进行拦截和修改。
|
||||||
137
docs/ai/llm.md
Normal file
137
docs/ai/llm.md
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
# LlmMsgAudio
|
||||||
|
|
||||||
|
**控件功能**：用于处理语音消息流，支持中文与非中文标点分段，并通过音频播放器播放模型返回的语音响应。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.UpStreaming`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| opts | Object | 传递给父类的配置选项，由 `UpStreaming` 处理 |
|
||||||
|
|
||||||
|
> 注意：该控件内部初始化了以下属性：
|
||||||
|
> - `olddata` / `data`：用于累积文本数据
|
||||||
|
> - `cn_p` / `other_p`：中英文常见标点符号数组
|
||||||
|
> - `audio`：使用 `AudioPlayer({})` 创建的音频播放实例
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无显式绑定事件，但重写了以下方法参与数据流处理：
|
||||||
|
- `send(data)`：接收增量文本，按语言标点切分并发送可播放片段
|
||||||
|
- `go()`：发起请求并设置音频源，基于响应内容播放语音
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ModelOutput
|
||||||
|
|
||||||
|
**控件功能**：展示大模型输出内容，支持动态更新、运行状态指示、用户反馈评分（点赞/点踩），并集成 TTS 语音播放能力。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| opts.modelname | String | 否 | 显示的模型名称 |
|
||||||
|
| opts.icon | String | 否 | 模型图标 URL，缺省使用默认 LLM 图标 |
|
||||||
|
| opts.response_mode | String | 否 | 响应模式：`stream`, `sync`, `async` |
|
||||||
|
| opts.estimate_url | String | 否 | 提交用户评价的接口地址（用于点赞/点踩） |
|
||||||
|
| opts.textvoice | Boolean | 否 | 是否启用语音朗读功能 |
|
||||||
|
| opts.tts_url | String | 否 | TTS 服务接口地址，用于生成语音 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 回调函数 |
|
||||||
|
|--------|---------|--------|
|
||||||
|
| click (on like icon) | 用户点击“点赞”图标 | `estimate_llm(icon, 1)` |
|
||||||
|
| click (on unlike icon) | 用户点击“点踩”图标 | `estimate_llm(icon, -1)` |
|
||||||
|
|
||||||
|
> 其他行为：
|
||||||
|
> - `update_data(data)`：接收模型输出数据并更新显示内容
|
||||||
|
> - `finish()`：流结束时调用，目前仅打印日志
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# LlmModel
|
||||||
|
|
||||||
|
**控件功能**：封装单个大模型的调用逻辑，包括输入预处理、请求发送、响应流处理及结果渲染。支持多种交互模式（同步/流式/异步）。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.JsWidget`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| llmio | Object | 是 | 所属的 `LlmIO` 实例，用于共享配置 |
|
||||||
|
| opts.model | String | 是 | 模型标识符 |
|
||||||
|
| opts.modelname | String | 是 | 显示名称 |
|
||||||
|
| opts.url | String | 是 | 模型 API 地址 |
|
||||||
|
| opts.icon | String | 否 | 自定义图标路径 |
|
||||||
|
| opts.params | Object | 否 | 额外请求参数 |
|
||||||
|
| opts.user_message_format | String | 否 | 用户消息模板格式 |
|
||||||
|
| opts.system_message_format | String | 否 | 系统消息模板格式 |
|
||||||
|
| opts.llm_message_format | Object | 否 | 助手消息结构定义 |
|
||||||
|
| opts.use_session | Boolean | 否 | 是否保持会话上下文 |
|
||||||
|
| opts.input_from | String | 否 | 输入来源标识 |
|
||||||
|
| opts.textvoice | Boolean | 否 | 是否启用语音输出 |
|
||||||
|
| opts.tts_url | String | 否 | TTS 接口地址 |
|
||||||
|
| opts.response_mode | String | 是 | 请求模式：`stream`, `sync`, `async` |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 回调函数 |
|
||||||
|
|--------|----------|--------|
|
||||||
|
| click (on title) | 点击模型标题区域 | `show_setup_panel(event)` —— 子类可扩展 |
|
||||||
|
|
||||||
|
> 内部关键方法：
|
||||||
|
> - `model_inputed(data)`：接收到输入数据后触发模型请求
|
||||||
|
> - `chunk_response(mout, line)`：处理流式响应中的每一个数据块
|
||||||
|
> - `is_accept_source(source)`：判断是否接受某来源的数据
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# LlmIO
|
||||||
|
|
||||||
|
**控件功能**：作为整体 LLM 交互界面的核心容器，管理多个模型实例、输入弹窗、知识库配置、用户输入和输出展示。提供统一入口控制多模型协同工作。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| opts.user_icon | String | 否 | 用户头像图标 URL |
|
||||||
|
| opts.list_models_url | String | 否 | 获取可用模型列表的接口地址 |
|
||||||
|
| opts.input_fields | Array | 是 | 表单字段定义（如 prompt、temperature 等） |
|
||||||
|
| opts.models | Array | 是 | 初始加载的模型配置数组 |
|
||||||
|
| opts.tts_url | String | 否 | 全局 TTS 服务地址 |
|
||||||
|
| opts.get_kdb_url | String | 否 | 获取知识库列表的接口地址 |
|
||||||
|
| opts.estimate_url | String | 否 | 用户反馈提交地址 |
|
||||||
|
| opts.enabled_kdb | Boolean | 否 | 是否启用知识库增强功能 |
|
||||||
|
|
||||||
|
> 示例 `models` 结构：
|
||||||
|
> ```js
|
||||||
|
> {
|
||||||
|
> model: "qwen",
|
||||||
|
> modelname: "通义千问",
|
||||||
|
> url: "/api/llm/qwen",
|
||||||
|
> response_mode: "stream"
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 回调函数 |
|
||||||
|
|--------|----------|--------|
|
||||||
|
| click (i_w) | 点击输入按钮 | `open_input_widget(event)` —— 弹出输入表单 |
|
||||||
|
| click (nm_w) | 点击添加模型按钮 | `open_search_models(event)` —— 弹出模型选择面板 |
|
||||||
|
| click (kdb_w) | 点击知识库设置按钮 | `setup_kdb(event)` —— 打开 KDB 配置表单 |
|
||||||
|
| submit (in form) | 用户提交输入表单 | `handle_input(event)` —— 分发输入至各模型 |
|
||||||
|
| record_click (in Cols) | 选择一个模型记录 | `add_new_model(event)` —— 添加新模型实例 |
|
||||||
|
| submit (in kdb form) | 提交知识库配置 | `handle_kdb_setup(event)` —— 保存配置并应用 |
|
||||||
|
|
||||||
|
> 其他核心行为：
|
||||||
|
> - `show_input(params)`：在聊天区显示用户输入
|
||||||
|
> - `show_added_model(m)`：注册并展示一个新的模型实例
|
||||||
|
|
||||||
63
docs/ai/llmout.md
Normal file
63
docs/ai/llmout.md
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
# UserInputView
|
||||||
|
|
||||||
|
控件功能：将用户输入的数据（包括文本、图像、音频、视频等）转换为 Markdown 格式展示，音视频媒体数据以独立播放器形式显示。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts` (Object) - 配置选项，继承自 VBox 的通用参数：
|
||||||
|
- `data` (Object) - 用户输入的原始数据对象，键值对应字段名和值。
|
||||||
|
- `input_fields` (Array) - 字段定义数组，每个字段包含：
|
||||||
|
- `name` (String) - 字段名称（如 `video1`, `audio2`, `image3`, 普通文本等）
|
||||||
|
- `label` (String, 可选) - 显示标签，用于 Markdown 中标题展示
|
||||||
|
|
||||||
|
> 注意：`data` 中的文件 Blob 对象会通过 `URL.createObjectURL()` 转换为可预览的 URL。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无显式自定义事件。在 `show_input(data)` 被调用时自动刷新内容布局。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# LlmOut
|
||||||
|
|
||||||
|
控件功能：根据大模型返回的 JSON 数据动态构建响应内容界面，支持推理文本、应答内容、错误提示、音频、视频、图片等多种类型内容的渲染。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts` (Object) - 配置选项，继承自 VBox 的通用参数，无特殊构造参数。
|
||||||
|
|
||||||
|
内部状态属性（由 `update(data)` 方法维护）：
|
||||||
|
- `reasoning_content` (String) - 累积的推理过程文本。
|
||||||
|
- `content` (String) - 累积的最终回答内容。
|
||||||
|
- `error` (String) - 错误信息文本。
|
||||||
|
- `images` (Array) - 图片 URL 列表。
|
||||||
|
- 各媒体控件实例：`rc_w`, `c_w`, `v_w`, `a_w`, `i_w` 等。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
### update(data)
|
||||||
|
|
||||||
|
触发条件：当接收到新的大模型输出数据时手动调用此方法。
|
||||||
|
|
||||||
|
参数 `data` (Object) 支持以下可选属性：
|
||||||
|
|
||||||
|
| 属性 | 类型 | 描述 |
|
||||||
|
|------|------|------|
|
||||||
|
| `reasoning_content` | String | 推理过程文本，通常以 Markdown 渲染 |
|
||||||
|
| `content` | String | 最终回复内容，支持 Markdown |
|
||||||
|
| `error` | String | 错误信息，将以红色样式显示 |
|
||||||
|
| `audio` | String | 音频资源，可以是 URL 或 Base64 编码字符串，自动处理协议前缀 |
|
||||||
|
| `video` | String | 视频资源，支持 URL 或 Base64 |
|
||||||
|
| `image` | String 或 Array[String] | 单张或多个图片 URL |
|
||||||
|
|
||||||
|
行为说明：
|
||||||
|
- 自动合并新增内容到已有字段中（追加模式）。
|
||||||
|
- 媒体资源首次出现时创建对应播放器组件（AudioPlayer / VideoPlayer），后续更新则调用其 `add_url()` 方法。
|
||||||
|
- 所有内容按顺序添加到容器中：错误 → 推理内容 → 回答内容 → 视频 → 音频 → 图片。
|
||||||
|
- 使用 `clear_widgets()` 清除旧组件后重新渲染，确保视图一致性。
|
||||||
|
|
||||||
|
> 注册信息：该控件通过 `bricks.Factory.register('LlmOut', bricks.LlmOut)` 注册，可用于配置化创建。
|
||||||
68
docs/ai/markdown_viewer.md
Normal file
68
docs/ai/markdown_viewer.md
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
# MdWidget
|
||||||
|
|
||||||
|
**控件功能**：用于渲染 Markdown 内容的控件，支持从字符串或远程 URL 加载 Markdown 文本，并使用 `marked.js` 解析为 HTML。支持点击链接加载新的 Markdown 内容。
|
||||||
|
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.JsWidget`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|----------|--------|------|
|
||||||
|
| `mdtext` | string | （可选）直接传入的 Markdown 文本内容，优先级高于 `md_url`。 |
|
||||||
|
| `md_url` | string | （可选）远程 Markdown 文件的 URL 地址，用于异步加载内容。 |
|
||||||
|
| `method` | string | 请求方式，默认为 `"GET"`，适用于通过网络请求获取内容。 |
|
||||||
|
| `params` | object | 请求参数对象，在 GET 请求中会拼接到 URL 上；目前仅在 `tget` 中使用。 |
|
||||||
|
|
||||||
|
> ⚠️ 注意：若同时提供 `mdtext`，则忽略 `md_url`，直接本地渲染。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `loaded`
|
||||||
|
触发时机：成功加载并解析完 Markdown 内容后触发。
|
||||||
|
携带参数：`{ url: string }` —— 当前加载的 URL（仅当通过 `_build(url)` 加载时有效）。
|
||||||
|
使用示例：
|
||||||
|
```js
|
||||||
|
mdwidget.bind('loaded', function(event) {
|
||||||
|
console.log('Loaded markdown from:', event.params.url);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# MarkdownViewer
|
||||||
|
|
||||||
|
**控件功能**：一个增强型 Markdown 查看器容器，内置导航回退功能，可记录浏览历史栈，支持通过链接跳转并返回上一页。通常用于展示文档类内容。
|
||||||
|
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------------|---------|------|
|
||||||
|
| `md_url` | string | （可选）初始加载的 Markdown 文件 URL。 |
|
||||||
|
| `mdtext` | string | （可选）直接传入的 Markdown 字符串内容。 |
|
||||||
|
| `method` | string | HTTP 请求方法，默认为 `"GET"`。 |
|
||||||
|
| `params` | object | 请求参数对象，用于传递给 `tget` 方法。 |
|
||||||
|
| `navigator` | boolean | 是否显示“返回”按钮，默认为 `true`。启用后可实现浏览历史回退。 |
|
||||||
|
| `recommentable`| boolean | （未实现）预留字段，未来可能用于评论推荐功能。 |
|
||||||
|
|
||||||
|
> 📌 提示：内部使用 `MdWidget` 实际渲染内容，并将其添加为子控件。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `loaded`
|
||||||
|
转发自内部 `MdWidget` 的 `loaded` 事件，表示新页面已加载完成。
|
||||||
|
携带参数：`{ url: string }` —— 当前加载的 Markdown 页面 URL。
|
||||||
|
|
||||||
|
- `scroll`
|
||||||
|
绑定到容器的滚动事件，可用于监听页面滚动行为（当前仅输出调试日志）。
|
||||||
|
触发条件：用户滚动视口时触发。
|
||||||
|
示例日志输出：
|
||||||
|
```
|
||||||
|
scrollY= 200
|
||||||
|
```
|
||||||
|
|
||||||
|
> 💡 注：可通过 `bind('scroll', ...)` 监听此事件进行自定义处理。
|
||||||
|
|
||||||
32
docs/ai/menu.md
Normal file
32
docs/ai/menu.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# Menu
|
||||||
|
|
||||||
|
控件功能：用于创建可交互的菜单组件，支持静态菜单项、嵌套子菜单以及动态加载远程子菜单。点击菜单项可触发页面跳转或弹出窗口等行为。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `options.bgcolor` | String | 菜单背景颜色，默认为 `"white"` |
|
||||||
|
| `options.items` | Array | 菜单项数组，每个项包含 label、url、icon、target 等属性（详见 `create_menuitem` 和 `create_children` 方法） |
|
||||||
|
| `options.item_cheight` | Number | 菜单项的高度单位（cheight），影响图标和文本布局 |
|
||||||
|
| `options.menuitem_css` | String | 自定义菜单项的 CSS 样式名称 |
|
||||||
|
| `options.target` | String | 点击菜单项后目标容器类型，如 `'PopupWindow'`, `'Popup'` 或其他 widget ID |
|
||||||
|
| `options.popup_options` | Object | 弹窗相关配置选项，用于定制 PopupWindow 或 Popup 的显示行为 |
|
||||||
|
|
||||||
|
> 注：`options` 还会传递给父类 `VBox`，继承其通用布局参数。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`item_click`**
|
||||||
|
触发时机：用户点击某个菜单项时
|
||||||
|
回调参数：`item` 对象（包含 `label`, `url`, `icon`, `target` 等字段）
|
||||||
|
处理逻辑：根据 `item.target` 决定打开方式（新窗口、弹窗或替换指定控件内容），并通过 `widgetBuild` 加载对应 URL 内容。
|
||||||
|
|
||||||
|
- **`command`**
|
||||||
|
触发时机：在 `menu_clicked` 处理完导航逻辑后派发
|
||||||
|
回调参数：与 `item_click` 相同的 `opts` 对象
|
||||||
|
用途：通知外部系统执行附加命令或进行状态更新。
|
||||||
|
|
||||||
|
> 事件绑定通过 `this.bind('item_click', ...)` 在构造函数中设置，并由 `regen_menuitem_event` 触发。
|
||||||
67
docs/ai/message.md
Normal file
67
docs/ai/message.md
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
# Message
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
- **功能**：用于显示一条带有标题和消息内容的弹窗提示，支持自动打开、文本换行、居中对齐以及国际化（i18n）。
|
||||||
|
- **类型**：容器控件（可包含其他子控件如文本、滚动面板等）
|
||||||
|
- **父类控件**：`bricks.PopupWindow`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
| 参数名 | 类型 | 必填 | 描述 |
|
||||||
|
|-------|------|------|------|
|
||||||
|
| title | string | 是 | 弹窗的标题文本 |
|
||||||
|
| message | string | 是 | 要显示的消息内容 |
|
||||||
|
| cheight | number | 否 | 内容区域高度（默认为9） |
|
||||||
|
| cwidth | number | 否 | 内容区域宽度（默认为16） |
|
||||||
|
| auto_open | boolean | 自动设置为 `true` | 构造时会自动设为 `true`，创建后立即打开窗口 |
|
||||||
|
|
||||||
|
> 注：`auto_open` 会在构造函数中被强制设为 `true`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
暂无自定义事件定义。继承自 `PopupWindow` 的标准事件如 `onOpen`, `onClose` 可用。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Error
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
- **功能**：基于 `Message` 控件，专门用于显示错误信息，样式上添加了“error” CSS 类以突出显示错误状态。
|
||||||
|
- **类型**：容器控件
|
||||||
|
- **父类控件**：`bricks.Message`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
继承自 `Message` 控件的所有参数：
|
||||||
|
| 参数名 | 类型 | 必填 | 描述 |
|
||||||
|
|-------|------|------|------|
|
||||||
|
| title | string | 是 | 错误弹窗的标题 |
|
||||||
|
| message | string | 是 | 错误的具体内容 |
|
||||||
|
| cheight | number | 否 | 窗口高度，默认为9 |
|
||||||
|
| cwidth | number | 否 | 窗口宽度，默认为16 |
|
||||||
|
|
||||||
|
> 注：在实例化时会自动应用 `'error'` 样式类。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
与 `Message` 相同，无新增事件。可使用继承的 `onOpen`, `onClose` 等事件。
|
||||||
|
|
||||||
|
> 实际使用通常通过 `bricks.show_error()` 函数调用。
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 附加工具方法说明（非控件，不单独列文档）
|
||||||
|
|
||||||
|
#### `bricks.show_error(opts)`
|
||||||
|
- **功能**：快速显示一个错误消息弹窗
|
||||||
|
- **参数**：
|
||||||
|
- `opts`: 包含 `title` 和 `message` 的对象，可选 `cheight` / `cwidth`
|
||||||
|
- **行为**：
|
||||||
|
- 若未指定尺寸，则默认使用 `cheight=9`, `cwidth=16`
|
||||||
|
- 创建 `bricks.Error` 实例并调用 `.open()`
|
||||||
|
|
||||||
|
#### `bricks.show_message(opts)`
|
||||||
|
- **功能**：快速显示普通消息弹窗
|
||||||
|
- **参数**：
|
||||||
|
- `opts`: 同上，包含 `title` 和 `message`
|
||||||
|
- **行为**：
|
||||||
|
- 使用默认尺寸创建 `Message` 弹窗并打开
|
||||||
|
|
||||||
|
> 这两个函数提供便捷调用方式，适用于不需要手动管理组件生命周期的场景。
|
||||||
52
docs/ai/miniform.md
Normal file
52
docs/ai/miniform.md
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
# MiniForm
|
||||||
|
|
||||||
|
**控件功能**：MiniForm 是一个轻量级表单控件，用于动态展示和切换多个字段输入项。用户可以通过下拉选择器选择不同的字段，控件会根据选择动态渲染对应的输入组件，并支持实时输入事件的监听与数据合并。
|
||||||
|
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.HBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `defaultname` | String | 默认选中的字段名称。若未设置，则默认使用 `fields` 数组中第一个字段的 `name`。 |
|
||||||
|
| `label_width` | String | （可选）标签列的宽度，如 `'80px'`。具体行为取决于内部实现是否使用该参数。 |
|
||||||
|
| `input_width` | String | （可选）输入框区域的宽度，如 `'150px'`。同样由子控件实际使用决定。 |
|
||||||
|
| `params` | Object | （可选）附加的默认参数，在调用 `getValue()` 时会被合并到输出值中。 |
|
||||||
|
| `fields` | Array\<Object\> | 字段定义数组，每个对象描述一个可选字段，包含以下子属性：<br>- `name`: 字段唯一标识符（String）<br>- `label`: 显示名称（String）<br>- `icon`: （可选）图标类名或路径<br>- `uitype`: 输入控件类型（如 `"text"`, `"code"`, `"select"` 等）<br>- `uiparams`: 传递给该字段对应输入控件的额外配置参数 |
|
||||||
|
|
||||||
|
> 示例：
|
||||||
|
> ```js
|
||||||
|
> {
|
||||||
|
> defaultname: "username",
|
||||||
|
> label_width: "100px",
|
||||||
|
> input_width: "200px",
|
||||||
|
> params: { appId: "123" },
|
||||||
|
> fields: [
|
||||||
|
> {
|
||||||
|
> name: "username",
|
||||||
|
> label: "用户名",
|
||||||
|
> uitype: "text",
|
||||||
|
> uiparams: { placeholder: "请输入用户名" }
|
||||||
|
> },
|
||||||
|
> {
|
||||||
|
> name: "password",
|
||||||
|
> label: "密码",
|
||||||
|
> uitype: "password",
|
||||||
|
> uiparams: { placeholder: "请输入密码" }
|
||||||
|
> }
|
||||||
|
> ]
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 携带数据 |
|
||||||
|
|--------|---------|--------|
|
||||||
|
| `input` | 当当前激活的输入控件发生输入变化时触发 | 返回一个对象，包含 `params` 中的数据以及当前输入控件的值（通过 `getValue()` 获取） |
|
||||||
|
> 使用示例：
|
||||||
|
> ```js
|
||||||
|
> miniFormInstance.bind('input', function(data) {
|
||||||
|
> console.log('当前表单值:', data);
|
||||||
|
> });
|
||||||
|
> ```
|
||||||
63
docs/ai/modal.md
Normal file
63
docs/ai/modal.md
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
# Modal
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
- **控件功能**：`Modal` 是一个模态对话框控件，用于在页面上显示一个居中的浮动面板，通常用于展示内容、表单或提示信息。支持点击背景关闭、自动打开/关闭、定时关闭等功能。
|
||||||
|
- **类型**：容器控件（可容纳其他子控件）
|
||||||
|
- **父类控件**：`bricks.BaseModal`
|
||||||
|
|
||||||
|
### 初始化参数
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|------------|------------|------|
|
||||||
|
| `target` | string 或 Layout | 指定模态框挂载的目标容器，默认为 `bricks.Body`（即 body） |
|
||||||
|
| `auto_open` | boolean | 是否在创建后自动调用 `open()` 方法显示模态框，默认为 false |
|
||||||
|
| `auto_close` | boolean | 是否允许点击遮罩层关闭模态框（当前未启用此功能） |
|
||||||
|
| `width` | string/number | 模态框内部面板的宽度，如 `'500px'` 或 `'80%'` |
|
||||||
|
| `height` | string/number | 模态框内部面板的高度 |
|
||||||
|
| `bgcolor` | string | 内部面板的背景色，默认为 `#e8e8e8` |
|
||||||
|
| `title` | string | 模态框标题，会显示在顶部标题栏中 |
|
||||||
|
| `archor` | string | 定位锚点，取值包括 `tl`, `tc`, `tr`, `cl`, `cc`, `cr`, `bl`, `bc`, `br`，默认为 `'cc'`（居中） |
|
||||||
|
|
||||||
|
> 注：`org_index` 和 `timeout` 在 `BaseModal` 中定义但未在 `Modal` 构造函数注释中列出，可能已弃用或由基类处理。
|
||||||
|
|
||||||
|
### 主要事件
|
||||||
|
| 事件名 | 触发时机 |
|
||||||
|
|-------------|--------|
|
||||||
|
| `opened` | 调用 `open()` 方法后触发，表示模态框已显示 |
|
||||||
|
| `dismissed` | 调用 `dismiss()` 方法并成功移除模态框后触发 |
|
||||||
|
| `click` | 当用户点击模态框遮罩层时触发（仅当启用了 `auto_close` 功能时绑定，目前被注释） |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ModalForm
|
||||||
|
|
||||||
|
## 控件功能，类型（容器控件或容器控件），父类控件
|
||||||
|
- **控件功能**：`ModalForm` 是一个基于弹窗的表单模态框控件，用于快速构建并显示一个包含动态表单的模态窗口。常用于数据录入、配置设置等场景。
|
||||||
|
- **类型**：容器控件（内部包含 Form 子控件）
|
||||||
|
- **父类控件**：`bricks.PopupWindow`
|
||||||
|
|
||||||
|
### 初始化参数
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------------|------------|------|
|
||||||
|
| `auto_open` | boolean | 是否在构造完成后自动打开模态框（通过延迟任务实现） |
|
||||||
|
| `width` | string/number | 表单模态框的宽度 |
|
||||||
|
| `height` | string/number | 表单模态框的高度 |
|
||||||
|
| `bgcolor` | string | 背景色（传递给父类使用） |
|
||||||
|
| `archor` | string | 定位方式，同 `Modal`，控制表单位置 |
|
||||||
|
| `title` | string | 表单标题，显示在表单头部 |
|
||||||
|
| `description` | string | 表单描述文本，显示在标题下方 |
|
||||||
|
| `fields` | array | 表单项配置数组，用于定义输入字段结构 |
|
||||||
|
| `binds` | array | 可选的数据绑定配置，用于关联模型或状态 |
|
||||||
|
| `user_data` | any | 用户自定义数据，可用于扩展用途（当前未直接使用） |
|
||||||
|
| `submit_url` | string (非构造参数) | 提交 URL（需外部设置，用于提交逻辑） |
|
||||||
|
|
||||||
|
> 注意：`ModalForm` 使用异步方法 `build_form` 延迟 0.2 秒创建表单，确保 DOM 环境准备就绪。
|
||||||
|
|
||||||
|
### 主要事件
|
||||||
|
| 事件名 | 触发时机 |
|
||||||
|
|-------------|--------|
|
||||||
|
| `submit` | 当表单提交时触发，携带表单数据作为参数 |
|
||||||
|
| `submited` | 当表单完成提交流程后触发（由 Form 的 `submited` 事件转发），携带服务器返回数据 |
|
||||||
|
| `cancel` | 当用户点击取消按钮时触发（绑定到 `dismiss` 方法） |
|
||||||
|
| `dismissed` | 模态框关闭后触发（继承自基类） |
|
||||||
|
|
||||||
|
> 说明：该控件依赖于 `Form` 控件的事件机制，并对其进行封装和转发。
|
||||||
38
docs/ai/multiple_state_image.md
Normal file
38
docs/ai/multiple_state_image.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
# MultipleStateImage
|
||||||
|
|
||||||
|
控件功能：一个可切换状态的图片控件，根据不同的状态显示不同的图片，点击图片时自动切换到下一个状态。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `state` | String | 当前初始状态名称，需在 `urls` 对象中存在对应的键 |
|
||||||
|
| `urls` | Object | 状态与图片 URL 的映射对象，格式为 `{ state1: url1, state2: url2, ... }` |
|
||||||
|
| `width` | Number (可选) | 图片的显示宽度 |
|
||||||
|
| `height` | Number (可选) | 图片的显示高度 |
|
||||||
|
|
||||||
|
示例：
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
state: "normal",
|
||||||
|
urls: {
|
||||||
|
normal: "image-normal.png",
|
||||||
|
hover: "image-hover.png",
|
||||||
|
disabled: "image-disabled.png"
|
||||||
|
},
|
||||||
|
width: 100,
|
||||||
|
height: 50
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带数据 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| `state_changed` | 当控件的状态通过点击或调用 `set_state` 发生改变后触发 | 新的状态名称（String） |
|
||||||
|
|
||||||
|
说明：
|
||||||
|
- 用户点击图片时，控件会按 `urls` 中定义的状态顺序循环切换，并触发 `state_changed` 事件。
|
||||||
|
- 调用 `set_state(state)` 方法也可手动设置状态并更新图片。
|
||||||
31
docs/ai/period.md
Normal file
31
docs/ai/period.md
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
# PeriodDays
|
||||||
|
|
||||||
|
控件功能：用于显示一个可点击的日期区间（开始日期和结束日期），用户可以通过点击日期来前后调整时间段，支持按天、月、年为单位进行步进或回退。常用于时间范围选择场景。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.HBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-----------|--------|------|
|
||||||
|
| start_date | string | 初始开始日期，格式为 "YYYY-MM-DD" |
|
||||||
|
| end_date | string | 初始结束日期，格式为 "YYYY-MM-DD" |
|
||||||
|
| step_type | string | 步长类型，可选值为 `'days'`、`'months'`、`'years'`，默认为 `'days'` |
|
||||||
|
| step_cnt | number | 每次变化的步长数量，默认为 `1` |
|
||||||
|
| title | string | 可选标题文本，会显示在控件前 |
|
||||||
|
| splitter | string | 分隔符，用于分隔开始日期和结束日期，默认为 `' 至 '` |
|
||||||
|
|
||||||
|
> 注：`splitter` 和 `step_cnt` 若未传入则使用默认值。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
### changed
|
||||||
|
- **触发时机**：当用户点击开始日期或结束日期，导致时间区间发生变化时触发。
|
||||||
|
- **事件数据**：
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
start_date: "YYYY-MM-DD", // 变化后的开始日期
|
||||||
|
end_date: "YYYY-MM-DD" // 变化后的结束日期
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **说明**：可通过 `bind('changed', callback)` 监听该事件，获取更新后的日期范围。
|
||||||
25
docs/ai/pie.md
Normal file
25
docs/ai/pie.md
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
# ChartPie
|
||||||
|
|
||||||
|
控件功能：用于展示饼图数据可视化，支持通过配置数据源、字段映射和图表选项生成可交互的ECharts饼图。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.EchartsExt
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------------|----------|------|
|
||||||
|
| title | string | 图表标题，显示在图表顶部 |
|
||||||
|
| description | string | 图表描述信息，可用于提示或辅助说明 |
|
||||||
|
| legend | object | 图例配置项，控制图例的显示方式（如位置、样式等） |
|
||||||
|
| pie_options | object | 饼图系列的自定义配置项，例如半径、标签格式等 |
|
||||||
|
| data_url | string | 数据请求地址，用于获取图表所需的数据 |
|
||||||
|
| nameField | string | 数据中作为饼图项目名称的字段名 |
|
||||||
|
| valueFields | array | 数据中作为饼图数值的字段名数组（通常使用第一个字段） |
|
||||||
|
| data_params | object | 请求数据时附加的参数，将与`data_url`一起发送请求 |
|
||||||
|
| data | array | 静态数据数组，若提供则优先使用此数据而非从`data_url`加载 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **element_click**
|
||||||
|
当用户点击饼图中的某个数据项时触发。
|
||||||
|
回调参数包含被点击项的信息，如 `name` 和 `value`，可用于实现下钻或详情展示功能。
|
||||||
68
docs/ai/popup.md
Normal file
68
docs/ai/popup.md
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
# Popup
|
||||||
|
|
||||||
|
**控件功能**：弹出层控件，用于在页面上显示模态或非模态的浮动窗口，支持自动打开/关闭、点击外部关闭、拖拽移动、调整大小、定时关闭等功能。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 默认值 | 说明 |
|
||||||
|
|--------|------|--------|------|
|
||||||
|
| `timeout` | number | `0` | 自动关闭延迟时间（毫秒），0 表示不自动关闭 |
|
||||||
|
| `archor` | string | `'cc'` | 弹窗定位锚点，取值为 `tl`, `tc`, `tr`, `cl`, `cc`, `cr`, `bl`, `bc`, `br` 中的一种，表示相对于屏幕的位置 |
|
||||||
|
| `widget` | string / Widget / null | `null` | 关联的目标控件（ID 或对象），用于定位或禁用 |
|
||||||
|
| `auto_open` | boolean | `true` | 是否在创建后自动打开弹窗 |
|
||||||
|
| `auto_dismiss` | boolean | `true` | 是否点击弹窗外区域时自动关闭 |
|
||||||
|
| `auto_destroy` | boolean | `true` | 关闭后是否自动销毁控件 |
|
||||||
|
| `movable` | boolean | `true` | 是否允许拖拽移动 |
|
||||||
|
| `resizable` | boolean | `false` | 是否允许调整大小 |
|
||||||
|
| `modal` | boolean | `true` | 是否为模态窗口（遮罩并禁用目标控件） |
|
||||||
|
| `content` | object | `undefined` | 弹窗内容配置对象，将在打开时异步加载 |
|
||||||
|
| `dismiss_events` | array | `undefined` | 指定事件名称数组，触发时自动关闭弹窗 |
|
||||||
|
|
||||||
|
> 注：移动端下默认宽高为 `100%`，桌面端为 `70%`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 说明 |
|
||||||
|
|--------|----------|------|
|
||||||
|
| `opened` | 弹窗显示并完成布局后触发 | 通常用于加载动态内容 |
|
||||||
|
| `dismissed` | 弹窗隐藏时触发 | 可用于清理资源 |
|
||||||
|
| `destroy` | 控件被销毁时触发 | 仅当 `auto_destroy` 为 true 时触发 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PopupWindow
|
||||||
|
|
||||||
|
**控件功能**：可拖动、可缩放、带标题栏的应用级窗口控件，常用于模拟桌面应用程序窗口，支持最小化、全屏、关闭等操作。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.Popup`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 默认值 | 说明 |
|
||||||
|
|--------|------|--------|------|
|
||||||
|
| `title` | string | `"[Untitle window]"` | 窗口标题文本 |
|
||||||
|
| `icon` | string | 内置图标路径 | 窗口左上角显示的图标 URL |
|
||||||
|
| `rate` | number | `1.5` | 图标缩放比率 |
|
||||||
|
| `auto_open` | boolean | `true` | 创建后是否自动打开窗口 |
|
||||||
|
| 其他参数 | —— | 继承自 `Popup` | 包括 `width`, `height`, `modal`, `movable`, `resizable` 等，均继承并默认启用可移动和可调整大小 |
|
||||||
|
|
||||||
|
> 注意：`PopupWindow` 强制设置 `movable=true`, `resizable=true`，且默认 `auto_dismiss=false`, `auto_destroy=false`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 说明 |
|
||||||
|
|--------|----------|------|
|
||||||
|
| `opened` | 窗口打开并渲染完成后触发 | 继承自 `Popup` |
|
||||||
|
| `dismissed` | 窗口关闭（最小化也视为 dismiss）时触发 | 可用于状态同步 |
|
||||||
|
| `destroy` | 调用 `destroy()` 方法或点击关闭按钮时触发 | 实际销毁前执行清理逻辑 |
|
||||||
|
|
||||||
|
### 内置工具栏事件绑定
|
||||||
|
|
||||||
|
- `delete`：点击关闭按钮时触发，调用 `destroy()` 销毁窗口。
|
||||||
|
- `minimize`：点击最小化按钮时触发，调用 `win_minimize()` 隐藏窗口并加入 `app.mwins` 列表。
|
||||||
|
- `fullscreen`：点击全屏按钮时触发，进入全屏模式。
|
||||||
|
|
||||||
|
> 最小化的窗口可通过 `WindowsPanel` 重新打开。
|
||||||
|
|
||||||
31
docs/ai/progressbar.md
Normal file
31
docs/ai/progressbar.md
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
# ProgressBar
|
||||||
|
|
||||||
|
控件功能：显示进度条，用于可视化任务完成的百分比进度。
|
||||||
|
类型：普通控件（基于容器控件 HBox 的扩展）
|
||||||
|
父类控件：`bricks.HBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------------|--------|------|
|
||||||
|
| `total_value` | Number | （可选）总任务值，用于计算进度百分比，默认为 100 |
|
||||||
|
| `bar_cwidth` | Number | （可选）进度条高度（以行高为单位），默认为 2 |
|
||||||
|
|
||||||
|
> 注意：实际代码中使用了 `this.bar_cwidth||2`，但 `total_value` 在构造函数中未被使用，可能需在 `set_value` 方法中配合 `current` 和 `total` 使用，当前代码存在变量名错误（`current` 和 `total` 未定义）。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
* **无显式定义事件**：当前源码中未绑定或触发任何自定义事件。
|
||||||
|
* 可能通过继承 `HBox` 拥有基础布局事件，但无额外事件注册。
|
||||||
|
|
||||||
|
> ⚠️ 代码问题提示：
|
||||||
|
> - `set_value` 方法中使用了未定义的变量 `current` 和 `total`，应为 `v` 和 `this.total_value`。
|
||||||
|
> - 百分比计算逻辑中的变量名不一致：先计算 `pzt = (current / total) * 100`，后又使用 `percentage`，应统一为 `v / this.total_value`。
|
||||||
|
> 建议修正为：
|
||||||
|
> ```js
|
||||||
|
> set_value(v) {
|
||||||
|
> var percentage = this.total_value ? (v / this.total_value) * 100 : 0;
|
||||||
|
> percentage = Math.max(0, Math.min(100, percentage));
|
||||||
|
> this.text_w.set_style('width', percentage + '%');
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
120
docs/ai/qaframe.md
Normal file
120
docs/ai/qaframe.md
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
# QAFrame
|
||||||
|
|
||||||
|
控件功能：实现一个问答交互框架，支持通过 WebSocket 接收课程内容（如音视频、图片、Markdown）、题目信息和结果反馈，并允许用户提交文本或音频答案。适用于在线教学、测验等场景。
|
||||||
|
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `ws_url` | String | WebSocket 连接地址，用于与后端通信 |
|
||||||
|
| `ws_params` | Object (可选) | 要附加到 `ws_url` 上的查询参数对象，将被转换为 URL 查询字符串 |
|
||||||
|
| `title` | String (可选) | 页面标题（未在代码中直接使用，可能由外部传入） |
|
||||||
|
| `description` | String (可选) | 描述信息 |
|
||||||
|
| `courseware` | Object (可选) | 初始课程资源配置，包含：<br>- `type`: `"audio"`, `"video"`, `"image"`, `"markdown"`<br>- `url`: 资源地址<br>- `timeout`: 播放超时时间（秒），0 表示无超时 |
|
||||||
|
| `timeout` | Number | 整体超时控制（秒），0 表示不设超时 |
|
||||||
|
|
||||||
|
> 注：初始化时会创建内部子控件 `top_w`（HBox）、`main_w`（Filler）和 `bottom_w`（HBox），并建立 WebSocket 连接。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 数据格式说明 |
|
||||||
|
|--------|---------|-------------|
|
||||||
|
| `onopen` | WebSocket 连接打开时 | 自动触发 `start_question_answer()` 方法，发送启动消息 `{ type: 'qa_start', data: { d: 'test data', v: 100 } }` |
|
||||||
|
| `onquestion` | 收到问题数据时 | 数据结构：<br>`{ q_desc: 题目描述, total_q: 总题数, cur_q: 当前题号 }`<br>调用 `show_question(d)` 显示题目 |
|
||||||
|
| `oncourseware` | 收到课程资源数据时 | 数据结构：<br>`{ type: "audio"/"video"/"image"/"markdown", url: 资源链接 }`<br>调用 `show_courseware(d)` 展示对应媒体内容 |
|
||||||
|
| `onaskstart` | 服务端请求确认开始时 | 触发显示“Start ?”按钮，点击后调用 `start_question_answer()` 发送启动信号 |
|
||||||
|
| `click`（自定义按钮） | 用户点击“press to start”或“Start ?”按钮时 | 调用 `conform_start()` 向服务器发送 `{ type: 'conform_start', data: null }` 消息 |
|
||||||
|
|
||||||
|
### 接收的数据类型（来自服务端）
|
||||||
|
|
||||||
|
1. **courseware**：播放指定类型的课程内容
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "courseware",
|
||||||
|
"data": {
|
||||||
|
"type": "audio|video|image|markdown",
|
||||||
|
"url": "资源URL"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **askready**：询问是否准备就绪
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "askready",
|
||||||
|
"data": {
|
||||||
|
"total_q": 5,
|
||||||
|
"cur_q": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **question**：下发题目
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "question",
|
||||||
|
"data": {
|
||||||
|
"q_desc": "题目HTML或MD文本",
|
||||||
|
"total_q": 5,
|
||||||
|
"cur_q": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **result**：返回答题结果统计
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "result",
|
||||||
|
"data": {
|
||||||
|
"total_q": 5,
|
||||||
|
"correct_cnt": 3,
|
||||||
|
"error_cnt": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
5. **error_list**：错误详情列表
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "error_list",
|
||||||
|
"data": {
|
||||||
|
"error_cnt": 2,
|
||||||
|
"rows": [
|
||||||
|
{
|
||||||
|
"pos": 1,
|
||||||
|
"q_desc": "第1题题干",
|
||||||
|
"your_a": "你的答案",
|
||||||
|
"corrent_a": "正确答案",
|
||||||
|
"error_desc": "错误原因说明"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 发送的消息类型（客户端 → 服务端）
|
||||||
|
|
||||||
|
1. **qa_start**：连接成功后自动发送，表示可以开始流程
|
||||||
|
```json
|
||||||
|
{ "type": "qa_start", "data": { "d": "test data", "v": 100 } }
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **conform_start**：用户点击开始按钮后发送
|
||||||
|
```json
|
||||||
|
{ "type": "conform_start", "data": null }
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **text_answer**：提交文本答案
|
||||||
|
```json
|
||||||
|
{ "type": "text_answer", "data": "用户输入的内容" }
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **audio_answer**：提交录音答案（Base64 编码）
|
||||||
|
```json
|
||||||
|
{ "type": "audio_answer", "data": "base64音频字符串" }
|
||||||
|
```
|
||||||
|
|
||||||
|
> 所有消息通过内置的 `WebSocket` 实例发送，使用 `this.ws.send(message)`。
|
||||||
14
docs/ai/registerfunction.md
Normal file
14
docs/ai/registerfunction.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# RegisterFunction
|
||||||
|
|
||||||
|
## 控件功能，类型（普通控件或容器控件），父类控件
|
||||||
|
- **控件功能**：提供一个全局的函数注册与获取机制，用于管理和维护可复用的功能函数。通过名称注册函数，并可通过名称动态获取已注册的函数。
|
||||||
|
- **类型**：普通控件
|
||||||
|
- **父类控件**：无（原生 JavaScript 类）
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
- 无显式初始化参数。构造函数 `constructor()` 中初始化一个空对象 `this.rfs = {}`，用于存储注册的函数。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
- 无 DOM 事件。该控件主要提供以下方法作为接口：
|
||||||
|
- `register(n, f)`：将函数 `f` 以名称 `n` 注册到内部存储对象中。
|
||||||
|
- `get(n)`：根据名称 `n` 获取已注册的函数，若不存在则返回 `null`（捕获异常后处理）。
|
||||||
119
docs/ai/rtc.md
Normal file
119
docs/ai/rtc.md
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
根据你提供的源码，其中包含多个控件（类）的定义。我们从中识别出以下三个注册的控件：
|
||||||
|
|
||||||
|
1. `bricks.VideoBox` —— 视频播放控件
|
||||||
|
2. `bricks.Signaling` —— 信令管理类（非 UI 控件，但作为功能模块）
|
||||||
|
3. `bricks.RTCP2PConnect` —— WebRTC 点对点连接管理类
|
||||||
|
|
||||||
|
按照你的要求：**每个控件需以 Markdown 格式编写文档，一级标题为控件名称，包含“控件功能、类型、父类”，二级标题为“初始化参数”和“主要事件”**。
|
||||||
|
|
||||||
|
> ⚠️ 注意：`Signaling` 和 `RTCP2PConnect` 是普通 JS 类，并非 UI 控件或继承自 `JsWidget`，因此归类为“普通控件”；而 `VideoBox` 继承自 `JsWidget`，属于 UI 控件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# VideoBox
|
||||||
|
|
||||||
|
**控件功能**：用于在页面中创建并管理 `<video>` 元素，支持设置音视频流（MediaStream），常用于本地或远程视频渲染。
|
||||||
|
**类型**：普通控件（UI 控件）
|
||||||
|
**父类控件**：`bricks.JsWidget`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
无显式构造函数，调用 `create()` 方法时自动创建 DOM 元素并设置默认属性：
|
||||||
|
- `autoplay: true`：自动播放
|
||||||
|
- `muted: true`：静音播放
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无自定义事件暴露，但内部使用原生 `<video>` 元素事件（如 `play`, `pause` 等）。提供以下方法供外部控制：
|
||||||
|
- `set_stream(stream)`：设置 MediaStream 到 video 元素
|
||||||
|
- `get_stream()`：获取当前绑定的 MediaStream
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Signaling
|
||||||
|
|
||||||
|
**控件功能**：实现 WebSocket 信令通道，用于登录、心跳、消息收发及会话管理，是 WebRTC 多端通信的核心协调模块。支持注册不同类型会话的消息处理器。
|
||||||
|
**类型**：普通控件（非 UI 模块）
|
||||||
|
**父类控件**：无（独立类）
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `signaling_url` | String | WebSocket 服务地址 |
|
||||||
|
| `info` | Object | 当前客户端身份信息（如用户ID等），随每条消息发送 |
|
||||||
|
| `connect_opts` | Object | 连接选项，传递给会话处理器 |
|
||||||
|
| `onclose` | Function | WebSocket 关闭时回调 |
|
||||||
|
| `onlogin` | Function | 登录成功后返回在线用户列表时触发 |
|
||||||
|
| `onopen` | Function | WebSocket 打开时回调（可选） |
|
||||||
|
| `heartbeat_period` | Number | 心跳周期（秒），0 表示不启用 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
通过 `recvdata_handler` 分发接收到的数据，关键消息类型如下：
|
||||||
|
- `online`: 登录响应，包含当前在线用户列表
|
||||||
|
- `new_session`: 创建新会话请求
|
||||||
|
- 自定义 sessiontype 消息：由 `add_sessionhandler()` 注册的处理器处理
|
||||||
|
|
||||||
|
支持动态注册会话处理器：
|
||||||
|
- `add_sessionhandler(sessiontype, handlerClass)`：为特定会话类型注册处理器类
|
||||||
|
- `add_handler(key, handler)`：为指定 sessionid 添加消息处理器
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# RTCP2PConnect
|
||||||
|
|
||||||
|
**控件功能**：封装 WebRTC 点对点连接逻辑，包括媒体流处理、数据通道、信令交互、ICE 协商等，实现音视频通话与数据传输。
|
||||||
|
**类型**：普通控件（通信模块）
|
||||||
|
**父类控件**：无（独立类）
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数 | 类型 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `signaling` | Signaling 实例 | 上层信令实例，用于发送接收信令消息 |
|
||||||
|
| `session` | Object | 当前会话对象 `{sessionid, sessiontype}` |
|
||||||
|
| `opts` | Object | 配置项，结构如下： |
|
||||||
|
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
ice_servers: [], // STUN/TURN 服务器配置
|
||||||
|
peer_info: {}, // 对端信息（用于 callrequest）
|
||||||
|
auto_callaccept: true, // 是否自动接受呼叫
|
||||||
|
media_options: { // getUserMedia 参数
|
||||||
|
video: true,
|
||||||
|
audio: true
|
||||||
|
},
|
||||||
|
data_connect: true, // 是否建立 datachannel
|
||||||
|
on_pc_connected: Function, // PeerConnection 成功连接回调
|
||||||
|
on_pc_disconnected: Function, // PeerConnection 断开回调
|
||||||
|
on_dc_open: Function, // DataChannel 打开回调
|
||||||
|
on_dc_close: Function, // DataChannel 关闭回调
|
||||||
|
on_dc_message: Function // 收到 DataChannel 消息回调
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
通过内置 handler 监听并响应以下信令消息类型：
|
||||||
|
- `sessioncreated`：会话创建成功，启动连接流程
|
||||||
|
- `callrequest`：收到呼叫请求，若 auto_accept 则自动响应
|
||||||
|
- `callaccepted`：对方接受呼叫，开始 SDP 协商
|
||||||
|
- `offer`：收到 SDP Offer，回复 Answer
|
||||||
|
- `answer`：收到 SDP Answer，完成协商
|
||||||
|
- `icecandidate`：收到 ICE 候选，添加到 PeerConnection
|
||||||
|
- `sessionquit`：会话结束，关闭连接
|
||||||
|
|
||||||
|
其他运行时事件：
|
||||||
|
- `oniceconnectionstatechange`：ICE 状态变化
|
||||||
|
- `onconnectionstatechange`：连接状态变化（connected/disconnected）
|
||||||
|
- `ondatachannel` / `ontrack`：远程数据通道或媒体轨道到达
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
✅ **总结说明**：
|
||||||
|
- `VideoBox` 是可视化控件，用于展示视频流。
|
||||||
|
- `Signaling` 是信令中枢，负责与服务器通信。
|
||||||
|
- `RTCP2PConnect` 是 WebRTC 连接控制器，处理点对点连接全流程。
|
||||||
|
|
||||||
|
三者协同工作，构成完整的实时通信系统。
|
||||||
24
docs/ai/running.md
Normal file
24
docs/ai/running.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
```markdown
|
||||||
|
# Running
|
||||||
|
|
||||||
|
控件功能：显示一个运行中的动画（如加载中）并实时展示已运行的时间，常用于提示用户操作正在进行。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.BaseModal
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| target | 可选，任意类型 | 指定目标元素或上下文（未在当前代码中直接使用，可能由父类处理） |
|
||||||
|
| icon | 字符串 | 运行动画的图标 URL，若未提供则使用默认的 `running.gif` 资源 |
|
||||||
|
| auto_open | 布尔值（自动设置为 true） | 控制模态框是否自动打开，此控件强制设为 `true` |
|
||||||
|
| archor | 字符串（固定为 'cc'） | 定位锚点，表示居中显示（center-center） |
|
||||||
|
|
||||||
|
> 注：`auto_open` 和 `archor` 由构造函数内部设定，调用时无需手动传入。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无自定义事件定义，但继承了 `bricks.BaseModal` 的相关行为：
|
||||||
|
|
||||||
|
- **dismiss()**：关闭并清理定时任务。调用时会停止时间计时器，并执行父类的关闭逻辑。
|
||||||
|
```
|
||||||
55
docs/ai/scroll.md
Normal file
55
docs/ai/scroll.md
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
# VScrollPanel
|
||||||
|
|
||||||
|
控件功能：垂直滚动面板，用于在内容超出容器高度时提供垂直滚动能力，并支持在滚动接近顶部或底部时触发阈值事件。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `min_threshold` | Number (可选) | 滚动条到达顶部附近时触发 `min_threshold` 事件的阈值比例，默认为 `0.02`（即 2%） |
|
||||||
|
| `max_threshold` | Number (可选) | 滚动条到达底部附近时触发 `max_threshold` 事件的阈值比例，默认为 `0.95`（即 95%） |
|
||||||
|
| `width` | String | 默认设置为 `'100%'`，控件宽度占满父容器 |
|
||||||
|
| `height` | String | 默认设置为 `'100%'`，控件高度占满父容器 |
|
||||||
|
| `css` | String (可选) | 自定义 CSS 类名，会额外添加 `'scrollpanel'` 类 |
|
||||||
|
| `overflow` | String | 固定为 `'auto'`，启用滚动条自动显示 |
|
||||||
|
|
||||||
|
> 注意：以上 `width`、`height`、`css`、`overflow` 会在构造函数中自动设置。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`min_threshold`**
|
||||||
|
当垂直滚动位置接近顶部（根据 `min_threshold` 判断）时触发，通常表示用户已滚动到最上方，可用于加载更多内容等操作。
|
||||||
|
|
||||||
|
- **`max_threshold`**
|
||||||
|
当垂直滚动位置接近底部（根据 `max_threshold` 判断）时触发，常用于实现“滚动到底自动加载”功能。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# HScrollPanel
|
||||||
|
|
||||||
|
控件功能：水平滚动面板，用于在内容超出容器宽度时提供水平滚动能力，并可在滚动接近最左或最右时触发阈值事件。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.HBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| `min_threshold` | Number (可选) | 水平滚动条到达最左侧附近时触发 `min_threshold` 事件的比例阈值，默认为 `0.01`（即 1%） |
|
||||||
|
| `max_threshold` | Number (可选) | 水平滚动条到达最右侧附近时触发 `max_threshold` 事件的比例阈值，默认为 `0.99`（即 99%） |
|
||||||
|
| `width` | String | 默认设置为 `'100%'`，控件宽度占满父容器 |
|
||||||
|
| `height` | String | 默认设置为 `'100%'`，控件高度占满父容器 |
|
||||||
|
| `css` | String (可选) | 自定义 CSS 类名，会合并 `'scrollpanel'` 类 |
|
||||||
|
| `overflow` | String | 固定为 `'auto'`，允许出现水平滚动条 |
|
||||||
|
|
||||||
|
> 注意：`width`、`height`、`css`、`overflow` 由构造函数自动配置。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **`min_threshold`**
|
||||||
|
当水平滚动位置接近最左侧时触发，可用于加载左侧更多内容或执行其他逻辑。
|
||||||
|
|
||||||
|
- **`max_threshold`**
|
||||||
|
当水平滚动位置接近最右侧时触发，适用于实现“横向滚动加载更多”场景。
|
||||||
15
docs/ai/splitter.md
Normal file
15
docs/ai/splitter.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
```markdown
|
||||||
|
# Splitter
|
||||||
|
|
||||||
|
控件功能：用于在页面中创建一个分隔线（horizontal rule），常用于视觉上分割不同区域的内容。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.JsWidget
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
无特殊初始化参数，继承自 `bricks.JsWidget` 的默认参数。构造函数中调用 `super({})`，使用空配置对象初始化父类。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- **create**：控件创建时触发，内部调用 `_create('hr')` 方法生成 `<hr>` DOM 元素并赋值给 `this.dom_element`，作为该控件的根元素。
|
||||||
|
```
|
||||||
40
docs/ai/streaming_audio.md
Normal file
40
docs/ai/streaming_audio.md
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
```markdown
|
||||||
|
# StreamAudio
|
||||||
|
|
||||||
|
控件功能：实现音频流的实时采集、语音活动检测（VAD）触发、音频上传以及接收服务器返回的识别文本结果，常用于语音识别场景。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts` {Object} - 配置选项对象，继承自 VBox 并扩展以下属性：
|
||||||
|
- `name` {string} 可选 - 控件名称，默认为 `'asr_text'`。
|
||||||
|
- `height` {string} - 固定高度为 `'100%'`，不可覆盖。
|
||||||
|
- 其他 VBox 支持的通用参数（如 layout 等）。
|
||||||
|
|
||||||
|
> 注意：构造函数中会自动设置 `height='100%'` 和默认 `name`，并创建内部子控件（按钮、填充器、文本显示等）。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无直接对外暴露的自定义事件，但通过绑定和回调机制处理以下行为：
|
||||||
|
|
||||||
|
- **按钮点击事件**：`click` 事件绑定在内部 `this.button` 上，触发 `toggle_status()` 方法，用于开始或停止音频流采集。
|
||||||
|
- **语音结束事件**：由 `vad.MicVAD` 的 `onSpeechEnd(audio)` 回调触发，调用 `handle_audio(audio)` 将音频数据编码并发送。
|
||||||
|
- **数据接收事件**：在 `receive_data()` 中通过 `reader.readline()` 持续读取服务端响应流，每收到一条 JSON 数据即更新显示文本。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ASRText
|
||||||
|
|
||||||
|
控件功能：与 `StreamAudio` 完全相同，是其别名控件，用于更语义化地表示语音识别文本输出组件。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.VBox（实际继承关系同 StreamAudio）
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同 `StreamAudio`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
同 `StreamAudio`。
|
||||||
|
```
|
||||||
94
docs/ai/svg.md
Normal file
94
docs/ai/svg.md
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
```markdown
|
||||||
|
# Svg
|
||||||
|
|
||||||
|
控件功能：用于加载并显示 SVG 图标，支持颜色动态设置、闪烁效果和自适应尺寸。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|-----------|--------|------|
|
||||||
|
| `rate` | Number | 缩放比例，默认为 1，影响宽度和高度（cwidth 和 cheight） |
|
||||||
|
| `url` | String | SVG 文件的 URL 地址，用于动态加载 SVG 内容 |
|
||||||
|
| `color` | String | SVG 的填充颜色（可选），若未指定则从应用获取默认颜色 |
|
||||||
|
| `blinktime`| Number | 闪烁间隔时间（毫秒），若设置则开启周期性闪烁显示/隐藏 |
|
||||||
|
|
||||||
|
> **说明**：
|
||||||
|
> - `cwidth` 和 `cheight` 会被自动设为 `rate` 值。
|
||||||
|
> - `dynsize` 固定为 true，表示启用动态尺寸。
|
||||||
|
> - 若未提供 `color`，会调用 `bricks.app.get_color()` 获取默认颜色。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无自定义事件，但可通过 DOM 事件绑定进行交互。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# StatedSvg
|
||||||
|
|
||||||
|
控件功能：继承自 `Svg`，支持多状态切换的 SVG 控件。每个状态对应一个 SVG 资源 URL，点击时按顺序循环切换状态，并触发状态变化事件。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.Svg
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|---------|---------|------|
|
||||||
|
| `states` | Array<{state: String, url: String}> | 状态数组，每个元素包含状态标识和对应的 SVG URL |
|
||||||
|
| `state` | String | 初始状态值；若未设置，则默认使用 `states[0].state` |
|
||||||
|
|
||||||
|
> 示例格式：
|
||||||
|
> ```js
|
||||||
|
> states: [
|
||||||
|
> { state: 'on', url: '/icons/light_on.svg' },
|
||||||
|
> { state: 'off', url: '/icons/light_off.svg' }
|
||||||
|
> ]
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 |
|
||||||
|
|--------------|----------|
|
||||||
|
| `state_changed` | 当前状态发生改变时触发，携带新状态作为参数 |
|
||||||
|
|
||||||
|
> 使用方式示例：
|
||||||
|
> ```js
|
||||||
|
> widget.on('state_changed', function(newState) {
|
||||||
|
> console.log('State changed to:', newState);
|
||||||
|
> });
|
||||||
|
> ```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# MultipleStateIcon
|
||||||
|
|
||||||
|
控件功能：一种多状态图标控件，基于键值对形式管理多个状态及其对应的 SVG URL，点击后循环切换状态并更新显示内容。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.Svg
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------------------|------|
|
||||||
|
| `urls` | Object<String: String> | 键为状态名，值为对应 SVG 的 URL，例如 `{ normal: '...', active: '...' }` |
|
||||||
|
| `state`| String | 当前初始状态，必须是 `urls` 中的一个键名 |
|
||||||
|
|
||||||
|
> 示例：
|
||||||
|
> ```js
|
||||||
|
> urls: {
|
||||||
|
> play: '/icons/play.svg',
|
||||||
|
> pause: '/icons/pause.svg',
|
||||||
|
> stop: '/icons/stop.svg'
|
||||||
|
> },
|
||||||
|
> state: 'play'
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 |
|
||||||
|
|--------------|----------|
|
||||||
|
| `state_changed` | 每次调用 `change_state` 成功切换状态后触发，携带新的状态名称作为参数 |
|
||||||
|
|
||||||
|
> 支持通过 `.on('state_changed', ...)` 监听状态变更。
|
||||||
|
```
|
||||||
60
docs/ai/tab.md
Normal file
60
docs/ai/tab.md
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
# TabPanel
|
||||||
|
|
||||||
|
**控件功能**：TabPanel 是一个容器控件，用于实现标签页切换功能。用户可以通过点击不同的标签页按钮来切换显示对应的内容区域。支持顶部、底部、左侧、右侧的标签布局，支持动态添加和移除标签页，并可缓存已创建的页面内容以提高性能。
|
||||||
|
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `tab_pos` | String | 标签位置，可选值为 `"top"`（默认）、`"bottom"`、`"left"`、`"right"`，决定标签栏的排列方向与位置。 |
|
||||||
|
| `tab_long` | String | 标签宽度或高度占比，默认为 `"100%"`，控制标签的整体伸展行为。 |
|
||||||
|
| `css` | Object/String | 自定义 CSS 类名，应用于根元素。可用类包括：`tab`, `tab-button`, `tab-button-active`, `tab-button-hover`, `tab-content`。 |
|
||||||
|
| `items` | Array | 标签项数组，每个对象包含以下属性：<br>- `name`: 标签唯一标识符（必填）<br>- `label`: 显示文本<br>- `icon`: 图标类名（可选）<br>- `removable`: 是否可关闭（布尔值）<br>- `refresh`: 是否每次切换时重新加载内容（布尔值）<br>- `content`: 内容组件描述对象或直接是 `bricks.JsWidget` 实例 |
|
||||||
|
|
||||||
|
示例：
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
tab_pos: "top",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: "tab1",
|
||||||
|
label: "首页",
|
||||||
|
icon: "fa fa-home",
|
||||||
|
removable: false,
|
||||||
|
refresh: false,
|
||||||
|
content: { widgettype: "Text", text: "Welcome!" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
### `switch`
|
||||||
|
- **触发时机**：当标签页切换完成并展示新内容时触发。
|
||||||
|
- **事件数据**：当前激活的内容控件实例（即 `w`，类型为 `bricks.JsWidget`）。
|
||||||
|
- **用途**：可用于监听内容区域的变化，进行状态同步或日志记录。
|
||||||
|
|
||||||
|
示例监听：
|
||||||
|
```js
|
||||||
|
tabpanel.bind('switch', function(event) {
|
||||||
|
console.log('当前显示的内容组件：', event.data);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### `active`（内容控件事件）
|
||||||
|
- **触发时机**：当某个内容控件被切换到前台显示时，该控件自身会触发 `active` 事件。
|
||||||
|
- **说明**：此事件由内容控件调用 `dispatch('active')` 触发，适用于需要在页面显示时执行初始化逻辑的场景（如刷新数据、聚焦输入框等）。
|
||||||
|
|
||||||
|
> 注意：此事件不是 TabPanel 直接发出，而是其内部内容控件在被激活时自行派发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**备注**：
|
||||||
|
- TabPanel 使用 `bricks.Toolbar` 实现标签按钮栏，支持横向或纵向布局。
|
||||||
|
- 内容区使用 `bricks.Filler` 作为容器，通过 `switch_content()` 方法动态替换内容。
|
||||||
|
- 已加载的内容默认会被缓存于 `content_buffer` 中，除非设置 `refresh: true`，否则不会重复创建。
|
||||||
|
- 支持通过 `add_tab(desc)` 动态添加新标签页，以及通过事件绑定处理关闭操作。
|
||||||
32
docs/ai/tabular.md
Normal file
32
docs/ai/tabular.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
```markdown
|
||||||
|
# Tabular
|
||||||
|
|
||||||
|
控件功能：用于以表格形式展示数据，支持行选择、复选框状态变化事件、动态内容展开等功能，适用于数据列表展示与交互。
|
||||||
|
类型：普通控件（容器型数据展示控件）
|
||||||
|
父类控件：`bricks.DataViewer`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts` {Object}：初始化选项对象，继承自 `DataViewer` 的参数，并扩展以下特有属性：
|
||||||
|
- `row_options` {Object}：定义每行数据渲染的配置，包括字段（`fields`）、高度（`cheight`）等。
|
||||||
|
- `content_view` {Object|undefined}：可选，指定点击行时展开的详细内容视图描述（JSON 结构），若存在则启用折叠面板功能。
|
||||||
|
- `editexclouded` {Array}：可选，包含不应在编辑模式中显示的字段名数组。
|
||||||
|
- `data_params` {Object}：用于生成隐藏字段的数据参数，在表单提交等场景下使用。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `row_selected`
|
||||||
|
触发时机：当某一行被点击选中时触发。
|
||||||
|
携带参数：当前选中行对应的数据记录（`record` 对象）。
|
||||||
|
示例：可用于更新详情面板或外部控件的状态。
|
||||||
|
|
||||||
|
- `row_check_changed`
|
||||||
|
触发时机：当某行的复选框状态发生变化时触发。
|
||||||
|
携带参数：该行对应的用户数据（`user_data`）。
|
||||||
|
注意：通过绑定 `DataRow` 的 `check_changed` 事件派发而来，常用于多选操作处理。
|
||||||
|
|
||||||
|
- 自定义事件转发（通过 `record_event_handle`）
|
||||||
|
支持将子组件（如工具栏按钮）的事件冒泡到父级，例如：
|
||||||
|
- `click`, `dblclick` 等 DOM 事件封装后的自定义事件。
|
||||||
|
- 携带原始记录数据，便于业务逻辑响应。
|
||||||
|
```
|
||||||
42
docs/ai/toolbar.md
Normal file
42
docs/ai/toolbar.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# Toolbar
|
||||||
|
|
||||||
|
控件功能：创建一个可包含多个工具按钮的工具栏，支持水平或垂直布局，每个按钮可触发命令事件，并支持动态添加/删除按钮。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：`bricks.Layout`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `orientation` | String | 工具栏方向，可选 `'horizontal'`（默认）或 `'vertical'`。影响滚动面板类型及间隔方向。 |
|
||||||
|
| `target` | Any | 可选的目标对象，在触发命令事件时附加到事件数据中。 |
|
||||||
|
| `interval` | String 或 Number | 工具项之间的间隔大小，默认为 `'10px'`。根据方向设置宽度或高度。 |
|
||||||
|
| `tools` | Array\<Object\> | 工具按钮描述数组，每个对象包含以下子属性：<br>- `icon`: 按钮图标路径或类名<br>- `name`: 按钮唯一名称，用于事件分发和查找<br>- `label`: 按钮显示文本<br>- `css`: 自定义CSS类名<br>- `removable`: Boolean，是否可移除（若为 `true`，则显示删除图标） |
|
||||||
|
|
||||||
|
示例：
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
orientation: 'horizontal',
|
||||||
|
interval: '10px',
|
||||||
|
target: myTarget,
|
||||||
|
tools: [
|
||||||
|
{ name: 'save', label: '保存', icon: 'save-icon.png', css: 'btn-save', removable: true },
|
||||||
|
{ name: 'undo', label: '撤销', icon: 'undo-icon.png' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 传递数据结构 |
|
||||||
|
|-------|----------|-------------|
|
||||||
|
| `command` | 当任意工具按钮被点击时触发 | `{ name, label, icon, css, [target] }` —— 包含该工具的所有配置信息，如果有设置 `target` 则也会包含 |
|
||||||
|
| `[tool.name]` | 动态事件，以工具的 `name` 命名的事件会被单独触发 | 同上，便于监听特定按钮操作 |
|
||||||
|
| `remove` | 当用户点击可移除按钮上的删除图标时触发 | 被移除工具的原始 `tool_opts` 对象 |
|
||||||
|
|
||||||
|
> 示例：若某工具 `name: 'export'`，则点击它会同时触发 `command` 和 `export` 两个事件。
|
||||||
|
|
||||||
|
### 补充说明
|
||||||
|
- 使用 `click(name)` 方法可通过编程方式模拟点击指定名称的按钮。
|
||||||
|
- 支持键盘选择（通过 `enable_key_select()`）。
|
||||||
|
- 所有工具按钮使用 `JsWidget` 构建，异步创建，确保组件树正确初始化。
|
||||||
83
docs/ai/tree.md
Normal file
83
docs/ai/tree.md
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
以下是根据你提供的源码中定义的两个控件（`TreeNode` 和 `Tree`）编写的 **Markdown 格式控件文档**，每个控件均按照要求包含一级标题、功能描述、类型与父类，以及“初始化参数”和“主要事件”两个二级标题。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# TreeNode
|
||||||
|
|
||||||
|
**控件功能**：表示树结构中的一个节点，用于展示树形数据中的单个条目，支持展开/折叠子节点、图标显示、复选框等功能。它是构成树形结构的基本单元。
|
||||||
|
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `tree` | `bricks.Tree` 实例 | 所属的树控件实例，用于回调和共享配置 |
|
||||||
|
| `pnode` | `bricks.TreeNode` 实例或 `null` | 父节点实例，根节点为 `null` |
|
||||||
|
| `data` | `Object` | 节点绑定的数据对象，包含文本、ID、是否为叶子等字段 |
|
||||||
|
|
||||||
|
在构造函数中通过 `opts` 设置默认布局属性：
|
||||||
|
- `width: '100%'`
|
||||||
|
- `height: 'auto'`
|
||||||
|
|
||||||
|
内部自动设置以下状态和属性：
|
||||||
|
- `this.is_leaf`：根据 `data[tree.is_leafField]` 判断是否为叶子节点
|
||||||
|
- `this.params`：传递给后端请求的参数，包含节点 ID 和类型信息
|
||||||
|
- `this.container`：仅非叶子节点创建，用于容纳子节点的 `VBox` 容器（初始隐藏）
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 回调参数说明 |
|
||||||
|
|--------|--------|-------------|
|
||||||
|
| `click`（注册于 `node_widget`） | 用户点击节点行时触发 | 由 `tree.node_click_handle` 处理，传入当前节点实例 |
|
||||||
|
| `state_changed`（注册于 `triple` 控件） | 节点前导图标状态切换时（点击展开/折叠图标） | 触发 `toggleExpandCollapse` 方法，控制子节点容器的显隐 |
|
||||||
|
| （间接）`changed`（注册于 `check_w`） | 若启用复选框，用户勾选/取消勾选时触发 | 交由 `tree.node_checked` 处理，更新 `checked_data` 并派发事件 |
|
||||||
|
|
||||||
|
> 注意：`TreeNode` 自身不直接 dispatch 公共事件，而是通过所属 `Tree` 实例进行事件分发。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tree
|
||||||
|
|
||||||
|
**控件功能**：树形结构控件，用于展示层级化的数据（如目录、组织架构等），支持异步加载、节点增删改、复选、工具栏操作等功能。可作为静态树或可编辑树使用。
|
||||||
|
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VScrollPanel`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必需 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| `row_height` | `String` | 否 | 每个节点行的高度，默认 `'35px'` |
|
||||||
|
| `idField` | `String` | 是 | 数据中表示节点唯一标识的字段名 |
|
||||||
|
| `textField` | `String` | 是 | 数据中表示节点显示文本的字段名 |
|
||||||
|
| `is_leafField` | `String` | 否 | 标识节点是否为叶子节点的字段名，默认 `'is_leaf'` |
|
||||||
|
| `typeField` | `String` | 否 | 区分节点类型的字段名，用于定制图标 |
|
||||||
|
| `data` | `Array` | 否 | 静态树数据数组，直接初始化节点 |
|
||||||
|
| `dataurl` | `String` | 否 | 异步加载子节点数据的 URL 地址 |
|
||||||
|
| `method` | `String` | 否 | 请求数据的方法，默认 `'GET'` |
|
||||||
|
| `params` | `Object` | 否 | 请求时附加的全局参数 |
|
||||||
|
| `node_view` | `Widget Description` | 否 | 自定义节点渲染模板（描述对象） |
|
||||||
|
| `checkField` | `String` | 否 | 支持复选功能时，数据中保存勾选状态的字段名 |
|
||||||
|
| `node_typeicons` | `Object` | 否 | 按节点类型定义图标的映射表，格式 `{ nodetype: { open, close, leaf }, default_type: "type" }` |
|
||||||
|
| `editable` | `Object` | 否 | 编辑配置，含 `fields`, `add_url`, `delete_url`, `update_url` 等 |
|
||||||
|
| `newdata_params` | `Object` | 否 | 添加新节点时额外注入的固定参数 |
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 | 回调参数说明 |
|
||||||
|
|--------|--------|-------------|
|
||||||
|
| `node_selected` | 节点被点击选中或取消选中时派发 | 参数为 `node.user_data` 扩展了 `{ selected: true/false }` |
|
||||||
|
| `check_changed` | 节点复选框状态改变时派发 | 参数为该节点的 `user_data`，反映最新勾选状态 |
|
||||||
|
| `command`（来自 `toolbar_w`） | 工具栏按钮被点击时触发 | 由 `toolbar_command` 处理，根据 `event.params.name` 执行添加、删除、更新或其他自定义命令 |
|
||||||
|
| （自定义命令）如 `add`, `delete`, `update` 等 | 用户执行相应操作并成功提交后，通过 `dispatch(name, data)` 派发 | `data` 包含节点数据及元信息 `meta_data`（来源、标题、图标等），可用于打开表单或通知其他模块 |
|
||||||
|
|
||||||
|
此外，`Tree` 还会响应以下用户交互行为并执行逻辑：
|
||||||
|
- 展开/折叠节点（通过 `expand()` / `collapse()`）
|
||||||
|
- 动态加载子节点数据（`get_children_data`）
|
||||||
|
- 增删改节点（通过 HTTP 请求或本地操作）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
> ✅ 文档说明：以上内容基于源码分析生成，适用于开发人员查阅组件接口与行为。实际使用时需确保依赖 `bricks` 框架核心模块（如 `HttpJson`, `ModalForm`, `IconTextBar` 等）已正确加载。
|
||||||
18
docs/ai/vadtext.md
Normal file
18
docs/ai/vadtext.md
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
```markdown
|
||||||
|
# VadText
|
||||||
|
|
||||||
|
控件功能：一个集成语音采集、音频播放和语音识别文本展示的复合控件，用户点击按钮开始录音，当检测到语音结束时自动将音频转为 WAV 格式并发送至后端进行语音识别，返回结果实时显示在文本区域中。
|
||||||
|
类型：容器控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts.name` *(可选)*: 控件名称，默认为 `'asr_text'`。
|
||||||
|
- `opts.height`: 默认设置为 `'100%'`，占据父容器全部高度。
|
||||||
|
- 其他继承自 `VBox` 的通用布局参数（如 `width`, `align` 等）也可传入。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `audio_ready`: 当语音活动检测（VAD）捕获到一段完整的语音并生成音频数据时触发。携带参数为 `Float32Array` 类型的音频样本数据。
|
||||||
|
- `changed`: 当语音识别完成且有非空文本内容时，在停止录音后触发。携带当前控件的值对象 `{ [name]: text }`，可用于表单提交或状态同步。
|
||||||
|
```
|
||||||
90
docs/ai/videoplayer.md
Normal file
90
docs/ai/videoplayer.md
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
以下是根据你提供的源码中定义的两个控件 `VideoPlayer` 和 `Iptv`，按照要求编写的 **Markdown 格式控件文档**：
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# VideoPlayer
|
||||||
|
|
||||||
|
**控件功能**：一个支持多种视频格式（MP4、HLS `.m3u8`、DASH `.mpd`）的视频播放器控件，内置播放控制条，支持播放/暂停、音量调节、倍速播放、音轨切换和全屏功能。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|----------|--------|------|
|
||||||
|
| `url` | String | 视频资源地址，支持 `.mp4`、`.m3u8`（HLS）、`.mpd`（DASH）格式 |
|
||||||
|
| `autoplay`| Boolean | 是否自动播放，默认为 `false` |
|
||||||
|
|
||||||
|
> 示例：
|
||||||
|
> ```js
|
||||||
|
> new bricks.VideoPlayer({
|
||||||
|
> url: 'https://example.com/video.m3u8',
|
||||||
|
> autoplay: true
|
||||||
|
> });
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 |
|
||||||
|
|--------------|--------|
|
||||||
|
| `domon` | 控件被挂载到 DOM 时触发，用于初始化播放器 |
|
||||||
|
| `domoff` | 控件从 DOM 中移除时触发，用于销毁播放器资源 |
|
||||||
|
| `click` | 点击播放区域时显示控制栏，并启动隐藏倒计时 |
|
||||||
|
| `play_ok` | （由 `Iptv` 使用）视频成功开始播放时可通过外部监听上报 |
|
||||||
|
| `play_failed` | （由 `Iptv` 使用）视频加载失败或无法播放时触发上报 |
|
||||||
|
|
||||||
|
> 注意：`play_ok` 和 `play_failed` 并非直接由 `VideoPlayer` 派发，而是通过其子类或组合控件（如 `Iptv`）在状态判断后手动调用。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Iptv
|
||||||
|
|
||||||
|
**控件功能**：专用于 IPTV 场景的播放控件，可动态获取频道信息并自动加载 `VideoPlayer` 进行播放，同时支持播放成功/失败时向服务器上报状态。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：`bricks.VBox`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|------------------|--------|------|
|
||||||
|
| `iptv_data_url` | String | 获取频道数据的接口 URL，返回包含 `url`、`tv_name`、`id` 等字段的 JSON 数据 |
|
||||||
|
| `playok_url` | String | 播放成功时上报的接口地址（可选） |
|
||||||
|
| `playfailed_url` | String | 播放失败时上报的接口地址（可选） |
|
||||||
|
|
||||||
|
> 示例：
|
||||||
|
> ```js
|
||||||
|
> new bricks.Iptv({
|
||||||
|
> iptv_data_url: '/api/iptv/channel',
|
||||||
|
> playok_url: '/api/report/playok',
|
||||||
|
> playfailed_url: '/api/report/playfailed'
|
||||||
|
> });
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发条件 |
|
||||||
|
|--------------|--------|
|
||||||
|
| `play_ok` | 当内部 `VideoPlayer` 成功播放时，向 `playok_url` 发起 GET 请求进行上报 |
|
||||||
|
| `play_failed` | 当 `VideoPlayer` 播放失败时，向 `playfailed_url` 发起 GET 请求进行上报 |
|
||||||
|
|
||||||
|
> 说明：这两个事件是通过监听 `VideoPlayer` 的底层行为（如元数据加载完成且未出错）间接触发的，目前依赖于业务逻辑判断。
|
||||||
|
|
||||||
|
### 方法说明
|
||||||
|
|
||||||
|
- `setValue(data)`：更新当前播放频道的数据（如更换频道），会同步更新标题和视频源。
|
||||||
|
- 参数 `data`: 包含 `url`, `tv_name`, `id` 的对象
|
||||||
|
- 示例：
|
||||||
|
```js
|
||||||
|
iptvWidget.setValue({
|
||||||
|
id: "cctv1",
|
||||||
|
tv_name: "CCTV-1 综合",
|
||||||
|
url: "https://live.example.com/cctv1.m3u8"
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
> ✅ **备注**：
|
||||||
|
> - `VideoPlayer` 使用 [hls.js](https://github.com/video-dev/hls.js) 支持 HLS 流，需引入对应库；使用 [dash.js](https://github.com/Dash-Industry-Forum/dash.js) 支持 DASH 流。
|
||||||
|
> - `Iptv` 控件依赖 `HttpJson` 和 `HttpText` 发起网络请求，请确保相关模块已注册可用。
|
||||||
|
> - 所有控件均通过 `bricks.Factory.register` 注册，可在配置系统中以字符串形式创建。
|
||||||
47
docs/ai/websocket.md
Normal file
47
docs/ai/websocket.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
```markdown
|
||||||
|
# WebSocket
|
||||||
|
|
||||||
|
控件功能：用于建立与后端的 WebSocket 连接，支持发送和接收文本、Base64 编码的音视频数据，并提供多种事件回调。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------------|--------|------|
|
||||||
|
| ws_url | string | WebSocket 服务器的连接地址（如 `ws://example.com/socket`） |
|
||||||
|
| with_session | boolean | 是否携带当前会话信息；若为 `true`，则从 `bricks.app.get_session()` 获取 session 并传入 WebSocket 构造函数（注：源码中拼写错误 `sessopn` 应为 `session`） |
|
||||||
|
|
||||||
|
> 示例：
|
||||||
|
> ```js
|
||||||
|
> new bricks.WebSocket({
|
||||||
|
> ws_url: "ws://localhost:8080/ws",
|
||||||
|
> with_session: true
|
||||||
|
> });
|
||||||
|
> ```
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 |
|
||||||
|
|------------------|--------|
|
||||||
|
| onopen | WebSocket 连接成功打开时触发 |
|
||||||
|
| onmessage | 收到服务器发送的消息时触发（原始消息） |
|
||||||
|
| onerror | WebSocket 发生错误时触发 |
|
||||||
|
| onclose | WebSocket 连接关闭时触发 |
|
||||||
|
| ontext | 收到类型为 `text` 的消息时触发（由 `on_message` 解析后派发） |
|
||||||
|
| onbase64audio | 收到类型为 `base64audio` 的消息时触发 |
|
||||||
|
| onbase64video | 收到类型为 `base64video` 的消息时触发 |
|
||||||
|
|
||||||
|
> 其他自定义类型可通过 `ontypedata` 方式动态派发，格式为 `on + type`。
|
||||||
|
|
||||||
|
### 事件数据说明
|
||||||
|
|
||||||
|
- 所有通过 `onmessage` 解析并派发的事件数据均来自 JSON 格式的 `e.data`，结构如下：
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"data": "Hello"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
控件根据 `type` 字段自动派发对应的事件（如 `ontext`），并将 `data` 作为参数传递给事件处理器。
|
||||||
|
```
|
||||||
42
docs/ai/webspeech.md
Normal file
42
docs/ai/webspeech.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
```markdown
|
||||||
|
# WebTTS
|
||||||
|
|
||||||
|
**控件功能**：实现基于浏览器的文本转语音（Text-to-Speech）功能，支持多语言、音调和语速设置，并提供语音合成过程中的事件回调。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts`：继承自 `bricks.VBox` 的初始化参数，用于配置布局和基本属性。
|
||||||
|
- 支持 VBox 容器的所有通用配置项（如样式、子控件等）。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
无自定义事件触发，但内部使用以下语音合成事件进行状态监控：
|
||||||
|
- `onstart`：语音合成开始时输出日志。
|
||||||
|
- `onend`：语音合成结束时输出日志。
|
||||||
|
- `onerror`：语音合成出错时输出错误信息。
|
||||||
|
|
||||||
|
> 注：该控件通过调用 `speak(text)` 方法执行语音播放，不依赖外部事件绑定机制触发 UI 变化。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# WebASR
|
||||||
|
|
||||||
|
**控件功能**：实现基于浏览器的语音识别（Speech Recognition）功能，将用户的语音输入转换为文本内容，并通过事件派发识别结果。
|
||||||
|
**类型**：容器控件
|
||||||
|
**父类控件**：bricks.VBox
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `opts`：继承自 `bricks.VBox` 的初始化参数，用于配置布局和基本属性。
|
||||||
|
- 支持 VBox 容器的所有通用配置项。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `asr_result`：当语音识别成功返回结果时触发，携带识别出的文本内容。
|
||||||
|
- 数据格式：`{ content: string }`
|
||||||
|
- 示例：`{ content: "你好世界" }`
|
||||||
|
|
||||||
|
> 注：需浏览器支持 `SpeechRecognition` API，否则会打印不支持提示。
|
||||||
|
```
|
||||||
210
docs/ai/widget.md
Normal file
210
docs/ai/widget.md
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
以下是根据你提供的源码中注册的控件，按照要求编写的 **Markdown 格式控件文档**。每个控件都包含一级标题（控件名称）、功能、类型和父类，并在二级标题下列出初始化参数和主要事件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tooltip
|
||||||
|
|
||||||
|
**控件功能**：用于显示提示信息的浮动文本控件，通常作为鼠标悬停时的工具提示。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.Text`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `otext` | String | 显示的原始文本内容，支持国际化 |
|
||||||
|
| `rate` | Number | 字体缩放比例，默认为 `0.8` |
|
||||||
|
| `tip` | null | 固定为 `null`，防止继承 tooltip 行为 |
|
||||||
|
|
||||||
|
> 注：`Tooltip` 在构造时会自动设置 `rate=0.8` 并添加 `modal` CSS 类，最小宽度设为 `90px`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无自定义事件 | —— | —— |
|
||||||
|
|
||||||
|
> `Tooltip` 本身不派发自定义事件，但可通过 `show(otext, event)` 和 `hide()` 方法控制显隐。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Text
|
||||||
|
|
||||||
|
**控件功能**：基础文本显示控件，支持居中对齐、字体大小响应字符尺寸变化。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.TextBase`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `text` | String | 要显示的文本内容 |
|
||||||
|
| `otext` | String | 原始文本，用于国际化支持 |
|
||||||
|
| `i18n` | Boolean | 是否启用国际化，默认关闭 |
|
||||||
|
| `halign` | String | 水平对齐方式：`left`, `center`, `right`（默认 `center`） |
|
||||||
|
| `valign` | String | 垂直对齐方式：`top`, `center`, `bottom`（默认 `center`） |
|
||||||
|
| `wrap` | Boolean | 是否允许换行 |
|
||||||
|
| `css` | String | 自定义 CSS 类名 |
|
||||||
|
| `rate` | Number | 字体缩放系数，默认为 `1` |
|
||||||
|
|
||||||
|
> 字体大小基于全局 `bricks.app.charsize` 动态调整，初始 `cfontsize = 1`。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无 | `Text` 是静态控件，不触发交互事件 | —— |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# KeyinText
|
||||||
|
|
||||||
|
**控件功能**：可输入文本控件，通过监听键盘事件动态更新显示内容，适用于简易输入场景。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.Text`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `name` | String | 数据字段名，默认为 `'data'`，用于 `changed` 事件输出键名 |
|
||||||
|
| 其他参数继承自 `Text` | —— | 支持所有 `Text` 的参数 |
|
||||||
|
|
||||||
|
> 自动绑定全局 `keydown` 事件，接收字母、数字、回车等单字符输入。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| `changed` | 每当文本发生变化时（包括输入、删除） | 对象格式：`{ [this.name]: 当前文本 }`，例如 `{ data: "abc" }` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Title1
|
||||||
|
|
||||||
|
**控件功能**：一级标题控件，字体加粗，字号较大，用于页面主标题展示。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.TextBase`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `text` / `otext` | String | 显示文本或国际化原文 |
|
||||||
|
| `i18n` | Boolean | 是否启用国际化 |
|
||||||
|
| `halign` | String | 水平对齐方式 |
|
||||||
|
| `valign` | String | 垂直对齐方式 |
|
||||||
|
| `rate` | Number | 缩放比例，默认继承 |
|
||||||
|
|
||||||
|
> 内置样式：`fontWeight: bold`，`cfontsize: 1.96`，响应字符尺寸变化。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无 | 静态文本控件，无交互事件 | —— |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Title2
|
||||||
|
|
||||||
|
**控件功能**：二级标题控件，加粗显示，字号略小于 Title1，用于章节标题。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.TextBase`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同 `Title1`，支持相同参数。
|
||||||
|
|
||||||
|
> 内置属性：`cfontsize: 1.80`，其他与 `Title1` 一致。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无 | 静态控件 | —— |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Title3
|
||||||
|
|
||||||
|
**控件功能**：三级标题控件，用于子模块或小组块标题。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.TextBase`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同上。
|
||||||
|
|
||||||
|
> `cfontsize: 1.64`
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无 | —— | —— |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Title4
|
||||||
|
|
||||||
|
**控件功能**：四级标题控件，较小的加粗标题，适合细粒度结构划分。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.TextBase`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同上。
|
||||||
|
|
||||||
|
> `cfontsize: 1.48`
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无 | —— | —— |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Title5
|
||||||
|
|
||||||
|
**控件功能**：五级标题控件，轻量级标题样式。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.TextBase`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同上。
|
||||||
|
|
||||||
|
> `cfontsize: 1.32`
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无 | —— | —— |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Title6
|
||||||
|
|
||||||
|
**控件功能**：六级标题控件，最小的一套标题样式，接近正文但加粗。
|
||||||
|
**类型**：普通控件
|
||||||
|
**父类控件**：`bricks.TextBase`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
同上。
|
||||||
|
|
||||||
|
> `cfontsize: 1.16`
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
| 事件名 | 触发时机 | 携带参数 |
|
||||||
|
|--------|----------|---------|
|
||||||
|
| 无 | —— | —— |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
> ✅ 所有标题类控件均继承自 `TextBase`，具备统一的对齐、国际化、动态字体适配能力。
|
||||||
|
> 📌 提示：这些控件通过 `bricks.Factory.register()` 注册，可在配置中通过字符串名称创建实例。
|
||||||
208
docs/ai/widgets.md
Normal file
208
docs/ai/widgets.md
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
# bricks控件
|
||||||
|
bricks内置许多的显示控件，所有显示控件都继承自JsWidget，容器控件Layout就继承自JsWidget，其他的容器HBox， VBox继承自Layout
|
||||||
|
|
||||||
|
## 基础控件
|
||||||
|
* [Form](form.md)：输入表单控件
|
||||||
|
自动根据options中的fields输入字段的uitype值构造表单输入项，目前uitype属性支持的数据类型有：
|
||||||
|
** 'str' 对应的控件为： bricks.UiStr
|
||||||
|
** 'hide' 对应的控件为： bricks.UiHide
|
||||||
|
** 'tel' 对应的控件为： bricks.UiTel
|
||||||
|
** 'date' 对应的控件为： bricks.UiDate
|
||||||
|
** 'int' 对应的控件为： bricks.UiInt
|
||||||
|
** 'float' 对应的控件为： bricks.UiFloat
|
||||||
|
** 'check' 对应的控件为： bricks.UiCheck
|
||||||
|
** 'checkbox' 对应的控件为： bricks.UiCheckBox
|
||||||
|
** 'email' 对应的控件为： bricks.UiEmail
|
||||||
|
** 'file' 对应的控件为： bricks.UiFile
|
||||||
|
** 'image' 对应的控件为： bricks.UiImage
|
||||||
|
** 'code' 对应的控件为： bricks.UiCode
|
||||||
|
** 'text' 对应的控件为： bricks.UiText
|
||||||
|
** 'password' 对应的控件为： bricks.UiPassword
|
||||||
|
** 'audio' 对应的控件为： bricks.UiAudio
|
||||||
|
** 'video' 对应的控件为： bricks.UiVideo
|
||||||
|
上述控件都在[输入定义](inout.js)中注册为输入项控件
|
||||||
|
|
||||||
|
* [Accordion](accordion.md) bricks.Accordion
|
||||||
|
手风琴控件，支持多个标题，内容组成的控件，内容和展开和折叠
|
||||||
|
* [AudioPlayer](audio.md) bricks.AudioPlayer
|
||||||
|
音频播放控件
|
||||||
|
|
||||||
|
* [ChartBar](bar.md) bricks.ChartBar
|
||||||
|
将后台数据显示为条形图表
|
||||||
|
* [Button](button.md) bricks.Button
|
||||||
|
按钮控件
|
||||||
|
|
||||||
|
* [Cols](cols.md) bricks.Cols
|
||||||
|
列式排列控件，可动态填满父控件的宽度
|
||||||
|
* [Conform](conform.md) bricks.Conform
|
||||||
|
确认控件，弹出窗口显示内容，并要求用户确认
|
||||||
|
|
||||||
|
* [Countdown](countdown.md) bricks.Countdown
|
||||||
|
时间倒计时控件，显示从还剩下的时间
|
||||||
|
* [TimePassed](countdown.md) bricks.TimePassed
|
||||||
|
时间消耗控件，显示从开始计时开始所消耗的时间
|
||||||
|
* [DataGrid](datagrid.md) bricks.DataGrid
|
||||||
|
数据表格控件
|
||||||
|
* [DataRow](datarow.md) bricks.DataRow
|
||||||
|
数据行控件
|
||||||
|
* [DataViewer](dataviewer.md) bricks.DataViewer
|
||||||
|
数据显示控件，DynamicColumn控件的后代控件
|
||||||
|
* [DOCXviewer](docxviewer.md) bricks.DOCXviewer
|
||||||
|
docx文件显示控件
|
||||||
|
* [EXCELviewer](docxviewer.md) bricks.EXCELviewer
|
||||||
|
excel文件显示控件
|
||||||
|
* [PDFviewer](accordion.md) bricks.PDFviewer
|
||||||
|
pdf显示控件
|
||||||
|
* [DynamicAccordion](dynamicaccordion.md) bricks.DynamicAccordion
|
||||||
|
动态手风琴控件
|
||||||
|
* [IconBar](floaticonbar.md) bricks.IconBar
|
||||||
|
图标条控件
|
||||||
|
* [IconTextBar](floaticonbar.md) bricks.IconTextBar
|
||||||
|
图标文本条控件
|
||||||
|
* [FloatIconBar](floaticonbar.md) bricks.FloatIconBar
|
||||||
|
浮动图标条，平时显示一个标识图标，点击此标识图标后显示图标条
|
||||||
|
* [FloatIconTextBar](floaticonbar.md) bricks.FloatIconTextBar
|
||||||
|
浮动图标正文条，平时显示一个标识图标，点击此图标后显示图标正文条
|
||||||
|
|
||||||
|
* [Html](html.md) bricks.Html
|
||||||
|
HTML控件，直接显示html内容
|
||||||
|
* [IconbarPage](iconbarpage.md) bricks.IconbarPage
|
||||||
|
图标条页控件，显示图标条，不同的图标点击后显示图标对应的内容
|
||||||
|
|
||||||
|
* [NewWindow](iframe.md) bricks.NewWindow
|
||||||
|
新浏览器页签或窗口控件，浏览器创建新的窗口或页签显示url的内容
|
||||||
|
* [Iframe](iframe.md) bricks.Iframe
|
||||||
|
Iframe控件，用于显示外部网站内容
|
||||||
|
* [Image](image.md) bricks.Image
|
||||||
|
图像控件
|
||||||
|
* [StatedIcon](image.md) bricks.StatedIcon
|
||||||
|
多站台图标，点击后状态改变，支持多个状态，并发出状态改变事件
|
||||||
|
* [Icon](image.md) bricks.Icon
|
||||||
|
图标控件，支持多种图像格式url
|
||||||
|
* [BlankIcon](image.md) bricks.BlankIcon
|
||||||
|
空白图标占位控件
|
||||||
|
|
||||||
|
* [ChartLine](line.md) bricks.ChartLine
|
||||||
|
* [LlmIO](llm.md) bricks.LlmIO
|
||||||
|
* [LlmOut](llm.md) bricks.LlmOut
|
||||||
|
* [MarkdownViewer](markdownviewer.md) bricks.MarkdownViewer
|
||||||
|
* [MdWidget](markdownviewer.md) bricks.MdWidget
|
||||||
|
* [Menu](menu.md) bricks.Menu
|
||||||
|
* [Message](message.md) bricks.Message
|
||||||
|
* [Error](message.md) bricks.Error
|
||||||
|
|
||||||
|
* [MultipleStateImage](multiple_state_image.md) bricks.MultipleStateImage
|
||||||
|
多状态图像控件
|
||||||
|
* [PeriodDays](period.md) bricks.PeriodDays
|
||||||
|
日期期间控件，自动计算时间段的起始日期
|
||||||
|
* [ChartPie](pie.md) bricks.ChartPie
|
||||||
|
饼图控件，基于echrts
|
||||||
|
* [ProgressBar](progressbar.md) bricks.ProgressBar
|
||||||
|
进度条控件
|
||||||
|
* [SysCamera](recorder.md) bricks.SysCamera
|
||||||
|
照相控件，可拍摄照片
|
||||||
|
* [WidgetRecorder](recorder.md) bricks.WidgetRecorder
|
||||||
|
控件视频录制控件，可录制浏览器播放的视频
|
||||||
|
* [SysAudioRecorder](recorder.md) bricks.SysAudioRecorder
|
||||||
|
浏览器音频录制控件，用来录制音频
|
||||||
|
* [SysVideoRecorder](recorder.md) bricks.SysVideoRecorder
|
||||||
|
浏览器视频录制控件，用来录制视频
|
||||||
|
* [Running](running.md) bricks.Running
|
||||||
|
运行图标控件，modal模式显示正在运行，相关控件不可操作，需要在完成 任务后dismiss它
|
||||||
|
* [Splitter](splitter.md) bricks.Splitter
|
||||||
|
分割器控件，显示水平或垂直分割线
|
||||||
|
* [Svg](svg.md) bricks.Svg
|
||||||
|
Svg图标控件
|
||||||
|
* [StatedSvg](svg.md) bricks.StatedSvg
|
||||||
|
带状态的svg图标控件，不同状态显示不同的图标
|
||||||
|
* [MultipleStateIcon](svg.md) bricks.MultipleStateIcon
|
||||||
|
多状态图标控件
|
||||||
|
|
||||||
|
* [TabPanel](tab.md) bricks.TabPanel
|
||||||
|
页签控件
|
||||||
|
* [Tabular](tabular.md) bricks.Tabular
|
||||||
|
数据列表形式的数据维护控件，支持数据的显示，增加，修改和删除
|
||||||
|
|
||||||
|
[xls2ddl](https://git.opencomputing.cn/yumoqing/xls2ddl)工具能根据数据表结构自动生成数据Tabular控件以及相关的数据维护dspy
|
||||||
|
|
||||||
|
* [Toolbar](toolbar.md) bricks.Toolbar
|
||||||
|
工具条控件
|
||||||
|
* [Tree](tree.md) bricks.Tree
|
||||||
|
树形控件
|
||||||
|
* [VadText](vadtext.md) bricks.VadText
|
||||||
|
自动捕获语音并将捕获的语音发送给服务器
|
||||||
|
* [VideoPlayer](videoplayer.md) bricks.VideoPlayer
|
||||||
|
|
||||||
|
视频播放控件，支持浏览器支持的视频格式外，还支持m3u8流媒体和Dash流媒体,
|
||||||
|
bricks已在3parties目录中包含了所依赖的hls和dash包
|
||||||
|
|
||||||
|
* [Video](videoplayer.md) bricks.VideoPlayer
|
||||||
|
视频播放控件同VideoPlayer
|
||||||
|
* [WebSocket](websocket.md) bricks.WebSocket
|
||||||
|
|
||||||
|
支持websocket
|
||||||
|
|
||||||
|
* [WebTTS](webspeech.js.md) bricks.WebTTS
|
||||||
|
为完成控件，浏览器内置文本转语音能力
|
||||||
|
* [WebASR](webspeech.js.md) bricks.WebASR
|
||||||
|
未完成控件，浏览器内部的语音识别能力
|
||||||
|
* [Tooltip](widget.md) bricks.Tooltip
|
||||||
|
|
||||||
|
Tooltip控件，不直接创建，而是在控件中添加“tip":"提示字符串“属性为控件添加Tooltip控件
|
||||||
|
|
||||||
|
* [Text](widget.md) bricks.Text
|
||||||
|
|
||||||
|
文本控件
|
||||||
|
|
||||||
|
* [Title1](widget.md) bricks.Title1
|
||||||
|
|
||||||
|
第一号标题
|
||||||
|
|
||||||
|
* [Title2](widget.md) bricks.Title2
|
||||||
|
|
||||||
|
第二号标题
|
||||||
|
|
||||||
|
* [Title3](widget.md) bricks.Title3
|
||||||
|
|
||||||
|
第三号标题
|
||||||
|
|
||||||
|
* [Title4](widget.md) bricks.Title4
|
||||||
|
|
||||||
|
第四号标题
|
||||||
|
|
||||||
|
* [Title5](widget.md) bricks.Title5
|
||||||
|
|
||||||
|
第五号标题
|
||||||
|
|
||||||
|
* [Title6](widget.md) bricks.Title6
|
||||||
|
|
||||||
|
第六号标题
|
||||||
|
|
||||||
|
* [Wterm](wterm.md) bricks.Wterm
|
||||||
|
|
||||||
|
xterm.js在bricks中的实现
|
||||||
|
|
||||||
|
## 容器类控件
|
||||||
|
* [VScrollPanel](accordion.md) bricks.VScrollPanel
|
||||||
|
垂直滚动容器，需要设置固定的高度或占满全部父容器高度
|
||||||
|
* [HScrollPanel](accordion.md) bricks.HScrollPanel
|
||||||
|
水平滚动容器，需要设置固定的宽度或占满全部父容器宽度
|
||||||
|
* [Popup](accordion.md) bricks.Popup
|
||||||
|
弹出容器，置于当前全部控件最上面
|
||||||
|
* [PopupWindow](accordion.md) bricks.PopupWindow
|
||||||
|
弹出窗口，置于当前全部控件最上面
|
||||||
|
* [HBox](accordion.md) bricks.HBox
|
||||||
|
水平扩展容器，全部子控件水平排放
|
||||||
|
* [VBox](accordion.md) bricks.VBox
|
||||||
|
垂直扩展容器，全部子控件垂直排放
|
||||||
|
* [Filler](accordion.md) bricks.Filler
|
||||||
|
占满父容器剩余控件，如果父容器有多个Filler控件，则平均分配剩余控件，Filler容器下可添加子控件
|
||||||
|
|
||||||
|
* [DynamicColumn](dynamiccolumn.md) bricks.DynamicColumn
|
||||||
|
子控件需要设置固定宽度，动态从左到右，从上到下排列子控件
|
||||||
|
|
||||||
|
* [ResponsableBox](layout.md) bricks.ResponsableBox
|
||||||
|
自适应容器，当宽度大则水平排列子控件，而高度大时则水平排列子控件, 并能根据宽高变化自动改变。
|
||||||
|
|
||||||
|
* [Modal](modal.md) bricks.Modal
|
||||||
|
modal容器
|
||||||
43
docs/ai/wterm.md
Normal file
43
docs/ai/wterm.md
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
```markdown
|
||||||
|
# Wterm
|
||||||
|
|
||||||
|
控件功能：基于 xterm.js 实现的 Web 终端控件，用于在浏览器中嵌入一个可通过 WebSocket 与后端交互的终端界面。支持终端尺寸自适应、心跳保活、输入输出数据传输等功能。
|
||||||
|
类型：普通控件
|
||||||
|
父类控件：`bricks.JsWidget`
|
||||||
|
|
||||||
|
## 初始化参数
|
||||||
|
|
||||||
|
- `ws_url` (String, 必需)
|
||||||
|
WebSocket 连接地址，用于与后端终端服务建立通信。
|
||||||
|
|
||||||
|
- `ping_timeout` (Number, 可选，默认值: 19)
|
||||||
|
心跳间隔时间（秒），用于定时向服务器发送心跳消息以保持连接活跃。
|
||||||
|
|
||||||
|
> 其他可继承自 `JsWidget` 的通用选项也适用，如布局、样式等。
|
||||||
|
|
||||||
|
## 主要事件
|
||||||
|
|
||||||
|
- `domon`
|
||||||
|
当控件被挂载到 DOM 时触发，自动调用 `send_term_size()` 向服务器发送当前终端尺寸。
|
||||||
|
|
||||||
|
- `domoff`
|
||||||
|
当控件从 DOM 中移除时触发，执行资源清理操作，包括关闭 WebSocket 连接、销毁终端实例等。
|
||||||
|
|
||||||
|
- `element_resize`
|
||||||
|
当控件所在元素尺寸发生变化时触发，用于调整终端显示区域并重新适配尺寸（通过 `FitAddon`）。
|
||||||
|
|
||||||
|
- `terminal_input`（隐式事件）
|
||||||
|
用户在终端中输入字符时，由 `term.onData` 触发，将输入内容通过 WebSocket 发送给服务器。
|
||||||
|
|
||||||
|
- `terminal_resize`
|
||||||
|
终端行列数变化时触发（由 `term.onResize` 监听），自动调用 `send_term_size()` 同步最新尺寸至服务器。
|
||||||
|
|
||||||
|
- `websocket_message`
|
||||||
|
收到 WebSocket 消息时处理不同类型的数据：
|
||||||
|
- `data`: 将内容写入终端显示。
|
||||||
|
- `heartbeat`: 心跳响应，表示连接正常。
|
||||||
|
- 其他类型：打印日志用于调试。
|
||||||
|
|
||||||
|
- `websocket_open/close/error`
|
||||||
|
WebSocket 生命周期事件，分别处理连接建立、关闭和错误情况，确保资源正确释放。
|
||||||
|
```
|
||||||
Loading…
x
Reference in New Issue
Block a user