+
有效期：
永久有效
@@ -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;
}
diff --git a/frontend/share.html b/frontend/share.html
index 698cfbe..246d18d 100644
--- a/frontend/share.html
+++ b/frontend/share.html
@@ -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);
+ }
@@ -494,7 +616,7 @@
@@ -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 @@