YGChatCS/docs/superpowers/plans/2026-08-05-aigc-upgrade-image.md

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:

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:

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:

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.