226 lines
10 KiB
Plaintext
226 lines
10 KiB
Plaintext
<!-- File Manager Tab Content (Initially Hidden) -->
|
|
<div id="file-manager-tab" class="flex-1 flex flex-col overflow-hidden hidden">
|
|
<div class="font-segoe bg-neutral-100 text-neutral-800 m-0">
|
|
<!-- 标题栏 -->
|
|
<h1 class="text-[24px] font-medium text-neutral-800 p-4 bg-neutral-200 border-b border-neutral-300 margin-0">文件浏览器</h1>
|
|
|
|
<!-- 路径控制栏 -->
|
|
<div id="path-controls" class="bg-neutral-200 p-3 border-b border-neutral-300 flex flex-wrap items-center gap-2">
|
|
<span class="whitespace-nowrap">当前路径: </span>
|
|
<div id="current-path" class="flex-grow min-w-[200px] bg-neutral-400 p-2 border border-neutral-300 cursor-default"></div>
|
|
<input type="text" id="path-input" placeholder="输入路径" class="flex-grow min-w-[200px] p-2 border border-neutral-300 bg-neutral-400 text-neutral-800 transition-all focus:border-primary focus:outline-none">
|
|
<button id="go-button" onclick="navigateByInput()" class="bg-primary hover:bg-secondary text-white px-4 py-2 cursor-pointer transition-colors border-angular">跳转</button>
|
|
<button id="go-button" onclick="downloadByInput()" class="bg-primary hover:bg-secondary text-white px-4 py-2 cursor-pointer transition-colors border-angular">指定UUID下载</button>
|
|
</div>
|
|
|
|
<!-- 错误提示区 -->
|
|
<div id="error-message" class="text-danger-500 bg-danger-100/30 p-3 border-b border-neutral-300 hidden"></div>
|
|
|
|
<!-- 文件列表容器 -->
|
|
<div id="file-list-container" class="bg-neutral-100 overflow-hidden relative flex-grow h-[calc(100vh-140px)]">
|
|
<div id="loading-overlay" class="absolute inset-0 bg-neutral-100/80 flex items-center justify-center z-10 hidden">
|
|
<div class="w-10 h-10 border-4 border-neutral-300 border-t-primary rounded-full animate-spin"></div>
|
|
</div>
|
|
<div id="file-list" class="w-full h-full overflow-auto"></div>
|
|
</div>
|
|
|
|
<!-- 下载模态框 -->
|
|
<dialog id="download-modal" class="modal">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title" class="text-xl font-bold">文件下载</h2>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container mx-auto px-4 py-6">
|
|
<div class="border border-borderDark bg-panelBg p-4">
|
|
<h1 class="text-xl font-bold mb-4 border-b border-borderDark pb-2">大文件分段传输配置</h1>
|
|
<h1 class="text-xl font-bold mb-4 border-b border-borderDark pb-2" id="FileUUID">UUID: </h1>
|
|
|
|
<form id="download-form" class="mb-6">
|
|
<div class="flex flex-wrap gap-4 items-center">
|
|
<div>
|
|
<label class="form-label">工作线程数</label>
|
|
<input type="number" name="thread_count" required value="4" min="1" max="8" class="form-input w-32">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="form-label">单线程工作量(KB)</label>
|
|
<input type="number" name="chunk_size" required value="1024" min="1" max="10240" class="form-input w-32">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="form-label">超时时间(秒)</label>
|
|
<input type="number" name="timeout" required value="30" min="0" max="100" class="form-input w-32">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="form-label">重试次数</label>
|
|
<input type="number" name="retry_count" required value="5" min="0" max="20" class="form-input w-32">
|
|
</div>
|
|
|
|
<div class="self-end">
|
|
<button type="submit" class="btn-primary-download">
|
|
<i class="fa fa-play mr-1"></i>开始传输
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="stats-panel" class="border border-borderDark bg-neutral p-4 mb-6 hidden">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<span class="font-medium text-secondary">总任务数: </span><span id="total-tasks">0</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-secondary">已完成: </span><span id="completed-tasks" class="text-success">0</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-secondary">失败数: </span><span id="failed-tasks" class="text-error">0</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-secondary">进度: </span><span id="progress">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="task-container" class="flex flex-wrap mt-4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- 消息提示容器 -->
|
|
<div id="toast-container" class="fixed top-4 right-4 z-50"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task Manager Tab Content (Initially Hidden) -->
|
|
<div id="task-manager-tab" class="flex-1 flex flex-col overflow-hidden hidden">
|
|
<div class="bg-dark-light border-b border-border-gray p-3 flex items-center justify-between">
|
|
<h2 class="font-medium">任务管理器</h2>
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn-outline py-1 px-3 text-sm flex items-center">
|
|
<i class="fa fa-refresh mr-1"></i> 刷新
|
|
</button>
|
|
<button class="btn-outline py-1 px-3 text-sm flex items-center">
|
|
<i class="fa fa-plus mr-1"></i> 新建任务
|
|
</button>
|
|
<button class="btn-outline py-1 px-3 text-sm flex items-center">
|
|
<i class="fa fa-times mr-1"></i> 结束任务
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task Manager Tabs -->
|
|
<div class="border-b border-border-gray flex">
|
|
<button class="py-2 px-4 text-sm font-medium border-b-2 border-primary text-white">进程</button>
|
|
<button class="py-2 px-4 text-sm font-medium border-b-2 border-transparent text-gray-400 hover:text-white">性能</button>
|
|
<button class="py-2 px-4 text-sm font-medium border-b-2 border-transparent text-gray-400 hover:text-white">应用程序</button>
|
|
<button class="py-2 px-4 text-sm font-medium border-b-2 border-transparent text-gray-400 hover:text-white">启动</button>
|
|
<button class="py-2 px-4 text-sm font-medium border-b-2 border-transparent text-gray-400 hover:text-white">用户</button>
|
|
</div>
|
|
|
|
<!-- Process Table -->
|
|
<div class="flex-1 overflow-y-auto bg-console-bg">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-dark-light border-b border-border-gray">
|
|
<th class="text-left p-3 font-medium">名称</th>
|
|
<th class="text-left p-3 font-medium">PID</th>
|
|
<th class="text-left p-3 font-medium">状态</th>
|
|
<th class="text-left p-3 font-medium">CPU</th>
|
|
<th class="text-left p-3 font-medium">内存</th>
|
|
<th class="text-left p-3 font-medium">磁盘</th>
|
|
<th class="text-left p-3 font-medium">网络</th>
|
|
<th class="text-left p-3 font-medium">用户</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b border-border-gray hover:bg-primary/10">
|
|
<td class="p-3">systemd</td>
|
|
<td class="p-3">1</td>
|
|
<td class="p-3">
|
|
<span class="text-success">运行中</span>
|
|
</td>
|
|
<td class="p-3">0.1%</td>
|
|
<td class="p-3">28.4 MB</td>
|
|
<td class="p-3">0.2 MB/s</td>
|
|
<td class="p-3">0 B/s</td>
|
|
<td class="p-3">root</td>
|
|
</tr>
|
|
<tr class="border-b border-border-gray hover:bg-primary/10">
|
|
<td class="p-3">sshd</td>
|
|
<td class="p-3">527</td>
|
|
<td class="p-3">
|
|
<span class="text-success">运行中</span>
|
|
</td>
|
|
<td class="p-3">0.0%</td>
|
|
<td class="p-3">12.8 MB</td>
|
|
<td class="p-3">0 B/s</td>
|
|
<td class="p-3">8.4 KB/s</td>
|
|
<td class="p-3">root</td>
|
|
</tr>
|
|
<tr class="border-b border-border-gray hover:bg-primary/10">
|
|
<td class="p-3">termination</td>
|
|
<td class="p-3">1245</td>
|
|
<td class="p-3">
|
|
<span class="text-success">运行中</span>
|
|
</td>
|
|
<td class="p-3">5.2%</td>
|
|
<td class="p-3">64.7 MB</td>
|
|
<td class="p-3">1.2 MB/s</td>
|
|
<td class="p-3">24.8 KB/s</td>
|
|
<td class="p-3">terminus</td>
|
|
</tr>
|
|
<tr class="border-b border-border-gray hover:bg-primary/10">
|
|
<td class="p-3">nginx</td>
|
|
<td class="p-3">1578</td>
|
|
<td class="p-3">
|
|
<span class="text-success">运行中</span>
|
|
</td>
|
|
<td class="p-3">0.3%</td>
|
|
<td class="p-3">16.2 MB</td>
|
|
<td class="p-3">0.8 MB/s</td>
|
|
<td class="p-3">128.4 KB/s</td>
|
|
<td class="p-3">www-data</td>
|
|
</tr>
|
|
<tr class="border-b border-border-gray hover:bg-primary/10">
|
|
<td class="p-3">mysql</td>
|
|
<td class="p-3">1842</td>
|
|
<td class="p-3">
|
|
<span class="text-success">运行中</span>
|
|
</td>
|
|
<td class="p-3">2.1%</td>
|
|
<td class="p-3">256.3 MB</td>
|
|
<td class="p-3">4.7 MB/s</td>
|
|
<td class="p-3">1.2 KB/s</td>
|
|
<td class="p-3">mysql</td>
|
|
</tr>
|
|
<tr class="border-b border-border-gray hover:bg-primary/10">
|
|
<td class="p-3">python3</td>
|
|
<td class="p-3">2156</td>
|
|
<td class="p-3">
|
|
<span class="text-success">运行中</span>
|
|
</td>
|
|
<td class="p-3">1.8%</td>
|
|
<td class="p-3">42.9 MB</td>
|
|
<td class="p-3">0.5 MB/s</td>
|
|
<td class="p-3">6.3 KB/s</td>
|
|
<td class="p-3">terminus</td>
|
|
</tr>
|
|
<tr class="border-b border-border-gray hover:bg-primary/10">
|
|
<td class="p-3">redis-server</td>
|
|
<td class="p-3">2451</td>
|
|
<td class="p-3">
|
|
<span class="text-success">运行中</span>
|
|
</td>
|
|
<td class="p-3">0.7%</td>
|
|
<td class="p-3">32.1 MB</td>
|
|
<td class="p-3">0.3 MB/s</td>
|
|
<td class="p-3">2.8 KB/s</td>
|
|
<td class="p-3">redis</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> |