feat: optimize money printer factory

src/web/index.css

@@ -9300,6 +9300,147 @@ textarea {
   line-height: 1.35;
 }
 
+.money-printer-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.money-printer-summary-card {
+  min-height: 92px;
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  box-shadow: var(--shadow-sm);
+  padding: 14px;
+  min-width: 0;
+}
+
+.money-printer-summary-card span,
+.money-printer-summary-card em {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.money-printer-summary-card strong {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: 18px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.money-printer-summary-card em {
+  font-style: normal;
+}
+
+.money-printer-pipeline {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.money-printer-pipeline-step {
+  min-height: 72px;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: 6px;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-bg) 74%, var(--color-bg-card));
+  color: var(--color-text-muted);
+  text-align: center;
+  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
+}
+
+.money-printer-pipeline-step span {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-border) 62%, transparent);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+}
+
+.money-printer-pipeline-step strong {
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+.money-printer-pipeline-step.is-active {
+  border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card));
+  color: var(--color-primary);
+}
+
+.money-printer-pipeline-step.is-active span {
+  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card));
+  color: var(--color-primary);
+}
+
+.money-printer-pipeline-step.is-current {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 9%, transparent);
+}
+
+.money-printer-section-head-compact {
+  margin-bottom: 8px;
+}
+
+.money-printer-presets {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.money-printer-preset-button {
+  display: grid;
+  gap: 4px;
+  min-height: 76px;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-bg));
+  color: var(--color-text-primary);
+  padding: 10px;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
+}
+
+.money-printer-preset-button:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-card));
+}
+
+.money-printer-preset-button:active {
+  transform: translateY(0);
+}
+
+.money-printer-preset-button strong {
+  font-size: 13px;
+  line-height: 1.25;
+}
+
+.money-printer-preset-button span {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
 .money-printer-form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
@@ -9384,6 +9525,47 @@ textarea {
   font-size: 12px;
 }
 
+.money-printer-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: -2px 0 12px;
+}
+
+.money-printer-filter-bar button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 34px;
+  border: 1px solid var(--color-border-light);
+  border-radius: 999px;
+  background: var(--color-bg);
+  color: var(--color-text-secondary);
+  padding: 7px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
+}
+
+.money-printer-filter-bar button:hover,
+.money-printer-filter-bar button.is-active {
+  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
+  color: var(--color-primary);
+}
+
+.money-printer-filter-bar strong {
+  min-width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-border) 42%, transparent);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
 .money-printer-job-list {
   display: grid;
   gap: 10px;
@@ -9398,6 +9580,18 @@ textarea {
   padding: 12px;
 }
 
+.money-printer-job-card.is-success {
+  border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border-light));
+}
+
+.money-printer-job-card.is-danger {
+  border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border-light));
+}
+
+.money-printer-job-card.is-primary {
+  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border-light));
+}
+
 .money-printer-job-head {
   display: flex;
   justify-content: space-between;
@@ -9430,6 +9624,45 @@ textarea {
   font-style: normal;
 }
 
+.money-printer-status-pill {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  border-radius: 999px;
+  border: 1px solid var(--color-border-light);
+  padding: 0 9px;
+  white-space: nowrap;
+  font-weight: 720;
+}
+
+.money-printer-status-pill.is-success {
+  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border-light));
+  background: color-mix(in srgb, var(--color-success) 9%, var(--color-bg-card));
+  color: var(--color-success);
+}
+
+.money-printer-status-pill.is-danger {
+  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border-light));
+  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-card));
+  color: var(--color-danger);
+}
+
+.money-printer-status-pill.is-primary {
+  border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border-light));
+  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg-card));
+  color: var(--color-primary);
+}
+
+.money-printer-status-pill.is-warning {
+  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--color-border-light));
+  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-card));
+  color: color-mix(in srgb, var(--color-warning) 78%, var(--color-text-primary));
+}
+
+.money-printer-status-pill.is-muted {
+  color: var(--color-text-muted);
+}
+
 .money-printer-progress {
   height: 7px;
   overflow: hidden;
@@ -9482,6 +9715,50 @@ textarea {
   text-decoration: none;
 }
 
+@media (max-width: 1180px) {
+  .money-printer-summary,
+  .money-printer-presets {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .money-printer-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .money-printer-summary,
+  .money-printer-presets {
+    grid-template-columns: 1fr;
+  }
+
+  .money-printer-panel {
+    padding: 14px;
+  }
+
+  .money-printer-pipeline {
+    grid-template-columns: 1fr;
+  }
+
+  .money-printer-pipeline-step {
+    min-height: 46px;
+    grid-template-columns: 28px 1fr;
+    justify-items: start;
+    text-align: left;
+    padding: 8px 10px;
+  }
+
+  .money-printer-section-head,
+  .money-printer-job-head {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .money-printer-status-pill {
+    width: fit-content;
+  }
+}
+
 .workspace-page .page-header {
   margin-bottom: 16px;
 }

src/web/pages/MoneyPrinter.test.tsx

@@ -0,0 +1,185 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, create, type ReactTestInstance, type ReactTestRenderer } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+
+import MoneyPrinter from './MoneyPrinter.js';
+
+const { apiMock, userApiMock } = vi.hoisted(() => {
+  const base = {
+    getMoneyPrinterJobs: vi.fn(),
+    getMoneyPrinterStatus: vi.fn(),
+    getWorkflows: vi.fn(),
+    createMoneyPrinterJob: vi.fn(),
+    cancelMoneyPrinterJob: vi.fn(),
+    clearMoneyPrinterJobs: vi.fn(),
+  };
+  return {
+    apiMock: base,
+    userApiMock: { ...base },
+  };
+});
+
+vi.mock('../api.js', () => ({
+  api: apiMock,
+  userApi: userApiMock,
+}));
+
+function collectText(node: ReactTestInstance): string {
+  return (node.children || []).map((child) => {
+    if (typeof child === 'string') return child;
+    return collectText(child);
+  }).join('');
+}
+
+async function flushMicrotasks() {
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+}
+
+async function renderMoneyPrinter(initialPath = '/money-printer') {
+  let root!: ReactTestRenderer;
+  await act(async () => {
+    root = create(
+      <MemoryRouter initialEntries={[initialPath]}>
+        <MoneyPrinter />
+      </MemoryRouter>,
+    );
+  });
+  await flushMicrotasks();
+  return root;
+}
+
+function findButton(root: ReactTestRenderer, label: string) {
+  return root.root.find((node) => (
+    node.type === 'button'
+    && typeof node.props.onClick === 'function'
+    && collectText(node).includes(label)
+  ));
+}
+
+function defaultStatus(overrides: Record<string, any> = {}) {
+  return {
+    success: true,
+    mode: 'boosapi-native',
+    keyName: 'global-proxy',
+    comfy: {
+      enabled: true,
+      backend: 'cloud',
+      baseUrl: 'https://cloud.comfy.org',
+    },
+    builtinCloudTemplate: {
+      enabled: true,
+      label: '内置 Cloud Seedance 文生视频',
+      nodeType: 'ByteDanceTextToVideoNode',
+      model: 'seedance-1-0-lite-t2v-250428',
+      duration: { min: 3, max: 12, default: 5 },
+      resolutions: ['480p', '720p', '1080p'],
+      ratios: ['9:16', '16:9'],
+    },
+    ...overrides,
+  };
+}
+
+describe('MoneyPrinter page', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    apiMock.getMoneyPrinterJobs.mockResolvedValue({ success: true, jobs: [] });
+    apiMock.getMoneyPrinterStatus.mockResolvedValue(defaultStatus());
+    apiMock.getWorkflows.mockResolvedValue({ success: true, items: [] });
+    apiMock.clearMoneyPrinterJobs.mockResolvedValue({ success: true, cleared: 0 });
+    apiMock.cancelMoneyPrinterJob.mockResolvedValue({ success: true, job: null });
+    userApiMock.getMoneyPrinterJobs.mockResolvedValue({ success: true, jobs: [] });
+    userApiMock.getMoneyPrinterStatus.mockResolvedValue(defaultStatus());
+    userApiMock.getWorkflows.mockResolvedValue({ success: true, items: [] });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('shows the built-in Cloud video template when Cloud backend is active', async () => {
+    let root!: ReactTestRenderer;
+    try {
+      root = await renderMoneyPrinter();
+      const text = collectText(root.root);
+      expect(text).toContain('Comfy Cloud');
+      expect(text).toContain('内置 Cloud Seedance');
+      expect(text).toContain('完成后进入工作空间');
+    } finally {
+      root?.unmount();
+    }
+  });
+
+  it('applies a quick topic preset into the production form', async () => {
+    let root!: ReactTestRenderer;
+    try {
+      root = await renderMoneyPrinter();
+      await act(async () => {
+        findButton(root, '知识科普').props.onClick();
+      });
+
+      const textareas = root.root.findAll((node) => node.type === 'textarea');
+      expect(textareas[0].props.value).toContain('统一的 AI API 聚合网关');
+      expect(textareas[1].props.value).toContain('用清晰分镜解释问题');
+      const ratioSelect = root.root.findAll((node) => node.type === 'select')
+        .find((node) => node.props.value === '16:9');
+      expect(ratioSelect).toBeTruthy();
+    } finally {
+      root?.unmount();
+    }
+  });
+
+  it('filters the task queue by failed jobs', async () => {
+    apiMock.getMoneyPrinterJobs.mockResolvedValue({
+      success: true,
+      jobs: [
+        {
+          id: 'mp_running',
+          type: 'money-printer-video',
+          title: '正在生成的视频',
+          status: 'running',
+          message: 'Comfy 正在生成视频',
+          progress: 4,
+          progressTotal: 5,
+          result: { request: { videoBackend: 'comfy', duration: 5, ratio: '9:16', resolution: '720p' } },
+          createdAt: '2026-05-26 10:00:00',
+        },
+        {
+          id: 'mp_failed',
+          type: 'money-printer-video',
+          title: '失败的视频',
+          status: 'failed',
+          message: '任务失败',
+          error: '余额不足',
+          progress: 3,
+          progressTotal: 5,
+          result: { request: { videoBackend: 'comfy', duration: 5, ratio: '9:16', resolution: '720p' } },
+          createdAt: '2026-05-26 10:01:00',
+        },
+      ],
+    });
+
+    let root!: ReactTestRenderer;
+    try {
+      root = await renderMoneyPrinter();
+      expect(collectText(root.root)).toContain('正在生成的视频');
+      expect(collectText(root.root)).toContain('失败的视频');
+
+      await act(async () => {
+        findButton(root, '失败').props.onClick();
+      });
+
+      const filteredText = collectText(root.root);
+      expect(filteredText).not.toContain('正在生成的视频');
+      expect(filteredText).toContain('失败的视频');
+      expect(filteredText).toContain('余额不足');
+    } finally {
+      root?.unmount();
+    }
+  });
+});

src/web/pages/MoneyPrinter.tsx

@@ -10,6 +10,59 @@ const STYLE_PRESETS = [
   '电影感广告，镜头运动丰富，高级质感',
 ];
 
+const TOPIC_PRESETS = [
+  {
+    title: '商品种草',
+    desc: '适合 SaaS、工具、服务类产品',
+    topic: '为 BossAI 生成一个 30 秒商品种草短视频，突出多模型、多模态、工作流和统一 API 网关能力。',
+    audience: 'AI 工具用户、内容创作者、企业运营',
+    style: STYLE_PRESETS[1],
+    requirements: '开头 3 秒给出强钩子，中段展示核心卖点，结尾引导试用。画面干净，有真实产品演示感。',
+    duration: 30,
+    ratio: '9:16',
+  },
+  {
+    title: '知识科普',
+    desc: '解释概念、流程、技术卖点',
+    topic: '做一个 45 秒知识科普短视频，解释为什么企业需要统一的 AI API 聚合网关。',
+    audience: '开发者、技术负责人、AI 产品经理',
+    style: STYLE_PRESETS[2],
+    requirements: '用清晰分镜解释问题、方案和收益，避免空泛口号，字幕信息密度高但不要堆字。',
+    duration: 45,
+    ratio: '16:9',
+  },
+  {
+    title: '功能更新',
+    desc: '发布新能力和版本亮点',
+    topic: '生成一个 30 秒 BossAI 工作流新功能发布短视频，重点展示短视频工厂、数字人和工作空间归档。',
+    audience: '现有用户、团队管理员、内容运营',
+    style: STYLE_PRESETS[0],
+    requirements: '节奏要快，按「新功能 -> 使用场景 -> 结果产出」展开，结尾提醒用户打开工作流试用。',
+    duration: 30,
+    ratio: '9:16',
+  },
+  {
+    title: '活动预热',
+    desc: '适合促销、课程、发布会',
+    topic: '生成一个 20 秒活动预热视频，主题是 BossAI 多模态创作工作流体验日。',
+    audience: '创作者、营销团队、AI 学习者',
+    style: STYLE_PRESETS[3],
+    requirements: '画面需要有倒计时、场景切换和高能结尾，重点营造期待感，不要像普通广告口播。',
+    duration: 20,
+    ratio: '9:16',
+  },
+];
+
+const PIPELINE_STEPS = [
+  '创建任务',
+  '脚本分镜',
+  '提交视频',
+  '生成成片',
+  '归档产出',
+];
+
+type JobFilter = 'all' | 'active' | 'succeeded' | 'failed' | 'cancelled';
+
 function terminal(status: string) {
   return ['succeeded', 'failed', 'cancelled'].includes(status);
 }
@@ -22,6 +75,14 @@ function statusLabel(status: string) {
   return '排队中';
 }
 
+function statusTone(status: string) {
+  if (status === 'succeeded') return 'success';
+  if (status === 'failed') return 'danger';
+  if (status === 'cancelled') return 'muted';
+  if (status === 'running') return 'primary';
+  return 'warning';
+}
+
 function progress(job: MoneyPrinterJob) {
   return Math.max(0, Math.min(100, Math.round((job.progress || 0) / Math.max(1, job.progressTotal || 5) * 100)));
 }
@@ -37,6 +98,47 @@ function jobAssets(job: MoneyPrinterJob) {
   return Array.isArray(job.result?.assets) ? job.result.assets : [];
 }
 
+function backendLabel(value?: string | null) {
+  const normalized = String(value || '').toLowerCase();
+  if (normalized === 'cloud') return 'Comfy Cloud';
+  if (normalized === 'external') return '外部 Comfy';
+  if (normalized === 'runninghub') return 'RunningHub';
+  if (normalized === 'docker') return 'Docker Comfy';
+  if (normalized === 'comfy') return 'Comfy API';
+  if (normalized === 'boosapi') return 'BoosAPI /v1/videos';
+  if (!normalized) return '未配置';
+  return value || '未配置';
+}
+
+function jobBackendLabel(job: MoneyPrinterJob) {
+  return backendLabel(job.result?.videoBackend || job.result?.request?.videoBackend || job.result?.request?.video_backend);
+}
+
+function jobModelLabel(job: MoneyPrinterJob) {
+  return job.result?.model
+    || job.result?.request?.videoModel
+    || job.result?.request?.model
+    || (String(job.result?.videoBackend || job.result?.request?.videoBackend || '').toLowerCase() === 'comfy' ? 'Comfy 模板模型' : '默认视频模型');
+}
+
+function jobTemplateLabel(job: MoneyPrinterJob, workflows: WorkflowSummary[]) {
+  const templateId = job.result?.request?.templateId || job.result?.request?.template_id;
+  if (!templateId) return '';
+  if (templateId === BUILTIN_CLOUD_TEMPLATE_VALUE) return '内置 Cloud Seedance';
+  const workflow = workflows.find((item) => item.publicId === templateId);
+  return workflow?.name || String(templateId).slice(0, 10);
+}
+
+function jobSpecLabel(job: MoneyPrinterJob) {
+  const request = job.result?.request || {};
+  const parts = [
+    request.duration ? `${request.duration} 秒` : '',
+    request.ratio || request.aspectRatio || request.aspect_ratio || '',
+    request.resolution || request.size || '',
+  ].filter(Boolean);
+  return parts.join(' · ');
+}
+
 function planValue(job: MoneyPrinterJob, key: string) {
   return job.result?.script?.plan?.[key] || '';
 }
@@ -253,6 +355,10 @@ export default function MoneyPrinter() {
   const [jobs, setJobs] = useState<MoneyPrinterJob[]>([]);
   const [status, setStatus] = useState<MoneyPrinterStatusResponse | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [clearing, setClearing] = useState(false);
+  const [cancellingIds, setCancellingIds] = useState<string[]>([]);
+  const [jobFilter, setJobFilter] = useState<JobFilter>('all');
   const [error, setError] = useState('');
   const isCloudComfy = status?.comfy?.backend === 'cloud' && status?.builtinCloudTemplate?.enabled !== false;
   const cloudDurationMin = status?.builtinCloudTemplate?.duration?.min ?? 3;
@@ -311,6 +417,38 @@ export default function MoneyPrinter() {
   const resolutionOptions = useBuiltinCloudTemplate ? cloudResolutions : DEFAULT_CLOUD_RESOLUTIONS;
   const durationMin = useBuiltinCloudTemplate ? cloudDurationMin : 5;
   const durationMax = useBuiltinCloudTemplate ? cloudDurationMax : 120;
+  const runningJobs = useMemo(() => jobs.filter((job) => !terminal(job.status)), [jobs]);
+  const succeededJobs = useMemo(() => jobs.filter((job) => job.status === 'succeeded'), [jobs]);
+  const failedJobs = useMemo(() => jobs.filter((job) => job.status === 'failed'), [jobs]);
+  const cancelledJobs = useMemo(() => jobs.filter((job) => job.status === 'cancelled'), [jobs]);
+  const filteredJobs = useMemo(() => {
+    if (jobFilter === 'active') return jobs.filter((job) => !terminal(job.status));
+    if (jobFilter === 'succeeded') return succeededJobs;
+    if (jobFilter === 'failed') return failedJobs;
+    if (jobFilter === 'cancelled') return cancelledJobs;
+    return jobs;
+  }, [cancelledJobs, failedJobs, jobFilter, jobs, succeededJobs]);
+  const videoTemplateCount = useMemo(() => workflows.filter(workflowLooksVideoCapable).length, [workflows]);
+  const comfyBackendLabel = backendLabel(status?.comfy?.backend);
+  const currentTemplateLabel = useBuiltinCloudTemplate
+    ? '内置 Cloud Seedance'
+    : selectedWorkflow?.name || (videoBackend === 'comfy' ? '未选择模板' : '不使用模板');
+  const archivedAssetCount = useMemo(
+    () => jobs.reduce((total, job) => total + jobAssets(job).filter((asset: any) => asset?.status !== 'failed').length, 0),
+    [jobs],
+  );
+  const activePipelineStep = useMemo(() => {
+    if (runningJobs.length === 0) return -1;
+    const step = Math.max(...runningJobs.map((job) => Number(job.progress || 1)));
+    return Math.max(0, Math.min(PIPELINE_STEPS.length - 1, step - 1));
+  }, [runningJobs]);
+  const filterOptions = useMemo(() => [
+    { key: 'all' as const, label: '全部', count: jobs.length },
+    { key: 'active' as const, label: '进行中', count: runningJobs.length },
+    { key: 'succeeded' as const, label: '已完成', count: succeededJobs.length },
+    { key: 'failed' as const, label: '失败', count: failedJobs.length },
+    { key: 'cancelled' as const, label: '已取消', count: cancelledJobs.length },
+  ], [cancelledJobs.length, failedJobs.length, jobs.length, runningJobs.length, succeededJobs.length]);
 
   useEffect(() => {
     if (videoBackend !== 'comfy') return;
@@ -346,14 +484,36 @@ export default function MoneyPrinter() {
 
   useEffect(() => {
     if (!jobs.some((job) => !terminal(job.status))) return;
-    const timer = window.setInterval(() => {
+    const timer = globalThis.setInterval(() => {
       client.getMoneyPrinterJobs({ limit: 30 })
         .then((payload) => setJobs(payload.jobs || []))
         .catch(() => {});
     }, 5000);
-    return () => window.clearInterval(timer);
+    return () => globalThis.clearInterval(timer);
   }, [client, jobs]);
 
+  const refreshNow = async () => {
+    setRefreshing(true);
+    setError('');
+    try {
+      await refresh();
+      await loadWorkflows();
+    } catch (err: any) {
+      setError(err?.message || '短视频任务刷新失败');
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  const applyPreset = (preset: typeof TOPIC_PRESETS[number]) => {
+    setTopic(preset.topic);
+    setAudienceText(preset.audience);
+    setStyle(preset.style);
+    setRequirements(preset.requirements);
+    setDuration(preset.duration);
+    setRatio(preset.ratio);
+  };
+
   const submit = async () => {
     if (!topic.trim() || submitting) return;
     setSubmitting(true);
@@ -396,13 +556,30 @@ export default function MoneyPrinter() {
   };
 
   const cancel = async (id: string) => {
-    const payload = await client.cancelMoneyPrinterJob(id);
-    setJobs((prev) => prev.map((item) => item.id === id ? payload.job : item));
+    setCancellingIds((prev) => prev.includes(id) ? prev : [...prev, id]);
+    setError('');
+    try {
+      const payload = await client.cancelMoneyPrinterJob(id);
+      setJobs((prev) => prev.map((item) => item.id === id ? payload.job : item));
+    } catch (err: any) {
+      setError(err?.message || '取消短视频任务失败');
+    } finally {
+      setCancellingIds((prev) => prev.filter((item) => item !== id));
+    }
   };
 
   const clear = async () => {
-    await client.clearMoneyPrinterJobs();
-    await loadJobs();
+    setClearing(true);
+    setError('');
+    try {
+      await client.clearMoneyPrinterJobs();
+      await loadJobs();
+      setJobFilter('all');
+    } catch (err: any) {
+      setError(err?.message || '清空短视频任务失败');
+    } finally {
+      setClearing(false);
+    }
   };
 
   const retry = (job: MoneyPrinterJob) => {
@@ -431,7 +608,9 @@ export default function MoneyPrinter() {
           <p className="page-subtitle">内置 MoneyPrinterTurbo 思路：主题生成脚本和分镜，再用 BoosAPI 视频模型生产成片。</p>
         </div>
         <div className="page-actions">
-          <button type="button" className="btn btn-ghost" onClick={() => void refresh()}>刷新</button>
+          <button type="button" className="btn btn-ghost" onClick={() => void refreshNow()} disabled={refreshing}>
+            {refreshing ? '刷新中...' : '刷新'}
+          </button>
           <button type="button" className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
             {submitting ? '提交中...' : '生成短视频'}
           </button>
@@ -440,6 +619,29 @@ export default function MoneyPrinter() {
 
       {error && <div className="alert alert-error" style={{ marginBottom: 12 }}>{error}</div>}
 
+      <div className="money-printer-summary">
+        <div className="money-printer-summary-card">
+          <span>当前后端</span>
+          <strong>{videoBackend === 'comfy' ? comfyBackendLabel : 'BoosAPI 视频接口'}</strong>
+          <em>{status?.keyName ? `使用 ${status.keyName}` : '等待状态同步'}</em>
+        </div>
+        <div className="money-printer-summary-card">
+          <span>视频模板</span>
+          <strong>{videoBackend === 'comfy' ? currentTemplateLabel : videoModel || '默认模型'}</strong>
+          <em>{videoBackend === 'comfy' ? `${videoTemplateCount} 个视频模板可选` : '直接调用 /v1/videos'}</em>
+        </div>
+        <div className="money-printer-summary-card">
+          <span>队列</span>
+          <strong>{runningJobs.length} 个进行中</strong>
+          <em>{failedJobs.length > 0 ? `${failedJobs.length} 个失败待处理` : '队列状态正常'}</em>
+        </div>
+        <div className="money-printer-summary-card">
+          <span>产出归档</span>
+          <strong>{archivedAssetCount} 个文件</strong>
+          <em>完成后进入工作空间</em>
+        </div>
+      </div>
+
       <div className="money-printer-layout">
         <section className="money-printer-panel">
           <div className="money-printer-hero">
@@ -447,6 +649,37 @@ export default function MoneyPrinter() {
             <strong>一句主题，自动拆成脚本、分镜、视频提示词，再提交到 Comfy API 生成成片。</strong>
           </div>
 
+          <div className="money-printer-pipeline" aria-label="短视频生成流程">
+            {PIPELINE_STEPS.map((step, index) => (
+              <div
+                key={step}
+                className={[
+                  'money-printer-pipeline-step',
+                  activePipelineStep >= index ? 'is-active' : '',
+                  activePipelineStep === index ? 'is-current' : '',
+                ].filter(Boolean).join(' ')}
+              >
+                <span>{index + 1}</span>
+                <strong>{step}</strong>
+              </div>
+            ))}
+          </div>
+
+          <div className="money-printer-section-head money-printer-section-head-compact">
+            <div>
+              <h2>快捷选题</h2>
+              <p>先套一个视频方向，再微调主题和要求。</p>
+            </div>
+          </div>
+          <div className="money-printer-presets">
+            {TOPIC_PRESETS.map((preset) => (
+              <button key={preset.title} type="button" className="money-printer-preset-button" onClick={() => applyPreset(preset)}>
+                <strong>{preset.title}</strong>
+                <span>{preset.desc}</span>
+              </button>
+            ))}
+          </div>
+
           <label className="money-printer-field">
             <span>短视频主题</span>
             <textarea value={topic} onChange={(event) => setTopic(event.target.value)} rows={4} />
@@ -580,7 +813,25 @@ export default function MoneyPrinter() {
               <h2>任务队列</h2>
               <p>脚本、视频生成和工作空间归档都会在后台执行。</p>
             </div>
-            <button type="button" className="btn btn-ghost" onClick={() => void clear()}>清空已完成</button>
+            <button type="button" className="btn btn-ghost" onClick={() => void clear()} disabled={clearing}>
+              {clearing ? '清空中...' : '清空已完成'}
+            </button>
+          </div>
+
+          <div className="money-printer-filter-bar" role="tablist" aria-label="任务状态筛选">
+            {filterOptions.map((option) => (
+              <button
+                key={option.key}
+                type="button"
+                role="tab"
+                aria-selected={jobFilter === option.key}
+                className={jobFilter === option.key ? 'is-active' : ''}
+                onClick={() => setJobFilter(option.key)}
+              >
+                <span>{option.label}</span>
+                <strong>{option.count}</strong>
+              </button>
+            ))}
           </div>
 
           <div className="money-printer-job-list">
@@ -589,21 +840,33 @@ export default function MoneyPrinter() {
                 <div className="empty-state-title">暂无短视频任务</div>
                 <div className="empty-state-desc">提交主题后，系统会自动调用 BoosAPI 内置模型生成脚本和视频。</div>
               </div>
-            ) : jobs.map((job) => {
+            ) : filteredJobs.length === 0 ? (
+              <div className="empty-state" style={{ minHeight: 180 }}>
+                <div className="empty-state-title">当前筛选没有任务</div>
+                <div className="empty-state-desc">切换到“全部”可以查看最近 30 条短视频任务。</div>
+              </div>
+            ) : filteredJobs.map((job) => {
               const percent = progress(job);
               const assets = jobAssets(job);
+              const spec = jobSpecLabel(job);
+              const template = jobTemplateLabel(job, workflows);
+              const cancelling = cancellingIds.includes(job.id);
               return (
-                <article key={job.id} className="money-printer-job-card">
+                <article key={job.id} className={`money-printer-job-card is-${statusTone(job.status)}`}>
                   <div className="money-printer-job-head">
                     <div>
                       <strong>{job.title || '短视频工厂任务'}</strong>
                       <span>{job.message || statusLabel(job.status)}{formatTime(job.createdAt) ? ` · ${formatTime(job.createdAt)}` : ''}</span>
                     </div>
-                    <em>{statusLabel(job.status)}</em>
+                    <em className={`money-printer-status-pill is-${statusTone(job.status)}`}>{statusLabel(job.status)}</em>
                   </div>
                   <div className="money-printer-progress"><span style={{ width: `${percent}%` }} /></div>
                   <div className="money-printer-job-meta">
                     <span>进度 {percent}%</span>
+                    <span>{jobBackendLabel(job)}</span>
+                    <span>{jobModelLabel(job)}</span>
+                    {template && <span>{template}</span>}
+                    {spec && <span>{spec}</span>}
                     {job.result?.videoUrl && <a href={job.result.videoUrl} target="_blank" rel="noreferrer">远端视频</a>}
                   </div>
                   {planValue(job, 'hook') && <p className="money-printer-hook">{planValue(job, 'hook')}</p>}
@@ -612,13 +875,17 @@ export default function MoneyPrinter() {
                     <div className="money-printer-assets">
                       {assets.map((asset: any) => (
                         <a key={asset.publicId || asset.remoteUrl} href={`${workspacePath}?q=${encodeURIComponent(asset.publicId || '')}`}>
-                          成片 · {asset.publicId || asset.status}
+                          工作空间 · {asset.publicId || asset.status}
                         </a>
                       ))}
                     </div>
                   )}
                   <div className="money-printer-job-buttons">
-                    {!terminal(job.status) && <button type="button" className="btn btn-ghost" onClick={() => void cancel(job.id)}>取消</button>}
+                    {!terminal(job.status) && (
+                      <button type="button" className="btn btn-ghost" onClick={() => void cancel(job.id)} disabled={cancelling}>
+                        {cancelling ? '取消中...' : '取消任务'}
+                      </button>
+                    )}
                     {terminal(job.status) && <button type="button" className="btn btn-ghost" onClick={() => retry(job)}>复用参数</button>}
                   </div>
                 </article>