feat(useTemplate): add point insufficient dialog and progress panel

Create PointInsufficientDialog component to notify users of insufficient points before generation. Add GeneratingProgressPanel to display generation progress, steps and cost freeze info. Integrate point balance validation into the generate workflow and update the main page to handle generating state.

src/pages-aigc/useTemplate/useTemplate.vue

@@ -19,6 +19,11 @@
           @generate="handleGenerate"
           @recharge="handleRecharge"
         />
+        <GeneratingProgressPanel
+          v-else-if="currentStep === 'generating'"
+          :cost="currentVersion.cost || 100"
+          :progress="8"
+        />
 
         <template v-else>
           <VersionOptionList
@@ -57,6 +62,13 @@
         @confirm="handleConfirmPhoto"
       />
     </view>
+    <PointInsufficientDialog
+      v-if="pointDialogVisible"
+      :cost="currentVersion.cost || 100"
+      :balance="pointBalance"
+      @cancel="handleClosePointDialog"
+      @recharge="handlePointRecharge"
+    />
   </view>
 </template>
 
@@ -67,9 +79,11 @@ 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 GeneratingProgressPanel from "./components/GeneratingProgressPanel/index.vue";
 import PhotoConfirmDrawer from "./components/PhotoConfirmDrawer/index.vue";
 import PhotoGuidePanel from "./components/PhotoGuidePanel/index.vue";
 import PhotoPickDrawer from "./components/PhotoPickDrawer/index.vue";
+import PointInsufficientDialog from "./components/PointInsufficientDialog/index.vue";
 import TemplateVersionHero from "./components/TemplateVersionHero/index.vue";
 import VersionOptionList from "./components/VersionOptionList/index.vue";
 import { negativeExamples, positiveExamples } from "./data/photoGuideExamples.js";
@@ -79,6 +93,7 @@ const pointBalance = ref(300);
 const templateId = ref("");
 const selectedVersion = ref("image");
 const currentStep = ref("version");
+const pointDialogVisible = ref(false);
 
 const currentTemplate = computed(() => {
   return aigcTemplates.find((item) => item.id === templateId.value) || aigcTemplates[0] || {};
@@ -150,7 +165,24 @@ const handleConfirmPhoto = () => {
 };
 
 const handleGenerate = () => {
-  showPlaceholderToast("开始生成");
+  const cost = Number(currentVersion.value.cost) || 0;
+  const balance = Number(pointBalance.value) || 0;
+
+  if (balance < cost) {
+    pointDialogVisible.value = true;
+    return;
+  }
+
+  currentStep.value = "generating";
+};
+
+const handleClosePointDialog = () => {
+  pointDialogVisible.value = false;
+};
+
+const handlePointRecharge = () => {
+  pointDialogVisible.value = false;
+  handleRecharge();
 };
 </script>