feat: improve recording recovery and upload workflow

frontend/src/views/RecordSessionDetailView.vue

@@ -4,7 +4,9 @@ import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import apiClient, { getApiErrorMessage, buildApiUrl } from "@/api/client";
 import { useDanmakuPlayer } from "@/composables/useDanmakuPlayer";
+import { useViewport } from "@/composables/useViewport";
 import DanmakuPlayer from "@/components/player/DanmakuPlayer.vue";
+import PlatformMark from "@/components/ui/PlatformMark.vue";
 import type {
   RecordArtifactUploadBatchResult,
   RecordPreviewTicket,
@@ -28,6 +30,7 @@ const props = defineProps<{
 }>();
 
 const router = useRouter();
+const { isMobile } = useViewport();
 
 // Danmaku replay dialog
 const { danmakuEvents: replayDanmakuEvents, loading: danmakuLoading, error: danmakuError, loadTaskDanmaku, clear: clearDanmaku } = useDanmakuPlayer();
@@ -301,14 +304,20 @@ onMounted(loadDetail);
             <el-descriptions :column="1" border>
               <el-descriptions-item label="会话状态">
                 <el-tag :type="sessionStatusTagType(detail.session.status)">
-                  {{ sessionStatusLabelMap[detail.session.status] }}
+                  {{ detail.session.isRecovering ? "恢复中" : sessionStatusLabelMap[detail.session.status] }}
                 </el-tag>
               </el-descriptions-item>
+              <el-descriptions-item v-if="detail.session.isRecovering" label="恢复进度">
+                <span class="recovery-status-copy">{{ detail.session.recoveryReason || "正在等待下一次自动重试" }}</span>
+              </el-descriptions-item>
               <el-descriptions-item label="直播间">
                 {{ detail.session.liveRoomTitle }}
               </el-descriptions-item>
+              <el-descriptions-item label="主播">
+                {{ detail.session.anchorName || "未知主播" }}
+              </el-descriptions-item>
               <el-descriptions-item label="平台">
-                {{ platformLabelMap[detail.session.platform] }}
+                <PlatformMark :name="platformLabelMap[detail.session.platform]" />
               </el-descriptions-item>
               <el-descriptions-item label="Room ID">
                 <span class="monospace">{{ detail.session.roomId }}</span>
@@ -510,7 +519,40 @@ onMounted(loadDetail);
           </div>
         </div>
 
-        <div class="table-scroll-shell">
+        <div v-if="isMobile" class="segment-card-list">
+          <article v-for="row in detail.timeline.segments" :key="row.recordTaskId" class="segment-card">
+            <div class="segment-card__head">
+              <span>
+                <strong class="monospace">分片 #{{ row.segmentIndex }}</strong>
+                <small>{{ formatDuration(row.durationSeconds) }}</small>
+              </span>
+              <el-tag :type="sessionStatusTagType(row.status)">{{ taskStatusLabelMap[row.status] }}</el-tag>
+            </div>
+
+            <dl class="segment-card__facts">
+              <div class="segment-card__file">
+                <dt>文件</dt>
+                <dd class="monospace">{{ row.label || "-" }}</dd>
+              </div>
+              <div><dt>开始</dt><dd>{{ formatDate(row.startedAt) }}</dd></div>
+              <div><dt>结束</dt><dd>{{ formatDate(row.endedAt) }}</dd></div>
+            </dl>
+
+            <div class="segment-card__actions">
+              <el-button size="small" type="primary" @click="openTaskDetail(row.recordTaskId)">查看分片</el-button>
+              <el-button
+                size="small"
+                plain
+                :disabled="row.status !== 4 && row.status !== 6"
+                @click="openDanmakuReplay(row.recordTaskId, row.segmentIndex)"
+              >
+                弹幕回放
+              </el-button>
+            </div>
+          </article>
+        </div>
+
+        <div v-else class="table-scroll-shell">
           <el-table :data="detail.timeline.segments" class="premium-table" table-layout="auto">
             <el-table-column label="分片" width="90">
               <template #default="{ row }">
@@ -789,6 +831,91 @@ onMounted(loadDetail);
   color: var(--text-secondary);
 }
 
+.segment-card-list {
+  display: grid;
+  gap: 10px;
+}
+
+.segment-card {
+  display: grid;
+  gap: 13px;
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+}
+
+.segment-card__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.segment-card__head > span {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.segment-card__head strong {
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.segment-card__head small {
+  color: var(--text-muted);
+  font-size: 10px;
+}
+
+.segment-card__facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+  margin: 0;
+}
+
+.segment-card__facts > div {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.segment-card__facts dt {
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.segment-card__facts dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.segment-card__file {
+  grid-column: 1 / -1;
+}
+
+.segment-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-top: 11px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.segment-card__actions :deep(.el-button) {
+  flex: 0 0 auto;
+  margin: 0;
+}
+
 .segment-label,
 .log-detail {
   white-space: pre-wrap;