🐛 修复暗色主题下存储管理区域的样式冲突
- 修复存储管理外层容器的白色渐变背景 - 修复本地存储和SFTP存储卡片的白色背景 - 修复上传进度条的白色背景 - 修复SFTP配置卡片的白色背景 - 统一使用CSS变量实现主题适配 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1379,7 +1379,7 @@
|
|||||||
<p style="margin: 8px 0 0 0; opacity: 0.9; font-size: 14px;">先配置连接信息，再切换到你的专属 SFTP 空间。</p>
|
<p style="margin: 8px 0 0 0; opacity: 0.9; font-size: 14px;">先配置连接信息，再切换到你的专属 SFTP 空间。</p>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 18px;">
|
<div style="padding: 18px;">
|
||||||
<p style="color: #4b5563; line-height: 1.6; margin-bottom: 16px;">
|
<p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px;">
|
||||||
我们会在你填写完成后再切换，确保过程平滑无干扰。
|
我们会在你填写完成后再切换，确保过程平滑无干扰。
|
||||||
</p>
|
</p>
|
||||||
<div style="display: flex; gap: 10px; justify-content: flex-end;">
|
<div style="display: flex; gap: 10px; justify-content: flex-end;">
|
||||||
@@ -1461,7 +1461,7 @@
|
|||||||
<i class="fas fa-database"></i> 存储管理
|
<i class="fas fa-database"></i> 存储管理
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div style="background: linear-gradient(135deg, #f3f5ff 0%, #eef7ff 100%); padding: 22px; border-radius: 14px; box-shadow: 0 10px 30px rgba(102,126,234,0.12); border: 1px solid #e3e9ff;">
|
<div style="background: var(--bg-card); backdrop-filter: blur(20px); padding: 22px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid var(--glass-border);">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;">
|
<div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;">
|
||||||
<div style="display: flex; align-items: center; gap: 10px;">
|
<div style="display: flex; align-items: center; gap: 10px;">
|
||||||
<span style="font-weight: 700; color: var(--text-primary);">当前模式</span>
|
<span style="font-weight: 700; color: var(--text-primary);">当前模式</span>
|
||||||
@@ -1486,7 +1486,7 @@
|
|||||||
<div v-else style="color: var(--text-secondary); font-size: 13px;">本地存储适合快速读写，SFTP 适合独立服务器空间</div>
|
<div v-else style="color: var(--text-secondary); font-size: 13px;">本地存储适合快速读写，SFTP 适合独立服务器空间</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 16px; background: white; border-radius: 12px; padding: 12px; border: 1px solid var(--glass-border);">
|
<div style="margin-top: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 12px; border: 1px solid var(--glass-border);">
|
||||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: center;">
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: center;">
|
||||||
<div style="height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; position: relative; overflow: hidden;">
|
<div style="height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; position: relative; overflow: hidden;">
|
||||||
<div :style="{
|
<div :style="{
|
||||||
@@ -1503,10 +1503,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch;">
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch;">
|
||||||
<div style="background: white; border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
|
<div style="background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 100%;">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||||
<div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
|
<div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
|
||||||
<i class="fas fa-hard-drive"></i> 本地存储
|
<i class="fas fa-hard-drive" style="color: var(--accent-1);"></i> 本地存储
|
||||||
</div>
|
</div>
|
||||||
<span v-if="storageType === 'local'" style="font-size: 12px; color: #22c55e; background: rgba(40,167,69,0.12); padding: 4px 8px; border-radius: 999px;">当前</span>
|
<span v-if="storageType === 'local'" style="font-size: 12px; color: #22c55e; background: rgba(40,167,69,0.12); padding: 4px 8px; border-radius: 999px;">当前</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -1530,12 +1530,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="background: white; border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
|
<div style="background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 100%;">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||||
<div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
|
<div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
|
||||||
<i class="fas fa-server"></i> SFTP 存储
|
<i class="fas fa-server" style="color: var(--accent-1);"></i> SFTP 存储
|
||||||
</div>
|
</div>
|
||||||
<span v-if="storageType === 'sftp'" style="font-size: 12px; color: #4b5fc9; background: rgba(102,126,234,0.15); padding: 4px 8px; border-radius: 999px;">当前</span>
|
<span v-if="storageType === 'sftp'" style="font-size: 12px; color: var(--accent-1); background: rgba(102,126,234,0.15); padding: 4px 8px; border-radius: 999px;">当前</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="color: var(--text-secondary); font-size: 13px; margin-bottom: 10px;">使用你自己的服务器空间，独立存储更灵活。</div>
|
<div style="color: var(--text-secondary); font-size: 13px; margin-bottom: 10px;">使用你自己的服务器空间，独立存储更灵活。</div>
|
||||||
<div v-if="user?.has_ftp_config" style="font-size: 13px; color: var(--text-primary); margin-bottom: 10px;">
|
<div v-if="user?.has_ftp_config" style="font-size: 13px; color: var(--text-primary); margin-bottom: 10px;">
|
||||||
@@ -1650,9 +1650,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 服务器信息 -->
|
<!-- 服务器信息 -->
|
||||||
<div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid var(--glass-border);">
|
<div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: var(--bg-secondary); border-radius: 10px; border: 1px solid var(--glass-border);">
|
||||||
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">
|
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">
|
||||||
<i class="fas fa-server" style="color: #667eea;"></i> 服务器信息
|
<i class="fas fa-server" style="color: var(--accent-1);"></i> 服务器信息
|
||||||
</div>
|
</div>
|
||||||
<div style="color: var(--text-secondary); font-size: 14px;">
|
<div style="color: var(--text-secondary); font-size: 14px;">
|
||||||
{{ user.ftp_host }}:{{ user.ftp_port }}
|
{{ user.ftp_host }}:{{ user.ftp_port }}
|
||||||
@@ -1660,7 +1660,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SFTP空间使用统计 -->
|
<!-- SFTP空间使用统计 -->
|
||||||
<div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid var(--glass-border);">
|
<div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: var(--bg-secondary); border-radius: 10px; border: 1px solid var(--glass-border);">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||||
<div style="font-weight: 600; color: var(--text-primary);">
|
<div style="font-weight: 600; color: var(--text-primary);">
|
||||||
<i class="fas fa-chart-pie" style="color: #667eea;"></i> 空间使用统计
|
<i class="fas fa-chart-pie" style="color: #667eea;"></i> 空间使用统计
|
||||||
@@ -2678,17 +2678,17 @@
|
|||||||
|
|
||||||
<!-- 上传进度条 -->
|
<!-- 上传进度条 -->
|
||||||
<div v-if="uploadProgress > 0 && uploadProgress < 100"
|
<div v-if="uploadProgress > 0 && uploadProgress < 100"
|
||||||
style="position: fixed; bottom: 20px; right: 20px; z-index: 2000; width: 350px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 20px; animation: slideIn 0.3s ease-out;">
|
style="position: fixed; bottom: 20px; right: 20px; z-index: 2000; width: 350px; background: var(--bg-secondary); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); padding: 20px; animation: slideIn 0.3s ease-out;">
|
||||||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||||||
<i class="fas fa-cloud-upload-alt" style="font-size: 24px; color: #667eea;"></i>
|
<i class="fas fa-cloud-upload-alt" style="font-size: 24px; color: var(--accent-1);"></i>
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">正在上传文件</div>
|
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">正在上传文件</div>
|
||||||
<div style="font-size: 13px; color: var(--text-secondary);">{{ uploadingFileName }}</div>
|
<div style="font-size: 13px; color: var(--text-secondary);">{{ uploadingFileName }}</div>
|
||||||
<div v-if="totalBytes > 0" style="font-size: 12px; color: var(--text-muted); margin-top: 2px;"> {{ formatFileSize(uploadedBytes) }} / {{ formatFileSize(totalBytes) }} </div>
|
<div v-if="totalBytes > 0" style="font-size: 12px; color: var(--text-muted); margin-top: 2px;"> {{ formatFileSize(uploadedBytes) }} / {{ formatFileSize(totalBytes) }} </div>
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 20px; font-weight: 700; color: #667eea;">{{ uploadProgress }}%</div>
|
<div style="font-size: 20px; font-weight: 700; color: var(--accent-1);">{{ uploadProgress }}%</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;">
|
<div style="width: 100%; height: 8px; background: rgba(102,126,234,0.2); border-radius: 4px; overflow: hidden;">
|
||||||
<div :style="{
|
<div :style="{
|
||||||
width: uploadProgress + '%',
|
width: uploadProgress + '%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
|
|||||||
Reference in New Issue
Block a user