mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-14 08:51:24 +08:00
4d84083d99
* feat: Log 组件支持日志检索功能;重构 Log 组件操作按钮样式和位置 * 调整显示行数图标 * 调整显示行数图标 Co-authored-by: lvchenguang <lvchenguang@zhihu.com>
175 lines
5.0 KiB
Markdown
175 lines
5.0 KiB
Markdown
---
|
||
title: Log 实时日志
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Log
|
||
icon:
|
||
order: 56
|
||
---
|
||
|
||
用于实时显示日志或程序输出结果。
|
||
|
||
## 基本用法
|
||
|
||
通过设置 source 来获取日志，支持 ANSI 基本颜色显示。
|
||
|
||
```json
|
||
{
|
||
"type": "log",
|
||
"height": 300,
|
||
"source": "http://localhost:3000/"
|
||
}
|
||
```
|
||
|
||
由于缺少线上服务，所以这个例子无法在线演，它的运行效果如下图所示
|
||
|
||
|
||
|
||
### 后端实现参考
|
||
|
||
后端需要通过流的方式输出结果，比如 Node 实现示例：
|
||
|
||
```javascript
|
||
const http = require('http');
|
||
|
||
let app = http.createServer((req, res) => {
|
||
res.writeHead(200, {
|
||
'Content-Type': 'text/plain',
|
||
'Access-Control-Allow-Origin': 'http://localhost:8888',
|
||
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
|
||
'Access-Control-Allow-Credentials': 'true',
|
||
'Access-Control-Allow-Headers': '*'
|
||
});
|
||
|
||
let index = 1;
|
||
let timer = setInterval(() => {
|
||
if (index < 50) {
|
||
// 每次 write 都会立刻传给前端
|
||
res.write(`line: ${index}\n`);
|
||
index += 1;
|
||
} else {
|
||
res.end('end');
|
||
clearInterval(timer);
|
||
}
|
||
}, 100);
|
||
});
|
||
|
||
app.listen(3000, '127.0.0.1');
|
||
console.log('Node server running on port 3000');
|
||
```
|
||
|
||
其它语言请查找如何使用 stream 的方式返回内容，比如 Spring 的 `StreamingResponseBody`：
|
||
|
||
```java
|
||
@Controller
|
||
public class StreamingResponseBodyController {
|
||
@GetMapping("/logs")
|
||
public ResponseEntity<StreamingResponseBody> handleLog() {
|
||
StreamingResponseBody stream = out -> {
|
||
for (int i = 0; i < 1000; i++) {
|
||
String msg = "log" + " @ " + new Date();
|
||
out.write(msg.getBytes());
|
||
out.flush();
|
||
}
|
||
out.close();
|
||
};
|
||
return new ResponseEntity(stream, HttpStatus.OK);
|
||
}
|
||
}
|
||
```
|
||
|
||
需要注意有些反向代理有 buffer 设置，比如 nginx 的 [proxy_buffer_size](https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_buffer_size)，它会使得即便后端返回内容也需要等 buffer 满了才会真正返回前端，如果需要更实时的效果就需要关掉此功能。
|
||
|
||
## 对于超长日志的优化
|
||
|
||
> 1.10.0 及以上版本
|
||
|
||
如果日志非常长会导致页面卡顿，这时有几种处理方法，请根据需求进行选择，也可以都使用：
|
||
|
||
1. 设置 `rowHeight`，比如 `"rowHeight": 22`，这时就会默认启用虚拟渲染，避免渲染卡顿
|
||
- 优点：仍然可以查看所有日志
|
||
- 缺点：如果某一行日志很长也不会自动折行，会出现水平滚动条；目前暂时不支持 autoScroll
|
||
2. 设置 `maxLength`，限制最大显示行数
|
||
- 优点：某一行日志很长的时候会自动折行
|
||
- 缺点：无法查看之前的日志
|
||
3. 试试通过 `"disableColor": false` 关闭 ANSI 颜色
|
||
|
||
## 自动滚动到底部
|
||
|
||
通过 `autoScroll` 可以关闭此功能
|
||
|
||
## source 支持变量
|
||
|
||
> 1.4.2 及以上版本
|
||
|
||
可以初始设置为空，这样初始不会加载，而等这个变量有值的时候再加载
|
||
|
||
```json
|
||
{
|
||
"type": "form",
|
||
"body": [
|
||
{
|
||
"label": "数据源",
|
||
"type": "select",
|
||
"name": "source",
|
||
"options": [
|
||
{
|
||
"label": "A",
|
||
"value": "http://localhost:3000/"
|
||
},
|
||
{
|
||
"label": "B",
|
||
"value": "http://localhost:4000/"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "log",
|
||
"height": 300,
|
||
"placeholder": "请点击上面的数据源",
|
||
"source": "${source | raw}"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## source 支持高级配置
|
||
|
||
> 1.6.1 及以上版本
|
||
|
||
可以类似 api 那样自定义 header、method 等，比如：
|
||
|
||
```json
|
||
{
|
||
"type": "log",
|
||
"height": 300,
|
||
"source": {
|
||
"method": "post",
|
||
"url": "[/api/mock2/form/saveForm](http://localhost:3000/)",
|
||
"data": {
|
||
"myName": "${name}",
|
||
"myEmail": "${email}"
|
||
},
|
||
"headers": {
|
||
"my-header": "${myHeader}"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| ------------ | --------- | ------ | ----------------------------------------------- |
|
||
| height | `number` | 500 | 展示区域高度 |
|
||
| className | `string` | | 外层 CSS 类名 |
|
||
| autoScroll | `boolean` | true | 是否自动滚动 |
|
||
| placeholder | `string` | | 加载中的文字 |
|
||
| encoding | `string` | utf-8 | 返回内容的字符编码 |
|
||
| source | `string` | | 接口 |
|
||
| rowHeight | `number` | | 设置每行高度，将会开启虚拟渲染 |
|
||
| maxLength | `number` | | 最大显示行数 |
|
||
| disableColor | `boolean` | | 关闭 ANSI 颜色支持 |
|
||
| operation | `Array` | | 可选日志操作：['stop','clear','showLineNumber','filter'] |
|