237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🎨 完善暗色主题：修复右键菜单、分享页面等

Browse Source 
- 修复右键菜单白色背景问题（改为暗色玻璃效果）
- 修复分享成功链接不可见问题（添加绿色高亮）
- 修复媒体预览器白色背景
- 完全重写share.html为暗色主题（与主应用风格统一）

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yuyx
2025-11-27 22:51:24 +08:00
parent accccf261d
commit 138bda9ae5
2 changed files with 257 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/app.html
View File

@@ -1276,12 +1276,12 @@
</div> </div>
<div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;"> <div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;">
<strong>分享链接：</strong><br> <strong>分享链接：</strong><br>
<a :href="shareResult.share_url" target="_blank">{{ shareResult.share_url }}</a> <a :href="shareResult.share_url" target="_blank" style="color: #22c55e; word-break: break-all;">{{ shareResult.share_url }}</a>
<div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;"> <div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
<strong>到期时间：</strong> <strong>到期时间：</strong>
<span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#ffc107' : '#28a745'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span> <span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#f59e0b' : '#22c55e'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span>
</div> </div>
<div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;"> <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
<strong>有效期：</strong> <strong>有效期：</strong>
<span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span> <span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
</div> </div>
@@ -1321,12 +1321,12 @@
</div> </div>
<div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;"> <div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;">
<strong>分享链接：</strong><br> <strong>分享链接：</strong><br>
<a :href="shareResult.share_url" target="_blank">{{ shareResult.share_url }}</a> <a :href="shareResult.share_url" target="_blank" style="color: #22c55e; word-break: break-all;">{{ shareResult.share_url }}</a>
<div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;"> <div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
<strong>到期时间：</strong> <strong>到期时间：</strong>
<span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#ffc107' : '#28a745'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span> <span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#f59e0b' : '#22c55e'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span>
</div> </div>
<div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;"> <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
<strong>有效期：</strong> <strong>有效期：</strong>
<span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span> <span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
</div> </div>
@@ -2783,9 +2783,11 @@
/* 右键菜单样式 */ /* 右键菜单样式 */
.context-menu { .context-menu {
position: fixed; position: fixed;
background: white; background: var(--bg-secondary);
border-radius: 8px; backdrop-filter: blur(20px);
box-shadow: 0 4px 20px rgba(0,0,0,0.15); border: 1px solid var(--glass-border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
min-width: 160px; min-width: 160px;
z-index: 10000; z-index: 10000;
overflow: hidden; overflow: hidden;
@@ -2815,25 +2817,32 @@
} }
.context-menu-item:hover { .context-menu-item:hover {
background: rgba(255,255,255,0.03); background: rgba(102, 126, 234, 0.15);
color: var(--accent-1);
} }
.context-menu-item i { .context-menu-item i {
width: 16px; width: 16px;
text-align: center; text-align: center;
color: var(--accent-1);
} }
.context-menu-item-danger { .context-menu-item-danger {
color: #ef4444; color: #ef4444;
} }
.context-menu-item-danger i {
color: #ef4444;
}
.context-menu-item-danger:hover { .context-menu-item-danger:hover {
background: rgba(239, 68, 68, 0.1); background: rgba(239, 68, 68, 0.15);
color: #ef4444;
} }
.context-menu-divider { .context-menu-divider {
height: 1px; height: 1px;
background: rgba(255,255,255,0.1); background: var(--glass-border);
margin: 4px 0; margin: 4px 0;
} }
@@ -2841,7 +2850,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.context-menu { .context-menu {
min-width: 180px; min-width: 180px;
box-shadow: 0 8px 32px rgba(0,0,0,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
} }
.context-menu-item { .context-menu-item {
@@ -2852,14 +2861,15 @@
/* 媒体预览器样式 */ /* 媒体预览器样式 */
.media-viewer-content { .media-viewer-content {
background: white; background: var(--bg-secondary);
border-radius: 12px; border: 1px solid var(--glass-border);
border-radius: 16px;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
} }
.media-viewer-header { .media-viewer-header {
@@ -2867,7 +2877,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 15px 20px; padding: 15px 20px;
background: #667eea; background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
color: white; color: white;
} }

310
frontend/share.html
View File

@@ -11,101 +11,225 @@
/* 防止 Vue 初始化前显示原始模板 */ /* 防止 Vue 初始化前显示原始模板 */
[v-cloak] { display: none !important; } [v-cloak] { display: none !important; }
/* ========== 暗色主题 CSS 变量 ========== */
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #12121a;
--bg-card: rgba(255, 255, 255, 0.03);
--bg-card-hover: rgba(255, 255, 255, 0.06);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-border-hover: rgba(102, 126, 234, 0.3);
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.6);
--text-muted: rgba(255, 255, 255, 0.4);
--accent-1: #667eea;
--accent-2: #764ba2;
--accent-3: #f093fb;
--glow: rgba(102, 126, 234, 0.4);
--danger: #ef4444;
--success: #22c55e;
--warning: #f59e0b;
}
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { body {
font-family: Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh; min-height: 100vh;
padding: 20px; padding: 20px;
} }
/* 动态背景 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at top right, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
z-index: -1;
}
.container { .container {
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
} }
.card { .card {
background: white; background: var(--bg-card);
border-radius: 12px; backdrop-filter: blur(20px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
padding: 30px; padding: 30px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: #667eea; background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.title i {
-webkit-text-fill-color: var(--accent-1);
}
.form-group { margin-bottom: 20px; } .form-group { margin-bottom: 20px; }
.form-label { .form-label {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500; font-weight: 500;
color: #555; color: var(--text-secondary);
font-size: 14px;
} }
.form-input { .form-input {
width: 100%; width: 100%;
padding: 12px 16px; padding: 14px 16px;
border: 2px solid #e0e0e0; background: rgba(255, 255, 255, 0.05);
border-radius: 8px; border: 1px solid var(--glass-border);
border-radius: 12px;
font-size: 14px; font-size: 14px;
color: var(--text-primary);
transition: all 0.3s;
} }
.form-input:focus {
outline: none;
border-color: var(--accent-1);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.form-input::placeholder {
color: var(--text-muted);
}
.btn { .btn {
padding: 10px 20px; padding: 12px 24px;
border: none; border: none;
border-radius: 6px; border-radius: 10px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
} }
.btn-primary { .btn-primary {
background: #667eea; background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
color: white; color: white;
box-shadow: 0 4px 15px var(--glow);
} }
.btn-primary:hover { background: #5568d3; }
.alert { padding: 12px; border-radius: 8px; margin-bottom: 15px; } .btn-primary:hover {
.alert-error { background: #f8d7da; color: #721c24; } transform: translateY(-2px);
box-shadow: 0 6px 20px var(--glow);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--glass-border);
color: var(--text-primary);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--glass-border-hover);
}
.alert {
padding: 14px 16px;
border-radius: 12px;
margin-bottom: 15px;
border: 1px solid transparent;
}
.alert-error {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.file-list { .file-list {
list-style: none; list-style: none;
} }
.file-item { .file-item {
padding: 15px; padding: 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--glass-border);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
transition: all 0.3s;
} }
.file-item:hover { .file-item:hover {
background: #f5f5f5; background: var(--bg-card-hover);
} }
.file-info { .file-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
} }
/* 列表视图文件名容器 */
.file-name-container { .file-name-container {
flex: 1; flex: 1;
min-width: 0; /* 允许flex子项缩小到内容大小以下 */ min-width: 0;
max-width: 100%; max-width: 100%;
} }
.file-name-text { .file-name-text {
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
color: var(--text-primary);
} }
.file-icon {
.file-icon {
font-size: 24px; font-size: 24px;
} }
.loading { .loading {
text-align: center; text-align: center;
padding: 40px; padding: 40px;
color: #999; color: var(--text-secondary);
} }
.spinner {
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--accent-1);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 视图切换按钮 */ /* 视图切换按钮 */
.view-controls { .view-controls {
display: flex; display: flex;
@@ -113,13 +237,7 @@
gap: 10px; gap: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.btn-secondary {
background: #e0e0e0;
color: #333;
}
.btn-secondary:hover {
background: #d0d0d0;
}
/* 大图标视图 */ /* 大图标视图 */
.file-grid { .file-grid {
display: grid; display: grid;
@@ -127,27 +245,31 @@
gap: 25px; gap: 25px;
padding: 10px 0; padding: 10px 0;
} }
.file-grid-item { .file-grid-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px 15px; padding: 20px 15px;
border: 2px solid #e8e8e8; border: 1px solid var(--glass-border);
border-radius: 12px; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
background: #fff; background: var(--bg-card);
} }
.file-grid-item:hover { .file-grid-item:hover {
background: #f8f9fa; background: var(--bg-card-hover);
box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: var(--glass-border-hover);
border-color: #667eea; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
transform: translateY(-3px); transform: translateY(-4px);
} }
.file-grid-icon { .file-grid-icon {
font-size: 56px; font-size: 56px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.file-grid-name { .file-grid-name {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@@ -155,8 +277,7 @@
word-break: break-all; word-break: break-all;
margin-bottom: 8px; margin-bottom: 8px;
max-width: 100%; max-width: 100%;
color: #333; color: var(--text-primary);
/* 固定显示2行，超出显示省略号 */
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@@ -166,11 +287,13 @@
min-height: 39px; min-height: 39px;
max-height: 39px; max-height: 39px;
} }
.file-grid-size { .file-grid-size {
font-size: 12px; font-size: 12px;
color: #999; color: var(--text-muted);
margin-bottom: 12px; margin-bottom: 12px;
} }
/* 单文件居中显示 */ /* 单文件居中显示 */
.single-file-container { .single-file-container {
display: flex; display: flex;
@@ -179,88 +302,77 @@
padding: 40px 20px; padding: 40px 20px;
min-height: 300px; min-height: 300px;
} }
.single-file-card { .single-file-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 50px 40px; padding: 50px 40px;
border: 2px solid #e0e0e0; border: 1px solid var(--glass-border);
border-radius: 16px; border-radius: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
box-shadow: 0 8px 24px rgba(0,0,0,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.3);
max-width: 500px; max-width: 500px;
width: 100%; width: 100%;
transition: all 0.3s; transition: all 0.3s;
} }
.single-file-card:hover { .single-file-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(0,0,0,0.18); box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
} }
.single-file-icon { .single-file-icon {
font-size: 120px; font-size: 120px;
margin-bottom: 25px; margin-bottom: 25px;
animation: float 3s ease-in-out infinite; animation: float 3s ease-in-out infinite;
} }
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0px); } 0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); } 50% { transform: translateY(-10px); }
} }
.single-file-name { .single-file-name {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
word-break: break-word; word-break: break-word;
margin-bottom: 15px; margin-bottom: 15px;
color: #333; color: var(--text-primary);
/* 限制文件名显示，防止过长溢出 */
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; /* 最多显示3行 */ -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
line-height: 1.4; line-height: 1.4;
} }
.single-file-size { .single-file-size {
font-size: 16px; font-size: 16px;
color: #666; color: var(--text-secondary);
margin-bottom: 30px; margin-bottom: 30px;
} }
.single-file-download { .single-file-download {
padding: 15px 40px; padding: 15px 40px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
color: white; color: white;
border: none; border: none;
border-radius: 30px; border-radius: 30px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); box-shadow: 0 4px 15px var(--glow);
} }
.single-file-download:hover { .single-file-download:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); box-shadow: 0 6px 25px var(--glow);
}
/* 响应式设计 */
@media (max-width: 768px) {
.single-file-card {
padding: 30px 20px;
}
.single-file-icon {
font-size: 80px;
}
.single-file-name {
font-size: 16px;
}
.single-file-size {
font-size: 14px;
}
.single-file-download {
padding: 12px 30px;
font-size: 14px;
}
} }
/* 分享不存在提示 */ /* 分享不存在提示 */
.share-not-found { .share-not-found {
display: flex; display: flex;
@@ -270,25 +382,29 @@
padding: 60px 20px; padding: 60px 20px;
text-align: center; text-align: center;
} }
.share-not-found-icon { .share-not-found-icon {
font-size: 100px; font-size: 100px;
color: #ccc; color: var(--text-muted);
margin-bottom: 30px; margin-bottom: 30px;
animation: fadeIn 0.5s; animation: fadeIn 0.5s;
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); } from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); } to { opacity: 1; transform: scale(1); }
} }
.share-not-found-title { .share-not-found-title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #666; color: var(--text-secondary);
margin-bottom: 15px; margin-bottom: 15px;
} }
.share-not-found-message { .share-not-found-message {
font-size: 16px; font-size: 16px;
color: #999; color: var(--text-muted);
line-height: 1.6; line-height: 1.6;
} }
@@ -302,14 +418,13 @@
} }
.card { .card {
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 12px;
} }
.title { .title {
font-size: 20px; font-size: 20px;
margin-bottom: 15px; margin-bottom: 15px;
} }
/* 视图切换按钮移动端优化 */
.view-controls { .view-controls {
margin-bottom: 15px; margin-bottom: 15px;
} }
@@ -318,7 +433,6 @@
font-size: 13px; font-size: 13px;
} }
/* 表单移动端优化 */
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 15px;
} }
@@ -335,7 +449,6 @@
font-size: 14px; font-size: 14px;
} }
/* 文件网格视图移动端优化 */
.file-grid { .file-grid {
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 15px; gap: 15px;
@@ -361,7 +474,6 @@
font-size: 12px; font-size: 12px;
} }
/* 列表视图移动端优化 */
.file-list { .file-list {
padding: 0; padding: 0;
} }
@@ -383,7 +495,6 @@
padding: 8px 12px; padding: 8px 12px;
} }
/* 单文件显示移动端优化 */
.single-file-container { .single-file-container {
padding: 20px 10px; padding: 20px 10px;
min-height: 250px; min-height: 250px;
@@ -409,7 +520,6 @@
font-size: 14px; font-size: 14px;
} }
/* 分享不存在提示移动端优化 */
.share-not-found { .share-not-found {
padding: 40px 15px; padding: 40px 15px;
} }
@@ -425,13 +535,12 @@
font-size: 14px; font-size: 14px;
} }
/* 加载状态移动端优化 */
.loading { .loading {
padding: 30px 15px; padding: 30px 15px;
} }
} }
/* 超小屏幕优化 (手机竖屏) */ /* 超小屏幕优化 */
@media (max-width: 480px) { @media (max-width: 480px) {
.card { .card {
padding: 15px; padding: 15px;
@@ -440,7 +549,6 @@
font-size: 18px; font-size: 18px;
} }
/* 文件网格更紧凑 */
.file-grid { .file-grid {
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
gap: 10px; gap: 10px;
@@ -457,7 +565,6 @@
font-size: 10px; font-size: 10px;
} }
/* 单文件显示更紧凑 */
.single-file-icon { .single-file-icon {
font-size: 60px !important; font-size: 60px !important;
} }
@@ -472,12 +579,27 @@
font-size: 13px; font-size: 13px;
} }
/* 视图切换按钮 */
.view-controls .btn { .view-controls .btn {
padding: 6px 10px; padding: 6px 10px;
font-size: 12px; font-size: 12px;
} }
} }
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.15);
}
</style> </style>
</head> </head>
<body> <body>
@@ -494,7 +616,7 @@
</div> </div>
<!-- 通用错误显示 --> <!-- 通用错误显示 -->
<div v-if="errorMessage && !needPassword && !verified && !shareNotFound" class="share-not-found"> <div v-if="errorMessage && !needPassword && !verified && !shareNotFound" class="share-not-found">
<i class="fas fa-exclamation-circle share-not-found-icon" style="color: #dc3545;"></i> <i class="fas fa-exclamation-circle share-not-found-icon" style="color: #ef4444;"></i>
<div class="share-not-found-title">访问失败</div> <div class="share-not-found-title">访问失败</div>
<div class="share-not-found-message">{{ errorMessage }}</div> <div class="share-not-found-message">{{ errorMessage }}</div>
</div> </div>
@@ -524,11 +646,11 @@
<!-- 文件列表 --> <!-- 文件列表 -->
<div v-else-if="verified"> <div v-else-if="verified">
<p style="color: #666; margin-bottom: 20px;"> <p style="color: var(--text-secondary); margin-bottom: 20px;">
分享者: <strong>{{ shareInfo.username }}</strong> | 分享者: <strong style="color: var(--text-primary);">{{ shareInfo.username }}</strong> |
创建时间: {{ formatDate(shareInfo.created_at) }} 创建时间: {{ formatDate(shareInfo.created_at) }}
<span v-if="shareInfo.expires_at"> | 到期时间: <strong :style="{color: isExpiringSoon(shareInfo.expires_at) ? '#ffc107' : isExpired(shareInfo.expires_at) ? '#dc3545' : '#28a745'}">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span> <span v-if="shareInfo.expires_at"> | 到期时间: <strong :style="{color: isExpiringSoon(shareInfo.expires_at) ? '#f59e0b' : isExpired(shareInfo.expires_at) ? '#ef4444' : '#22c55e'}">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span>
<span v-else> | 有效期: <strong style="color: #28a745;">永久有效</strong></span> <span v-else> | 有效期: <strong style="color: #22c55e;">永久有效</strong></span>
</p> </p>
<!-- 视图切换按钮 (多文件时才显示) --> <!-- 视图切换按钮 (多文件时才显示) -->
@@ -546,7 +668,6 @@
<p>加载中...</p> <p>加载中...</p>
</div> </div>
<!-- 大图标视图 - 单文件居中显示 -->
<!-- 单文件居中显示 --> <!-- 单文件居中显示 -->
<div v-else-if="viewingFile || files.length === 1" class="single-file-container"> <div v-else-if="viewingFile || files.length === 1" class="single-file-container">
<div class="single-file-card"> <div class="single-file-card">
@@ -584,7 +705,7 @@
<i class="file-icon fas" :class="getFileIcon(file)" :style="getIconColor(file)"></i> <i class="file-icon fas" :class="getFileIcon(file)" :style="getIconColor(file)"></i>
<div class="file-name-container"> <div class="file-name-container">
<div class="file-name-text">{{ file.name }}</div> <div class="file-name-text">{{ file.name }}</div>
<div style="font-size: 12px; color: #999;">{{ file.sizeFormatted }}</div> <div style="font-size: 12px; color: var(--text-muted);">{{ file.sizeFormatted }}</div>
</div> </div>
</div> </div>
<button v-if="!file.isDirectory" class="btn btn-primary" @click.stop="downloadFile(file)"> <button v-if="!file.isDirectory" class="btn btn-primary" @click.stop="downloadFile(file)">
@@ -593,7 +714,7 @@
</li> </li>
</ul> </ul>
<p v-if="files.length === 0" style="text-align: center; color: #999; padding: 40px;"> <p v-if="files.length === 0" style="text-align: center; color: var(--text-muted); padding: 40px;">
暂无文件 暂无文件
</p> </p>
</div> </div>
@@ -842,8 +963,7 @@
second: '2-digit', second: '2-digit',
hour12: false hour12: false
}); });
} },
,
// 格式化到期时间显示 // 格式化到期时间显示
formatExpireTime(expiresAt) { formatExpireTime(expiresAt) {