purovps/xdl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove all download progress UI from admin (to be redesigned)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
mini
2026-02-19 01:26:16 +08:00
parent 24b42010b9
commit 94eac4a0c2
1 changed files with 1 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/views/Admin.vue
View File

@@ -31,16 +31,7 @@
<span>{{ platformIcon(v.platform || v.url) }}</span>
</div>
<!-- Downloading: circular progress ring + cancel X -->
<div v-if="v.status === 'downloading'" class="thumb-overlay ring-overlay">
<svg class="ring" :class="{ 'ring-spin': v.progress <= 1 }" viewBox="0 0 44 44">
<circle class="ring-bg" cx="22" cy="22" r="18" />
<circle class="ring-fill" cx="22" cy="22" r="18"
:stroke-dasharray="v.progress > 1 ? `${(v.progress / 100) * 113} 113` : '30 113'" />
</svg>
<span class="ring-pct">{{ v.progress > 1 ? v.progress + '%' : '…' }}</span>
<button class="ring-cancel" @click.stop="cancelDownload(v)" title="Cancel">✕</button>
</div>
<div v-if="v.status === 'downloading'" class="thumb-overlay">⏳</div>
<div v-else-if="v.status === 'pending'" class="thumb-overlay">🕐</div>
<div v-else-if="v.status === 'error'" class="thumb-overlay err-overlay">✕</div>
@@ -55,15 +46,6 @@
<span>{{ fmtTime(v.created_at) }}</span>
</div>
<!-- Download progress bar -->
<div v-if="v.status === 'downloading'" class="dl-progress">
<div class="dl-bar-wrap">
<div class="dl-bar-fill" :class="{ 'dl-bar-indeterminate': v.progress <= 1 }"
:style="v.progress > 1 ? { width: v.progress + '%' } : {}"></div>
</div>
<span class="dl-pct">{{ v.progress > 1 ? v.progress + '%' : '…' }}</span>
</div>
<!-- Error message -->
<div v-if="v.status === 'error' && v.error_message" class="error-msg" :title="v.error_message">
⚠️ {{ v.error_message }}
@@ -533,35 +515,7 @@ onUnmounted(() => { if (pollTimer) clearInterval(pollTimer) })
.status-pending { color: #888; }
.status-deleted { color: #555; }
.platform-tag { color: #1da1f2; font-size: 0.82rem; text-transform: capitalize; }
/* Circular progress ring */
.ring-overlay {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.2rem; background: rgba(0,0,0,0.72); border-radius: 6px;
}
.ring { width: 36px; height: 36px; transform: rotate(-90deg); }
.ring-spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(270deg); } }
.ring-bg { fill: none; stroke: #333; stroke-width: 4; }
.ring-fill { fill: none; stroke: #1da1f2; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 0.4s; }
.ring-pct { font-size: 0.65rem; color: #7fdbff; font-weight: 600; margin-top: -2px; }
.ring-cancel {
width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #e74c3c;
background: rgba(231,76,60,0.15); color: #e74c3c; cursor: pointer;
font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
line-height: 1; padding: 0; margin-top: 2px; transition: background 0.2s;
}
.ring-cancel:hover { background: rgba(231,76,60,0.35); }
/* Download progress bar */
.dl-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dl-bar-wrap { flex: 1; height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; }
.dl-bar-fill { height: 100%; background: #1da1f2; border-radius: 3px; transition: width 0.4s; min-width: 4px; }
.dl-bar-indeterminate { width: 30% !important; animation: bar-slide 1.2s ease-in-out infinite; }
@keyframes bar-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
.dl-pct { font-size: 0.75rem; color: #7fdbff; font-weight: 600; white-space: nowrap; min-width: 32px; text-align: right; }
.error-msg {
color: #e74c3c; font-size: 0.8rem; margin-top: 0.3rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px;