feat: 功能优化
This commit is contained in:
@@ -23,7 +23,6 @@ const promptStore = usePromptStore()
|
||||
const {
|
||||
data,
|
||||
selectedRowKeys,
|
||||
expandedRowKeys,
|
||||
saveTableDataToSession,
|
||||
loadTableDataFromSession,
|
||||
processApiResponse,
|
||||
@@ -36,10 +35,9 @@ const {
|
||||
batchAnalyzeLoading,
|
||||
globalLoading,
|
||||
globalLoadingText,
|
||||
analyzeVideo,
|
||||
batchAnalyze,
|
||||
getVoiceText,
|
||||
} = useBenchmarkAnalysis(data, expandedRowKeys, saveTableDataToSession)
|
||||
} = useBenchmarkAnalysis(data, saveTableDataToSession)
|
||||
|
||||
// ==================== 表单状态 ====================
|
||||
const form = ref({
|
||||
@@ -110,8 +108,8 @@ async function handleExportToExcel() {
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedRowKeys.value.length > 10) {
|
||||
message.warning('最多只能导出10条数据，请重新选择')
|
||||
if (selectedRowKeys.value.length > 20) {
|
||||
message.warning('最多只能导出20条数据，请重新选择')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -189,26 +187,13 @@ async function handleResetForm() {
|
||||
await clearData()
|
||||
}
|
||||
|
||||
// ==================== 提示词操作函数 ====================
|
||||
function handleCopyPrompt(row) {
|
||||
if (!row.prompt) {
|
||||
message.warning('没有提示词可复制')
|
||||
return
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(row.prompt).then(() => {
|
||||
message.success('提示词已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
message.error('复制失败')
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 批量提示词操作函数 ====================
|
||||
function handleCopyBatchPrompt(prompt) {
|
||||
if (!prompt || !prompt.trim()) {
|
||||
message.warning('没有提示词可复制')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
navigator.clipboard.writeText(prompt).then(() => {
|
||||
message.success('提示词已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
@@ -216,40 +201,25 @@ function handleCopyBatchPrompt(prompt) {
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 创作相关函数 ====================
|
||||
function handleCreateContent(row) {
|
||||
promptStore.setPrompt(row.prompt, row)
|
||||
router.push('/content-style/copywriting')
|
||||
}
|
||||
|
||||
function handleUseBatchPrompt(prompt) {
|
||||
if (!prompt || !prompt.trim()) {
|
||||
message.warning('暂无批量生成的提示词')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
promptStore.setPrompt(prompt, { batch: true })
|
||||
router.push('/content-style/copywriting')
|
||||
}
|
||||
|
||||
// ==================== 保存提示词到服务器 ====================
|
||||
function handleOpenSavePromptModal(row, batchPrompt = null) {
|
||||
if (row) {
|
||||
// 单个视频的提示词
|
||||
if (!row.prompt || !row.prompt.trim()) {
|
||||
message.warning('没有提示词可保存')
|
||||
return
|
||||
}
|
||||
savePromptContent.value = row.prompt
|
||||
} else {
|
||||
// 批量提示词：使用传入的 batchPrompt（AI 生成的内容），而不是原始的 mergedText
|
||||
const promptToSave = batchPrompt || batchPromptMergedText.value
|
||||
if (!promptToSave || !promptToSave.trim()) {
|
||||
message.warning('没有提示词可保存')
|
||||
return
|
||||
}
|
||||
savePromptContent.value = promptToSave
|
||||
function handleOpenSavePromptModal(batchPrompt = null) {
|
||||
// 批量提示词：使用传入的 batchPrompt（AI 生成的内容），而不是原始的 mergedText
|
||||
const promptToSave = batchPrompt || batchPromptMergedText.value
|
||||
if (!promptToSave || !promptToSave.trim()) {
|
||||
message.warning('没有提示词可保存')
|
||||
return
|
||||
}
|
||||
savePromptContent.value = promptToSave
|
||||
savePromptModalVisible.value = true
|
||||
}
|
||||
|
||||
@@ -277,14 +247,9 @@ defineOptions({ name: 'ContentStyleBenchmark' })
|
||||
<BenchmarkTable
|
||||
:data="data"
|
||||
v-model:selectedRowKeys="selectedRowKeys"
|
||||
v-model:expandedRowKeys="expandedRowKeys"
|
||||
:loading="loading"
|
||||
@analyze="analyzeVideo"
|
||||
@export="handleExportToExcel"
|
||||
@batch-analyze="handleBatchAnalyze"
|
||||
@copy="handleCopyPrompt"
|
||||
@save-to-server="handleOpenSavePromptModal"
|
||||
@create-content="handleCreateContent"
|
||||
/>
|
||||
|
||||
<!-- 空态显示 -->
|
||||
@@ -312,7 +277,7 @@ defineOptions({ name: 'ContentStyleBenchmark' })
|
||||
:merged-text="batchPromptMergedText"
|
||||
:text-count="batchPromptTextCount"
|
||||
@copy="handleCopyBatchPrompt"
|
||||
@save="(prompt) => handleOpenSavePromptModal(null, prompt)"
|
||||
@save="(prompt) => handleOpenSavePromptModal(prompt)"
|
||||
@use="handleUseBatchPrompt"
|
||||
/>
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup>
|
||||
import { reactive, h } from 'vue'
|
||||
import { DownloadOutlined } from '@ant-design/icons-vue'
|
||||
import { formatTime } from '../utils/benchmarkUtils'
|
||||
import ExpandedRowContent from './ExpandedRowContent.vue'
|
||||
import GradientButton from '@/components/GradientButton.vue'
|
||||
|
||||
defineProps({
|
||||
@@ -14,10 +12,6 @@ import GradientButton from '@/components/GradientButton.vue'
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
expandedRowKeys: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -26,34 +20,28 @@ import GradientButton from '@/components/GradientButton.vue'
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:selectedRowKeys',
|
||||
'update:expandedRowKeys',
|
||||
'analyze',
|
||||
'export',
|
||||
'batchAnalyze',
|
||||
'copy',
|
||||
'saveToServer',
|
||||
'createContent',
|
||||
])
|
||||
|
||||
const defaultColumns = [
|
||||
{ title: '封面', key: 'cover', dataIndex: 'cover', width: 120, resizable: true },
|
||||
{ title: '描述', key: 'desc', dataIndex: 'desc', width: 280, resizable: true, ellipsis: true },
|
||||
{ title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true,
|
||||
{ title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
|
||||
{ title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true,
|
||||
{ title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.comment_count || 0) - (b.comment_count || 0) },
|
||||
{ title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true,
|
||||
{ title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
|
||||
{ title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true,
|
||||
{ title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
|
||||
{ title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true,
|
||||
{ title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.duration_s || 0) - (b.duration_s || 0) },
|
||||
{ title: '置顶', key: 'is_top', dataIndex: 'is_top', width: 70, resizable: true },
|
||||
{ title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true,
|
||||
{ title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true,
|
||||
sorter: (a, b) => (a.create_time || 0) - (b.create_time || 0) },
|
||||
{ title: '链接', key: 'share_url', dataIndex: 'share_url', width: 80, resizable: true,
|
||||
customRender: ({ record }) => record.share_url ? h('a', { href: record.share_url, target: '_blank' }, '打开') : null },
|
||||
{ title: '操作', key: 'action', width: 100, resizable: true, fixed: 'right' },
|
||||
]
|
||||
|
||||
const columns = reactive([...defaultColumns])
|
||||
@@ -61,57 +49,36 @@ const columns = reactive([...defaultColumns])
|
||||
function onSelectChange(selectedKeys) {
|
||||
emit('update:selectedRowKeys', selectedKeys)
|
||||
}
|
||||
|
||||
function onExpandedRowKeysChange(keys) {
|
||||
emit('update:expandedRowKeys', keys)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card results-card" v-if="data.length > 0">
|
||||
<div class="section-header">
|
||||
<div class="section-title">分析结果</div>
|
||||
<a-space align="center">
|
||||
<a-button
|
||||
size="small"
|
||||
type="default"
|
||||
@click="$emit('export')"
|
||||
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 10">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
导出Excel ({{ selectedRowKeys.length }}/10)
|
||||
</a-button>
|
||||
<div class="button-group">
|
||||
<GradientButton
|
||||
:text="`批量分析 (${selectedRowKeys.length})`"
|
||||
:text="`导出Excel (${selectedRowKeys.length}/20)`"
|
||||
size="small"
|
||||
@click="$emit('export')"
|
||||
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
|
||||
icon="download"
|
||||
/>
|
||||
<GradientButton
|
||||
:text="`批量分析 (${selectedRowKeys.length}/20)`"
|
||||
size="small"
|
||||
@click="$emit('batchAnalyze')"
|
||||
:disabled="selectedRowKeys.length === 0"
|
||||
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
:dataSource="data"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
|
||||
:expandedRowKeys="expandedRowKeys"
|
||||
@expandedRowsChange="onExpandedRowKeysChange"
|
||||
:expandable="{
|
||||
expandRowByClick: false
|
||||
}"
|
||||
<a-table
|
||||
:dataSource="data"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:row-selection="{ selectedRowKeys, onChange: onSelectChange }"
|
||||
:rowKey="(record) => String(record.id)"
|
||||
:loading="loading"
|
||||
class="benchmark-table">
|
||||
<template #expandedRowRender="{ record }">
|
||||
<ExpandedRowContent
|
||||
:record="record"
|
||||
@analyze="(row) => $emit('analyze', row)"
|
||||
@copy="(row) => $emit('copy', row)"
|
||||
@save-to-server="(row) => $emit('saveToServer', row)"
|
||||
@create-content="(row) => $emit('createContent', row)"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'cover'">
|
||||
<img v-if="record.cover" :src="record.cover" alt="cover" loading="lazy"
|
||||
@@ -147,18 +114,6 @@ function onExpandedRowKeysChange(keys) {
|
||||
<a v-if="record.share_url" :href="record.share_url" target="_blank" class="link-btn">打开</a>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<GradientButton
|
||||
text="分析"
|
||||
size="small"
|
||||
:loading="record._analyzing"
|
||||
loading-text="分析中…"
|
||||
:disabled="record._analyzing"
|
||||
@click="$emit('analyze', record)"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</section>
|
||||
@@ -184,15 +139,10 @@ function onExpandedRowKeysChange(keys) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-header .ant-space {
|
||||
.button-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-header .ant-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
<template>
|
||||
<div class="voice-copy-page">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<h1>配音管理</h1>
|
||||
<a-button type="primary" @click="handleCreate">
|
||||
<PlusOutlined />
|
||||
新建配音
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<BasicLayout
|
||||
title="配音管理"
|
||||
:show-back="false"
|
||||
>
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleCreate">
|
||||
<PlusOutlined />
|
||||
新建配音
|
||||
</a-button>
|
||||
<a-input
|
||||
v-model:value="searchParams.name"
|
||||
placeholder="搜索配音名称"
|
||||
@@ -20,7 +18,7 @@
|
||||
>
|
||||
<SearchOutlined />
|
||||
</a-input>
|
||||
<a-button type="primary" @click="handleSearch">查询</a-button>
|
||||
<a-button @click="handleSearch">查询</a-button>
|
||||
<a-button @click="handleReset">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
@@ -101,7 +99,7 @@
|
||||
</a-modal>
|
||||
|
||||
<audio ref="audioPlayer" style="display: none" />
|
||||
</div>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -112,6 +110,7 @@ import { VoiceService } from '@/api/voice'
|
||||
import { MaterialService } from '@/api/material'
|
||||
import { useUpload } from '@/composables/useUpload'
|
||||
import dayjs from 'dayjs'
|
||||
import BasicLayout from '@/layouts/components/BasicLayout.vue'
|
||||
|
||||
// ========== 常量 ==========
|
||||
const DEFAULT_FORM_DATA = {
|
||||
@@ -411,38 +410,17 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.voice-copy-page {
|
||||
padding: 24px;
|
||||
background: var(--color-bg);
|
||||
.search-bar {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-header .ant-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-bar,
|
||||
.table-container {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.voice-name {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
|
||||
@@ -1,848 +0,0 @@
|
||||
<template>
|
||||
<div class="material-list">
|
||||
<div class="material-list__header">
|
||||
<h1 class="material-list__title">素材列表</h1>
|
||||
<div class="material-list__actions">
|
||||
<a-button type="primary" @click="handleOpenUploadModal">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
上传素材
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="selectedFileIds.length > 0"
|
||||
type="primary"
|
||||
ghost
|
||||
@click="handleOpenGroupModal"
|
||||
>
|
||||
批量分组 ({{ selectedFileIds.length }})
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
ghost
|
||||
@click="$router.push('/material/mix')"
|
||||
>
|
||||
素材混剪
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="selectedFileIds.length > 0"
|
||||
type="primary"
|
||||
status="danger"
|
||||
@click="handleBatchDelete"
|
||||
>
|
||||
批量删除 ({{ selectedFileIds.length }})
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选条件 -->
|
||||
<div class="material-list__filters">
|
||||
<a-space>
|
||||
<a-select
|
||||
v-model:value="filters.fileCategory"
|
||||
style="width: 120px"
|
||||
placeholder="文件分类"
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<a-select-option value="">全部分类</a-select-option>
|
||||
<a-select-option value="video">视频</a-select-option>
|
||||
<a-select-option value="generate">生成</a-select-option>
|
||||
<a-select-option value="audio">音频</a-select-option>
|
||||
<a-select-option value="mix">混剪</a-select-option>
|
||||
<a-select-option value="voice">配音</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-input
|
||||
v-model="filters.fileName"
|
||||
placeholder="搜索文件名"
|
||||
style="width: 200px"
|
||||
allow-clear
|
||||
@press-enter="handleFilterChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-range-picker
|
||||
v-model:value="filters.createTime"
|
||||
style="width: 300px"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="['开始日期', '结束日期']"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
<a-button type="primary" @click="handleFilterChange">查询</a-button>
|
||||
<a-button @click="handleResetFilters">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<div class="material-list__content">
|
||||
<a-spin :spinning="loading" tip="加载中..." style="width: 100%; min-height: 400px;">
|
||||
<template v-if="fileList.length > 0">
|
||||
<div class="material-grid">
|
||||
<div
|
||||
v-for="file in fileList"
|
||||
:key="file.id"
|
||||
class="material-item"
|
||||
:class="{ 'material-item--selected': selectedFileIds.includes(file.id) }"
|
||||
@click="handleFileClick(file)"
|
||||
>
|
||||
<div class="material-item__content">
|
||||
<!-- 预览图 -->
|
||||
<div class="material-item__preview">
|
||||
<!-- 视频文件：只使用 coverBase64（本地缓存），不使用任何OSS URL -->
|
||||
<img
|
||||
v-if="file.isVideo && file.coverBase64"
|
||||
:src="file.coverBase64"
|
||||
:alt="file.fileName"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<!-- 视频文件：如果没有封面，显示占位符（不使用视频标签） -->
|
||||
<div v-else-if="file.isVideo" class="material-item__placeholder">
|
||||
<FileOutlined />
|
||||
</div>
|
||||
<!-- 图片或其他文件：使用图片标签 -->
|
||||
<img
|
||||
v-else-if="!file.isVideo && (file.coverUrl || file.coverBase64 || file.previewUrl)"
|
||||
:src="file.coverUrl || file.coverBase64 || file.previewUrl"
|
||||
:alt="file.fileName"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<div v-else class="material-item__placeholder">
|
||||
<FileOutlined />
|
||||
</div>
|
||||
<!-- 文件类型标识 -->
|
||||
<div class="material-item__badge">
|
||||
<a-tag v-if="file.isVideo" color="red">视频</a-tag>
|
||||
<a-tag v-else-if="file.isImage" color="blue">图片</a-tag>
|
||||
<a-tag v-else color="gray">文件</a-tag>
|
||||
</div>
|
||||
<!-- 分组图标（仅视频文件显示） -->
|
||||
<div v-if="file.isVideo" class="material-item__group" @click.stop="handleSingleGroup(file)">
|
||||
<TagsOutlined />
|
||||
</div>
|
||||
<!-- 下载图标 -->
|
||||
<div class="material-item__download" @click.stop="handleDownloadFile(file)">
|
||||
<DownloadOutlined />
|
||||
</div>
|
||||
<!-- 删除图标 -->
|
||||
<div class="material-item__delete" @click.stop="handleDeleteFile(file)">
|
||||
<DeleteOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件信息 -->
|
||||
<div class="material-item__info">
|
||||
<div class="material-item__name" :title="file.fileName">
|
||||
{{ file.fileName }}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty description="暂无素材" />
|
||||
</template>
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="material-list__pagination">
|
||||
<a-pagination
|
||||
v-model:current="pagination.pageNo"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:show-total="(total) => `共 ${total} 条`"
|
||||
:show-size-changer="true"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 上传对话框 -->
|
||||
<MaterialUploadModal
|
||||
v-model:visible="uploadModalVisible"
|
||||
:uploading="uploading"
|
||||
:file-category="filters.fileCategory"
|
||||
@confirm="handleConfirmUpload"
|
||||
@cancel="handleUploadCancel"
|
||||
/>
|
||||
|
||||
<!-- 批量分组模态框 -->
|
||||
<MaterialBatchGroupModal
|
||||
v-model:open="groupModalVisible"
|
||||
:group-list="groupList"
|
||||
:file-count="selectedFileIds.length"
|
||||
:file-name="groupingFileName"
|
||||
@confirm="handleBatchGroup"
|
||||
@cancel="handleGroupCancel"
|
||||
/>
|
||||
|
||||
<!-- 素材混剪模态框 -->
|
||||
<MaterialMixModal
|
||||
ref="mixModalRef"
|
||||
v-model:open="mixModalVisible"
|
||||
:loading="mixing"
|
||||
:group-list="groupList"
|
||||
:all-audio-files="allAudioFiles"
|
||||
@confirm="handleMixConfirm"
|
||||
@cancel="handleMixCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
UploadOutlined,
|
||||
SearchOutlined,
|
||||
FileOutlined,
|
||||
DeleteOutlined,
|
||||
TagsOutlined,
|
||||
DownloadOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { MaterialService, MaterialGroupService } from '@/api/material'
|
||||
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'
|
||||
|
||||
// 数据
|
||||
const loading = ref(false)
|
||||
const fileList = ref([])
|
||||
const selectedFileIds = ref([])
|
||||
const uploadModalVisible = ref(false)
|
||||
const uploading = ref(false)
|
||||
const mixModalVisible = ref(false)
|
||||
const mixing = ref(false)
|
||||
|
||||
// 分组相关
|
||||
const groupModalVisible = ref(false)
|
||||
const groupList = ref([])
|
||||
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 filters = reactive({
|
||||
fileCategory: 'video', // 默认分类为视频
|
||||
fileName: '',
|
||||
createTime: undefined
|
||||
})
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 构建查询参数
|
||||
const buildQueryParams = () => {
|
||||
const params = {
|
||||
pageNo: pagination.pageNo,
|
||||
pageSize: pagination.pageSize,
|
||||
fileCategory: filters.fileCategory || undefined,
|
||||
fileName: filters.fileName || undefined
|
||||
}
|
||||
|
||||
// 处理日期范围
|
||||
if (filters.createTime && Array.isArray(filters.createTime) && filters.createTime.length === 2) {
|
||||
params.createTime = [
|
||||
`${filters.createTime[0]} 00:00:00`,
|
||||
`${filters.createTime[1]} 23:59:59`
|
||||
]
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
|
||||
// 加载文件列表
|
||||
const loadFileList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await MaterialService.getFilePage(buildQueryParams())
|
||||
if (res.code === 0) {
|
||||
const files = res.data.list || []
|
||||
|
||||
fileList.value = files
|
||||
pagination.total = res.data.total || 0
|
||||
} else {
|
||||
message.error(res.msg || '加载失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载文件列表失败:', error)
|
||||
message.error('加载失败，请重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 打开上传对话框
|
||||
const handleOpenUploadModal = () => {
|
||||
uploadModalVisible.value = true
|
||||
}
|
||||
|
||||
// 确认上传
|
||||
const handleConfirmUpload = async (filesWithCover, fileCategory) => {
|
||||
if (!filesWithCover?.length) {
|
||||
message.warning('请选择文件')
|
||||
return
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
const uploadCategory = fileCategory || 'video'
|
||||
|
||||
try {
|
||||
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 ? `，${failCount} 个失败` : ''}`)
|
||||
uploadModalVisible.value = false
|
||||
loadFileList()
|
||||
} else {
|
||||
message.error('所有文件上传失败，请重试')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error)
|
||||
message.error(error.message || '上传失败，请重试')
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 取消上传
|
||||
const handleUploadCancel = () => {
|
||||
uploadModalVisible.value = false
|
||||
}
|
||||
|
||||
// 删除文件
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedFileIds.value.length === 0) return
|
||||
|
||||
// 二次确认弹窗
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除选中的 ${selectedFileIds.value.length} 个文件吗？删除后无法恢复。`,
|
||||
okText: '确定删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await MaterialService.deleteFiles(selectedFileIds.value)
|
||||
message.success('删除成功')
|
||||
|
||||
selectedFileIds.value = []
|
||||
loadFileList()
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
message.error(error.message || '删除失败，请重试')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除单个文件
|
||||
const handleDeleteFile = (file) => {
|
||||
if (!file?.id) return
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除文件 "${file.fileName}" 吗？删除后无法恢复。`,
|
||||
okText: '确定删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await MaterialService.deleteFiles([file.id])
|
||||
message.success('删除成功')
|
||||
const index = selectedFileIds.value.indexOf(file.id)
|
||||
if (index > -1) {
|
||||
selectedFileIds.value.splice(index, 1)
|
||||
}
|
||||
loadFileList()
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
message.error(error.message || '删除失败，请重试')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 下载文件
|
||||
const handleDownloadFile = (file) => {
|
||||
console.log('下载文件:', file)
|
||||
if (!file?.previewUrl) {
|
||||
message.warning('文件地址无效')
|
||||
return
|
||||
}
|
||||
|
||||
const fileUrl = file.previewUrl
|
||||
const link = document.createElement('a')
|
||||
link.href = fileUrl
|
||||
link.download = file.fileName || 'download'
|
||||
link.target = '_blank'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
message.success('开始下载')
|
||||
}
|
||||
|
||||
// 文件点击
|
||||
const handleFileClick = (file) => {
|
||||
const index = selectedFileIds.value.indexOf(file.id)
|
||||
if (index > -1) {
|
||||
selectedFileIds.value.splice(index, 1)
|
||||
} else {
|
||||
selectedFileIds.value.push(file.id)
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
const handleFilterChange = () => {
|
||||
pagination.pageNo = 1
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
const handleResetFilters = () => {
|
||||
filters.fileCategory = 'video'
|
||||
filters.fileName = ''
|
||||
filters.createTime = undefined
|
||||
pagination.pageNo = 1
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handlePageChange = (page, pageSize) => {
|
||||
pagination.pageNo = page
|
||||
if (pageSize && pageSize !== pagination.pageSize) {
|
||||
pagination.pageSize = pageSize
|
||||
pagination.pageNo = 1
|
||||
}
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
// 图片加载错误处理（简化版，不使用coverUrl）
|
||||
const handleImageError = (e) => {
|
||||
const img = e.target
|
||||
const currentSrc = img.src
|
||||
|
||||
// 找到对应的文件对象
|
||||
const file = fileList.value.find(f =>
|
||||
f.coverBase64 === currentSrc ||
|
||||
f.previewUrl === currentSrc
|
||||
)
|
||||
|
||||
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 handleOpenMixModal = async () => {
|
||||
// 重置混剪表单（调用子组件方法）
|
||||
mixModalRef.value?.resetForm()
|
||||
|
||||
// 加载分组列表
|
||||
await loadGroupList()
|
||||
|
||||
mixModalVisible.value = true
|
||||
}
|
||||
|
||||
const handleMixCancel = () => {
|
||||
mixModalVisible.value = false
|
||||
}
|
||||
|
||||
const handleMixConfirm = async (params) => {
|
||||
mixing.value = true
|
||||
try {
|
||||
// 纯画面模式：仅传入 title 和 videoUrls
|
||||
const { title, videoUrls } = params
|
||||
|
||||
const taskParams = {
|
||||
title,
|
||||
videoUrls,
|
||||
produceCount: 1 // 固定生成1个
|
||||
}
|
||||
|
||||
const { data } = await MixTaskService.createTask(taskParams)
|
||||
if (data) {
|
||||
message.success('混剪任务提交成功，正在处理中...')
|
||||
mixModalVisible.value = false
|
||||
|
||||
// 跳转到任务列表页面
|
||||
setTimeout(() => {
|
||||
window.open('/material/mix-task', '_blank')
|
||||
}, 1000)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('混剪失败:', error)
|
||||
message.error(error?.message || '混剪任务提交失败，请重试')
|
||||
} finally {
|
||||
mixing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadFileList()
|
||||
loadGroupList()
|
||||
})
|
||||
|
||||
// 加载分组列表
|
||||
const loadGroupList = async () => {
|
||||
try {
|
||||
const res = await MaterialGroupService.getGroupList()
|
||||
if (res.code === 0) {
|
||||
groupList.value = res.data || []
|
||||
} else {
|
||||
console.error('[MaterialList] 分组列表加载失败:', res.msg)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[MaterialList] 加载分组列表失败:', error)
|
||||
message.error('加载分组列表失败: ' + (error.message || error))
|
||||
}
|
||||
}
|
||||
|
||||
// 打开批量分组模态框
|
||||
const handleOpenGroupModal = () => {
|
||||
if (selectedFileIds.value.length === 0) {
|
||||
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
|
||||
}
|
||||
|
||||
// 单个文件分组
|
||||
const handleSingleGroup = (file) => {
|
||||
groupingFileId.value = file.id // 标记是单个文件分组
|
||||
groupModalVisible.value = true
|
||||
}
|
||||
|
||||
// 执行批量分组
|
||||
const handleBatchGroup = async (groupId) => {
|
||||
if (!groupId) {
|
||||
message.warning('请选择分组')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let fileIds
|
||||
let successMessage
|
||||
|
||||
if (groupingFileId.value) {
|
||||
// 单个文件分组
|
||||
fileIds = [groupingFileId.value]
|
||||
successMessage = '文件分组成功'
|
||||
} else {
|
||||
// 批量分组
|
||||
fileIds = selectedFileIds.value
|
||||
successMessage = '批量分组成功'
|
||||
}
|
||||
|
||||
await MaterialGroupService.addFilesToGroups({
|
||||
fileIds: fileIds,
|
||||
groupIds: [groupId]
|
||||
})
|
||||
message.success(successMessage)
|
||||
|
||||
// 重置状态
|
||||
groupModalVisible.value = false
|
||||
groupingFileId.value = null
|
||||
|
||||
// 如果是批量分组，清除选中状态
|
||||
if (!groupingFileId.value) {
|
||||
selectedFileIds.value = []
|
||||
}
|
||||
|
||||
loadGroupList() // 刷新分组列表以更新文件计数
|
||||
} catch (error) {
|
||||
console.error('分组失败:', error)
|
||||
message.error(error.message || '分组失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 取消分组操作
|
||||
const handleGroupCancel = () => {
|
||||
groupModalVisible.value = false
|
||||
groupingFileId.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.material-list {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.material-list__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.material-list__title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.material-list__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.material-list__filters {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.material-list__content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.material-list__content :deep(.arco-spin) {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.material-list__content :deep(.arco-spin-content) {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.material-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.material-list__pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.material-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.material-item__content {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.material-item--selected .material-item__content {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.material-item__preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%; /* 16:9 */
|
||||
background: var(--color-bg-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.material-item__preview img,
|
||||
.material-item__preview video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.material-item__preview video {
|
||||
pointer-events: none; /* 禁用视频交互，避免点击播放 */
|
||||
}
|
||||
|
||||
.material-item__placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 48px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.material-item__badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.material-item__delete {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(255, 77, 79, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.material-item__group {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 76px; /* 在下载按钮左边 */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(24, 144, 255, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.material-item__download {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 42px; /* 在删除按钮左边 */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(82, 196, 26, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.material-item:hover .material-item__delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-item:hover .material-item__group {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-item:hover .material-item__download {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-item__delete:hover {
|
||||
background: rgb(255, 77, 79);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.material-item__group:hover {
|
||||
background: rgb(24, 144, 255);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.material-item__download:hover {
|
||||
background: rgb(82, 196, 26);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.material-item__info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.material-item__name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.material-item__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -465,11 +465,10 @@ onMounted(() => {
|
||||
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 3px;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
@@ -478,21 +477,22 @@ onMounted(() => {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
border: 1px solid transparent;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.15s ease;
|
||||
margin-bottom: -1px;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
background: rgba(24, 144, 255, 0.05);
|
||||
color: #374151;
|
||||
background: rgba(243, 244, 246, 0.5);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #fff;
|
||||
color: #1890ff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #d9d9d9;
|
||||
color: #2563eb;
|
||||
border-bottom-color: #2563eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -536,8 +536,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-top: 16px;
|
||||
|
||||
&__header {
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { message, Select } from 'ant-design-vue'
|
||||
import TikhubService, { InterfaceType, MethodType, ParamType } from '@/api/tikhub'
|
||||
import { CommonService } from '@/api/common'
|
||||
import { UserPromptApi } from '@/api/userPrompt'
|
||||
@@ -25,10 +25,10 @@ const generatedContent = ref('')
|
||||
const searchParams = reactive({
|
||||
keyword: '',
|
||||
offset: 0,
|
||||
sort_type: 1,
|
||||
publish_time: 7,
|
||||
sort_type: '1',
|
||||
publish_time: '7',
|
||||
filter_duration: '0',
|
||||
content_type: 0
|
||||
content_type: '0'
|
||||
})
|
||||
|
||||
// 创作详情
|
||||
@@ -450,42 +450,42 @@ onMounted(async () => {
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<label class="param-label">排序方式</label>
|
||||
<select v-model="searchParams.sort_type" class="param-select">
|
||||
<option value="0">综合排序</option>
|
||||
<option value="1">最多点赞</option>
|
||||
<option value="2">最新发布</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.sort_type" class="param-select">
|
||||
<a-select-option value="0">综合排序</a-select-option>
|
||||
<a-select-option value="1">最多点赞</a-select-option>
|
||||
<a-select-option value="2">最新发布</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="param-item">
|
||||
<label class="param-label">发布时间</label>
|
||||
<select v-model="searchParams.publish_time" class="param-select">
|
||||
<option value="0">不限</option>
|
||||
<option value="1">最近一天</option>
|
||||
<option value="7">最近一周</option>
|
||||
<option value="180">最近半年</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.publish_time" class="param-select">
|
||||
<a-select-option value="0">不限</a-select-option>
|
||||
<a-select-option value="1">最近一天</a-select-option>
|
||||
<a-select-option value="7">最近一周</a-select-option>
|
||||
<a-select-option value="180">最近半年</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="param-item">
|
||||
<label class="param-label">视频时长</label>
|
||||
<select v-model="searchParams.filter_duration" class="param-select">
|
||||
<option value="0">不限</option>
|
||||
<option value="0-1">1分钟以内</option>
|
||||
<option value="1-5">1-5分钟</option>
|
||||
<option value="5-10000">5分钟以上</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.filter_duration" class="param-select">
|
||||
<a-select-option value="0">不限</a-select-option>
|
||||
<a-select-option value="0-1">1分钟以内</a-select-option>
|
||||
<a-select-option value="1-5">1-5分钟</a-select-option>
|
||||
<a-select-option value="5-10000">5分钟以上</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<label class="param-label">内容类型</label>
|
||||
<select v-model="searchParams.content_type" class="param-select">
|
||||
<option value="0">不限</option>
|
||||
<option value="1">视频</option>
|
||||
<option value="2">图集</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.content_type" class="param-select">
|
||||
<a-select-option value="0">不限</a-select-option>
|
||||
<a-select-option value="1">视频</a-select-option>
|
||||
<a-select-option value="2">图集</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -693,22 +693,18 @@ onMounted(async () => {
|
||||
<!-- 生成文案按钮 -->
|
||||
<div class="pt-2">
|
||||
<button
|
||||
class="cyber-button"
|
||||
:class="{
|
||||
'cyber-button--disabled': !topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating,
|
||||
'cyber-button--loading': isGenerating
|
||||
}"
|
||||
class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white py-3 rounded-lg font-bold shadow-lg shadow-indigo-500/30 transition flex items-center justify-center group"
|
||||
style="color: white !important;"
|
||||
:disabled="!topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating"
|
||||
@click="handleGenerate"
|
||||
>
|
||||
<span v-if="isGenerating" class="cyber-button__loading">
|
||||
<span class="cyber-button__spinner"></span>
|
||||
<span class="cyber-button__text">生成中...</span>
|
||||
<span v-if="isGenerating" class="flex items-center justify-center" style="color: white;">
|
||||
<span class="spinner mr-2"></span>
|
||||
<span>生成中...</span>
|
||||
</span>
|
||||
<span v-else class="cyber-button__content">
|
||||
<span class="cyber-button__glow"></span>
|
||||
<span class="cyber-button__text">生成爆款</span>
|
||||
<span class="cyber-button__arrow">→</span>
|
||||
<span v-else class="flex items-center justify-center" style="color: white;">
|
||||
<i class="fa-solid fa-wand-magic-sparkles mr-2 group-hover:rotate-12 transition" style="color: white;"></i>
|
||||
<span>生成爆款</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -833,24 +829,9 @@ onMounted(async () => {
|
||||
|
||||
.param-select {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.param-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.param-select:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
@@ -1270,149 +1251,6 @@ onMounted(async () => {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 赛博朋克风格按钮 - 蓝色主题 */
|
||||
.cyber-button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
box-shadow:
|
||||
0 0 10px rgba(59, 130, 246, 0.3),
|
||||
inset 0 0 10px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.cyber-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.cyber-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.cyber-button:hover:not(.cyber-button--disabled) {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
box-shadow:
|
||||
0 0 20px rgba(59, 130, 246, 0.5),
|
||||
0 0 40px rgba(59, 130, 246, 0.3),
|
||||
inset 0 0 20px rgba(59, 130, 246, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cyber-button:active:not(.cyber-button--disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow:
|
||||
0 0 15px rgba(59, 130, 246, 0.4),
|
||||
inset 0 0 15px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.cyber-button__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cyber-button__glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(59, 130, 246, 0.4);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__glow {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.cyber-button__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
|
||||
}
|
||||
|
||||
.cyber-button__arrow {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: transform 0.3s ease;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.cyber-button__loading {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cyber-button__spinner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(59, 130, 246, 0.3);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: cyber-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes cyber-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.cyber-button--disabled,
|
||||
.cyber-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow: none;
|
||||
color: rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
.cyber-button--disabled:hover,
|
||||
.cyber-button:disabled:hover {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cyber-button--loading {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.cyber-button--loading:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 语音分析loading指示器 */
|
||||
.analyzing-indicator {
|
||||
@@ -1426,4 +1264,20 @@ onMounted(async () => {
|
||||
.analyzing-text {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 按钮加载动画 */
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user