AIGC/demo/frontend/src/views/MyWorks.vue

<template>
  <div class="works-page">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <!-- Logo -->
      <div class="logo">logo</div>
      
      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <div class="nav-item" @click="goToProfile">
          <el-icon><User /></el-icon>
          <span>个人主页</span>
        </div>
        <div class="nav-item" @click="goToSubscription">
          <el-icon><Compass /></el-icon>
          <span>会员订阅</span>
        </div>
        <div class="nav-item active">
          <el-icon><Document /></el-icon>
          <span>我的作品</span>
        </div>
      </nav>
      
      <!-- 工具分隔线 -->
      <div class="divider">
        <span>工具</span>
      </div>
      
      <!-- 工具菜单 -->
      <nav class="tools-menu">
        <div class="nav-item" @click="goToTextToVideo">
          <el-icon><VideoPlay /></el-icon>
          <span>文生视频</span>
        </div>
        <div class="nav-item" @click="goToImageToVideo">
          <el-icon><Picture /></el-icon>
          <span>图生视频</span>
        </div>
        <div class="nav-item" @click="goToStoryboardVideo">
          <el-icon><Film /></el-icon>
          <span>分镜视频</span>
          <el-tag size="small" type="primary" class="sora-tag">Sora2.0</el-tag>
        </div>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 顶部栏 -->
      <header class="top-header">
        <div class="header-right">
          <div class="discount-badge">
            <span class="discount-icon">+ 25</span>
            <span class="discount-text">首购优惠</span>
          </div>
          <div class="notification-bell">
            <el-icon><Bell /></el-icon>
            <span class="notification-badge">5</span>
          </div>
          <div class="user-avatar">
            <el-icon><User /></el-icon>
          </div>
          <div class="settings-icon">
            <el-icon><Setting /></el-icon>
          </div>
        </div>
      </header>

      <!-- 内容区域 -->
      <div class="content-area">
        <div class="toolbar">
      <el-radio-group v-model="activeTab" size="small" class="seg-control">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="video">视频</el-radio-button>
        <el-radio-button label="image">图片</el-radio-button>
      </el-radio-group>
    </div>

        <div class="filters-bar">
          <div class="filters-left">
            <el-select v-model="dateFilter" placeholder="日期" size="small" style="width: 100px">
              <el-option label="今天" value="today" />
              <el-option label="本周" value="week" />
              <el-option label="本月" value="month" />
            </el-select>
            <el-select v-model="category" placeholder="任务类型" size="small" style="width: 100px" @change="onFilterChange">
              <el-option label="全部" value="all" />
              <el-option label="文生视频" value="text2video" />
              <el-option label="图生视频" value="image2video" />
              <el-option label="分镜视频" value="storyboard" />
            </el-select>
            <el-select v-model="resolution" placeholder="清晰度" clearable size="small" style="width: 100px">
              <el-option label="标清" value="sd" />
              <el-option label="高清" value="hd" />
              <el-option label="超清" value="uhd" />
            </el-select>
            <el-select v-model="sortBy" placeholder="比例" size="small" style="width: 100px">
              <el-option label="比例" value="ratio" />
              <el-option label="时间" value="date" />
              <el-option label="热门" value="hot" />
            </el-select>
            <el-button size="small" @click="resetFilters">重置</el-button>
          </div>
          <div class="filters-right">
            <el-input 
              v-model="keyword" 
              placeholder="名字/提示词/ID" 
              size="small" 
              clearable 
              style="width: 220px" 
              @keyup.enter.native="reload"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>

        <div class="select-row">
          <el-checkbox v-model="multiSelect" size="small">选择{{ selectedIds.size || 6 }}个项目</el-checkbox>
          <template v-if="multiSelect && selectedIds.size">
            <el-tag type="success" size="small">已选 {{ selectedIds.size }} 个项目</el-tag>
            <el-button size="small" type="primary" @click="bulkDownload" plain>下载</el-button>
            <el-button size="small" type="danger" @click="bulkDelete" plain>删除</el-button>
          </template>
        </div>

    <el-row :gutter="16" class="works-grid">
      <el-col v-for="item in filteredItems" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
        <el-card class="work-card" :class="{ selected: selectedIds.has(item.id) }" shadow="hover">
          <div class="thumb" @click="multiSelect ? toggleSelect(item.id) : openDetail(item)">
            <img :src="item.cover" :alt="item.title" />
            
            <div class="checker" v-if="multiSelect">
              <el-checkbox :model-value="selectedIds.has(item.id)" @change="() => toggleSelect(item.id)" />
            </div>
            <div class="actions" @click.stop>
              <el-tooltip content="收藏" placement="top"><el-button circle size="small" text><el-icon><Star /></el-icon></el-button></el-tooltip>
              <el-dropdown @command="(cmd)=>moreCommand(cmd,item)">
                <el-button circle size="small" text><el-icon><MoreFilled /></el-icon></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="download_with_watermark">带水印下载</el-dropdown-item>
                    <el-dropdown-item command="download_without_watermark">
                      不带水印下载
                      <el-tag type="primary" size="small" style="margin-left: 8px;">会员</el-tag>
                    </el-dropdown-item>
                    <el-dropdown-item command="rename" divided>重命名</el-dropdown-item>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <!-- 鼠标悬停时显示的做同款按钮 -->
            <div class="hover-create-btn" @click.stop="createSimilar(item)">
              <el-button type="primary" size="small" round>
                <el-icon><VideoPlay /></el-icon>
                做同款
              </el-button>
            </div>
          </div>
          <div class="meta">
            <div class="title" :title="item.title">{{ item.title }}</div>
            <div class="sub">{{ item.id }} · {{ item.sizeText }}</div>
          </div>
          <template #footer>
            <el-space size="small">
              <el-button text size="small" @click.stop="download(item)">下载</el-button>
              <el-button text size="small" @click.stop="share(item)">分享</el-button>
            </el-space>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <!-- 作品详情模态框 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="selectedItem?.title"
      width="60%"
      :before-close="handleClose"
      class="detail-dialog"
      :modal="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
    >
      <div class="detail-content" v-if="selectedItem">
        <div class="detail-left">
          <div class="video-container">
            <video 
              v-if="selectedItem.type === 'video'"
              class="detail-video"
              :src="selectedItem.cover"
              :poster="selectedItem.cover"
              controls
            >
              您的浏览器不支持视频播放
            </video>
            <img 
              v-else
              class="detail-image"
              :src="selectedItem.cover" 
              :alt="selectedItem.title"
            />
            
            <!-- 视频文字叠加 -->
            <div class="video-overlay" v-if="selectedItem.type === 'video' && selectedItem.overlayText">
              <div class="overlay-text">{{ selectedItem.overlayText }}</div>
            </div>
          </div>
        </div>
        
        <div class="detail-right">
          <!-- 用户信息头部 -->
          <div class="detail-header">
            <div class="user-info">
              <div class="avatar">
                <el-icon><User /></el-icon>
              </div>
              <div class="username">mingzi_FBx7foZYDS7inL</div>
            </div>
          </div>
          
          <!-- 标签页 -->
          <div class="tabs">
            <div class="tab" :class="{ active: activeDetailTab === 'detail' }" @click="activeDetailTab = 'detail'">作品详情</div>
            <div class="tab" :class="{ active: activeDetailTab === 'category' }" @click="activeDetailTab = 'category'">{{ selectedItem.category }}</div>
          </div>
          
          <!-- 描述区域 -->
          <div class="description-section" v-if="activeDetailTab === 'detail'">
            <h3 class="section-title">描述</h3>
            <p class="description-text">{{ getDescription(selectedItem) }}</p>
          </div>
          
          <!-- 参考图特殊内容 -->
          <div class="reference-content" v-if="activeDetailTab === 'category' && selectedItem.category === '参考图'">
            <div class="input-details-section">
              <h3 class="section-title">输入详情</h3>
              <div class="input-images">
                <div class="input-image-item">
                  <img :src="selectedItem.cover" :alt="selectedItem.title" class="input-thumbnail" />
                </div>
                <div class="input-image-item">
                  <img :src="selectedItem.cover" :alt="selectedItem.title" class="input-thumbnail" />
                </div>
              </div>
            </div>
            
            <div class="description-section">
              <h3 class="section-title">描述</h3>
              <p class="description-text">图1在图2中奔跑视频</p>
            </div>
          </div>
          
          <!-- 其他分类的内容 -->
          <div class="description-section" v-if="activeDetailTab === 'category' && selectedItem.category !== '参考图'">
            <h3 class="section-title">描述</h3>
            <p class="description-text">{{ getDescription(selectedItem) }}</p>
          </div>
          
          <!-- 元数据区域 -->
          <div class="metadata-section">
            <div class="metadata-item">
              <span class="label">创建时间</span>
              <span class="value">{{ selectedItem.createTime }}</span>
            </div>
            <div class="metadata-item">
              <span class="label">作品 ID</span>
              <span class="value">{{ selectedItem.id }}</span>
            </div>
            <div class="metadata-item">
              <span class="label">日期</span>
              <span class="value">{{ selectedItem.date }}</span>
            </div>
            <div class="metadata-item" v-if="selectedItem.type === 'video'">
              <span class="label">时长</span>
              <span class="value">5s</span>
            </div>
            <div class="metadata-item" v-if="selectedItem.type === 'video'">
              <span class="label">清晰度</span>
              <span class="value">1080p</span>
            </div>
            <div class="metadata-item">
              <span class="label">分类</span>
              <span class="value">{{ selectedItem.category }}</span>
            </div>
            <div class="metadata-item" v-if="selectedItem.type === 'video'">
              <span class="label">宽高比</span>
              <span class="value">16:9</span>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-section">
            <button class="create-similar-btn" @click="createSimilar">
              做同款
            </button>
          </div>
        </div>
      </div>
    </el-dialog>

        <div class="finished" v-if="!hasMore && filteredItems.length>0">已加载全部内容</div>
        <el-empty v-if="!loading && filteredItems.length===0" description="没有找到相关内容" />
      </div>
      </main>
    </div>
  
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Star, User, Compass, Document, VideoPlay, Picture, Film, Bell, Setting, Search } from '@element-plus/icons-vue'
import { getMyWorks } from '@/api/userWorks'

const router = useRouter()

const activeTab = ref('all')
const dateRange = ref([])
const dateFilter = ref('')
const category = ref('all')
const resolution = ref('')
const sortBy = ref('date')
const order = ref('desc')
const keyword = ref('')
const multiSelect = ref(false)
const selectedIds = ref(new Set())

// 模态框相关状态
const detailDialogVisible = ref(false)
const selectedItem = ref(null)
const activeDetailTab = ref('detail')

const page = ref(1)
const pageSize =  ref(4)
const loading = ref(false)
const hasMore = ref(true)
const items = ref([])

const loadList = async () => {
  loading.value = true
  try {
    const response = await getMyWorks({
      page: page.value - 1, // 后端使用0-based分页
      size: pageSize.value
    })
    
    if (response.data.success) {
      const data = response.data.data || []
      
      if (page.value === 1) items.value = []
      items.value = items.value.concat(data)
      hasMore.value = data.length === pageSize.value
    } else {
      throw new Error(response.data.message || '获取作品列表失败')
    }
  } catch (error) {
    console.error('加载作品列表失败:', error)
    ElMessage.error('加载作品列表失败')
  } finally {
    loading.value = false
  }
}

// 筛选后的作品列表
const filteredItems = computed(() => {
  let filtered = [...items.value]
  
  // 按类型筛选（全部/视频/图片）
  if (activeTab.value === 'video') {
    filtered = filtered.filter(item => item.type === 'video')
  } else if (activeTab.value === 'image') {
    filtered = filtered.filter(item => item.type === 'image')
  }
  
  // 按分类筛选
  if (category.value !== 'all') {
    const categoryMap = {
      'text2video': '文生视频',
      'image2video': '图生视频', 
      'storyboard': '分镜视频',
      'reference': '参考图'
    }
    const targetCategory = categoryMap[category.value]
    if (targetCategory) {
      filtered = filtered.filter(item => item.category === targetCategory)
    }
  }
  
  // 按关键词筛选
  if (keyword.value) {
    const keywordLower = keyword.value.toLowerCase()
    filtered = filtered.filter(item => 
      item.title.toLowerCase().includes(keywordLower) ||
      item.id.includes(keywordLower)
    )
  }
  
  return filtered
})

const reload = () => {
  page.value = 1
  hasMore.value = true
  loadList()
}

// 筛选变化时的处理
const onFilterChange = () => {
  // 筛选是响应式的，不需要额外处理
  console.log('筛选条件变化:', { category: category.value, activeTab: activeTab.value })
}

const loadMore = () => {
  if (loading.value || !hasMore.value) return
  page.value += 1
  loadList()
}

const openDetail = (item) => {
  selectedItem.value = item
  detailDialogVisible.value = true
}

// 获取作品描述
const getDescription = (item) => {
  if (item.type === 'video') {
    return '影片捕捉了暴风雪中的午夜时分,坐落在积雪覆盖的悬崖顶上的孤立灯塔。相机逐渐放大灯塔的灯光,穿透飞舞的雪花,投射出幽幽的光芒。在白茫茫的环境中,灯塔的黑色轮廓显得格外醒目,呼啸的风声和远处海浪的撞击声增强了孤独的氛围。这一场景展示了灯塔的孤独力量。'
  } else {
    return '这是一张精美的参考图片，展现了独特的艺术风格和创意构思。图片构图优美，色彩搭配和谐，具有很高的艺术价值和参考意义。'
  }
}

// 关闭模态框
const handleClose = () => {
  detailDialogVisible.value = false
  selectedItem.value = null
  activeDetailTab.value = 'detail'
}

// 创建同款
const createSimilar = (item) => {
  if (item) {
    ElMessage.info(`基于作品"${item.title}"创建同款`)
    // 根据作品类型跳转到相应的创建页面
    if (item.type === 'video') {
      router.push('/text-to-video/create')
    } else if (item.type === 'image') {
      router.push('/image-to-video/create')
    } else {
      router.push('/text-to-video/create')
    }
  } else {
    ElMessage.info('跳转到创作页面')
  }
}

const download = (item) => {
  ElMessage.success(`开始下载：${item.title}`)
}

const share = (item) => {
  ElMessageBox.alert('分享链接功能即将上线', '提示')
}

const moreCommand = async (cmd, item) => {
  if (cmd === 'download_with_watermark') {
    ElMessage.success('开始下载带水印版本')
  } else if (cmd === 'download_without_watermark') {
    ElMessage.success('开始下载不带水印版本（会员专享）')
  } else if (cmd === 'rename') {
    ElMessage.info('重命名功能开发中')
  } else if (cmd === 'delete') {
    try {
      await ElMessageBox.confirm('确定删除该作品吗？', '删除确认', {
        type: 'warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
      ElMessage.success('已删除')
    } catch (_) {}
  }
}

const toggleSelect = (id) => {
  const next = new Set(selectedIds.value)
  if (next.has(id)) next.delete(id)
  else next.add(id)
  selectedIds.value = next
}

const bulkDownload = () => {
  ElMessage.success(`开始下载 ${selectedIds.value.size} 个文件`)
}

const bulkDelete = async () => {
  try {
    await ElMessageBox.confirm(`确定删除选中的 ${selectedIds.value.size} 个项目吗？`, '删除确认', {
      type: 'warning',
      confirmButtonText: '删除',
      cancelButtonText: '取消'
    })
    ElMessage.success('已删除选中项目')
    selectedIds.value = new Set()
  } catch (_) {}
}

// 导航方法
const goToProfile = () => {
  console.log('导航到个人主页')
  router.push('/profile')
}

const goToSubscription = () => {
  console.log('导航到会员订阅')
  router.push('/subscription')
}

const goToTextToVideo = () => {
  console.log('导航到文生视频创作')
  router.push('/text-to-video/create')
}

const goToImageToVideo = () => {
  console.log('导航到图生视频创作')
  router.push('/image-to-video/create')
}

const goToStoryboardVideo = () => {
  console.log('导航到分镜视频创作')
  router.push('/storyboard-video/create')
}

// 重置筛选器
const resetFilters = () => {
  dateFilter.value = ''
  category.value = 'all'
  resolution.value = ''
  sortBy.value = 'date'
  keyword.value = ''
  ElMessage.success('筛选器已重置')
}

onMounted(() => {
  loadList()
})
</script>

<style scoped>
.works-page {
  min-height: 100vh;
  background: #0a0a0a;
  color: white;
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 页面特殊效果 */
.works-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 20%, rgba(64, 158, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(103, 194, 58, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(230, 162, 60, 0.05) 0%, transparent 50%);
  animation: profileGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes profileGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

.works-page > * {
  position: relative;
  z-index: 2;
}

/* 左侧导航栏 */
.sidebar {
  width: 280px !important;
  background: #1a1a1a !important;
  padding: 24px 0 !important;
  border-right: 1px solid #1a1a1a !important;
  flex-shrink: 0 !important;
  z-index: 100 !important;
  display: block !important;
  position: relative !important;
}

.logo {
  padding: 0 24px 32px;
  font-size: 20px;
  font-weight: 500;
  color: white;
}

.nav-menu, .tools-menu {
  padding: 0 24px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  background: #2a2a2a;
}

.nav-item.active {
  background: #1e3a8a;
}

.nav-item .el-icon {
  margin-right: 14px;
  font-size: 20px;
}

.nav-item span {
  font-size: 15px;
  flex: 1;
}

.sora-tag {
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 6px;
}

.divider {
  margin: 30px 20px 20px;
  padding: 0 16px;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 0;
}

/* 顶部导航栏 */
.top-header {
  padding: 20px 30px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: flex-end;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.discount-badge {
  display: flex;
  align-items: center;
  background: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.discount-icon {
  background: #1e40af;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 6px;
}

.notification-bell {
  position: relative;
  cursor: pointer;
  color: #9ca3af;
  font-size: 20px;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.user-avatar, .settings-icon {
  cursor: pointer;
  color: #9ca3af;
  font-size: 20px;
}

.user-avatar:hover, .settings-icon:hover, .notification-bell:hover {
  color: white;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 4px;
}
.seg-control { margin-left: 2px; }
:deep(.seg-control .el-radio-button__inner) {
  height: 36px;
  line-height: 36px;
  padding: 0 18px;
  font-size: 14px;
  background-color: #0a0a0a; /* 与页面背景相同 */
  color: #cbd5e1;
  border-color: #2a2a2a;
}
:deep(.seg-control .el-radio-button:first-child .el-radio-button__inner) { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
:deep(.seg-control .el-radio-button:last-child .el-radio-button__inner) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
:deep(.seg-control .el-radio-button.is-active .el-radio-button__inner) {
  background-color: #23262b; /* 比背景略亮，保持可区分 */
  color: #ffffff;
  border-color: #3a3a3a;
}
.filters { margin-left: 10px; }
.filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #333;
  margin-bottom: 16px;
  background: #1a1a1a;
  /* 覆盖 Element Plus 变量，确保与页面背景一致 */
  --el-input-bg-color: #0a0a0a;
  --el-fill-color-blank: #0a0a0a;
  --el-border-color: #2a2a2a;
  --el-text-color-regular: #cbd5e1;
}

.filters-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filters-right {
  display: flex;
  align-items: center;
}
:deep(.filters .el-select .el-input__wrapper),
:deep(.filters .el-date-editor.el-input__wrapper),
:deep(.filters .el-input__wrapper) {
  background-color: #0a0a0a; /* 与页面背景相同 */
  border-color: #2a2a2a;
  box-shadow: none;
}
:deep(.filters .el-input__wrapper.is-focus) { border-color: #3a3a3a; box-shadow: none; }
:deep(.filters .el-input__inner) { color: #cbd5e1; }
:deep(.filters .el-input__suffix) { color: #cbd5e1; }
.select-row { padding: 4px 0 8px; }
.works-grid { margin-top: 12px; }
.work-card { margin-bottom: 14px; }
.thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 6px; cursor: pointer; }
.thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.checker { position: absolute; left: 6px; top: 6px; }
.actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
.thumb:hover .actions { opacity: 1; }

/* 鼠标悬停时显示的做同款按钮 */
.hover-create-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 10;
}

.thumb:hover .hover-create-btn {
  opacity: 1;
  transform: translateY(0);
}

.hover-create-btn .el-button {
  background: rgba(64, 158, 255, 0.9);
  border: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.hover-create-btn .el-button:hover {
  background: rgba(64, 158, 255, 1);
  transform: scale(1.05);
}
.work-card.selected .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #409eff;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.15) inset;
}
.meta { margin-top: 10px; }
.title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { color: #909399; font-size: 12px; margin-top: 4px; }
.finished { text-align: center; color: #909399; margin: 14px 0 4px; font-size: 12px; }

/* 让卡片与页面背景一致 */
:deep(.work-card.el-card) {
  background-color: #0a0a0a;
  border-color: #1f2937;
  color: #e5e7eb;
}
:deep(.work-card .el-card__body) {
  background-color: #0a0a0a;
}
:deep(.work-card .el-card__footer) {
  background-color: #0a0a0a;
  border-top: 1px solid #1f2937;
}

/* 模态框样式 */
:deep(.detail-dialog .el-dialog) {
  background: #0a0a0a !important;
  border-radius: 12px;
  border: 1px solid #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

:deep(.detail-dialog .el-dialog__header) {
  background: #0a0a0a !important;
  border-bottom: 1px solid #333;
  padding: 16px 20px;
}

:deep(.detail-dialog .el-dialog__title) {
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
}

:deep(.detail-dialog .el-dialog__headerbtn) {
  color: #fff !important;
}

:deep(.detail-dialog .el-dialog__body) {
  background: #0a0a0a !important;
  padding: 0 !important;
}

:deep(.detail-dialog .el-overlay) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* 强制覆盖Element Plus默认样式 */
:deep(.el-dialog) {
  background: #0a0a0a !important;
}

:deep(.el-dialog__wrapper) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.detail-content {
  display: flex;
  height: 50vh;
  background: #0a0a0a;
}

.detail-left {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.detail-video, .detail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-overlay {
  position: absolute;
  bottom: 80px;
  left: 20px;
  z-index: 10;
}

.overlay-text {
  font-family: 'Brush Script MT', cursive;
  font-size: 24px;
  color: #8b5cf6;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

.detail-right {
  flex: 1;
  background: #0a0a0a;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  background: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.username {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.tabs {
  display: flex;
  gap: 0;
}

.tab {
  padding: 8px 16px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
  font-size: 14px;
}

.tab.active {
  background: #409eff;
  color: #fff;
}

.tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.description-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.description-text {
  font-size: 14px;
  line-height: 1.6;
  color: #d1d5db;
  margin: 0;
}

/* 参考图特殊内容样式 */
.reference-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-details-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-images {
  display: flex;
  gap: 12px;
}

.input-image-item {
  flex: 1;
}

.input-thumbnail {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #333;
}

.metadata-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metadata-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.label {
  font-size: 14px;
  color: #9ca3af;
}

.value {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.action-section {
  margin-top: auto;
  padding-top: 20px;
}

.create-similar-btn {
  width: 100%;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.create-similar-btn:hover {
  background: #337ecc;
  transform: translateY(-2px);
}

.create-similar-btn:active {
  transform: translateY(0);
}

/* 更强制性的样式覆盖 */
:deep(.detail-dialog) {
  background: #0a0a0a !important;
}

:deep(.detail-dialog .el-dialog__wrapper) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

:deep(.detail-dialog .el-overlay-dialog) {
  background: #0a0a0a !important;
  border: none !important;
  box-shadow: none !important;
}

/* 全局模态框样式覆盖 */
:deep(.el-dialog__wrapper) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
</style>