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

<template>
  <div class="works-page">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <!-- Logo -->
      <div class="logo">
        <img src="/images/backgrounds/logo.svg" alt="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="points">
            <div class="points-icon">
              <el-icon><Star /></el-icon>
            </div>
            <span class="points-number">{{ userStore.availablePoints }}</span>
          </div>
          <LanguageSwitcher />
          <div class="user-avatar">
            <img src="/images/backgrounds/avatar-default.svg" alt="用户头像" />
          </div>
          <div class="settings-icon">
            <el-icon><Setting /></el-icon>
          </div>
        </div>
      </header>

      <!-- 内容区域 -->
      <div class="content-area" @scroll="handleScroll">
        <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" justify="start">
      <el-col v-for="item in filteredItems" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card class="work-card" :class="{ selected: selectedIds.has(item.id) }" shadow="hover">
          <div class="thumb" @click="multiSelect ? toggleSelect(item.id) : openDetail(item)">
            <!-- 如果是视频类型且有视频URL，使用video元素显示首帧 -->
            <video 
              v-if="item.type === 'video' && item.resultUrl" 
              :src="item.resultUrl" 
              class="work-thumbnail-video"
              muted
              preload="metadata"
              @loadedmetadata="onVideoLoaded"
              @error="onVideoError"
            ></video>
            <!-- 如果有封面图（thumbnailUrl），使用图片 -->
            <img 
              v-else-if="item.cover && item.cover !== item.resultUrl" 
              :src="item.cover" 
              :alt="item.title"
              @error="onImageError"
            />
            <!-- 否则使用默认占位符 -->
            <div v-else class="work-placeholder">
              <el-icon><VideoPlay /></el-icon>
            </div>
            
            <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.date || '未知日期' }} · {{ item.id }}
              <span v-if="item.quality" class="quality-badge" :class="`quality-${(item.quality || '').toLowerCase()}`">
                {{ formatQuality(item.quality) }}
              </span>
              · {{ 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.resultUrl || selectedItem.cover"
              :poster="selectedItem.cover"
              controls
            >
              您的浏览器不支持视频播放
            </video>
            <img 
              v-else
              class="detail-image"
              :src="selectedItem.cover" 
              :alt="selectedItem.title"
            />
            
            <!-- 视频文字叠加 已移除（用户要求） -->
          </div>
        </div>
        
        <div class="detail-right">
          <!-- 用户信息头部 -->
          <div class="detail-header">
            <div class="user-info">
              <div class="avatar">
                <img src="/images/backgrounds/avatar-default.svg" alt="用户头像" class="avatar-image" />
              </div>
              <div class="username">{{ (selectedItem && selectedItem.username) || '匿名用户' }}</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">{{ formatDuration(selectedItem.duration) || '未知' }}</span>
            </div>
            <div class="metadata-item" v-if="selectedItem.type === 'video'">
              <span class="label">清晰度</span>
              <span class="value">{{ selectedItem.quality || '未知' }}</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">{{ selectedItem.aspectRatio || '未知' }}</span>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-section">
            <button class="create-similar-btn" @click="createSimilar">
              做同款
            </button>
          </div>
        </div>
      </div>
    </el-dialog>

        <div class="loading-indicator" v-if="loading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>加载中...</span>
        </div>
        <div class="finished" v-if="!hasMore && filteredItems.length>0">
          <span>✓ 已加载全部内容</span>
        </div>
        <el-empty v-if="!loading && filteredItems.length===0" description="没有找到相关内容" />

        <!-- 回到顶部按钮 -->
        <transition name="fade">
          <div v-show="showBackToTop" class="back-to-top" @click="scrollToTop" title="回到顶部">
            <el-icon><ArrowUp /></el-icon>
          </div>
        </transition>
      </div>
      </main>
    </div>
  
</template>

<script setup>
import { ref, onMounted, onActivated, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Star, User, Compass, Document, VideoPlay, Picture, Film, Setting, Search, MoreFilled, Loading, ArrowUp } from '@element-plus/icons-vue'
import { getMyWorks, getWorkDetail } from '@/api/userWorks'
import { getCurrentUser } from '@/api/auth'
import { useUserStore } from '@/stores/user'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'

const router = useRouter()
const userStore = useUserStore()

// 用户信息
const userInfo = ref({
  username: '',
  nickname: '',
  bio: '',
  avatar: '',
  id: '',
  points: 0,
  frozenPoints: 0
})

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(20)
const loading = ref(false)
const hasMore = ref(true)
const items = ref([])
const showBackToTop = ref(false) // 回到顶部按钮显示状态

// 处理URL，确保相对路径正确
const processUrl = (url) => {
  if (!url) return null
  // 如果已经是完整URL（http/https），直接返回
  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url
  }
  // 如果是相对路径（以/开头），确保以/开头
  if (url.startsWith('/')) {
    return url
  }
  // 否则添加/前缀
  return '/' + url
}

// 将后端返回的UserWork数据转换为前端需要的格式
const transformWorkData = (work) => {
  const resultUrl = processUrl(work.resultUrl)
  const thumbnailUrl = processUrl(work.thumbnailUrl)

  return {
    id: work.id?.toString() || work.taskId || '',
    title: work.title || work.prompt || '未命名作品',
    cover: thumbnailUrl || resultUrl || '/images/backgrounds/welcome.jpg',
    resultUrl: resultUrl || '',
    type: work.workType === 'TEXT_TO_VIDEO' || work.workType === 'IMAGE_TO_VIDEO' || work.workType === 'STORYBOARD_VIDEO' ? 'video' : 'image',
    category: work.workType === 'TEXT_TO_VIDEO' ? '文生视频' : work.workType === 'IMAGE_TO_VIDEO' ? '图生视频' : work.workType === 'STORYBOARD_VIDEO' ? '分镜视频' : work.workType === 'STORYBOARD_IMAGE' ? '分镜图' : '未知',
    sizeText: work.fileSize || '未知大小',
    createTime: work.createdAt ? new Date(work.createdAt).toLocaleString('zh-CN') : '',
    date: work.createdAt ? new Date(work.createdAt).toLocaleDateString('zh-CN') : '',
    description: work.description || work.prompt || '',
    prompt: work.prompt || '',
    duration: work.duration || work.videoDuration || work.length || '',
    aspectRatio: work.aspectRatio || work.ratio || work.aspect || '',
    quality: work.quality || work.resolution || '',
    username: work.username || work.user?.username || work.creator || work.author || work.owner || '未知用户',
    status: work.status || 'COMPLETED',
  // overlayText 已移除，前端详情不再显示浮动文本
  }
}

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 || []
      
      // 转换数据格式
      const transformedData = data.map(transformWorkData)
      
      if (page.value === 1) items.value = []
      items.value = items.value.concat(transformedData)
      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 (dateFilter.value) {
    const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())

    filtered = filtered.filter(item => {
      if (!item.createdAt && !item.date) return false

      // 获取作品创建日期
      let itemDate
      if (item.createdAt) {
        itemDate = new Date(item.createdAt)
      } else if (item.date) {
        // 如果只有 date 字符串，尝试解析
        itemDate = new Date(item.date)
      }

      if (!itemDate || isNaN(itemDate.getTime())) return false

      // 重置时间为当天开始
      const itemDay = new Date(itemDate.getFullYear(), itemDate.getMonth(), itemDate.getDate())

      if (dateFilter.value === 'today') {
        // 今天：日期相同
        return itemDay.getTime() === today.getTime()
      } else if (dateFilter.value === 'week') {
        // 本周：过去7天内
        const weekAgo = new Date(today)
        weekAgo.setDate(weekAgo.getDate() - 7)
        return itemDay >= weekAgo && itemDay <= today
      } else if (dateFilter.value === 'month') {
        // 本月：过去30天内
        const monthAgo = new Date(today)
        monthAgo.setDate(monthAgo.getDate() - 30)
        return itemDay >= monthAgo && itemDay <= today
      }

      return true
    })
  }

  // 按类型筛选（全部/视频/图片）
  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 (resolution.value) {
    filtered = filtered.filter(item => {
      const itemQuality = (item.quality || '').toLowerCase()
      const filterValue = resolution.value.toLowerCase()

      // 映射关系：sd=标清, hd=高清, uhd=超清
      if (filterValue === 'sd') {
        return itemQuality === 'sd' || itemQuality.includes('标清')
      } else if (filterValue === 'hd') {
        return itemQuality === 'hd' || itemQuality.includes('高清')
      } else if (filterValue === 'uhd') {
        return itemQuality === 'uhd' || itemQuality.includes('超清') || itemQuality.includes('4k')
      }
      return false
    })
  }

  // 按关键词筛选
  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 handleScroll = (event) => {
  const target = event.target
  const scrollTop = target.scrollTop
  const scrollHeight = target.scrollHeight
  const clientHeight = target.clientHeight

  // 控制回到顶部按钮显示（滚动超过300px时显示）
  showBackToTop.value = scrollTop > 300

  // 当滚动到距离底部100px时，自动加载更多
  if (scrollHeight - scrollTop - clientHeight < 100) {
    loadMore()
  }
}

// 滚动到顶部
const scrollToTop = () => {
  const contentArea = document.querySelector('.content-area')
  if (contentArea) {
    contentArea.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }
}

const openDetail = async (item) => {
  // 优先从后端拉取最新的详情数据，降级为传入的 item
  try {
    const resp = await getWorkDetail(item.id)
    const payload = resp?.data?.data || resp?.data || null
    if (payload) {
      selectedItem.value = transformWorkData(payload)
    } else {
      selectedItem.value = item
    }
  } catch (err) {
    console.warn('获取作品详情失败，使用已有数据：', err)
    selectedItem.value = item
  }
  detailDialogVisible.value = true
}

// 获取作品提示词（优先使用 prompt，其次使用后台 description，最后回退默认文案）
const getDescription = (item) => {
  if (!item) return ''
  const desc = (item.prompt && item.prompt.trim()) ? item.prompt : (item.description && item.description.trim() ? item.description : '')
  if (desc) return desc
  // 回退文案
  if (item.type === 'video') {
    return '暂无提示词'
  }
  return '暂无提示词'
}

// 格式化清晰度显示
const formatQuality = (quality) => {
  if (!quality) return ''
  const q = quality.toUpperCase()
  const qualityMap = {
    'SD': '标清',
    'HD': '高清',
    'UHD': '超清',
    '4K': '超清'
  }
  return qualityMap[q] || q
}

// 格式化时长（支持数字秒或字符串），返回类似 "5s" 或原始字符串
const formatDuration = (dur) => {
  if (dur === null || dur === undefined || dur === '') return ''
  if (typeof dur === 'number') return `${dur}s`
  if (typeof dur === 'string') {
    const trimmed = dur.trim()
    if (/^\d+$/.test(trimmed)) return `${trimmed}s`
    return trimmed
  }
  return String(dur)
}

// 关闭模态框
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('筛选器已重置')
}

// 视频加载元数据后，跳转到第一帧（但不播放）
const onVideoLoaded = (event) => {
  const video = event.target
  if (video && video.duration) {
    // 跳转到第一帧（0秒）
    video.currentTime = 0.1
    // 确保视频不播放
    video.pause()
  }
}

// 视频加载失败处理
const onVideoError = (event) => {
  console.warn('视频加载失败:', event.target.src)
  const video = event.target
  // 隐藏video元素，显示占位符
  if (video) {
    video.style.display = 'none'
    // 创建或显示占位符
    const placeholder = video.parentElement.querySelector('.work-placeholder')
    if (!placeholder) {
      const div = document.createElement('div')
      div.className = 'work-placeholder'
      div.innerHTML = '<el-icon><VideoPlay /></el-icon>'
      video.parentElement.appendChild(div)
    } else {
      placeholder.style.display = 'flex'
    }
  }
}

// 图片加载失败处理
const onImageError = (event) => {
  console.warn('图片加载失败:', event.target.src)
  const img = event.target
  // 隐藏图片，显示占位符
  if (img) {
    img.style.display = 'none'
    // 创建或显示占位符
    const placeholder = img.parentElement.querySelector('.work-placeholder')
    if (!placeholder) {
      const div = document.createElement('div')
      div.className = 'work-placeholder'
      div.innerHTML = '<el-icon><VideoPlay /></el-icon>'
      img.parentElement.appendChild(div)
    } else {
      placeholder.style.display = 'flex'
    }
  }
}

// 加载用户信息
const loadUserInfo = async () => {
  try {
    const response = await getCurrentUser()
    console.log('获取用户信息响应:', response)
    if (response && response.data && response.data.success && response.data.data) {
      const user = response.data.data
      console.log('用户数据:', user)
      userInfo.value = {
        username: user.username || '',
        nickname: user.nickname || user.username || '',
        bio: user.bio || '',
        avatar: user.avatar || '',
        id: user.id ? String(user.id) : '',
        points: user.points || 0,
        frozenPoints: user.frozenPoints || 0
      }
      console.log('设置后的用户信息:', userInfo.value)
    } else {
      console.error('获取用户信息失败:', response?.data?.message || '未知错误')
      ElMessage.error('获取用户信息失败')
    }
  } catch (error) {
    console.error('加载用户信息失败:', error)
    ElMessage.error('加载用户信息失败: ' + (error.message || '未知错误'))
  }
}

onMounted(() => {
  loadUserInfo()
  loadList()
})

// 当页面被激活时（从其他页面返回时）刷新列表
onActivated(() => {
  // 重置分页并重新加载
  page.value = 1
  items.value = []
  loadUserInfo()
  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: #000000 !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;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: 40px;
  width: auto;
}

.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 {
  height: 80px;
  padding: 0 30px;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #0a0a0a;
}

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

.points {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(64, 158, 255, 0.3);
}

.points-icon {
  width: 20px;
  height: 20px;
  background: #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.points-number {
  color: #409EFF;
  font-size: 14px;
  font-weight: 600;
}

.user-avatar {
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar:hover {
  transform: scale(1.05);
}

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

.settings-icon:hover {
  color: white;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth; /* 平滑滚动 */
}

/* 自定义滚动条样式 - 更明显美观的滚动条 */
.content-area::-webkit-scrollbar {
  width: 12px;
}

.content-area::-webkit-scrollbar-track {
  background: rgba(26, 26, 26, 0.5);
  border-radius: 6px;
  margin: 4px 0;
}

.content-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 6px;
  transition: all 0.3s ease;
  border: 2px solid rgba(26, 26, 26, 0.5);
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: rgba(26, 26, 26, 0.3);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.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; 
  width: 100%;
}
.thumb { 
  position: relative; 
  width: 100%; 
  padding-top: 100%; 
  overflow: hidden; 
  border-radius: 6px; 
  cursor: pointer; 
  aspect-ratio: 1 / 1;
}
.thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.work-thumbnail-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.work-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 24px;
}
.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;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* 清晰度标签样式 */
.quality-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  margin: 0 2px;
}

.quality-sd {
  background: rgba(103, 194, 58, 0.15);
  color: #67c23a;
  border: 1px solid rgba(103, 194, 58, 0.3);
}

.quality-hd {
  background: rgba(64, 158, 255, 0.15);
  color: #409eff;
  border: 1px solid rgba(64, 158, 255, 0.3);
}

.quality-uhd, .quality-4k {
  background: rgba(230, 162, 60, 0.15);
  color: #e6a23c;
  border: 1px solid rgba(230, 162, 60, 0.3);
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
  margin: 20px 0;
  color: #409EFF;
  font-size: 14px;
}

.loading-indicator .el-icon {
  font-size: 18px;
}

/* 让卡片与页面背景一致 */
: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;
}

/* overlay 样式已移除（不再使用） */

.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;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.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;
}

/* 回到顶部按钮样式 */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
}

.back-to-top:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.back-to-top:active {
  transform: translateY(-2px);
}

.back-to-top .el-icon {
  font-size: 24px;
  color: white;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 优化加载完成提示样式 */
.finished {
  text-align: center;
  color: #409eff;
  margin: 20px 0;
  font-size: 14px;
  padding: 12px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(64, 158, 255, 0.2);
}
</style>