6359 lines
222 KiB
HTML
6359 lines
222 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>叠加态 - 局域网文件传输</title>
|
||
<link rel="icon" type="image/x-icon" href="/image/logo_w.ico">
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--primary-color: #4a90e2;
|
||
--secondary-color: #357abd;
|
||
--background-color: #f5f7fa;
|
||
--card-bg: #ffffff;
|
||
--text-color: #333;
|
||
--border-radius: 12px;
|
||
--transition-speed: 0.3s;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background-color: var(--background-color);
|
||
color: var(--text-color);
|
||
line-height: 1.6;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.nav-bar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 24px 30px;
|
||
background: linear-gradient(135deg, var(--card-bg) 0%, rgba(245,247,250,0.8) 100%);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||
margin-bottom: 30px;
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
backdrop-filter: blur(10px);
|
||
position: relative;
|
||
overflow: hidden;
|
||
gap: 18px;
|
||
}
|
||
|
||
.nav-top-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-bottom-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
gap: 30px;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
padding-top: 18px;
|
||
}
|
||
|
||
.nav-bottom-row::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 20%;
|
||
right: 20%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.2), transparent);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.nav-bar {
|
||
padding: 16px 20px;
|
||
gap: 15px;
|
||
}
|
||
|
||
.nav-controls {
|
||
gap: 18px;
|
||
}
|
||
|
||
.mobile-switches {
|
||
gap: 12px;
|
||
}
|
||
|
||
.quick-upload-switch {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.switch-label {
|
||
font-size: 0.8em;
|
||
}
|
||
}
|
||
|
||
.nav-bar::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #00d2ff);
|
||
background-size: 200% 100%;
|
||
animation: gradientShift 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
|
||
/* 添加导航栏悬浮效果 */
|
||
.nav-bar:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
.nav-bar:hover::before {
|
||
height: 4px;
|
||
animation-duration: 1.5s;
|
||
}
|
||
|
||
/* 导航栏分隔线 */
|
||
.nav-controls::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 1px;
|
||
height: 30px;
|
||
background: linear-gradient(to bottom, transparent, rgba(74, 144, 226, 0.3), transparent);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.nav-bar:hover .nav-controls::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
padding: 12px 20px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-radius: 22px;
|
||
border: 1px solid rgba(74, 144, 226, 0.1);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.user-info:hover {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--primary-color);
|
||
object-fit: cover;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
line-height: 1;
|
||
background: transparent;
|
||
}
|
||
|
||
.user-avatar.emoji-avatar {
|
||
background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.2));
|
||
}
|
||
|
||
.user-info:hover .user-avatar {
|
||
transform: scale(1.05);
|
||
border-color: var(--secondary-color);
|
||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
|
||
}
|
||
|
||
.user-avatar {
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.user-avatar:hover {
|
||
transform: scale(1.1);
|
||
border-color: var(--secondary-color);
|
||
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
|
||
}
|
||
|
||
/* Admin登录弹窗样式 */
|
||
.admin-login-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(5px);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.admin-login-modal.active {
|
||
display: flex;
|
||
}
|
||
|
||
.admin-login-content {
|
||
background: var(--card-bg);
|
||
padding: 30px;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
width: 90%;
|
||
max-width: 400px;
|
||
position: relative;
|
||
animation: modalSlideIn 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes modalSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-20px) scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
.admin-login-header {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.admin-login-header h3 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 5px;
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.admin-login-header p {
|
||
color: #666;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.admin-login-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.admin-form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.admin-form-group label {
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.admin-form-group input {
|
||
padding: 12px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.admin-form-group input:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.admin-login-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.admin-btn {
|
||
padding: 12px 20px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
flex: 1;
|
||
}
|
||
|
||
.admin-btn-primary {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.admin-btn-primary:hover {
|
||
background: var(--secondary-color);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
|
||
}
|
||
|
||
.admin-btn-secondary {
|
||
background: #f5f5f5;
|
||
color: var(--text-color);
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.admin-btn-secondary:hover {
|
||
background: #e8e8e8;
|
||
}
|
||
|
||
.admin-close-btn {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
background: none;
|
||
border: none;
|
||
font-size: 20px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.admin-close-btn:hover {
|
||
background: #f0f0f0;
|
||
color: #666;
|
||
}
|
||
|
||
.admin-login-error {
|
||
background: #fee;
|
||
color: #c33;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
border-left: 4px solid #c33;
|
||
}
|
||
|
||
.admin-login-success {
|
||
background: #efe;
|
||
color: #363;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
border-left: 4px solid #363;
|
||
}
|
||
|
||
.admin-login-info {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
border-left: 4px solid #1976d2;
|
||
}
|
||
|
||
/* Admin状态指示器 */
|
||
.admin-indicator {
|
||
position: absolute;
|
||
top: -3px;
|
||
right: -3px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #4CAF50;
|
||
border: 2px solid white;
|
||
border-radius: 50%;
|
||
animation: adminPulse 2s infinite;
|
||
}
|
||
|
||
@keyframes adminPulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
|
||
70% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
|
||
}
|
||
|
||
.admin-badge {
|
||
background: linear-gradient(135deg, #4CAF50, #45a049);
|
||
color: white;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.user-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 2px;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.user-role {
|
||
font-size: 0.75em;
|
||
color: #666;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.admin-badge {
|
||
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.65em;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
box-shadow: 0 2px 4px rgba(238, 90, 36, 0.3);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.05); }
|
||
}
|
||
|
||
.nav-bar h1 {
|
||
color: var(--primary-color);
|
||
font-size: 1.8em;
|
||
margin: 0;
|
||
font-weight: 700;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.nav-bar h1 img {
|
||
height: 36px !important;
|
||
width: auto !important;
|
||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.nav-bar h1:hover img {
|
||
transform: scale(1.05) rotate(5deg);
|
||
}
|
||
|
||
.nav-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 30px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.mobile-switches {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
transition: all var(--transition-speed);
|
||
padding: 12px 20px;
|
||
border-radius: 25px;
|
||
background: rgba(74, 144, 226, 0.08);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 500;
|
||
font-size: 0.95em;
|
||
border: 1px solid rgba(74, 144, 226, 0.15);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.nav-links a::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||
transition: left 0.5s;
|
||
}
|
||
|
||
.nav-links a:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: white;
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.nav-links a i {
|
||
font-size: 1.1em;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.nav-links a:hover i {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.upload-section {
|
||
background: var(--card-bg);
|
||
padding: 30px;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
margin-bottom: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.upload-zone {
|
||
background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(245,247,250,1) 100%);
|
||
border: 2px dashed rgba(74, 144, 226, 0.3);
|
||
transition: all 0.3s ease;
|
||
padding: 40px;
|
||
margin: 20px 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.upload-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.upload-btn-style {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
|
||
}
|
||
|
||
.upload-btn-style:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
|
||
}
|
||
|
||
.upload-btn-style:active {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.upload-btn-style:focus {
|
||
outline: 2px solid var(--primary-color);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.upload-zone:hover {
|
||
background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(74, 144, 226, 0.1) 100%);
|
||
border-color: var(--primary-color);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.upload-zone.drag-over {
|
||
border-color: var(--primary-color);
|
||
background-color: rgba(74, 144, 226, 0.1);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.upload-icon {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
width: 80px;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
margin: 0 auto 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.upload-zone:hover .upload-icon {
|
||
background: rgba(74, 144, 226, 0.2);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.file-input {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.files-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||
gap: 24px;
|
||
padding: 24px 0;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.file-card {
|
||
background: var(--card-bg);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border: 1px solid rgba(0,0,0,0.06);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.file-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.file-card:hover {
|
||
transform: translateY(-6px) scale(1.02);
|
||
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.file-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.file-icon {
|
||
background: linear-gradient(145deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.2) 100%);
|
||
border-radius: 12px;
|
||
transition: all 0.3s ease;
|
||
font-size: 24px;
|
||
color: var(--primary-color);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.file-card:hover .file-icon {
|
||
transform: scale(1.1) rotate(5deg);
|
||
}
|
||
|
||
.file-name {
|
||
font-weight: 700;
|
||
font-size: 1.1em;
|
||
margin-bottom: 8px;
|
||
word-break: break-word;
|
||
color: #2c3e50;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.file-info {
|
||
color: #666;
|
||
font-size: 0.9em;
|
||
line-height: 1.5;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.file-info div {
|
||
margin-bottom: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-info i {
|
||
width: 16px;
|
||
text-align: center;
|
||
color: var(--primary-color);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.file-actions {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.download-btn, .delete-btn, .move-btn, .rename-btn {
|
||
flex: 1;
|
||
min-width: 100px;
|
||
max-width: 140px;
|
||
padding: 12px 16px;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
font-size: 0.9em;
|
||
letter-spacing: 0.3px;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
.download-btn {
|
||
background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
|
||
color: white;
|
||
}
|
||
|
||
.delete-btn {
|
||
background: linear-gradient(135deg, #ea4335 0%, #d33b2c 100%);
|
||
color: white;
|
||
}
|
||
|
||
.download-btn:hover, .delete-btn:hover, .move-btn:hover, .rename-btn:hover {
|
||
transform: translateY(-3px) scale(1.02);
|
||
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.download-btn:active, .delete-btn:active, .move-btn:active, .rename-btn:active {
|
||
transform: translateY(-1px) scale(0.98);
|
||
transition: all 0.1s ease;
|
||
}
|
||
|
||
/* 按钮图标优化 */
|
||
.file-actions button i,
|
||
.file-actions a i {
|
||
font-size: 1em;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 4px;
|
||
width: 100%;
|
||
background: #eee;
|
||
border-radius: 2px;
|
||
margin-top: 10px;
|
||
overflow: hidden;
|
||
display: none;
|
||
}
|
||
|
||
.progress {
|
||
height: 100%;
|
||
background: var(--primary-color);
|
||
width: 0%;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.upload-text {
|
||
margin-top: 10px;
|
||
color: #666;
|
||
}
|
||
|
||
.toast {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
padding: 15px 25px;
|
||
background: #333;
|
||
color: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||
display: none;
|
||
animation: slideIn 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.file-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.file-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.file-card:hover .file-actions {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 添加删除确认对话框样式 */
|
||
.dialog-overlay {
|
||
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: 1000;
|
||
}
|
||
|
||
.dialog {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
max-width: 400px;
|
||
width: 90%;
|
||
}
|
||
|
||
.dialog-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* 添加移动端适配样式 */
|
||
@media (max-width: 768px) {
|
||
body {
|
||
padding: 10px;
|
||
}
|
||
|
||
/* 导航栏优化 */
|
||
.nav-bar {
|
||
padding: 18px 15px;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.nav-top-row {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-bar h1 {
|
||
font-size: 1.4em;
|
||
justify-content: center;
|
||
}
|
||
|
||
.nav-bar h1 img {
|
||
height: 28px !important;
|
||
}
|
||
|
||
.nav-bottom-row {
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.nav-bottom-row::before {
|
||
display: none;
|
||
}
|
||
|
||
/* 移动端开关组合 */
|
||
.mobile-switches {
|
||
gap: 10px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.quick-upload-switch {
|
||
flex: 1;
|
||
max-width: 160px;
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.nav-links {
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.nav-links a {
|
||
padding: 10px 16px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-links a {
|
||
margin: 0;
|
||
font-size: 0.9em;
|
||
padding: 8px 12px;
|
||
flex: 1;
|
||
min-width: 100px;
|
||
text-align: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.user-info {
|
||
justify-content: center;
|
||
margin: 0;
|
||
padding: 10px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
|
||
.user-details {
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 上传区域优化 */
|
||
.upload-section {
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.upload-zone {
|
||
padding: 20px 15px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 36px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.upload-zone h2 {
|
||
font-size: 1.1em;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
/* 文件列表优化 */
|
||
.files-grid {
|
||
gap: 15px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.file-card {
|
||
margin: 0;
|
||
padding: 15px;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.file-info {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
/* 文件操作按钮优化 */
|
||
.file-actions {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.download-btn, .delete-btn, .move-btn, .rename-btn {
|
||
flex: none;
|
||
width: 100%;
|
||
max-width: none;
|
||
min-width: auto;
|
||
padding: 14px 16px;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
/* Toast 提示优化 */
|
||
.toast {
|
||
left: 50%;
|
||
right: auto;
|
||
transform: translateX(-50%);
|
||
width: 90%;
|
||
max-width: 300px;
|
||
text-align: center;
|
||
font-size: 0.9em;
|
||
padding: 12px 20px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 360px) {
|
||
.nav-bar h1 {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.upload-zone {
|
||
padding: 15px 10px;
|
||
}
|
||
|
||
.file-card {
|
||
padding: 12px;
|
||
}
|
||
}
|
||
|
||
/* 添加安全区域适配 */
|
||
@supports (padding: max(0px)) {
|
||
body {
|
||
padding-top: max(20px, env(safe-area-inset-top));
|
||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||
padding-left: max(20px, env(safe-area-inset-left));
|
||
padding-right: max(20px, env(safe-area-inset-right));
|
||
}
|
||
}
|
||
|
||
/* 添加触摸反馈 */
|
||
@media (hover: none) {
|
||
.file-card:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.download-btn:active, .delete-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.upload-zone:active {
|
||
background-color: rgba(74, 144, 226, 0.1);
|
||
}
|
||
}
|
||
|
||
/* 优化拖放区域 */
|
||
.upload-zone {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 200px;
|
||
}
|
||
|
||
/* 添加文件上传进度显示 */
|
||
.upload-progress {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: var(--primary-color);
|
||
transform-origin: left;
|
||
transform: scaleX(0);
|
||
transition: transform 0.3s ease;
|
||
z-index: 1000;
|
||
}
|
||
|
||
/* 优化文件卡片布局 */
|
||
.file-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.file-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.file-content {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 添加加载动画 */
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 3px solid #f3f3f3;
|
||
border-top: 3px solid var(--primary-color);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.file-uploader {
|
||
font-size: 0.9em;
|
||
color: #666;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.file-comment {
|
||
font-size: 0.9em;
|
||
color: #666;
|
||
margin: 5px 0;
|
||
padding: 5px 10px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 5px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.file-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 18px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.file-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.2) 100%);
|
||
border-radius: 12px;
|
||
flex-shrink: 0;
|
||
font-size: 20px;
|
||
color: var(--primary-color);
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 文件类型图标样式 */
|
||
.file-icon.image {
|
||
background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.2) 100%);
|
||
color: #4caf50;
|
||
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
|
||
}
|
||
|
||
.file-icon.video {
|
||
background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
|
||
color: #f44336;
|
||
box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
|
||
}
|
||
|
||
.file-icon.audio {
|
||
background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.2) 100%);
|
||
color: #9c27b0;
|
||
box-shadow: 0 2px 8px rgba(156, 39, 176, 0.1);
|
||
}
|
||
|
||
.file-icon.pdf {
|
||
background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
|
||
color: #f44336;
|
||
box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
|
||
}
|
||
|
||
.file-icon.archive {
|
||
background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.2) 100%);
|
||
color: #ff9800;
|
||
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
|
||
}
|
||
|
||
.file-icon.code {
|
||
background: linear-gradient(135deg, rgba(96, 125, 139, 0.1) 0%, rgba(96, 125, 139, 0.2) 100%);
|
||
color: #607d8b;
|
||
box-shadow: 0 2px 8px rgba(96, 125, 139, 0.1);
|
||
}
|
||
|
||
.file-icon.document {
|
||
background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.2) 100%);
|
||
color: #2196f3;
|
||
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
|
||
}
|
||
|
||
/* 文件预览缩略图 */
|
||
.file-thumbnail {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 12px;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.file-thumbnail.loaded {
|
||
opacity: 1;
|
||
}
|
||
|
||
.file-icon:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.file-icon.has-preview:hover .file-thumbnail {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 播放按钮覆盖层 */
|
||
.play-overlay {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.6);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
cursor: pointer;
|
||
z-index: 2;
|
||
}
|
||
|
||
.file-icon:hover .play-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 媒体预览模态框 */
|
||
.media-preview-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.media-preview-modal.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.media-preview-content {
|
||
max-width: 90vw;
|
||
max-height: 90vh;
|
||
position: relative;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.media-preview-content img,
|
||
.media-preview-content video {
|
||
max-width: 100%;
|
||
max-height: 90vh;
|
||
display: block;
|
||
}
|
||
|
||
.media-preview-content audio {
|
||
width: 450px;
|
||
min-width: 350px;
|
||
height: auto;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
outline: none;
|
||
}
|
||
|
||
.audio-preview-container {
|
||
padding: 30px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
min-width: 400px;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.audio-preview-icon {
|
||
font-size: 48px;
|
||
color: #9c27b0;
|
||
margin-bottom: 20px;
|
||
background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.2) 100%);
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
.audio-preview-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.audio-preview-details {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.audio-preview-player {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
outline: none;
|
||
height: 54px;
|
||
display: block !important;
|
||
}
|
||
|
||
/* 自定义音频控件样式 */
|
||
.audio-preview-player::-webkit-media-controls-panel {
|
||
background-color: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.audio-preview-player::-webkit-media-controls-play-button {
|
||
background-color: #9c27b0;
|
||
border-radius: 50%;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.audio-preview-player::-webkit-media-controls-timeline {
|
||
background-color: rgba(156, 39, 176, 0.2);
|
||
border-radius: 2px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.audio-preview-player::-webkit-media-controls-current-time-display,
|
||
.audio-preview-player::-webkit-media-controls-time-remaining-display {
|
||
color: #9c27b0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.audio-loading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
color: #9c27b0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.audio-loading i {
|
||
animation: spin 1s linear infinite;
|
||
margin-right: 8px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.audio-error {
|
||
color: #f44336;
|
||
text-align: center;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.audio-error i {
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
display: block;
|
||
}
|
||
|
||
/* 自定义音频控制按钮 */
|
||
.audio-custom-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.audio-play-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
|
||
border: none;
|
||
color: white;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
|
||
}
|
||
|
||
.audio-play-btn:hover {
|
||
background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
|
||
transform: scale(1.05);
|
||
box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
|
||
}
|
||
|
||
.audio-time-display {
|
||
font-family: monospace;
|
||
font-size: 14px;
|
||
color: #666;
|
||
min-width: 100px;
|
||
text-align: center;
|
||
}
|
||
|
||
.audio-volume-control {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.audio-volume-slider {
|
||
width: 80px;
|
||
height: 4px;
|
||
background: #ddd;
|
||
border-radius: 2px;
|
||
outline: none;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
.audio-volume-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #9c27b0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.media-close-btn {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2001;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.media-close-btn:hover {
|
||
background: rgba(0, 0, 0, 0.9);
|
||
}
|
||
|
||
.media-info {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||
color: white;
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.media-info h3 {
|
||
margin: 0 0 5px 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.media-info p {
|
||
margin: 0;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 移动端媒体预览优化 */
|
||
@media (max-width: 768px) {
|
||
.media-preview-content {
|
||
max-width: 95vw;
|
||
max-height: 95vh;
|
||
margin: 20px;
|
||
}
|
||
|
||
.media-preview-content audio {
|
||
width: 100%;
|
||
min-width: 280px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.audio-preview-container {
|
||
padding: 20px;
|
||
min-width: 300px;
|
||
max-width: 90vw;
|
||
margin: 10px;
|
||
}
|
||
|
||
.audio-preview-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
font-size: 36px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.audio-preview-title {
|
||
font-size: 14px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.audio-preview-details {
|
||
font-size: 12px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.audio-preview-player {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.audio-custom-controls {
|
||
gap: 10px;
|
||
padding: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.audio-play-btn {
|
||
width: 45px;
|
||
height: 45px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.audio-time-display {
|
||
font-size: 12px;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.audio-volume-slider {
|
||
width: 60px;
|
||
}
|
||
|
||
.media-close-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
font-size: 18px;
|
||
top: 5px;
|
||
right: 5px;
|
||
}
|
||
|
||
.media-info {
|
||
padding: 15px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.media-info h3 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.play-overlay {
|
||
width: 20px;
|
||
height: 20px;
|
||
font-size: 8px;
|
||
}
|
||
}
|
||
|
||
/* 移动端优化 */
|
||
@media (max-width: 768px) {
|
||
.file-header {
|
||
gap: 10px;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
|
||
.file-uploader,
|
||
.file-comment {
|
||
font-size: 0.85em;
|
||
}
|
||
}
|
||
|
||
.upload-preview {
|
||
margin-top: 20px;
|
||
background: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-header {
|
||
padding: 15px 20px;
|
||
background: #f8f9fa;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.preview-header h3 {
|
||
margin: 0;
|
||
color: #333;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.clear-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 5px;
|
||
border-radius: 50%;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.clear-btn:hover {
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.preview-files {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
padding: 10px;
|
||
}
|
||
|
||
.preview-file {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px;
|
||
border: 1px solid #eee;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
background: #fff;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.preview-file:hover {
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.remove-file-btn {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 5px;
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.preview-file:hover .remove-file-btn {
|
||
opacity: 1;
|
||
}
|
||
|
||
.remove-file-btn:hover {
|
||
background: rgba(220, 53, 69, 0.1);
|
||
color: #dc3545;
|
||
}
|
||
|
||
.preview-file-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--primary-color);
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 预览文件图标类型样式 */
|
||
.preview-file-icon.image {
|
||
background: rgba(76, 175, 80, 0.1);
|
||
color: #4caf50;
|
||
}
|
||
|
||
.preview-file-icon.video {
|
||
background: rgba(244, 67, 54, 0.1);
|
||
color: #f44336;
|
||
}
|
||
|
||
.preview-file-icon.audio {
|
||
background: rgba(156, 39, 176, 0.1);
|
||
color: #9c27b0;
|
||
}
|
||
|
||
.preview-file-icon.pdf {
|
||
background: rgba(244, 67, 54, 0.1);
|
||
color: #f44336;
|
||
}
|
||
|
||
.preview-file-icon.archive {
|
||
background: rgba(255, 152, 0, 0.1);
|
||
color: #ff9800;
|
||
}
|
||
|
||
.preview-file-icon.code {
|
||
background: rgba(96, 125, 139, 0.1);
|
||
color: #607d8b;
|
||
}
|
||
|
||
.preview-file-icon.document {
|
||
background: rgba(33, 150, 243, 0.1);
|
||
color: #2196f3;
|
||
}
|
||
|
||
.preview-file-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.preview-file-name {
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.preview-file-size {
|
||
font-size: 0.85em;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.preview-file-type {
|
||
font-size: 0.8em;
|
||
color: var(--primary-color);
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.preview-file-name-container {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.preview-file-name-container label {
|
||
display: block;
|
||
font-size: 0.85em;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.preview-file-name-input {
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 0.9em;
|
||
transition: all 0.3s ease;
|
||
background: #fff;
|
||
}
|
||
|
||
.preview-file-name-input:focus {
|
||
border-color: var(--primary-color);
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||
}
|
||
|
||
.preview-file-name-input:invalid,
|
||
.preview-file-name-input.invalid {
|
||
border-color: #dc3545;
|
||
background-color: rgba(220, 53, 69, 0.05);
|
||
}
|
||
|
||
.filename-error {
|
||
font-size: 0.75em;
|
||
color: #dc3545;
|
||
margin-top: 4px;
|
||
display: block;
|
||
animation: slideDown 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-5px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.preview-file-path {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
margin-bottom: 6px;
|
||
padding: 4px 8px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-radius: 3px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.preview-file-comment {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 0.9em;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.preview-file-comment:focus {
|
||
border-color: var(--primary-color);
|
||
outline: none;
|
||
}
|
||
|
||
.preview-actions {
|
||
padding: 15px;
|
||
text-align: right;
|
||
background: #f8f9fa;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.upload-all-btn {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 24px;
|
||
cursor: pointer;
|
||
font-size: 0.95em;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.upload-all-btn:hover {
|
||
background: var(--secondary-color);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 移动端优化 */
|
||
@media (max-width: 768px) {
|
||
.preview-file {
|
||
padding: 12px;
|
||
}
|
||
|
||
.preview-file-icon {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
|
||
.preview-file-name {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.preview-file-size {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.preview-file-comment {
|
||
padding: 6px;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.preview-file-name-input {
|
||
padding: 6px 8px;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.preview-file-name-container label {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.filename-error {
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
.remove-file-btn {
|
||
opacity: 1;
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
.nav-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.quick-upload-switch {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
padding: 12px 18px;
|
||
border-radius: 18px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border: 1px solid rgba(74, 144, 226, 0.1);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.quick-upload-switch:hover {
|
||
background: rgba(74, 144, 226, 0.08);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.switch-label {
|
||
font-size: 0.85em;
|
||
color: #555;
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
user-select: none;
|
||
}
|
||
|
||
.switch-slider {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 44px;
|
||
height: 22px;
|
||
background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
|
||
border-radius: 22px;
|
||
transition: all 0.3s ease;
|
||
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.switch-slider::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #fff, #f8f9fa);
|
||
top: 2px;
|
||
left: 2px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.quick-upload-switch input {
|
||
display: none;
|
||
}
|
||
|
||
.quick-upload-switch input:checked + .switch-label + .switch-slider {
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 10px rgba(74, 144, 226, 0.3);
|
||
}
|
||
|
||
.quick-upload-switch input:checked + .switch-label + .switch-slider::after {
|
||
transform: translateX(22px);
|
||
background: linear-gradient(135deg, #fff, #e3f2fd);
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2), 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.quick-upload-switch input:checked + .switch-label {
|
||
color: var(--primary-color);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.nav-controls {
|
||
width: 100%;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.quick-upload-switch {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-radius: var(--border-radius);
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.switch-label {
|
||
font-size: 0.95em;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.switch-slider {
|
||
width: 46px;
|
||
height: 24px;
|
||
}
|
||
|
||
.switch-slider::after {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.quick-upload-switch input:checked + .switch-label + .switch-slider::after {
|
||
transform: translateX(22px);
|
||
}
|
||
|
||
/* 添加开关说明文字 */
|
||
.quick-upload-hint {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
padding: 0 15px;
|
||
margin-top: 4px;
|
||
display: none; /* 默认隐藏 */
|
||
}
|
||
|
||
.quick-upload-switch:active .quick-upload-hint {
|
||
display: block; /* 长按显示提示 */
|
||
}
|
||
|
||
/* 优化导航栏布局 */
|
||
.nav-bar {
|
||
padding: 20px 15px;
|
||
gap: 15px;
|
||
}
|
||
|
||
.nav-top-row {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-bar h1 {
|
||
font-size: 1.3em;
|
||
justify-content: center;
|
||
}
|
||
|
||
.nav-bottom-row {
|
||
gap: 20px;
|
||
}
|
||
|
||
.mobile-switches {
|
||
justify-content: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.quick-upload-switch {
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.nav-links {
|
||
gap: 14px;
|
||
}
|
||
|
||
.nav-links {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.nav-links a {
|
||
padding: 8px 15px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 20px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.user-info {
|
||
justify-content: center;
|
||
padding: 8px 12px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 添加快速上传状态提示 */
|
||
.upload-status {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
font-size: 0.9em;
|
||
z-index: 1000;
|
||
display: none;
|
||
animation: slideUp 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
transform: translate(-50%, 100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(-50%, 0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 优化上传区域 */
|
||
.upload-zone {
|
||
padding: 25px 15px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.upload-buttons {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.upload-btn-style {
|
||
width: 100%;
|
||
justify-content: center;
|
||
padding: 14px 20px;
|
||
font-size: 1em;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 0.85em;
|
||
margin-top: 8px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 快速上传模式下的样式 */
|
||
.quick-upload-mode .upload-zone {
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-style: solid;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.quick-upload-mode .upload-icon {
|
||
color: var(--primary-color);
|
||
animation: pulse 1.5s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 360px) {
|
||
.nav-bar h1 {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.quick-upload-switch {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.switch-label {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.nav-links a {
|
||
padding: 6px 12px;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.user-info {
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.user-name, .user-role {
|
||
font-size: 0.8em;
|
||
}
|
||
}
|
||
|
||
/* 添加进度条相关样式 */
|
||
.upload-progress-container {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
display: none;
|
||
}
|
||
|
||
.file-progress {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
margin-bottom: 10px;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.progress-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.progress-filename {
|
||
font-weight: 500;
|
||
color: #333;
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.progress-stats {
|
||
font-size: 0.9em;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.progress-bar-outer {
|
||
width: 100%;
|
||
height: 6px;
|
||
background: #eee;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar-inner {
|
||
width: 0%;
|
||
height: 100%;
|
||
background: var(--primary-color);
|
||
border-radius: 3px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.upload-speed {
|
||
font-size: 0.85em;
|
||
color: #666;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 快速上传模式的进度条样式 */
|
||
.quick-upload .file-progress {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 90%;
|
||
max-width: 400px;
|
||
background: white;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
z-index: 1000;
|
||
}
|
||
|
||
.upload-progress-container {
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.file-progress {
|
||
margin-bottom: 15px;
|
||
animation: slideIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.cancel-upload-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
margin-left: 8px;
|
||
border-radius: 50%;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.cancel-upload-btn:hover {
|
||
background: rgba(220, 53, 69, 0.1);
|
||
color: #dc3545;
|
||
}
|
||
|
||
.upload-cancelled .progress-bar-inner {
|
||
background: #dc3545;
|
||
}
|
||
|
||
.upload-cancelled .progress-bar-outer {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.file-progress {
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.upload-cancelled {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.progress-stats {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.upload-cancelled {
|
||
opacity: 0.7;
|
||
transform: translateX(100%);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.file-progress {
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.upload-all-btn {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 24px;
|
||
cursor: pointer;
|
||
font-size: 0.95em;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.upload-all-btn:not(:disabled):hover {
|
||
background: var(--secondary-color);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.upload-all-btn:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.upload-all-btn i {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.upload-all-btn:not(:disabled):hover i {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.batch-rename-btn {
|
||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 24px;
|
||
cursor: pointer;
|
||
font-size: 0.95em;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: all 0.3s ease;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.batch-rename-btn:hover {
|
||
background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.rename-preview {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
background: #f8f9fa;
|
||
font-family: monospace;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.rename-preview-item {
|
||
padding: 2px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.rename-preview-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.rename-original {
|
||
color: #666;
|
||
}
|
||
|
||
.rename-arrow {
|
||
color: var(--primary-color);
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.rename-new {
|
||
color: #28a745;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 文件管理工具栏样式 */
|
||
.file-toolbar {
|
||
background: var(--card-bg);
|
||
padding: 20px;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
.toolbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.toolbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.breadcrumb a:hover {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.breadcrumb .separator {
|
||
color: #666;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.search-box {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.search-box input {
|
||
padding: 10px 40px 10px 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 25px;
|
||
font-size: 0.9em;
|
||
width: 250px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.search-box input:focus {
|
||
border-color: var(--primary-color);
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||
}
|
||
|
||
.search-box i {
|
||
position: absolute;
|
||
right: 15px;
|
||
color: #666;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.sort-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.sort-controls select {
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
background: white;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.sort-order-btn, .layout-toggle-btn {
|
||
background: none;
|
||
border: 1px solid #ddd;
|
||
padding: 8px 12px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.sort-order-btn:hover, .layout-toggle-btn:hover {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.layout-toggle-btn.active {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.btn {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 0.9em;
|
||
transition: all 0.3s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--secondary-color);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #5a6268;
|
||
}
|
||
|
||
/* 模态框样式 */
|
||
.modal-overlay {
|
||
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: 1000;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.modal {
|
||
background: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||
max-width: 500px;
|
||
width: 90%;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 20px;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-header h3 {
|
||
margin: 0;
|
||
color: #333;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.2em;
|
||
cursor: pointer;
|
||
color: #666;
|
||
padding: 5px;
|
||
border-radius: 50%;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.modal-footer {
|
||
padding: 20px;
|
||
border-top: 1px solid #eee;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
font-size: 0.9em;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus {
|
||
border-color: var(--primary-color);
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||
}
|
||
|
||
/* 文件卡片增强 */
|
||
.file-card {
|
||
position: relative;
|
||
}
|
||
|
||
.file-card.folder {
|
||
border-left: 4px solid #ffc107;
|
||
background: linear-gradient(135deg, rgba(255, 193, 7, 0.02) 0%, rgba(255, 193, 7, 0.05) 100%);
|
||
}
|
||
|
||
.file-card.folder .file-icon {
|
||
background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.25) 100%);
|
||
color: #ffc107;
|
||
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
|
||
}
|
||
|
||
.file-card.folder:hover {
|
||
border-left-color: #e0a800;
|
||
background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.08) 100%);
|
||
}
|
||
|
||
.move-btn {
|
||
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
|
||
color: white;
|
||
}
|
||
|
||
.rename-btn {
|
||
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
|
||
color: white;
|
||
}
|
||
|
||
/* 紧凑布局样式 */
|
||
.files-grid.compact {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-card.compact {
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-height: 60px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.file-card.compact::before {
|
||
height: 2px;
|
||
}
|
||
|
||
.file-card.compact:hover {
|
||
transform: translateY(-1px) scale(1.005);
|
||
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.file-card.compact .file-header {
|
||
flex: 1;
|
||
margin-bottom: 0;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.file-card.compact .file-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
font-size: 14px;
|
||
margin-bottom: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 紧凑模式下的文件类型样式 */
|
||
.file-card.compact .file-icon.image {
|
||
background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.2) 100%);
|
||
color: #4caf50;
|
||
}
|
||
|
||
.file-card.compact .file-icon.video {
|
||
background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
|
||
color: #f44336;
|
||
}
|
||
|
||
.file-card.compact .file-icon.audio {
|
||
background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.2) 100%);
|
||
color: #9c27b0;
|
||
}
|
||
|
||
.file-card.compact .file-icon.pdf {
|
||
background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
|
||
color: #f44336;
|
||
}
|
||
|
||
.file-card.compact .file-icon.archive {
|
||
background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.2) 100%);
|
||
color: #ff9800;
|
||
}
|
||
|
||
.file-card.compact .file-icon.code {
|
||
background: linear-gradient(135deg, rgba(96, 125, 139, 0.1) 0%, rgba(96, 125, 139, 0.2) 100%);
|
||
color: #607d8b;
|
||
}
|
||
|
||
.file-card.compact .file-icon.document {
|
||
background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.2) 100%);
|
||
color: #2196f3;
|
||
}
|
||
|
||
.file-card.compact .play-overlay {
|
||
width: 18px;
|
||
height: 18px;
|
||
font-size: 8px;
|
||
}
|
||
|
||
.file-card.compact .file-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.file-card.compact .file-name {
|
||
font-size: 0.95em;
|
||
margin-bottom: 2px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.file-card.compact .file-uploader {
|
||
font-size: 0.8em;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.file-card.compact .file-comment {
|
||
font-size: 0.8em;
|
||
margin: 2px 0 0 0;
|
||
padding: 2px 6px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.file-card.compact .file-info {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin: 0;
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.file-card.compact .file-info div {
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.file-card.compact .file-actions {
|
||
margin: 0;
|
||
flex-direction: row;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.file-card.compact .download-btn,
|
||
.file-card.compact .delete-btn,
|
||
.file-card.compact .move-btn,
|
||
.file-card.compact .rename-btn {
|
||
padding: 6px 10px;
|
||
font-size: 0.8em;
|
||
min-width: auto;
|
||
max-width: auto;
|
||
flex: none;
|
||
}
|
||
|
||
.file-card.compact .download-btn i,
|
||
.file-card.compact .delete-btn i,
|
||
.file-card.compact .move-btn i,
|
||
.file-card.compact .rename-btn i {
|
||
margin-right: 3px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
/* 紧凑模式下的文件夹样式 */
|
||
.file-card.compact.folder {
|
||
border-left-width: 3px;
|
||
}
|
||
|
||
/* 移动端适配增强 */
|
||
@media (max-width: 768px) {
|
||
.file-toolbar {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.toolbar-left,
|
||
.toolbar-right {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
max-width: 200px;
|
||
}
|
||
|
||
.sort-controls {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.modal {
|
||
margin: 20px;
|
||
width: calc(100% - 40px);
|
||
}
|
||
|
||
/* 移动端紧凑布局优化 */
|
||
.file-card.compact {
|
||
padding: 10px 12px;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
min-height: auto;
|
||
}
|
||
|
||
.file-card.compact .file-header {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.file-card.compact .file-info {
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.file-card.compact .file-actions {
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-card.compact .download-btn,
|
||
.file-card.compact .delete-btn,
|
||
.file-card.compact .move-btn,
|
||
.file-card.compact .rename-btn {
|
||
flex: 1;
|
||
min-width: 80px;
|
||
max-width: 120px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="nav-bar">
|
||
<div class="nav-top-row">
|
||
<h1>
|
||
<img src="/image/logo2.png" alt="Logo">
|
||
内网文件传输
|
||
</h1>
|
||
<div class="user-info" id="userInfo" style="display: none;">
|
||
<div class="user-avatar" id="userAvatar"></div>
|
||
<div class="user-details">
|
||
<p class="user-name" id="userName">用户</p>
|
||
<p class="user-role" id="userRole">IP: <span id="userIP">-</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-bottom-row">
|
||
<div class="mobile-switches">
|
||
<label class="quick-upload-switch">
|
||
<input type="checkbox" id="quickUploadToggle">
|
||
<span class="switch-label">快速上传</span>
|
||
<span class="switch-slider"></span>
|
||
</label>
|
||
<label class="quick-upload-switch">
|
||
<input type="checkbox" id="skipValidationToggle">
|
||
<span class="switch-label">跳过文件名检查</span>
|
||
<span class="switch-slider"></span>
|
||
</label>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="/"><i class="fas fa-home"></i> 首页</a>
|
||
<a href="/chat"><i class="fas fa-comments"></i> 聊天室</a>
|
||
<!-- //// / -->
|
||
<a href="#" onclick="showInternalAssets()"><i class="fas fa-network-wired"></i> 内网资产</a>
|
||
<a href="http://6.6.6.86:3321" target="_blank"><i class="fas fa-code-branch"></i> gitea代码仓库</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文件管理工具栏 -->
|
||
<div class="file-toolbar">
|
||
<div class="toolbar-left">
|
||
<div class="breadcrumb" id="breadcrumb">
|
||
<a href="#" onclick="navigateToFolder('')">
|
||
<i class="fas fa-home"></i> 根目录
|
||
</a>
|
||
</div>
|
||
<button class="btn btn-secondary" id="backBtn" onclick="goBack()" style="display: none;">
|
||
<i class="fas fa-arrow-left"></i> 返回上级
|
||
</button>
|
||
<button class="btn btn-primary" onclick="showCreateFolderDialog()">
|
||
<i class="fas fa-folder-plus"></i> 新建文件夹
|
||
</button>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<div class="search-box">
|
||
<input type="text" id="searchInput" placeholder="搜索文件名或上传者..." onkeyup="handleSearch(event)">
|
||
<i class="fas fa-search"></i>
|
||
</div>
|
||
<div class="sort-controls">
|
||
<select id="sortBy" onchange="applySortAndSearch()">
|
||
<option value="name">按名称排序</option>
|
||
<option value="time">按时间排序</option>
|
||
<option value="uploader_ip">按上传者排序</option>
|
||
<option value="size">按大小排序</option>
|
||
</select>
|
||
<button class="sort-order-btn" id="sortOrderBtn" onclick="toggleSortOrder()">
|
||
<i class="fas fa-sort-alpha-down"></i>
|
||
</button>
|
||
<button class="layout-toggle-btn" id="layoutToggleBtn" onclick="toggleLayout()" title="切换布局模式">
|
||
<i class="fas fa-th-large"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="upload-section">
|
||
<div class="upload-zone" id="dropZone">
|
||
<i class="fas fa-cloud-upload-alt upload-icon"></i>
|
||
<h2>拖拽文件或文件夹到这里上传</h2>
|
||
<p class="upload-text">支持多文件和文件夹上传</p>
|
||
<div class="upload-buttons">
|
||
<button type="button" class="upload-btn-style" onclick="selectFiles()">
|
||
<i class="fas fa-file"></i> 选择文件
|
||
</button>
|
||
<button type="button" class="upload-btn-style" onclick="selectFolder()">
|
||
<i class="fas fa-folder"></i> 选择文件夹
|
||
</button>
|
||
</div>
|
||
<input type="file" id="fileInput" class="file-input" multiple>
|
||
<input type="file" id="folderInput" class="file-input" multiple webkitdirectory style="display: none;">
|
||
</div>
|
||
<div class="upload-preview" id="uploadPreview" style="display: none;">
|
||
<div class="preview-header">
|
||
<h3>准备上传</h3>
|
||
<button class="clear-btn" onclick="clearPreview()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="preview-files" id="previewFiles"></div>
|
||
<div class="preview-actions">
|
||
<button class="batch-rename-btn" onclick="showBatchRenameDialog()" title="批量重命名">
|
||
<i class="fas fa-edit"></i> 批量重命名
|
||
</button>
|
||
<button class="upload-all-btn" onclick="uploadAllFiles()">
|
||
<i class="fas fa-cloud-upload-alt"></i> 开始上传
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="files-grid" id="fileList">
|
||
<!-- 文件列表将通过 JavaScript 动态添加 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<!-- 媒体预览模态框 -->
|
||
<div class="media-preview-modal" id="mediaPreviewModal">
|
||
<div class="media-preview-content" id="mediaPreviewContent">
|
||
<button class="media-close-btn" onclick="closeMediaPreview()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
<div id="mediaContainer"></div>
|
||
<div class="media-info" id="mediaInfo" style="display: none;">
|
||
<h3 id="mediaTitle"></h3>
|
||
<p id="mediaDetails"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建文件夹对话框 -->
|
||
<div class="modal-overlay" id="createFolderModal" style="display: none;">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>创建新文件夹</h3>
|
||
<button class="close-btn" onclick="hideCreateFolderDialog()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label for="folderNameInput">文件夹名称：</label>
|
||
<input type="text" id="folderNameInput" placeholder="请输入文件夹名称" maxlength="50">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="hideCreateFolderDialog()">取消</button>
|
||
<button class="btn btn-primary" onclick="createFolder()">创建</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动文件对话框 -->
|
||
<div class="modal-overlay" id="moveFileModal" style="display: none;">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>移动文件</h3>
|
||
<button class="close-btn" onclick="hideMoveFileDialog()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>将文件 "<span id="moveFileName"></span>" 移动到：</p>
|
||
<div class="form-group">
|
||
<label for="targetFolderSelect">目标文件夹：</label>
|
||
<select id="targetFolderSelect">
|
||
<option value="">根目录</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="hideMoveFileDialog()">取消</button>
|
||
<button class="btn btn-primary" onclick="confirmMoveFile()">移动</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重命名文件对话框 -->
|
||
<div class="modal-overlay" id="renameFileModal" style="display: none;">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>重命名文件</h3>
|
||
<button class="close-btn" onclick="hideRenameFileDialog()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>当前文件名：<span id="currentFileName"></span></p>
|
||
<div class="form-group">
|
||
<label for="newFileNameInput">新文件名：</label>
|
||
<input type="text" id="newFileNameInput" placeholder="请输入新文件名" maxlength="100">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="hideRenameFileDialog()">取消</button>
|
||
<button class="btn btn-primary" onclick="confirmRenameFile()">重命名</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重命名文件夹对话框 -->
|
||
<div class="modal-overlay" id="renameFolderModal" style="display: none;">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>重命名文件夹</h3>
|
||
<button class="close-btn" onclick="hideRenameFolderDialog()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>当前文件夹名：<span id="currentFolderName"></span></p>
|
||
<div class="form-group">
|
||
<label for="newFolderNameInput">新文件夹名：</label>
|
||
<input type="text" id="newFolderNameInput" placeholder="请输入新文件夹名" maxlength="50">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="hideRenameFolderDialog()">取消</button>
|
||
<button class="btn btn-primary" onclick="confirmRenameFolder()">重命名</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量重命名对话框 -->
|
||
<div class="modal-overlay" id="batchRenameModal" style="display: none;">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>批量重命名</h3>
|
||
<button class="close-btn" onclick="hideBatchRenameDialog()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label for="renamePattern">命名模式：</label>
|
||
<select id="renamePattern" onchange="updateRenamePreview()">
|
||
<option value="sequential">序号命名 (文件1, 文件2, ...)</option>
|
||
<option value="timestamp">时间戳命名</option>
|
||
<option value="prefix">添加前缀</option>
|
||
<option value="suffix">添加后缀</option>
|
||
<option value="custom">自定义模式</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group" id="customInputGroup" style="display: none;">
|
||
<label for="customInput">自定义内容：</label>
|
||
<input type="text" id="customInput" placeholder="输入前缀/后缀/自定义模式" oninput="updateRenamePreview()">
|
||
<small>自定义模式支持：{name} = 原文件名, {index} = 序号, {ext} = 扩展名</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>预览效果：</label>
|
||
<div id="renamePreview" class="rename-preview"></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="hideBatchRenameDialog()">取消</button>
|
||
<button class="btn btn-primary" onclick="applyBatchRename()">应用</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 文件类型检测和图标映射
|
||
function getFileType(filename) {
|
||
const ext = filename.toLowerCase().split('.').pop();
|
||
|
||
// 图片文件
|
||
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(ext)) {
|
||
return 'image';
|
||
}
|
||
|
||
// 视频文件
|
||
if (['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'm4v', '3gp'].includes(ext)) {
|
||
return 'video';
|
||
}
|
||
|
||
// 音频文件
|
||
if (['mp3', 'wav', 'flac', 'aac', 'ogg', 'wma', 'm4a', 'opus'].includes(ext)) {
|
||
return 'audio';
|
||
}
|
||
|
||
// PDF文件
|
||
if (ext === 'pdf') {
|
||
return 'pdf';
|
||
}
|
||
|
||
// 压缩文件
|
||
if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz'].includes(ext)) {
|
||
return 'archive';
|
||
}
|
||
|
||
// 代码文件
|
||
if (['js', 'ts', 'py', 'java', 'cpp', 'c', 'h', 'css', 'html', 'php', 'rb', 'go', 'rs', 'swift'].includes(ext)) {
|
||
return 'code';
|
||
}
|
||
|
||
// 文档文件
|
||
if (['doc', 'docx', 'txt', 'rtf', 'odt', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
|
||
return 'document';
|
||
}
|
||
|
||
return 'file';
|
||
}
|
||
|
||
function getFileIcon(fileType) {
|
||
const iconMap = {
|
||
'image': 'fa-image',
|
||
'video': 'fa-video',
|
||
'audio': 'fa-music',
|
||
'pdf': 'fa-file-pdf',
|
||
'archive': 'fa-file-archive',
|
||
'code': 'fa-code',
|
||
'document': 'fa-file-alt',
|
||
'file': 'fa-file'
|
||
};
|
||
return iconMap[fileType] || 'fa-file';
|
||
}
|
||
|
||
function canPreview(fileType) {
|
||
return ['image', 'video', 'audio'].includes(fileType);
|
||
}
|
||
|
||
// 媒体预览功能
|
||
function openMediaPreview(filePath, fileName, fileType) {
|
||
const modal = document.getElementById('mediaPreviewModal');
|
||
const container = document.getElementById('mediaContainer');
|
||
const info = document.getElementById('mediaInfo');
|
||
const title = document.getElementById('mediaTitle');
|
||
const details = document.getElementById('mediaDetails');
|
||
|
||
// 清空容器
|
||
container.innerHTML = '';
|
||
|
||
let mediaElement;
|
||
const fileUrl = `/uploads/${filePath}`;
|
||
|
||
if (fileType === 'image') {
|
||
mediaElement = document.createElement('img');
|
||
mediaElement.src = fileUrl;
|
||
mediaElement.alt = fileName;
|
||
mediaElement.onload = function() {
|
||
details.textContent = `分辨率: ${this.naturalWidth} × ${this.naturalHeight}`;
|
||
};
|
||
} else if (fileType === 'video') {
|
||
mediaElement = document.createElement('video');
|
||
mediaElement.src = fileUrl;
|
||
mediaElement.controls = true;
|
||
mediaElement.autoplay = false;
|
||
mediaElement.onloadedmetadata = function() {
|
||
const duration = Math.round(this.duration);
|
||
const minutes = Math.floor(duration / 60);
|
||
const seconds = duration % 60;
|
||
details.textContent = `时长: ${minutes}:${seconds.toString().padStart(2, '0')} | 分辨率: ${this.videoWidth} × ${this.videoHeight}`;
|
||
};
|
||
} else if (fileType === 'audio') {
|
||
// 创建音频预览容器
|
||
const audioContainer = document.createElement('div');
|
||
audioContainer.className = 'audio-preview-container';
|
||
|
||
// 音频图标
|
||
const audioIcon = document.createElement('div');
|
||
audioIcon.className = 'audio-preview-icon';
|
||
audioIcon.innerHTML = '<i class="fas fa-music"></i>';
|
||
|
||
// 文件标题
|
||
const audioTitle = document.createElement('div');
|
||
audioTitle.className = 'audio-preview-title';
|
||
audioTitle.textContent = fileName;
|
||
|
||
// 文件详情
|
||
const audioDetails = document.createElement('div');
|
||
audioDetails.className = 'audio-preview-details';
|
||
audioDetails.textContent = '正在加载音频信息...';
|
||
|
||
// 音频播放器
|
||
mediaElement = document.createElement('audio');
|
||
mediaElement.className = 'audio-preview-player';
|
||
mediaElement.src = fileUrl;
|
||
mediaElement.controls = true;
|
||
mediaElement.autoplay = false;
|
||
mediaElement.preload = 'metadata';
|
||
mediaElement.controlsList = 'nodownload';
|
||
|
||
// 确保控件显示
|
||
mediaElement.setAttribute('controls', 'controls');
|
||
mediaElement.style.display = 'block';
|
||
mediaElement.style.width = '100%';
|
||
mediaElement.style.height = '54px';
|
||
|
||
// 添加加载状态
|
||
let isLoading = true;
|
||
let loadTimeout = setTimeout(() => {
|
||
if (isLoading) {
|
||
audioDetails.innerHTML = '<i class="fas fa-spinner"></i> 加载中...';
|
||
audioDetails.className = 'audio-preview-details audio-loading';
|
||
}
|
||
}, 500);
|
||
|
||
mediaElement.onloadedmetadata = function() {
|
||
isLoading = false;
|
||
clearTimeout(loadTimeout);
|
||
audioDetails.className = 'audio-preview-details';
|
||
|
||
const duration = Math.round(this.duration);
|
||
const minutes = Math.floor(duration / 60);
|
||
const seconds = duration % 60;
|
||
audioDetails.textContent = `时长: ${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||
};
|
||
|
||
mediaElement.onerror = function(e) {
|
||
isLoading = false;
|
||
clearTimeout(loadTimeout);
|
||
audioDetails.className = 'audio-preview-details audio-error';
|
||
audioDetails.innerHTML = '<i class="fas fa-exclamation-triangle"></i>音频文件加载失败<br><small>请检查文件格式或网络连接</small>';
|
||
|
||
// 隐藏播放器控件
|
||
mediaElement.style.display = 'none';
|
||
};
|
||
|
||
mediaElement.onloadstart = function() {
|
||
audioDetails.textContent = '正在加载音频信息...';
|
||
audioDetails.className = 'audio-preview-details';
|
||
};
|
||
|
||
mediaElement.oncanplay = function() {
|
||
isLoading = false;
|
||
clearTimeout(loadTimeout);
|
||
|
||
if (audioDetails.textContent.includes('加载')) {
|
||
const duration = Math.round(this.duration);
|
||
const minutes = Math.floor(duration / 60);
|
||
const seconds = duration % 60;
|
||
audioDetails.textContent = `时长: ${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||
audioDetails.className = 'audio-preview-details';
|
||
}
|
||
|
||
// 确保控件可见
|
||
setTimeout(() => {
|
||
if (mediaElement.offsetHeight < 30 || !mediaElement.controls) {
|
||
// 如果原生控件有问题，显示自定义控件
|
||
customControls.style.display = 'flex';
|
||
mediaElement.style.display = 'none';
|
||
} else {
|
||
// 原生控件正常，确保它们可见
|
||
mediaElement.style.display = 'block';
|
||
}
|
||
}, 500);
|
||
};
|
||
|
||
// 设置超时处理
|
||
setTimeout(() => {
|
||
if (isLoading && mediaElement.readyState === 0) {
|
||
isLoading = false;
|
||
clearTimeout(loadTimeout);
|
||
audioDetails.className = 'audio-preview-details audio-error';
|
||
audioDetails.innerHTML = '<i class="fas fa-exclamation-triangle"></i>音频加载超时<br><small>请检查网络连接后重试</small>';
|
||
mediaElement.style.display = 'none';
|
||
}
|
||
}, 10000); // 10秒超时
|
||
|
||
// 创建自定义控制按钮
|
||
const customControls = document.createElement('div');
|
||
customControls.className = 'audio-custom-controls';
|
||
customControls.style.display = 'none'; // 默认隐藏，仅在原生控件有问题时显示
|
||
|
||
const playBtn = document.createElement('button');
|
||
playBtn.className = 'audio-play-btn';
|
||
playBtn.innerHTML = '<i class="fas fa-play"></i>';
|
||
|
||
const timeDisplay = document.createElement('div');
|
||
timeDisplay.className = 'audio-time-display';
|
||
timeDisplay.textContent = '0:00 / 0:00';
|
||
|
||
const volumeControl = document.createElement('div');
|
||
volumeControl.className = 'audio-volume-control';
|
||
volumeControl.innerHTML = `
|
||
<i class="fas fa-volume-up" style="color: #9c27b0; font-size: 16px;"></i>
|
||
<input type="range" class="audio-volume-slider" min="0" max="100" value="100">
|
||
`;
|
||
|
||
customControls.appendChild(playBtn);
|
||
customControls.appendChild(timeDisplay);
|
||
customControls.appendChild(volumeControl);
|
||
|
||
// 播放/暂停功能
|
||
let isPlaying = false;
|
||
playBtn.onclick = function() {
|
||
if (isPlaying) {
|
||
mediaElement.pause();
|
||
playBtn.innerHTML = '<i class="fas fa-play"></i>';
|
||
isPlaying = false;
|
||
} else {
|
||
mediaElement.play();
|
||
playBtn.innerHTML = '<i class="fas fa-pause"></i>';
|
||
isPlaying = true;
|
||
}
|
||
};
|
||
|
||
// 音量控制
|
||
const volumeSlider = volumeControl.querySelector('.audio-volume-slider');
|
||
volumeSlider.oninput = function() {
|
||
mediaElement.volume = this.value / 100;
|
||
};
|
||
|
||
// 时间更新
|
||
mediaElement.ontimeupdate = function() {
|
||
const current = Math.floor(this.currentTime);
|
||
const duration = Math.floor(this.duration) || 0;
|
||
const currentMin = Math.floor(current / 60);
|
||
const currentSec = current % 60;
|
||
const durationMin = Math.floor(duration / 60);
|
||
const durationSec = duration % 60;
|
||
timeDisplay.textContent = `${currentMin}:${currentSec.toString().padStart(2, '0')} / ${durationMin}:${durationSec.toString().padStart(2, '0')}`;
|
||
};
|
||
|
||
// 播放结束
|
||
mediaElement.onended = function() {
|
||
playBtn.innerHTML = '<i class="fas fa-play"></i>';
|
||
isPlaying = false;
|
||
};
|
||
|
||
// 检查原生控件是否工作
|
||
setTimeout(() => {
|
||
const computedStyle = window.getComputedStyle(mediaElement);
|
||
if (computedStyle.height === '0px' || mediaElement.offsetHeight < 30) {
|
||
// 原生控件可能有问题，显示自定义控件
|
||
customControls.style.display = 'flex';
|
||
mediaElement.style.display = 'none';
|
||
}
|
||
}, 1000);
|
||
|
||
// 组装容器
|
||
audioContainer.appendChild(audioIcon);
|
||
audioContainer.appendChild(audioTitle);
|
||
audioContainer.appendChild(audioDetails);
|
||
audioContainer.appendChild(mediaElement);
|
||
audioContainer.appendChild(customControls);
|
||
|
||
container.appendChild(audioContainer);
|
||
|
||
// 不使用默认的info显示
|
||
info.style.display = 'none';
|
||
modal.classList.add('active');
|
||
|
||
// 点击模态框背景关闭
|
||
modal.onclick = function(e) {
|
||
if (e.target === modal) {
|
||
closeMediaPreview();
|
||
}
|
||
};
|
||
|
||
// ESC键关闭
|
||
document.addEventListener('keydown', handleEscapeKey);
|
||
return; // 提前返回，不执行下面的通用逻辑
|
||
}
|
||
|
||
if (mediaElement) {
|
||
container.appendChild(mediaElement);
|
||
title.textContent = fileName;
|
||
info.style.display = 'block';
|
||
modal.classList.add('active');
|
||
|
||
// 点击模态框背景关闭
|
||
modal.onclick = function(e) {
|
||
if (e.target === modal) {
|
||
closeMediaPreview();
|
||
}
|
||
};
|
||
|
||
// ESC键关闭
|
||
document.addEventListener('keydown', handleEscapeKey);
|
||
}
|
||
}
|
||
|
||
function closeMediaPreview() {
|
||
const modal = document.getElementById('mediaPreviewModal');
|
||
const container = document.getElementById('mediaContainer');
|
||
|
||
modal.classList.remove('active');
|
||
|
||
// 停止所有媒体播放
|
||
container.querySelectorAll('video, audio').forEach(media => {
|
||
media.pause();
|
||
media.currentTime = 0;
|
||
});
|
||
|
||
// 移除ESC键监听
|
||
document.removeEventListener('keydown', handleEscapeKey);
|
||
|
||
// 延迟清空内容，等待动画完成
|
||
setTimeout(() => {
|
||
container.innerHTML = '';
|
||
}, 300);
|
||
}
|
||
|
||
function handleEscapeKey(e) {
|
||
if (e.key === 'Escape') {
|
||
closeMediaPreview();
|
||
}
|
||
}
|
||
|
||
// 生成文件缩略图
|
||
function generateThumbnail(filePath, fileName, fileType, iconElement) {
|
||
if (fileType === 'image') {
|
||
const img = document.createElement('img');
|
||
img.className = 'file-thumbnail';
|
||
img.src = `/uploads/${filePath}`;
|
||
img.onload = function() {
|
||
this.classList.add('loaded');
|
||
iconElement.classList.add('has-preview');
|
||
};
|
||
img.onerror = function() {
|
||
console.log('Failed to load thumbnail for:', fileName);
|
||
};
|
||
iconElement.appendChild(img);
|
||
} else if (fileType === 'video') {
|
||
// 对于视频，我们可以尝试生成第一帧缩略图
|
||
const video = document.createElement('video');
|
||
video.src = `/uploads/${filePath}`;
|
||
video.muted = true;
|
||
video.preload = 'metadata';
|
||
video.style.display = 'none';
|
||
|
||
video.onloadedmetadata = function() {
|
||
// 设置到视频的10%位置获取缩略图
|
||
this.currentTime = Math.max(1, this.duration * 0.1);
|
||
};
|
||
|
||
video.onseeked = function() {
|
||
try {
|
||
const canvas = document.createElement('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
canvas.width = 48;
|
||
canvas.height = 48;
|
||
|
||
// 计算缩放比例以适应正方形
|
||
const scale = Math.min(48 / this.videoWidth, 48 / this.videoHeight);
|
||
const width = this.videoWidth * scale;
|
||
const height = this.videoHeight * scale;
|
||
const x = (48 - width) / 2;
|
||
const y = (48 - height) / 2;
|
||
|
||
ctx.drawImage(this, x, y, width, height);
|
||
|
||
const img = document.createElement('img');
|
||
img.className = 'file-thumbnail';
|
||
img.src = canvas.toDataURL();
|
||
img.onload = function() {
|
||
this.classList.add('loaded');
|
||
iconElement.classList.add('has-preview');
|
||
};
|
||
iconElement.appendChild(img);
|
||
|
||
// 添加播放按钮
|
||
const playBtn = document.createElement('button');
|
||
playBtn.className = 'play-overlay';
|
||
playBtn.innerHTML = '<i class="fas fa-play"></i>';
|
||
playBtn.onclick = function(e) {
|
||
e.stopPropagation();
|
||
openMediaPreview(filePath, fileName, fileType);
|
||
};
|
||
iconElement.appendChild(playBtn);
|
||
|
||
// 移除视频元素
|
||
video.remove();
|
||
} catch (error) {
|
||
console.log('Failed to generate video thumbnail:', error);
|
||
video.remove();
|
||
}
|
||
};
|
||
|
||
video.onerror = function() {
|
||
console.log('Failed to load video for thumbnail:', fileName);
|
||
video.remove();
|
||
};
|
||
|
||
// 添加到DOM中（隐藏状态）
|
||
document.body.appendChild(video);
|
||
} else if (fileType === 'audio') {
|
||
// 为音频文件添加播放按钮
|
||
const playBtn = document.createElement('button');
|
||
playBtn.className = 'play-overlay';
|
||
playBtn.innerHTML = '<i class="fas fa-play"></i>';
|
||
playBtn.onclick = function(e) {
|
||
e.stopPropagation();
|
||
openMediaPreview(filePath, fileName, fileType);
|
||
};
|
||
iconElement.appendChild(playBtn);
|
||
iconElement.classList.add('has-preview');
|
||
}
|
||
}
|
||
|
||
const dropZone = document.getElementById('dropZone');
|
||
const fileInput = document.getElementById('fileInput');
|
||
const progressBar = document.getElementById('progressBar');
|
||
const progress = document.getElementById('progress');
|
||
const toast = document.getElementById('toast');
|
||
|
||
// 拖拽相关事件
|
||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||
dropZone.addEventListener(eventName, preventDefaults, false);
|
||
document.body.addEventListener(eventName, preventDefaults, false);
|
||
});
|
||
|
||
// 防止按钮区域的拖拽事件影响
|
||
const uploadButtons = document.querySelector('.upload-buttons');
|
||
if (uploadButtons) {
|
||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||
uploadButtons.addEventListener(eventName, function(e) {
|
||
e.stopPropagation();
|
||
}, false);
|
||
});
|
||
}
|
||
|
||
function preventDefaults(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
['dragenter', 'dragover'].forEach(eventName => {
|
||
dropZone.addEventListener(eventName, highlight, false);
|
||
});
|
||
|
||
['dragleave', 'drop'].forEach(eventName => {
|
||
dropZone.addEventListener(eventName, unhighlight, false);
|
||
});
|
||
|
||
function highlight(e) {
|
||
dropZone.classList.add('drag-over');
|
||
}
|
||
|
||
function unhighlight(e) {
|
||
dropZone.classList.remove('drag-over');
|
||
}
|
||
|
||
dropZone.addEventListener('drop', handleDrop, false);
|
||
|
||
function handleDrop(e) {
|
||
const dt = e.dataTransfer;
|
||
const files = dt.files;
|
||
|
||
// 检查是否包含文件夹
|
||
const filesArray = Array.from(files);
|
||
const hasDirectoryItems = Array.from(dt.items).some(item =>
|
||
item.webkitGetAsEntry && item.webkitGetAsEntry().isDirectory
|
||
);
|
||
|
||
if (hasDirectoryItems) {
|
||
handleDirectoryDrop(dt);
|
||
} else {
|
||
handleFiles(files);
|
||
}
|
||
}
|
||
|
||
// 处理文件夹拖拽
|
||
async function handleDirectoryDrop(dataTransfer) {
|
||
const items = Array.from(dataTransfer.items);
|
||
const allFiles = [];
|
||
|
||
for (const item of items) {
|
||
if (item.webkitGetAsEntry) {
|
||
const entry = item.webkitGetAsEntry();
|
||
if (entry) {
|
||
const files = await processEntry(entry);
|
||
allFiles.push(...files);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (allFiles.length > 0) {
|
||
handleFolderFiles(allFiles);
|
||
}
|
||
}
|
||
|
||
// 递归处理目录条目
|
||
function processEntry(entry, path = '') {
|
||
return new Promise((resolve) => {
|
||
if (entry.isFile) {
|
||
entry.file((file) => {
|
||
// 设置文件的相对路径
|
||
file.webkitRelativePath = path + entry.name;
|
||
resolve([file]);
|
||
});
|
||
} else if (entry.isDirectory) {
|
||
const dirReader = entry.createReader();
|
||
dirReader.readEntries(async (entries) => {
|
||
const allFiles = [];
|
||
for (const childEntry of entries) {
|
||
const childFiles = await processEntry(childEntry, path + entry.name + '/');
|
||
allFiles.push(...childFiles);
|
||
}
|
||
resolve(allFiles);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
fileInput.addEventListener('change', function(e) {
|
||
console.log('Files selected, files count:', this.files.length);
|
||
if (this.files.length > 0) {
|
||
handleFiles(this.files);
|
||
// 清空输入，允许重复选择同一文件
|
||
this.value = '';
|
||
}
|
||
});
|
||
|
||
// 添加文件夹输入事件
|
||
document.getElementById('folderInput').addEventListener('change', function(e) {
|
||
console.log('Folder selected, files count:', this.files.length);
|
||
if (this.files.length > 0) {
|
||
handleFolderFiles(this.files);
|
||
// 清空输入，允许重复选择同一文件夹
|
||
this.value = '';
|
||
}
|
||
});
|
||
|
||
// 存储待上传文件的数组
|
||
let pendingFiles = [];
|
||
|
||
// 全局变量
|
||
let currentFolder = '';
|
||
let currentSortBy = 'name';
|
||
let currentSortOrder = 'asc';
|
||
let currentSearch = '';
|
||
let folderList = []; // 用于存储文件夹列表
|
||
let currentMoveFile = null; // 当前要移动的文件
|
||
let currentRenameFile = null; // 当前要重命名的文件
|
||
let currentRenameFolder = null; // 当前要重命名的文件夹
|
||
let isCompactLayout = false; // 是否为紧凑布局
|
||
|
||
// 添加上传进度管理
|
||
class UploadProgress {
|
||
constructor(file, isQuickUpload = false) {
|
||
this.file = file;
|
||
this.startTime = Date.now();
|
||
this.lastLoaded = 0;
|
||
this.lastTime = this.startTime;
|
||
this.aborted = false;
|
||
this.xhr = null; // 存储 XMLHttpRequest 对象
|
||
this.createProgressElement(isQuickUpload);
|
||
}
|
||
|
||
createProgressElement(isQuickUpload) {
|
||
const container = document.createElement('div');
|
||
container.className = 'file-progress';
|
||
container.innerHTML = `
|
||
<div class="progress-header">
|
||
<div class="progress-filename">${this.file.name}</div>
|
||
<div class="progress-stats">
|
||
<span class="progress-percentage">0%</span>
|
||
<span class="progress-size">0/${this.formatSize(this.file.size)}</span>
|
||
<button class="cancel-upload-btn">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="progress-bar-outer">
|
||
<div class="progress-bar-inner"></div>
|
||
</div>
|
||
<div class="upload-speed">准备上传...</div>
|
||
`;
|
||
|
||
// 添加取消按钮事件监听
|
||
const cancelBtn = container.querySelector('.cancel-upload-btn');
|
||
cancelBtn.addEventListener('click', () => this.cancelUpload());
|
||
|
||
const progressContainer = document.getElementById('uploadProgressContainer');
|
||
if (progressContainer) {
|
||
progressContainer.appendChild(container);
|
||
progressContainer.style.display = 'block';
|
||
}
|
||
|
||
this.element = container;
|
||
this.progressBar = container.querySelector('.progress-bar-inner');
|
||
this.percentageEl = container.querySelector('.progress-percentage');
|
||
this.sizeEl = container.querySelector('.progress-size');
|
||
this.speedEl = container.querySelector('.upload-speed');
|
||
}
|
||
|
||
setXHR(xhr) {
|
||
this.xhr = xhr;
|
||
}
|
||
|
||
cancelUpload() {
|
||
if (this.xhr) {
|
||
this.aborted = true;
|
||
this.xhr.abort();
|
||
this.element.classList.add('upload-cancelled');
|
||
this.speedEl.textContent = '上传已取消';
|
||
|
||
// 使用 Promise 和 setTimeout 确保动画完成后再移除元素
|
||
const removeElement = () => {
|
||
return new Promise(resolve => {
|
||
setTimeout(() => {
|
||
if (this.element && this.element.parentNode) {
|
||
this.element.remove();
|
||
|
||
// 检查是否需要隐藏容器
|
||
const container = document.getElementById('uploadProgressContainer');
|
||
if (container && container.children.length === 0) {
|
||
container.style.display = 'none';
|
||
}
|
||
}
|
||
resolve();
|
||
}, 1000);
|
||
});
|
||
};
|
||
|
||
// 执行移除操作
|
||
removeElement().catch(console.error);
|
||
}
|
||
}
|
||
|
||
updateProgress(loaded) {
|
||
const now = Date.now();
|
||
const timeElapsed = (now - this.lastTime) / 1000;
|
||
const loadedDiff = loaded - this.lastLoaded;
|
||
|
||
// 计算平均速度（使用移动平均）
|
||
const instantSpeed = timeElapsed > 0 ? loadedDiff / timeElapsed : 0;
|
||
this.speeds = this.speeds || [];
|
||
this.speeds.push(instantSpeed);
|
||
if (this.speeds.length > 5) this.speeds.shift();
|
||
const avgSpeed = this.speeds.reduce((a, b) => a + b, 0) / this.speeds.length;
|
||
|
||
// 更新进度显示
|
||
const progress = (loaded / this.file.size) * 100;
|
||
this.progressBar.style.width = `${progress}%`;
|
||
this.percentageEl.textContent = `${Math.round(progress)}%`;
|
||
this.sizeEl.textContent = `${this.formatSize(loaded)}/${this.formatSize(this.file.size)}`;
|
||
|
||
// 计算剩余时间
|
||
const remaining = (this.file.size - loaded) / avgSpeed;
|
||
const remainingText = this.formatTime(remaining);
|
||
|
||
// 更新速度显示
|
||
if (timeElapsed >= 0.5) {
|
||
this.speedEl.textContent = `速度: ${this.formatSpeed(avgSpeed)} - 剩余时间: ${remainingText}`;
|
||
this.lastLoaded = loaded;
|
||
this.lastTime = now;
|
||
}
|
||
}
|
||
|
||
formatTime(seconds) {
|
||
if (!isFinite(seconds) || seconds < 0) return '计算中...';
|
||
if (seconds < 60) return `${Math.round(seconds)}秒`;
|
||
const minutes = Math.floor(seconds / 60);
|
||
return `${minutes}分${Math.round(seconds % 60)}秒`;
|
||
}
|
||
|
||
complete() {
|
||
setTimeout(() => {
|
||
this.element.remove();
|
||
// 如果没有更多进度条，隐藏容器
|
||
const container = document.getElementById('uploadProgressContainer');
|
||
if (container && container.children.length === 0) {
|
||
container.style.display = 'none';
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
formatSize(bytes) {
|
||
const units = ['B', 'KB', 'MB', 'GB'];
|
||
let size = bytes;
|
||
let unitIndex = 0;
|
||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||
size /= 1024;
|
||
unitIndex++;
|
||
}
|
||
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
||
}
|
||
|
||
formatSpeed(bytesPerSecond) {
|
||
const units = ['B/s', 'KB/s', 'MB/s', 'GB/s'];
|
||
let speed = bytesPerSecond;
|
||
let unitIndex = 0;
|
||
while (speed >= 1024 && unitIndex < units.length - 1) {
|
||
speed /= 1024;
|
||
unitIndex++;
|
||
}
|
||
return `${speed.toFixed(1)} ${units[unitIndex]}`;
|
||
}
|
||
}
|
||
|
||
// 单文件上传函数
|
||
async function uploadSingleFile(file, isQuickUpload = false, isFromFolder = false, customFilename = null) {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
// 如果是文件夹上传，需要保持相对路径结构
|
||
if (isFromFolder && file.webkitRelativePath) {
|
||
formData.append('relative_path', file.webkitRelativePath);
|
||
}
|
||
|
||
// 添加当前目录信息
|
||
if (currentFolder) {
|
||
formData.append('target_folder', currentFolder);
|
||
}
|
||
|
||
// 添加自定义文件名
|
||
if (customFilename) {
|
||
formData.append('custom_filename', customFilename);
|
||
}
|
||
|
||
return uploadFile(formData, file, isQuickUpload);
|
||
}
|
||
|
||
// 修改文件上传函数 - 移除分片上传，直接上传整个文件
|
||
async function uploadFile(formData, file, isQuickUpload = false) {
|
||
return new Promise((resolve, reject) => {
|
||
const progress = new UploadProgress(file, isQuickUpload);
|
||
const xhr = new XMLHttpRequest();
|
||
|
||
// 移除分片上传逻辑，所有文件都直接上传
|
||
// 这样可以避免大文件被切分成多个小文件
|
||
progress.setXHR(xhr);
|
||
|
||
xhr.upload.addEventListener('progress', (event) => {
|
||
if (event.lengthComputable && !progress.aborted) {
|
||
progress.updateProgress(event.loaded);
|
||
}
|
||
});
|
||
|
||
xhr.addEventListener('load', () => {
|
||
if (!progress.aborted) {
|
||
if (xhr.status === 200) {
|
||
const response = JSON.parse(xhr.responseText);
|
||
showToast('文件上传成功！');
|
||
progress.complete();
|
||
resolve(response);
|
||
} else {
|
||
showToast('上传失败：服务器错误');
|
||
progress.element.remove();
|
||
reject(new Error('Upload failed'));
|
||
}
|
||
}
|
||
});
|
||
|
||
xhr.addEventListener('error', () => {
|
||
if (!progress.aborted) {
|
||
showToast('上传失败：网络错误');
|
||
progress.element.remove();
|
||
reject(new Error('Network error'));
|
||
}
|
||
});
|
||
|
||
xhr.addEventListener('abort', () => {
|
||
reject(new Error('Upload cancelled'));
|
||
});
|
||
|
||
// 设置超时时间为30分钟，适用于大文件上传（如700MB视频）
|
||
xhr.timeout = 30 * 60 * 1000; // 30分钟超时，适应大文件传输
|
||
|
||
xhr.addEventListener('timeout', () => {
|
||
if (!progress.aborted) {
|
||
showToast('上传超时：文件过大或网络较慢，请检查网络连接');
|
||
progress.element.remove();
|
||
reject(new Error('Upload timeout'));
|
||
}
|
||
});
|
||
|
||
xhr.open('POST', '/upload', true);
|
||
xhr.send(formData);
|
||
});
|
||
}
|
||
|
||
// 修改文件处理函数
|
||
function handleFiles(files) {
|
||
const quickUpload = document.getElementById('quickUploadToggle').checked;
|
||
|
||
if (quickUpload) {
|
||
// 快速上传模式 - 直接上传，不做文件名验证
|
||
initializeProgressContainer();
|
||
Array.from(files).forEach(file => {
|
||
uploadSingleFile(file, true);
|
||
});
|
||
showToast(`快速上传模式：开始上传 ${files.length} 个文件`);
|
||
} else {
|
||
// 预览模式
|
||
pendingFiles = [...pendingFiles, ...Array.from(files)];
|
||
showPreview();
|
||
}
|
||
}
|
||
|
||
// 处理文件夹上传
|
||
function handleFolderFiles(files) {
|
||
const quickUpload = document.getElementById('quickUploadToggle').checked;
|
||
const filesArray = Array.from(files);
|
||
|
||
console.log('Processing folder files:', filesArray.length);
|
||
console.log('Files with relative paths:', filesArray.map(f => ({name: f.name, path: f.webkitRelativePath})));
|
||
|
||
if (filesArray.length === 0) {
|
||
showToast('未选择任何文件');
|
||
return;
|
||
}
|
||
|
||
// 检查文件是否有相对路径（确认是文件夹上传）
|
||
const hasRelativePaths = filesArray.some(file => file.webkitRelativePath);
|
||
if (!hasRelativePaths) {
|
||
showToast('请选择文件夹而不是单独的文件');
|
||
return;
|
||
}
|
||
|
||
showToast(`检测到文件夹，包含 ${filesArray.length} 个文件`);
|
||
|
||
if (quickUpload) {
|
||
// 快速上传模式
|
||
initializeProgressContainer();
|
||
filesArray.forEach(file => {
|
||
uploadSingleFile(file, true, true);
|
||
});
|
||
} else {
|
||
// 预览模式
|
||
pendingFiles = [...pendingFiles, ...filesArray];
|
||
showPreview();
|
||
}
|
||
}
|
||
|
||
// 选择文件函数
|
||
function selectFiles() {
|
||
console.log('Selecting files...');
|
||
document.getElementById('fileInput').click();
|
||
}
|
||
|
||
// 选择文件夹函数
|
||
function selectFolder() {
|
||
console.log('Selecting folder...');
|
||
document.getElementById('folderInput').click();
|
||
}
|
||
|
||
// 返回上级目录
|
||
function goBack() {
|
||
if (currentFolder) {
|
||
const parts = currentFolder.split('/');
|
||
parts.pop(); // 移除最后一级
|
||
const parentFolder = parts.join('/');
|
||
navigateToFolder(parentFolder);
|
||
}
|
||
}
|
||
|
||
// 自动修复文件名
|
||
function autoFixFilename(filename) {
|
||
// 替换有害字符为安全字符
|
||
let fixed = filename
|
||
.replace(/[\/\\]/g, '-') // 路径分隔符替换为连字符
|
||
.replace(/[|]/g, '_') // 管道符替换为下划线
|
||
.trim();
|
||
|
||
// 如果文件名太长，截断但保留扩展名
|
||
if (fixed.length > 300) {
|
||
const lastDotIndex = fixed.lastIndexOf('.');
|
||
if (lastDotIndex > 0) {
|
||
const extension = fixed.substring(lastDotIndex);
|
||
const nameWithoutExt = fixed.substring(0, lastDotIndex);
|
||
fixed = nameWithoutExt.substring(0, 300 - extension.length) + extension;
|
||
} else {
|
||
fixed = fixed.substring(0, 300);
|
||
}
|
||
}
|
||
|
||
return fixed;
|
||
}
|
||
|
||
// 验证文件名 - 宽松版本，自动修复
|
||
function validateFilename(input) {
|
||
// 检查是否跳过验证
|
||
const skipValidation = document.getElementById('skipValidationToggle').checked;
|
||
if (skipValidation) {
|
||
// 移除任何错误提示
|
||
const existingError = input.parentNode.querySelector('.filename-error');
|
||
if (existingError) {
|
||
existingError.remove();
|
||
}
|
||
input.classList.remove('invalid');
|
||
return true; // 跳过所有验证
|
||
}
|
||
|
||
const originalFilename = input.value.trim();
|
||
const fixedFilename = autoFixFilename(originalFilename);
|
||
|
||
// 移除之前的错误提示
|
||
const existingError = input.parentNode.querySelector('.filename-error');
|
||
if (existingError) {
|
||
existingError.remove();
|
||
}
|
||
|
||
// 重置样式
|
||
input.classList.remove('invalid');
|
||
|
||
if (originalFilename.length === 0) {
|
||
showFilenameError(input, '文件名不能为空');
|
||
return false;
|
||
}
|
||
|
||
// 如果文件名被自动修复了，更新输入框并显示提示
|
||
if (fixedFilename !== originalFilename) {
|
||
input.value = fixedFilename;
|
||
showFilenameInfo(input, '文件名已自动修正');
|
||
return true;
|
||
}
|
||
|
||
return true;
|
||
}
|
||
|
||
// 显示文件名信息提示
|
||
function showFilenameInfo(input, message) {
|
||
const infoDiv = document.createElement('div');
|
||
infoDiv.className = 'filename-info';
|
||
infoDiv.textContent = message;
|
||
infoDiv.style.color = '#4caf50';
|
||
infoDiv.style.fontSize = '0.75em';
|
||
infoDiv.style.marginTop = '4px';
|
||
input.parentNode.appendChild(infoDiv);
|
||
|
||
// 3秒后自动移除提示
|
||
setTimeout(() => {
|
||
if (infoDiv.parentNode) {
|
||
infoDiv.remove();
|
||
}
|
||
}, 3000);
|
||
}
|
||
|
||
// 显示文件名错误
|
||
function showFilenameError(input, message) {
|
||
input.classList.add('invalid');
|
||
const errorDiv = document.createElement('div');
|
||
errorDiv.className = 'filename-error';
|
||
errorDiv.textContent = message;
|
||
input.parentNode.appendChild(errorDiv);
|
||
}
|
||
|
||
// 显示批量重命名对话框
|
||
function showBatchRenameDialog() {
|
||
if (pendingFiles.length === 0) {
|
||
showToast('没有文件可以重命名');
|
||
return;
|
||
}
|
||
document.getElementById('batchRenameModal').style.display = 'flex';
|
||
updateRenamePreview();
|
||
}
|
||
|
||
// 隐藏批量重命名对话框
|
||
function hideBatchRenameDialog() {
|
||
document.getElementById('batchRenameModal').style.display = 'none';
|
||
document.getElementById('renamePattern').value = 'sequential';
|
||
document.getElementById('customInput').value = '';
|
||
document.getElementById('customInputGroup').style.display = 'none';
|
||
}
|
||
|
||
// 更新重命名预览
|
||
function updateRenamePreview() {
|
||
const pattern = document.getElementById('renamePattern').value;
|
||
const customInput = document.getElementById('customInput').value;
|
||
const customGroup = document.getElementById('customInputGroup');
|
||
const preview = document.getElementById('renamePreview');
|
||
|
||
// 显示/隐藏自定义输入框
|
||
if (pattern === 'prefix' || pattern === 'suffix' || pattern === 'custom') {
|
||
customGroup.style.display = 'block';
|
||
} else {
|
||
customGroup.style.display = 'none';
|
||
}
|
||
|
||
// 生成预览
|
||
let previewHTML = '';
|
||
const now = new Date();
|
||
const timestamp = now.toISOString().replace(/[:.]/g, '-').slice(0, -5);
|
||
|
||
pendingFiles.forEach((file, index) => {
|
||
const originalName = file.name;
|
||
const nameWithoutExt = originalName.replace(/\.[^/.]+$/, "");
|
||
const ext = originalName.includes('.') ? originalName.split('.').pop() : '';
|
||
let newName = originalName;
|
||
|
||
switch (pattern) {
|
||
case 'sequential':
|
||
newName = `文件${index + 1}${ext ? '.' + ext : ''}`;
|
||
break;
|
||
case 'timestamp':
|
||
newName = `${timestamp}_${index + 1}${ext ? '.' + ext : ''}`;
|
||
break;
|
||
case 'prefix':
|
||
if (customInput) {
|
||
newName = `${customInput}${originalName}`;
|
||
}
|
||
break;
|
||
case 'suffix':
|
||
if (customInput) {
|
||
newName = `${nameWithoutExt}${customInput}${ext ? '.' + ext : ''}`;
|
||
}
|
||
break;
|
||
case 'custom':
|
||
if (customInput) {
|
||
newName = customInput
|
||
.replace(/{name}/g, nameWithoutExt)
|
||
.replace(/{index}/g, (index + 1).toString())
|
||
.replace(/{ext}/g, ext);
|
||
if (ext && !newName.includes('.')) {
|
||
newName += '.' + ext;
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
|
||
previewHTML += `
|
||
<div class="rename-preview-item">
|
||
<span class="rename-original">${originalName}</span>
|
||
<span class="rename-arrow">→</span>
|
||
<span class="rename-new">${newName}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
preview.innerHTML = previewHTML;
|
||
}
|
||
|
||
// 应用批量重命名
|
||
function applyBatchRename() {
|
||
const pattern = document.getElementById('renamePattern').value;
|
||
const customInput = document.getElementById('customInput').value;
|
||
|
||
if ((pattern === 'prefix' || pattern === 'suffix' || pattern === 'custom') && !customInput.trim()) {
|
||
showToast('请输入自定义内容');
|
||
return;
|
||
}
|
||
|
||
const now = new Date();
|
||
const timestamp = now.toISOString().replace(/[:.]/g, '-').slice(0, -5);
|
||
|
||
// 应用重命名到每个文件输入框
|
||
document.querySelectorAll('.preview-file-name-input').forEach((input, inputIndex) => {
|
||
const fileIndex = parseInt(input.dataset.index);
|
||
const file = pendingFiles[fileIndex];
|
||
const originalName = file.name;
|
||
const nameWithoutExt = originalName.replace(/\.[^/.]+$/, "");
|
||
const ext = originalName.includes('.') ? originalName.split('.').pop() : '';
|
||
let newName = originalName;
|
||
|
||
switch (pattern) {
|
||
case 'sequential':
|
||
newName = `文件${fileIndex + 1}${ext ? '.' + ext : ''}`;
|
||
break;
|
||
case 'timestamp':
|
||
newName = `${timestamp}_${fileIndex + 1}${ext ? '.' + ext : ''}`;
|
||
break;
|
||
case 'prefix':
|
||
newName = `${customInput}${originalName}`;
|
||
break;
|
||
case 'suffix':
|
||
newName = `${nameWithoutExt}${customInput}${ext ? '.' + ext : ''}`;
|
||
break;
|
||
case 'custom':
|
||
newName = customInput
|
||
.replace(/{name}/g, nameWithoutExt)
|
||
.replace(/{index}/g, (fileIndex + 1).toString())
|
||
.replace(/{ext}/g, ext);
|
||
if (ext && !newName.includes('.')) {
|
||
newName += '.' + ext;
|
||
}
|
||
break;
|
||
}
|
||
|
||
input.value = newName;
|
||
validateFilename(input);
|
||
});
|
||
|
||
hideBatchRenameDialog();
|
||
showToast('批量重命名已应用');
|
||
}
|
||
|
||
// 修改批量上传函数
|
||
async function uploadAllFiles() {
|
||
// 禁用上传按钮并改变样式
|
||
const uploadBtn = document.querySelector('.upload-all-btn');
|
||
if (uploadBtn) {
|
||
uploadBtn.disabled = true;
|
||
uploadBtn.style.opacity = '0.5';
|
||
uploadBtn.innerHTML = `
|
||
<i class="fas fa-spinner fa-spin"></i>
|
||
正在上传...
|
||
`;
|
||
}
|
||
|
||
initializeProgressContainer();
|
||
const maxConcurrent = 3;
|
||
const comments = {};
|
||
const customFilenames = {};
|
||
|
||
// 获取文件备注
|
||
document.querySelectorAll('.preview-file-comment').forEach(input => {
|
||
const index = input.dataset.index;
|
||
comments[index] = input.value.trim();
|
||
});
|
||
|
||
// 验证所有文件名并获取自定义文件名
|
||
let hasInvalidFilenames = false;
|
||
document.querySelectorAll('.preview-file-name-input').forEach(input => {
|
||
const index = input.dataset.index;
|
||
const customName = input.value.trim();
|
||
|
||
// 验证文件名
|
||
if (!validateFilename(input)) {
|
||
hasInvalidFilenames = true;
|
||
return;
|
||
}
|
||
|
||
if (customName && customName !== pendingFiles[index].name) {
|
||
customFilenames[index] = customName;
|
||
}
|
||
});
|
||
|
||
// 如果有无效文件名，停止上传
|
||
if (hasInvalidFilenames) {
|
||
showToast('发现无效文件名，请检查红色标记的文件名');
|
||
// 恢复上传按钮
|
||
if (uploadBtn) {
|
||
uploadBtn.disabled = false;
|
||
uploadBtn.style.opacity = '1';
|
||
uploadBtn.innerHTML = `
|
||
<i class="fas fa-cloud-upload-alt"></i>
|
||
上传 ${pendingFiles.length} 个文件
|
||
`;
|
||
}
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const uploadTasks = pendingFiles.map((file, index) => {
|
||
return async () => {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
// 添加备注
|
||
if (comments[index]) {
|
||
formData.append('comment', comments[index]);
|
||
}
|
||
|
||
// 添加自定义文件名
|
||
if (customFilenames[index]) {
|
||
formData.append('custom_filename', customFilenames[index]);
|
||
}
|
||
|
||
// 处理文件夹路径
|
||
if (file.webkitRelativePath) {
|
||
formData.append('relative_path', file.webkitRelativePath);
|
||
}
|
||
|
||
// 添加当前目录信息
|
||
if (currentFolder) {
|
||
formData.append('target_folder', currentFolder);
|
||
}
|
||
|
||
try {
|
||
await uploadFile(formData, file, false);
|
||
} catch (error) {
|
||
if (error.message !== 'Upload cancelled') {
|
||
console.error('上传失败:', error);
|
||
}
|
||
}
|
||
};
|
||
});
|
||
|
||
while (uploadTasks.length > 0) {
|
||
const batch = uploadTasks.splice(0, maxConcurrent);
|
||
await Promise.all(batch.map(task => task()));
|
||
}
|
||
|
||
// 上传完成后清理预览和进度条
|
||
clearPreview();
|
||
clearProgressContainer();
|
||
loadFiles();
|
||
} catch (error) {
|
||
console.error('上传过程出错:', error);
|
||
if (error.message !== 'Upload cancelled') {
|
||
showToast('部分文件上传失败，请重试');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加清理进度条容器的函数
|
||
function clearProgressContainer() {
|
||
const container = document.getElementById('uploadProgressContainer');
|
||
if (container) {
|
||
container.innerHTML = '';
|
||
container.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 添加进度条容器的初始化
|
||
function initializeProgressContainer() {
|
||
let container = document.getElementById('uploadProgressContainer');
|
||
|
||
// 如果容器不存在，创建新容器
|
||
if (!container) {
|
||
container = document.createElement('div');
|
||
container.id = 'uploadProgressContainer';
|
||
container.className = 'upload-progress-container';
|
||
document.querySelector('.upload-section').appendChild(container);
|
||
}
|
||
|
||
// 显示容器
|
||
container.style.display = 'block';
|
||
|
||
return container;
|
||
}
|
||
|
||
// 添加检查进度条容器状态的函数
|
||
function checkProgressContainer() {
|
||
const container = document.getElementById('uploadProgressContainer');
|
||
if (container) {
|
||
// 如果容器为空，隐藏它
|
||
if (container.children.length === 0) {
|
||
container.style.display = 'none';
|
||
} else {
|
||
container.style.display = 'block';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 修改预览显示函数
|
||
function showPreview() {
|
||
const previewArea = document.getElementById('uploadPreview');
|
||
const previewFiles = document.getElementById('previewFiles');
|
||
const uploadBtn = document.querySelector('.upload-all-btn');
|
||
|
||
// 清空现有预览
|
||
previewFiles.innerHTML = '';
|
||
|
||
// 显示每个待上传文件
|
||
pendingFiles.forEach((file, index) => {
|
||
const fileDiv = document.createElement('div');
|
||
fileDiv.className = 'preview-file';
|
||
|
||
// 确定显示的文件名（如果是文件夹上传，显示相对路径）
|
||
const displayName = file.webkitRelativePath || file.name;
|
||
const isFromFolder = !!file.webkitRelativePath;
|
||
|
||
// 检测文件类型
|
||
const fileType = getFileType(file.name);
|
||
const fileIcon = getFileIcon(fileType);
|
||
|
||
fileDiv.innerHTML = `
|
||
<div class="preview-file-icon ${fileType}">
|
||
<i class="fas ${isFromFolder ? 'fa-folder-open' : fileIcon}"></i>
|
||
</div>
|
||
<div class="preview-file-info">
|
||
<div class="preview-file-name-container">
|
||
<label>文件名：</label>
|
||
<input type="text"
|
||
class="preview-file-name-input"
|
||
value="${file.name}"
|
||
data-index="${index}"
|
||
placeholder="输入文件名"
|
||
onblur="validateFilename(this)"
|
||
oninput="validateFilename(this)">
|
||
</div>
|
||
${isFromFolder ? `<div class="preview-file-path">路径：${file.webkitRelativePath}</div>` : ''}
|
||
<div class="preview-file-size">${formatFileSize(file.size)}</div>
|
||
${isFromFolder ? '<div class="preview-file-type">来自文件夹</div>' : ''}
|
||
<input type="text"
|
||
class="preview-file-comment"
|
||
placeholder="添加文件说明（可选）"
|
||
data-index="${index}">
|
||
</div>
|
||
<button class="remove-file-btn" onclick="removeFile(${index}, event)">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
`;
|
||
previewFiles.appendChild(fileDiv);
|
||
});
|
||
|
||
// 显示预览区域
|
||
previewArea.style.display = pendingFiles.length > 0 ? 'block' : 'none';
|
||
|
||
// 更新上传按钮状态和文本
|
||
if (uploadBtn) {
|
||
uploadBtn.disabled = pendingFiles.length === 0;
|
||
uploadBtn.style.opacity = pendingFiles.length === 0 ? '0.5' : '1';
|
||
uploadBtn.innerHTML = `
|
||
<i class="fas fa-cloud-upload-alt"></i>
|
||
上传 ${pendingFiles.length} 个文件
|
||
`;
|
||
}
|
||
}
|
||
|
||
// 修改移除文件函数
|
||
function removeFile(index, event) {
|
||
event.preventDefault(); // 阻止事件冒泡
|
||
event.stopPropagation();
|
||
pendingFiles.splice(index, 1);
|
||
showPreview();
|
||
}
|
||
|
||
// 清除预览
|
||
function clearPreview() {
|
||
pendingFiles = [];
|
||
const previewArea = document.getElementById('uploadPreview');
|
||
const uploadBtn = document.querySelector('.upload-all-btn');
|
||
|
||
previewArea.style.display = 'none';
|
||
|
||
if (uploadBtn) {
|
||
uploadBtn.disabled = true;
|
||
uploadBtn.style.opacity = '0.5';
|
||
uploadBtn.innerHTML = `
|
||
<i class="fas fa-cloud-upload-alt"></i>
|
||
上传文件
|
||
`;
|
||
}
|
||
|
||
document.getElementById('fileInput').value = '';
|
||
document.getElementById('folderInput').value = '';
|
||
}
|
||
|
||
function showToast(message) {
|
||
toast.textContent = message;
|
||
toast.style.display = 'block';
|
||
setTimeout(() => {
|
||
toast.style.display = 'none';
|
||
}, 3000);
|
||
}
|
||
|
||
function formatFileSize(bytes) {
|
||
if (bytes === 0) return '0 Bytes';
|
||
const k = 1024;
|
||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||
}
|
||
|
||
function loadFiles() {
|
||
const params = new URLSearchParams({
|
||
folder: currentFolder,
|
||
sort_by: currentSortBy,
|
||
sort_order: currentSortOrder,
|
||
search: currentSearch
|
||
});
|
||
|
||
fetch(`/files?${params}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
const fileList = document.getElementById('fileList');
|
||
fileList.innerHTML = '';
|
||
|
||
// 应用紧凑布局到容器
|
||
if (isCompactLayout) {
|
||
fileList.classList.add('compact');
|
||
} else {
|
||
fileList.classList.remove('compact');
|
||
}
|
||
|
||
// 更新面包屑导航
|
||
updateBreadcrumb(data.current_folder, data.parent_folder);
|
||
|
||
// 更新文件夹列表
|
||
folderList = data.files.filter(file => file.type === 'folder');
|
||
|
||
data.files.forEach(file => {
|
||
const fileCard = document.createElement('div');
|
||
fileCard.className = `file-card ${file.type}${isCompactLayout ? ' compact' : ''}`;
|
||
|
||
if (file.type === 'folder') {
|
||
fileCard.innerHTML = `
|
||
<div class="file-header">
|
||
<div class="file-icon">
|
||
<i class="fas fa-folder"></i>
|
||
</div>
|
||
<div class="file-content">
|
||
<div class="file-name">${file.name}</div>
|
||
<div class="file-uploader">
|
||
<i class="fas fa-calendar"></i> 创建时间: ${file.created}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="file-info">
|
||
<div><i class="fas fa-folder"></i> 类型：文件夹</div>
|
||
</div>
|
||
<div class="file-actions">
|
||
<button class="download-btn" onclick="navigateToFolder('${file.path}')">
|
||
<i class="fas fa-folder-open"></i> 打开
|
||
</button>
|
||
<button class="rename-btn" onclick="showRenameFolderDialog('${file.name}', '${currentFolder}')">
|
||
<i class="fas fa-edit"></i> 重命名
|
||
</button>
|
||
${(currentUserInfo.isAdmin || currentUserInfo.adminSessionId) ? `<button class="delete-btn" onclick="deleteFolder('${file.path}')">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>` : ''}
|
||
</div>
|
||
`;
|
||
} else {
|
||
// 检测文件类型
|
||
const fileType = getFileType(file.name);
|
||
const fileIcon = getFileIcon(fileType);
|
||
const canShowPreview = canPreview(fileType);
|
||
|
||
fileCard.innerHTML = `
|
||
<div class="file-header">
|
||
<div class="file-icon ${fileType}" onclick="${canShowPreview ? `openMediaPreview('${file.path}', '${file.name}', '${fileType}')` : ''}">
|
||
<i class="fas ${fileIcon}"></i>
|
||
</div>
|
||
<div class="file-content">
|
||
<div class="file-name">${file.name}</div>
|
||
<div class="file-uploader">
|
||
<i class="fas fa-user"></i> 上传者: ${formatUploaderInfo(file.uploader_username, file.uploader_ip)}
|
||
</div>
|
||
${file.comment ? `
|
||
<div class="file-comment">
|
||
<i class="fas fa-comment"></i> ${file.comment}
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
<div class="file-info">
|
||
<div><i class="fas fa-weight"></i> 大小：${formatFileSize(file.size)}</div>
|
||
<div><i class="fas fa-clock"></i> 上传时间：${file.created}</div>
|
||
<div><i class="fas fa-tag"></i> 类型：${fileType.toUpperCase()}</div>
|
||
</div>
|
||
<div class="file-actions">
|
||
${canShowPreview ? `
|
||
<button class="download-btn" onclick="openMediaPreview('${file.path}', '${file.name}', '${fileType}')">
|
||
<i class="fas fa-eye"></i> 预览
|
||
</button>
|
||
` : ''}
|
||
<a href="/download/${file.path}" class="download-btn" target="_blank">
|
||
<i class="fas fa-download"></i> 下载
|
||
</a>
|
||
<button class="rename-btn" onclick="showRenameFileDialog('${file.name}', '${currentFolder}')">
|
||
<i class="fas fa-edit"></i> 重命名
|
||
</button>
|
||
<button class="move-btn" onclick="showMoveFileDialog('${file.name}', '${currentFolder}')">
|
||
<i class="fas fa-cut"></i> 移动
|
||
</button>
|
||
${(currentUserInfo.isAdmin || currentUserInfo.adminSessionId) ? `<button class="delete-btn" onclick="deleteFile('${file.path}')">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>` : ''}
|
||
</div>
|
||
`;
|
||
|
||
// 生成缩略图预览
|
||
const iconElement = fileCard.querySelector('.file-icon');
|
||
if (canShowPreview) {
|
||
generateThumbnail(file.path, file.name, fileType, iconElement);
|
||
}
|
||
}
|
||
fileList.appendChild(fileCard);
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.error('加载文件列表失败:', error);
|
||
showToast('加载文件列表失败');
|
||
});
|
||
}
|
||
|
||
// 更新面包屑导航
|
||
function updateBreadcrumb(currentFolder, parentFolder) {
|
||
const breadcrumb = document.getElementById('breadcrumb');
|
||
breadcrumb.innerHTML = '<a href="#" onclick="navigateToFolder(\'\')"><i class="fas fa-home"></i> 根目录</a>';
|
||
|
||
if (currentFolder) {
|
||
const parts = currentFolder.split('/');
|
||
let path = '';
|
||
parts.forEach((part, index) => {
|
||
if (index > 0) path += '/';
|
||
path += part;
|
||
breadcrumb.innerHTML += `<span class="separator">/</span><a href="#" onclick="navigateToFolder('${path}')">${part}</a>`;
|
||
});
|
||
}
|
||
}
|
||
|
||
// 导航到文件夹
|
||
function navigateToFolder(folder) {
|
||
currentFolder = folder;
|
||
updateBackButton();
|
||
loadFiles();
|
||
}
|
||
|
||
// 更新返回按钮状态
|
||
function updateBackButton() {
|
||
const backBtn = document.getElementById('backBtn');
|
||
if (currentFolder && currentFolder.trim() !== '') {
|
||
backBtn.style.display = 'inline-flex';
|
||
} else {
|
||
backBtn.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 处理搜索
|
||
function handleSearch(event) {
|
||
if (event.key === 'Enter' || event.type === 'input') {
|
||
currentSearch = event.target.value;
|
||
applySortAndSearch();
|
||
}
|
||
}
|
||
|
||
// 应用排序和搜索
|
||
function applySortAndSearch() {
|
||
currentSortBy = document.getElementById('sortBy').value;
|
||
currentSearch = document.getElementById('searchInput').value;
|
||
loadFiles();
|
||
}
|
||
|
||
// 切换排序顺序
|
||
function toggleSortOrder() {
|
||
currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
|
||
const btn = document.getElementById('sortOrderBtn');
|
||
btn.innerHTML = currentSortOrder === 'asc' ?
|
||
'<i class="fas fa-sort-alpha-down"></i>' :
|
||
'<i class="fas fa-sort-alpha-up"></i>';
|
||
loadFiles();
|
||
}
|
||
|
||
// 切换布局模式
|
||
function toggleLayout() {
|
||
isCompactLayout = !isCompactLayout;
|
||
const btn = document.getElementById('layoutToggleBtn');
|
||
const fileList = document.getElementById('fileList');
|
||
|
||
if (isCompactLayout) {
|
||
fileList.classList.add('compact');
|
||
btn.classList.add('active');
|
||
btn.innerHTML = '<i class="fas fa-th-list"></i>';
|
||
btn.title = '切换到卡片模式';
|
||
} else {
|
||
fileList.classList.remove('compact');
|
||
btn.classList.remove('active');
|
||
btn.innerHTML = '<i class="fas fa-th-large"></i>';
|
||
btn.title = '切换到紧凑模式';
|
||
}
|
||
|
||
// 应用紧凑样式到现有文件卡片
|
||
applyLayoutToCards();
|
||
|
||
// 保存用户偏好
|
||
localStorage.setItem('compactLayout', isCompactLayout);
|
||
|
||
// 显示提示
|
||
showToast(isCompactLayout ? '已切换到紧凑模式' : '已切换到卡片模式');
|
||
}
|
||
|
||
// 应用布局样式到文件卡片
|
||
function applyLayoutToCards() {
|
||
const fileCards = document.querySelectorAll('.file-card');
|
||
fileCards.forEach(card => {
|
||
if (isCompactLayout) {
|
||
card.classList.add('compact');
|
||
} else {
|
||
card.classList.remove('compact');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 显示创建文件夹对话框
|
||
function showCreateFolderDialog() {
|
||
document.getElementById('createFolderModal').style.display = 'flex';
|
||
document.getElementById('folderNameInput').focus();
|
||
}
|
||
|
||
// 隐藏创建文件夹对话框
|
||
function hideCreateFolderDialog() {
|
||
document.getElementById('createFolderModal').style.display = 'none';
|
||
document.getElementById('folderNameInput').value = '';
|
||
}
|
||
|
||
// 创建文件夹
|
||
function createFolder() {
|
||
const folderName = document.getElementById('folderNameInput').value.trim();
|
||
if (!folderName) {
|
||
showToast('请输入文件夹名称');
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append('folder_name', folderName);
|
||
formData.append('parent_folder', currentFolder);
|
||
|
||
fetch('/folders', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.message) {
|
||
showToast(data.message);
|
||
hideCreateFolderDialog();
|
||
loadFiles();
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('创建文件夹失败:', error);
|
||
showToast('创建文件夹失败');
|
||
});
|
||
}
|
||
|
||
// 显示移动文件对话框
|
||
function showMoveFileDialog(fileName, sourceFolder) {
|
||
currentMoveFile = { name: fileName, source: sourceFolder };
|
||
document.getElementById('moveFileName').textContent = fileName;
|
||
|
||
// 填充目标文件夹选择框
|
||
const select = document.getElementById('targetFolderSelect');
|
||
select.innerHTML = '<option value="">根目录</option>';
|
||
|
||
// 递归添加所有文件夹选项
|
||
loadAllFolders().then(folders => {
|
||
folders.forEach(folder => {
|
||
if (folder.path !== sourceFolder) { // 不能移动到当前文件夹
|
||
select.innerHTML += `<option value="${folder.path}">${folder.path || '根目录'}</option>`;
|
||
}
|
||
});
|
||
});
|
||
|
||
document.getElementById('moveFileModal').style.display = 'flex';
|
||
}
|
||
|
||
// 隐藏移动文件对话框
|
||
function hideMoveFileDialog() {
|
||
document.getElementById('moveFileModal').style.display = 'none';
|
||
currentMoveFile = null;
|
||
}
|
||
|
||
// 确认移动文件
|
||
function confirmMoveFile() {
|
||
if (!currentMoveFile) return;
|
||
|
||
const targetFolder = document.getElementById('targetFolderSelect').value;
|
||
const formData = new FormData();
|
||
formData.append('file_name', currentMoveFile.name);
|
||
formData.append('source_folder', currentMoveFile.source);
|
||
formData.append('target_folder', targetFolder);
|
||
|
||
fetch('/move_file', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
showToast(data.message);
|
||
hideMoveFileDialog();
|
||
loadFiles();
|
||
})
|
||
.catch(error => {
|
||
console.error('移动文件失败:', error);
|
||
showToast('移动文件失败');
|
||
});
|
||
}
|
||
|
||
// 加载所有文件夹列表
|
||
async function loadAllFolders(folder = '') {
|
||
try {
|
||
const params = new URLSearchParams({ folder, sort_by: 'name' });
|
||
const response = await fetch(`/files?${params}`);
|
||
const data = await response.json();
|
||
|
||
let allFolders = [];
|
||
const folders = data.files.filter(file => file.type === 'folder');
|
||
|
||
// 添加当前层级的文件夹
|
||
allFolders = allFolders.concat(folders);
|
||
|
||
// 递归加载子文件夹
|
||
for (const childFolder of folders) {
|
||
const subFolders = await loadAllFolders(childFolder.path);
|
||
allFolders = allFolders.concat(subFolders);
|
||
}
|
||
|
||
return allFolders;
|
||
} catch (error) {
|
||
console.error('加载文件夹列表失败:', error);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
// 删除文件夹
|
||
async function deleteFolder(folderPath) {
|
||
// 检查管理员权限 - 支持通过IP或登录获得的管理员权限
|
||
if (!currentUserInfo.isAdmin && !currentUserInfo.adminSessionId) {
|
||
showToast('权限不足，只有管理员才能删除文件夹');
|
||
return;
|
||
}
|
||
|
||
if (!confirm('确定要删除这个文件夹吗？文件夹内的所有文件和子文件夹都将被永久删除。')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const headers = {};
|
||
// 如果有admin session，添加到请求头
|
||
if (currentUserInfo.adminSessionId) {
|
||
headers['Authorization'] = `AdminSession ${currentUserInfo.adminSessionId}`;
|
||
}
|
||
|
||
const response = await fetch(`/folders/${folderPath}`, {
|
||
method: 'DELETE',
|
||
headers: headers
|
||
});
|
||
|
||
if (response.status === 403) {
|
||
showToast('权限不足，只有管理员才能删除文件夹');
|
||
return;
|
||
}
|
||
|
||
const result = await response.json();
|
||
showToast(result.message);
|
||
loadFiles(); // 重新加载文件列表
|
||
} catch (error) {
|
||
showToast('删除失败：' + error.message);
|
||
}
|
||
}
|
||
|
||
// 显示重命名文件对话框
|
||
function showRenameFileDialog(fileName, folderPath) {
|
||
currentRenameFile = { name: fileName, folder: folderPath };
|
||
document.getElementById('currentFileName').textContent = fileName;
|
||
document.getElementById('newFileNameInput').value = fileName;
|
||
document.getElementById('renameFileModal').style.display = 'flex';
|
||
document.getElementById('newFileNameInput').focus();
|
||
document.getElementById('newFileNameInput').select();
|
||
}
|
||
|
||
// 隐藏重命名文件对话框
|
||
function hideRenameFileDialog() {
|
||
document.getElementById('renameFileModal').style.display = 'none';
|
||
currentRenameFile = null;
|
||
}
|
||
|
||
// 确认重命名文件
|
||
function confirmRenameFile() {
|
||
if (!currentRenameFile) return;
|
||
|
||
const newName = document.getElementById('newFileNameInput').value.trim();
|
||
if (!newName) {
|
||
showToast('请输入新文件名');
|
||
return;
|
||
}
|
||
|
||
if (newName === currentRenameFile.name) {
|
||
showToast('新文件名与原文件名相同');
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append('old_name', currentRenameFile.name);
|
||
formData.append('new_name', newName);
|
||
formData.append('folder_path', currentRenameFile.folder);
|
||
|
||
fetch('/rename_file', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
showToast(data.message);
|
||
hideRenameFileDialog();
|
||
loadFiles();
|
||
})
|
||
.catch(error => {
|
||
console.error('重命名文件失败:', error);
|
||
showToast('重命名文件失败');
|
||
});
|
||
}
|
||
|
||
// 显示重命名文件夹对话框
|
||
function showRenameFolderDialog(folderName, parentFolder) {
|
||
currentRenameFolder = { name: folderName, parent: parentFolder };
|
||
document.getElementById('currentFolderName').textContent = folderName;
|
||
document.getElementById('newFolderNameInput').value = folderName;
|
||
document.getElementById('renameFolderModal').style.display = 'flex';
|
||
document.getElementById('newFolderNameInput').focus();
|
||
document.getElementById('newFolderNameInput').select();
|
||
}
|
||
|
||
// 隐藏重命名文件夹对话框
|
||
function hideRenameFolderDialog() {
|
||
document.getElementById('renameFolderModal').style.display = 'none';
|
||
currentRenameFolder = null;
|
||
}
|
||
|
||
// 确认重命名文件夹
|
||
function confirmRenameFolder() {
|
||
if (!currentRenameFolder) return;
|
||
|
||
const newName = document.getElementById('newFolderNameInput').value.trim();
|
||
if (!newName) {
|
||
showToast('请输入新文件夹名');
|
||
return;
|
||
}
|
||
|
||
if (newName === currentRenameFolder.name) {
|
||
showToast('新文件夹名与原文件夹名相同');
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append('old_name', currentRenameFolder.name);
|
||
formData.append('new_name', newName);
|
||
formData.append('parent_folder', currentRenameFolder.parent);
|
||
|
||
fetch('/rename_folder', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
showToast(data.message);
|
||
hideRenameFolderDialog();
|
||
loadFiles();
|
||
})
|
||
.catch(error => {
|
||
console.error('重命名文件夹失败:', error);
|
||
showToast('重命名文件夹失败');
|
||
});
|
||
}
|
||
|
||
// 添加删除文件的函数
|
||
async function deleteFile(filename) {
|
||
// 检查管理员权限 - 支持通过IP或登录获得的管理员权限
|
||
if (!currentUserInfo.isAdmin && !currentUserInfo.adminSessionId) {
|
||
showToast('权限不足，只有管理员才能删除文件');
|
||
return;
|
||
}
|
||
|
||
if (!confirm('确定要删除这个文件吗？')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const headers = {};
|
||
// 如果有admin session，添加到请求头
|
||
if (currentUserInfo.adminSessionId) {
|
||
headers['Authorization'] = `AdminSession ${currentUserInfo.adminSessionId}`;
|
||
}
|
||
|
||
const response = await fetch(`/files/${filename}`, {
|
||
method: 'DELETE',
|
||
headers: headers
|
||
});
|
||
|
||
if (response.status === 403) {
|
||
showToast('权限不足，只有管理员才能删除文件');
|
||
return;
|
||
}
|
||
|
||
const result = await response.json();
|
||
showToast(result.message);
|
||
loadFiles(); // 重新加载文件列表
|
||
} catch (error) {
|
||
showToast('删除失败：' + error.message);
|
||
}
|
||
}
|
||
|
||
// 全局用户信息变量
|
||
let currentUserInfo = {
|
||
ip: '',
|
||
name: '',
|
||
avatar: '',
|
||
isAdmin: false,
|
||
adminSessionId: null // 添加admin会话ID
|
||
};
|
||
|
||
// 全局IP名称映射
|
||
let ipNameMap = {};
|
||
let ipAvatarMap = {};
|
||
|
||
// 可用的emoji头像列表
|
||
const availableEmojis = [
|
||
'👨💻', '👩💻', '🧑💼', '👨🔬', '👩🔬', '🧑🎨', '👨🎨', '👩🎨',
|
||
'🧑🚀', '👨🚀', '👩🚀', '🧑⚕️', '👨⚕️', '👩⚕️', '🧑🏫', '👨🏫',
|
||
'👩🏫', '🧑💼', '👨💼', '👩💼', '🧑🔧', '👨🔧', '👩🔧', '🧑🌾',
|
||
'👨🌾', '👩🌾', '🧑🍳', '👨🍳', '👩🍳', '🧑🎓', '👨🎓', '👩🎓',
|
||
'🤖', '👽', '🦸♂️', '🦸♀️', '🦹♂️', '🦹♀️', '🧙♂️', '🧙♀️',
|
||
'🧚♂️', '🧚♀️', '🧞♂️', '🧞♀️', '🧝♂️', '🧝♀️', '🧛♂️', '🧛♀️',
|
||
'🎭', '🎨', '🎪', '🎯', '🎲', '🎸', '🎺', '🎷', '🎻', '🎹'
|
||
];
|
||
|
||
// 为IP随机分配的emoji头像缓存
|
||
let emojiAvatarCache = {};
|
||
|
||
// 智能头像分配函数
|
||
function getAvatarForIP(ip) {
|
||
// 1. 首先检查是否有配置的图片头像
|
||
if (ipAvatarMap[ip]) {
|
||
return {
|
||
type: 'image',
|
||
src: ipAvatarMap[ip]
|
||
};
|
||
}
|
||
|
||
// 2. 检查是否已经为该IP随机分配过emoji头像
|
||
if (emojiAvatarCache[ip]) {
|
||
return {
|
||
type: 'emoji',
|
||
emoji: emojiAvatarCache[ip]
|
||
};
|
||
}
|
||
|
||
// 3. 为新IP随机分配一个emoji头像
|
||
const randomIndex = Math.floor(Math.random() * availableEmojis.length);
|
||
const assignedEmoji = availableEmojis[randomIndex];
|
||
|
||
// 4. 缓存分配结果
|
||
emojiAvatarCache[ip] = assignedEmoji;
|
||
|
||
// 5. 保存到localStorage以便持久化
|
||
try {
|
||
localStorage.setItem('emojiAvatarCache', JSON.stringify(emojiAvatarCache));
|
||
} catch (e) {
|
||
console.warn('无法保存emoji头像缓存到localStorage:', e);
|
||
}
|
||
|
||
return {
|
||
type: 'emoji',
|
||
emoji: assignedEmoji
|
||
};
|
||
}
|
||
|
||
// 从localStorage恢复emoji头像缓存
|
||
function loadEmojiAvatarCache() {
|
||
try {
|
||
const cached = localStorage.getItem('emojiAvatarCache');
|
||
if (cached) {
|
||
emojiAvatarCache = JSON.parse(cached);
|
||
}
|
||
} catch (e) {
|
||
console.warn('无法从localStorage加载emoji头像缓存:', e);
|
||
emojiAvatarCache = {};
|
||
}
|
||
}
|
||
|
||
// 加载用户信息
|
||
async function loadUserInfo() {
|
||
try {
|
||
// 先加载emoji头像缓存
|
||
loadEmojiAvatarCache();
|
||
|
||
// 获取当前用户IP和管理员信息
|
||
const [ipResponse, adminResponse, ipNamesResponse] = await Promise.all([
|
||
fetch('/get_ip'),
|
||
fetch('/admin/info'),
|
||
fetch('/get_ip_names')
|
||
]);
|
||
|
||
const ipData = await ipResponse.json();
|
||
const adminData = await adminResponse.json();
|
||
const ipNamesData = await ipNamesResponse.json();
|
||
|
||
currentUserInfo.ip = ipData.ip;
|
||
currentUserInfo.isAdmin = adminData.is_admin;
|
||
|
||
// 设置用户名称和头像
|
||
ipNameMap = ipNamesData.ip_vs_name || {};
|
||
ipAvatarMap = ipNamesData.ip_vs_avatar || {};
|
||
|
||
currentUserInfo.name = ipNameMap[currentUserInfo.ip] || currentUserInfo.ip;
|
||
// 使用智能头像分配
|
||
currentUserInfo.avatar = getAvatarForIP(currentUserInfo.ip);
|
||
|
||
// 检查admin会话状态
|
||
await checkAdminSession();
|
||
|
||
// 更新UI
|
||
updateUserInfoDisplay();
|
||
|
||
// 设置头像点击事件
|
||
setupAvatarClickEvent();
|
||
|
||
} catch (error) {
|
||
console.error('加载用户信息失败:', error);
|
||
// 使用默认值
|
||
currentUserInfo.ip = 'unknown';
|
||
currentUserInfo.name = '访客';
|
||
currentUserInfo.avatar = {
|
||
type: 'image',
|
||
src: '/image/avatar/server.png'
|
||
};
|
||
currentUserInfo.isAdmin = false;
|
||
updateUserInfoDisplay();
|
||
setupAvatarClickEvent();
|
||
}
|
||
}
|
||
|
||
// 更新用户信息显示
|
||
function updateUserInfoDisplay() {
|
||
const userInfo = document.getElementById('userInfo');
|
||
const userAvatar = document.getElementById('userAvatar');
|
||
const userName = document.getElementById('userName');
|
||
const userRole = document.getElementById('userRole');
|
||
const userIP = document.getElementById('userIP');
|
||
|
||
if (userInfo && userAvatar && userName && userRole && userIP) {
|
||
// 清除之前的admin指示器
|
||
const existingIndicator = userAvatar.querySelector('.admin-indicator');
|
||
if (existingIndicator) {
|
||
existingIndicator.remove();
|
||
}
|
||
|
||
// 根据头像类型显示不同的内容
|
||
if (currentUserInfo.avatar.type === 'image') {
|
||
// 显示图片头像
|
||
userAvatar.innerHTML = `<img src="${currentUserInfo.avatar.src}" alt="用户头像" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">`;
|
||
userAvatar.classList.remove('emoji-avatar');
|
||
} else if (currentUserInfo.avatar.type === 'emoji') {
|
||
// 显示emoji头像
|
||
userAvatar.textContent = currentUserInfo.avatar.emoji;
|
||
userAvatar.classList.add('emoji-avatar');
|
||
}
|
||
|
||
// 如果已经admin登录，添加指示器
|
||
if (currentUserInfo.adminSessionId) {
|
||
const indicator = document.createElement('div');
|
||
indicator.className = 'admin-indicator';
|
||
userAvatar.appendChild(indicator);
|
||
}
|
||
|
||
userName.textContent = currentUserInfo.name;
|
||
userIP.textContent = currentUserInfo.ip;
|
||
|
||
if (currentUserInfo.isAdmin || currentUserInfo.adminSessionId) {
|
||
userRole.innerHTML = `<span class="admin-badge">管理员</span> IP: <span id="userIP">${currentUserInfo.ip}</span>`;
|
||
} else {
|
||
userRole.innerHTML = `IP: <span id="userIP">${currentUserInfo.ip}</span>`;
|
||
}
|
||
|
||
userInfo.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
// Admin登录相关功能
|
||
function showAdminLogin() {
|
||
// 如果已经是admin登录状态，显示登出选项
|
||
if (currentUserInfo.adminSessionId) {
|
||
if (confirm('您已经是管理员登录状态，是否要登出？')) {
|
||
logoutAdmin();
|
||
}
|
||
return;
|
||
}
|
||
|
||
const modal = document.getElementById('adminLoginModal');
|
||
modal.classList.add('active');
|
||
|
||
// 清空表单
|
||
document.getElementById('adminUsername').value = '';
|
||
document.getElementById('adminPassword').value = '';
|
||
document.getElementById('adminLoginMessage').innerHTML = '';
|
||
|
||
// 聚焦到用户名输入框
|
||
setTimeout(() => {
|
||
document.getElementById('adminUsername').focus();
|
||
}, 100);
|
||
}
|
||
|
||
function closeAdminLogin() {
|
||
const modal = document.getElementById('adminLoginModal');
|
||
if (modal) {
|
||
modal.classList.remove('active');
|
||
}
|
||
}
|
||
|
||
async function submitAdminLogin(event) {
|
||
event.preventDefault();
|
||
|
||
const username = document.getElementById('adminUsername').value;
|
||
const password = document.getElementById('adminPassword').value;
|
||
const messageDiv = document.getElementById('adminLoginMessage');
|
||
|
||
if (!username || !password) {
|
||
showAdminMessage('请输入用户名和密码', 'error');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
showAdminMessage('正在登录...', 'info');
|
||
|
||
const formData = new FormData();
|
||
formData.append('username', username);
|
||
formData.append('password', password);
|
||
|
||
const response = await fetch('/admin/login', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok && result.success) {
|
||
// 登录成功
|
||
currentUserInfo.adminSessionId = result.admin_session_id;
|
||
|
||
// 保存admin会话到localStorage
|
||
localStorage.setItem('adminSessionId', result.admin_session_id);
|
||
|
||
showAdminMessage('登录成功！', 'success');
|
||
|
||
// 更新用户界面
|
||
updateUserInfoDisplay();
|
||
|
||
// 重新加载文件列表以显示删除按钮
|
||
loadFiles();
|
||
|
||
// 1秒后关闭弹窗
|
||
setTimeout(() => {
|
||
closeAdminLogin();
|
||
}, 1000);
|
||
|
||
} else {
|
||
showAdminMessage(result.detail || '登录失败', 'error');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Admin登录失败:', error);
|
||
showAdminMessage('网络错误，请稍后重试', 'error');
|
||
}
|
||
}
|
||
|
||
async function logoutAdmin() {
|
||
if (!currentUserInfo.adminSessionId) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('admin_session_id', currentUserInfo.adminSessionId);
|
||
|
||
const response = await fetch('/admin/logout', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok && result.success) {
|
||
console.log('Admin登出成功');
|
||
} else {
|
||
console.warn('Admin登出失败:', result.detail);
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Admin登出请求失败:', error);
|
||
} finally {
|
||
// 无论服务器响应如何，都清除本地状态
|
||
currentUserInfo.adminSessionId = null;
|
||
localStorage.removeItem('adminSessionId');
|
||
updateUserInfoDisplay();
|
||
|
||
// 重新加载文件列表以隐藏删除按钮
|
||
loadFiles();
|
||
}
|
||
}
|
||
|
||
async function checkAdminSession() {
|
||
const sessionId = localStorage.getItem('adminSessionId');
|
||
if (!sessionId) {
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/admin/check_session?admin_session_id=${encodeURIComponent(sessionId)}`);
|
||
const result = await response.json();
|
||
|
||
if (result.valid) {
|
||
currentUserInfo.adminSessionId = sessionId;
|
||
return true;
|
||
} else {
|
||
// 会话无效，清除本地存储
|
||
localStorage.removeItem('adminSessionId');
|
||
return false;
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('检查admin会话失败:', error);
|
||
localStorage.removeItem('adminSessionId');
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function showAdminMessage(message, type) {
|
||
const messageDiv = document.getElementById('adminLoginMessage');
|
||
messageDiv.innerHTML = `<div class="admin-login-${type}">${message}</div>`;
|
||
}
|
||
|
||
// 点击头像事件处理
|
||
function setupAvatarClickEvent() {
|
||
const userAvatar = document.getElementById('userAvatar');
|
||
if (userAvatar) {
|
||
userAvatar.addEventListener('click', showAdminLogin);
|
||
}
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
document.addEventListener('click', function(event) {
|
||
const modal = document.getElementById('adminLoginModal');
|
||
if (event.target === modal) {
|
||
closeAdminLogin();
|
||
}
|
||
});
|
||
|
||
// ESC键关闭弹窗
|
||
document.addEventListener('keydown', function(event) {
|
||
if (event.key === 'Escape') {
|
||
closeAdminLogin();
|
||
}
|
||
});
|
||
|
||
// 格式化上传者信息
|
||
function formatUploaderInfo(uploaderUsername, uploaderIp) {
|
||
// 如果uploader_username包含@符号，说明已经是格式化过的名称
|
||
if (uploaderUsername && uploaderUsername.includes('@')) {
|
||
return uploaderUsername;
|
||
}
|
||
|
||
// 否则尝试从IP映射中获取名称
|
||
if (uploaderIp && ipNameMap[uploaderIp]) {
|
||
return `${ipNameMap[uploaderIp]}@${uploaderIp}`;
|
||
}
|
||
|
||
// fallback：使用原始信息
|
||
return uploaderUsername || uploaderIp || '未知用户';
|
||
}
|
||
|
||
// 初始加载文件列表（在页面完全加载后进行）
|
||
// loadFiles() 现在将在 DOMContentLoaded 事件中调用
|
||
|
||
// 添加开关状态保存
|
||
document.getElementById('quickUploadToggle').addEventListener('change', function(e) {
|
||
const isQuickUpload = e.target.checked;
|
||
document.querySelector('.upload-section').classList.toggle('quick-upload-mode', isQuickUpload);
|
||
|
||
// 保存设置
|
||
localStorage.setItem('quickUpload', isQuickUpload);
|
||
|
||
// 显示状态提示
|
||
showUploadStatus(isQuickUpload ? '已开启快速上传' : '已关闭快速上传');
|
||
});
|
||
|
||
// 添加跳过验证开关
|
||
document.getElementById('skipValidationToggle').addEventListener('change', function(e) {
|
||
const skipValidation = e.target.checked;
|
||
|
||
// 保存设置
|
||
localStorage.setItem('skipValidation', skipValidation);
|
||
|
||
// 显示状态提示
|
||
showUploadStatus(skipValidation ? '已跳过文件名检查' : '已开启文件名检查');
|
||
|
||
// 如果开启跳过验证，清除所有现有的错误提示
|
||
if (skipValidation) {
|
||
document.querySelectorAll('.filename-error').forEach(error => error.remove());
|
||
document.querySelectorAll('.preview-file-name-input').forEach(input => {
|
||
input.classList.remove('invalid');
|
||
});
|
||
}
|
||
});
|
||
|
||
// 添加状态提示函数
|
||
function showUploadStatus(message) {
|
||
let status = document.querySelector('.upload-status');
|
||
if (!status) {
|
||
status = document.createElement('div');
|
||
status.className = 'upload-status';
|
||
document.body.appendChild(status);
|
||
}
|
||
|
||
status.textContent = message;
|
||
status.style.display = 'block';
|
||
|
||
setTimeout(() => {
|
||
status.style.display = 'none';
|
||
}, 2000);
|
||
}
|
||
|
||
// 显示内网资产
|
||
function showInternalAssets() {
|
||
// 创建模态框
|
||
const modal = document.createElement('div');
|
||
modal.className = 'modal-overlay';
|
||
modal.id = 'internalAssetsModal';
|
||
modal.style.display = 'flex';
|
||
|
||
// 创建模态框内容
|
||
const modalContent = document.createElement('div');
|
||
modalContent.className = 'modal';
|
||
modalContent.style.maxWidth = '900px';
|
||
modalContent.style.width = '90%';
|
||
|
||
// 模态框头部
|
||
const modalHeader = document.createElement('div');
|
||
modalHeader.className = 'modal-header';
|
||
modalHeader.innerHTML = `
|
||
<h3><i class="fas fa-network-wired"></i> 内网资产</h3>
|
||
<button class="close-btn" onclick="closeInternalAssetsModal()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
`;
|
||
|
||
// 模态框主体
|
||
const modalBody = document.createElement('div');
|
||
modalBody.className = 'modal-body';
|
||
modalBody.innerHTML = `
|
||
<div class="internal-assets-container">
|
||
<div class="asset-section">
|
||
<h4><i class="fas fa-desktop"></i> 香橙派资源</h4>
|
||
<div class="asset-list">
|
||
<div class="asset-item" data-asset="orange-1panel">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-server"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>香橙派1Panel</h5>
|
||
<p>6.6.6.86:3333/jeremypi</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.86:3333/jeremypi" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
<button class="credential-toggle" id="toggle-orange-1panel" onclick="showCredentials('orange-1panel')">
|
||
<i class="fas fa-eye"></i> 查看账号
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="asset-credentials" id="credentials-orange-1panel" style="display: none;">
|
||
<div class="credential-item">
|
||
<span class="credential-label">账号:</span>
|
||
<span class="credential-value">jeremypi</span>
|
||
<button class="copy-btn" onclick="copyToClipboard('jeremypi', 'orange-pi-1panel')">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
<div class="credential-item">
|
||
<span class="credential-label">密码:</span>
|
||
<span class="credential-value">123tangledup-ai</span>
|
||
<button class="copy-btn" onclick="copyToClipboard('123tangledup-ai', 'orange-pi-1panel')">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="asset-item" data-asset="orange-vscode">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-code"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>香橙派VScode</h5>
|
||
<p>6.6.6.86:8088</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.86:8088" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
<button class="credential-toggle" id="toggle-orange-vscode" onclick="showCredentials('orange-vscode')">
|
||
<i class="fas fa-eye"></i> 查看密码
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="asset-credentials" id="credentials-orange-vscode" style="display: none;">
|
||
<div class="credential-item">
|
||
<span class="credential-label">密码:</span>
|
||
<span class="credential-value">jeremypi</span>
|
||
<button class="copy-btn" onclick="copyToClipboard('jeremypi', 'orange-pi-vscode')">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="asset-section">
|
||
<h4><i class="fas fa-laptop"></i> 台式机资源</h4>
|
||
<div class="asset-list">
|
||
<div class="asset-item" data-asset="desktop-1panel">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-server"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>台式机ubuntu1Panel</h5>
|
||
<p>6.6.6.66:3333/quantspeed</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:3333/quantspeed" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
<button class="credential-toggle" id="toggle-desktop-1panel" onclick="showCredentials('desktop-1panel')">
|
||
<i class="fas fa-eye"></i> 查看账号
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="asset-credentials" id="credentials-desktop-1panel" style="display: none;">
|
||
<div class="credential-item">
|
||
<span class="credential-label">账号:</span>
|
||
<span class="credential-value">quantspeed</span>
|
||
<button class="copy-btn" onclick="copyToClipboard('quantspeed', 'desktop-1panel')">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
<div class="credential-item">
|
||
<span class="credential-label">密码:</span>
|
||
<span class="credential-value">123quantspeed</span>
|
||
<button class="copy-btn" onclick="copyToClipboard('123quantspeed', 'desktop-1panel')">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="asset-item" data-asset="desktop-vscode">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-code"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>台式机VScode</h5>
|
||
<p>6.6.6.66:8080</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:8080" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
<button class="credential-toggle" id="toggle-desktop-vscode" onclick="showCredentials('desktop-vscode')">
|
||
<i class="fas fa-eye"></i> 查看密码
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="asset-credentials" id="credentials-desktop-vscode" style="display: none;">
|
||
<div class="credential-item">
|
||
<span class="credential-label">密码:</span>
|
||
<span class="credential-value">quant-speed</span>
|
||
<button class="copy-btn" onclick="copyToClipboard('quant-speed', 'desktop-vscode')">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="asset-section">
|
||
<h4><i class="fas fa-th-large"></i> 应用服务</h4>
|
||
<div class="asset-list">
|
||
<!-- it-tools -->
|
||
<div class="asset-item" data-asset="it-tools">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-toolbox"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>it-tools</h5>
|
||
<p>6.6.6.66:40116</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:40116" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- langflow -->
|
||
<div class="asset-item" data-asset="langflow">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-wind"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>langflow</h5>
|
||
<p>6.6.6.66:7860</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:7860" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- n8n -->
|
||
<div class="asset-item" data-asset="n8n">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-project-diagram"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>n8n</h5>
|
||
<p>6.6.6.66:5678</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:5678" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- linux-command -->
|
||
<div class="asset-item" data-asset="linux-command">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-terminal"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>Linux指令搜索</h5>
|
||
<p>6.6.6.66:40255</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:40255/" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ntfy -->
|
||
<div class="asset-item" data-asset="ntfy">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-comment-dots"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>ntfy</h5>
|
||
<p>6.6.6.66:40265</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:40265" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- screego -->
|
||
<div class="asset-item" data-asset="screego">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-desktop"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>screego</h5>
|
||
<p>6.6.6.66:5050</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.66:5050" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- qrcode -->
|
||
<div class="asset-item" data-asset="qrcode">
|
||
<div class="asset-info">
|
||
<div class="asset-main">
|
||
<div class="asset-icon">
|
||
<i class="fas fa-qrcode"></i>
|
||
</div>
|
||
<div class="asset-details">
|
||
<h5>叠加态QR-code工具</h5>
|
||
<p>6.6.6.86:8711</p>
|
||
</div>
|
||
<div class="asset-actions">
|
||
<a href="http://6.6.6.86:8711/" target="_blank" class="asset-link">
|
||
<i class="fas fa-external-link-alt"></i> 访问
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 添加样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.internal-assets-container {
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.asset-section {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.asset-section h4 {
|
||
margin-bottom: 15px;
|
||
color: var(--primary-color);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.asset-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.asset-item {
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border: 1px solid rgba(74, 144, 226, 0.1);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.asset-item:hover {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(74, 144, 226, 0.15);
|
||
}
|
||
|
||
.asset-info {
|
||
padding: 0;
|
||
}
|
||
|
||
.asset-main {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20px;
|
||
gap: 15px;
|
||
}
|
||
|
||
.asset-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50px;
|
||
height: 50px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.asset-icon i {
|
||
font-size: 24px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.asset-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.asset-details h5 {
|
||
margin: 0 0 5px 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.asset-details p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: #666;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.asset-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.asset-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 8px 15px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.asset-link:hover {
|
||
background: var(--secondary-color);
|
||
}
|
||
|
||
.credential-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 8px 15px;
|
||
background: #f0f0f0;
|
||
color: var(--text-color);
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.credential-toggle:hover {
|
||
background: #e0e0e0;
|
||
}
|
||
|
||
.asset-credentials {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border-top: 1px solid rgba(74, 144, 226, 0.1);
|
||
padding: 15px 20px;
|
||
animation: slideDown 0.3s ease-in-out;
|
||
}
|
||
|
||
.credential-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.credential-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.credential-label {
|
||
font-weight: 600;
|
||
min-width: 50px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.credential-value {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
font-family: monospace;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.copy-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: var(--secondary-color);
|
||
}
|
||
|
||
.toast-notification {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
transform: translateY(100px);
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.toast-notification.show {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
opacity: 0;
|
||
max-height: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
max-height: 200px;
|
||
}
|
||
}
|
||
`;
|
||
|
||
// 组装模态框
|
||
modalContent.appendChild(modalHeader);
|
||
modalContent.appendChild(modalBody);
|
||
modal.appendChild(modalContent);
|
||
document.head.appendChild(style);
|
||
document.body.appendChild(modal);
|
||
|
||
// 点击模态框外部关闭
|
||
modal.addEventListener('click', function(event) {
|
||
if (event.target === modal) {
|
||
closeInternalAssetsModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 关闭内网资产模态框
|
||
function closeInternalAssetsModal() {
|
||
const modal = document.getElementById('internalAssetsModal');
|
||
if (modal) {
|
||
modal.remove();
|
||
}
|
||
}
|
||
|
||
// 显示账号密码信息
|
||
function showCredentials(assetId) {
|
||
const credentialsSection = document.getElementById(`credentials-${assetId}`);
|
||
const toggleBtn = document.getElementById(`toggle-${assetId}`);
|
||
|
||
if (!credentialsSection || !toggleBtn) {
|
||
console.error('找不到元素:', `credentials-${assetId}`, `toggle-${assetId}`);
|
||
return;
|
||
}
|
||
|
||
if (credentialsSection.style.display === 'none' || !credentialsSection.style.display) {
|
||
// 显示账号密码
|
||
credentialsSection.style.display = 'block';
|
||
toggleBtn.innerHTML = '<i class="fas fa-eye-slash"></i> 隐藏账号';
|
||
} else {
|
||
// 隐藏账号密码
|
||
credentialsSection.style.display = 'none';
|
||
toggleBtn.innerHTML = '<i class="fas fa-eye"></i> 查看账号';
|
||
}
|
||
}
|
||
|
||
// 复制到剪贴板
|
||
function copyToClipboard(text, assetId = null) {
|
||
// 直接复制传入的文本，不再根据assetId复制整个账号密码字符串
|
||
// 创建临时文本区域
|
||
const tempTextArea = document.createElement('textarea');
|
||
tempTextArea.value = text;
|
||
document.body.appendChild(tempTextArea);
|
||
tempTextArea.select();
|
||
|
||
try {
|
||
document.execCommand('copy');
|
||
// 根据文本类型显示不同的提示信息
|
||
if (text === 'jeremypi' || text === 'quant_speed') {
|
||
showToast('账号已复制到剪贴板');
|
||
} else if (text === '123tangledup-ai' || text === '123quantspeed' || text === 'quant-speed') {
|
||
showToast('密码已复制到剪贴板');
|
||
} else {
|
||
showToast('内容已复制到剪贴板');
|
||
}
|
||
} catch (err) {
|
||
showToast('复制失败，请手动复制');
|
||
}
|
||
|
||
// 移除临时文本区域
|
||
document.body.removeChild(tempTextArea);
|
||
}
|
||
|
||
// 显示提示信息
|
||
function showToast(message) {
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast-notification';
|
||
toast.textContent = message;
|
||
document.body.appendChild(toast);
|
||
|
||
// 显示提示
|
||
setTimeout(() => {
|
||
toast.classList.add('show');
|
||
}, 10);
|
||
|
||
// 3秒后隐藏
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
setTimeout(() => {
|
||
document.body.removeChild(toast);
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// 页面加载时初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 恢复快速上传设置
|
||
const quickUpload = localStorage.getItem('quickUpload');
|
||
if (quickUpload !== null) {
|
||
const isQuickUpload = quickUpload === 'true';
|
||
document.getElementById('quickUploadToggle').checked = isQuickUpload;
|
||
document.querySelector('.upload-section').classList.toggle('quick-upload-mode', isQuickUpload);
|
||
}
|
||
|
||
// 恢复跳过验证设置
|
||
const skipValidation = localStorage.getItem('skipValidation');
|
||
if (skipValidation !== null) {
|
||
const isSkipValidation = skipValidation === 'true';
|
||
document.getElementById('skipValidationToggle').checked = isSkipValidation;
|
||
}
|
||
|
||
// 恢复布局设置
|
||
const compactLayout = localStorage.getItem('compactLayout');
|
||
if (compactLayout !== null) {
|
||
isCompactLayout = compactLayout === 'true';
|
||
const btn = document.getElementById('layoutToggleBtn');
|
||
const fileList = document.getElementById('fileList');
|
||
|
||
if (isCompactLayout) {
|
||
fileList.classList.add('compact');
|
||
btn.classList.add('active');
|
||
btn.innerHTML = '<i class="fas fa-th-list"></i>';
|
||
btn.title = '切换到卡片模式';
|
||
} else {
|
||
fileList.classList.remove('compact');
|
||
btn.classList.remove('active');
|
||
btn.innerHTML = '<i class="fas fa-th-large"></i>';
|
||
btn.title = '切换到紧凑模式';
|
||
}
|
||
}
|
||
|
||
// 初始化返回按钮状态
|
||
updateBackButton();
|
||
|
||
// 先加载用户信息，然后加载文件列表
|
||
loadUserInfo().then(() => {
|
||
loadFiles();
|
||
});
|
||
|
||
// 添加长按提示支持
|
||
const quickUploadSwitch = document.querySelector('.quick-upload-switch');
|
||
if (quickUploadSwitch) {
|
||
let pressTimer;
|
||
|
||
quickUploadSwitch.addEventListener('touchstart', () => {
|
||
pressTimer = setTimeout(() => {
|
||
const hint = quickUploadSwitch.querySelector('.quick-upload-hint');
|
||
if (hint) hint.style.display = 'block';
|
||
}, 500);
|
||
});
|
||
|
||
quickUploadSwitch.addEventListener('touchend', () => {
|
||
clearTimeout(pressTimer);
|
||
setTimeout(() => {
|
||
const hint = quickUploadSwitch.querySelector('.quick-upload-hint');
|
||
if (hint) hint.style.display = 'none';
|
||
}, 1000);
|
||
});
|
||
}
|
||
|
||
// 添加搜索框实时搜索
|
||
const searchInput = document.getElementById('searchInput');
|
||
if (searchInput) {
|
||
searchInput.addEventListener('input', function(e) {
|
||
clearTimeout(searchInput.searchTimeout);
|
||
searchInput.searchTimeout = setTimeout(() => {
|
||
currentSearch = e.target.value;
|
||
loadFiles();
|
||
}, 500); // 延迟500ms执行搜索
|
||
});
|
||
}
|
||
|
||
// 添加键盘快捷键
|
||
document.addEventListener('keydown', function(e) {
|
||
// Ctrl+N 或 Cmd+N 创建新文件夹
|
||
if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
|
||
e.preventDefault();
|
||
showCreateFolderDialog();
|
||
}
|
||
|
||
// Escape 关闭模态框
|
||
if (e.key === 'Escape') {
|
||
hideCreateFolderDialog();
|
||
hideMoveFileDialog();
|
||
hideRenameFileDialog();
|
||
hideRenameFolderDialog();
|
||
hideBatchRenameDialog();
|
||
closeInternalAssetsModal();
|
||
}
|
||
|
||
// Enter 在各种对话框中执行相应操作
|
||
if (e.key === 'Enter') {
|
||
if (document.getElementById('createFolderModal').style.display === 'flex') {
|
||
createFolder();
|
||
} else if (document.getElementById('renameFileModal').style.display === 'flex') {
|
||
confirmRenameFile();
|
||
} else if (document.getElementById('renameFolderModal').style.display === 'flex') {
|
||
confirmRenameFolder();
|
||
} else if (document.getElementById('batchRenameModal').style.display === 'flex') {
|
||
applyBatchRename();
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 添加上传进度提示
|
||
function showUploadProgress(show) {
|
||
const progressBar = document.querySelector('.upload-progress');
|
||
if (!progressBar) return;
|
||
|
||
if (show) {
|
||
progressBar.style.display = 'block';
|
||
progressBar.style.width = '100%';
|
||
progressBar.style.transition = 'width 0.3s ease';
|
||
} else {
|
||
progressBar.style.display = 'none';
|
||
progressBar.style.width = '0';
|
||
}
|
||
}
|
||
|
||
// 添加样式以优化取消动画
|
||
const style = document.createElement('style');
|
||
style.textContent += `
|
||
.upload-cancelled {
|
||
opacity: 0.7;
|
||
transform: translateX(100%);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.file-progress {
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
overflow: hidden;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
|
||
<!-- Admin登录弹窗 -->
|
||
<div id="adminLoginModal" class="admin-login-modal">
|
||
<div class="admin-login-content">
|
||
<button class="admin-close-btn" onclick="closeAdminLogin()">×</button>
|
||
<div class="admin-login-header">
|
||
<h3>管理员登录</h3>
|
||
<p>点击头像登录管理员账号</p>
|
||
</div>
|
||
<div id="adminLoginMessage"></div>
|
||
<form class="admin-login-form" onsubmit="submitAdminLogin(event)">
|
||
<div class="admin-form-group">
|
||
<label for="adminUsername">用户名</label>
|
||
<input type="text" id="adminUsername" name="username" required autocomplete="username">
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label for="adminPassword">密码</label>
|
||
<input type="password" id="adminPassword" name="password" required autocomplete="current-password">
|
||
</div>
|
||
<div class="admin-login-buttons">
|
||
<button type="button" class="admin-btn admin-btn-secondary" onclick="closeAdminLogin()">取消</button>
|
||
<button type="submit" class="admin-btn admin-btn-primary">登录</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |