diff --git a/web/client/src/components/chat/PipelineProgress.tsx b/web/client/src/components/chat/PipelineProgress.tsx
new file mode 100644
index 0000000..6e5576e
--- /dev/null
+++ b/web/client/src/components/chat/PipelineProgress.tsx
@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+
+interface Props {
+  phase: string;
+  progress: number;
+  currentItem?: number;
+  totalItems?: number;
+  status?: string;
+}
+
+export function PipelineProgress({ phase, progress, currentItem, totalItems, status }: Props) {
+  const phaseLabel: Record<string, string> = {
+    images: '生成图片',
+    upload: '上传素材',
+    videos: '生成视频',
+    tts: '配音',
+    assemble: '成片组装',
+  };
+
+  return (
+    <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-3 my-2">
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-xs text-zinc-400">
+          {phaseLabel[phase] || phase}
+          {currentItem && totalItems ? ` (${currentItem}/${totalItems})` : ''}
+        </span>
+        <span className="text-xs text-zinc-500">{progress}%</span>
+      </div>
+      <div className="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
+        <div
+          className={cn(
+            'h-full rounded-full transition-all duration-500',
+            progress < 100 ? 'bg-blue-500' : 'bg-green-500'
+          )}
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+      {status && <p className="text-xs text-zinc-500 mt-1">{status}</p>}
+    </div>
+  );
+}