更新功能和文档: 增强支付系统、任务队列管理、用户作品管理等功能

2025-10-29 10:16:03 +08:00
parent 8c55f9f376
commit 6f72386523
64 changed files with 1529 additions and 339 deletions
--- a/demo/frontend/README.md
+++ b/demo/frontend/README.md
@@ -432,3 +432,5 @@ MIT License



+
+
--- a/demo/frontend/src/App-backup.vue
+++ b/demo/frontend/src/App-backup.vue
@@ -28,3 +28,5 @@ console.log('App.vue 加载成功')



+
+
--- a/demo/frontend/src/api/auth.js
+++ b/demo/frontend/src/api/auth.js
@@ -5,6 +5,11 @@ export const login = (credentials) => {
  return api.post('/auth/login', credentials)
 }

+// 邮箱验证码登录
+export const loginWithEmail = (credentials) => {
+  return api.post('/auth/login/email', credentials)
+}
+
 export const register = (userData) => {
  return api.post('/auth/register', userData)
 }
--- a/demo/frontend/src/api/cleanup.js
+++ b/demo/frontend/src/api/cleanup.js
@@ -29,7 +29,7 @@ export const cleanupApi = {
  // 获取清理统计信息（原始fetch方式，用于测试）
  async getCleanupStatsRaw() {
    try {
-      const response = await fetch('/api/cleanup/cleanup-stats')
+      const response = await fetch('http://localhost:8080/api/cleanup/cleanup-stats')
      if (response.ok) {
        return await response.json()
      } else {
@@ -44,7 +44,7 @@ export const cleanupApi = {
  // 执行完整清理（原始fetch方式，用于测试）
  async performFullCleanupRaw() {
    try {
-      const response = await fetch('/api/cleanup/full-cleanup', {
+      const response = await fetch('http://localhost:8080/api/cleanup/full-cleanup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
--- a/demo/frontend/src/api/userWorks.js
+++ b/demo/frontend/src/api/userWorks.js
@@ -0,0 +1,58 @@
+import request from './request'
+
+// 获取我的作品列表
+export const getMyWorks = (params = {}) => {
+  return request({
+    url: '/works/my-works',
+    method: 'GET',
+    params: {
+      page: params.page || 0,
+      size: params.size || 10
+    }
+  })
+}
+
+// 获取作品详情
+export const getWorkDetail = (workId) => {
+  return request({
+    url: `/works/${workId}`,
+    method: 'GET'
+  })
+}
+
+// 删除作品
+export const deleteWork = (workId) => {
+  return request({
+    url: `/works/${workId}`,
+    method: 'DELETE'
+  })
+}
+
+// 批量删除作品
+export const batchDeleteWorks = (workIds) => {
+  return request({
+    url: '/works/batch-delete',
+    method: 'POST',
+    data: {
+      workIds: workIds
+    }
+  })
+}
+
+// 更新作品信息
+export const updateWork = (workId, data) => {
+  return request({
+    url: `/works/${workId}`,
+    method: 'PUT',
+    data: data
+  })
+}
+
+// 获取作品统计信息
+export const getWorkStats = () => {
+  return request({
+    url: '/works/stats',
+    method: 'GET'
+  })
+}
+
--- a/demo/frontend/src/components/Footer.vue
+++ b/demo/frontend/src/components/Footer.vue
@@ -91,3 +91,5 @@



+
+
--- a/demo/frontend/src/components/PaymentModal.vue
+++ b/demo/frontend/src/components/PaymentModal.vue
@@ -0,0 +1,502 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    width="500px"
+    class="payment-modal"
+    :modal="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="true"
+    @close="handleClose"
+    center
+  >
+    <div class="payment-content">
+      <!-- 支付方式选择 -->
+      <div class="payment-methods">
+        <div 
+          class="payment-method" 
+          :class="{ active: selectedMethod === 'alipay' }"
+          @click="selectMethod('alipay')"
+        >
+          <div class="method-icon alipay-icon">
+            <el-icon><CreditCard /></el-icon>
+          </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>
+
+      <!-- 金额显示 -->
+      <div class="amount-section">
+        <div class="amount-label">金额</div>
+        <div class="amount-value">${{ amount }}</div>
+      </div>
+
+      <!-- 二维码区域 -->
+      <div class="qr-section">
+        <div class="qr-code">
+          <img id="qr-code-img" style="display: none; width: 200px; height: 200px;" alt="支付二维码" />
+          <div class="qr-placeholder">
+            <div class="qr-grid">
+              <div class="qr-dot" v-for="i in 64" :key="i"></div>
+            </div>
+          </div>
+        </div>
+        <div class="qr-tip">支付前请阅读《XX 付费服务协议》</div>
+      </div>
+
+      <!-- 支付提示 -->
+      <div class="action-section">
+        <div class="pay-tip">
+          <p>请使用支付宝扫描上方二维码完成支付</p>
+          <p class="tip-small">支付完成后页面将自动更新</p>
+        </div>
+      </div>
+
+      <!-- 底部链接 -->
+      <div class="footer-link">
+        <a href="#" @click.prevent="showAgreement">《XX 付费服务协议》</a>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { CreditCard } from '@element-plus/icons-vue'
+import { createPayment, createAlipayPayment } from '@/api/payments'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '标准版会员'
+  },
+  amount: {
+    type: [String, Number],
+    default: '32.00'
+  },
+  orderId: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'pay-success', 'pay-error'])
+
+const visible = ref(false)
+const selectedMethod = ref('alipay')
+const loading = ref(false)
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (newVal) => {
+  visible.value = newVal
+})
+
+// 监听 visible 变化
+watch(visible, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+
+// 选择支付方式
+const selectMethod = (method) => {
+  selectedMethod.value = method
+}
+
+// 处理支付
+const handlePay = async () => {
+  try {
+    loading.value = true
+    ElMessage.info('正在创建支付订单...')
+    
+    // 创建支付订单数据
+    const paymentData = {
+      orderId: props.orderId,
+      amount: props.amount.toString(),
+      method: selectedMethod.value.toUpperCase(),
+      description: `${props.title} - ${selectedMethod.value === 'alipay' ? '支付宝' : 'PayPal'}支付`
+    }
+
+    console.log('=== 开始支付流程 ===')
+    console.log('支付数据：', paymentData)
+    
+    // 先创建支付记录
+    console.log('1. 创建支付订单...')
+    const createResponse = await createPayment(paymentData)
+    console.log('创建支付订单响应：', createResponse)
+    
+    if (createResponse.data && createResponse.data.success) {
+      const paymentId = createResponse.data.data.id
+      console.log('2. 支付订单创建成功，ID：', paymentId)
+      
+      if (selectedMethod.value === 'alipay') {
+        ElMessage.info('正在生成支付宝二维码...')
+        
+        console.log('3. 创建支付宝支付...')
+        // 创建支付宝支付
+        const alipayResponse = await createAlipayPayment({ paymentId })
+        console.log('支付宝支付响应：', alipayResponse)
+        console.log('支付宝支付响应数据：', alipayResponse.data)
+        console.log('支付宝支付响应数据详情：', JSON.stringify(alipayResponse.data, null, 2))
+        
+        if (alipayResponse.data && alipayResponse.data.success) {
+          // 显示二维码
+          const qrCode = alipayResponse.data.data.qrCode
+          console.log('4. 支付宝二维码：', qrCode)
+          
+          // 更新二维码显示
+          const qrCodeElement = document.querySelector('#qr-code-img')
+          if (qrCodeElement) {
+            qrCodeElement.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode)}`
+            qrCodeElement.style.display = 'block'
+            console.log('5. 二维码图片已设置')
+          }
+          
+          // 隐藏模拟二维码
+          const qrPlaceholder = document.querySelector('.qr-placeholder')
+          if (qrPlaceholder) {
+            qrPlaceholder.style.display = 'none'
+            console.log('6. 模拟二维码已隐藏')
+          }
+          
+          ElMessage.success('二维码已生成，请使用支付宝扫码支付')
+          console.log('=== 支付流程完成 ===')
+          
+        } else {
+          console.error('支付宝响应失败：', alipayResponse)
+          ElMessage.error(alipayResponse.data?.message || '生成二维码失败')
+          emit('pay-error', new Error(alipayResponse.data?.message || '生成二维码失败'))
+        }
+      } else {
+        // PayPal支付处理
+        ElMessage.info('PayPal支付功能开发中...')
+        emit('pay-error', new Error('PayPal支付功能暂未开放'))
+      }
+      
+    } else {
+      console.error('创建支付订单失败：', createResponse)
+      ElMessage.error(createResponse.data?.message || '创建支付订单失败')
+      emit('pay-error', new Error(createResponse.data?.message || '创建支付订单失败'))
+    }
+    
+  } 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
+  }
+}
+
+// 关闭模态框
+const handleClose = () => {
+  visible.value = false
+}
+
+// 显示协议
+const showAgreement = () => {
+  ElMessage.info('服务协议页面')
+}
+</script>
+
+<style scoped>
+.payment-modal {
+  background: #0a0a0a;
+}
+
+.payment-modal :deep(.el-dialog) {
+  background: #0a0a0a;
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+}
+
+.payment-modal :deep(.el-dialog__header) {
+  background: #0a0a0a;
+  border-bottom: 1px solid #1a1a1a;
+  padding: 20px 24px;
+}
+
+.payment-modal :deep(.el-dialog__title) {
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.payment-modal :deep(.el-dialog__headerbtn) {
+  color: #999;
+}
+
+.payment-modal :deep(.el-dialog__headerbtn:hover) {
+  color: white;
+}
+
+.payment-content {
+  padding: 24px;
+  background: #0a0a0a;
+  color: white;
+}
+
+/* 支付方式选择 */
+.payment-methods {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.payment-method {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: #1a1a1a;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.payment-method:hover {
+  background: #2a2a2a;
+  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.2);
+}
+
+.payment-method.active {
+  background: linear-gradient(135deg, #4a9eff 0%, #3a8bdf 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.3);
+}
+
+.method-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1677FF;
+}
+
+.payment-method.active .method-icon {
+  color: white;
+}
+
+.payment-method span {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 金额显示 */
+.amount-section {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.amount-label {
+  font-size: 14px;
+  color: #999;
+  margin-bottom: 8px;
+}
+
+.amount-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: #e0e0e0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* 二维码区域 */
+.qr-section {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.qr-code {
+  width: 200px;
+  height: 200px;
+  margin: 0 auto 16px;
+  background: #1a1a1a;
+  border: none;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.qr-placeholder {
+  width: 180px;
+  height: 180px;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-placeholder::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  border: 3px solid #4a9eff;
+  border-radius: 8px;
+  transform: translate(-50%, -50%);
+  opacity: 0.6;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+}
+
+.qr-placeholder::after {
+  content: '扫码支付';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, calc(-50% + 40px));
+  color: #4a9eff;
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+.qr-tip {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 操作按钮 */
+.action-section {
+  margin-bottom: 16px;
+}
+
+.pay-button {
+  width: 100%;
+  padding: 14px;
+  background: #4a9eff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.pay-button:hover {
+  background: #3a8bdf;
+  transform: translateY(-1px);
+}
+
+.pay-button:active {
+  transform: translateY(0);
+}
+
+.pay-button:disabled {
+  background: #666;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.pay-button:disabled:hover {
+  background: #666;
+  transform: none;
+}
+
+/* 支付提示 */
+.pay-tip {
+  text-align: center;
+  padding: 20px;
+  background: #1a1a1a;
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.pay-tip p {
+  margin: 8px 0;
+  color: #e0e0e0;
+  font-size: 14px;
+}
+
+.tip-small {
+  color: #999 !important;
+  font-size: 12px !important;
+}
+
+/* 底部链接 */
+.footer-link {
+  text-align: center;
+}
+
+.footer-link a {
+  color: #4a9eff;
+  text-decoration: none;
+  font-size: 12px;
+  transition: color 0.3s ease;
+}
+
+.footer-link a:hover {
+  color: #3a8bdf;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .payment-modal :deep(.el-dialog) {
+    width: 90%;
+    margin: 0 auto;
+  }
+  
+  .payment-methods {
+    flex-direction: column;
+  }
+  
+  .qr-code {
+    width: 160px;
+    height: 160px;
+  }
+  
+  .qr-placeholder {
+    width: 140px;
+    height: 140px;
+  }
+  
+  .amount-value {
+    font-size: 28px;
+  }
+}
+</style>
--- a/demo/frontend/src/views/CleanupTest.vue
+++ b/demo/frontend/src/views/CleanupTest.vue
@@ -167,7 +167,7 @@ const testGetStats = async () => {
  statsError.value = null
  
  try {
-    const response = await fetch('/api/cleanup/cleanup-stats', {
+    const response = await fetch('http://localhost:8080/api/cleanup/cleanup-stats', {
      headers: {
        'Content-Type': 'application/json',
        ...getAuthHeaders()
@@ -193,7 +193,7 @@ const testFullCleanup = async () => {
  cleanupError.value = null
  
  try {
-    const response = await fetch('/api/cleanup/full-cleanup', {
+    const response = await fetch('http://localhost:8080/api/cleanup/full-cleanup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
@@ -252,7 +252,7 @@ const testQueueStatus = async () => {
  queueError.value = null
  
  try {
-    const response = await fetch('/api/diagnostic/queue-status')
+    const response = await fetch('http://localhost:8080/api/diagnostic/queue-status')
    if (response.ok) {
      queueResult.value = await response.json()
      ElMessage.success('获取队列状态成功')
--- a/demo/frontend/src/views/ImageToVideo.vue
+++ b/demo/frontend/src/views/ImageToVideo.vue
@@ -201,11 +201,11 @@ const goToMyWorks = () => {
 }

 const goToTextToVideo = () => {
-  router.push('/text-to-video')
+  router.push('/text-to-video/create')
 }

 const goToStoryboardVideo = () => {
-  router.push('/storyboard-video')
+  router.push('/storyboard-video/create')
 }

 const goToCreate = (work) => {
--- a/demo/frontend/src/views/Login.vue
+++ b/demo/frontend/src/views/Login.vue
@@ -148,7 +148,7 @@ const getEmailCode = async () => {
  
  try {
    // 调用后端API发送邮箱验证码
-    const response = await fetch('/api/verification/email/send', {
+    const response = await fetch('http://localhost:8080/api/verification/email/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
@@ -176,7 +176,7 @@ const getEmailCode = async () => {
      
      // 开发模式：将验证码同步到后端
      try {
-        await fetch('/api/verification/email/dev-set', {
+        await fetch('http://localhost:8080/api/verification/email/dev-set', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
@@ -234,7 +234,7 @@ const handleLogin = async () => {
    
    // 邮箱验证码登录
    try {
-      const response = await fetch('/api/auth/login/email', {
+      const response = await fetch('http://localhost:8080/api/auth/login/email', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
--- a/demo/frontend/src/views/MyWorks.vue
+++ b/demo/frontend/src/views/MyWorks.vue
@@ -315,6 +315,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Star, User, Compass, Document, VideoPlay, Picture, Film, Bell, Setting, Search } from '@element-plus/icons-vue'
+import { getMyWorks } from '@/api/userWorks'

 const router = useRouter()

@@ -343,12 +344,20 @@ const items = ref([])
 const loadList = async () => {
  loading.value = true
  try {
-    const response = await api.get('/user-works')
-    const data = response.data.data || []
+    const response = await getMyWorks({
+      page: page.value - 1, // 后端使用0-based分页
+      size: pageSize.value
+    })
    
-    if (page.value === 1) items.value = []
-    items.value = items.value.concat(data)
-    hasMore.value = data.length < pageSize.value
+    if (response.data.success) {
+      const data = response.data.data || []
+      
+      if (page.value === 1) items.value = []
+      items.value = items.value.concat(data)
+      hasMore.value = data.length === pageSize.value
+    } else {
+      throw new Error(response.data.message || '获取作品列表失败')
+    }
  } catch (error) {
    console.error('加载作品列表失败:', error)
    ElMessage.error('加载作品列表失败')
@@ -512,18 +521,18 @@ const goToSubscription = () => {
 }

 const goToTextToVideo = () => {
-  console.log('导航到文生视频')
-  router.push('/text-to-video')
+  console.log('导航到文生视频创作')
+  router.push('/text-to-video/create')
 }

 const goToImageToVideo = () => {
-  console.log('导航到图生视频')
-  router.push('/image-to-video')
+  console.log('导航到图生视频创作')
+  router.push('/image-to-video/create')
 }

 const goToStoryboardVideo = () => {
-  console.log('导航到分镜视频')
-  router.push('/storyboard-video')
+  console.log('导航到分镜视频创作')
+  router.push('/storyboard-video/create')
 }

 // 重置筛选器
--- a/demo/frontend/src/views/Profile.vue
+++ b/demo/frontend/src/views/Profile.vue
@@ -179,15 +179,15 @@ const goToMyWorks = () => {
 }

 const goToTextToVideo = () => {
-  router.push('/text-to-video')
+  router.push('/text-to-video/create')
 }

 const goToImageToVideo = () => {
-  router.push('/image-to-video')
+  router.push('/image-to-video/create')
 }

 const goToStoryboardVideo = () => {
-  router.push('/storyboard-video')
+  router.push('/storyboard-video/create')
 }

 // 跳转到数据仪表盘
--- a/demo/frontend/src/views/StoryboardVideo.vue
+++ b/demo/frontend/src/views/StoryboardVideo.vue
@@ -201,11 +201,11 @@ const goToMyWorks = () => {
 }

 const goToTextToVideo = () => {
-  router.push('/text-to-video')
+  router.push('/text-to-video/create')
 }

 const goToImageToVideo = () => {
-  router.push('/image-to-video')
+  router.push('/image-to-video/create')
 }

 const goToCreate = (work) => {
--- a/demo/frontend/src/views/Subscription.vue
+++ b/demo/frontend/src/views/Subscription.vue
@@ -129,7 +129,7 @@
              </div>
              <div class="package-price">$59/月</div>
              <div class="points-box">每月200积分</div>
-              <button class="package-button subscribe">立即订阅</button>
+              <button class="package-button subscribe" @click.stop="handleSubscribe('standard')">立即订阅</button>
              <div class="package-features">
                <div class="feature-item">
                  <el-icon class="check-icon"><Check /></el-icon>
@@ -154,7 +154,7 @@
              </div>
              <div class="package-price">$259/月</div>
              <div class="points-box">每月1000积分</div>
-              <button class="package-button premium">立即订阅</button>
+              <button class="package-button premium" @click.stop="handleSubscribe('premium')">立即订阅</button>
              <div class="package-features">
                <div class="feature-item">
                  <el-icon class="check-icon"><Check /></el-icon>
@@ -226,12 +226,25 @@
      </div>
    </div>
  </el-dialog>
+
+  <!-- 支付模态框 -->
+  <PaymentModal
+    v-model="paymentModalVisible"
+    :title="currentPaymentData.title"
+    :amount="currentPaymentData.amount"
+    :order-id="currentPaymentData.orderId"
+    @pay-success="handlePaymentSuccess"
+    @pay-error="handlePaymentError"
+  />
 </template>

 <script setup>
 import { ref, computed } from 'vue'
 import MyWorks from '@/views/MyWorks.vue'
+import PaymentModal from '@/components/PaymentModal.vue'
 import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { createPayment, createAlipayPayment } from '@/api/payments'
 import { 
  User, 
  Document, 
@@ -257,19 +270,21 @@ const goToMyWorks = () => {
 }

 const goToTextToVideo = () => {
-  router.push('/text-to-video')
+  router.push('/text-to-video/create')
 }

 const goToImageToVideo = () => {
-  router.push('/image-to-video')
+  router.push('/image-to-video/create')
 }

 const goToStoryboardVideo = () => {
-  router.push('/storyboard-video')
+  router.push('/storyboard-video/create')
 }

 // 订单模态框相关
 const orderDialogVisible = ref(false)
+const paymentModalVisible = ref(false)
+const currentPaymentData = ref({})
 const orders = ref([
  {
    id: 'ORD-2024-001',
@@ -327,6 +342,216 @@ const selectedPlan = ref('free')
 const selectPlan = (plan) => {
  selectedPlan.value = plan
 }
+
+// 处理订阅
+const handleSubscribe = async (planType) => {
+  console.log('handleSubscribe 被调用，planType:', planType)
+  try {
+    console.log('开始处理订阅...')
+    const planInfo = getPlanInfo(planType)
+    console.log('获取到的套餐信息:', planInfo)
+    
+    // 设置支付数据
+    currentPaymentData.value = {
+      title: `${planInfo.name}会员`,
+      amount: planInfo.price,
+      orderId: `SUB_${planType}_${Date.now()}`,
+      planType: planType,
+      planInfo: planInfo
+    }
+    
+    console.log('支付数据设置完成:', currentPaymentData.value)
+    
+    // 显示支付模态框
+    paymentModalVisible.value = true
+    console.log('支付模态框应该已显示')
+    
+    // 直接生成二维码
+    ElMessage.info('正在生成支付二维码...')
+    await generateQRCode(planType, planInfo)
+    
+  } catch (error) {
+    console.error('订阅处理失败:', error)
+    ElMessage.error('订阅处理失败，请重试')
+  }
+}
+
+// 生成二维码
+const generateQRCode = async (planType, planInfo) => {
+  try {
+    console.log('=== 开始生成二维码 ===')
+    
+    // 创建支付订单数据
+    const paymentData = {
+      orderId: `SUB_${planType}_${Date.now()}`,
+      amount: planInfo.price.toString(),
+      method: 'ALIPAY',
+      description: `${planInfo.name}会员 - 支付宝支付`
+    }
+
+    console.log('1. 创建支付订单，数据：', paymentData)
+    const createResponse = await createPayment(paymentData)
+    console.log('创建支付订单响应：', createResponse)
+    
+    if (createResponse.data && createResponse.data.success) {
+      const paymentId = createResponse.data.data.id
+      console.log('2. 支付订单创建成功，ID：', paymentId)
+      
+      console.log('3. 创建支付宝支付...')
+      const alipayResponse = await createAlipayPayment({ paymentId })
+      console.log('支付宝支付响应：', alipayResponse)
+      
+      if (alipayResponse.data && alipayResponse.data.success) {
+        const qrCode = alipayResponse.data.data.qrCode
+        console.log('4. 支付宝二维码：', qrCode)
+        
+        if (qrCode) {
+          // 更新二维码显示
+          const qrCodeElement = document.querySelector('#qr-code-img')
+          if (qrCodeElement) {
+            qrCodeElement.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode)}`
+            qrCodeElement.style.display = 'block'
+            console.log('5. 二维码图片已设置')
+          }
+          
+          // 隐藏模拟二维码
+          const qrPlaceholder = document.querySelector('.qr-placeholder')
+          if (qrPlaceholder) {
+            qrPlaceholder.style.display = 'none'
+            console.log('6. 模拟二维码已隐藏')
+          }
+          
+          ElMessage.success('二维码已生成，请使用支付宝扫码支付')
+          console.log('=== 二维码生成完成 ===')
+        } else {
+          ElMessage.error('二维码生成失败：二维码为空')
+        }
+      } else {
+        console.error('支付宝响应失败：', alipayResponse)
+        ElMessage.error(alipayResponse.data?.message || '生成二维码失败')
+      }
+    } else {
+      console.error('创建支付订单失败：', createResponse)
+      ElMessage.error(createResponse.data?.message || '创建支付订单失败')
+    }
+    
+  } catch (error) {
+    console.error('=== 二维码生成出错 ===')
+    console.error('错误详情：', error)
+    ElMessage.error(`二维码生成失败：${error.message || '请重试'}`)
+  }
+}
+
+// 获取套餐信息
+const getPlanInfo = (planType) => {
+  const plans = {
+    standard: {
+      name: '标准版',
+      price: 59,
+      points: 200,
+      description: '标准版订阅 - 每月200积分'
+    },
+    premium: {
+      name: '专业版',
+      price: 259,
+      points: 1000,
+      description: '专业版订阅 - 每月1000积分'
+    }
+  }
+  return plans[planType]
+}
+
+// 支付成功处理
+const handlePaymentSuccess = async (paymentData) => {
+  try {
+    ElMessage.success('支付成功！正在处理订单...')
+    
+    // 这里可以添加支付成功后的处理逻辑
+    // 比如更新用户状态、发送确认邮件等
+    
+    // 关闭支付模态框
+    paymentModalVisible.value = false
+    
+    // 刷新页面或更新用户信息
+    setTimeout(() => {
+      window.location.reload()
+    }, 2000)
+    
+  } catch (error) {
+    console.error('支付成功处理失败:', error)
+    ElMessage.error('支付成功但处理订单失败，请联系客服')
+  }
+}
+
+// 支付失败处理
+const handlePaymentError = (error) => {
+  console.error('支付失败:', error)
+  ElMessage.error('支付失败，请重试')
+}
+
+// 创建订阅订单
+const createSubscriptionOrder = async (planType, planInfo) => {
+  try {
+    ElMessage.info('正在创建订单...')
+    
+    // 生成订单号
+    const orderId = `SUB_${planType}_${Date.now()}`
+    
+    // 创建支付订单数据
+    const paymentData = {
+      orderId: orderId,
+      amount: planInfo.price.toString(),
+      method: 'ALIPAY',
+      description: planInfo.description,
+      orderType: 'SUBSCRIPTION',
+      planType: planType
+    }
+
+    // 先创建支付记录
+    const createResponse = await createPayment(paymentData)
+    
+    if (createResponse.data.success) {
+      const paymentId = createResponse.data.data.id
+      
+      // 然后创建支付宝支付
+      const alipayResponse = await createAlipayPayment({ paymentId })
+      
+      if (alipayResponse.data.success) {
+        // 跳转到支付宝支付页面
+        const paymentForm = alipayResponse.data.data
+        // 创建临时div来显示支付表单
+        const tempDiv = document.createElement('div')
+        tempDiv.innerHTML = paymentForm
+        document.body.appendChild(tempDiv)
+        
+        // 自动提交表单
+        const form = tempDiv.querySelector('form')
+        if (form) {
+          form.submit()
+        } else {
+          ElMessage.error('支付页面加载失败')
+        }
+        
+        // 清理临时元素
+        setTimeout(() => {
+          if (document.body.contains(tempDiv)) {
+            document.body.removeChild(tempDiv)
+          }
+        }, 1000)
+        
+      } else {
+        ElMessage.error(alipayResponse.data.message || '创建支付宝支付失败')
+      }
+      
+    } else {
+      ElMessage.error(createResponse.data.message || '创建支付订单失败')
+    }
+    
+  } catch (error) {
+    console.error('创建支付订单失败:', error)
+    ElMessage.error('创建支付订单失败，请重试')
+  }
+}
 </script>

 <style scoped>
--- a/demo/frontend/src/views/SystemSettings.vue
+++ b/demo/frontend/src/views/SystemSettings.vue
@@ -507,7 +507,7 @@ const getAuthHeaders = () => {
 const refreshStats = async () => {
  loadingStats.value = true
  try {
-    const response = await fetch('/api/cleanup/cleanup-stats', {
+    const response = await fetch('http://localhost:8080/api/cleanup/cleanup-stats', {
      headers: {
        'Content-Type': 'application/json',
        ...getAuthHeaders()
@@ -530,7 +530,7 @@ const refreshStats = async () => {
 const performFullCleanup = async () => {
  loadingCleanup.value = true
  try {
-    const response = await fetch('/api/cleanup/full-cleanup', {
+    const response = await fetch('http://localhost:8080/api/cleanup/full-cleanup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
--- a/demo/frontend/src/views/TextToVideo.vue
+++ b/demo/frontend/src/views/TextToVideo.vue
@@ -201,11 +201,11 @@ const goToMyWorks = () => {
 }

 const goToImageToVideo = () => {
-  router.push('/image-to-video')
+  router.push('/image-to-video/create')
 }

 const goToStoryboardVideo = () => {
-  router.push('/storyboard-video')
+  router.push('/storyboard-video/create')
 }

 const goToCreate = (work) => {