library-picturebook-activity/frontend/src/views/contests/components/ViewWorkDrawer.vue

<template>
  <a-drawer
    v-model:open="visible"
    title="参赛作品"
    placement="right"
    width="850px"
    :footer-style="{ textAlign: 'right', padding: '16px 24px' }"
    @close="handleCancel"
  >
    <template #title>
      <div class="drawer-title">
        <span>参赛作品</span>
      </div>
    </template>

    <a-spin :spinning="loading">
      <div v-if="!work" class="empty-container">
        <a-empty description="暂无作品" />
      </div>

      <div v-else class="work-detail">
        <!-- 作品名称 -->
        <div class="work-section">
          <div class="section-label">作品名称</div>
          <div class="section-content">{{ work.title }}</div>
        </div>

        <!-- 作品介绍 -->
        <div class="work-section">
          <div class="section-label">作品介绍</div>
          <div class="section-content description-text">
            {{ work.description || "暂无介绍" }}
          </div>
        </div>

        <!-- 参赛作品 -->
        <div class="work-section">
          <div class="section-label">参赛作品</div>
          <div class="work-file-container">
            <div v-if="workFile" class="work-image-item">
              <div
                class="image-wrapper"
                @mouseenter="handleImageHover(workFile)"
                @mouseleave="handleImageLeave"
              >
                <img
                  v-if="isImageFile(workFile)"
                  :src="getFileUrl(workFile)"
                  alt="作品图片"
                  class="work-image"
                  @error="handleImageError"
                />
                <div
                  v-else-if="is3DModelFile(workFile)"
                  class="file-placeholder model-file"
                >
                  <FileOutlined class="file-icon" />
                  <span class="file-name">{{ getFileName(workFile) }}</span>
                  <a-button
                    type="primary"
                    size="small"
                    class="preview-btn"
                    @click.stop="handlePreview3DModel(workFile)"
                  >
                    <template #icon><EyeOutlined /></template>
                    预览3D模型
                  </a-button>
                </div>
                <div v-else class="file-placeholder">
                  <FileOutlined class="file-icon" />
                  <span class="file-name">{{ getFileName(workFile) }}</span>
                </div>
              </div>
              <!-- 图片预览遮罩 -->
              <div
                v-if="previewImage && previewImage === workFile"
                class="image-preview-overlay"
                @mouseleave="handleImageLeave"
              >
                <img
                  :src="getFileUrl(workFile)"
                  alt="作品预览"
                  class="preview-image"
                />
              </div>
            </div>
            <div v-else class="no-files">暂无作品文件</div>
          </div>
        </div>

        <!-- 作品信息 -->
        <div class="work-section">
          <div class="section-label">作品信息</div>
          <div class="work-info">
            <div class="info-item">
              <span class="info-label">作品编号：</span>
              <span class="info-value">{{ work.workNo || "-" }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">提交时间：</span>
              <span class="info-value">{{
                formatDateTime(work.submitTime)
              }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">作品状态：</span>
              <a-tag :color="getStatusColor(work.status)">
                {{ getStatusText(work.status) }}
              </a-tag>
            </div>
            <div v-if="work.version" class="info-item">
              <span class="info-label">版本号：</span>
              <span class="info-value">v{{ work.version }}</span>
            </div>
          </div>
        </div>

        <!-- 上传的附件 -->
        <div
          v-if="work.attachments && work.attachments.length > 0"
          class="work-section"
        >
          <div class="section-label">上传附件</div>
          <div class="attachments-list">
            <div
              v-for="attachment in work.attachments"
              :key="attachment.id"
              class="attachment-item"
            >
              <div class="attachment-info">
                <FileOutlined class="attachment-icon" />
                <span class="attachment-name">{{ attachment.fileName }}</span>
                <span v-if="attachment.size" class="attachment-size">
                  ({{ formatFileSize(attachment.size) }})
                </span>
              </div>
              <a-button
                type="link"
                size="small"
                @click="handleDownloadAttachment(attachment)"
              >
                <template #icon><DownloadOutlined /></template>
                下载
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-spin>

    <template #footer>
      <a-space>
        <a-button @click="handleCancel">关闭</a-button>
      </a-space>
    </template>

  </a-drawer>
</template>

<script setup lang="ts">
import { ref, watch, computed } from "vue"
import { message } from "ant-design-vue"
import {
  FileOutlined,
  DownloadOutlined,
  EyeOutlined,
} from "@ant-design/icons-vue"
import { worksApi, registrationsApi, type ContestWork } from "@/api/contests"
import { useAuthStore } from "@/stores/auth"
import dayjs from "dayjs"

interface Props {
  open: boolean
  contestId: number
}

interface Emits {
  (e: "update:open", value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const authStore = useAuthStore()
const visible = ref(false)
const loading = ref(false)
const work = ref<ContestWork | null>(null)
const previewImage = ref<string | null>(null)

// 监听抽屉打开状态
watch(
  () => props.open,
  async (newVal) => {
    visible.value = newVal
    if (newVal) {
      await fetchUserWork()
    } else {
      work.value = null
      previewImage.value = null
    }
  },
  { immediate: true }
)

watch(visible, (newVal) => {
  emit("update:open", newVal)
})

// 获取当前用户的作品
const fetchUserWork = async () => {
  loading.value = true
  work.value = null
  try {
    const userId = authStore.user?.id
    if (!userId) {
      message.error("用户未登录，无法查看作品")
      visible.value = false
      return
    }

    // 先获取用户的报名记录
    const registrationResponse = await registrationsApi.getList({
      contestId: props.contestId,
      userId: userId,
      registrationType: "individual",
      registrationState: "passed",
      page: 1,
      pageSize: 10,
    })

    if (registrationResponse.list.length === 0) {
      message.warning("您尚未报名该赛事或报名未通过，无法查看作品")
      visible.value = false
      return
    }

    const registrationId = registrationResponse.list[0].id

    // 获取该报名的所有作品版本，取最新版本
    const works = await worksApi.getVersions(registrationId)
    if (works && works.length > 0) {
      // 找到最新版本的作品
      const latestWork = works.find((w) => w.isLatest) || works[0]
      work.value = latestWork
    } else {
      message.warning("您尚未提交作品")
    }
  } catch (error: any) {
    message.error(error?.response?.data?.message || "获取作品信息失败")
  } finally {
    loading.value = false
  }
}

// 作品文件（只取第一个）
const workFile = computed(() => {
  if (!work.value) return null
  let files = work.value.files || []

  // 如果 files 是字符串（JSON），需要解析
  if (typeof files === 'string') {
    try {
      files = JSON.parse(files)
    } catch {
      return null
    }
  }

  if (!Array.isArray(files) || files.length === 0) return null

  // 处理可能是对象 {fileUrl: string} 或字符串的情况
  const firstFile = files[0]
  return typeof firstFile === 'object' && firstFile?.fileUrl
    ? firstFile.fileUrl
    : firstFile
})

// 判断是否为图片文件
const isImageFile = (fileUrl: string): boolean => {
  const imageExtensions = [
    ".jpg",
    ".jpeg",
    ".png",
    ".gif",
    ".bmp",
    ".webp",
    ".svg",
  ]
  const lowerUrl = fileUrl.toLowerCase()
  return imageExtensions.some((ext) => lowerUrl.includes(ext))
}

// 判断是否为3D模型文件
const is3DModelFile = (fileUrl: string): boolean => {
  const modelExtensions = [
    ".glb",
    ".gltf",
    ".obj",
    ".fbx",
    ".3ds",
    ".dae",
    ".stl",
    ".ply",
  ]
  const lowerUrl = fileUrl.toLowerCase()
  return modelExtensions.some((ext) => lowerUrl.includes(ext))
}

// 获取文件URL（处理相对路径）
const getFileUrl = (fileUrl: string): string => {
  if (!fileUrl) return ""
  // 如果已经是完整URL，直接返回
  if (fileUrl.startsWith("http://") || fileUrl.startsWith("https://")) {
    return fileUrl
  }
  // 如果是相对路径，拼接API基础URL
  const baseURL = import.meta.env.VITE_API_BASE_URL || ""
  // 如果 fileUrl 已经以 /api 开头，且 baseURL 也包含 /api，需要避免重复
  if (fileUrl.startsWith("/api") && baseURL.includes("/api")) {
    // fileUrl 已经包含 /api，直接拼接 baseURL 的协议和域名部分
    const urlWithoutApi = baseURL.replace(/\/api$/, "")
    return `${urlWithoutApi}${fileUrl}`
  }
  // 正常拼接
  return `${baseURL}${fileUrl.startsWith("/") ? "" : "/"}${fileUrl}`
}

// 获取文件名
const getFileName = (fileUrl: string): string => {
  if (!fileUrl) return "文件"

  try {
    // 移除查询参数和锚点
    const urlWithoutQuery = fileUrl.split("?")[0].split("#")[0]

    // 提取文件名
    const parts = urlWithoutQuery.split("/")
    let fileName = parts[parts.length - 1] || "文件"

    // 如果文件名是空的或者是特殊字符，返回默认值
    if (!fileName || fileName.trim() === "" || fileName === "[") {
      return "文件"
    }

    // 解码 URL 编码的文件名
    try {
      fileName = decodeURIComponent(fileName)
    } catch {
      // 如果解码失败，使用原始文件名
    }

    // 如果文件名太长，截断并添加省略号
    const maxLength = 20
    if (fileName.length > maxLength) {
      const ext = fileName.substring(fileName.lastIndexOf("."))
      const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf("."))
      if (nameWithoutExt.length > maxLength - ext.length - 3) {
        return (
          nameWithoutExt.substring(0, maxLength - ext.length - 3) + "..." + ext
        )
      }
    }

    return fileName
  } catch (error) {
    console.error("获取文件名失败:", error)
    return "文件"
  }
}

// 图片鼠标移入
const handleImageHover = (file: string) => {
  if (isImageFile(file)) {
    previewImage.value = file
  }
}

// 图片鼠标移出
const handleImageLeave = () => {
  previewImage.value = null
}

// 图片加载错误
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.style.display = "none"
}

// 下载附件
const handleDownloadAttachment = async (attachment: any) => {
  try {
    const fileUrl = getFileUrl(attachment.fileUrl)
    // 创建临时链接下载
    const link = document.createElement("a")
    link.href = fileUrl
    link.download = attachment.fileName
    link.target = "_blank"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    message.success("开始下载附件")
  } catch (error: any) {
    message.error("下载附件失败")
  }
}

// 格式化日期时间
const formatDateTime = (dateStr?: string) => {
  if (!dateStr) return "-"
  return dayjs(dateStr).format("YYYY-MM-DD HH:mm:ss")
}

// 格式化文件大小
const formatFileSize = (size: string | number): string => {
  if (!size) return "-"
  const numSize = typeof size === "string" ? parseFloat(size) : size
  if (numSize < 1024) {
    return `${numSize} B`
  } else if (numSize < 1024 * 1024) {
    return `${(numSize / 1024).toFixed(2)} KB`
  } else if (numSize < 1024 * 1024 * 1024) {
    return `${(numSize / (1024 * 1024)).toFixed(2)} MB`
  } else {
    return `${(numSize / (1024 * 1024 * 1024)).toFixed(2)} GB`
  }
}

// 获取状态颜色
const getStatusColor = (
  status?: "submitted" | "locked" | "reviewing" | "rejected" | "accepted"
): string => {
  const colorMap: Record<string, string> = {
    submitted: "blue",
    locked: "default",
    reviewing: "processing",
    rejected: "error",
    accepted: "success",
  }
  return colorMap[status || "submitted"] || "default"
}

// 获取状态文本
const getStatusText = (
  status?: "submitted" | "locked" | "reviewing" | "rejected" | "accepted"
): string => {
  const textMap: Record<string, string> = {
    submitted: "已提交",
    locked: "已锁定",
    reviewing: "评审中",
    rejected: "已拒绝",
    accepted: "已通过",
  }
  return textMap[status || "submitted"] || "未知"
}

// 预览3D模型
const handlePreview3DModel = (fileUrl: string) => {
  console.log("handlePreview3DModel called with:", fileUrl)
  if (!fileUrl) {
    message.error("文件路径无效")
    return
  }
  const fullUrl = getFileUrl(fileUrl)
  console.log("预览3D模型，原始URL:", fileUrl, "完整URL:", fullUrl)
  // 直接在新标签页打开模型查看器
  const viewerUrl = `/model-viewer?url=${encodeURIComponent(fullUrl)}`
  window.open(viewerUrl, "_blank")
}

// 取消
const handleCancel = () => {
  visible.value = false
}
</script>

<style scoped lang="scss">
.drawer-title {
  font-size: 16px;
  font-weight: 500;
}

.empty-container {
  padding: 40px 0;
  text-align: center;
}

.work-detail {
  padding: 0;
}

.work-section {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 12px;
}

.section-content {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.6;
}

.description-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.work-file-container {
  display: flex;
  justify-content: flex-start;
}

.work-image-item {
  position: relative;
  width: 400px;
  height: 400px;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background: #fafafa;

  &:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

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

.file-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: rgba(0, 0, 0, 0.45);
  position: relative;

  &.model-file {
    padding-bottom: 60px;
  }
}

.file-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.file-name {
  font-size: 12px;
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 8px;
  max-width: 100%;
  padding: 0 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
}

.preview-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.no-files {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  padding: 20px 0;
}

.work-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.info-label {
  color: rgba(0, 0, 0, 0.65);
  margin-right: 8px;
  min-width: 80px;
}

.info-value {
  color: rgba(0, 0, 0, 0.85);
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    border-color: #1890ff;
    background: #f0f7ff;
  }
}

.attachment-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.attachment-icon {
  font-size: 16px;
  color: #1890ff;
  margin-right: 8px;
}

.attachment-name {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  margin-right: 8px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
</style>