85 lines
3.8 KiB
Markdown
85 lines
3.8 KiB
Markdown
# 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 user’s pre-existing `detail.vue` and `AigcApi.js` work without rewriting it.
|