blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 使用banana模型生成分镜图片，修复数据库列类型问题

Browse Source 
- 修改RealAIService.submitTextToImageTask使用nano-banana/nano-banana-hd模型
- 支持根据hdMode参数选择模型（标准/高清）
- 修复数据库列类型：将result_url等字段改为TEXT类型以支持Base64图片
- 添加数据库修复SQL脚本（fix_database_columns.sql, update_database_schema.sql）
- 改进StoryboardVideoService的错误处理和空值检查
- 添加GlobalExceptionHandler全局异常处理
- 优化图片URL提取逻辑，支持url和b64_json两种格式
- 改进响应格式验证，确保data字段不为空
This commit is contained in:
AIGC Developer
2025-11-05 18:18:53 +08:00
parent 0b0ad442a0
commit b5820d9be2
63 changed files with 2207 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo/frontend/README.md
View File

@@ -436,6 +436,9 @@ MIT License

3
demo/frontend/package.json
View File

@@ -15,7 +15,8 @@
"pinia": "^2.1.6",
"axios": "^1.5.0",
"element-plus": "^2.3.8",
"@element-plus/icons-vue": "^2.1.0"
"@element-plus/icons-vue": "^2.1.0",
"qrcode": "^1.5.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.3.4",

3
demo/frontend/src/App-backup.vue
View File

@@ -33,6 +33,9 @@ console.log('App.vue 加载成功')

61
demo/frontend/src/App.vue
View File

@@ -594,6 +594,67 @@ main.with-navbar {
font-family: inherit;
}
/* 移除 el-dialog 的所有可能的白色边框 */
.payment-modal-dialog,
.payment-modal-dialog.el-dialog,
.payment-modal-dialog.el-dialog--center,
.payment-modal-dialog.el-dialog--center.payment-modal,
.el-overlay-dialog .payment-modal-dialog,
.el-overlay-dialog .payment-modal-dialog.el-dialog,
.el-overlay-dialog .payment-modal-dialog.el-dialog--center,
.el-overlay-dialog .payment-modal-dialog.el-dialog--center.payment-modal,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog.el-dialog,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog.el-dialog--center,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog.el-dialog--center.payment-modal {
background: #000000 !important;
background-color: #000000 !important;
border: none !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}
.payment-modal-dialog .el-dialog__body,
.payment-modal-dialog .el-dialog__header {
background: #000000 !important;
background-color: #000000 !important;
border: none !important;
border-width: 0 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
outline: none !important;
}
/* 全局覆盖所有可能的对话框背景 */
.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog,
.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog.el-dialog--center,
.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog.el-dialog--center.payment-modal,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog.el-dialog,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog.el-dialog--center,
.el-overlay.payment-modal-overlay.el-modal-dialog .payment-modal-dialog.el-dialog--center.payment-modal,
.el-overlay-dialog .el-dialog.el-dialog--center.payment-modal,
.el-overlay-dialog .payment-modal-dialog.el-dialog--center.payment-modal,
.el-dialog.el-dialog--center.payment-modal,
.payment-modal-dialog.el-dialog.el-dialog--center.payment-modal,
/* 使用属性选择器覆盖所有包含 payment-modal 的对话框 */
[class*="payment-modal"][class*="el-dialog"],
[class*="payment-modal"][class*="el-dialog--center"],
.el-dialog[class*="payment-modal"],
.payment-modal-dialog[class*="el-dialog"] {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;

5
demo/frontend/src/api/payments.js
View File

@@ -52,3 +52,8 @@ export const handleAlipayCallback = (params) => {
export const getPaymentStats = () => {
return api.get('/payments/stats')
}
// 获取用户订阅信息
export const getUserSubscriptionInfo = () => {
return api.get('/payments/subscription/info')
}

58
demo/frontend/src/api/request.js
View File

@@ -9,8 +9,13 @@ const api = axios.create({
baseURL: getApiBaseURL(),
timeout: 900000, // 增加到15分钟，适应视频生成时间
withCredentials: true,
maxRedirects: 0, // 不自动跟随重定向，手动处理302
headers: {
'Content-Type': 'application/json'
},
validateStatus: function (status) {
// 允许所有状态码，包括302，让拦截器处理
return status >= 200 && status < 600
}
})
@@ -19,8 +24,11 @@ api.interceptors.request.use(
(config) => {
// 使用JWT认证，添加Authorization头
const token = sessionStorage.getItem('token')
if (token) {
if (token && token !== 'null' && token.trim() !== '') {
config.headers.Authorization = `Bearer ${token}`
console.log('请求拦截器：添加Authorization头，token长度:', token.length)
} else {
console.warn('请求拦截器：未找到有效的token')
}
return config
},
@@ -33,6 +41,33 @@ api.interceptors.request.use(
// 响应拦截器
api.interceptors.response.use(
(response) => {
// 检查是否是HTML响应（可能是302重定向的结果）
if (response.data && typeof response.data === 'string' && response.data.trim().startsWith('<!DOCTYPE')) {
console.error('收到HTML响应，可能是认证失败:', response.config.url)
// 清除无效的token并跳转到登录页
sessionStorage.removeItem('token')
sessionStorage.removeItem('user')
// 避免重复跳转
if (router.currentRoute.value.path !== '/login') {
ElMessage.error('认证失败，请重新登录')
router.push('/login')
}
// 返回错误，让调用方知道这是认证失败
return Promise.reject(new Error('认证失败：收到HTML响应'))
}
// 检查302重定向
if (response.status === 302) {
console.error('收到302重定向，可能是认证失败:', response.config.url)
sessionStorage.removeItem('token')
sessionStorage.removeItem('user')
if (router.currentRoute.value.path !== '/login') {
ElMessage.error('认证失败，请重新登录')
router.push('/login')
}
return Promise.reject(new Error('认证失败：302重定向'))
}
// 直接返回response，让调用方处理data
return response
},
@@ -40,13 +75,28 @@ api.interceptors.response.use(
if (error.response) {
const { status, data } = error.response
// 检查响应数据是否是HTML（302重定向的结果）
if (data && typeof data === 'string' && data.trim().startsWith('<!DOCTYPE')) {
console.error('收到HTML响应（可能是302重定向）:', error.config.url)
sessionStorage.removeItem('token')
sessionStorage.removeItem('user')
if (router.currentRoute.value.path !== '/login') {
ElMessage.error('认证失败，请重新登录')
router.push('/login')
}
return Promise.reject(error)
}
switch (status) {
case 401:
ElMessage.error('未授权，请重新登录')
case 302:
// 302也可能是认证失败导致的
sessionStorage.removeItem('token')
sessionStorage.removeItem('user')
// 使用Vue Router进行路由跳转，避免页面刷新
router.push('/login')
if (router.currentRoute.value.path !== '/login') {
ElMessage.error('认证失败，请重新登录')
router.push('/login')
}
break
case 403:
ElMessage.error('权限不足')

3
demo/frontend/src/api/userWorks.js
View File

@@ -62,3 +62,6 @@ export const getWorkStats = () => {

3
demo/frontend/src/components/Footer.vue
View File

@@ -95,6 +95,9 @@

556
demo/frontend/src/components/PaymentModal.vue
View File

@@ -8,9 +8,9 @@
:close-on-click-modal="false"
:close-on-press-escape="true"
@close="handleClose"
center
:show-close="true"
custom-class="payment-modal-dialog"
:modal-class="'payment-modal-overlay'"
>
<div class="payment-content">
<!-- 支付方式选择 -->
@@ -36,8 +36,8 @@
<!-- 二维码区域 -->
<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">
<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">
<div class="qr-grid">
<div class="qr-dot" v-for="i in 64" :key="i"></div>
</div>
@@ -52,6 +52,26 @@
<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>
<!-- 底部链接 -->
@@ -63,10 +83,10 @@
</template>
<script setup>
import { ref, watch } from 'vue'
import { ref, watch, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { CreditCard } from '@element-plus/icons-vue'
import { createPayment, createAlipayPayment } from '@/api/payments'
import { createPayment, createAlipayPayment, getPaymentById, testPaymentComplete } from '@/api/payments'
const props = defineProps({
modelValue: {
@@ -92,15 +112,25 @@ const emit = defineEmits(['update:modelValue', 'pay-success', 'pay-error'])
const visible = ref(false)
const selectedMethod = ref('alipay')
const loading = ref(false)
const currentPaymentId = ref(null)
let paymentPollingTimer = null
// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
visible.value = newVal
// 当模态框打开时，自动开始支付流程
if (newVal) {
handlePay()
}
})
// 监听 visible 变化
watch(visible, (newVal) => {
emit('update:modelValue', newVal)
// 如果模态框关闭，停止轮询
if (!newVal) {
stopPaymentPolling()
}
})
// 选择支付方式
@@ -132,6 +162,7 @@ const handlePay = async () => {
if (createResponse.data && createResponse.data.success) {
const paymentId = createResponse.data.data.id
currentPaymentId.value = paymentId
console.log('2. 支付订单创建成功，ID：', paymentId)
ElMessage.info('正在生成支付宝二维码...')
@@ -148,24 +179,41 @@ const handlePay = async () => {
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. 二维码图片已设置')
// 使用在线API生成二维码图片（直接使用支付宝返回的URL生成二维码）
try {
console.log('开始生成二维码，内容:', qrCode)
// 使用QuickChart API生成二维码，完全去除白边
// 直接使用支付宝返回的URL作为二维码内容
const qrCodeUrl = `https://quickchart.io/qr?text=${encodeURIComponent(qrCode)}&size=200&margin=0&dark=ffffff&light=1a1a1a`
console.log('5. 二维码图片URL已生成')
// 更新二维码显示
const qrCodeElement = document.querySelector('#qr-code-img')
if (qrCodeElement) {
qrCodeElement.src = qrCodeUrl
qrCodeElement.style.display = 'block'
console.log('6. 二维码图片已设置')
}
// 隐藏模拟二维码
const qrPlaceholder = document.querySelector('.qr-placeholder')
if (qrPlaceholder) {
qrPlaceholder.style.display = 'none'
console.log('7. 模拟二维码已隐藏')
}
ElMessage.success('二维码已生成，请使用支付宝扫码支付')
console.log('=== 支付流程完成，开始轮询支付状态 ===')
// 开始轮询支付状态
startPaymentPolling(paymentId)
} catch (error) {
console.error('生成二维码失败：', error)
ElMessage.error('生成二维码失败，请重试')
}
// 隐藏模拟二维码
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 || '生成二维码失败')
@@ -192,11 +240,152 @@ const handlePay = async () => {
}
}
// 轮询支付状态
const startPaymentPolling = (paymentId) => {
// 清除之前的轮询
stopPaymentPolling()
let pollCount = 0
const maxPolls = 60 // 最多轮询60次（10分钟，每10秒一次）
const poll = async () => {
if (pollCount >= maxPolls) {
console.log('轮询达到最大次数，停止轮询')
stopPaymentPolling()
return
}
try {
console.log(`轮询支付状态 (${pollCount + 1}/${maxPolls})，支付ID:`, paymentId)
const response = await getPaymentById(paymentId)
if (response.data && response.data.success) {
const payment = response.data.data
const status = payment.status
console.log('支付状态:', status, '状态说明:', getStatusDescription(status))
if (status === 'SUCCESS' || status === 'COMPLETED') {
console.log('✅ 支付成功！支付数据:', payment)
stopPaymentPolling()
ElMessage.success('支付成功！')
emit('pay-success', payment)
// 延迟关闭模态框
setTimeout(() => {
visible.value = false
}, 2000)
return
} else if (status === 'FAILED' || status === 'CANCELLED') {
console.log('支付失败或取消')
stopPaymentPolling()
ElMessage.warning('支付已取消或失败')
emit('pay-error', new Error('支付已取消或失败'))
return
} else if (status === 'PROCESSING') {
console.log('支付处理中...')
// PROCESSING 状态继续轮询，但可以给用户提示
if (pollCount % 6 === 0) { // 每60秒提示一次
ElMessage.info('支付处理中，请稍候...')
}
} else if (status === 'PENDING') {
console.log('支付待处理中（等待支付宝回调）...')
// PENDING 状态继续轮询
if (pollCount % 6 === 0) { // 每60秒提示一次
ElMessage.info('等待支付确认，请确保已完成支付...')
}
}
}
// 继续轮询
pollCount++
paymentPollingTimer = setTimeout(poll, 10000) // 每10秒轮询一次
} catch (error) {
console.error('轮询支付状态失败:', error)
// 错误时也继续轮询，直到达到最大次数
pollCount++
if (pollCount < maxPolls) {
paymentPollingTimer = setTimeout(poll, 10000)
}
}
}
// 开始轮询（等待5秒后开始第一次轮询）
setTimeout(() => {
poll()
}, 5000)
}
// 停止轮询支付状态
const stopPaymentPolling = () => {
if (paymentPollingTimer) {
clearTimeout(paymentPollingTimer)
paymentPollingTimer = null
console.log('已停止轮询支付状态')
}
}
// 关闭模态框
const handleClose = () => {
stopPaymentPolling()
visible.value = false
}
// 组件卸载时清理轮询
onUnmounted(() => {
stopPaymentPolling()
})
// 获取支付状态描述
const getStatusDescription = (status) => {
const statusMap = {
'PENDING': '待支付 - 等待用户扫码支付',
'PROCESSING': '处理中 - 支付宝正在处理支付',
'SUCCESS': '支付成功',
'COMPLETED': '支付完成',
'FAILED': '支付失败',
'CANCELLED': '已取消',
'REFUNDED': '已退款'
}
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 = () => {
ElMessage.info('服务协议页面')
@@ -205,76 +394,256 @@ const showAgreement = () => {
<style scoped>
.payment-modal {
background: #0a0a0a;
background: #000000 !important;
}
/* 移除所有可能的白边和边框 */
.payment-modal :deep(.el-dialog),
.payment-modal-dialog {
background: #0a0a0a !important;
border-radius: 12px;
.payment-modal-dialog,
.payment-modal :deep(.el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-dialog.el-dialog--center),
.payment-modal.el-dialog.el-dialog--center.payment-modal,
.payment-modal :deep(.el-dialog.el-dialog--center.payment-modal-dialog),
.payment-modal :deep(.payment-modal-dialog.el-dialog.el-dialog--center.payment-modal) {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
border-radius: 12px !important;
border: none !important;
border-width: 0 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
border-style: none !important;
border-color: transparent !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 0 transparent !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
box-sizing: border-box !important;
overflow: hidden !important;
/* 移除所有可能的白色边框 */
-webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 0 transparent !important;
-moz-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 0 0 transparent !important;
}
/* 移除所有伪元素可能产生的边框 */
.payment-modal :deep(.el-dialog::before),
.payment-modal :deep(.el-dialog::after),
.payment-modal :deep(.el-dialog__wrapper::before),
.payment-modal :deep(.el-dialog__wrapper::after),
.payment-modal :deep(.el-dialog__body::before),
.payment-modal :deep(.el-dialog__body::after) {
display: none !important;
content: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 移除所有可能的白色边框 - 使用更具体的选择器 */
.payment-modal :deep(.el-dialog),
.payment-modal :deep(.el-dialog *) {
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
}
.payment-modal :deep(.el-dialog__body) {
padding: 0 !important;
margin: 0 !important;
background: #0a0a0a !important;
background: #000000 !important;
background-color: #000000 !important;
border: none !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* 移除对话框内部的所有边框和间隙 */
.payment-modal :deep(.el-dialog) * {
border-color: transparent !important;
}
/* 确保对话框本身没有任何白色背景或边框 */
.payment-modal :deep(.el-dialog),
.payment-modal :deep(.el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-dialog.el-dialog--center),
.payment-modal :deep(.payment-modal-dialog),
.payment-modal :deep(.payment-modal-dialog.el-dialog),
.payment-modal :deep(.payment-modal-dialog.el-dialog--center),
.payment-modal :deep(.payment-modal-dialog.el-dialog--center.payment-modal) {
background-color: #000000 !important;
background: #000000 !important;
background-image: none !important;
}
/* 移除所有可能的白色边框 */
.payment-modal :deep(.el-dialog),
.payment-modal :deep(.el-dialog__body) {
border: 0 !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
}
.payment-modal :deep(.el-dialog__header),
.payment-modal :deep(.el-dialog__header.show-close) {
background: #000000 !important;
background-color: #000000 !important;
border: none !important;
border-bottom: 1px solid #1a1a1a !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-width: 0 !important;
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-bottom-color: #1a1a1a !important;
padding: 20px 24px !important;
margin: 0 !important;
color: white !important;
text-align: left !important;
}
/* 确保 header.show-close 内的所有文字都是白色 */
.payment-modal :deep(.el-dialog__header.show-close),
.payment-modal :deep(.el-dialog__header.show-close *),
.payment-modal :deep(.el-dialog__header.show-close .el-dialog__title),
.payment-modal :deep(.el-dialog__header.show-close .el-dialog__headerbtn) {
color: white !important;
}
/* 确保关闭按钮区域背景也与模态框一致 */
.payment-modal :deep(.el-dialog__headerbtn),
.payment-modal :deep(.el-dialog__headerbtn.is-close),
.payment-modal :deep(.el-dialog__header .el-dialog__headerbtn) {
background: transparent !important;
background-color: transparent !important;
}
.payment-modal :deep(.el-dialog__headerbtn:hover) {
background: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
.payment-modal :deep(.el-dialog__wrapper) {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
outline: none !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
background: transparent !important;
}
.payment-modal :deep(.el-overlay) {
background: transparent !important;
/* 确保 wrapper 内的所有对话框元素背景为黑色 */
.payment-modal :deep(.el-dialog__wrapper .el-dialog),
.payment-modal :deep(.el-dialog__wrapper .el-dialog.el-dialog--center),
.payment-modal :deep(.el-dialog__wrapper .el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-dialog__wrapper .payment-modal-dialog) {
background: #000000 !important;
background-color: #000000 !important;
}
.payment-modal :deep(.el-overlay),
.payment-modal :deep(.payment-modal-overlay),
.payment-modal :deep(.el-overlay.payment-modal-overlay),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog) {
background: rgba(0, 0, 0, 0.5) !important;
border: none !important;
outline: none !important;
}
/* 确保 el-overlay.payment-modal-overlay.el-modal-dialog 内的对话框背景为黑色 */
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog.el-dialog--center),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog__body),
.payment-modal :deep(.el-overlay.payment-modal-overlay.el-modal-dialog .el-dialog__header) {
background: #000000 !important;
background-color: #000000 !important;
}
.payment-modal :deep(.el-overlay-dialog) {
background: transparent !important;
background: rgba(0, 0, 0, 0.5) !important;
border: none !important;
outline: none !important;
}
/* 确保 el-overlay-dialog 内的对话框背景为黑色 */
.payment-modal :deep(.el-overlay-dialog .el-dialog),
.payment-modal :deep(.el-overlay-dialog .el-dialog.el-dialog--center),
.payment-modal :deep(.el-overlay-dialog .el-dialog.el-dialog--center.payment-modal),
.payment-modal :deep(.el-overlay-dialog .el-dialog__body),
.payment-modal :deep(.el-overlay-dialog .el-dialog__header) {
background: #000000 !important;
background-color: #000000 !important;
}
/* 确保遮罩层没有白边 */
.payment-modal :deep(.el-overlay.is-message-box) {
background: transparent !important;
}
.payment-modal :deep(.el-dialog__header) {
background: #0a0a0a;
border-bottom: 1px solid #1a1a1a;
padding: 20px 24px;
background: rgba(0, 0, 0, 0.5) !important;
}
.payment-modal :deep(.el-dialog__title) {
color: white;
font-size: 18px;
font-weight: 600;
color: #ffffff !important;
font-size: 18px !important;
font-weight: bold !important;
font-family: "SimSun", "宋体", serif !important;
text-align: left !important;
line-height: 1.5 !important;
letter-spacing: 0.5px !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3) !important;
filter: brightness(1.1) contrast(1.2) !important;
}
.payment-modal :deep(.el-dialog__headerbtn) {
color: #999;
color: white !important;
}
.payment-modal :deep(.el-dialog__headerbtn:hover) {
color: white;
color: white !important;
}
.payment-modal :deep(.el-dialog__headerbtn svg) {
color: white !important;
fill: white !important;
}
.payment-content {
padding: 24px;
background: #0a0a0a;
color: white;
margin: 0;
background: #000000 !important;
background-color: #000000 !important;
color: white !important;
margin: 0 !important;
border: none !important;
border-width: 0 !important;
box-sizing: border-box !important;
}
/* 确保 payment-content 内的所有文字都是白色（链接除外） */
.payment-content,
.payment-content *:not(a),
.payment-content p,
.payment-content span,
.payment-content div {
color: white !important;
}
/* 支付方式选择 */
@@ -296,6 +665,7 @@ const showAgreement = () => {
transition: all 0.3s ease;
background: #1a1a1a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
color: white;
}
.payment-method:hover {
@@ -323,8 +693,11 @@ const showAgreement = () => {
}
.payment-method span {
font-size: 14px;
font-weight: 500;
font-size: 14px !important;
font-weight: 500 !important;
color: white !important;
line-height: 1.5 !important;
letter-spacing: 0.3px !important;
}
/* 金额显示 */
@@ -334,16 +707,21 @@ const showAgreement = () => {
}
.amount-label {
font-size: 14px;
color: #999;
margin-bottom: 8px;
font-size: 14px !important;
color: white !important;
margin-bottom: 8px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0.3px !important;
}
.amount-value {
font-size: 32px;
font-weight: 700;
color: #e0e0e0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
font-size: 32px !important;
font-weight: 700 !important;
color: white !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
line-height: 1.2 !important;
letter-spacing: 0.5px !important;
}
/* 二维码区域 */
@@ -356,13 +734,30 @@ const showAgreement = () => {
width: 200px;
height: 200px;
margin: 0 auto 16px;
padding: 0;
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);
overflow: hidden;
box-sizing: border-box;
position: relative;
line-height: 0;
}
.qr-code img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
display: block;
object-fit: contain;
object-position: center;
background: #1a1a1a;
box-sizing: border-box;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.qr-placeholder {
@@ -409,15 +804,20 @@ const showAgreement = () => {
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 40px));
color: #4a9eff;
font-size: 12px;
font-weight: 500;
opacity: 0.8;
color: white !important;
font-size: 12px !important;
font-weight: 500 !important;
opacity: 0.8 !important;
line-height: 1.5 !important;
letter-spacing: 0.3px !important;
}
.qr-tip {
font-size: 12px;
color: #999;
font-size: 12px !important;
color: white !important;
line-height: 1.5 !important;
letter-spacing: 0.2px !important;
font-weight: 400 !important;
}
/* 操作按钮 */
@@ -469,14 +869,21 @@ const showAgreement = () => {
}
.pay-tip p {
margin: 8px 0;
color: #e0e0e0;
font-size: 14px;
margin: 8px 0 !important;
color: white !important;
font-size: 14px !important;
line-height: 1.6 !important;
letter-spacing: 0.3px !important;
font-weight: 400 !important;
}
.tip-small {
color: #999 !important;
color: white !important;
font-size: 12px !important;
line-height: 1.5 !important;
letter-spacing: 0.2px !important;
font-weight: 400 !important;
opacity: 0.8 !important;
}
/* 底部链接 */
@@ -485,14 +892,17 @@ const showAgreement = () => {
}
.footer-link a {
color: #4a9eff;
text-decoration: none;
font-size: 12px;
transition: color 0.3s ease;
color: #4a9eff !important;
text-decoration: none !important;
font-size: 12px !important;
transition: color 0.3s ease !important;
line-height: 1.5 !important;
letter-spacing: 0.2px !important;
font-weight: 400 !important;
}
.footer-link a:hover {
color: #3a8bdf;
color: #3a8bdf !important;
}
/* 响应式设计 */

16
demo/frontend/src/router/index.js
View File

@@ -89,7 +89,8 @@ const routes = [
},
{
path: '/',
redirect: '/profile' // 重定向到个人主页
name: 'Root',
redirect: '/welcome' // 默认重定向到欢迎页面
},
{
path: '/welcome',
@@ -230,6 +231,19 @@ router.beforeEach(async (to, from, next) => {
await userStore.init()
}
// 处理根路径：如果已登录，重定向到个人主页；否则重定向到欢迎页面
if (to.path === '/' || to.path === '/welcome') {
if (userStore.isAuthenticated && to.path === '/') {
next('/profile')
return
}
// 未登录用户访问欢迎页面，允许访问
if (!userStore.isAuthenticated && to.path === '/welcome') {
next()
return
}
}
// 检查是否需要认证
if (to.meta.requiresAuth) {
if (!userStore.isAuthenticated) {

47
demo/frontend/src/views/Login.vue
View File

@@ -34,6 +34,10 @@
class="email-input"
type="email"
/>
<!-- 快捷输入标签 -->
<div class="quick-email-tags">
<span class="email-tag" @click="fillQuickEmail('984523799@qq.com')">984523799@qq.com</span>
</div>
</div>
<!-- 验证码输入 -->
@@ -127,10 +131,20 @@ const fillTestAccount = (email, code) => {
loginForm.code = code
}
// 组件挂载时设置默认测试账号
// 快速填充邮箱（快捷输入）
const fillQuickEmail = (email) => {
loginForm.email = email
}
// 组件挂载时设置默认测试账号或从URL参数读取邮箱
onMounted(() => {
// 设置默认的测试邮箱
loginForm.email = 'admin@example.com'
// 从URL参数中读取邮箱
if (route.query.email) {
loginForm.email = route.query.email
} else {
// 设置默认的测试邮箱
loginForm.email = 'admin@example.com'
}
// 不设置验证码，让用户手动输入
})
@@ -423,6 +437,33 @@ const handleLogin = async () => {
width: 100%;
}
/* 快捷输入标签 */
.quick-email-tags {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.email-tag {
background: rgba(64, 158, 255, 0.15);
border: 1px solid rgba(64, 158, 255, 0.3);
color: rgba(255, 255, 255, 0.9);
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
}
.email-tag:hover {
background: rgba(64, 158, 255, 0.25);
border-color: rgba(64, 158, 255, 0.5);
color: white;
transform: translateY(-1px);
}
.email-input :deep(.el-input__wrapper) {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);

84
demo/frontend/src/views/MyWorks.vue
View File

@@ -130,7 +130,25 @@
<el-col v-for="item in filteredItems" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
<el-card class="work-card" :class="{ selected: selectedIds.has(item.id) }" shadow="hover">
<div class="thumb" @click="multiSelect ? toggleSelect(item.id) : openDetail(item)">
<img :src="item.cover" :alt="item.title" />
<!-- 如果是视频类型且有视频URL，使用video元素显示首帧 -->
<video
v-if="item.type === 'video' && item.resultUrl"
:src="item.resultUrl"
class="work-thumbnail-video"
muted
preload="metadata"
@loadedmetadata="onVideoLoaded"
></video>
<!-- 如果有封面图（thumbnailUrl），使用图片 -->
<img
v-else-if="item.cover && item.cover !== item.resultUrl"
:src="item.cover"
:alt="item.title"
/>
<!-- 否则使用默认占位符 -->
<div v-else class="work-placeholder">
<el-icon><VideoPlay /></el-icon>
</div>
<div class="checker" v-if="multiSelect">
<el-checkbox :model-value="selectedIds.has(item.id)" @change="() => toggleSelect(item.id)" />
@@ -191,7 +209,7 @@
<video
v-if="selectedItem.type === 'video'"
class="detail-video"
:src="selectedItem.cover"
:src="selectedItem.resultUrl || selectedItem.cover"
:poster="selectedItem.cover"
controls
>
@@ -314,7 +332,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 { Star, User, Compass, Document, VideoPlay, Picture, Film, Bell, Setting, Search, MoreFilled } from '@element-plus/icons-vue'
import { getMyWorks } from '@/api/userWorks'
const router = useRouter()
@@ -341,6 +359,28 @@ const loading = ref(false)
const hasMore = ref(true)
const items = ref([])
// 将后端返回的UserWork数据转换为前端需要的格式
const transformWorkData = (work) => {
return {
id: work.id?.toString() || work.taskId || '',
title: work.title || work.prompt || '未命名作品',
cover: work.thumbnailUrl || work.resultUrl || '/images/backgrounds/welcome.jpg',
resultUrl: work.resultUrl || '',
type: work.workType === 'TEXT_TO_VIDEO' || work.workType === 'IMAGE_TO_VIDEO' ? 'video' : 'image',
category: work.workType === 'TEXT_TO_VIDEO' ? '文生视频' : work.workType === 'IMAGE_TO_VIDEO' ? '图生视频' : '未知',
sizeText: work.fileSize || '未知大小',
createTime: work.createdAt ? new Date(work.createdAt).toLocaleString('zh-CN') : '',
date: work.createdAt ? new Date(work.createdAt).toLocaleDateString('zh-CN') : '',
description: work.description || work.prompt || '',
prompt: work.prompt || '',
duration: work.duration || '',
aspectRatio: work.aspectRatio || '',
quality: work.quality || '',
status: work.status || 'COMPLETED',
overlayText: work.prompt || ''
}
}
const loadList = async () => {
loading.value = true
try {
@@ -352,8 +392,11 @@ const loadList = async () => {
if (response.data.success) {
const data = response.data.data || []
// 转换数据格式
const transformedData = data.map(transformWorkData)
if (page.value === 1) items.value = []
items.value = items.value.concat(data)
items.value = items.value.concat(transformedData)
hasMore.value = data.length === pageSize.value
} else {
throw new Error(response.data.message || '获取作品列表失败')
@@ -545,6 +588,17 @@ const resetFilters = () => {
ElMessage.success('筛选器已重置')
}
// 视频加载元数据后，跳转到第一帧（但不播放）
const onVideoLoaded = (event) => {
const video = event.target
if (video && video.duration) {
// 跳转到第一帧（0秒）
video.currentTime = 0.1
// 确保视频不播放
video.pause()
}
}
onMounted(() => {
loadList()
})
@@ -799,6 +853,28 @@ onMounted(() => {
.work-card { margin-bottom: 14px; }
.thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 6px; cursor: pointer; }
.thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.work-thumbnail-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.work-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 24px;
}
.checker { position: absolute; left: 6px; top: 6px; }
.actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
.thumb:hover .actions { opacity: 1; }

120
demo/frontend/src/views/Profile.vue
View File

@@ -81,18 +81,38 @@
<section class="published-section">
<h3 class="section-title">已发布</h3>
<div class="video-grid">
<div class="video-item" v-for="(video, index) in videos" :key="index">
<div class="video-thumbnail">
<div class="video-item" v-for="(video, index) in videos" :key="video.id || index" v-loading="loading">
<div class="video-thumbnail" @click="goToCreate(video)">
<div class="thumbnail-image">
<div class="figure"></div>
<div class="text-overlay">What Does it Mean To You</div>
<!-- 如果是视频类型且有视频URL，使用video元素显示首帧 -->
<video
v-if="video.type === 'video' && video.resultUrl"
:src="video.resultUrl"
class="video-cover-img"
muted
preload="metadata"
@loadedmetadata="onVideoLoaded"
></video>
<!-- 如果有封面图（thumbnailUrl），使用图片 -->
<img
v-else-if="video.cover && video.cover !== video.resultUrl"
:src="video.cover"
:alt="video.title"
class="video-cover-img"
/>
<!-- 否则使用占位符 -->
<div v-else class="figure"></div>
<div class="text-overlay" v-if="video.text">{{ video.text }}</div>
</div>
<div class="video-action">
<el-button v-if="index === 0" type="primary" size="small">做同款</el-button>
<el-button v-if="index === 0" type="primary" size="small" @click.stop="goToCreate(video)">做同款</el-button>
<span v-else class="director-text">DIRECTED BY VANNOCENT</span>
</div>
</div>
</div>
<div v-if="!loading && videos.length === 0" class="empty-works">
<div class="empty-text">暂无作品，开始创作吧！</div>
</div>
</div>
</section>
</main>
@@ -145,6 +165,7 @@ import {
Picture,
Film
} from '@element-plus/icons-vue'
import { getMyWorks } from '@/api/userWorks'
const router = useRouter()
const userStore = useUserStore()
@@ -154,7 +175,8 @@ const showUserMenu = ref(false)
const userStatusRef = ref(null)
// 视频数据
const videos = ref(Array(6).fill({}))
const videos = ref([])
const loading = ref(false)
// 计算菜单位置
const menuStyle = computed(() => {
@@ -251,6 +273,44 @@ const logout = async () => {
}
}
// 将后端返回的UserWork数据转换为前端需要的格式
const transformWorkData = (work) => {
return {
id: work.id?.toString() || work.taskId || '',
title: work.title || work.prompt || '未命名作品',
cover: work.thumbnailUrl || work.resultUrl || '/images/backgrounds/welcome.jpg',
resultUrl: work.resultUrl || '',
type: work.workType === 'TEXT_TO_VIDEO' || work.workType === 'IMAGE_TO_VIDEO' ? 'video' : 'image',
text: work.prompt || '',
category: work.workType === 'TEXT_TO_VIDEO' ? '文生视频' : work.workType === 'IMAGE_TO_VIDEO' ? '图生视频' : '未知',
size: work.fileSize || '未知大小',
createTime: work.createdAt ? new Date(work.createdAt).toLocaleString('zh-CN') : ''
}
}
// 加载用户作品列表
const loadVideos = async () => {
loading.value = true
try {
const response = await getMyWorks({
page: 0,
size: 6 // 只加载前6个作品
})
if (response.data.success) {
const data = response.data.data || []
// 转换数据格式
videos.value = data.map(transformWorkData)
} else {
console.error('获取作品列表失败:', response.data.message)
}
} catch (error) {
console.error('加载作品列表失败:', error)
} finally {
loading.value = false
}
}
// 点击外部关闭菜单
const handleClickOutside = (event) => {
const userStatus = event.target.closest('.user-status')
@@ -259,8 +319,31 @@ const handleClickOutside = (event) => {
}
}
// 跳转到作品详情或创作页面
const goToCreate = (video) => {
if (video && video.category === '文生视频') {
router.push('/text-to-video/create')
} else if (video && video.category === '图生视频') {
router.push('/image-to-video/create')
} else {
router.push('/text-to-video/create')
}
}
// 视频加载元数据后，跳转到第一帧（但不播放）
const onVideoLoaded = (event) => {
const video = event.target
if (video && video.duration) {
// 跳转到第一帧（0秒）
video.currentTime = 0.1
// 确保视频不播放
video.pause()
}
}
onMounted(() => {
document.addEventListener('click', handleClickOutside)
loadVideos()
})
onUnmounted(() => {
@@ -651,6 +734,20 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.video-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.video-cover-img video {
width: 100%;
height: 100%;
object-fit: cover;
}
.figure {
@@ -673,6 +770,17 @@ onUnmounted(() => {
border-radius: 50%;
}
.empty-works {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: #999;
}
.empty-text {
font-size: 16px;
}
.text-overlay {
position: absolute;
top: 20px;

232
demo/frontend/src/views/Subscription.vue
View File

@@ -62,8 +62,8 @@
</div>
</div>
<div class="user-meta">
<div class="username">mingzi_FBx7foZYDS7inLQb</div>
<div class="user-id">ID 2994509784706419</div>
<div class="username">{{ userInfo.username || '加载中...' }}</div>
<div class="user-id">ID {{ userInfo.userId || '...' }}</div>
</div>
</div>
<div class="user-right">
@@ -71,7 +71,7 @@
<div class="star-icon">
<el-icon><Star /></el-icon>
</div>
<span>50</span>
<span>{{ userInfo.points || 0 }}</span>
</div>
<button class="mini-btn" @click="goToOrderDetails">积分详情</button>
<button class="mini-btn" @click="goToWorks">我的订单</button>
@@ -81,12 +81,12 @@
<div class="row-bottom">
<div class="summary-item">
<div class="summary-label">当前生效权益</div>
<div class="summary-value">免费版</div>
<div class="summary-value">{{ subscriptionInfo.currentPlan || '免费版' }}</div>
</div>
<div class="divider-v"></div>
<div class="summary-item">
<div class="summary-label">到期时间</div>
<div class="summary-value">永久</div>
<div class="summary-value">{{ subscriptionInfo.expiryTime || '永久' }}</div>
</div>
<div class="divider-v"></div>
<div class="summary-item">
@@ -95,7 +95,7 @@
<div class="star-icon">
<el-icon><Star /></el-icon>
</div>
<span class="points-number">50</span>
<span class="points-number">{{ userInfo.points || 0 }}</span>
</div>
</div>
</div>
@@ -239,12 +239,13 @@
</template>
<script setup>
import { ref, computed } from 'vue'
import { ref, computed, onMounted } 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 { createPayment, createAlipayPayment, getUserSubscriptionInfo } from '@/api/payments'
import { useUserStore } from '@/stores/user'
import {
User,
Document,
@@ -259,6 +260,160 @@ import {
} from '@element-plus/icons-vue'
const router = useRouter()
const userStore = useUserStore()
// 用户信息和订阅信息
const userInfo = ref({
username: '',
userId: null,
points: 0,
email: '',
nickname: ''
})
const subscriptionInfo = ref({
currentPlan: '免费版',
expiryTime: '永久',
paidAt: null
})
// 加载用户订阅信息
const loadUserSubscriptionInfo = async () => {
try {
// 确保用户store已初始化
if (!userStore.initialized) {
await userStore.init()
}
// 检查用户是否已认证
if (!userStore.isAuthenticated) {
console.warn('用户未认证，跳转到登录页')
ElMessage.warning('请先登录')
router.push('/login')
return
}
// 检查token是否存在
const token = userStore.token || sessionStorage.getItem('token')
if (!token || token === 'null' || token.trim() === '') {
console.warn('未找到有效的token，跳转到登录页')
ElMessage.warning('请先登录')
router.push('/login')
return
}
console.log('开始加载用户订阅信息...')
const response = await getUserSubscriptionInfo()
console.log('用户订阅信息响应完整对象：', response)
console.log('响应状态码：', response.status)
console.log('响应数据：', response.data)
console.log('响应数据类型：', typeof response.data)
// 检查是否是HTML响应（302重定向的结果）
if (typeof response.data === 'string' && response.data.includes('<!DOCTYPE html>')) {
console.error('收到HTML响应，可能是认证失败导致重定向到登录页')
// 响应拦截器已经处理了跳转和清除token，这里直接返回
return
}
// 检查响应结构
if (response.data) {
// 如果response.data.success存在且为true
if (response.data.success === true && response.data.data) {
const data = response.data.data
userInfo.value = {
username: data.username || '',
userId: data.userId || null,
points: data.points || 0,
email: data.email || '',
nickname: data.nickname || ''
}
subscriptionInfo.value = {
currentPlan: data.currentPlan || '免费版',
expiryTime: data.expiryTime || '永久',
paidAt: data.paidAt || null
}
console.log('用户信息加载成功:', userInfo.value)
console.log('订阅信息加载成功:', subscriptionInfo.value)
} else {
// 如果响应结构不同，尝试直接使用response.data
console.warn('响应格式不符合预期，尝试直接使用response.data')
const data = response.data.data || response.data
if (data && typeof data === 'object' && (data.username || data.userId)) {
userInfo.value = {
username: data.username || '',
userId: data.userId || null,
points: data.points || 0,
email: data.email || '',
nickname: data.nickname || ''
}
subscriptionInfo.value = {
currentPlan: data.currentPlan || '免费版',
expiryTime: data.expiryTime || '永久',
paidAt: data.paidAt || null
}
console.log('用户信息加载成功（备用路径）:', userInfo.value)
} else {
console.error('获取用户订阅信息失败: 响应数据为空或格式不正确')
console.error('完整响应:', JSON.stringify(response.data, null, 2))
ElMessage.warning('获取用户信息失败，使用默认值')
}
}
} else {
console.error('获取用户订阅信息失败: response.data为空')
console.error('完整响应对象:', response)
ElMessage.warning('获取用户信息失败，使用默认值')
}
} catch (error) {
console.error('加载用户订阅信息失败:', error)
console.error('错误详情:', error.response?.data || error.message)
// 如果是认证失败（401、403、302或HTML响应），响应拦截器已经处理了跳转
if (error.response?.status === 401 ||
error.response?.status === 403 ||
error.response?.status === 302 ||
error.message?.includes('认证失败') ||
error.message?.includes('redirect')) {
// 响应拦截器已经处理了跳转，这里不再重复处理
console.warn('认证失败，响应拦截器已处理跳转')
return
}
// 其他错误才显示消息
ElMessage.error('加载用户信息失败: ' + (error.response?.data?.message || error.message || '请刷新页面重试'))
}
}
// 组件挂载时加载数据
onMounted(async () => {
// 确保用户store已初始化
if (!userStore.initialized) {
await userStore.init()
}
// 如果用户已登录，加载订阅信息
if (userStore.isAuthenticated) {
// 先从store中获取基本信息（如果可用）
if (userStore.user) {
userInfo.value = {
username: userStore.user.username || '',
userId: userStore.user.id || null,
points: userStore.user.points || 0,
email: userStore.user.email || '',
nickname: userStore.user.nickname || ''
}
}
// 然后从API获取完整的订阅信息
await loadUserSubscriptionInfo()
} else {
// 路由守卫应该已经处理了跳转，但这里作为双重保险
console.warn('用户未登录，路由守卫应该已处理跳转')
}
})
// 跳转到个人主页
const goToProfile = () => {
@@ -406,23 +561,36 @@ const generateQRCode = async (planType, planInfo) => {
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. 二维码图片已设置')
// 使用在线API生成二维码图片（直接使用支付宝返回的URL生成二维码）
try {
console.log('开始生成二维码，内容:', qrCode)
// 使用QuickChart API生成二维码，完全去除白边
const qrCodeUrl = `https://quickchart.io/qr?text=${encodeURIComponent(qrCode)}&size=200&margin=0&dark=ffffff&light=1a1a1a`
console.log('5. 二维码图片URL已生成')
// 更新二维码显示
const qrCodeElement = document.querySelector('#qr-code-img')
if (qrCodeElement) {
qrCodeElement.src = qrCodeUrl
qrCodeElement.style.display = 'block'
console.log('6. 二维码图片已设置')
}
// 隐藏模拟二维码
const qrPlaceholder = document.querySelector('.qr-placeholder')
if (qrPlaceholder) {
qrPlaceholder.style.display = 'none'
console.log('7. 模拟二维码已隐藏')
}
ElMessage.success('二维码已生成，请使用支付宝扫码支付')
console.log('=== 二维码生成完成 ===')
} catch (error) {
console.error('生成二维码失败：', error)
ElMessage.error('生成二维码失败，请重试')
}
// 隐藏模拟二维码
const qrPlaceholder = document.querySelector('.qr-placeholder')
if (qrPlaceholder) {
qrPlaceholder.style.display = 'none'
console.log('6. 模拟二维码已隐藏')
}
ElMessage.success('二维码已生成，请使用支付宝扫码支付')
console.log('=== 二维码生成完成 ===')
} else {
ElMessage.error('二维码生成失败：二维码为空')
}
@@ -464,21 +632,19 @@ const getPlanInfo = (planType) => {
// 支付成功处理
const handlePaymentSuccess = async (paymentData) => {
try {
ElMessage.success('支付成功！正在处理订单...')
// 这里可以添加支付成功后的处理逻辑
// 比如更新用户状态、发送确认邮件等
console.log('✅ 收到支付成功事件，支付数据:', paymentData)
ElMessage.success('支付成功！正在更新信息...')
// 关闭支付模态框
paymentModalVisible.value = false
// 刷新页面或更新用户信息
setTimeout(() => {
window.location.reload()
}, 2000)
// 重新加载用户订阅信息
await loadUserSubscriptionInfo()
ElMessage.success('信息已更新！')
} catch (error) {
console.error('支付成功处理失败:', error)
console.error('❌ 支付成功处理失败:', error)
ElMessage.error('支付成功但处理订单失败，请联系客服')
}
}

10
demo/frontend/src/views/TextToVideoCreate.vue
View File

@@ -394,6 +394,11 @@ const startPollingTask = () => {
if (progressData && progressData.status) {
taskStatus.value = progressData.status
}
// 更新resultUrl（如果存在）
if (progressData && progressData.resultUrl && currentTask.value) {
currentTask.value.resultUrl = progressData.resultUrl
console.log('更新resultUrl:', progressData.resultUrl)
}
console.log('任务进度:', progressData)
},
// 完成回调
@@ -401,6 +406,11 @@ const startPollingTask = () => {
inProgress.value = false
taskProgress.value = 100
taskStatus.value = 'COMPLETED'
// 更新currentTask的resultUrl
if (taskData && taskData.resultUrl && currentTask.value) {
currentTask.value.resultUrl = taskData.resultUrl
console.log('任务完成，resultUrl已更新:', taskData.resultUrl)
}
ElMessage.success('视频生成完成！')
// 可以在这里跳转到结果页面或显示结果