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

68
frontend/app.html
View File

@@ -1276,12 +1276,12 @@
</div>
<div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;">
<strong>分享链接：</strong><br>
<a :href="shareResult.share_url" target="_blank">{{ shareResult.share_url }}</a>
<div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
<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 rgba(34, 197, 94, 0.3);">
<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 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>
<span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
</div>
@@ -1321,12 +1321,12 @@
</div>
<div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;">
<strong>分享链接：</strong><br>
<a :href="shareResult.share_url" target="_blank">{{ shareResult.share_url }}</a>
<div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
<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 rgba(34, 197, 94, 0.3);">
<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 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>
<span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
</div>
@@ -2783,15 +2783,17 @@
/* 右键菜单样式 */
.context-menu {
position: fixed;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
background: var(--bg-secondary);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
min-width: 160px;
z-index: 10000;
overflow: hidden;
animation: contextMenuFadeIn 0.15s ease-out;
}
@keyframes contextMenuFadeIn {
from {
opacity: 0;
@@ -2802,7 +2804,7 @@
transform: scale(1);
}
}
.context-menu-item {
padding: 12px 16px;
cursor: pointer;
@@ -2813,37 +2815,44 @@
color: var(--text-primary);
font-size: 14px;
}
.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 {
width: 16px;
text-align: center;
color: var(--accent-1);
}
.context-menu-item-danger {
color: #ef4444;
}
.context-menu-item-danger:hover {
background: rgba(239, 68, 68, 0.1);
.context-menu-item-danger i {
color: #ef4444;
}
.context-menu-item-danger:hover {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.context-menu-divider {
height: 1px;
background: rgba(255,255,255,0.1);
background: var(--glass-border);
margin: 4px 0;
}
/* 移动端优化 */
@media (max-width: 768px) {
.context-menu {
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 {
padding: 14px 18px;
font-size: 15px;
@@ -2852,14 +2861,15 @@
/* 媒体预览器样式 */
.media-viewer-content {
background: white;
border-radius: 12px;
background: var(--bg-secondary);
border: 1px solid var(--glass-border);
border-radius: 16px;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
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 {
@@ -2867,7 +2877,7 @@
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #667eea;
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
color: white;
}

316
frontend/share.html
View File

@@ -11,101 +11,225 @@
/* 防止 Vue 初始化前显示原始模板 */
[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; }
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
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 {
max-width: 1000px;
margin: 0 auto;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
padding: 30px;
margin-bottom: 20px;
}
.title {
font-size: 24px;
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;
display: flex;
align-items: center;
gap: 10px;
}
.title i {
-webkit-text-fill-color: var(--accent-1);
}
.form-group { margin-bottom: 20px; }
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
color: var(--text-secondary);
font-size: 14px;
}
.form-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
border-radius: 12px;
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 {
padding: 10px 20px;
padding: 12px 24px;
border: none;
border-radius: 6px;
border-radius: 10px;
cursor: pointer;
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 {
background: #667eea;
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
color: white;
box-shadow: 0 4px 15px var(--glow);
}
.btn-primary:hover { background: #5568d3; }
.alert { padding: 12px; border-radius: 8px; margin-bottom: 15px; }
.alert-error { background: #f8d7da; color: #721c24; }
.btn-primary:hover {
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 {
list-style: none;
}
.file-item {
padding: 15px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s;
}
.file-item:hover {
background: #f5f5f5;
background: var(--bg-card-hover);
}
.file-info {
display: flex;
align-items: center;
gap: 15px;
}
/* 列表视图文件名容器 */
.file-name-container {
flex: 1;
min-width: 0; /* 允许flex子项缩小到内容大小以下 */
min-width: 0;
max-width: 100%;
}
.file-name-text {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
color: var(--text-primary);
}
.file-icon {
.file-icon {
font-size: 24px;
}
.loading {
text-align: center;
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 {
display: flex;
@@ -113,13 +237,7 @@
gap: 10px;
margin-bottom: 20px;
}
.btn-secondary {
background: #e0e0e0;
color: #333;
}
.btn-secondary:hover {
background: #d0d0d0;
}
/* 大图标视图 */
.file-grid {
display: grid;
@@ -127,27 +245,31 @@
gap: 25px;
padding: 10px 0;
}
.file-grid-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 15px;
border: 2px solid #e8e8e8;
border: 1px solid var(--glass-border);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
background: #fff;
background: var(--bg-card);
}
.file-grid-item:hover {
background: #f8f9fa;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #667eea;
transform: translateY(-3px);
background: var(--bg-card-hover);
border-color: var(--glass-border-hover);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
transform: translateY(-4px);
}
.file-grid-icon {
font-size: 56px;
margin-bottom: 12px;
}
.file-grid-name {
font-size: 14px;
font-weight: 500;
@@ -155,8 +277,7 @@
word-break: break-all;
margin-bottom: 8px;
max-width: 100%;
color: #333;
/* 固定显示2行，超出显示省略号 */
color: var(--text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -166,11 +287,13 @@
min-height: 39px;
max-height: 39px;
}
.file-grid-size {
font-size: 12px;
color: #999;
color: var(--text-muted);
margin-bottom: 12px;
}
/* 单文件居中显示 */
.single-file-container {
display: flex;
@@ -179,88 +302,77 @@
padding: 40px 20px;
min-height: 300px;
}
.single-file-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 40px;
border: 2px solid #e0e0e0;
border-radius: 16px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
border: 1px solid var(--glass-border);
border-radius: 20px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
max-width: 500px;
width: 100%;
transition: all 0.3s;
}
.single-file-card:hover {
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 {
font-size: 120px;
margin-bottom: 25px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.single-file-name {
font-size: 20px;
font-weight: 600;
text-align: center;
word-break: break-word;
margin-bottom: 15px;
color: #333;
/* 限制文件名显示，防止过长溢出 */
color: var(--text-primary);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 最多显示3行 */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.4;
}
.single-file-size {
font-size: 16px;
color: #666;
color: var(--text-secondary);
margin-bottom: 30px;
}
.single-file-download {
padding: 15px 40px;
font-size: 16px;
font-weight: 600;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
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 {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
/* 响应式设计 */
@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;
}
box-shadow: 0 6px 25px var(--glow);
}
/* 分享不存在提示 */
.share-not-found {
display: flex;
@@ -270,25 +382,29 @@
padding: 60px 20px;
text-align: center;
}
.share-not-found-icon {
font-size: 100px;
color: #ccc;
color: var(--text-muted);
margin-bottom: 30px;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
.share-not-found-title {
font-size: 24px;
font-weight: 600;
color: #666;
color: var(--text-secondary);
margin-bottom: 15px;
}
.share-not-found-message {
font-size: 16px;
color: #999;
color: var(--text-muted);
line-height: 1.6;
}
@@ -302,14 +418,13 @@
}
.card {
padding: 20px;
border-radius: 8px;
border-radius: 12px;
}
.title {
font-size: 20px;
margin-bottom: 15px;
}
/* 视图切换按钮移动端优化 */
.view-controls {
margin-bottom: 15px;
}
@@ -318,7 +433,6 @@
font-size: 13px;
}
/* 表单移动端优化 */
.form-group {
margin-bottom: 15px;
}
@@ -335,7 +449,6 @@
font-size: 14px;
}
/* 文件网格视图移动端优化 */
.file-grid {
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 15px;
@@ -361,7 +474,6 @@
font-size: 12px;
}
/* 列表视图移动端优化 */
.file-list {
padding: 0;
}
@@ -383,7 +495,6 @@
padding: 8px 12px;
}
/* 单文件显示移动端优化 */
.single-file-container {
padding: 20px 10px;
min-height: 250px;
@@ -409,7 +520,6 @@
font-size: 14px;
}
/* 分享不存在提示移动端优化 */
.share-not-found {
padding: 40px 15px;
}
@@ -425,13 +535,12 @@
font-size: 14px;
}
/* 加载状态移动端优化 */
.loading {
padding: 30px 15px;
}
}
/* 超小屏幕优化 (手机竖屏) */
/* 超小屏幕优化 */
@media (max-width: 480px) {
.card {
padding: 15px;
@@ -440,7 +549,6 @@
font-size: 18px;
}
/* 文件网格更紧凑 */
.file-grid {
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
gap: 10px;
@@ -457,7 +565,6 @@
font-size: 10px;
}
/* 单文件显示更紧凑 */
.single-file-icon {
font-size: 60px !important;
}
@@ -472,12 +579,27 @@
font-size: 13px;
}
/* 视图切换按钮 */
.view-controls .btn {
padding: 6px 10px;
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>
</head>
<body>
@@ -494,7 +616,7 @@
</div>
<!-- 通用错误显示 -->
<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-message">{{ errorMessage }}</div>
</div>
@@ -524,11 +646,11 @@
<!-- 文件列表 -->
<div v-else-if="verified">
<p style="color: #666; margin-bottom: 20px;">
分享者: <strong>{{ shareInfo.username }}</strong> |
<p style="color: var(--text-secondary); margin-bottom: 20px;">
分享者: <strong style="color: var(--text-primary);">{{ shareInfo.username }}</strong> |
创建时间: {{ 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-else> | 有效期: <strong style="color: #28a745;">永久有效</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: #22c55e;">永久有效</strong></span>
</p>
<!-- 视图切换按钮 (多文件时才显示) -->
@@ -546,7 +668,6 @@
<p>加载中...</p>
</div>
<!-- 大图标视图 - 单文件居中显示 -->
<!-- 单文件居中显示 -->
<div v-else-if="viewingFile || files.length === 1" class="single-file-container">
<div class="single-file-card">
@@ -584,7 +705,7 @@
<i class="file-icon fas" :class="getFileIcon(file)" :style="getIconColor(file)"></i>
<div class="file-name-container">
<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>
<button v-if="!file.isDirectory" class="btn btn-primary" @click.stop="downloadFile(file)">
@@ -593,7 +714,7 @@
</li>
</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>
</div>
@@ -824,14 +945,14 @@
formatDate(dateString) {
if (!dateString) return '';
// SQLite 返回的是 UTC 时间字符串，需要显式处理
let dateStr = dateString;
if (!dateStr.includes('Z') && !dateStr.includes('+') && !dateStr.includes('T')) {
// SQLite 格式: "2025-11-13 16:37:19" -> ISO格式: "2025-11-13T16:37:19Z"
dateStr = dateStr.replace(' ', 'T') + 'Z';
}
const date = new Date(dateStr);
return date.toLocaleString('zh-CN', {
year: 'numeric',
@@ -842,8 +963,7 @@
second: '2-digit',
hour12: false
});
}
,
},
// 格式化到期时间显示
formatExpireTime(expiresAt) {
@@ -908,7 +1028,7 @@
<script>
// 检查是否启用调试模式
const isDebugMode = localStorage.getItem('debugMode') === 'true';
// 禁用右键菜单（调试模式下不禁用）
if (!isDebugMode) {
document.addEventListener('contextmenu', function(e) {