fix: PayPal payment_method column length issue; add image model selection for storyboard; remove task restore popups; sync UserWork status on task failure

demo/frontend/src/components/PaymentModal.vue

@@ -25,6 +25,16 @@
           </div>
           <span>Alipay扫码支付</span>
         </div>
+        <div 
+          class="payment-method" 
+          :class="{ active: selectedMethod === 'paypal' }"
+          @click="selectMethod('paypal')"
+        >
+          <div class="method-icon paypal-icon">
+            <el-icon><CreditCard /></el-icon>
+          </div>
+          <span>PayPal支付</span>
+        </div>
       </div>
 
       <!-- 金额显示 -->
@@ -33,8 +43,8 @@
         <div class="amount-value">${{ amount }}</div>
       </div>
 
-      <!-- 二维码区域 -->
-      <div class="qr-section">
+      <!-- 支付宝二维码区域 -->
+      <div v-if="selectedMethod === 'alipay'" class="qr-section">
         <div class="qr-code">
           <img id="qr-code-img" style="display: none; width: 200px; height: 200px; margin: 0; padding: 0; border: none; object-fit: contain; background: #1a1a1a;" alt="支付二维码" />
           <div ref="qrPlaceholder" class="qr-placeholder">
@@ -46,32 +56,33 @@
         <div class="qr-tip">支付前请阅读《Vionow支付服务条款》</div>
       </div>
 
+      <!-- PayPal支付按钮区域 -->
+      <div v-if="selectedMethod === 'paypal'" class="paypal-section">
+        <div class="paypal-info">
+          <div class="paypal-logo">
+            <svg width="100" height="32" viewBox="0 0 100 32" fill="none">
+              <text x="0" y="24" font-family="Arial" font-size="20" font-weight="bold" fill="#0070BA">PayPal</text>
+            </svg>
+          </div>
+          <p class="paypal-desc">安全便捷的国际支付方式</p>
+          <p class="paypal-desc-small">点击下方按钮跳转到PayPal完成支付</p>
+        </div>
+        <button 
+          class="paypal-pay-button" 
+          @click="handlePay"
+          :disabled="loading"
+        >
+          <span v-if="!loading">前往PayPal支付</span>
+          <span v-else>正在跳转...</span>
+        </button>
+      </div>
+
       <!-- 支付提示 -->
-      <div class="action-section">
+      <div v-if="selectedMethod === 'alipay'" class="action-section">
         <div class="pay-tip">
           <p>请使用支付宝扫描上方二维码完成支付</p>
           <p class="tip-small">支付完成后页面将自动更新</p>
         </div>
-        <!-- 模拟支付完成按钮（仅用于测试） -->
-        <div class="test-payment-section" style="margin-top: 16px; text-align: center;">
-          <button 
-            class="test-payment-btn" 
-            @click="handleTestPaymentComplete"
-            :disabled="!currentPaymentId || loading"
-            style="
-              padding: 8px 16px;
-              background: #ff9800;
-              color: white;
-              border: none;
-              border-radius: 4px;
-              cursor: pointer;
-              font-size: 12px;
-              opacity: 0.8;
-            "
-          >
-            🧪 模拟支付完成（测试用）
-          </button>
-        </div>
       </div>
 
       <!-- 底部链接 -->
@@ -87,7 +98,7 @@ import { ref, watch, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { CreditCard } from '@element-plus/icons-vue'
-import { createPayment, createAlipayPayment, getPaymentById, testPaymentComplete } from '@/api/payments'
+import { createPayment, createAlipayPayment, createPayPalPayment, getPaymentById, getPayPalPaymentStatus } from '@/api/payments'
 
 const props = defineProps({
   modelValue: {
@@ -144,18 +155,42 @@ const selectMethod = (method) => {
 const handlePay = async () => {
   try {
     loading.value = true
-    ElMessage.info('正在创建支付订单...')
     
-    // 创建支付订单数据
-    const paymentData = {
-      orderId: props.orderId,
-      amount: props.amount.toString(),
-      method: 'ALIPAY',
-      description: `${props.title} - 支付宝支付`
+    // 根据选择的支付方式处理
+    if (selectedMethod.value === 'paypal') {
+      await handlePayPalPayment()
+    } else {
+      await handleAlipayPayment()
     }
+    
+  } catch (error) {
+    console.error('=== 支付流程出错 ===')
+    console.error('错误详情：', error)
+    console.error('错误响应：', error.response)
+    console.error('错误状态：', error.response?.status)
+    console.error('错误数据：', error.response?.data)
+    
+    ElMessage.error(`支付失败：${error.message || '请重试'}`)
+    emit('pay-error', error)
+  } finally {
+    loading.value = false
+  }
+}
 
-    console.log('=== 开始支付流程 ===')
-    console.log('支付数据：', paymentData)
+// 处理支付宝支付
+const handleAlipayPayment = async () => {
+  ElMessage.info('正在创建支付订单...')
+  
+  // 创建支付订单数据
+  const paymentData = {
+    orderId: props.orderId,
+    amount: props.amount.toString(),
+    method: 'ALIPAY',
+    description: `${props.title} - 支付宝支付`
+  }
+
+  console.log('=== 开始支付宝支付流程 ===')
+  console.log('支付数据：', paymentData)
     
     // 先创建支付记录
     console.log('1. 创建支付订单...')
@@ -227,18 +262,52 @@ const handlePay = async () => {
       ElMessage.error(createResponse.data?.message || '创建支付订单失败')
       emit('pay-error', new Error(createResponse.data?.message || '创建支付订单失败'))
     }
+}
+
+// 处理PayPal支付
+const handlePayPalPayment = async () => {
+  ElMessage.info('正在创建PayPal支付...')
+  
+  // 从sessionStorage获取用户信息
+  const userStr = sessionStorage.getItem('user')
+  let username = 'guest'
+  
+  if (userStr) {
+    try {
+      const user = JSON.parse(userStr)
+      username = user.username || user.name || 'guest'
+    } catch (e) {
+      console.error('解析用户信息失败:', e)
+    }
+  }
+  
+  const paymentData = {
+    username: username,
+    orderId: props.orderId,
+    amount: props.amount.toString(),
+    method: 'PAYPAL'
+  }
+
+  console.log('=== 开始PayPal支付流程 ===')
+  console.log('支付数据：', paymentData)
+  
+  const response = await createPayPalPayment(paymentData)
+  console.log('PayPal支付响应：', response)
+  
+  if (response.data && response.data.success) {
+    const paymentUrl = response.data.paymentUrl
+    const paymentId = response.data.paymentId
+    currentPaymentId.value = paymentId
     
-  } catch (error) {
-    console.error('=== 支付流程出错 ===')
-    console.error('错误详情：', error)
-    console.error('错误响应：', error.response)
-    console.error('错误状态：', error.response?.status)
-    console.error('错误数据：', error.response?.data)
+    console.log('PayPal支付URL:', paymentUrl)
+    ElMessage.success('正在跳转到PayPal支付页面...')
     
-    ElMessage.error(`支付失败：${error.message || '请重试'}`)
-    emit('pay-error', error)
-  } finally {
-    loading.value = false
+    // 跳转到PayPal支付页面
+    window.location.href = paymentUrl
+  } else {
+    console.error('PayPal支付创建失败：', response)
+    ElMessage.error(response.data?.message || 'PayPal支付创建失败')
+    emit('pay-error', new Error(response.data?.message || 'PayPal支付创建失败'))
   }
 }
 
@@ -350,44 +419,6 @@ const getStatusDescription = (status) => {
   return statusMap[status] || '未知状态'
 }
 
-// 模拟支付完成（用于测试）
-const handleTestPaymentComplete = async () => {
-  if (!currentPaymentId.value) {
-    ElMessage.warning('支付订单尚未创建，请稍候...')
-    return
-  }
-  
-  try {
-    loading.value = true
-    ElMessage.info('正在模拟支付完成...')
-    
-    console.log('模拟支付完成，支付ID:', currentPaymentId.value)
-    const response = await testPaymentComplete(currentPaymentId.value)
-    
-    console.log('✅ 模拟支付完成响应:', response)
-    console.log('✅ 响应数据:', response.data)
-    
-    if (response.data && response.data.success) {
-      console.log('✅ 模拟支付完成成功，支付数据:', response.data.data)
-      ElMessage.success('支付完成！')
-      stopPaymentPolling()
-      emit('pay-success', response.data.data)
-      // 延迟关闭模态框
-      setTimeout(() => {
-        visible.value = false
-      }, 2000)
-    } else {
-      console.error('❌ 模拟支付完成失败，响应:', response)
-      ElMessage.error(response.data?.message || '模拟支付完成失败')
-    }
-  } catch (error) {
-    console.error('模拟支付完成失败:', error)
-    ElMessage.error(`模拟支付完成失败：${error.message || '请重试'}`)
-  } finally {
-    loading.value = false
-  }
-}
-
 // 显示协议
 const showAgreement = () => {
   router.push('/terms-of-service')
@@ -690,6 +721,10 @@ const showAgreement = () => {
   color: #1677FF;
 }
 
+.paypal-icon {
+  color: #0070BA;
+}
+
 .payment-method.active .method-icon {
   color: white;
 }
@@ -726,6 +761,74 @@ const showAgreement = () => {
   letter-spacing: 0.5px !important;
 }
 
+/* PayPal支付区域 */
+.paypal-section {
+  text-align: center;
+  margin-bottom: 24px;
+  padding: 32px 24px;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.paypal-info {
+  margin-bottom: 24px;
+}
+
+.paypal-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.paypal-desc {
+  color: white !important;
+  font-size: 16px !important;
+  font-weight: 500 !important;
+  margin: 8px 0 !important;
+  line-height: 1.5 !important;
+}
+
+.paypal-desc-small {
+  color: rgba(255, 255, 255, 0.7) !important;
+  font-size: 13px !important;
+  font-weight: 400 !important;
+  margin: 4px 0 !important;
+  line-height: 1.5 !important;
+}
+
+.paypal-pay-button {
+  width: 100%;
+  padding: 16px 24px;
+  background: linear-gradient(135deg, #0070BA 0%, #005EA6 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 112, 186, 0.3);
+}
+
+.paypal-pay-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005EA6 0%, #004A85 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 112, 186, 0.4);
+}
+
+.paypal-pay-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.paypal-pay-button:disabled {
+  background: #666;
+  cursor: not-allowed;
+  opacity: 0.6;
+  transform: none;
+}
+
 /* 二维码区域 */
 .qr-section {
   text-align: center;