180 lines
9.7 KiB
HTML
180 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SFTP文件管理器</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- 顶部导航栏 -->
|
|
<nav class="navbar navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<span class="navbar-brand mb-0 h1">SFTP文件管理器</span>
|
|
<div>
|
|
<button class="btn btn-primary btn-sm" onclick="showConnectionDialog()">连接管理</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 工具栏 -->
|
|
<div class="toolbar bg-light border-bottom">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="uploadFiles()">上传</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="downloadFiles()">下载</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="transferToRight()">传输到右侧</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="transferToLeft()">传输到左侧</button>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteFiles()">删除</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="showRenameDialog()">重命名</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="showMkdirDialog()">新建文件夹</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="btn-show-hidden" onclick="toggleShowHidden()" title="切换是否显示隐藏文件">显示隐藏文件</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshPanels()">刷新</button>
|
|
</div>
|
|
<!-- 文件上传输入框（隐藏） -->
|
|
<input type="file" id="file-input" multiple style="display:none">
|
|
<!-- 传输进度（上传/下载/跨面板传输） -->
|
|
<div class="transfer-progress" id="transfer-progress" style="display:none;">
|
|
<span class="transfer-progress-label" id="transfer-progress-label"></span>
|
|
<div class="progress transfer-progress-bar" style="height: 20px; margin-left: 10px; width: 220px;">
|
|
<div class="progress-bar" id="transfer-progress-bar" role="progressbar" style="width: 0%">0%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 双面板区域 -->
|
|
<div class="panels-container">
|
|
<!-- 左面板 -->
|
|
<div class="panel" id="left-panel">
|
|
<div class="panel-header">
|
|
<select class="form-select form-select-sm panel-mode" id="left-mode" onchange="onModeChange('left')">
|
|
<option value="local">本地文件</option>
|
|
<option value="sftp">SFTP服务器</option>
|
|
</select>
|
|
<div class="connection-status" id="left-status" style="display:none;">
|
|
<span class="status-dot" data-status="disconnected"></span>
|
|
<span class="status-text">未连接</span>
|
|
</div>
|
|
<select class="form-select form-select-sm connection-select" id="left-connection" style="display:none;" onchange="onConnectionChange('left')">
|
|
<option value="">选择连接</option>
|
|
</select>
|
|
</div>
|
|
<div class="path-bar">
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="goUp('left')">↑</button>
|
|
<input type="text" class="form-control form-control-sm path-input" id="left-path" readonly>
|
|
</div>
|
|
<div class="file-list" id="left-file-list">
|
|
<div class="text-center text-muted p-3">加载中...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右面板 -->
|
|
<div class="panel" id="right-panel">
|
|
<div class="panel-header">
|
|
<select class="form-select form-select-sm panel-mode" id="right-mode" onchange="onModeChange('right')">
|
|
<option value="local">本地文件</option>
|
|
<option value="sftp">SFTP服务器</option>
|
|
</select>
|
|
<div class="connection-status" id="right-status" style="display:none;">
|
|
<span class="status-dot" data-status="disconnected"></span>
|
|
<span class="status-text">未连接</span>
|
|
</div>
|
|
<select class="form-select form-select-sm connection-select" id="right-connection" style="display:none;" onchange="onConnectionChange('right')">
|
|
<option value="">选择连接</option>
|
|
</select>
|
|
</div>
|
|
<div class="path-bar">
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="goUp('right')">↑</button>
|
|
<input type="text" class="form-control form-control-sm path-input" id="right-path" readonly>
|
|
</div>
|
|
<div class="file-list" id="right-file-list">
|
|
<div class="text-center text-muted p-3">加载中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 状态栏 -->
|
|
<div class="status-bar bg-light border-top">
|
|
<span id="status-text">就绪</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 连接管理对话框 -->
|
|
<div class="modal fade" id="connectionModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">连接管理</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<button class="btn btn-primary" onclick="showAddConnectionDialog()">添加连接</button>
|
|
</div>
|
|
<div class="connection-list" id="connection-list">
|
|
<!-- 连接列表动态生成 -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加连接对话框 -->
|
|
<div class="modal fade" id="addConnectionModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">添加SFTP连接</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="connection-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">连接名称</label>
|
|
<input type="text" class="form-control" name="name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">主机地址</label>
|
|
<input type="text" class="form-control" name="host" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">端口</label>
|
|
<input type="number" class="form-control" name="port" value="22" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">用户名</label>
|
|
<input type="text" class="form-control" name="username" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">密码</label>
|
|
<input type="password" class="form-control" name="password">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">私钥路径（可选）</label>
|
|
<input type="text" class="form-control" name="privateKeyPath">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">私钥密码（可选）</label>
|
|
<input type="password" class="form-control" name="passPhrase">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveConnection()">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
|
|
onerror="this.onerror=null;var s=document.createElement('script');s.src='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js';document.body.appendChild(s);"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|