<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云存储</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
<style>
/* 基础样式变量 */
:root {
--primary-glow: #ff9580;
--secondary-glow: #ffd700;
--background: #ffffff;
--text: #333333;
--sidebar-bg: #f8f9fa;
--card-bg: #ffffff;
--border-color: #e0e0e0;
--shadow-color: rgba(0, 0, 0, 0.1);
--sidebar-width: 240px;
--header-height: 70px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--background);
color: var(--text);
min-height: 100vh;
}
/* 布局样式 */
.container {
display: flex;
min-height: 100vh;
}
/* 侧边栏样式 */
.sidebar {
width: var(--sidebar-width);
background: var(--sidebar-bg);
border-right: 1px solid var(--border-color);
padding: 20px;
position: fixed;
height: 100vh;
overflow-y: auto;
transition: all 0.3s ease;
}
.logo {
padding: 20px 15px;
margin-bottom: 30px;
font-size: 24px;
font-weight: bold;
color: var(--primary-glow);
}
.nav-item {
display: flex;
align-items: center;
padding: 15px;
margin: 8px 0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background: var(--card-bg);
border: 1px solid transparent;
}
.nav-item:hover {
border-color: var(--primary-glow);
box-shadow: 0 0 15px rgba(255, 149, 128, 0.2);
transform: translateX(5px);
}
.nav-item.active {
background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
color: white;
}
.nav-item i {
margin-right: 12px;
font-size: 20px;
}
/* 主内容区样式 */
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
padding: calc(var(--header-height) + 20px) 30px 30px;
background: var(--background);
}
/* 头部搜索栏样式 */
.header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
padding: 15px 30px;
display: flex;
align-items: center;
box-shadow: 0 2px 10px var(--shadow-color);
z-index: 100;
}
.search-container {
flex: 1;
max-width: 600px;
margin: 0 20px;
position: relative;
}
.search-box {
width: 100%;
padding: 12px 20px;
border-radius: 25px;
border: 2px solid var(--border-color);
background: var(--background);
font-size: 16px;
transition: all 0.3s ease;
}
.search-box:focus {
outline: none;
border-color: var(--primary-glow);
box-shadow: 0 0 10px rgba(255, 149, 128, 0.3);
}
/* 视图切换按钮样式 */
.view-toggle {
position: absolute;
right: 30px;
top: calc(var(--header-height) + 20px);
display: flex;
gap: 10px;
z-index: 10;
}
.view-btn {
padding: 8px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--card-bg);
cursor: pointer;
transition: all 0.3s ease;
}
.view-btn.active {
background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
color: white;
border-color: transparent;
}
/* 文件显示样式 */
.file-container {
margin-top: 60px;
}
/* 网格视图样式 */
.file-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px 0;
}
.file-item.grid {
background: var(--card-bg);
border-radius: 15px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.file-item.grid:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px var(--shadow-color);
border-color: var(--primary-glow);
}
.file-item.grid::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow));
opacity: 0;
transition: opacity 0.3s ease;
}
.file-item.grid:hover::before {
opacity: 1;
}
/* 列表视图样式 */
.file-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.file-item.list {
display: flex;
align-items: center;
padding: 15px;
background: var(--card-bg);
border-radius: 12px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.file-item.list:hover {
transform: translateX(5px);
border-color: var(--primary-glow);
box-shadow: 0 5px 15px var(--shadow-color);
}
.file-item.list .file-icon {
font-size: 24px;
margin-right: 15px;
}
.file-item.list .file-info {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.file-item.list .file-name {
font-weight: 500;
}
.file-item.list .file-meta {
display: flex;
gap: 20px;
color: #666;
}
/* 文件图标和信息样式 */
.file-icon {
font-size: 48px;
margin-bottom: 15px;
color: var(--primary-glow);
}
.file-name {
font-size: 14px;
margin-bottom: 8px;
word-break: break-word;
}
.file-size {
font-size: 12px;
color: #666;
}
/* 文件操作菜单 */
.file-menu {
position: absolute;
background: var(--card-bg);
border-radius: 8px;
box-shadow: 0 5px 20px var(--shadow-color);
padding: 8px 0;
z-index: 1000;
}
.file-menu-item {
padding: 8px 20px;
cursor: pointer;
transition: background 0.3s ease;
white-space: nowrap;
}
.file-menu-item:hover {
background: var(--sidebar-bg);
}
/* 上传按钮和进度条 */
.upload-btn {
position: fixed;
right: 30px;
bottom: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 149, 128, 0.4);
transition: all 0.3s ease;
z-index: 1000;
}
.upload-btn:hover {
transform: scale(1.1);
}
.upload-progress {
position: fixed;
bottom: 30px;
right: 100px;
background: var(--card-bg);
padding: 15px;
border-radius: 12px;
box-shadow: 0 5px 20px var(--shadow-color);
display: none;
}
.progress-bar {
width: 200px;
height: 6px;
background: var(--border-color);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow));
width: 0%;
transition: width 0.3s ease;
}
/* 移动端适配 */
@media (max-width: 768px) {
.sidebar {
width: 100%;
height: 60px;
padding: 0 10px;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 1000;
background: var(--sidebar-bg);
box-shadow: 0 -2px 10px var(--shadow-color);
}
.logo {
display: none;
}
.nav-item {
flex: 1;
margin: 0 5px;
padding: 8px 15px;
flex-direction: row;
align-items: center;
font-size: 12px;
height: 40px;
border-radius: 8px;
}
.nav-item i {
margin: 0 8px 0 0;
font-size: 16px;
}
.nav-item-text {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-content {
margin-left: 0;
margin-bottom: 70px;
padding-top: 90px;
padding-bottom: 70px;
min-height: calc(100vh - 70px);
}
.header {
left: 0;
z-index: 999;
}
.search-container {
margin: 0;
}
.upload-btn {
right: 20px;
bottom: 80px;
z-index: 1001;
}
.file-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.view-toggle {
right: 20px;
gap: 8px;
}
.upload-progress {
bottom: 70px;
right: 20px;
max-width: calc(100vw - 40px);
z-index: 1001;
}
}
.action-buttons {
position: absolute;
right: 30px;
top: calc(var(--header-height) + 20px);
display: flex;
gap: 16px;
align-items: center;
z-index: 10;
}
.action-btn {
padding: 8px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--card-bg);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
color: var(--text);
}
.action-btn:hover {
border-color: var(--primary-glow);
box-shadow: 0 2px 8px var(--shadow-color);
}
.action-btn i {
font-size: 16px;
color: var(--primary-glow);
}
@media (max-width: 768px) {
.action-buttons {
right: 20px;
gap: 8px;
}
.action-btn {
padding: 6px 12px;
font-size: 12px;
}
.action-btn i {
font-size: 14px;
}
}
/* 拖拽上传区域样式 */
.drag-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 149, 128, 0.1);
border: 3px dashed var(--primary-glow);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--primary-glow);
}
/* 面包屑导航 */
.breadcrumb {
margin: 20px 0;
padding: 12px 16px;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 14px;
background: var(--card-bg);
border-radius: 8px;
box-shadow: 0 2px 8px var(--shadow-color);
width: auto;
min-width: min-content;
}
.breadcrumb-item {
cursor: pointer;
color: var(--text);
transition: all 0.3s ease;
padding: 4px 8px;
border-radius: 4px;
display: inline-flex; /* Changed from flex to inline-flex */
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumb-item:hover {
color: var(--primary-glow);
background: rgba(255, 149, 128, 0.1);
}
.breadcrumb-separator {
color: var(--border-color);
margin: 0 4px;
user-select: none;
}
@media (max-width: 768px) {
.breadcrumb {
padding: 8px 12px;
margin: 12px 0;
font-size: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.breadcrumb::-webkit-scrollbar {
display: none;
}
.breadcrumb-item {
padding: 4px 6px;
max-width: 150px;
}
}
/* 加载指示器样式 */
.loading-indicator {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background: var(--card-bg);
border-radius: 15px;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border-color);
border-top-color: var(--primary-glow);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.loading-text {
color: var(--text);
font-size: 1rem;
margin-top: 1rem;
}
/* 上传进度样式 */
.upload-progress {
width: 400px;
max-width: 90vw;
}
.progress-item {
background: var(--card-bg);
border-radius: 8px;
padding: 1rem;
margin-bottom: 0.5rem;
box-shadow: 0 2px 8px var(--shadow-color);
}
.file-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.filename {
font-weight: 500;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cancel-upload {
background: #ff4444;
color: white;
border: none;
border-radius: 4px;
padding: 0.25rem 0.75rem;
cursor: pointer;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.cancel-upload:hover {
background: #ff6666;
transform: translateY(-1px);
}
.upload-stats {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: #666;
margin-top: 0.5rem;
}
.progress-bar {
width: 100%;
height: 6px;
background: var(--border-color);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow));
width: 0%;
transition: width 0.3s ease;
}
/* 确认对话框样式 */
.confirm-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
}
.confirm-content {
background: var(--card-bg);
border-radius: 12px;
padding: 24px;
max-width: 400px;
width: 90%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.confirm-content h3 {
margin-bottom: 16px;
color: var(--text);
}
.confirm-content p {
margin-bottom: 24px;
color: #666;
line-height: 1.5;
}
.confirm-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.confirm-buttons button {
padding: 8px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.confirm-cancel {
background: #f0f0f0;
color: #666;
}
.confirm-ok {
background: #ff4444;
color: white;
}
.confirm-buttons button:hover {
transform: translateY(-1px);
}
/* 提示消息样式 */
.toast-message {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 12px 24px;
border-radius: 6px;
font-size: 14px;
opacity: 0;
transition: all 0.3s ease;
}
.toast-message.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.preview-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
display: none;
z-index: 2000;
}
.preview-content {
max-width: 90%;
max-height: 90%;
position: relative;
background: #fff;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.preview-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.preview-header {
padding: 16px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}
.preview-body {
flex: 1;
overflow: auto;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.preview-image-container {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.preview-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.text-preview,
.markdown-preview {
background: white;
padding: 20px;
overflow: auto;
font-size: 14px;
line-height: 1.6;
}
.markdown-preview {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.preview-action-btn {
padding: 8px;
margin-left: 8px;
border: none;
background: none;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
}
.preview-action-btn:hover {
color: #000;
background: #e9ecef;
border-radius: 4px;
}
.preview-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.cancel-download {
padding: 4px 8px;
border: none;
background: #ff4444;
color: white;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
}
.cancel-download:hover {
background: #ff6666;
transform: translateY(-1px);
}
.stats-row {
display: flex;
justify-content: space-between;
margin-top: 4px;
}
.download-stats {
font-size: 12px;
color: #666;
margin-top: 8px;
}
.file-item.selectable {
position: relative;
cursor: pointer;
}
.file-item.selectable::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 4px;
background: white;
z-index: 1;
}
.file-item.selected::before {
background: var(--primary-glow);
border-color: var(--primary-glow);
}
.file-item.selected::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
color: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.multi-select-btn.active {
background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
color: white;
border-color: transparent;
}
.batch-operations {
display: flex;
gap: 8px;
margin-left: 16px;
}
.folder-name-input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
margin: 16px 0;
font-size: 14px;
}
.folder-name-input:focus {
outline: none;
border-color: var(--primary-glow);
box-shadow: 0 0 0 2px rgba(255, 149, 128, 0.2);
}
.multi-select-btn.active {
background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
color: white;
border-color: transparent;
}
.logout-btn {
padding: 8px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--card-bg);
color: var(--text);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
margin-right: 10px;
margin-left: 10px;
}
.logout-btn:hover {
border-color: var(--primary-glow);
color: var(--primary-glow);
transform: translateY(-2px);
}
.logout-btn i {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<!-- 侧边栏 -->
<nav class="sidebar">
<div class="logo">
<i class="fas fa-cloud"></i> Cloud Vault
</div>
<div class="nav-item active" data-type="all">
<i class="fas fa-folder"></i>
<span class="nav-item-text">全部文件</span>
</div>
<div class="nav-item" data-type="image">
<i class="fas fa-image"></i>
<span class="nav-item-text">图片</span>
</div>
<div class="nav-item" data-type="video">
<i class="fas fa-video"></i>
<span class="nav-item-text">视频</span>
</div>
<div class="nav-item" data-type="document">
<i class="fas fa-file-alt"></i>
<span class="nav-item-text">文档</span>
</div>
<div class="nav-item" data-type="audio">
<i class="fas fa-music"></i>
<span class="nav-item-text">音频</span>
</div>
<div class="nav-item" data-type="archive">
<i class="fas fa-file-archive"></i>
<span class="nav-item-text">压缩包</span>
</div>
</nav>
<!-- 顶部搜索栏 -->
<header class="header">
<div class="search-container">
<input type="text" class="search-box" placeholder="搜索文件...">
</div>
<!-- 添加退出登录按钮 -->
<button class="logout-btn" onclick="handleLogout()">
<i class="fas fa-sign-out-alt"></i>
退出登录
</button>
</header>
<!-- 主内容区 -->
<main class="main-content">
<!-- 面包屑导航 -->
<div class="breadcrumb">
<span class="breadcrumb-item" data-path="/">根目录</span>
</div>
<button class="action-btn create-folder-btn">
<i class="fas fa-folder-plus"></i>
<span>新建文件夹</span>
</button>
<!-- 视图切换按钮 -->
<div class="view-toggle">
<button class="view-btn active" data-view="grid">
<i class="fas fa-th"></i>
</button>
<button class="view-btn" data-view="list">
<i class="fas fa-list"></i>
</button>
</div>
<!-- 文件容器 -->
<div class="file-container">
<!-- 文件内容将通过 JavaScript 动态生成 -->
</div>
</main>
<!-- 上传按钮 -->
<div class="upload-btn" id="uploadBtn">
<i class="fas fa-plus"></i>
<input type="file" id="fileInput" style="display: none;" multiple>
</div>
<!-- 上传进度条 -->
<div class="upload-progress">
</div>
</div>
<!-- 拖拽上传遮罩 -->
<div class="drag-overlay">
<div>释放鼠标上传文件</div>
</div>
<!-- 文件操作菜单 -->
<div class="file-menu" style="display: none;">
<div class="file-menu-item" data-action="preview">
<i class="fas fa-eye"></i> 预览
</div>
<div class="file-menu-item" data-action="download">
<i class="fas fa-download"></i> 下载
</div>
<div class="file-menu-item" data-action="delete">
<i class="fas fa-trash"></i> 删除
</div>
</div>
<!-- 预览模态框 -->
<div class="preview-modal">
<div class="preview-container">
<div class="preview-content">
<!-- 预览内容将通过 JavaScript 动态生成 -->
</div>
<button class="preview-close">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<script>
// 文件管理类
class FileManager {
constructor() {
this.selectedFiles = new Set();
this.isMultiSelectMode = false;
this.currentPath = '/';
this.currentView = 'grid';
this.currentFileType = 'all';
this.files = [];
this.initEventListeners();
this.loadFiles();
}
// 初始化事件监听
initEventListeners() {
// 视图切换
document.querySelectorAll('.view-btn').forEach(btn => {
btn.addEventListener('click', () => this.switchView(btn.dataset.view));
});
// 文件类型筛选
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', () => this.filterByType(item.dataset.type));
});
// 搜索
const searchBox = document.querySelector('.search-box');
searchBox.addEventListener('input', this.debounce((e) => this.handleSearch(e.target.value), 300));
// 文件上传
const uploadBtn = document.getElementById('uploadBtn');
const fileInput = document.getElementById('fileInput');
uploadBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => this.handleFileUpload(e.target.files));
// 拖拽上传
this.initDragAndDrop();
// 新建文件夹按钮监听
const createFolderBtn = document.querySelector('.create-folder-btn');
createFolderBtn.addEventListener('click', () => this.showCreateFolderDialog());
// 添加多选按钮
const multiSelectBtn = document.createElement('button');
multiSelectBtn.className = 'action-btn multi-select-btn';
multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i><span>多选</span>';
multiSelectBtn.addEventListener('click', () => this.toggleMultiSelectMode());
document.querySelector('.view-toggle').prepend(multiSelectBtn);
}
// 加载文件列表
async loadFiles() {
try {
const path = this.currentPath === '/' ? '' : this.currentPath;
const response = await fetch(`/api/files/list/${path}`);
if (!response.ok) throw new Error('Failed to load files');
this.files = await response.json();
this.renderFiles();
this.updateBreadcrumb();
} catch (error) {
console.error('Error loading files:', error);
this.showError('加载文件失败');
}
}
// 渲染文件列表
renderFiles() {
const container = document.querySelector('.file-container');
container.innerHTML = '';
const viewClass = this.currentView === 'grid' ? 'file-grid' : 'file-list';
container.className = `file-container ${viewClass}`;
let filteredFiles = this.files;
if (this.currentFileType !== 'all') {
filteredFiles = this.files.filter(file => file.file_type === this.currentFileType);
}
filteredFiles.forEach(file => {
const fileElement = this.createFileElement(file);
container.appendChild(fileElement);
});
}
// 创建文件元素
createFileElement(file) {
const element = document.createElement('div');
element.className = `file-item ${this.currentView}`;
// 添加多选模式相关的类
if (this.isMultiSelectMode) {
element.classList.add('selectable');
if (this.selectedFiles.has(file)) {
element.classList.add('selected');
}
}
const icon = this.getFileIcon(file.type, file.file_type);
const size = this.formatFileSize(file.size);
if (this.currentView === 'grid') {
element.innerHTML = `
<i class="${icon} file-icon"></i>
<div class="file-name">${file.path.split('/').pop()}</div>
<div class="file-size">${size}</div>
`;
} else {
element.innerHTML = `
<i class="${icon} file-icon"></i>
<div class="file-info">
<div class="file-name">${file.path.split('/').pop()}</div>
<div class="file-meta">
<span>${size}</span>
<span>${file.file_type || '未知类型'}</span>
</div>
</div>
`;
}
// 事件处理逻辑
if (this.isMultiSelectMode) {
// 多选模式下的点击处理
element.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (file.type === 'directory') {
// 文件夹仍然保持导航功能
this.currentPath = file.path;
this.loadFiles();
} else {
// 文件切换选中状态
if (this.selectedFiles.has(file)) {
this.selectedFiles.delete(file);
element.classList.remove('selected');
} else {
this.selectedFiles.add(file);
element.classList.add('selected');
}
}
});
} else {
// 普通模式下的点击处理
element.addEventListener('click', () => this.handleFileClick(file));
}
// 右键菜单处理
element.addEventListener('contextmenu', (e) => {
e.preventDefault();
this.showFileMenu(e, file);
});
return element;
}
// 处理文件点击
handleFileClick(file) {
if (file.type === 'directory') {
this.currentPath = file.path;
this.loadFiles();
} else {
this.previewFile(file);
}
}
// 显示文件操作菜单
showFileMenu(e, file) {
e.preventDefault();
const menu = document.querySelector('.file-menu');
menu.style.display = 'block';
menu.style.left = `${e.pageX}px`;
menu.style.top = `${e.pageY}px`;
// 清除旧的事件监听
const menuItems = menu.querySelectorAll('.file-menu-item');
menuItems.forEach(item => {
const clone = item.cloneNode(true);
item.parentNode.replaceChild(clone, item);
});
// 添加新的事件监听
menu.querySelector('[data-action="preview"]').addEventListener('click', () => this.previewFile(file));
menu.querySelector('[data-action="download"]').addEventListener('click', () => this.downloadFile(file));
menu.querySelector('[data-action="delete"]').addEventListener('click', () => this.deleteFile(file));
// 点击其他地方关闭菜单
const closeMenu = () => {
menu.style.display = 'none';
document.removeEventListener('click', closeMenu);
};
setTimeout(() => {
document.addEventListener('click', closeMenu);
}, 0);
}
// 文件预览
async previewFile(file) {
try {
const modal = document.querySelector('.preview-modal');
const content = modal.querySelector('.preview-content');
// 计算合适的预览尺寸
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const maxWidth = Math.min(windowWidth * 0.9, 1200); // 最大宽度不超过1200px
const maxHeight = windowHeight * 0.85;
modal.style.display = 'flex';
content.innerHTML = `
<div class="loading-indicator">
<div class="spinner"></div>
<div class="loading-text">正在加载预览...</div>
</div>
`;
const response = await fetch(`/api/files/preview/${file.path}`);
if (!response.ok) throw new Error('Failed to preview file');
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const mimeType = response.headers.get('content-type') || '';
const fileName = file.path.split('/').pop();
// 获取预览内容
const previewContent = `
<div class="preview-header">
<div class="preview-info">
<i class="${this.getFileIcon(file.type, file.file_type)}"></i>
<span>${fileName}</span>
</div>
<div class="preview-actions">
<button class="preview-action-btn zoom-in">
<i class="fas fa-search-plus"></i>
</button>
<button class="preview-action-btn zoom-out">
<i class="fas fa-search-minus"></i>
</button>
<button class="preview-action-btn download">
<i class="fas fa-download"></i>
</button>
</div>
</div>
<div class="preview-body" style="max-width: ${maxWidth}px; max-height: ${maxHeight}px;">
${await this.getPreviewContent(file, url, mimeType, maxWidth, maxHeight)}
</div>
`;
content.innerHTML = previewContent;
// 绑定事件处理
this.bindPreviewEvents(modal, content, file, url);
} catch (error) {
console.error('Error previewing file:', error);
this.showError('预览文件失败');
}
}
async getPreviewContent(file, url, mimeType, maxWidth, maxHeight) {
const extension = file.path.split('.').pop().toLowerCase();
if (file.file_type === 'image' || mimeType.startsWith('image/')) {
return `
<div class="preview-image-container" style="max-width: ${maxWidth}px; max-height: ${maxHeight}px;">
<img src="${url}" alt="${file.path}" class="preview-image">
</div>
`;
}
if (file.file_type === 'video' || mimeType.startsWith('video/')) {
return `
<div class="video-container" style="max-width: ${maxWidth * 0.8}px;">
<video class="plyr-media" controls crossorigin playsinline>
<source src="${url}" type="${mimeType}">
</video>
</div>
`;
}
if (file.file_type === 'audio' || mimeType.startsWith('audio/')) {
return `
<div class="audio-container" style="width: ${maxWidth * 0.6}px;">
<audio class="plyr-media" controls>
<source src="${url}" type="${mimeType}">
</audio>
</div>
`;
}
if (mimeType.includes('pdf')) {
return `
<iframe src="${url}#view=FitH" type="application/pdf"
style="width: ${maxWidth}px; height: ${maxHeight}px; border: none;">
</iframe>
`;
}
// 支持 Markdown 预览
if (extension === 'md') {
const text = await (await fetch(url)).text();
const marked = window.marked; // 确保已引入 marked 库
const htmlContent = marked ? marked(text) : text;
return `
<div class="markdown-preview" style="width: ${maxWidth * 0.8}px; height: ${maxHeight * 0.8}px;">
${htmlContent}
</div>
`;
}
// 支持 HTML 预览
if (extension === 'html' || mimeType.includes('html')) {
return `
<iframe src="${url}" sandbox="allow-same-origin allow-scripts"
style="width: ${maxWidth}px; height: ${maxHeight}px; border: none;">
</iframe>
`;
}
if (mimeType.includes('text/') || mimeType.includes('application/json')) {
const text = await (await fetch(url)).text();
return `
<div class="text-preview" style="width: ${maxWidth * 0.8}px; height: ${maxHeight * 0.8}px;">
<pre><code>${this.escapeHtml(text)}</code></pre>
</div>
`;
}
return `
<div class="unsupported-preview">
<i class="fas fa-exclamation-circle"></i>
<p>此文件类型暂不支持预览</p>
<button class="download-btn">
<i class="fas fa-download"></i> 下载文件
</button>
</div>
`;
}
bindPreviewEvents(modal, content, file, url) {
// 缩放功能
let currentScale = 1;
const zoomStep = 0.1;
const maxScale = 3;
const minScale = 0.5;
const zoomIn = content.querySelector('.zoom-in');
const zoomOut = content.querySelector('.zoom-out');
const previewImage = content.querySelector('.preview-image');
const downloadBtn = content.querySelector('.preview-action-btn.download');
if (zoomIn && zoomOut && previewImage) {
zoomIn.onclick = () => {
if (currentScale < maxScale) {
currentScale += zoomStep;
previewImage.style.transform = `scale(${currentScale})`;
}
};
zoomOut.onclick = () => {
if (currentScale > minScale) {
currentScale -= zoomStep;
previewImage.style.transform = `scale(${currentScale})`;
}
};
}
// 下载功能
if (downloadBtn) {
downloadBtn.onclick = () => this.downloadFile(file);
}
// 初始化视频播放器
if (file.file_type === 'video' || file.file_type === 'audio') {
const playerElement = content.querySelector('.plyr-media');
if (playerElement && window.Plyr) {
new Plyr(playerElement);
}
}
// 关闭预览
const closeBtn = modal.querySelector('.preview-close');
const closePreview = () => {
URL.revokeObjectURL(url);
modal.style.display = 'none';
const players = document.querySelectorAll('.plyr');
players.forEach(player => {
if (player.plyr) {
player.plyr.destroy();
}
});
};
closeBtn.onclick = closePreview;
}
// 文件下载
async downloadFile(file) {
try {
const uploadProgress = document.querySelector('.upload-progress');
const progressItem = document.createElement('div');
progressItem.className = 'progress-item';
progressItem.innerHTML = ''; // 清除之前的进度条
progressItem.innerHTML = `
<div class="file-info">
<span class="filename">${file.path.split('/').pop()}</span>
<button class="cancel-download">
<i class="fas fa-times"></i> 取消
</button>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="download-stats">
<div class="stats-row">
<span class="progress-text">0%</span>
<span class="downloaded-size">0 MB / 0 MB</span>
</div>
<div class="stats-row">
<span class="speed">等待开始...</span>
</div>
</div>
`;
uploadProgress.style.display = 'block';
uploadProgress.appendChild(progressItem);
const progressFill = progressItem.querySelector('.progress-fill');
const progressText = progressItem.querySelector('.progress-text');
const speedElement = progressItem.querySelector('.speed');
const sizeElement = progressItem.querySelector('.downloaded-size');
const cancelButton = progressItem.querySelector('.cancel-download');
const controller = new AbortController();
let isDownloadCancelled = false;
cancelButton.onclick = () => {
controller.abort();
isDownloadCancelled = true;
progressItem.remove();
if (!uploadProgress.hasChildNodes()) {
uploadProgress.style.display = 'none';
}
};
const response = await fetch(`/api/files/download/${file.path}`, {
signal: controller.signal
});
if (!response.ok) throw new Error('Download failed');
const contentLength = response.headers.get('content-length');
const total = parseInt(contentLength, 10);
const reader = response.body.getReader();
let receivedLength = 0;
let lastTime = Date.now();
let lastReceived = 0;
let currentSpeed = 0;
let lastSpeedUpdate = Date.now();
const chunks = [];
while (true) {
const {done, value} = await reader.read();
if (done || isDownloadCancelled) break;
chunks.push(value);
receivedLength += value.length;
const percent = (receivedLength / total) * 100;
progressFill.style.width = `${percent.toFixed(1)}%`;
progressText.textContent = `${percent.toFixed(1)}%`;
const now = Date.now();
if (now - lastSpeedUpdate >= 1000) {
const timeElapsed = (now - lastTime) / 1000;
const receivedSinceLastTime = receivedLength - lastReceived;
if (timeElapsed > 0) {
currentSpeed = receivedSinceLastTime / timeElapsed;
if (currentSpeed > 0) {
speedElement.textContent = `${this.formatFileSize(currentSpeed)}/s`;
}
}
lastTime = now;
lastReceived = receivedLength;
lastSpeedUpdate = now;
}
sizeElement.textContent = `${this.formatFileSize(receivedLength)} / ${this.formatFileSize(total)}`;
}
if (!isDownloadCancelled) {
const blob = new Blob(chunks);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = file.path.split('/').pop();
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
progressItem.remove();
if (!uploadProgress.hasChildNodes()) {
uploadProgress.style.display = 'none';
}
}
} catch (error) {
const uploadProgress = document.querySelector('.upload-progress');
if (error.name === 'AbortError') {
this.showMessage('下载已取消');
} else {
console.error('Error downloading file:', error);
this.showError('下载文件失败');
}
if (!uploadProgress.hasChildNodes()) {
uploadProgress.style.display = 'none';
}
}
}
// 文件上传处理
async handleFileUpload(files) {
const uploadProgress = document.querySelector('.upload-progress');
uploadProgress.style.display = 'block';
uploadProgress.innerHTML = ''; // 清除之前的进度条
let hasSuccessfulUpload = false; // 跟踪是否有文件上传成功
for (const file of files) {
try {
const formData = new FormData();
formData.append('file', file);
formData.append('path', this.currentPath);
const xhr = new XMLHttpRequest();
const startTime = Date.now();
let lastLoaded = 0;
let lastTime = startTime;
// 创建进度条元素
const progressItem = document.createElement('div');
progressItem.className = 'progress-item';
progressItem.innerHTML = `
<div class="file-info">
<span class="filename">${file.name}</span>
<button class="cancel-upload">取消</button>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="upload-stats">
<span class="speed">0 KB/s</span>
<span class="time-remaining">计算中...</span>
</div>
`;
uploadProgress.appendChild(progressItem);
const progressFill = progressItem.querySelector('.progress-fill');
const speedElement = progressItem.querySelector('.speed');
const timeElement = progressItem.querySelector('.time-remaining');
const cancelButton = progressItem.querySelector('.cancel-upload');
// 处理取消上传
cancelButton.addEventListener('click', () => {
xhr.abort();
progressItem.remove();
if (uploadProgress.children.length === 0) {
uploadProgress.style.display = 'none';
}
});
// 处理上传进度
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
progressFill.style.width = `${percent}%`;
// 计算上传速度
const currentTime = Date.now();
const timeElapsed = (currentTime - lastTime) / 1000; // 秒
const loaded = e.loaded - lastLoaded;
const speed = loaded / timeElapsed; // 字节每秒
// 计算剩余时间
const remaining = (e.total - e.loaded) / speed;
const minutes = Math.floor(remaining / 60);
const seconds = Math.floor(remaining % 60);
// 更新UI
speedElement.textContent = `${this.formatFileSize(speed)}/s`;
timeElement.textContent = `预计剩余 ${minutes}分${seconds}秒`;
lastLoaded = e.loaded;
lastTime = currentTime;
}
});
// 执行上传请求
await new Promise((resolve, reject) => {
xhr.onload = async () => {
try {
const response = xhr.responseText ? JSON.parse(xhr.responseText) : {};
if (xhr.status === 200 && response.success) {
this.showMessage(`文件 ${file.name} 上传成功`);
hasSuccessfulUpload = true; // 标记上传成功
resolve();
} else {
const errorMessage = response.error || '上传失败';
reject(new Error(errorMessage));
}
} catch (e) {
reject(new Error('服务器响应格式错误'));
}
};
xhr.onerror = () => reject(new Error('网络错误'));
xhr.onabort = () => reject(new Error('Upload cancelled'));
xhr.open('POST', '/api/files/upload');
xhr.send(formData);
});
// 上传完成后移除进度条
progressItem.remove();
if (uploadProgress.children.length === 0) {
uploadProgress.style.display = 'none';
}
} catch (error) {
if (error.message !== 'Upload cancelled') {
this.showError(`上传文件 ${file.name} 失败`);
}
}
}
// 所有上传完成后，如果有文件上传成功则刷新文件列表
if (hasSuccessfulUpload) {
await this.loadFiles();
}
}
// 拖拽上传初始化
initDragAndDrop() {
const dragOverlay = document.querySelector('.drag-overlay');
const container = document.querySelector('.container');
container.addEventListener('dragover', (e) => {
e.preventDefault();
dragOverlay.style.display = 'flex';
});
container.addEventListener('dragleave', (e) => {
if (e.relatedTarget === null) {
dragOverlay.style.display = 'none';
}
});
container.addEventListener('drop', (e) => {
e.preventDefault();
dragOverlay.style.display = 'none';
if (e.dataTransfer.files.length > 0) {
this.handleFileUpload(e.dataTransfer.files);
}
});
}
// 面包屑导航更新
updateBreadcrumb() {
const breadcrumb = document.querySelector('.breadcrumb');
const paths = this.currentPath.split('/').filter(Boolean);
breadcrumb.innerHTML = '<span class="breadcrumb-item" data-path="/">根目录</span>';
let currentPath = '';
paths.forEach(path => {
currentPath += `/${path}`;
breadcrumb.innerHTML += `
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-item" data-path="${currentPath}">${decodeURIComponent(path)}</span>
`;
});
breadcrumb.querySelectorAll('.breadcrumb-item').forEach(item => {
item.addEventListener('click', () => {
this.currentPath = item.dataset.path;
this.loadFiles();
});
});
}
// 视图切换
switchView(view) {
const buttons = document.querySelectorAll('.view-btn');
buttons.forEach(btn => {
btn.classList.toggle('active', btn.dataset.view === view);
});
this.currentView = view;
this.renderFiles();
}
// 文件类型筛选
filterByType(type) {
const items = document.querySelectorAll('.nav-item');
items.forEach(item => {
item.classList.toggle('active', item.dataset.type === type);
});
this.currentFileType = type;
this.renderFiles();
}
// 搜索处理
async handleSearch(keyword) {
if (!keyword) {
await this.loadFiles();
return;
}
try {
const response = await fetch(`/api/files/search?keyword=${encodeURIComponent(keyword)}`);
if (!response.ok) throw new Error('Search failed');
const searchResults = await response.json();
// Transform the MySQL search results to match the file list format
this.files = searchResults.map(file => ({
type: 'file',
path: file.path,
size: parseInt(file.size), // Convert size string to number
file_type: file.type,
size_formatted: file.size,
preview_url: `/api/files/preview/${file.path}`,
download_url: `/api/files/download/${file.path}`,
created_at: file.created_at
}));
// Update the breadcrumb to show we're in search mode
const breadcrumb = document.querySelector('.breadcrumb');
breadcrumb.innerHTML = `
<span class="breadcrumb-item" data-path="/">根目录</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-item">搜索结果: "${keyword}"</span>
`;
this.renderFiles();
// Show result count
this.showMessage(`找到 ${this.files.length} 个匹配的文件`);
} catch (error) {
console.error('Error searching files:', error);
this.showError('搜索失败');
}
}
// 辅助方法
getFileIcon(type, fileType) {
const icons = {
directory: 'fas fa-folder',
image: 'fas fa-file-image',
video: 'fas fa-file-video',
document: 'fas fa-file-alt',
audio: 'fas fa-file-audio',
archive: 'fas fa-file-archive',
code: 'fas fa-file-code',
other: 'fas fa-file'
};
if (type === 'directory') return icons.directory;
return icons[fileType] || icons.other;
}
formatFileSize(bytes) {
if (!bytes) return '0 B';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(2)} ${units[unitIndex]}`;
}
debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
showError(message) {
// 可以根据需要实现错误提示UI
alert(message);
}
async deleteFile(file) {
try {
const confirmed = await this.showConfirmDialog(
'确认删除',
`确定要删除文件 "${file.path.split('/').pop()}" 吗？此操作不可恢复。`
);
if (!confirmed) return;
const response = await fetch(`/api/files/delete/${encodeURIComponent(file.path)}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || '删除失败');
}
// Only proceed with refresh and success message if deletion was successful
await this.loadFiles();
this.showMessage(`文件 "${file.path.split('/').pop()}" 已成功删除`);
} catch (error) {
console.error('Error deleting file:', error);
this.showError('删除文件失败');
}
}
// 添加确认对话框的实现
showConfirmDialog(title, message) {
return new Promise((resolve) => {
const modal = document.createElement('div');
modal.className = 'confirm-modal';
modal.innerHTML = `
<div class="confirm-content">
<h3>${title}</h3>
<p>${message}</p>
<div class="confirm-buttons">
<button class="confirm-cancel">取消</button>
<button class="confirm-ok">确定</button>
</div>
</div>
`;
document.body.appendChild(modal);
const handleConfirm = (confirmed) => {
modal.remove();
resolve(confirmed);
};
modal.querySelector('.confirm-cancel').addEventListener('click', () => handleConfirm(false));
modal.querySelector('.confirm-ok').addEventListener('click', () => handleConfirm(true));
});
}
// 添加提示消息的实现
showMessage(message) {
const toast = document.createElement('div');
toast.className = 'toast-message';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => toast.remove(), 300);
}, 2000);
}, 100);
}
// 添加多选模式切换按钮
addMultiSelectButton() {
const multiSelectBtn = document.createElement('button');
multiSelectBtn.className = 'multi-select-btn';
multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i> 多选';
multiSelectBtn.onclick = () => this.toggleMultiSelectMode();
document.querySelector('.view-toggle').appendChild(multiSelectBtn);
}
// 切换多选模式
toggleMultiSelectMode() {
this.isMultiSelectMode = !this.isMultiSelectMode;
this.selectedFiles.clear();
// 更新按钮状态
const multiSelectBtn = document.querySelector('.multi-select-btn');
multiSelectBtn.classList.toggle('active');
// 更新按钮文本
if (this.isMultiSelectMode) {
// 显示批量操作按钮
this.showBatchOperations();
multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i><span>退出多选</span>';
} else {
// 隐藏批量操作按钮
this.hideBatchOperations();
multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i><span>多选</span>';
}
this.renderFiles();
}
showBatchOperations() {
const batchOpsContainer = document.createElement('div');
batchOpsContainer.className = 'batch-operations';
batchOpsContainer.innerHTML = `
<button class="action-btn batch-download-btn">
<i class="fas fa-download"></i><span>批量下载</span>
</button>
<button class="action-btn batch-delete-btn">
<i class="fas fa-trash"></i><span>批量删除</span>
</button>
`;
document.querySelector('.view-toggle').appendChild(batchOpsContainer);
// 绑定事件
batchOpsContainer.querySelector('.batch-download-btn').onclick = () => this.batchDownload();
batchOpsContainer.querySelector('.batch-delete-btn').onclick = () => this.batchDelete();
}
hideBatchOperations() {
const batchOps = document.querySelector('.batch-operations');
if (batchOps) {
batchOps.remove();
}
}
// 批量下载
async batchDownload() {
for (const file of this.selectedFiles) {
await this.downloadFile(file);
}
}
// 批量删除
async batchDelete() {
const confirmed = await this.showConfirmDialog(
'批量删除',
`确定要删除选中的 ${this.selectedFiles.size} 个文件吗？此操作不可恢复。`
);
if (confirmed) {
for (const file of this.selectedFiles) {
await this.deleteFile(file);
}
}
}
async createFolder(folderName) {
try {
const response = await fetch('/api/files/create_folder', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
path: this.currentPath,
name: folderName
})
});
if (!response.ok) {
throw new Error('Failed to create folder');
}
await this.loadFiles();
this.showMessage('文件夹创建成功');
} catch (error) {
console.error('Error creating folder:', error);
this.showError('创建文件夹失败');
}
}
// 显示创建文件夹对话框
async showCreateFolderDialog() {
const modal = document.createElement('div');
modal.className = 'confirm-modal';
modal.innerHTML = `
<div class="confirm-content">
<h3>新建文件夹</h3>
<div class="input-container">
<input type="text"
class="folder-name-input"
placeholder="请输入文件夹名称"
maxlength="255">
</div>
<div class="confirm-buttons">
<button class="confirm-cancel">取消</button>
<button class="confirm-ok">创建</button>
</div>
</div>
`;
document.body.appendChild(modal);
const input = modal.querySelector('.folder-name-input');
input.focus();
try {
const folderName = await new Promise((resolve) => {
const handleCreateFolder = () => {
const name = input.value.trim();
if (name) {
resolve(name);
}
modal.remove();
};
const handleCancel = () => {
resolve(null);
modal.remove();
};
modal.querySelector('.confirm-ok').onclick = handleCreateFolder;
modal.querySelector('.confirm-cancel').onclick = handleCancel;
input.onkeyup = (e) => {
if (e.key === 'Enter') handleCreateFolder();
if (e.key === 'Escape') handleCancel();
};
});
if (folderName) {
await this.createFolder(folderName);
}
} catch (error) {
console.error('Error creating folder:', error);
this.showError('创建文件夹失败');
}
}
}
async function handleLogout() {
try {
const response = await fetch('/logout');
if (response.ok) {
window.location.href = '/login';
} else {
throw new Error('Logout failed');
}
} catch (error) {
console.error('Error during logout:', error);
alert('退出登录失败，请重试');
}
}
// 初始化文件管理器
new FileManager();
</script>
</body>
</html>