feat(aigc/useTemplate): add multi-step template generation confirmation workflow

- add PhotoConfirmDrawer component for post-photo-pick quality verification
- add GenerateConfirmPanel to display generation point cost and available balance
- extend TemplateVersionHero to support custom variant styles
- refactor useTemplate page to use step-based workflow flow

src/pages-aigc/useTemplate/useTemplate.vue

@@ -12,15 +12,25 @@
       <view class="aigc-use-template-content">
         <TemplateVersionHero :template="currentTemplate" />
 
-        <VersionOptionList
-          :options="versionOptions"
-          :selected-value="selectedVersion"
-          @select="handleSelectVersion"
+        <GenerateConfirmPanel
+          v-if="currentStep === 'generateConfirm'"
+          :cost="currentVersion.cost || 100"
+          :balance="pointBalance"
+          @generate="handleGenerate"
+          @recharge="handleRecharge"
         />
 
-        <text class="aigc-use-template-note">
-          动效视频版会先生成图片底图，再升级为 5秒内动效视频。
-        </text>
+        <template v-else>
+          <VersionOptionList
+            :options="versionOptions"
+            :selected-value="selectedVersion"
+            @select="handleSelectVersion"
+          />
+
+          <text class="aigc-use-template-note">
+            动效视频版会先生成图片底图，再升级为 5秒内动效视频。
+          </text>
+        </template>
       </view>
     </view>
 
@@ -40,6 +50,13 @@
         @album="handlePickAlbum"
       />
     </view>
+    <view v-if="currentStep === 'photoConfirm'" class="aigc-use-template-popup-host">
+      <PhotoConfirmDrawer
+        :avatar-src="guideAvatar"
+        @close="handleClosePhotoConfirm"
+        @confirm="handleConfirmPhoto"
+      />
+    </view>
   </view>
 </template>
 
@@ -49,6 +66,8 @@ import { onLoad } from "@dcloudio/uni-app";
 import AigcTopBar from "@/pages-aigc/components/AigcTopBar/index.vue";
 import { aigcTemplates } from "@/pages-aigc/home/data/templates.js";
 import guideAvatar from "./assets/xiaoqi-avatar.png";
+import GenerateConfirmPanel from "./components/GenerateConfirmPanel/index.vue";
+import PhotoConfirmDrawer from "./components/PhotoConfirmDrawer/index.vue";
 import PhotoGuidePanel from "./components/PhotoGuidePanel/index.vue";
 import PhotoPickDrawer from "./components/PhotoPickDrawer/index.vue";
 import TemplateVersionHero from "./components/TemplateVersionHero/index.vue";
@@ -56,7 +75,7 @@ import VersionOptionList from "./components/VersionOptionList/index.vue";
 import { negativeExamples, positiveExamples } from "./data/photoGuideExamples.js";
 import { versionOptions } from "./data/versionOptions.js";
 
-const pointBalance = ref(0);
+const pointBalance = ref(300);
 const templateId = ref("");
 const selectedVersion = ref("image");
 const currentStep = ref("version");
@@ -65,6 +84,10 @@ const currentTemplate = computed(() => {
   return aigcTemplates.find((item) => item.id === templateId.value) || aigcTemplates[0] || {};
 });
 
+const currentVersion = computed(() => {
+  return versionOptions.find((item) => item.value === selectedVersion.value) || versionOptions[0] || {};
+});
+
 onLoad((query = {}) => {
   templateId.value = query.templateId || "";
 });
@@ -111,11 +134,23 @@ const handleConfirmGuide = () => {
 };
 
 const handlePickCamera = () => {
-  showPlaceholderToast("拍照");
+  currentStep.value = "photoConfirm";
 };
 
 const handlePickAlbum = () => {
-  showPlaceholderToast("相册");
+  currentStep.value = "photoConfirm";
+};
+
+const handleClosePhotoConfirm = () => {
+  currentStep.value = "photoPick";
+};
+
+const handleConfirmPhoto = () => {
+  currentStep.value = "generateConfirm";
+};
+
+const handleGenerate = () => {
+  showPlaceholderToast("开始生成");
 };
 </script>