style: generate css

src/pages/history/index.css

@@ -286,59 +286,71 @@
   pointer-events: none;
 }
 
-.thumbnail-glassmorphism {
+/* 缩略图进度遮罩层 */
+.thumbnail-progress-overlay {
   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);
+  border-radius: 12px;
+  background: linear-gradient(
+    135deg,
+    rgb(0 0 0 / 20%) 0%,
+    rgb(0 0 0 / 10%) 50%,
+    rgb(0 0 0 / 30%) 100%
+  );
+  z-index: 4;
+  pointer-events: none;
 }
 
-.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 {
+/* 缩略图光扫描动画 */
+.thumbnail-scan-light {
   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);
+  border-radius: 12px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(255 255 255 / 8%) 40%,
+    rgb(255 255 255 / 15%) 50%,
+    rgb(255 255 255 / 8%) 60%,
+    transparent 100%
+  );
+  z-index: 5;
+  animation: thumbnail-scan 2s ease-in-out infinite;
+  pointer-events: none;
 }
 
-.thumbnail-progress-inner {
-  width: 90px;
-  height: 90px;
+/* 缩略图加载转圈 */
+.thumbnail-loader {
+  position: absolute;
+  top: calc(50% - 25px);  /* 向上移动25px */
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 32px;
+  border: 3px solid transparent;
+  border-top: 3px solid #FFFFFF;
   border-radius: 50%;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 2;
+  z-index: 6;
+  animation: spin 1s linear infinite;
+  pointer-events: none;
 }
 
-.thumbnail-progress-text {
-  font-size: 28px;
-  color: #ff9500;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+/* 缩略图进度文字 */
+.thumbnail-scan-progress {
+  font-size: 24px;
+  color: #FFFFFF;
+  font-weight: 700;
+  z-index: 7;
+  /* 文字阴影增强可读性 */
+  text-shadow: 
+    0 2px 4px rgb(0 0 0 / 50%), 
+    0 0 8px rgb(0 0 0 / 30%),
+    0 0 16px rgb(0 0 0 / 20%);
+  position: absolute;
+  top: calc(50% + 25px);  /* 向下移动25px */
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
 }
 
 /* 动画效果 */
@@ -364,3 +376,25 @@
     background-position: calc(200px + 100%) 0;
   }
 }
+
+/* 缩略图扫描动画 */
+@keyframes thumbnail-scan {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* 转圈动画 */
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}