# 数字人合成页 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*` 方法。

```ts
// 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` 内容简化为：

```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*` 状态字段，主组件与新组件均通过依赖注入访问。

```ts
@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 起可直接在此填充模板。