11
This commit is contained in:
Mn
@@ -9,161 +9,127 @@
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<!-- SELECT2 EXAMPLE -->
|
||||
<div class="card card-primary card-outline direct-chat direct-chat-primary">
|
||||
<div class="card card-default">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">SSH</h3>
|
||||
<h3 class="card-title">终端</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
|
||||
<div class="card-body">
|
||||
<!-- Conversations are loaded here -->
|
||||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the left -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-left">机器</span>
|
||||
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar2.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Is this template really for free? That's unbelievable!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
<!-- Message to the right -->
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">我</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar3.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">我</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar3.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">我</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar3.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">我</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar3.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">我</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar3.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">我</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar3.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<div class="direct-chat-msg right">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-right">我</span>
|
||||
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="/adminlte/dist/img/avatar3.png" alt="Message User Image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<div id="terminal" style=""></div>
|
||||
|
||||
<!-- /.direct-chat-msg -->
|
||||
<div class="clearfix">
|
||||
</div>
|
||||
<!--/.direct-chat-messages-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
<form action="#" method="post">
|
||||
<div class="input-group">
|
||||
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button type="submit" class="btn btn-primary">Send</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<link href="/adminlte/plugins/xterm/xterm.css" rel="stylesheet" />
|
||||
<script src="/adminlte/plugins/xterm/xterm.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
var term = new Terminal({
|
||||
cursorBlink: "block",
|
||||
|
||||
});
|
||||
|
||||
// 获取窗口的宽度和高度。
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
// 调整终端的尺寸。
|
||||
term.resize(parseInt(width / 10), parseInt(height / 22));
|
||||
|
||||
var curr_line = '';
|
||||
var entries = [];
|
||||
var currPos = 0;
|
||||
var pos = 0;
|
||||
|
||||
term.open(document.getElementById('terminal'));
|
||||
term.prompt = () => {
|
||||
term.write('\n\r' + curr_line + '\r\n\u001b[32m$ > \u001b[37m');
|
||||
};
|
||||
term.write('Welcome to my Scheme web intepreter!\r\n123');
|
||||
term.prompt();
|
||||
|
||||
term.on('key', function (key, ev) {
|
||||
|
||||
const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey &&
|
||||
!(ev.keyCode === 37 && term.buffer.cursorX < 9);
|
||||
|
||||
if (ev.keyCode === 13) { // Enter key
|
||||
if (curr_line.replace(/^\s+|\s+$/g, '').length != 0) { // Check if string is all whitespace
|
||||
entries.push(curr_line);
|
||||
currPos = entries.length - 1;
|
||||
term.prompt();
|
||||
} else {
|
||||
term.write('\n\33[2K\r\u001b[32m$ > \u001b[37m');
|
||||
}
|
||||
curr_line = '';
|
||||
} else if (ev.keyCode === 8) { // Backspace
|
||||
if (term.buffer.cursorX > 5) {
|
||||
curr_line = curr_line.slice(0, term.buffer.cursorX - 6) + curr_line.slice(term.buffer.cursorX - 5);
|
||||
pos = curr_line.length - term.buffer.cursorX + 6;
|
||||
term.write('\33[2K\r\u001b[32m$ > \u001b[37m' + curr_line);
|
||||
term.write('\033['.concat(pos.toString()).concat('D')); //term.write('\033[<N>D');
|
||||
if (term.buffer.cursorX == 5 || term.buffer.cursorX == curr_line.length + 6) {
|
||||
term.write('\033[1C')
|
||||
}
|
||||
}
|
||||
} else if (ev.keyCode === 38) { // Up arrow
|
||||
if (entries.length > 0) {
|
||||
if (currPos > 0) {
|
||||
currPos -= 1;
|
||||
}
|
||||
curr_line = entries[currPos];
|
||||
term.write('\33[2K\r\u001b[32m$ > \u001b[37m' + curr_line);
|
||||
}
|
||||
} else if (ev.keyCode === 40) { // Down arrow
|
||||
currPos += 1;
|
||||
if (currPos === entries.length || entries.length === 0) {
|
||||
currPos -= 1;
|
||||
curr_line = '';
|
||||
term.write('\33[2K\r\u001b[32m$ > \u001b[37m');
|
||||
} else {
|
||||
curr_line = entries[currPos];
|
||||
term.write('\33[2K\r\u001b[32m$ > \u001b[37m' + curr_line);
|
||||
|
||||
}
|
||||
} else if (printable && !(ev.keyCode === 39 && term.buffer.cursorX > curr_line.length + 4)) {
|
||||
if (ev.keyCode != 37 && ev.keyCode != 39) {
|
||||
// var input = ev.key;
|
||||
// if (ev.keyCode == 9) { // Tab
|
||||
// input = " ";
|
||||
// }
|
||||
// pos = curr_line.length - term.buffer.cursorX + 4;
|
||||
// curr_line = [curr_line.slice(0, term.buffer.cursorX - 5), input, curr_line.slice(term.buffer.cursorX - 5)].join('');
|
||||
// term.write('\33[2K\r\u001b[32m$ > \u001b[37m' + curr_line);
|
||||
// term.write('\033['.concat(pos.toString()).concat('D')); //term.write('\033[<N>D');
|
||||
|
||||
term.write(key);
|
||||
} else {
|
||||
term.write(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// term.on('paste', function (data) {
|
||||
// curr_line += data;
|
||||
// term.write(curr_line);
|
||||
// });
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user