feat: 视频问题
This commit is contained in:
@@ -1,22 +1,7 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 科技感背景光点 -->
|
||||
<div class="bg-stars">
|
||||
<div
|
||||
v-for="(star, index) in stars"
|
||||
:key="index"
|
||||
class="star"
|
||||
:class="{ active: star.active }"
|
||||
:style="{
|
||||
left: star.left + '%',
|
||||
top: star.top + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px'
|
||||
}"
|
||||
@mouseenter="activateStar(index)"
|
||||
@mouseleave="deactivateStar(index)"
|
||||
></div>
|
||||
</div>
|
||||
<!-- 静态背景 -->
|
||||
<div class="bg-static"></div>
|
||||
|
||||
<div class="login-content">
|
||||
<!-- 左侧品牌区 -->
|
||||
@@ -26,12 +11,12 @@
|
||||
<svg width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6B8AFF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:1" />
|
||||
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#60A5FA;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2"/>
|
||||
<path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.6"/>
|
||||
<path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="brand-title">金牌内容大师</h1>
|
||||
@@ -61,120 +46,73 @@
|
||||
<p class="login-subtitle">进入您的创作空间</p>
|
||||
</div>
|
||||
|
||||
<a-tabs v-model:activeKey="activeTab" centered class="login-tabs">
|
||||
<a-tab-pane key="sms" tab="短信登录">
|
||||
<a-form
|
||||
:model="smsForm"
|
||||
:rules="smsRules"
|
||||
ref="smsFormRef"
|
||||
layout="vertical"
|
||||
<a-form
|
||||
:model="smsForm"
|
||||
:rules="smsRules"
|
||||
ref="smsFormRef"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item name="mobile" label="手机号">
|
||||
<a-input
|
||||
v-model:value="smsForm.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
class="tech-input"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
>
|
||||
<a-form-item name="mobile" label="手机号">
|
||||
<a-input
|
||||
v-model:value="smsForm.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<PhoneOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<template #prefix>
|
||||
<PhoneOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="code" label="验证码">
|
||||
<div class="code-input">
|
||||
<a-input
|
||||
v-model:value="smsForm.code"
|
||||
size="large"
|
||||
placeholder="请输入验证码"
|
||||
:maxlength="6"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="codeCountdown > 0"
|
||||
:loading="sendingCode"
|
||||
@click="sendSmsCode"
|
||||
class="send-code-btn"
|
||||
>
|
||||
{{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="code" label="验证码">
|
||||
<div class="code-input">
|
||||
<a-input
|
||||
v-model:value="smsForm.code"
|
||||
size="large"
|
||||
placeholder="请输入验证码"
|
||||
:maxlength="4"
|
||||
class="tech-input"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="codeCountdown > 0"
|
||||
:loading="sendingCode"
|
||||
@click="sendSmsCode"
|
||||
class="send-code-btn"
|
||||
>
|
||||
{{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loggingIn"
|
||||
@click="handleSmsLogin"
|
||||
class="login-btn"
|
||||
>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="password" tab="密码登录">
|
||||
<a-form
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
ref="passwordFormRef"
|
||||
layout="vertical"
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loggingIn"
|
||||
@click="handleSmsLogin"
|
||||
class="login-btn"
|
||||
>
|
||||
<a-form-item name="mobile" label="手机号">
|
||||
<a-input
|
||||
v-model:value="passwordForm.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<PhoneOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password" label="密码">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.password"
|
||||
size="large"
|
||||
placeholder="请输入密码"
|
||||
@pressEnter="handlePasswordLogin"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loggingIn"
|
||||
@click="handlePasswordLogin"
|
||||
class="login-btn"
|
||||
>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,20 +120,19 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
PhoneOutlined,
|
||||
SafetyOutlined,
|
||||
LockOutlined
|
||||
SafetyOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import authService from '@/services/AuthService'
|
||||
|
||||
import authApi, { SMS_SCENE } from '@/api/auth'
|
||||
import tokenManager from '@gold/utils/token-manager'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
const router = useRouter()
|
||||
|
||||
// 标签页
|
||||
const activeTab = ref('sms')
|
||||
const userStore = useUserStore()
|
||||
window.a = router
|
||||
|
||||
// 短信登录表单
|
||||
const smsForm = reactive({
|
||||
@@ -204,13 +141,6 @@ const smsForm = reactive({
|
||||
})
|
||||
const smsFormRef = ref()
|
||||
|
||||
// 密码登录表单
|
||||
const passwordForm = reactive({
|
||||
mobile: '',
|
||||
password: ''
|
||||
})
|
||||
const passwordFormRef = ref()
|
||||
|
||||
// 状态
|
||||
const sendingCode = ref(false)
|
||||
const loggingIn = ref(false)
|
||||
@@ -219,9 +149,6 @@ const codeCountdown = ref(0)
|
||||
// 验证码倒计时
|
||||
let countdownTimer = null
|
||||
|
||||
// 背景光点
|
||||
const stars = ref([])
|
||||
|
||||
// 表单验证规则
|
||||
const smsRules = {
|
||||
mobile: [
|
||||
@@ -230,51 +157,17 @@ const smsRules = {
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
{ len: 6, message: '验证码为6位数字', trigger: 'blur' }
|
||||
{ pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const passwordRules = {
|
||||
mobile: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 4, max: 16, message: '密码长度为4-16位', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 初始化背景光点
|
||||
onMounted(() => {
|
||||
const starCount = 50
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
stars.value.push({
|
||||
left: Math.random() * 100,
|
||||
top: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
active: false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 激活光点
|
||||
function activateStar(index) {
|
||||
stars.value[index].active = true
|
||||
}
|
||||
|
||||
// 停用光点
|
||||
function deactivateStar(index) {
|
||||
stars.value[index].active = false
|
||||
}
|
||||
|
||||
// 发送验证码
|
||||
async function sendSmsCode() {
|
||||
try {
|
||||
await smsFormRef.value.validateFields(['mobile'])
|
||||
sendingCode.value = true
|
||||
|
||||
await authService.sendSmsCode(smsForm.mobile, 1)
|
||||
await authApi.sendSmsCode(smsForm.mobile, SMS_SCENE.MEMBER_LOGIN)
|
||||
|
||||
message.success('验证码已发送')
|
||||
|
||||
@@ -305,41 +198,30 @@ async function handleSmsLogin() {
|
||||
await smsFormRef.value.validateFields()
|
||||
loggingIn.value = true
|
||||
|
||||
const result = await authService.loginBySms(smsForm.mobile, smsForm.code)
|
||||
const info = await authApi.loginBySms(smsForm.mobile, smsForm.code)
|
||||
|
||||
// 更新用户登录状态
|
||||
const userInfo = info?.userInfo || {}
|
||||
await userStore.loginWithPhone({
|
||||
profile: {
|
||||
userId: String(userInfo.id || userInfo.userId || smsForm.mobile),
|
||||
nickname: userInfo.nickname || userInfo.username || '用户',
|
||||
avatar: userInfo.avatar || '',
|
||||
balance: userInfo.balance ?? 0,
|
||||
vipLevel: userInfo.vipLevel ?? 0,
|
||||
credits: userInfo.credits ?? 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 获取完整的用户信息
|
||||
await userStore.fetchUserInfo()
|
||||
|
||||
message.success('登录成功')
|
||||
|
||||
// 获取redirect参数，跳转到之前的页面或默认首页
|
||||
const redirect = router.currentRoute.value.query.redirect
|
||||
setTimeout(() => {
|
||||
router.push(redirect || '/content-style/benchmark')
|
||||
}, 500)
|
||||
} catch (error) {
|
||||
if (error?.response?.data?.message) {
|
||||
message.error(error.response.data.message)
|
||||
} else {
|
||||
message.error('登录失败，请检查输入信息')
|
||||
}
|
||||
} finally {
|
||||
loggingIn.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 密码登录
|
||||
async function handlePasswordLogin() {
|
||||
try {
|
||||
await passwordFormRef.value.validateFields()
|
||||
loggingIn.value = true
|
||||
|
||||
await authService.loginByPassword(passwordForm.mobile, passwordForm.password)
|
||||
|
||||
message.success('登录成功')
|
||||
|
||||
// 获取redirect参数，跳转到之前的页面或默认首页
|
||||
const redirect = router.currentRoute.value.query.redirect
|
||||
setTimeout(() => {
|
||||
router.push(redirect || '/content-style/benchmark')
|
||||
}, 500)
|
||||
router.push({
|
||||
name: '对标分析'
|
||||
})
|
||||
} catch (error) {
|
||||
if (error?.response?.data?.message) {
|
||||
message.error(error.response.data.message)
|
||||
@@ -360,29 +242,6 @@ async function handlePasswordLogin() {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景光点 */
|
||||
.bg-stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.star.active {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.5);
|
||||
box-shadow: 0 0 20px rgba(107, 138, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 主内容区 */
|
||||
.login-content {
|
||||
display: flex;
|
||||
@@ -397,70 +256,21 @@ async function handlePasswordLogin() {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brand-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(107, 138, 255, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.brand-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
bottom: -50px;
|
||||
left: -50px;
|
||||
animation: pulse 4s ease-in-out infinite 2s;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
margin-bottom: 30px;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@@ -469,9 +279,9 @@ async function handlePasswordLogin() {
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 18px;
|
||||
color: #6B8AFF;
|
||||
color: #3B82F6;
|
||||
margin-bottom: 50px;
|
||||
opacity: 0.8;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.brand-features {
|
||||
@@ -489,7 +299,7 @@ async function handlePasswordLogin() {
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
color: #A855F7;
|
||||
color: #3B82F6;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -499,113 +309,92 @@ async function handlePasswordLogin() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
padding: 60px 80px;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: rgba(26, 26, 46, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 24px;
|
||||
padding: 50px 40px;
|
||||
border: 1px solid rgba(107, 138, 255, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
background: rgba(18, 18, 38, 0.88);
|
||||
backdrop-filter: blur(25px);
|
||||
border-radius: 20px;
|
||||
padding: 40px 32px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.25);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #A855F7;
|
||||
color: #3B82F6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
color: #6B8AFF;
|
||||
color: #60A5FA;
|
||||
margin: 0;
|
||||
opacity: 0.8;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 标签页 */
|
||||
.login-tabs {
|
||||
margin-bottom: 20px;
|
||||
/* 输入框样式覆盖 */
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 12px !important;
|
||||
background: rgba(15, 15, 30, 0.5) !important;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.ant-tabs-nav) {
|
||||
margin-bottom: 30px;
|
||||
:deep(.ant-input-affix-wrapper:hover) {
|
||||
border-color: rgba(59, 130, 246, 0.4) !important;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.ant-tabs-tab) {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 10px 24px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.ant-tabs-tab-active) {
|
||||
color: #A855F7;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.ant-tabs-ink-bar) {
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.tech-input {
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(15, 15, 30, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tech-input:hover {
|
||||
border-color: rgba(107, 138, 255, 0.5);
|
||||
}
|
||||
|
||||
.tech-input:focus,
|
||||
.tech-input-focused {
|
||||
border-color: transparent;
|
||||
background: rgba(15, 15, 30, 0.8);
|
||||
box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
|
||||
:deep(.ant-input-affix-wrapper-focused) {
|
||||
border-color: rgba(59, 130, 246, 0.25) !important;
|
||||
background: rgba(15, 15, 30, 0.95) !important;
|
||||
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25) !important;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.ant-input::placeholder) {
|
||||
color: rgba(160, 160, 160, 0.65);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-prefix) {
|
||||
color: rgba(107, 138, 255, 0.8);
|
||||
color: rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label > label) {
|
||||
font-weight: 500;
|
||||
color: #a0a0a0;
|
||||
color: #e0e0e0;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(15, 15, 30, 0.5);
|
||||
transition: all 0.3s;
|
||||
|
||||
/* 键盘焦点优化 */
|
||||
:deep(.ant-input-affix-wrapper:focus-within) {
|
||||
outline: 2px solid rgba(59, 130, 246, 0.6);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper:hover) {
|
||||
border-color: rgba(107, 138, 255, 0.5);
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper-focused) {
|
||||
border-color: transparent;
|
||||
background: rgba(15, 15, 30, 0.8);
|
||||
box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
|
||||
/* 表单验证错误状态 */
|
||||
:deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
|
||||
border-color: rgba(255, 77, 79, 0.5) !important;
|
||||
}
|
||||
|
||||
/* 验证码输入 */
|
||||
@@ -618,15 +407,29 @@ async function handlePasswordLogin() {
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, rgba(107, 138, 255, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
|
||||
border: 1px solid rgba(107, 138, 255, 0.3);
|
||||
color: #6B8AFF;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.25);
|
||||
color: #3B82F6;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.send-code-btn:hover {
|
||||
background: linear-gradient(135deg, rgba(107, 138, 255, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
|
||||
border-color: rgba(107, 138, 255, 0.5);
|
||||
.send-code-btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(96, 165, 250, 0.3) 100%);
|
||||
border-color: rgba(59, 130, 246, 0.6);
|
||||
color: #60A5FA;
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.send-code-btn:active:not(:disabled) {
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.send-code-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
@@ -635,9 +438,9 @@ async function handlePasswordLogin() {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4px 20px rgba(107, 138, 255, 0.3);
|
||||
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -658,12 +461,7 @@ async function handlePasswordLogin() {
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 30px rgba(107, 138, 255, 0.5);
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 6px 30px rgba(59, 130, 246, 0.35);
|
||||
}
|
||||
|
||||
/* 图标 */
|
||||
@@ -671,27 +469,189 @@ async function handlePasswordLogin() {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 992px) {
|
||||
.login-content {
|
||||
flex-direction: column;
|
||||
/* 背景 */
|
||||
.bg-static {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 70% 70%, rgba(96, 165, 250, 0.03) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 响应式优化 - 大屏保持左右分栏 */
|
||||
@media (max-width: 1200px) {
|
||||
.brand-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 16px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板横屏优化 */
|
||||
@media (max-width: 992px) and (min-width: 769px) {
|
||||
.brand-panel {
|
||||
padding: 40px 20px;
|
||||
min-height: 200px;
|
||||
min-height: 140px;
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 40px 20px;
|
||||
.brand-icon svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 36px;
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
font-size: 13px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
padding: 28px 24px;
|
||||
max-width: 360px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板竖屏和手机横屏 */
|
||||
@media (max-width: 768px) {
|
||||
.login-content {
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.brand-panel {
|
||||
padding: 20px 15px;
|
||||
min-height: 100px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.brand-inner {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.brand-icon svg {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.feature-item:nth-child(n+2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 20px 15px 40px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
padding: 32px 28px;
|
||||
margin: 0 auto;
|
||||
background: rgba(18, 18, 38, 0.92);
|
||||
backdrop-filter: blur(32px);
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
box-shadow:
|
||||
0 10px 36px rgba(0, 0, 0, 0.55),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机优化 */
|
||||
@media (max-width: 480px) {
|
||||
.brand-panel {
|
||||
min-height: 80px;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.brand-icon svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feature-item:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 15px 10px 30px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 28px 20px;
|
||||
border-radius: 16px;
|
||||
max-width: 92%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 48px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,6 @@ import { UserPromptApi } from '@/api/userPrompt'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import GradientButton from '@/components/GradientButton.vue'
|
||||
import { setJSON, getJSON } from '@/utils/storage'
|
||||
import authService from '@/services/AuthService'
|
||||
|
||||
const promptStore = usePromptStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
@@ -14,45 +14,44 @@
|
||||
<div class="material-group__content">
|
||||
<a-spin :spinning="loading" tip="加载中..." style="width: 100%; min-height: 400px;">
|
||||
<template v-if="groupList.length > 0">
|
||||
<a-list
|
||||
:data="groupList"
|
||||
:bordered="false"
|
||||
<a-table
|
||||
:data-source="groupList"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:customRow="customRow"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<a-list-item class="group-item">
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
<div class="group-item__header">
|
||||
<span class="group-item__name">{{ item.name }}</span>
|
||||
<a-tag>{{ item.fileCount || 0 }} 个文件</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="group-item__description">
|
||||
{{ item.description || '暂无描述' }}
|
||||
</div>
|
||||
<div class="group-item__meta">
|
||||
<span>创建时间：{{ formatDate(item.createTime) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<template #actions>
|
||||
<a-button type="text" @click="handleEditGroup(item)">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<div class="table-name-cell">
|
||||
<span class="table-name">{{ record.name }}</span>
|
||||
<a-tag color="blue">{{ record.fileCount || 0 }} 个文件</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'description'">
|
||||
<span class="table-description">{{ record.description || '暂无描述' }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'createTime'">
|
||||
<span class="table-time">{{ formatDate(record.createTime) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="table-actions">
|
||||
<a-button type="link" @click="handleEditGroup(record)">
|
||||
<template #icon>
|
||||
<EditOutlined />
|
||||
</template>
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button type="text" status="danger" @click="handleDeleteGroup(item)">
|
||||
<a-button type="link" danger @click="handleDeleteGroup(record)">
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
删除
|
||||
</a-button>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-table>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty description="暂无分组" />
|
||||
@@ -105,6 +104,40 @@ const groupModalTitle = ref('新建分组')
|
||||
const isEdit = ref(false)
|
||||
const groupFormRef = ref(null)
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '分组名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
key: 'description'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
// 自定义行样式
|
||||
const customRow = (record) => {
|
||||
return {
|
||||
class: 'custom-table-row'
|
||||
}
|
||||
}
|
||||
|
||||
// 表单
|
||||
const groupForm = reactive({
|
||||
id: undefined,
|
||||
@@ -118,16 +151,46 @@ const loadGroupList = async () => {
|
||||
if (loading.value) return // 防止重复请求
|
||||
loading.value = true
|
||||
try {
|
||||
console.log('[MaterialGroup] 开始加载分组列表...')
|
||||
const res = await MaterialGroupService.getGroupList()
|
||||
if (res.code === 0) {
|
||||
console.log('[MaterialGroup] 分组列表响应:', res)
|
||||
console.log('[MaterialGroup] 响应类型:', typeof res)
|
||||
console.log('[MaterialGroup] 响应结构:', JSON.stringify(res, null, 2))
|
||||
|
||||
// 检查多种可能的数据结构
|
||||
if (res.code === 0 || res.code === '0') {
|
||||
groupList.value = res.data || []
|
||||
console.log('[MaterialGroup] 分组列表加载成功（code===0），共', groupList.value.length, '个分组')
|
||||
console.log('[MaterialGroup] 分组数据:', groupList.value)
|
||||
} else if (Array.isArray(res)) {
|
||||
// 如果直接返回数组
|
||||
groupList.value = res
|
||||
console.log('[MaterialGroup] 分组列表加载成功（直接数组），共', groupList.value.length, '个分组')
|
||||
console.log('[MaterialGroup] 分组数据:', groupList.value)
|
||||
} else if (res && typeof res === 'object') {
|
||||
// 检查其他可能的字段
|
||||
const possibleData = res.data || res.list || res.result || res.rows
|
||||
if (Array.isArray(possibleData)) {
|
||||
groupList.value = possibleData
|
||||
console.log('[MaterialGroup] 分组列表加载成功（其他字段），共', groupList.value.length, '个分组')
|
||||
console.log('[MaterialGroup] 分组数据:', groupList.value)
|
||||
} else {
|
||||
console.error('[MaterialGroup] 响应结构异常:', res)
|
||||
message.error('响应数据结构异常')
|
||||
groupList.value = []
|
||||
}
|
||||
} else {
|
||||
message.error(res.msg || '加载失败')
|
||||
console.error('[MaterialGroup] 分组列表加载失败，响应结构异常:', res)
|
||||
message.error('响应数据结构异常')
|
||||
groupList.value = []
|
||||
}
|
||||
|
||||
// 强制触发视图更新
|
||||
console.log('[MaterialGroup] 当前 groupList 值:', groupList.value)
|
||||
console.log('[MaterialGroup] groupList 长度:', groupList.value?.length)
|
||||
} catch (error) {
|
||||
console.error('加载分组列表失败:', error)
|
||||
message.error('加载失败，请重试')
|
||||
console.error('[MaterialGroup] 加载分组列表失败:', error)
|
||||
message.error('加载失败，请重试: ' + (error.message || error))
|
||||
groupList.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
@@ -262,49 +325,39 @@ onMounted(() => {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.material-group__content :deep(.arco-spin) {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.material-group__content :deep(.arco-spin-content) {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.group-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.group-item__header {
|
||||
.table-name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.group-item__name {
|
||||
font-size: 16px;
|
||||
.table-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.group-item__description {
|
||||
margin-top: 8px;
|
||||
color: var(--color-text-2);
|
||||
.table-description {
|
||||
color: #595959;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.group-item__meta {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
.table-time {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
type="primary"
|
||||
ghost
|
||||
@click="handleOpenMixModal"
|
||||
:disabled="groupList.length === 0"
|
||||
>
|
||||
素材混剪
|
||||
</a-button>
|
||||
@@ -91,25 +92,20 @@
|
||||
<div class="material-item__content">
|
||||
<!-- 预览图 -->
|
||||
<div class="material-item__preview">
|
||||
<!-- 视频文件：统一使用 coverBase64，如果没有则使用 coverUrl，最后使用视频标签显示第一帧 -->
|
||||
<!-- 视频文件：只使用 coverBase64（本地缓存），不使用任何OSS URL -->
|
||||
<img
|
||||
v-if="file.isVideo && (file.coverBase64 || file.coverUrl)"
|
||||
v-if="file.isVideo && file.coverBase64"
|
||||
:src="file.coverBase64"
|
||||
:alt="file.fileName"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<!-- 视频文件：如果没有封面，使用视频标签显示第一帧 -->
|
||||
<video
|
||||
v-else-if="file.isVideo && file.previewUrl"
|
||||
:src="file.previewUrl"
|
||||
muted
|
||||
preload="metadata"
|
||||
class="preview-video"
|
||||
/>
|
||||
<!-- 视频文件：如果没有封面，显示占位符（不使用视频标签） -->
|
||||
<div v-else-if="file.isVideo" class="material-item__placeholder">
|
||||
<FileOutlined />
|
||||
</div>
|
||||
<!-- 图片或其他文件：使用图片标签 -->
|
||||
<!-- 优先级：coverUrl > coverBase64 > previewUrl -->
|
||||
<img
|
||||
v-else-if="file.coverUrl || file.coverBase64 || file.previewUrl"
|
||||
v-else-if="!file.isVideo && (file.coverUrl || file.coverBase64 || file.previewUrl)"
|
||||
:src="file.coverUrl || file.coverBase64 || file.previewUrl"
|
||||
:alt="file.fileName"
|
||||
@error="handleImageError"
|
||||
@@ -123,8 +119,8 @@
|
||||
<a-tag v-else-if="file.isImage" color="blue">图片</a-tag>
|
||||
<a-tag v-else color="gray">文件</a-tag>
|
||||
</div>
|
||||
<!-- 分组图标 -->
|
||||
<div class="material-item__group" @click.stop="handleSingleGroup(file)">
|
||||
<!-- 分组图标（仅视频文件显示） -->
|
||||
<div v-if="file.isVideo" class="material-item__group" @click.stop="handleSingleGroup(file)">
|
||||
<TagsOutlined />
|
||||
</div>
|
||||
<!-- 下载图标 -->
|
||||
@@ -144,6 +140,9 @@
|
||||
<div class="material-item__meta">
|
||||
<span>{{ formatFileSize(file.fileSize) }}</span>
|
||||
<span>{{ formatDate(file.createTime) }}</span>
|
||||
<span v-if="file.groupId" class="material-item__group-name">
|
||||
<TagsOutlined /> {{ getGroupName(file.groupId) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,81 +171,36 @@
|
||||
<MaterialUploadModal
|
||||
v-model:visible="uploadModalVisible"
|
||||
:uploading="uploading"
|
||||
:file-category="filters.fileCategory"
|
||||
@confirm="handleConfirmUpload"
|
||||
@cancel="handleUploadCancel"
|
||||
/>
|
||||
|
||||
<!-- 批量分组模态框 -->
|
||||
<a-modal
|
||||
<MaterialBatchGroupModal
|
||||
v-model:open="groupModalVisible"
|
||||
title="批量分组"
|
||||
centered
|
||||
@ok="handleBatchGroup"
|
||||
:group-list="groupList"
|
||||
:file-count="selectedFileIds.length"
|
||||
:file-name="groupingFileName"
|
||||
@confirm="handleBatchGroup"
|
||||
@cancel="handleGroupCancel"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="选择分组" required>
|
||||
<a-select
|
||||
v-model:value="selectedGroupId"
|
||||
placeholder="请选择要添加到的分组"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
|
||||
{{ group.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<div style="margin-top: 16px; padding: 12px; background: var(--color-bg-2); border-radius: var(--radius-card);">
|
||||
<p style="margin: 0; font-size: 13px; color: var(--color-text-2);">
|
||||
{{ groupingInfo }}
|
||||
</p>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
/>
|
||||
|
||||
<a-modal
|
||||
<!-- 素材混剪模态框 -->
|
||||
<MaterialMixModal
|
||||
ref="mixModalRef"
|
||||
v-model:open="mixModalVisible"
|
||||
title="素材混剪"
|
||||
centered
|
||||
:confirm-loading="mixing"
|
||||
ok-text="提交混剪"
|
||||
cancel-text="取消"
|
||||
@ok="handleMixConfirm"
|
||||
:loading="mixing"
|
||||
:group-list="groupList"
|
||||
:all-audio-files="allAudioFiles"
|
||||
@confirm="handleMixConfirm"
|
||||
@cancel="handleMixCancel"
|
||||
>
|
||||
<div class="mix-modal__summary">
|
||||
<p>视频素材：{{ allVideoUrls.length }} 个</p>
|
||||
<p>背景音乐：{{ allAudioUrls.length }} 个</p>
|
||||
<p style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
|
||||
系统将智能随机选择素材进行混剪
|
||||
</p>
|
||||
</div>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="视频标题" required>
|
||||
<a-input v-model:value="mixForm.title" placeholder="请输入生成视频标题" />
|
||||
</a-form-item>
|
||||
<a-form-item label="文案内容" required>
|
||||
<a-textarea
|
||||
v-model:value="mixForm.text"
|
||||
placeholder="请输入文案（每句话换行以便自动拆分）"
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="生成成片数量" required>
|
||||
<a-input-number
|
||||
v-model:value="mixForm.produceCount"
|
||||
:min="1"
|
||||
:max="10"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
UploadOutlined,
|
||||
@@ -257,10 +211,12 @@ import {
|
||||
DownloadOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { MaterialService, MaterialGroupService } from '@/api/material'
|
||||
import { MixService } from '@/api/mix'
|
||||
import MaterialUploadModal from '@/components/material/MaterialUploadModal.vue'
|
||||
import MaterialBatchGroupModal from '@/components/material/MaterialBatchGroupModal.vue'
|
||||
import MaterialMixModal from '@/components/material/MaterialMixModal.vue'
|
||||
import { formatFileSize, formatDate } from '@/utils/file'
|
||||
import { MixTaskService } from '@/api/mixTask'
|
||||
import coverCache from '@/utils/coverCache'
|
||||
|
||||
// 数据
|
||||
const loading = ref(false)
|
||||
@@ -277,6 +233,24 @@ const groupList = ref([])
|
||||
const selectedGroupId = ref(null)
|
||||
const groupingFileId = ref(null) // 当前正在分组的单个文件ID
|
||||
|
||||
// 获取单个文件分组的文件名
|
||||
const groupingFileName = computed(() => {
|
||||
if (!groupingFileId.value) return ''
|
||||
const file = fileList.value.find(f => f.id === groupingFileId.value)
|
||||
return file?.fileName || ''
|
||||
})
|
||||
|
||||
// 获取分组名称（根据groupId）
|
||||
const getGroupName = (groupId) => {
|
||||
if (!groupId) return ''
|
||||
const group = groupList.value.find(g => g.id === groupId)
|
||||
return group?.name || ''
|
||||
}
|
||||
|
||||
// 混剪相关
|
||||
const mixModalRef = ref(null) // 混剪模态框的 ref
|
||||
const allAudioFiles = ref([]) // 所有音频文件
|
||||
|
||||
// 筛选条件
|
||||
const filters = reactive({
|
||||
fileCategory: 'video', // 默认分类为视频
|
||||
@@ -317,8 +291,54 @@ const loadFileList = async () => {
|
||||
try {
|
||||
const res = await MaterialService.getFilePage(buildQueryParams())
|
||||
if (res.code === 0) {
|
||||
fileList.value = res.data.list || []
|
||||
const files = res.data.list || []
|
||||
|
||||
// 优先从缓存获取封面，避免重复请求OSS
|
||||
const coverList = []
|
||||
files.forEach(file => {
|
||||
// 视频文件：只使用缓存的coverBase64，绝对不使用coverUrl
|
||||
// 所有视频都不允许从OSS获取封面（包括generate/其他分类）
|
||||
if (file.isVideo) {
|
||||
// 从缓存获取coverBase64
|
||||
const cachedCover = coverCache.getCover(file.id)
|
||||
if (cachedCover) {
|
||||
file.coverBase64 = cachedCover
|
||||
} else if (file.coverBase64) {
|
||||
// 服务端返回了coverBase64，保存到缓存
|
||||
coverCache.setCover(file.id, file.coverBase64)
|
||||
} else {
|
||||
// 没有缓存和base64，设置空值
|
||||
file.coverBase64 = null
|
||||
}
|
||||
|
||||
// 彻底删除coverUrl，防止任何OSS请求
|
||||
delete file.coverUrl
|
||||
|
||||
// 即使有previewUrl也不给视频使用
|
||||
if (file.previewUrl && !file.coverBase64) {
|
||||
delete file.previewUrl
|
||||
}
|
||||
}
|
||||
|
||||
// 收集有coverBase64的文件，用于批量缓存
|
||||
if (file.coverBase64) {
|
||||
coverList.push({ fileId: file.id, base64: file.coverBase64 })
|
||||
}
|
||||
})
|
||||
|
||||
// 批量保存缓存（仅保存还没有缓存的文件）
|
||||
if (coverList.length > 0) {
|
||||
coverCache.batchSetCovers(coverList)
|
||||
}
|
||||
|
||||
fileList.value = files
|
||||
pagination.total = res.data.total || 0
|
||||
|
||||
// 输出缓存统计信息（开发环境）
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
const stats = coverCache.getStats()
|
||||
console.log(`[MaterialList] 封面缓存统计: 总数${stats.total}, 有效${stats.valid}, 过期${stats.expired}`)
|
||||
}
|
||||
} else {
|
||||
message.error(res.msg || '加载失败')
|
||||
}
|
||||
@@ -343,22 +363,20 @@ const handleConfirmUpload = async (filesWithCover, fileCategory) => {
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
let successCount = 0
|
||||
let failCount = 0
|
||||
const uploadCategory = fileCategory || 'video'
|
||||
|
||||
try {
|
||||
for (const { file, coverBase64 } of filesWithCover) {
|
||||
try {
|
||||
await MaterialService.uploadFile(file, fileCategory, coverBase64)
|
||||
successCount++
|
||||
} catch (error) {
|
||||
console.error('文件上传失败:', file.name, error)
|
||||
failCount++
|
||||
}
|
||||
}
|
||||
const results = await Promise.allSettled(
|
||||
filesWithCover.map(({ file, coverBase64 }) =>
|
||||
MaterialService.uploadFile(file, uploadCategory, coverBase64)
|
||||
)
|
||||
)
|
||||
|
||||
const successCount = results.filter(r => r.status === 'fulfilled').length
|
||||
const failCount = results.length - successCount
|
||||
|
||||
if (successCount > 0) {
|
||||
message.success(`成功上传 ${successCount} 个文件${failCount > 0 ? `，${failCount} 个失败` : ''}`)
|
||||
message.success(`成功上传 ${successCount} 个文件${failCount ? `，${failCount} 个失败` : ''}`)
|
||||
uploadModalVisible.value = false
|
||||
loadFileList()
|
||||
} else {
|
||||
@@ -392,6 +410,10 @@ const handleBatchDelete = () => {
|
||||
try {
|
||||
await MaterialService.deleteFiles(selectedFileIds.value)
|
||||
message.success('删除成功')
|
||||
|
||||
// 清除所有封面缓存（简化处理）
|
||||
coverCache.clearAll()
|
||||
|
||||
selectedFileIds.value = []
|
||||
loadFileList()
|
||||
} catch (error) {
|
||||
@@ -406,7 +428,6 @@ const handleBatchDelete = () => {
|
||||
const handleDeleteFile = (file) => {
|
||||
if (!file?.id) return
|
||||
|
||||
// 二次确认弹窗
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除文件 "${file.fileName}" 吗？删除后无法恢复。`,
|
||||
@@ -417,7 +438,6 @@ const handleDeleteFile = (file) => {
|
||||
try {
|
||||
await MaterialService.deleteFiles([file.id])
|
||||
message.success('删除成功')
|
||||
// 如果在选中列表中，也移除
|
||||
const index = selectedFileIds.value.indexOf(file.id)
|
||||
if (index > -1) {
|
||||
selectedFileIds.value.splice(index, 1)
|
||||
@@ -451,10 +471,9 @@ const handleDownloadFile = (file) => {
|
||||
|
||||
// 文件点击
|
||||
const handleFileClick = (file) => {
|
||||
const isSelected = selectedFileIds.value.includes(file.id)
|
||||
// 切换选中状态
|
||||
if (isSelected) {
|
||||
selectedFileIds.value = selectedFileIds.value.filter(id => id !== file.id)
|
||||
const index = selectedFileIds.value.indexOf(file.id)
|
||||
if (index > -1) {
|
||||
selectedFileIds.value.splice(index, 1)
|
||||
} else {
|
||||
selectedFileIds.value.push(file.id)
|
||||
}
|
||||
@@ -484,167 +503,73 @@ const handlePageChange = (page, pageSize) => {
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
// 图片加载错误处理（支持回退到其他图片源）
|
||||
// 图片加载错误处理（简化版，不使用coverUrl）
|
||||
const handleImageError = (e) => {
|
||||
const img = e.target
|
||||
const currentSrc = img.src
|
||||
|
||||
|
||||
// 找到对应的文件对象
|
||||
const file = fileList.value.find(f =>
|
||||
f.coverBase64 === currentSrc ||
|
||||
f.coverUrl === currentSrc ||
|
||||
const file = fileList.value.find(f =>
|
||||
f.coverBase64 === currentSrc ||
|
||||
f.previewUrl === currentSrc
|
||||
)
|
||||
|
||||
if (file) {
|
||||
// 视频文件：优先使用 coverBase64，如果失败则尝试 coverUrl，最后尝试 previewUrl
|
||||
if (file.isVideo) {
|
||||
if (currentSrc === file.coverBase64 && file.coverUrl && file.coverUrl !== currentSrc) {
|
||||
// coverBase64 失败，尝试 coverUrl
|
||||
img.src = file.coverUrl
|
||||
return
|
||||
}
|
||||
if ((currentSrc === file.coverBase64 || currentSrc === file.coverUrl) && file.previewUrl && file.previewUrl !== currentSrc) {
|
||||
// coverBase64 和 coverUrl 都失败，尝试 previewUrl（视频第一帧）
|
||||
img.src = file.previewUrl
|
||||
return
|
||||
}
|
||||
} else {
|
||||
// 非视频文件：尝试其他图片源
|
||||
if (file.coverUrl && file.coverUrl !== currentSrc) {
|
||||
img.src = file.coverUrl
|
||||
return
|
||||
}
|
||||
if (file.coverBase64 && file.coverBase64 !== currentSrc && file.coverBase64.startsWith('data:image')) {
|
||||
img.src = file.coverBase64
|
||||
return
|
||||
}
|
||||
if (file.previewUrl && file.previewUrl !== currentSrc) {
|
||||
img.src = file.previewUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (file && !file.isVideo) {
|
||||
// 非视频文件：尝试其他图片源（不使用coverUrl）
|
||||
if (file.coverBase64 && file.coverBase64 !== currentSrc && file.coverBase64.startsWith('data:image')) {
|
||||
img.src = file.coverBase64
|
||||
return
|
||||
}
|
||||
if (file.previewUrl && file.previewUrl !== currentSrc) {
|
||||
img.src = file.previewUrl
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 如果所有图片源都失败，隐藏图片
|
||||
img.style.display = 'none'
|
||||
}
|
||||
|
||||
const selectedFiles = computed(() =>
|
||||
fileList.value.filter((file) => selectedFileIds.value.includes(file.id))
|
||||
)
|
||||
const handleOpenMixModal = async () => {
|
||||
// 重置混剪表单（调用子组件方法）
|
||||
mixModalRef.value?.resetForm()
|
||||
|
||||
const isVideoFile = (file) => {
|
||||
if (!file) return false
|
||||
if (file.isVideo) return true
|
||||
if (file.fileCategory === 'video') return true
|
||||
if (typeof file.fileType === 'string' && file.fileType.startsWith('video')) return true
|
||||
return false
|
||||
}
|
||||
// 加载所有音频文件和分组列表
|
||||
await Promise.all([
|
||||
loadAllAudioFiles(),
|
||||
loadGroupList() // 重新加载分组列表，确保显示最新数据
|
||||
])
|
||||
|
||||
const isAudioFile = (file) => {
|
||||
if (!file) return false
|
||||
if (file.fileCategory === 'audio') return true
|
||||
if (file.fileType === 'audio') return true
|
||||
if (typeof file.fileType === 'string' && file.fileType.startsWith('audio')) return true
|
||||
return false
|
||||
}
|
||||
|
||||
const selectedVideoUrls = computed(() =>
|
||||
selectedFiles.value.map((file) => (isVideoFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
|
||||
)
|
||||
|
||||
const selectedAudioUrls = computed(() =>
|
||||
selectedFiles.value.map((file) => (isAudioFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
|
||||
)
|
||||
|
||||
// 获取所有视频素材
|
||||
const allVideoUrls = computed(() =>
|
||||
fileList.value.map((file) => (isVideoFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
|
||||
)
|
||||
|
||||
// 获取所有音频素材
|
||||
const allAudioUrls = computed(() =>
|
||||
fileList.value.map((file) => (isAudioFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
|
||||
)
|
||||
|
||||
// 分组提示信息
|
||||
const groupingInfo = computed(() => {
|
||||
if (groupingFileId.value) {
|
||||
// 单个文件分组
|
||||
const file = fileList.value.find(f => f.id === groupingFileId.value)
|
||||
return file ? `将为文件 "${file.fileName}" 添加到选中的分组中` : ''
|
||||
} else {
|
||||
// 批量分组
|
||||
return `将为 ${selectedFileIds.value.length} 个文件添加到选中的分组中`
|
||||
}
|
||||
})
|
||||
|
||||
const mixForm = reactive({
|
||||
title: '',
|
||||
text: '',
|
||||
produceCount: 1
|
||||
})
|
||||
|
||||
const resetMixForm = () => {
|
||||
mixForm.title = ''
|
||||
mixForm.text = ''
|
||||
mixForm.produceCount = 1
|
||||
}
|
||||
|
||||
const handleOpenMixModal = () => {
|
||||
// 检查是否有可用的视频和音频素材
|
||||
if (allVideoUrls.value.length === 0) {
|
||||
message.warning('暂无可用的视频素材')
|
||||
return
|
||||
}
|
||||
if (allAudioUrls.value.length === 0) {
|
||||
message.warning('暂无可用的音频素材')
|
||||
return
|
||||
}
|
||||
mixModalVisible.value = true
|
||||
}
|
||||
|
||||
// 加载所有音频文件
|
||||
const loadAllAudioFiles = async () => {
|
||||
try {
|
||||
const res = await MaterialService.getFilePage({
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
fileCategory: 'audio'
|
||||
})
|
||||
if (res.code === 0) {
|
||||
allAudioFiles.value = res.data.list || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载音频文件失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMixCancel = () => {
|
||||
mixModalVisible.value = false
|
||||
}
|
||||
|
||||
const handleMixConfirm = async () => {
|
||||
const title = mixForm.title.trim()
|
||||
const text = mixForm.text.trim()
|
||||
if (!title) {
|
||||
message.warning('请输入视频标题')
|
||||
return
|
||||
}
|
||||
if (!text) {
|
||||
message.warning('请输入文案内容')
|
||||
return
|
||||
}
|
||||
const produceCount = Math.max(1, Math.min(10, Number(mixForm.produceCount) || 1))
|
||||
|
||||
// 再次检查素材可用性
|
||||
if (allVideoUrls.value.length === 0) {
|
||||
message.warning('暂无可用的视频素材')
|
||||
return
|
||||
}
|
||||
if (allAudioUrls.value.length === 0) {
|
||||
message.warning('暂无可用的音频素材')
|
||||
return
|
||||
}
|
||||
|
||||
const handleMixConfirm = async (params) => {
|
||||
mixing.value = true
|
||||
try {
|
||||
const { data } = await MixTaskService.createTask({
|
||||
title,
|
||||
text,
|
||||
videoUrls: allVideoUrls.value,
|
||||
bgMusicUrls: allAudioUrls.value,
|
||||
produceCount
|
||||
})
|
||||
const { data } = await MixTaskService.createTask(params)
|
||||
if (data) {
|
||||
message.success('混剪任务提交成功，正在处理中...')
|
||||
mixModalVisible.value = false
|
||||
resetMixForm()
|
||||
|
||||
// 跳转到任务列表页面
|
||||
setTimeout(() => {
|
||||
@@ -671,9 +596,12 @@ const loadGroupList = async () => {
|
||||
const res = await MaterialGroupService.getGroupList()
|
||||
if (res.code === 0) {
|
||||
groupList.value = res.data || []
|
||||
} else {
|
||||
console.error('[MaterialList] 分组列表加载失败:', res.msg)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载分组列表失败:', error)
|
||||
console.error('[MaterialList] 加载分组列表失败:', error)
|
||||
message.error('加载分组列表失败: ' + (error.message || error))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -683,6 +611,15 @@ const handleOpenGroupModal = () => {
|
||||
message.warning('请先选择要分组的文件')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查选中的文件是否都是视频
|
||||
const selectedFiles = fileList.value.filter(f => selectedFileIds.value.includes(f.id))
|
||||
const nonVideoFiles = selectedFiles.filter(f => !f.isVideo)
|
||||
if (nonVideoFiles.length > 0) {
|
||||
message.warning('只能对视频文件进行分组')
|
||||
return
|
||||
}
|
||||
|
||||
groupingFileId.value = null // 清空单个文件分组标记
|
||||
groupModalVisible.value = true
|
||||
}
|
||||
@@ -954,25 +891,20 @@ const handleGroupCancel = () => {
|
||||
|
||||
.material-item__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.mix-modal__summary {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: var(--color-bg-2);
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
font-size: 13px;
|
||||
color: var(--color-text-2);
|
||||
.material-item__group-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mix-modal__summary p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -7,7 +7,6 @@ import { UserPromptApi } from '@/api/userPrompt'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import GradientButton from '@/components/GradientButton.vue'
|
||||
import { getVoiceText } from '@gold/hooks/web/useVoiceText'
|
||||
import authService from '@/services/AuthService'
|
||||
|
||||
defineOptions({ name: 'ForecastView' })
|
||||
|
||||
|
||||
Reference in New Issue
Block a user