__ _______ _ _______ _ _ _
\ \ / / ____| | |__ __| (_) | | (_)
\ V / | __| | __ _ ___ ___| | ___ _ __ _ __ ___ _ _ __ __ _| | _ ___
> <| | |_ | |/ _` / __/ __| |/ _ \ '__| '_ ` _ \| | '_ \ / _` | | | / __|
/ . \ |__| | | (_| \__ \__ \ | __/ | | | | | | | | | | | (_| | |_| \__ \
/_/ \_\_____|_|\__,_|___/___/_|\___|_| |_| |_| |_|_|_| |_|\__,_|_(_) |___/
_/ |
|__/
XGlassTerminal.js 是一个用于构建前端终端样式的 JavaScript 库。它允许开发者轻松地创建一个具有终端风格的用户界面，并对用户输入的命令进行事件处理。该库提供了丰富的功能，包括文本添加、命令处理、点击事件绑定等。
同时还支持在终端中装载 Linux 终端模拟操作，如输入、Tab键、上下方向键等，其中内置了常用的 Linux 命令 以及 一些常用的 Linux 命令。
- 创建一个具有终端风格的
div容器。 - 支持自定义命令前缀（如
#、$等）。
- 可以向终端添加文本，并支持自动换行。
- 可以根据命令前缀处理特定的命令。
- 支持对用户输入的命令进行处理。
- 可以绑定点击事件，使用户可以通过点击终端来聚焦输入框。
- 提供基本的 CSS 样式，可以根据需要进行自定义。
您可以在线体验 XGlassTerminal.js 的功能，点击这里 可以快速前往，这样的方法更加适合于体验。
在你的 HTML 文件中引入 XGlassTerminal.js 和相应的 CSS 文件。然后使用下面的代码：
<html lang="zh">
<head>
<meta charset="utf-8">
<title>测试代码</title>
<link rel="stylesheet" href="css/XGlassTerminal.css">
</head>
<body>
<div>
</div>
</body>
<script src="js/XGlassTerminal.js" type="text/javascript"></script>
<script>
// 实例化终端
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 初始化终端 这里可以给处理函数
terminal.initEvent(function (x, text) {
alert("输入了: " + text);
});
// 添加文本 也可以使用 appendXGlassText
XGlassTerminal.appendXGlassText(terminal, "Hello World!", (x, e) => alert("输入了 " + e));
</script>
</html> // 实例化终端 并设置前缀为 #
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 自定义前缀
terminal.commandPrefix = "root@xxx# ";// 实例化终端 并设置前缀为 #
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 自定义前缀 TODO 请确保这个函数在 initEvent 之前调用
terminal.commandPrefix = "root@xxx# ";
// 初始化终端 并对输入进行监听 TODO 参数统一是 当前的终端对象(为了防止在嵌套函数中无法访问设计的) 以及输入的命令
terminal.initEvent(
// 第一个函数是监听回车后的命令
(x, r) => XGlassTerminal.appendXGlassText(x, "您输入的是：" + r),
// 第二个函数是监听Tab键后的命令
(x, r) => x.input.value += ' 您按下了Tab键: 输入框的值为：' + r
); // 实例化终端 并设置前缀为 #
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 自定义前缀 不需要前缀 直接设置为空字符串
terminal.commandPrefix = "";
// 初始化终端 并对输入进行监听 TODO 参数统一是 当前的终端对象(为了防止在嵌套函数中无法访问设计的) 以及输入的命令
terminal.initEvent(
undefined, undefined, undefined, undefined, (xGlassTerminal, key) => {
// 这里可以对接到 后端的 ssh 连接 一般来说 后端的ssh 接收每一个字符 然后回复数据给前端！回复的逻辑内置实现好了
console.info(key);
}, false
);
// 追加文本 可以将这个对接到后端的回复数据接收部分 追加到终端中
XGlassTerminal.appendXGlassText(terminal, "这里可以将后端的回复数据直接追加！！！", undefined, false, false); // 实例化终端 并设置前缀为 #
const terminal = new XGlassTerminal(document.querySelector("div"), "#");
// 自定义前缀
terminal.commandPrefix = "root@xxx# ";
// 初始化终端 并对输入进行监听 TODO 参数统一是 当前的终端对象(为了防止在嵌套函数中无法访问设计的) 以及输入的命令
terminal.initEvent(
// 第一个函数是监听回车后的命令
(x, r) => XGlassLinuxCommand.GetLinuxCommandHandler(x, r),
// 第二个函数是监听Tab键后的命令
(x, r) => XGlassLinuxCommand.GetLinuxCommandHandlerTab(x, r),
// 第三个是上方向按键
XGlassLinuxCommand.GetLinuxCommandHandlerArrowUp
);- 优化了 Linux 终端的命令提示
- 增多了 Linux 中的命令数量
- 支持 Linux 命令的补全操作