✨ feat: 性能优化与余额扣费系统集成

主要更新：
- 🚀 模板详情页性能优化：添加缓存机制、图片预加载、请求中断控制
- 💰 集成余额检查与扣费功能到表单提交流程
- 🔄 添加错误重试机制，提升用户体验
- 🎨 重构动态表单字段为独立组件 (DynamicFormField)
- 🔧 修复类型错误，优化样式结构

技术细节：
- 实现5分钟缓存策略减少API调用
- 使用 AbortController 管理请求生命周期
- React.memo 优化列表项渲染性能
- 图片预缓存提升加载体验

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/templates/[id]/form.tsx

@@ -1,7 +1,5 @@
 import { Feather } from '@expo/vector-icons';
-import * as ImagePicker from 'expo-image-picker';
 import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
-import { UploadCloud } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
@@ -10,7 +8,6 @@ import {
   ScrollView,
   StyleSheet,
   Text,
-  TextInput,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -20,27 +17,12 @@ export const unstable_settings = {
   headerShown: false,
 };
 
-import { DynamicForm } from '@/components/forms/dynamic-form';
 import { BackButton } from '@/components/ui/back-button';
+import { DynamicFormField } from '@/components/forms/dynamic-form-field';
 import { getTemplateById } from '@/lib/api/templates';
-import { Template } from '@/lib/types/template';
-import { RunFormSchema, RunTemplateData } from '@/lib/types/template-run';
-import { transformWorkflowToFormSchema, validateFormSchema } from '@/lib/utils/form-schema-transformer';
-
-interface Step1FormData {
-  characterImage: string;
-  productImage: string;
-  script: string;
-}
-
-interface Step2FormData extends RunTemplateData { }
-
-interface FormData {
-  step1: Step1FormData;
-  step2: Step2FormData;
-}
-
-type UploadFieldKey = 'characterImage' | 'productImage';
+import { getUserBalance, chargeUser } from '@/lib/api/balance';
+import { runTemplate } from '@/lib/api/template-runs';
+import { Template, TemplateGraphNode } from '@/lib/types/template';
 
 const FALLBACK_PREVIEW =
   'https://images.unsplash.com/photo-1542204165-0198c1e21a3b?auto=format&fit=crop&w=1200&q=80';
@@ -51,20 +33,9 @@ export default function TemplateFormScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const router = useRouter();
 
-  const [currentStep, setCurrentStep] = useState(1);
   const [template, setTemplate] = useState<Template | null>(null);
-  const [formSchema, setFormSchema] = useState<RunFormSchema>({ fields: [] });
   const [loading, setLoading] = useState(true);
-
-  const [formData, setFormData] = useState<FormData>({
-    step1: {
-      characterImage: '',
-      productImage: '',
-      script: '',
-    },
-    step2: {},
-  });
-
+  const [formData, setFormData] = useState<Record<string, any>>({});
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -79,169 +50,149 @@ export default function TemplateFormScreen() {
 
       if (templateResponse.success && templateResponse.data) {
         setTemplate(templateResponse.data);
-
-        if (templateResponse.data.formSchema) {
-          try {
-            const rawData =
-              typeof templateResponse.data.formSchema === 'string'
-                ? JSON.parse(templateResponse.data.formSchema as string)
-                : templateResponse.data.formSchema;
-
-            const formConfig = transformWorkflowToFormSchema(rawData);
-
-            if (validateFormSchema(formConfig)) {
-              setFormSchema(formConfig);
-            }
-          } catch (error) {
-            console.error('Failed to parse form schema:', error);
+        // 初始化表单数据
+        const initialData: Record<string, any> = {};
+        templateResponse.data.formSchema?.startNodes.forEach((node: TemplateGraphNode) => {
+          if (node.data.actionData?.allowMultiple) {
+            initialData[node.id] = [];
+          } else {
+            initialData[node.id] = '';
           }
-        }
+        });
+        setFormData(initialData);
       }
     } catch (error) {
       console.error('Failed to load template:', error);
-      Alert.alert('Error', 'Failed to load data. Please retry later.');
+      Alert.alert('错误', '加载数据失败，请稍后重试');
     } finally {
       setLoading(false);
     }
   };
 
-  const validateStep1 = (): boolean => {
+  const validateForm = (): boolean => {
+    if (!template?.formSchema?.startNodes) return false;
+
     const newErrors: Record<string, string> = {};
 
-    if (!formData.step1.characterImage) {
-      newErrors.characterImage = 'Please upload the character image';
-    }
+    template.formSchema.startNodes.forEach((node: TemplateGraphNode) => {
+      const { id, data } = node;
+      const { actionData, label } = data;
+      const value = formData[id];
 
-    if (!formData.step1.productImage) {
-      newErrors.productImage = 'Please upload the product image';
-    }
-
-    if (!formData.step1.script.trim()) {
-      newErrors.script = 'Please provide the character script';
-    }
+      // 检查必填项
+      if (actionData?.required) {
+        if (Array.isArray(value)) {
+          if (value.length === 0) {
+            newErrors[id] = `请选择${label}`;
+          }
+        } else if (!value || (typeof value === 'string' && !value.trim())) {
+          newErrors[id] = `请填写${label}`;
+        }
+      }
+    });
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
-  const handleStep1Next = () => {
-    if (validateStep1()) {
-      setCurrentStep(2);
-    }
-  };
-
-  const handleStep2Prev = () => {
-    setCurrentStep(1);
-  };
-
-  const handleStep2Submit = async () => {
+  const handleSubmit = async () => {
     if (!template) return;
+    if (!validateForm()) {
+      Alert.alert('提示', '请完善所有必填项');
+      return;
+    }
 
     setIsSubmitting(true);
 
     try {
-      const combinedData = {
-        ...formData.step1,
-        ...formData.step2,
-      };
+      // 1. 检查余额
+      const balanceResponse = await getUserBalance();
 
-      console.log('Submitting template payload:', combinedData);
+      if (!balanceResponse.success) {
+        Alert.alert('错误', '无法获取账户余额');
+        return;
+      }
 
-      Alert.alert('Success', 'Template configuration saved.', [
+      const balance = balanceResponse.data.balance;
+      const requiredAmount = template.costPrice || 0;
+
+      if (balance < requiredAmount) {
+        Alert.alert(
+          '余额不足',
+          `当前余额: ${balance}\n所需费用: ${requiredAmount}\n请先充值`,
+          [
+            { text: '取消', style: 'cancel' },
+            { text: '去充值', onPress: () => router.push('/recharge') },
+          ]
+        );
+        return;
+      }
+
+      // 2. 扣费
+      const chargeResponse = await chargeUser({
+        amount: requiredAmount,
+        description: `生成视频 - ${template.title}`,
+        metadata: {
+          templateId: template.id,
+          templateTitle: template.title,
+        },
+      });
+
+      if (!chargeResponse.success) {
+        Alert.alert('错误', '扣费失败，请稍后重试');
+        return;
+      }
+
+      const transactionId = chargeResponse.data.id;
+
+      // 3. 调用 template run
+      const runResponse = await runTemplate(id, formData);
+
+      if (!runResponse.success) {
+        Alert.alert('错误', '生成任务创建失败');
+        return;
+      }
+
+      const generationId = runResponse.data;
+
+      // 4. 跳转到结果页面
+      Alert.alert('成功', '视频生成任务已创建', [
         {
-          text: 'OK',
+          text: '查看结果',
           onPress: () => {
-            router.push(`/templates/${id}/run`);
+            router.push(`/result?generationId=${generationId}`);
           },
         },
       ]);
     } catch (error) {
       console.error('Submission failed:', error);
-      Alert.alert('Error', 'Submission failed. Please retry later.');
+      Alert.alert('错误', '提交失败，请稍后重试');
     } finally {
       setIsSubmitting(false);
     }
   };
 
-  const handleImagePick = async (field: UploadFieldKey) => {
-    try {
-      const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
+  const renderFormFields = () => {
+    if (!template?.formSchema?.startNodes) return null;
 
-      if (!permission.granted) {
-        Alert.alert(
-          'Permission Required',
-          'Please allow photo library access in Settings to upload images.',
-        );
-        return;
-      }
-
-      const result = await ImagePicker.launchImageLibraryAsync({
-        mediaTypes: ImagePicker.MediaTypeOptions.Images,
-        allowsEditing: true,
-        quality: 0.9,
-      });
-
-      if (result.canceled || !result.assets || result.assets.length === 0) {
-        return;
-      }
-
-      const uri = result.assets[0].uri;
-
-      setFormData(prev => ({
-        ...prev,
-        step1: {
-          ...prev.step1,
-          [field]: uri,
-        },
-      }));
-
-      if (errors[field]) {
-        setErrors(prev => ({
-          ...prev,
-          [field]: '',
-        }));
-      }
-    } catch (error) {
-      console.error('Failed to pick image:', error);
-      Alert.alert('Error', 'Unable to pick image. Please try again later.');
-    }
-  };
-
-  const renderUploadCard = (
-    field: UploadFieldKey,
-    label: string,
-    description: string,
-  ) => {
-    const value = formData.step1[field];
-
-    return (
-      <View style={styles.uploadItem}>
-        <TouchableOpacity
-          activeOpacity={0.9}
-          onPress={() => handleImagePick(field)}
-          style={[
-            styles.uploadCard,
-            value && styles.uploadCardFilled,
-            errors[field] && styles.uploadCardError,
-          ]}
-        >
-          {value ? (
-            <Image source={{ uri: value }} style={styles.uploadImage} />
-          ) : (
-            <>
-              <View style={styles.uploadIconWrap}>
-                <UploadCloud size={26} color="#D1FF00" strokeWidth={1.4} />
-              </View>
-              <Text style={styles.uploadLabel}>{label}</Text>
-              <Text style={styles.uploadDescription}>{description}</Text>
-            </>
-          )}
-        </TouchableOpacity>
-        {errors[field] ? (
-          <Text style={styles.inlineError}>{errors[field]}</Text>
-        ) : null}
-      </View>
-    );
+    return template.formSchema.startNodes.map((node: TemplateGraphNode) => (
+      <DynamicFormField
+        key={node.id}
+        node={node}
+        value={formData[node.id]}
+        onChange={(value) => {
+          setFormData(prev => ({ ...prev, [node.id]: value }));
+          if (errors[node.id]) {
+            setErrors(prev => {
+              const newErrors = { ...prev };
+              delete newErrors[node.id];
+              return newErrors;
+            });
+          }
+        }}
+        error={errors[node.id]}
+      />
+    ));
   };
 
   const renderStep1 = () => {
@@ -259,11 +210,10 @@ export default function TemplateFormScreen() {
         </View>
 
         <Text style={styles.heroTitle}>
-          {(template?.title ?? 'Insert your product into an ASMR video').toUpperCase()}
+          {(template?.title ?? 'AI视频生成').toUpperCase()}
         </Text>
         <Text style={styles.heroSubtitle}>
-          {template?.description ||
-            'ASMR-Add-On keeps your original image the same while seamlessly adding our uploaded product into the ASMR scene.'}
+          {template?.description || '使用AI技术快速生成专业视频内容'}
         </Text>
 
         <View style={styles.previewStage}>
@@ -273,130 +223,27 @@ export default function TemplateFormScreen() {
           </View>
         </View>
 
-        <View style={styles.uploadRow}>
-          {renderUploadCard(
-            'characterImage',
-            'UPLOAD CHARACTER IMAGE',
-            'PNG, JPG or Paste from clipboard',
-          )}
-          {renderUploadCard(
-            'productImage',
-            'UPLOAD CHARACTER IMAGE',
-            'PNG, JPG or Paste from clipboard',
-          )}
-        </View>
-
-        <View style={styles.promptField}>
-          <TextInput
-            style={[styles.promptInput, errors.script && styles.promptInputError]}
-            placeholder="What should your character say?"
-            placeholderTextColor="rgba(255, 255, 255, 0.5)"
-            value={formData.step1.script}
-            onChangeText={text => {
-              setFormData(prev => ({
-                ...prev,
-                step1: {
-                  ...prev.step1,
-                  script: text,
-                },
-              }));
-              if (errors.script) {
-                setErrors(prev => ({
-                  ...prev,
-                  script: '',
-                }));
-              }
-            }}
-            multiline
-            textAlignVertical="top"
-          />
-          {errors.script ? <Text style={styles.inlineError}>{errors.script}</Text> : null}
-        </View>
+        {renderFormFields()}
 
         <TouchableOpacity
-          style={styles.generateButton}
+          style={[styles.generateButton, isSubmitting && styles.generateButtonDisabled]}
           activeOpacity={0.88}
-          onPress={handleStep1Next}
+          onPress={handleSubmit}
+          disabled={isSubmitting}
         >
-          <Feather name="star" size={20} color="#050505" />
-          <Text style={styles.generateLabel}>Generate Video</Text>
+          {isSubmitting ? (
+            <ActivityIndicator size="small" color="#050505" />
+          ) : (
+            <>
+              <Feather name="star" size={20} color="#050505" />
+              <Text style={styles.generateLabel}>生成视频</Text>
+            </>
+          )}
         </TouchableOpacity>
       </ScrollView>
     );
   };
 
-  const renderStep2 = () => (
-    <View style={styles.step2Wrapper}>
-      <View style={styles.topBar}>
-        <BackButton onPress={handleStep2Prev} />
-        <Text style={styles.stepIndicator}>STEP 2 OF 2</Text>
-      </View>
-
-      <Text style={styles.step2Title}>Run Parameters</Text>
-      <Text style={styles.step2Subtitle}>
-        Fine-tune the details so the ASMR video delivers the mood you expect.
-      </Text>
-
-      <View style={styles.step2FormShell}>
-        {formSchema.fields.length > 0 ? (
-          <DynamicForm
-            schema={formSchema}
-            initialData={formData.step2}
-            onDataChange={data => {
-              setFormData(prev => ({
-                ...prev,
-                step2: data,
-              }));
-            }}
-          />
-        ) : (
-          <View style={styles.emptyState}>
-            <Text style={styles.emptyIcon}>📋</Text>
-            <Text style={styles.emptyText}>No extra parameters</Text>
-            <Text style={styles.emptyDescription}>
-              This template is ready to go—start generating the ASMR experience instantly.
-            </Text>
-          </View>
-        )}
-      </View>
-    </View>
-  );
-
-  const renderBottomActions = () => {
-    if (currentStep !== 2) {
-      return null;
-    }
-
-    return (
-      <SafeAreaView edges={['bottom']} style={styles.bottomSafeArea}>
-        <View style={styles.bottomActions}>
-          <TouchableOpacity
-            style={styles.secondaryButton}
-            activeOpacity={0.85}
-            onPress={handleStep2Prev}
-          >
-            <Text style={styles.secondaryLabel}>Back</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.submitButton}
-            activeOpacity={0.9}
-            onPress={handleStep2Submit}
-            disabled={isSubmitting}
-          >
-            {isSubmitting ? (
-              <ActivityIndicator color="#050505" />
-            ) : (
-              <>
-                <Feather name="zap" size={18} color="#050505" />
-                <Text style={styles.submitLabel}>Generate Video</Text>
-              </>
-            )}
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-    );
-  };
-
   if (loading) {
     return (
       <>
@@ -420,9 +267,8 @@ export default function TemplateFormScreen() {
 
       <View style={styles.canvas}>
         <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
-          {currentStep === 1 ? renderStep1() : renderStep2()}
+          {renderStep1()}
         </SafeAreaView>
-        {renderBottomActions()}
       </View>
     </>
   );
@@ -512,86 +358,6 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
-  uploadRow: {
-    flexDirection: 'row',
-    gap: 18,
-    marginBottom: 24,
-  },
-  uploadItem: {
-    flex: 1,
-  },
-  uploadCard: {
-    borderRadius: 28,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.08)',
-    backgroundColor: 'rgba(17, 19, 24, 0.95)',
-    paddingHorizontal: 20,
-    paddingVertical: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 188,
-    overflow: 'hidden',
-  },
-  uploadCardFilled: {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
-  uploadCardError: {
-    borderColor: '#FF6B6B',
-  },
-  uploadIconWrap: {
-    width: 60,
-    height: 60,
-    borderRadius: 22,
-    backgroundColor: 'rgba(209, 255, 0, 0.12)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  uploadLabel: {
-    fontSize: 14,
-    fontWeight: '700',
-    letterSpacing: 0.6,
-    color: '#FFFFFF',
-    textAlign: 'center',
-    textTransform: 'uppercase',
-    marginBottom: 6,
-  },
-  uploadDescription: {
-    fontSize: 12,
-    lineHeight: 16,
-    color: 'rgba(255, 255, 255, 0.55)',
-    textAlign: 'center',
-  },
-  uploadImage: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-  },
-  promptField: {
-    marginBottom: 18,
-  },
-  promptInput: {
-    borderRadius: 28,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.08)',
-    backgroundColor: 'rgba(17, 19, 24, 0.95)',
-    minHeight: 140,
-    paddingHorizontal: 22,
-    paddingVertical: 22,
-    fontSize: 15,
-    lineHeight: 22,
-    color: '#FFFFFF',
-  },
-  promptInputError: {
-    borderColor: '#FF6B6B',
-  },
-  inlineError: {
-    marginTop: 8,
-    fontSize: 12,
-    color: '#FF6B6B',
-    letterSpacing: 0.2,
-  },
   generateButton: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -601,100 +367,13 @@ const styles = StyleSheet.create({
     backgroundColor: '#D1FF00',
     gap: 10,
   },
+  generateButtonDisabled: {
+    opacity: 0.6,
+  },
   generateLabel: {
     fontSize: 17,
     fontWeight: '700',
     letterSpacing: 0.4,
     color: '#050505',
   },
-  step2Wrapper: {
-    flex: 1,
-    paddingHorizontal: 24,
-    paddingBottom: 24,
-  },
-  step2Title: {
-    fontSize: 22,
-    fontWeight: '700',
-    color: '#FFFFFF',
-    letterSpacing: 0.6,
-    marginBottom: 10,
-  },
-  step2Subtitle: {
-    fontSize: 13,
-    lineHeight: 18,
-    color: 'rgba(255, 255, 255, 0.6)',
-    marginBottom: 20,
-  },
-  step2FormShell: {
-    flex: 1,
-    borderRadius: 32,
-    backgroundColor: 'rgba(17, 19, 24, 0.78)',
-    overflow: 'hidden',
-  },
-  emptyState: {
-    flex: 1,
-    paddingHorizontal: 32,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  emptyIcon: {
-    fontSize: 48,
-    marginBottom: 16,
-    color: '#FFFFFF',
-  },
-  emptyText: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#FFFFFF',
-    marginBottom: 8,
-  },
-  emptyDescription: {
-    fontSize: 14,
-    lineHeight: 20,
-    color: 'rgba(255, 255, 255, 0.6)',
-    textAlign: 'center',
-  },
-  bottomSafeArea: {
-    backgroundColor: '#050505',
-  },
-  bottomActions: {
-    flexDirection: 'row',
-    gap: 16,
-    paddingHorizontal: 24,
-    paddingTop: 12,
-    paddingBottom: 24,
-    borderTopWidth: 1,
-    borderTopColor: 'rgba(255, 255, 255, 0.08)',
-  },
-  secondaryButton: {
-    flex: 1,
-    height: 56,
-    borderRadius: 28,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  secondaryLabel: {
-    fontSize: 15,
-    fontWeight: '600',
-    color: 'rgba(255, 255, 255, 0.78)',
-    letterSpacing: 0.2,
-  },
-  submitButton: {
-    flex: 1.6,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: '#D1FF00',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 10,
-  },
-  submitLabel: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#050505',
-    letterSpacing: 0.3,
-  },
 });