Harden async task flows and enhance analysis tooling

client/src/components/TaskCenter.tsx

@@ -3,6 +3,7 @@ import { trpc } from "@/lib/trpc";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { toast } from "sonner";
@@ -21,6 +22,22 @@ function formatTaskStatus(status: string) {
   }
 }
 
+function formatTaskTiming(task: {
+  createdAt: string | Date;
+  startedAt?: string | Date | null;
+  completedAt?: string | Date | null;
+}) {
+  const createdAt = new Date(task.createdAt).getTime();
+  const startedAt = task.startedAt ? new Date(task.startedAt).getTime() : null;
+  const completedAt = task.completedAt ? new Date(task.completedAt).getTime() : null;
+  const durationMs = (completedAt ?? Date.now()) - (startedAt ?? createdAt);
+  const seconds = Math.max(0, Math.round(durationMs / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return `${minutes}m ${rest.toString().padStart(2, "0")}s`;
+}
+
 export function TaskCenter({ compact = false }: { compact?: boolean }) {
   const utils = trpc.useUtils();
   const retryMutation = trpc.task.retry.useMutation({
@@ -36,6 +53,9 @@ export function TaskCenter({ compact = false }: { compact?: boolean }) {
   const taskListQuery = trpc.task.list.useQuery(
     { limit: 20 },
     {
+      retry: 3,
+      retryDelay: (attempt) => Math.min(1_000 * 2 ** attempt, 8_000),
+      placeholderData: (previous) => previous,
       refetchInterval: (query) => {
         const hasActiveTask = (query.state.data ?? []).some((task) => task.status === "queued" || task.status === "running");
         return hasActiveTask ? 3_000 : 8_000;
@@ -86,6 +106,15 @@ export function TaskCenter({ compact = false }: { compact?: boolean }) {
         </SheetHeader>
         <ScrollArea className="h-[calc(100vh-6rem)] pr-4">
           <div className="mt-6 space-y-3">
+            {taskListQuery.isError ? (
+              <Alert>
+                <AlertTriangle className="h-4 w-4" />
+                <AlertDescription>
+                  任务列表刷新失败，当前显示最近一次成功结果。
+                </AlertDescription>
+              </Alert>
+            ) : null}
+
             {(taskListQuery.data ?? []).length === 0 ? (
               <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
                 当前没有后台任务。
@@ -117,7 +146,9 @@ export function TaskCenter({ compact = false }: { compact?: boolean }) {
                   ) : null}
 
                   <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
-                    <span>{new Date(task.createdAt).toLocaleString("zh-CN")}</span>
+                    <span>
+                      {new Date(task.createdAt).toLocaleString("zh-CN")} · 耗时 {formatTaskTiming(task)}
+                    </span>
                     {task.status === "failed" ? (
                       <Button
                         variant="ghost"

client/src/hooks/useBackgroundTask.ts

@@ -5,6 +5,9 @@ export function useBackgroundTask(taskId: string | null | undefined) {
     { taskId: taskId || "" },
     {
       enabled: Boolean(taskId),
+      retry: 3,
+      retryDelay: (attempt) => Math.min(1_000 * 2 ** attempt, 8_000),
+      placeholderData: (previous) => previous,
       refetchInterval: (query) => {
         const task = query.state.data;
         if (!task) return 3_000;

client/src/pages/LiveCamera.tsx

@@ -271,10 +271,40 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
   const rightElbowAngle = getAngle(rightShoulder, rightElbow, rightWrist) || 145;
   const leftElbowAngle = getAngle(leftShoulder, leftElbow, leftWrist) || 145;
   const footSpread = Math.abs((leftAnkle?.x ?? 0.42) - (rightAnkle?.x ?? 0.58));
+  const shoulderSpan = Math.abs((rightShoulder?.x ?? 0.56) - (leftShoulder?.x ?? 0.44));
+  const wristSpread = Math.abs((rightWrist?.x ?? 0.62) - (leftWrist?.x ?? 0.38));
+  const shoulderCenterX = ((leftShoulder?.x ?? 0.45) + (rightShoulder?.x ?? 0.55)) / 2;
+  const torsoOffset = Math.abs(shoulderCenterX - hipCenter.x);
+  const rightForward = (rightWrist?.x ?? shoulderCenterX) - hipCenter.x;
+  const leftForward = hipCenter.x - (leftWrist?.x ?? shoulderCenterX);
+  const contactHeight = hipCenter.y - (rightWrist?.y ?? hipCenter.y);
   const visibility =
     landmarks.reduce((sum, point) => sum + (point.visibility ?? 0.95), 0) /
     Math.max(1, landmarks.length);
 
+  if (visibility < 0.42 || shoulderSpan < 0.08) {
+    tracking.prevTimestamp = timestamp;
+    tracking.prevRightWrist = rightWrist;
+    tracking.prevLeftWrist = leftWrist;
+    tracking.prevHipCenter = hipCenter;
+    tracking.lastAction = "unknown";
+
+    return {
+      action: "unknown",
+      confidence: 0.2,
+      score: {
+        overall: 48,
+        posture: 50,
+        balance: 48,
+        technique: 45,
+        footwork: 42,
+        consistency: 40,
+        confidence: 20,
+      },
+      feedback: ["当前画面人体可见度不足，请尽量让头肩和双脚都留在画面内。"],
+    };
+  }
+
   const posture = clamp(100 - shoulderTilt * 780 - headOffset * 640, 0, 100);
   const balance = clamp(100 - hipTilt * 900 - Math.max(0, 0.16 - footSpread) * 260, 0, 100);
   const footwork = clamp(45 + Math.min(36, hipSpeed * 120) + Math.max(0, 165 - kneeBend) * 0.35, 0, 100);
@@ -286,6 +316,8 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
       confidence: clamp(
         (rightWrist && nose && rightWrist.y < nose.y ? 0.45 : 0.1) +
         (rightElbow && rightShoulder && rightElbow.y < rightShoulder.y ? 0.18 : 0.04) +
+        clamp(contactHeight * 1.4, 0, 0.14) +
+        clamp((0.24 - footSpread) * 1.2, 0, 0.08) +
         clamp((rightElbowAngle - 135) / 55, 0, 0.22) +
         clamp(rightVerticalMotion * 4.5, 0, 0.15),
         0,
@@ -305,8 +337,11 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
     {
       action: "forehand",
       confidence: clamp(
-        (rightWrist && nose && rightWrist.x > nose.x ? 0.28 : 0.08) +
-        clamp(rightSpeed * 0.12, 0, 0.36) +
+        (rightWrist && nose && rightWrist.x > nose.x ? 0.24 : 0.08) +
+        (rightForward > 0.11 ? 0.16 : 0.04) +
+        clamp((wristSpread - 0.2) * 0.8, 0, 0.16) +
+        clamp((0.08 - torsoOffset) * 1.8, 0, 0.08) +
+        clamp(rightSpeed * 0.12, 0, 0.28) +
         clamp((rightElbowAngle - 85) / 70, 0, 0.2),
         0,
         0.94,
@@ -315,8 +350,11 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
     {
       action: "backhand",
       confidence: clamp(
-        ((leftWrist && nose && leftWrist.x < nose.x) || (rightWrist && nose && rightWrist.x < nose.x) ? 0.28 : 0.08) +
-        clamp(Math.max(leftSpeed, rightSpeed) * 0.1, 0, 0.34) +
+        ((leftWrist && nose && leftWrist.x < nose.x) || (rightWrist && nose && rightWrist.x < nose.x) ? 0.2 : 0.06) +
+        (leftForward > 0.1 ? 0.16 : 0.04) +
+        (rightWrist && hipCenter && rightWrist.x < hipCenter.x ? 0.12 : 0.02) +
+        clamp((wristSpread - 0.22) * 0.75, 0, 0.14) +
+        clamp(Math.max(leftSpeed, rightSpeed) * 0.1, 0, 0.22) +
         clamp((leftElbowAngle - 85) / 70, 0, 0.18),
         0,
         0.92,
@@ -326,6 +364,7 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
       action: "volley",
       confidence: clamp(
         (rightWrist && rightShoulder && Math.abs(rightWrist.y - rightShoulder.y) < 0.12 ? 0.3 : 0.08) +
+        clamp((0.16 - Math.abs(contactHeight - 0.08)) * 1.2, 0, 0.1) +
         clamp((0.22 - Math.abs((rightWrist?.x ?? 0.5) - hipCenter.x)) * 1.5, 0, 0.18) +
         clamp((1.8 - rightSpeed) * 0.14, 0, 0.18),
         0,
@@ -336,6 +375,7 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
       action: "slice",
       confidence: clamp(
         (rightWrist && rightShoulder && rightWrist.y > rightShoulder.y ? 0.18 : 0.06) +
+        clamp((contactHeight + 0.06) * 0.7, 0, 0.08) +
         clamp((tracking.prevRightWrist && rightWrist && rightWrist.y > tracking.prevRightWrist.y ? 0.18 : 0.04), 0, 0.18) +
         clamp(rightSpeed * 0.08, 0, 0.24),
         0,
@@ -346,6 +386,7 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
       action: "lob",
       confidence: clamp(
         (rightWrist && nose && rightWrist.y < nose.y + 0.1 ? 0.22 : 0.08) +
+        clamp((0.18 - Math.abs(rightForward)) * 1.2, 0, 0.08) +
         clamp(rightVerticalMotion * 4.2, 0, 0.28) +
         clamp((0.18 - Math.abs((rightWrist?.x ?? 0.5) - hipCenter.x)) * 1.4, 0, 0.18),
         0,
@@ -356,7 +397,7 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
 
   candidates.sort((a, b) => b.confidence - a.confidence);
   const topCandidate = candidates[0] ?? { action: "unknown" as ActionType, confidence: 0.2 };
-  const action = topCandidate.confidence >= 0.5 ? topCandidate.action : "unknown";
+  const action = topCandidate.confidence >= 0.52 ? topCandidate.action : "unknown";
 
   const techniqueBase =
     action === "serve" || action === "overhead"
@@ -380,6 +421,9 @@ function analyzePoseFrame(landmarks: Point[], tracking: TrackingState, timestamp
   if (action === "unknown") {
     feedback.push("当前片段缺少完整挥拍特征，系统已归为未知动作。");
   }
+  if (visibility < 0.65) {
+    feedback.push("人体关键点可见度偏低，建议调整机位让双臂和双脚完全入镜。");
+  }
   if (posture < 72) {
     feedback.push("上体轴线偏移较明显，击球准备时保持头肩稳定。");
   }
@@ -465,6 +509,16 @@ function ScoreBar({ label, value, accent }: { label: string; value: number; acce
   );
 }
 
+function getSessionBand(input: { overallScore: number; knownRatio: number; effectiveSegments: number }) {
+  if (input.overallScore >= 85 && input.knownRatio >= 0.72 && input.effectiveSegments >= 4) {
+    return { label: "高质量", tone: "bg-emerald-500/10 text-emerald-700" };
+  }
+  if (input.overallScore >= 72 && input.knownRatio >= 0.55 && input.effectiveSegments >= 2) {
+    return { label: "稳定", tone: "bg-sky-500/10 text-sky-700" };
+  }
+  return { label: "待加强", tone: "bg-amber-500/10 text-amber-700" };
+}
+
 export default function LiveCamera() {
   useAuth();
   const utils = trpc.useUtils();
@@ -501,6 +555,7 @@ export default function LiveCamera() {
   const [feedback, setFeedback] = useState<string[]>([]);
   const [segments, setSegments] = useState<ActionSegment[]>([]);
   const [durationMs, setDurationMs] = useState(0);
+  const [segmentFilter, setSegmentFilter] = useState<ActionType | "all">("all");
 
   const uploadMutation = trpc.video.upload.useMutation();
   const saveLiveSessionMutation = trpc.analysis.liveSessionSave.useMutation({
@@ -520,6 +575,54 @@ export default function LiveCamera() {
     [segments],
   );
   const unknownSegments = useMemo(() => segments.filter((segment) => segment.isUnknown), [segments]);
+  const filteredVisibleSegments = useMemo(
+    () => segmentFilter === "all" ? visibleSegments : visibleSegments.filter((segment) => segment.actionType === segmentFilter),
+    [segmentFilter, visibleSegments],
+  );
+  const actionStats = useMemo(() => {
+    const totals = new Map<ActionType, { count: number; durationMs: number; averageScore: number; averageConfidence: number }>();
+
+    visibleSegments.forEach((segment) => {
+      const current = totals.get(segment.actionType) ?? {
+        count: 0,
+        durationMs: 0,
+        averageScore: 0,
+        averageConfidence: 0,
+      };
+      const nextCount = current.count + 1;
+      totals.set(segment.actionType, {
+        count: nextCount,
+        durationMs: current.durationMs + segment.durationMs,
+        averageScore: ((current.averageScore * current.count) + segment.score) / nextCount,
+        averageConfidence: ((current.averageConfidence * current.count) + segment.confidenceAvg) / nextCount,
+      });
+    });
+
+    const totalDuration = Math.max(1, visibleSegments.reduce((sum, segment) => sum + segment.durationMs, 0));
+    return Array.from(totals.entries())
+      .map(([actionType, value]) => ({
+        actionType,
+        ...value,
+        sharePct: Math.round((value.durationMs / totalDuration) * 100),
+      }))
+      .sort((a, b) => b.durationMs - a.durationMs);
+  }, [visibleSegments]);
+  const bestSegment = useMemo(
+    () => visibleSegments.reduce<ActionSegment | null>((best, segment) => {
+      if (!best) return segment;
+      return segment.score > best.score ? segment : best;
+    }, null),
+    [visibleSegments],
+  );
+  const knownRatio = segments.length > 0 ? visibleSegments.length / segments.length : 0;
+  const sessionBand = useMemo(
+    () => getSessionBand({
+      overallScore: liveScore?.overall || 0,
+      knownRatio,
+      effectiveSegments: visibleSegments.length,
+    }),
+    [knownRatio, liveScore?.overall, visibleSegments.length],
+  );
 
   useEffect(() => {
     navigator.mediaDevices?.enumerateDevices().then((devices) => {
@@ -1082,7 +1185,7 @@ export default function LiveCamera() {
                 <div className="pointer-events-none absolute left-3 top-3 flex flex-wrap gap-2">
                   <Badge className="gap-1.5 bg-black/60 text-white shadow-sm">
                     <Activity className="h-3.5 w-3.5" />
-                    {previewTitle}
+                          {previewTitle}
                   </Badge>
                   <Badge className="gap-1.5 bg-black/60 text-white shadow-sm">
                     <Target className="h-3.5 w-3.5" />
@@ -1136,12 +1239,34 @@ export default function LiveCamera() {
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-3">
-              {visibleSegments.length === 0 ? (
+              {actionStats.length > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    variant={segmentFilter === "all" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setSegmentFilter("all")}
+                  >
+                    全部片段
+                  </Button>
+                  {actionStats.map((item) => (
+                    <Button
+                      key={item.actionType}
+                      variant={segmentFilter === item.actionType ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setSegmentFilter(item.actionType)}
+                    >
+                      {ACTION_META[item.actionType].label} · {item.count}
+                    </Button>
+                  ))}
+                </div>
+              ) : null}
+
+              {filteredVisibleSegments.length === 0 ? (
                 <div className="rounded-2xl border border-dashed border-border/60 px-4 py-8 text-center text-sm text-muted-foreground">
                   开始分析后，这里会按时间区间显示识别出的动作片段。
                 </div>
               ) : (
-                visibleSegments.map((segment) => {
+                filteredVisibleSegments.map((segment) => {
                   const meta = ACTION_META[segment.actionType];
                   return (
                     <div key={`${segment.actionType}-${segment.startMs}`} className="rounded-2xl border border-border/60 bg-muted/25 p-4">
@@ -1151,6 +1276,7 @@ export default function LiveCamera() {
                             <Badge className={meta.tone}>{meta.label}</Badge>
                             <Badge variant="outline">{formatDuration(segment.startMs)} - {formatDuration(segment.endMs)}</Badge>
                             <Badge variant="outline">时长 {formatDuration(segment.durationMs)}</Badge>
+                            <Badge variant="outline">关键帧 {segment.keyFrames.length}</Badge>
                           </div>
                           <div className="text-sm text-muted-foreground">{segment.issueSummary.join(" · ") || "当前片段节奏稳定"}</div>
                         </div>
@@ -1189,6 +1315,7 @@ export default function LiveCamera() {
                     <div className="mt-3 flex items-center justify-center gap-2">
                       <Badge className={heroAction.tone}>{heroAction.label}</Badge>
                       <Badge variant="outline">置信度 {liveScore.confidence}%</Badge>
+                      <Badge className={sessionBand.tone}>{sessionBand.label}</Badge>
                     </div>
                   </div>
                   <div className="space-y-3">
@@ -1207,6 +1334,39 @@ export default function LiveCamera() {
             </CardContent>
           </Card>
 
+          <Card className="border-0 shadow-sm">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">动作分布</CardTitle>
+              <CardDescription>按识别出的非未知动作统计区间数量、时长和平均质量。</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {actionStats.length === 0 ? (
+                <div className="rounded-2xl border border-dashed border-border/60 px-4 py-8 text-center text-sm text-muted-foreground">
+                  累积到稳定动作区间后，这里会展示分布。
+                </div>
+              ) : (
+                actionStats.map((item) => (
+                  <div key={item.actionType} className="space-y-2 rounded-2xl border border-border/60 bg-muted/20 p-4">
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="flex items-center gap-2">
+                        <Badge className={ACTION_META[item.actionType].tone}>{ACTION_META[item.actionType].label}</Badge>
+                        <span className="text-xs text-muted-foreground">{item.count} 段</span>
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        平均 {Math.round(item.averageScore)} 分 · {Math.round(item.averageConfidence * 100)}%
+                      </div>
+                    </div>
+                    <Progress value={item.sharePct} className="h-2" />
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                      <span>累计时长 {formatDuration(item.durationMs)}</span>
+                      <span>占有效片段 {item.sharePct}%</span>
+                    </div>
+                  </div>
+                ))
+              )}
+            </CardContent>
+          </Card>
+
           <Card className="border-0 shadow-sm">
             <CardHeader className="pb-3">
               <CardTitle className="text-base">实时反馈</CardTitle>
@@ -1234,6 +1394,18 @@ export default function LiveCamera() {
                   className="mt-3 h-2"
                 />
               </div>
+
+              <div className="rounded-2xl border border-border/60 bg-muted/20 p-4">
+                <div className="flex items-center justify-between text-sm">
+                  <span>有效识别率</span>
+                  <span className="font-medium">{Math.round(knownRatio * 100)}%</span>
+                </div>
+                <Progress value={knownRatio * 100} className="mt-3 h-2" />
+                <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground">
+                  <div>最佳片段 {bestSegment ? `${Math.round(bestSegment.score)} 分` : "暂无"}</div>
+                  <div>主动作 {actionStats[0] ? ACTION_META[actionStats[0].actionType].label : "未知"}</div>
+                </div>
+              </div>
             </CardContent>
           </Card>
 
@@ -1265,6 +1437,17 @@ export default function LiveCamera() {
                       <div>有效片段 {session.effectiveSegments || 0}</div>
                       <div>时长 {formatDuration(session.durationMs || 0)}</div>
                     </div>
+                    {session.videoUrl ? (
+                      <div className="mt-3">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => window.open(session.videoUrl, "_blank", "noopener,noreferrer")}
+                        >
+                          打开回放
+                        </Button>
+                      </div>
+                    ) : null}
                   </div>
                 ))
               )}

client/src/pages/Logs.tsx

@@ -37,11 +37,30 @@ function formatStructuredValue(value: unknown) {
   }
 }
 
+function formatTaskTiming(task: {
+  createdAt: string | Date;
+  startedAt?: string | Date | null;
+  completedAt?: string | Date | null;
+}) {
+  const createdAt = new Date(task.createdAt).getTime();
+  const startedAt = task.startedAt ? new Date(task.startedAt).getTime() : null;
+  const completedAt = task.completedAt ? new Date(task.completedAt).getTime() : null;
+  const durationMs = (completedAt ?? Date.now()) - (startedAt ?? createdAt);
+  const seconds = Math.max(0, Math.round(durationMs / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return `${minutes}m ${rest.toString().padStart(2, "0")}s`;
+}
+
 export default function Logs() {
   const utils = trpc.useUtils();
   const taskListQuery = trpc.task.list.useQuery(
     { limit: 50 },
     {
+      retry: 3,
+      retryDelay: (attempt) => Math.min(1_000 * 2 ** attempt, 8_000),
+      placeholderData: (previous) => previous,
       refetchInterval: (query) => {
         const hasActiveTask = (query.state.data ?? []).some((task) => task.status === "queued" || task.status === "running");
         return hasActiveTask ? 3_000 : 10_000;
@@ -103,6 +122,16 @@ export default function Logs() {
         </AlertDescription>
       </Alert>
 
+      {taskListQuery.isError ? (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>任务列表刷新失败</AlertTitle>
+          <AlertDescription>
+            当前显示最近一次成功拉取的数据。服务恢复后页面会自动继续刷新。
+          </AlertDescription>
+        </Alert>
+      ) : null}
+
       <Tabs defaultValue="tasks" className="space-y-4">
         <TabsList>
           <TabsTrigger value="tasks">后台任务</TabsTrigger>
@@ -153,7 +182,9 @@ export default function Logs() {
                       ) : null}
 
                       <div className="flex items-center justify-between text-xs text-muted-foreground">
-                        <span>进度 {task.progress}% · 尝试 {task.attempts}/{task.maxAttempts}</span>
+                        <span>
+                          进度 {task.progress}% · 尝试 {task.attempts}/{task.maxAttempts} · 耗时 {formatTaskTiming(task)}
+                        </span>
                         {task.status === "failed" ? (
                           <Button
                             variant="outline"

client/src/pages/Videos.tsx

@@ -13,6 +13,7 @@ import { toast } from "sonner";
 import {
   BarChart3,
   Clock,
+  Copy,
   Download,
   FileVideo,
   Play,
@@ -110,6 +111,26 @@ function downloadJson(filename: string, data: unknown) {
   URL.revokeObjectURL(url);
 }
 
+function downloadText(filename: string, data: string) {
+  const blob = new Blob([data], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+function buildClipCueSheet(title: string, clips: ClipDraft[]) {
+  return clips.map((clip, index) => (
+    `${index + 1}. ${clip.label}\n` +
+    `   区间: ${formatSeconds(clip.startSec)} - ${formatSeconds(clip.endSec)}\n` +
+    `   时长: ${formatSeconds(Math.max(0, clip.endSec - clip.startSec))}\n` +
+    `   来源: ${clip.source === "manual" ? "手动" : "分析建议"}\n` +
+    `   备注: ${clip.notes || "无"}`
+  )).join("\n\n") + `\n\n视频: ${title}\n导出时间: ${new Date().toLocaleString("zh-CN")}\n`;
+}
+
 export default function Videos() {
   useAuth();
   const { data: videos, isLoading } = trpc.video.list.useQuery();
@@ -125,6 +146,7 @@ export default function Videos() {
   const [clipLabel, setClipLabel] = useState("");
   const [clipNotes, setClipNotes] = useState("");
   const [clipDrafts, setClipDrafts] = useState<ClipDraft[]>([]);
+  const [activePreviewRange, setActivePreviewRange] = useState<[number, number] | null>(null);
 
   const getAnalysis = useCallback((videoId: number) => {
     return analyses?.find((analysis: any) => analysis.videoId === videoId);
@@ -173,6 +195,22 @@ export default function Videos() {
     localStorage.setItem(localStorageKey(selectedVideo.id), JSON.stringify(clipDrafts));
   }, [clipDrafts, selectedVideo]);
 
+  useEffect(() => {
+    const video = previewRef.current;
+    if (!video || !activePreviewRange) return;
+
+    const handleTimeUpdate = () => {
+      if (video.currentTime >= activePreviewRange[1]) {
+        video.currentTime = activePreviewRange[0];
+      }
+    };
+
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    return () => {
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+    };
+  }, [activePreviewRange]);
+
   const openEditor = useCallback((video: any) => {
     setSelectedVideo(video);
     setEditorOpen(true);
@@ -181,6 +219,7 @@ export default function Videos() {
     setClipLabel("");
     setClipNotes("");
     setClipRange([0, 5]);
+    setActivePreviewRange(null);
   }, []);
 
   const addClip = useCallback((source: "manual" | "suggested", preset?: ClipDraft) => {
@@ -201,6 +240,11 @@ export default function Videos() {
     toast.success("片段已加入轻剪辑草稿");
   }, [clipDrafts.length, clipLabel, clipNotes, clipRange]);
 
+  const totalClipDurationSec = useMemo(
+    () => clipDrafts.reduce((sum, clip) => sum + Math.max(0, clip.endSec - clip.startSec), 0),
+    [clipDrafts],
+  );
+
   if (isLoading) {
     return (
       <div className="space-y-4">
@@ -358,12 +402,31 @@ export default function Videos() {
                   />
                 </div>
 
-                <Card className="border-0 shadow-sm">
+                  <Card className="border-0 shadow-sm">
                   <CardHeader className="pb-3">
                     <CardTitle className="text-base">片段设置</CardTitle>
                     <CardDescription>建议先在播放器中定位，再设置入点和出点。</CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-4">
+                    <div className="grid gap-3 md:grid-cols-4">
+                      <div className="rounded-2xl border border-border/60 bg-muted/20 p-4">
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">草稿片段</div>
+                        <div className="mt-2 text-lg font-semibold">{clipDrafts.length}</div>
+                      </div>
+                      <div className="rounded-2xl border border-border/60 bg-muted/20 p-4">
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">总剪辑时长</div>
+                        <div className="mt-2 text-lg font-semibold">{formatSeconds(totalClipDurationSec)}</div>
+                      </div>
+                      <div className="rounded-2xl border border-border/60 bg-muted/20 p-4">
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">建议片段</div>
+                        <div className="mt-2 text-lg font-semibold">{suggestedClips.length}</div>
+                      </div>
+                      <div className="rounded-2xl border border-border/60 bg-muted/20 p-4">
+                        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">当前区间时长</div>
+                        <div className="mt-2 text-lg font-semibold">{formatSeconds(Math.max(0, clipRange[1] - clipRange[0]))}</div>
+                      </div>
+                    </div>
+
                     <div className="grid gap-3 md:grid-cols-3">
                       <div className="rounded-2xl border border-border/60 bg-muted/20 p-4">
                         <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">当前播放</div>
@@ -417,6 +480,28 @@ export default function Videos() {
                       >
                         跳到入点
                       </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={async () => {
+                          if (!previewRef.current) return;
+                          setActivePreviewRange([clipRange[0], clipRange[1]]);
+                          previewRef.current.currentTime = clipRange[0];
+                          await previewRef.current.play().catch(() => undefined);
+                        }}
+                      >
+                        循环预览当前区间
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setActivePreviewRange(null);
+                          previewRef.current?.pause();
+                        }}
+                      >
+                        停止循环
+                      </Button>
                     </div>
 
                     <div className="grid gap-3 md:grid-cols-2">
@@ -469,7 +554,20 @@ export default function Videos() {
                                 if (previewRef.current) previewRef.current.currentTime = clip.startSec;
                               }}
                             >
-                              预览
+                              载入区间
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={async () => {
+                                setActivePreviewRange([clip.startSec, clip.endSec]);
+                                if (previewRef.current) {
+                                  previewRef.current.currentTime = clip.startSec;
+                                  await previewRef.current.play().catch(() => undefined);
+                                }
+                              }}
+                            >
+                              循环预览
                             </Button>
                             <Button size="sm" onClick={() => addClip("suggested", clip)}>加入草稿</Button>
                           </div>
@@ -497,18 +595,52 @@ export default function Videos() {
                               <div className="flex items-center gap-2">
                                 <span className="font-medium">{clip.label}</span>
                                 <Badge variant="outline">{clip.source === "manual" ? "手动" : "建议"}</Badge>
+                                <Badge variant="secondary">{formatSeconds(Math.max(0, clip.endSec - clip.startSec))}</Badge>
                               </div>
                               <div className="mt-1 text-xs text-muted-foreground">
                                 {formatSeconds(clip.startSec)} - {formatSeconds(clip.endSec)}
                               </div>
                             </div>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => setClipDrafts((current) => current.filter((item) => item.id !== clip.id))}
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
+                            <div className="flex items-center gap-1">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => {
+                                  setClipRange([clip.startSec, clip.endSec]);
+                                  setClipLabel(clip.label);
+                                  setClipNotes(clip.notes);
+                                  if (previewRef.current) {
+                                    previewRef.current.currentTime = clip.startSec;
+                                  }
+                                }}
+                              >
+                                <Play className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => {
+                                  const value = `${clip.label} ${formatSeconds(clip.startSec)}-${formatSeconds(clip.endSec)} ${clip.notes || ""}`.trim();
+                                  if (!navigator.clipboard) {
+                                    toast.error("当前浏览器不支持剪贴板复制");
+                                    return;
+                                  }
+                                  void navigator.clipboard.writeText(value).then(
+                                    () => toast.success("片段信息已复制"),
+                                    () => toast.error("片段复制失败"),
+                                  );
+                                }}
+                              >
+                                <Copy className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => setClipDrafts((current) => current.filter((item) => item.id !== clip.id))}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
                           </div>
                           {clip.notes ? <div className="mt-2 text-sm text-muted-foreground">{clip.notes}</div> : null}
                         </div>
@@ -525,19 +657,31 @@ export default function Videos() {
               variant="outline"
               onClick={() => {
                 if (!selectedVideo) return;
-                downloadJson(`${selectedVideo.title}-clip-plan.json`, {
+                const payload = {
                   videoId: selectedVideo.id,
                   title: selectedVideo.title,
                   url: selectedVideo.url,
                   clipDrafts,
                   exportedAt: new Date().toISOString(),
-                });
+                };
+                downloadJson(`${selectedVideo.title}-clip-plan.json`, payload);
               }}
               className="gap-2"
             >
               <Download className="h-4 w-4" />
               导出草稿
             </Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                if (!selectedVideo) return;
+                downloadText(`${selectedVideo.title}-clip-cuesheet.txt`, buildClipCueSheet(selectedVideo.title, clipDrafts));
+              }}
+              className="gap-2"
+            >
+              <Download className="h-4 w-4" />
+              导出清单
+            </Button>
             <Button variant="outline" onClick={() => setEditorOpen(false)}>关闭</Button>
           </DialogFooter>
         </DialogContent>