6f3cc6b725
- Implement chunked file upload with 1MB chunk size - Add progress bar with percentage and chunk counter (e.g., 2/5) - Support resuming interrupted uploads - Improve UI with better progress visualization - Add dropzone.js integration for drag-and-drop uploads - Fix progress bar jumping issue in resumable uploads - Add file type icons and size display - Enhance error handling and user feedback
166 lines
6.7 KiB
HTML
166 lines
6.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>📁 文件管理器</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📁</text></svg>">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel="stylesheet" href="/static/dropzone.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<h1>📁 文件管理器</h1>
|
|
<div class="status">
|
|
<span id="connection-status" class="connected">● 已连接</span>
|
|
<span id="path-display">/</span>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="breadcrumb" id="breadcrumb">
|
|
<span class="crumb" data-path="/">根目录</span>
|
|
</nav>
|
|
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-primary" id="btn-upload" title="上传文件">📤 上传</button>
|
|
<button class="btn btn-secondary" id="btn-new-dir" title="新建文件夹">📁 新建文件夹</button>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<button class="btn btn-secondary" id="btn-download" disabled title="下载选中文件">📥 下载</button>
|
|
<button class="btn btn-secondary" id="btn-move" disabled title="移动选中文件">✂️ 移动</button>
|
|
<button class="btn btn-danger" id="btn-delete" disabled title="删除选中文件">🗑️ 删除</button>
|
|
<button class="btn btn-secondary" id="btn-refresh" title="刷新列表">🔄 刷新</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-toolbar">
|
|
<div class="search-box">
|
|
<input type="text" id="search-input" placeholder="搜索文件...">
|
|
<button class="search-btn" id="search-btn">🔍</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="file-list-container">
|
|
<table class="file-list" id="file-list">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-checkbox">
|
|
<input type="checkbox" id="select-all">
|
|
</th>
|
|
<th class="col-name">名称</th>
|
|
<th class="col-size">大小</th>
|
|
<th class="col-time">修改时间</th>
|
|
<th class="col-actions">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="file-list-body">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="drop-zone" id="drop-zone">
|
|
<div class="drop-zone-content">
|
|
<span class="drop-icon">📂</span>
|
|
<p>拖拽文件到此处上传</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="preview-modal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h3 id="preview-title">文件预览</h3>
|
|
<button class="modal-close" id="preview-close">×</button>
|
|
</div>
|
|
<div class="modal-body" id="preview-body">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="move-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>移动文件</h3>
|
|
<button class="modal-close" id="move-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="move-filename" class="move-filename"></p>
|
|
<div class="breadcrumb" id="move-breadcrumb"></div>
|
|
<div class="dir-tree" id="dir-tree"></div>
|
|
<input type="hidden" id="move-source">
|
|
<input type="hidden" id="move-dest">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="move-cancel">取消</button>
|
|
<button class="btn btn-primary" id="move-confirm">移动</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="new-dir-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>新建文件夹</h3>
|
|
<button class="modal-close" id="new-dir-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="new-dir-name">文件夹名称</label>
|
|
<input type="text" id="new-dir-name" placeholder="输入文件夹名称">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="new-dir-cancel">取消</button>
|
|
<button class="btn btn-primary" id="new-dir-confirm">创建</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="upload-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>上传文件</h3>
|
|
<button class="modal-close" id="upload-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="/api/upload" class="dropzone" id="upload-dropzone">
|
|
<input type="hidden" name="path" id="upload-path" value="/">
|
|
<div class="dz-message">拖拽文件到此处或点击上传</div>
|
|
</form>
|
|
<div class="upload-file-list" id="upload-file-list"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" id="upload-close-btn">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="rename-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>重命名</h3>
|
|
<button class="modal-close" id="rename-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="rename-name">新名称</label>
|
|
<input type="text" id="rename-name" placeholder="输入新名称">
|
|
</div>
|
|
<input type="hidden" id="rename-path">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="rename-cancel">取消</button>
|
|
<button class="btn btn-primary" id="rename-confirm">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification" id="notification"></div>
|
|
|
|
<script src="/static/dropzone.min.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|