feat

form/index.css

@@ -229,6 +229,32 @@
   }
 }
 
+/* 结果卡片头部布局与样式 */
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-header__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 让自定义 header 更贴合 Element 默认内边距 */
+.el-card__header .card-header {
+  padding: 0;
+}
+
 /* 卡片悬停效果 */
 .upload-section,
 .video-section,

form/index.html

@@ -72,9 +72,14 @@
       <!-- 任务状态看板（统一：字幕/去人声 共用） -->
       <div class="task-board" v-if="task_uuid || vocalTaskUuid" style="max-width:800px;margin-top:16px;">
         <el-card shadow="hover">
-          <div slot="header" class="clearfix">
-            <span>任务状态</span>
-            <el-tag v-if="getCurrentTaskUuid()" size="mini" type="info" style="float:right;">进行中</el-tag>
+          <div slot="header" class="card-header">
+            <div class="card-header__title">
+              <i class="el-icon-time"></i>
+              <span>任务状态</span>
+            </div>
+            <div class="card-header__actions">
+              <el-tag v-if="getCurrentTaskUuid()" size="mini" type="info">进行中</el-tag>
+            </div>
           </div>
           <div class="board-row" style="margin-bottom:8px;">
             <span style="color:#909399;">任务UUID：</span>
@@ -92,17 +97,25 @@
         <!-- 生成结果看板：字幕 -->
         <div class="result-board" v-if="subtitlesResult" style="flex:0 0 40%; width:40%;">
           <el-card shadow="hover">
-            <div slot="header" class="clearfix">
-              <span>字幕生成结果</span>
-              <el-button 
-                v-if="subtitlesResult && subtitlesResult.subtitleJsonUrl && subtitlesResult.translatedJsonUrl"
-                size="mini" 
-                type="primary" 
-                style="float:right; margin-right:8px;" 
-                @click="openSubtitleEditor">
-                编辑
-              </el-button>
-              <el-tag size="mini" type="success" style="float:right;">已完成</el-tag>
+            <div slot="header" class="card-header">
+              <div class="card-header__title">
+                <i class="el-icon-document"></i>
+                <span>字幕生成结果</span>
+              </div>
+              <div class="card-header__actions">
+                <el-tag
+                  v-if="subtitlesResult && subtitlesResult.subtitleJsonUrl && subtitlesResult.translatedJsonUrl"
+                  size="mini"
+                  type="success"
+                >已完成</el-tag>
+                <el-button
+                  v-if="subtitlesResult && subtitlesResult.subtitleJsonUrl && subtitlesResult.translatedJsonUrl"
+                  size="mini"
+                  type="primary"
+                  icon="el-icon-edit"
+                  @click="openSubtitleEditor"
+                >字幕编辑</el-button>
+              </div>
             </div>
             <div>
               <el-alert type="info" :closable="false" show-icon title="点击以下链接可下载或预览对应资源"></el-alert>
@@ -125,9 +138,14 @@
         <!-- 生成结果看板：视频处理（去人声/静音/仅人声） -->
         <div class="result-board" v-if="vocalResult" style="flex:0 0 40%;">
           <el-card shadow="hover">
-            <div slot="header" class="clearfix">
-              <span>视频处理结果（去人声/静音/仅人声）</span>
-              <el-tag size="mini" type="success" style="float:right;">已完成</el-tag>
+            <div slot="header" class="card-header">
+              <div class="card-header__title">
+                <i class="el-icon-headset"></i>
+                <span>视频处理结果（去人声/静音/仅人声）</span>
+              </div>
+              <div class="card-header__actions">
+                <el-tag size="mini" type="success">已完成</el-tag>
+              </div>
             </div>
             <div>
               <el-alert type="info" :closable="false" show-icon title="点击以下链接可下载或预览对应资源"></el-alert>