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

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

Browse Source
This commit is contained in:
AIGC Developer
2025-10-29 10:16:03 +08:00
parent 8c55f9f376
commit 6f72386523
64 changed files with 1529 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo/frontend/src/views/CleanupTest.vue
View File

@@ -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('获取队列状态成功')

4
demo/frontend/src/views/ImageToVideo.vue
View File

@@ -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) => {

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

@@ -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'

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

@@ -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')
}
// 重置筛选器

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

@@ -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')
}
// 跳转到数据仪表盘

4
demo/frontend/src/views/StoryboardVideo.vue
View File

@@ -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) => {

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

@@ -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>

4
demo/frontend/src/views/SystemSettings.vue
View File

@@ -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',

4
demo/frontend/src/views/TextToVideo.vue
View File

@@ -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) => {