refactor: 移除下载部分组件及样式,优化项目结构

- 删除DownloadSection组件及其相关CSS,简化代码结构
- 在历史页面中添加生成中任务的进度计算和显示功能
- 更新历史页面样式,增强用户体验和视觉效果
- 添加缩略图毛玻璃蒙版和进度指示器,提升信息传达的清晰度
This commit is contained in:
iHeyTang
2025-09-11 15:24:35 +08:00
parent e0b0c6e533
commit 64df42678f
5 changed files with 167 additions and 171 deletions

View File

@@ -274,3 +274,92 @@
font-weight: 500;
letter-spacing: 0.5px;
}
/* 缩略图毛玻璃蒙版 */
.thumbnail-overlay {
position: absolute;
inset: 0;
border-radius: 12px;
overflow: hidden;
z-index: 10;
pointer-events: none;
}
.thumbnail-glassmorphism {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgb(255 255 255 / 80%) 0%, rgb(255 255 255 / 70%) 50%, rgb(255 255 255 / 85%) 100%);
backdrop-filter: blur(6px);
}
.thumbnail-progress {
position: relative;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.thumbnail-progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
animation: pulse 2s ease-in-out infinite;
}
.thumbnail-progress-fill {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(#ff9500 0deg, transparent 0deg);
transition: all 0.3s ease;
mask: radial-gradient(circle at center, transparent 42px, black 45px);
}
.thumbnail-progress-inner {
width: 90px;
height: 90px;
border-radius: 50%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.thumbnail-progress-text {
font-size: 28px;
color: #ff9500;
text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}
/* 动画效果 */
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}