数字人合成页 DOM/逻辑抽离迁移计划

现状

数字人合成（currentTab === 'digital-human'）是项目最早最成熟的生成流程，但代码完全嵌在主组件 App 中：

资产	位置	估计规模
模板	`src/app/app.html`（数字人 section）	~700 行
字段	`src/app/app.ts` 中 `dh*` 前缀	~60+ 字段
方法	`src/app/app.ts` 中 `dh*` 前缀	~40+ 方法
AI 对话助手	`dhChat*` 子系统	~200 行
共享依赖	`voiceProfiles` / `managedVideos` / `JimengService` / `refreshView` / `showToast` 等	与主组件强耦合

为什么暂不抽离

现有逻辑已生产可用，单测覆盖率为 0
状态依赖跨越 App 主组件多个子系统（音色库、视频管理、任务队列、历史/结果）
一次性整体抽离风险高，可能引入难以复现的 UI 状态 bug
用户当前迭代节奏快，更应聚焦新模式增量价值

推荐渐进式迁移路径

Stage 1：只搬模板 ✅ 优先

将 app.html 中数字人 section 整段移到 digital-human.component.html，组件通过 @Input() 接收主组件提供的全部 dh* 字段，通过 @Output() 反向触发主组件的 dh* 方法。

// digital-human.component.ts（简化示意）
@Component({
  selector: 'app-digital-human',
  templateUrl: './digital-human.component.html',
})
export class DigitalHumanComponent {
  @Input() dhStep = 1;
  @Input() dhRefVideoUrl = '';
  @Input() dhTtsText = '';
  // ... 60+ 字段全部映射
  @Output() actionUploadRef = new EventEmitter<File>();
  @Output() actionStartGeneration = new EventEmitter<void>();
  // ... 40+ 事件
}

主组件 app.html 内容简化为：

<app-digital-human *ngIf="currentTab === 'digital-human'"
  [dhStep]="dhStep"
  [dhRefVideoUrl]="dhRefVideoUrl"
  ...
  (actionStartGeneration)="dhStartGeneration()"
  ...
></app-digital-human>

风险：纯模板搬迁，不动逻辑；可在分支上回归一次完整数字人流程后合并。

Stage 2：抽离 AI 对话子系统

dhChat* 是相对独立的子系统：上下文管理 + LLM 调用 + 历史保存。可以先抽出：

src/app/components/dh-chat-assistant/：独立组件，接收 referenceTranscript、currentScript，发出 scriptUpdate 事件
主组件解耦 dhChatSend / dhChatHistory 字段

Stage 3：抽离状态到 Service

创建 DigitalHumanStateService（@Injectable({ providedIn: 'root' })）持有所有 dh* 状态字段，主组件与新组件均通过依赖注入访问。

@Injectable({ providedIn: 'root' })
export class DigitalHumanStateService {
  state = signal<DhState>({
    step: 1,
    refVideoUrl: '',
    ttsText: '',
    // ...
  });

  startGeneration() { /* ... */ }
}

Stage 4：最终独立组件

数字人组件成为完全自包含的 standalone 组件，与其它五种生成模式架构对齐。app.ts 中 dh* 字段全部移除。

时间预估

Stage	工时	风险
1（模板搬迁）	1-2 天	中
2（AI 对话抽离）	1 天	低
3（状态 Service）	2-3 天	高
4（最终自包含）	1 天	中

建议：仅在确实需要数字人组件多处复用、或主组件 app.ts 行数过大严重影响开发体验时再启动 Stage 3+，否则保留现状即可。

临时锚点

src/app/pages/pipelines/digital-human/digital-human.component.ts：占位组件，未来 Stage 1 起可直接在此填充模板。

MIGRATION_DIGITAL_HUMAN.md 3.5 KB History Raw