docs: plan AIGC upgrade image display

This commit is contained in:
duanshuwen
2026-08-05 19:06:03 +08:00
parent 06afbcc5c1
commit 57f6cdd85e

View File

@@ -0,0 +1,84 @@
# AIGC Upgrade Image Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Show the already generated source image in the `useTemplate` upgrade flow while preserving the selected template copy.
**Architecture:** Keep `upgradeTaskId` as the navigation contract. In `useTemplate.vue`, load the source generator task detail only for upgrade flows, then overlay its `imageResultUrl` onto the selected template as `templateContentUrl`. `TemplateVersionHero` remains unchanged because it already renders `templateContentUrl`.
**Tech Stack:** Vue 3 `<script setup>`, uni-app lifecycle/API wrappers, Node.js built-in test runner.
---
### Task 1: Add a failing regression assertion
**Files:**
- Modify: `tests/aigc-detail-continuation.test.cjs`
- [ ] **Step 1: Add the upgrade-source-image test**
Append a test that reads `src/pages-aigc/useTemplate/useTemplate.vue` and asserts that the page imports `getAigcGeneratorTaskDetail`, calls it with `{ taskId: upgradeTaskId.value }`, and assigns `imageResultUrl` to `templateContentUrl` inside the `currentTemplate` computed value.
- [ ] **Step 2: Run the focused test and verify RED**
Run:
```powershell
node --test tests/aigc-detail-continuation.test.cjs
```
Expected: the existing tests pass and the new source-image test fails because `useTemplate.vue` does not yet load the source task detail or overlay `imageResultUrl`.
### Task 2: Load and display the generated source image
**Files:**
- Modify: `src/pages-aigc/useTemplate/useTemplate.vue:46-107,116-184`
- [ ] **Step 1: Add source task state and API import**
Import `getAigcGeneratorTaskDetail` from the existing AIGC API module and add `const upgradeSourceTaskDetail = ref(null);` beside the existing upgrade state.
- [ ] **Step 2: Overlay the source image in `currentTemplate`**
Keep the existing template lookup as the base value. When `isImageToVideoUpgrade.value` is true and `upgradeSourceTaskDetail.value.imageResultUrl` is non-empty, return a shallow copy with `templateContentUrl` set to that URL; otherwise return the base template unchanged.
Use this shape:
```js
const currentTemplate = computed(() => {
const template =
templates.value.find((item) => item.templateId === templateId.value) || templates.value[0] || {};
const imageResultUrl = String(upgradeSourceTaskDetail.value?.imageResultUrl || "").trim();
if (!isImageToVideoUpgrade.value || !imageResultUrl) return template;
return { ...template, templateContentUrl: imageResultUrl };
});
```
- [ ] **Step 3: Fetch the source task detail only for upgrade flows**
Add `fetchUpgradeSourceTaskDetail` after `fetchImageToVideoItemDetail`. Return immediately for non-upgrade flows. For an upgrade, call `getAigcGeneratorTaskDetail({ taskId: upgradeTaskId.value })`; on a valid object response assign `upgradeSourceTaskDetail.value`, otherwise show `获取原图片失败`. Catch the request error, log a warning, and show the same toast. Call it from `fetchPageData` after `fetchTemplateList` and before the existing item-list request.
- [ ] **Step 4: Run the focused test and verify GREEN**
Run:
```powershell
node --test tests/aigc-detail-continuation.test.cjs
```
Expected: all tests pass with zero failures.
### Task 3: Check the final diff
**Files:**
- Verify: `src/pages-aigc/useTemplate/useTemplate.vue`
- Verify: `tests/aigc-detail-continuation.test.cjs`
- [ ] **Step 1: Run whitespace validation**
Run `git diff --check` and expect exit code 0.
- [ ] **Step 2: Confirm scope**
Run `git status --short` and confirm only the intended source/test changes remain uncommitted; preserve the users pre-existing `detail.vue` and `AigcApi.js` work without rewriting it.