admin/auto-index-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: File manager with upload, search, and modal dialogs

Browse Source
This commit is contained in:
Admin
2026-01-22 16:49:21 +08:00
commit 267ae69030
8 changed files with 2884 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1010
static/app.js Normal file
View File

File diff suppressed because it is too large Load Diff

164
static/index.html Normal file
View File

@@ -0,0 +1,164 @@
<!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="stylesheet" href="/static/style.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-center">
<div class="search-box">
<input type="text" id="search-input" placeholder="搜索文件...">
<button class="search-btn" id="search-btn">🔍</button>
</div>
</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="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">&times;</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">&times;</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">&times;</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">&times;</button>
</div>
<div class="modal-body">
<div class="upload-list" id="upload-list"></div>
<div class="upload-progress-container" id="upload-progress-container">
<div class="upload-progress-bar" id="upload-progress-bar"></div>
</div>
<div class="upload-stats" id="upload-stats"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="upload-cancel" style="display: none;">取消</button>
<button class="btn btn-primary" id="upload-confirm" style="display: none;">完成</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">&times;</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>
<input type="file" id="file-input" multiple style="display: none;">
<script src="/static/app.js"></script>
</body>
</html>

723
static/style.css Normal file
View File

@@ -0,0 +1,723 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
}
.header h1 {
font-size: 28px;
color: #2c3e50;
}
.status {
display: flex;
align-items: center;
gap: 20px;
font-size: 14px;
color: #666;
}
#connection-status {
padding: 5px 12px;
border-radius: 20px;
font-weight: 500;
}
#connection-status.connected {
background: #e8f5e9;
color: #2e7d32;
}
#connection-status.disconnected {
background: #ffebee;
color: #c62828;
}
#path-display {
font-family: 'Monaco', 'Consolas', monospace;
background: #e3f2fd;
padding: 5px 15px;
border-radius: 5px;
color: #1565c0;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 10px 15px;
background: #fff;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.crumb {
color: #1976d2;
cursor: pointer;
padding: 5px 10px;
border-radius: 4px;
transition: background 0.2s;
}
.crumb:hover {
background: #e3f2fd;
}
.crumb:last-child {
color: #333;
cursor: default;
background: transparent;
}
.crumb:not(:last-child)::after {
content: '/';
margin-left: 5px;
color: #999;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 15px;
background: #fff;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.toolbar-left,
.toolbar-right,
.toolbar-center {
display: flex;
gap: 10px;
}
.toolbar-center {
flex: 1;
justify-content: center;
min-width: 300px;
}
.search-box {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 8px;
padding: 5px 10px;
width: 100%;
max-width: 400px;
}
.search-box input {
flex: 1;
border: none;
background: transparent;
padding: 8px;
font-size: 14px;
outline: none;
}
.search-box input::placeholder {
color: #999;
}
.search-btn {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
padding: 5px;
opacity: 0.7;
transition: opacity 0.2s;
}
.search-btn:hover {
opacity: 1;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.2s;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: #2196f3;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #1976d2;
}
.btn-secondary {
background: #f5f5f5;
color: #333;
}
.btn-secondary:hover:not(:disabled) {
background: #e0e0e0;
}
.btn-danger {
background: #f44336;
color: white;
}
.btn-danger:hover:not(:disabled) {
background: #d32f2f;
}
.file-list-container {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
overflow: hidden;
}
.file-list {
width: 100%;
border-collapse: collapse;
}
.file-list th,
.file-list td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
.file-list th {
background: #fafafa;
font-weight: 600;
color: #666;
font-size: 13px;
text-transform: uppercase;
}
.file-list tbody tr {
transition: background 0.2s;
}
.file-list tbody tr:hover {
background: #f5f5f5;
}
.file-list tbody tr.selected {
background: #e3f2fd;
}
.col-checkbox {
width: 50px;
}
.col-name {
min-width: 200px;
}
.col-size {
width: 120px;
}
.col-time {
width: 180px;
}
.col-actions {
width: 150px;
}
.file-name {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: #1976d2;
}
.file-name:hover {
text-decoration: underline;
}
.file-name.is-dir {
color: #2e7d32;
font-weight: 500;
}
.file-icon {
font-size: 20px;
}
.file-size {
color: #666;
font-size: 13px;
}
.file-time {
color: #666;
font-size: 13px;
}
.file-actions {
display: flex;
gap: 8px;
}
.action-btn {
padding: 5px 10px;
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
border-radius: 4px;
transition: background 0.2s;
}
.action-btn:hover {
background: #e0e0e0;
}
.action-btn.delete:hover {
background: #ffebee;
color: #c62828;
}
.drop-zone {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(33, 150, 243, 0.9);
z-index: 1000;
justify-content: center;
align-items: center;
}
.drop-zone.active {
display: flex;
}
.drop-zone-content {
text-align: center;
color: white;
}
.drop-icon {
font-size: 80px;
display: block;
margin-bottom: 20px;
}
.drop-zone-content p {
font-size: 24px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
padding: 20px;
}
.modal.active {
display: flex;
}
.modal-content {
background: white;
border-radius: 12px;
width: 100%;
max-width: 450px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-large {
max-width: 900px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
font-size: 18px;
color: #333;
}
.modal-close {
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #999;
line-height: 1;
}
.modal-close:hover {
color: #333;
}
.modal-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 15px 20px;
border-top: 1px solid #eee;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #666;
font-size: 14px;
}
.form-group input {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
.form-group input:focus {
outline: none;
border-color: #2196f3;
}
.move-filename {
padding: 10px;
background: #f5f5f5;
border-radius: 6px;
margin-bottom: 15px;
font-family: monospace;
}
.dir-tree {
max-height: 300px;
overflow-y: auto;
border: 1px solid #eee;
border-radius: 6px;
padding: 10px;
}
.dir-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
cursor: pointer;
border-radius: 4px;
margin-bottom: 2px;
}
.dir-item:hover {
background: #f5f5f5;
}
.dir-item.selected {
background: #e3f2fd;
}
.dir-item.current {
background: #fff3e0;
}
.preview-image {
max-width: 100%;
max-height: 60vh;
display: block;
margin: 0 auto;
}
.preview-text {
white-space: pre-wrap;
font-family: 'Monaco', 'Consolas', monospace;
font-size: 13px;
line-height: 1.5;
max-height: 60vh;
overflow: auto;
background: #f5f5f5;
padding: 15px;
border-radius: 6px;
}
.preview-placeholder {
text-align: center;
padding: 60px 20px;
color: #999;
}
.preview-placeholder .icon {
font-size: 80px;
display: block;
margin-bottom: 20px;
}
.notification {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px 25px;
background: #333;
color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(100px);
opacity: 0;
transition: all 0.3s;
z-index: 2000;
}
.notification.show {
transform: translateY(0);
opacity: 1;
}
.notification.success {
background: #4caf50;
}
.notification.error {
background: #f44336;
}
.notification.info {
background: #2196f3;
}
.empty-message {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-message .icon {
font-size: 60px;
display: block;
margin-bottom: 15px;
}
.loading {
text-align: center;
padding: 40px;
color: #666;
}
.loading::after {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #e0e0e0;
border-top-color: #2196f3;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-left: 10px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.toolbar {
flex-direction: column;
}
.toolbar-left,
.toolbar-right,
.toolbar-center {
justify-content: center;
width: 100%;
}
.toolbar-center {
order: -1;
margin-bottom: 10px;
}
.search-box {
max-width: 100%;
}
.file-list th:nth-child(3),
.file-list td:nth-child(3),
.file-list th:nth-child(4),
.file-list td:nth-child(4) {
display: none;
}
.file-actions {
flex-direction: column;
gap: 2px;
}
}
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
background: #333;
color: white;
font-size: 12px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.tooltip:hover::after {
opacity: 1;
}
.upload-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: 15px;
}
.upload-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
gap: 10px;
}
.upload-item:last-child {
border-bottom: none;
}
.upload-item-icon {
font-size: 24px;
}
.upload-item-info {
flex: 1;
min-width: 0;
}
.upload-item-name {
font-weight: 500;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.upload-item-status {
font-size: 12px;
color: #666;
}
.upload-progress-container {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
display: none;
}
.upload-progress-container.active {
display: block;
}
.upload-progress-bar {
height: 100%;
background: linear-gradient(90deg, #2196f3, #4caf50);
border-radius: 4px;
transition: width 0.3s ease;
width: 0%;
}
.upload-stats {
text-align: center;
font-size: 14px;
color: #666;
display: none;
}
.upload-stats.active {
display: block;
}