hudada-cli
Version:
专为程序员准备的本地文档搜索,快捷开发工具
96 lines (88 loc) • 3.65 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSH 终端管理器</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 头部 -->
<header class="header">
<h1>SSH 终端管理器</h1>
<button id="addNewBtn" class="btn btn-primary">添加新连接</button>
</header>
<!-- 主要内容区 -->
<main class="main-content">
<!-- SSH 连接列表 -->
<div class="connection-list">
<table id="sshTable" class="ssh-table">
<thead>
<tr>
<th>名称</th>
<th>主机</th>
<th>端口</th>
<th>用户名</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody id="sshTableBody">
<!-- 动态填充 -->
</tbody>
</table>
</div>
<!-- 终端区域 -->
<div id="terminalContainer" class="terminal-container" style="display: none;">
<div class="terminal-header">
<span id="terminalTitle">终端</span>
<button id="closeTerminal" class="btn btn-icon">×</button>
</div>
<div id="terminal" class="terminal"></div>
</div>
</main>
<!-- 添加/编辑连接的模态框 -->
<div id="sshModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle">添加 SSH 连接</h2>
<button class="btn-close" id="closeModal">×</button>
</div>
<div class="modal-body">
<form id="sshForm">
<div class="form-group">
<label for="name">名称</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="host">主机</label>
<input type="text" id="host" name="host" required>
</div>
<div class="form-group">
<label for="port">端口</label>
<input type="number" id="port" name="port" value="22" required>
</div>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="description">描述</label>
<textarea id="description" name="description"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelBtn">取消</button>
<button class="btn btn-primary" id="saveBtn">保存</button>
</div>
</div>
</div>
<!-- 引入我们的客户端代码 -->
<script src="index.js" type="module"></script>
</body>
</html>