feat(records): api_prompt 永久留痕 + 详情弹窗调试信息折叠区

后端:
- GenerationRecord 加 api_prompt TextField(blank, default='')
- 0021_add_api_prompt migration
- video_generate_view 计算完 _format_prompt_for_ark 后立即 save api_prompt
  (即使 create_task 抛错也保留,方便事后查实际传了什么)
- admin_records / team_records view 各回传 api_prompt 字段

前端:
- AdminRecord 类型加 api_prompt?: string
- RecordDetailModal 详情弹窗右侧底部加"调试信息(开发/客服参考)"折叠区
  - 默认收起,小灰字 ▸/▾ toggle
  - 仅当 api_prompt && api_prompt !== prompt 才显示"实际发给火山"等宽字 box
    (历史记录 api_prompt 为空则不显示这栏)
  - 火山 Task ID + 复制按钮(showToast 反馈)
  - 失败任务才显示原始错误(raw_error)
  - 平时用户察觉不到,客服/财务复盘时点开就能看完整调试信息

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

backend/apps/generation/migrations/0021_add_api_prompt.py

@@ -0,0 +1,18 @@
+# v0.20.1 — 给 GenerationRecord 加 api_prompt 字段（实际发给火山的提示词,永久留痕）
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('generation', '0020_quotaconfig_base_token_price_1080p_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='generationrecord',
+            name='api_prompt',
+            field=models.TextField(blank=True, default='', verbose_name='实际发给火山的提示词'),
+        ),
+    ]

backend/apps/generation/models.py

@@ -34,6 +34,7 @@ class GenerationRecord(models.Model):
     task_id = models.UUIDField(default=uuid.uuid4, unique=True, verbose_name='任务ID')
     ark_task_id = models.CharField(max_length=100, blank=True, default='', verbose_name='火山ARK任务ID')
     prompt = models.TextField(blank=True, verbose_name='提示词')
+    api_prompt = models.TextField(blank=True, default='', verbose_name='实际发给火山的提示词')
     mode = models.CharField(max_length=20, choices=MODE_CHOICES, verbose_name='创作模式')
     model = models.CharField(max_length=30, choices=MODEL_CHOICES, verbose_name='模型')
     aspect_ratio = models.CharField(max_length=10, verbose_name='宽高比')

backend/apps/generation/views.py

@@ -563,6 +563,9 @@ def video_generate_view(request):
         api_prompt = _format_prompt_for_ark(prompt, sorted_pairs)
         logger.info('[ark-prompt] original=%s | converted=%s | mapping=%s',
                     prompt, api_prompt, label_to_placeholder)
+        # 即使 create_task 抛错也保留 api_prompt 方便事后查看实际传了什么
+        record.api_prompt = api_prompt
+        record.save(update_fields=['api_prompt'])
         try:
             ark_response = create_task(
                 prompt=api_prompt,
@@ -1820,6 +1823,7 @@ def admin_records_view(request):
             'ark_task_id': r.ark_task_id or '',
             'result_url': r.result_url or '',
             'thumbnail_url': r.thumbnail_url or '',
+            'api_prompt': r.api_prompt or '',
         })
 
     return Response({
@@ -1886,6 +1890,7 @@ def team_records_view(request):
             'ark_task_id': r.ark_task_id or '',
             'result_url': r.result_url or '',
             'thumbnail_url': r.thumbnail_url or '',
+            'api_prompt': r.api_prompt or '',
         })
 
     return Response({

web/src/components/RecordDetailModal.tsx

@@ -1,6 +1,8 @@
+import { useState } from 'react';
 import type { AdminRecord } from '../types';
 import { ReferenceList } from './ReferenceList';
 import { rewriteTosUrl } from '../lib/api';
+import { showToast } from './Toast';
 
 const STATUS_MAP: Record<string, { label: string; color: string; bg: string }> = {
   completed: { label: '已完成', color: 'var(--color-success)', bg: 'var(--color-success-bg)' },
@@ -20,6 +22,13 @@ interface Props {
 
 export function RecordDetailModal({ record: r, onClose, showTeam, showCost }: Props) {
   const st = STATUS_MAP[r.status] || STATUS_MAP.processing;
+  const [debugOpen, setDebugOpen] = useState(false);
+  // 仅当转换后的 prompt 与原文不同(即 prompt 里有 @ 被转为「图片N」)才单独显示一栏
+  const hasConvertedPrompt = !!(r.api_prompt && r.api_prompt !== r.prompt);
+  const handleCopyTaskId = () => {
+    if (!r.ark_task_id) return;
+    navigator.clipboard.writeText(r.ark_task_id).then(() => showToast('已复制'));
+  };
 
   const elapsed = (() => {
     if (!r.completed_at) return '-';
@@ -100,6 +109,46 @@ export function RecordDetailModal({ record: r, onClose, showTeam, showCost }: Pr
               {/* Prompt */}
               <div style={sectionTitle}>提示词</div>
               <div style={promptBox}>{r.prompt || '(无提示词)'}</div>
+
+              {/* 调试信息(开发/客服参考)— 默认收起 */}
+              <div style={debugSection}>
+                <button
+                  style={debugToggle}
+                  onClick={() => setDebugOpen(!debugOpen)}
+                  type="button"
+                >
+                  <span style={{ display: 'inline-block', width: 12, color: 'var(--color-text-tertiary)' }}>
+                    {debugOpen ? '▾' : '▸'}
+                  </span>
+                  调试信息(开发/客服参考)
+                </button>
+                {debugOpen && (
+                  <div style={debugContent}>
+                    {hasConvertedPrompt && (
+                      <>
+                        <div style={debugLabel}>实际发给火山(@素材名被自动转换为「图片N/视频N/音频N」):</div>
+                        <div style={debugCodeBox}>{r.api_prompt}</div>
+                      </>
+                    )}
+                    {r.ark_task_id && (
+                      <div style={debugRow}>
+                        <span style={debugLabel}>火山 Task ID:</span>
+                        <span style={debugMono}>{r.ark_task_id}</span>
+                        <button style={debugCopyBtn} onClick={handleCopyTaskId} type="button">复制</button>
+                      </div>
+                    )}
+                    {r.status === 'failed' && r.raw_error && (
+                      <>
+                        <div style={debugLabel}>原始错误:</div>
+                        <div style={debugCodeBox}>{r.raw_error}</div>
+                      </>
+                    )}
+                    {!hasConvertedPrompt && !r.ark_task_id && (r.status !== 'failed' || !r.raw_error) && (
+                      <div style={debugLabel}>(暂无调试信息)</div>
+                    )}
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
@@ -365,3 +414,46 @@ const promptBox: React.CSSProperties = {
   color: 'var(--color-text-monochrome)', lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
   maxHeight: 150, overflowY: 'auto',
 };
+
+/* ── 调试信息折叠区(开发/客服参考)── */
+const debugSection: React.CSSProperties = {
+  marginTop: 20,
+  paddingTop: 12,
+  borderTop: '1px dashed var(--color-border-modal-soft)',
+};
+const debugToggle: React.CSSProperties = {
+  display: 'flex', alignItems: 'center', gap: 4,
+  background: 'none', border: 'none', cursor: 'pointer',
+  color: 'var(--color-text-tertiary)', fontSize: 11, padding: 0,
+  fontFamily: 'inherit',
+};
+const debugContent: React.CSSProperties = {
+  marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8,
+};
+const debugLabel: React.CSSProperties = {
+  fontSize: 11, color: 'var(--color-text-tertiary)',
+};
+const debugCodeBox: React.CSSProperties = {
+  background: 'var(--color-bg-elevated)', borderRadius: 6, padding: 10,
+  fontSize: 12, lineHeight: 1.5,
+  fontFamily: "'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace",
+  color: 'var(--color-text-monochrome)',
+  whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+  maxHeight: 200, overflowY: 'auto',
+  border: '1px solid var(--color-border-modal-soft)',
+};
+const debugRow: React.CSSProperties = {
+  display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
+};
+const debugMono: React.CSSProperties = {
+  fontFamily: "'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace",
+  fontSize: 12, color: 'var(--color-text-on-glass-soft)',
+  wordBreak: 'break-all',
+};
+const debugCopyBtn: React.CSSProperties = {
+  background: 'var(--color-bg-elevated)',
+  border: '1px solid var(--color-border-modal-soft)',
+  borderRadius: 4, padding: '2px 8px',
+  fontSize: 11, color: 'var(--color-text-on-glass-soft)',
+  cursor: 'pointer',
+};

web/src/types/index.ts

@@ -219,6 +219,7 @@ export interface AdminRecord {
   ark_task_id?: string;
   result_url?: string;
   thumbnail_url?: string;
+  api_prompt?: string;
 }
 
 export interface SystemSettings {