混剪优化
This commit is contained in:
@@ -36,6 +36,7 @@
|
||||
"tailwindcss": "^4.2.1",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.5.1",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"xlsx": "^0.18.5",
|
||||
"xlsx-js-style": "^1.2.0"
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="visible"
|
||||
:title="modalTitle"
|
||||
:footer="null"
|
||||
width="800px"
|
||||
class="selector-modal"
|
||||
@update:open="$emit('update:visible', $event)"
|
||||
>
|
||||
<div class="selector-container">
|
||||
<!-- 分组选择器 + 批量操作按钮 -->
|
||||
<div class="selector-actions">
|
||||
<a-space>
|
||||
<!-- 分组选择器 -->
|
||||
<a-select
|
||||
:value="selectorGroupId"
|
||||
placeholder="使用场景默认分组"
|
||||
size="small"
|
||||
style="width: 160px;"
|
||||
allow-clear
|
||||
@change="handleSelectorGroupChange"
|
||||
>
|
||||
<a-select-option v-for="g in groupList" :key="g.id" :value="g.id">
|
||||
{{ g.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-divider type="vertical" />
|
||||
<a-button size="small" @click="handleSelectAll">
|
||||
<template #icon><SelectOutlined /></template>
|
||||
全选
|
||||
</a-button>
|
||||
<a-button size="small" @click="handleClearSelection">
|
||||
<template #icon><StopOutlined /></template>
|
||||
清空
|
||||
</a-button>
|
||||
<a-button size="small" @click="handleAutoFill">
|
||||
<template #icon><ThunderboltOutlined /></template>
|
||||
智能填充
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- 候选网格 -->
|
||||
<div class="selector-grid">
|
||||
<div
|
||||
v-for="file in selectorFiles"
|
||||
:key="file.id"
|
||||
class="selector-item"
|
||||
:class="{ 'selector-item--selected': isSelected(file.id) }"
|
||||
@click="toggleSelection(file)"
|
||||
>
|
||||
<div class="selector-thumb">
|
||||
<img v-if="file.coverBase64" :src="file.coverBase64" />
|
||||
<VideoCameraOutlined v-else />
|
||||
</div>
|
||||
<div class="selector-name">{{ file.displayName || file.fileName }}</div>
|
||||
<div v-if="isSelected(file.id)" class="selector-checkmark">
|
||||
<CheckOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="selector-actions-footer">
|
||||
<a-space>
|
||||
<a-button @click="$emit('update:visible', false)">取消</a-button>
|
||||
<a-button type="primary" @click="handleConfirm">确定</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
VideoCameraOutlined,
|
||||
ThunderboltOutlined,
|
||||
CheckOutlined,
|
||||
SelectOutlined,
|
||||
StopOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sceneIndex: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
sceneGroupId: {
|
||||
type: [Number, String],
|
||||
default: null
|
||||
},
|
||||
globalGroupId: {
|
||||
type: [Number, String],
|
||||
default: null
|
||||
},
|
||||
groupList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
allGroupFiles: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
groupFiles: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
initialCandidates: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
maxCandidates: {
|
||||
type: Number,
|
||||
default: 10
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'confirm', 'load-group-files'])
|
||||
|
||||
// 弹窗分组选择
|
||||
const selectorGroupId = ref(null)
|
||||
|
||||
// 临时选中的文件ID列表
|
||||
const tempSelectedFiles = ref([])
|
||||
|
||||
// 弹窗标题
|
||||
const modalTitle = computed(() =>
|
||||
`场景${props.sceneIndex + 1} - 已选择 ${tempSelectedFiles.value.length}/${props.maxCandidates} 个候选`
|
||||
)
|
||||
|
||||
// 弹窗中显示的素材列表
|
||||
const selectorFiles = computed(() => {
|
||||
const groupId = selectorGroupId.value
|
||||
if (groupId) {
|
||||
return props.allGroupFiles[groupId] || []
|
||||
}
|
||||
// 使用场景分组或全局分组
|
||||
const effectiveGroupId = props.sceneGroupId || props.globalGroupId
|
||||
if (effectiveGroupId) {
|
||||
return props.allGroupFiles[effectiveGroupId] || props.groupFiles
|
||||
}
|
||||
return props.groupFiles
|
||||
})
|
||||
|
||||
// 监听弹窗打开，初始化状态
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (visible) {
|
||||
// 初始化选中列表
|
||||
tempSelectedFiles.value = [...props.initialCandidates]
|
||||
// 设置初始分组
|
||||
selectorGroupId.value = props.sceneGroupId || props.globalGroupId || null
|
||||
// 如果分组素材未缓存，通知父组件加载
|
||||
if (selectorGroupId.value && !props.allGroupFiles[selectorGroupId.value]) {
|
||||
emit('load-group-files', selectorGroupId.value)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 判断是否选中
|
||||
const isSelected = (fileId) => tempSelectedFiles.value.includes(fileId)
|
||||
|
||||
// 切换选中状态
|
||||
const toggleSelection = (file) => {
|
||||
const index = tempSelectedFiles.value.indexOf(file.id)
|
||||
if (index > -1) {
|
||||
tempSelectedFiles.value.splice(index, 1)
|
||||
} else {
|
||||
if (tempSelectedFiles.value.length < props.maxCandidates) {
|
||||
tempSelectedFiles.value.push(file.id)
|
||||
} else {
|
||||
message.warning(`每个场景最多只能选择${props.maxCandidates}个候选`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
const handleSelectAll = () => {
|
||||
tempSelectedFiles.value = selectorFiles.value.map(f => f.id)
|
||||
}
|
||||
|
||||
// 清空
|
||||
const handleClearSelection = () => {
|
||||
tempSelectedFiles.value = []
|
||||
}
|
||||
|
||||
// 智能填充
|
||||
const handleAutoFill = () => {
|
||||
if (props.sceneIndex < 0) return
|
||||
|
||||
const availableMaterials = props.groupFiles.filter(
|
||||
material => !tempSelectedFiles.value.includes(material.id)
|
||||
)
|
||||
|
||||
if (availableMaterials.length === 0) {
|
||||
message.warning('没有更多可用素材')
|
||||
return
|
||||
}
|
||||
|
||||
const maxAddCount = props.maxCandidates - tempSelectedFiles.value.length
|
||||
const targetCount = Math.min(3, maxAddCount)
|
||||
|
||||
if (targetCount <= 0) {
|
||||
message.warning(`候选数量已达上限（${props.maxCandidates}个）`)
|
||||
return
|
||||
}
|
||||
|
||||
// 简单随机选择
|
||||
const shuffled = [...availableMaterials].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, targetCount)
|
||||
tempSelectedFiles.value.push(...selected.map(m => m.id))
|
||||
message.success(`已智能选择${selected.length}个候选素材`)
|
||||
}
|
||||
|
||||
// 分组切换
|
||||
const handleSelectorGroupChange = (groupId) => {
|
||||
selectorGroupId.value = groupId
|
||||
tempSelectedFiles.value = []
|
||||
if (groupId && !props.allGroupFiles[groupId]) {
|
||||
emit('load-group-files', groupId)
|
||||
}
|
||||
}
|
||||
|
||||
// 确认选择
|
||||
const handleConfirm = () => {
|
||||
emit('confirm', {
|
||||
sceneIndex: props.sceneIndex,
|
||||
fileIds: [...tempSelectedFiles.value]
|
||||
})
|
||||
emit('update:visible', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.selector-container {
|
||||
.selector-actions {
|
||||
margin-bottom: var(--space-2);
|
||||
padding: var(--space-4);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.selector-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-2);
|
||||
max-height: 480px;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-2);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.selector-item {
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
transition: all var(--duration-base) ease;
|
||||
position: relative;
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-inset-card);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-inset-card);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
border-color: var(--color-success);
|
||||
box-shadow: var(--shadow-inset-card);
|
||||
}
|
||||
|
||||
.selector-thumb {
|
||||
aspect-ratio: 16/9;
|
||||
background: var(--color-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-2xl);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-name {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--font-size-xs);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.selector-checkmark {
|
||||
position: absolute;
|
||||
top: var(--space-2);
|
||||
right: var(--space-2);
|
||||
background: var(--color-success);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-base);
|
||||
z-index: 2;
|
||||
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.selector-actions-footer {
|
||||
margin-top: var(--space-2);
|
||||
padding: var(--space-4);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: right;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.selector-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.selector-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user