feat(aigc): refine generation UI and add task status tracking

Add real-time task status polling for active generation jobs.
Overhaul GeneratingProgressPanel with dynamic step indicators, action buttons and updated styling.
Update PointInsufficientDialog to show detailed credit balance and usage summary.
Fix RecordCard media display and status logic for generating and completed tasks.
Restyle PhotoPickDrawer and update its instructional copy.
Add overflow styling for generating template content container.
This commit is contained in:
duanshuwen
2026-07-14 22:09:37 +08:00
parent 1ebdf92159
commit 9bdef279b7
10 changed files with 474 additions and 206 deletions

View File

@@ -4,21 +4,26 @@
@recharge="handleRecharge" />
<view class="aigc-use-template-body">
<view class="aigc-use-template-content">
<TemplateVersionHero :template="currentTemplate" />
<GenerateConfirmPanel v-if="currentStep === 'generateConfirm'" :cost="currentCost" :balance="pointBalance"
@generate="handleGenerate" @recharge="handleRecharge" />
<GeneratingProgressPanel v-else-if="currentStep === 'generating'" :cost="currentCost" :progress="8"
@complete="handleGenerateComplete" />
<view class="aigc-use-template-content" :class="{ 'is-generating': currentStep === 'generating' }">
<GeneratingProgressPanel v-if="currentStep === 'generating'" :cost="currentCost" :progress="8"
:generator-type="currentTemplateItem.generatorType"
:item-title="currentTemplateItem.itemTitle || currentTemplate.templateTitle" :task-id="createdTaskId"
:task-status="taskStatus" @continue="handleContinueTemplates" @view="handleHistory" />
<template v-else>
<VersionOptionList :options="templateItems" :selected-value="selectedTemplateItemId"
@select="handleSelectTemplateItem" />
<TemplateVersionHero :template="currentTemplate" />
<text class="aigc-use-template-note">
动效视频版会先生图再升级为 5 秒内动效视频
</text>
<GenerateConfirmPanel v-if="currentStep === 'generateConfirm'" :cost="currentCost"
:balance="pointBalance" @generate="handleGenerate" @recharge="handleRecharge" />
<template v-else>
<VersionOptionList :options="templateItems" :selected-value="selectedTemplateItemId"
@select="handleSelectTemplateItem" />
<text class="aigc-use-template-note">
动效视频版会先生图再升级为 5 秒内动效视频
</text>
</template>
</template>
</view>
</view>
@@ -50,6 +55,7 @@ import AigcTopBar from "@/pages-aigc/components/AigcTopBar/index.vue";
import { useCurrentCredit } from "@/pages-aigc/hooks/useCurrentCredit.js";
import {
createAigcGeneratorTask,
getAigcGeneratorTaskDetail,
getAigcTemplateItemList,
getAigcTemplateList,
} from "@/request/api/AigcApi.js";
@@ -73,6 +79,7 @@ const selectedTemplateItemId = ref("");
const selectedImageLocalPath = ref("");
const uploadedImageUrl = ref("");
const createdTaskId = ref("");
const taskStatus = ref(null);
const currentStep = ref("version");
const pointDialogVisible = ref(false);
const isUploading = ref(false);
@@ -331,6 +338,19 @@ const handleConfirmPhoto = () => {
currentStep.value = "generateConfirm";
};
const fetchCreatedTaskStatus = async () => {
if (!createdTaskId.value) return;
try {
const res = await getAigcGeneratorTaskDetail({ taskId: createdTaskId.value });
if (res?.code === 0 && res.data) {
taskStatus.value = res.data.taskStatus;
}
} catch (error) {
console.warn("获取AIGC生成任务状态失败", error);
}
};
const handleGenerate = async () => {
if (isCreatingTask.value) return;
@@ -355,10 +375,9 @@ const handleGenerate = async () => {
}
isCreatingTask.value = true;
uni.showLoading({
title: "创建中",
mask: true,
});
createdTaskId.value = "";
taskStatus.value = null;
currentStep.value = "generating";
try {
const res = await createAigcGeneratorTask({
@@ -368,28 +387,32 @@ const handleGenerate = async () => {
if (res?.code === 0 && res.data) {
createdTaskId.value = res.data;
currentStep.value = "generating";
fetchCurrentCredit();
await fetchCreatedTaskStatus();
} else {
currentStep.value = "generateConfirm";
showPlaceholderToast(res?.msg || "创建任务失败");
}
} catch (error) {
console.warn("创建AIGC生成任务失败", error);
currentStep.value = "generateConfirm";
showPlaceholderToast("创建任务失败");
} finally {
isCreatingTask.value = false;
uni.hideLoading();
}
};
const handleGenerateComplete = () => {
if (!createdTaskId.value) {
showPlaceholderToast("任务创建失败");
const handleContinueTemplates = () => {
const pages = getCurrentPages();
const previousPage = pages[pages.length - 2];
if (previousPage?.route === "pages-aigc/home/home") {
uni.navigateBack();
return;
}
uni.navigateTo({
url: `/pages-aigc/detail/detail?taskId=${encodeURIComponent(createdTaskId.value)}`,
uni.redirectTo({
url: "/pages-aigc/home/home",
fail: () => showPlaceholderToast("继续生成其他模板"),
});
};