# learning-ui.terminal
**Repository Path**: shi_xinlei/learning-ui.terminal
## Basic Information
- **Project Name**: learning-ui.terminal
- **Description**: web 终端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-11
- **Last Updated**: 2023-03-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
没有找到符合要求的 terminal 插件所以只能自己写一个
在设计的时候想到的了本地直接使用, 但是命令这些东西是需要配合后端进行数据的重建, 返回数据
然后展示, 比如 ls 命令,在用户输入后就需要进行请求, 然后根据请求展示给用户不用的数据, 这时会遇到问题，
就是在请求的时候，如何进行展示，数据具有延后性，所有暂时只能在请求过程中进行输入的禁用, 这时有一个卡顿的情况,
这边暂时没办法解决, 如果后面有需要优化的时候, 再想办法, 建议增加自行增加一个message提示 当前正在获取命令数据,
让用户不至于感觉你这个页面是在卡死的状态.
使用方法
1. 下面是示例
```javascript
"}
// fontFamily={}
height={500}
terminalMessage= {[
{ title: "Windows PowerShell", color: "red" , align: "left"},
{ title: "版权所有（C） Microsoft Corporation。保留所有权利", align: "left" },
{ title: "安装最新的 PowerShell，了解新功能和改进！https://aka.ms/PSWindows", align: "left" }
]} //{"123123"}
/>
```
> command 的使用示例 以及定义的 ts 类型
```ts
export type contentProps = string | {title: "string" , color?: string}[];
export type historyProps = { prefix: string , content: string , message: contentProps }
export type callbackProps = (
{ setHistory , setContent , item , history } : { setHistory: ({...props}) => void , setContent: ({...props}) => void , item: { content:contentProps } , history: historyProps }
) => void;
export type PromiseCallback = {content: contentProps , color?: string , callback?:({...props}:callbackProps) => void}
const cdCommand:{ [key: string]: any } = {
defined: {
content: [
{title: "command error" , color: "red" },
{ title: "please try one try cd --help", color: "green" }
],
color: "red"
},
"--help": {
content: "error",
color: "yellow"
},
}
const commands = {
cd: (after: string, content: string) => {
return new Promise((res, rej) => {
if (cdCommand[after.trim() || "defined"]) {
res(cdCommand[after.trim() || "defined"])
}
setTimeout(() => {
res({
content: "lalalallalalalalal",
color: "red"
}) as PromiseCallback
}, 500)
});
}
};
```
| 属性 | 类型 | 说明 |
|:---------------:|:-----------------------------------------------------------:|:--------------:|
| height | number | 只能是数字 不支持字符串 |
| terminalMessage | {title: any , color: string}[] or string | 支持数组或者字符串 |
| prefixCommand | string | 命令前缀 |
| command | (after:string, cmdContent: string) => Promise | 只支持异步,因为需要请求使用 |