Browse Source

fix: 优化模板解析状态显示为左上角徽章样式

何文松 4 weeks ago
parent
commit
499c9ce469
1 changed files with 29 additions and 39 deletions
  1. 29 39
      frontend/vue-demo/src/views/Home.vue

+ 29 - 39
frontend/vue-demo/src/views/Home.vue

@@ -109,18 +109,15 @@
               size="small"
               @click.stop="handleDeleteTemplate(tpl)"
             />
-            <div class="tpl-preview">
-              {{ tpl.icon }}
-              <!-- 解析中遮罩 -->
-              <div class="tpl-parsing-overlay" v-if="tpl.parseStatus === 'processing' || tpl.parseStatus === 'pending'">
-                <el-icon class="is-loading"><Loading /></el-icon>
-                <span>解析中 {{ tpl.parseProgress }}%</span>
-              </div>
-              <!-- 解析失败标记 -->
-              <div class="tpl-failed-overlay" v-if="tpl.parseStatus === 'failed'">
-                <el-icon><WarningFilled /></el-icon>
-                <span>解析失败</span>
-              </div>
+            <div class="tpl-preview">{{ tpl.icon }}</div>
+            <!-- 状态徽章 -->
+            <div class="tpl-status-badge parsing" v-if="tpl.parseStatus === 'processing' || tpl.parseStatus === 'pending'">
+              <el-icon class="is-loading"><Loading /></el-icon>
+              解析中 {{ tpl.parseProgress }}%
+            </div>
+            <div class="tpl-status-badge failed" v-if="tpl.parseStatus === 'failed'">
+              <el-icon><WarningFilled /></el-icon>
+              解析失败
             </div>
             <div class="tpl-info">
               <div class="tpl-name">{{ tpl.name }}</div>
@@ -667,10 +664,9 @@ async function handleUploadTemplate() {
   margin-bottom: 16px;
   
   &.tpl-parsing {
-    opacity: 0.85;
-    
     .tpl-preview {
       filter: grayscale(30%);
+      opacity: 0.6;
     }
   }
   
@@ -687,38 +683,32 @@ async function handleUploadTemplate() {
     opacity: 1;
   }
   
-  .tpl-preview {
-    position: relative;
-  }
-  
-  .tpl-parsing-overlay,
-  .tpl-failed-overlay {
+  .tpl-status-badge {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: 12px;
+    left: 12px;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
     gap: 4px;
-    font-size: 12px;
-    border-radius: 10px 10px 0 0;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 500;
+    z-index: 5;
     
     .el-icon {
-      font-size: 24px;
+      font-size: 12px;
+    }
+    
+    &.parsing {
+      background: var(--primary);
+      color: white;
+    }
+    
+    &.failed {
+      background: var(--danger);
+      color: white;
     }
-  }
-  
-  .tpl-parsing-overlay {
-    background: rgba(24, 144, 255, 0.15);
-    color: var(--primary);
-  }
-  
-  .tpl-failed-overlay {
-    background: rgba(255, 77, 79, 0.15);
-    color: var(--danger);
   }
   
   .tpl-tags {