From 252ba922666555b237afedf91012ee141038a349 Mon Sep 17 00:00:00 2001
From: zhangxiaohua <827885272@qq.com>
Date: Thu, 15 Jan 2026 18:00:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BD=9C=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/router/index.ts                  |   8 +-
 .../contests/components/WorkDetailModal.vue   | 505 ++++++++++++++++++
 .../src/views/contests/results/Detail.vue     |  21 +-
 .../views/contests/reviews/ProgressDetail.vue |  22 +-
 .../src/views/contests/works/WorksDetail.vue  | 373 +++++++------
 frontend/src/views/model/ModelViewer.vue      |  30 +-
 6 files changed, 795 insertions(+), 164 deletions(-)
 create mode 100644 frontend/src/views/contests/components/WorkDetailModal.vue

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3cc7891..93969cc 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -381,13 +381,13 @@ router.beforeEach(async (to, _from, next) => {
             userTenantCode,
             to.path.replace(`/${tenantCodeFromUrl}`, "")
           )
-          next({ path: correctedPath, replace: true })
+          next({ path: correctedPath, query: to.query, replace: true })
           return
         }
         // 如果URL中没有租户编码，添加租户编码
         if (!tenantCodeFromUrl) {
           const correctedPath = buildPathWithTenantCode(userTenantCode, to.path)
-          next({ path: correctedPath, replace: true })
+          next({ path: correctedPath, query: to.query, replace: true })
           return
         }
       }
@@ -493,7 +493,7 @@ router.beforeEach(async (to, _from, next) => {
           userTenantCode,
           to.path.replace(`/${tenantCodeFromUrl}`, "")
         )
-        next({ path: correctedPath, replace: true })
+        next({ path: correctedPath, query: to.query, replace: true })
         return
       }
       // 如果URL中没有租户编码，添加租户编码（排除不需要认证的特殊路由）
@@ -501,7 +501,7 @@ router.beforeEach(async (to, _from, next) => {
       const shouldSkipTenantCode = skipTenantCodePaths.some(p => to.path.startsWith(p))
       if (!tenantCodeFromUrl && !shouldSkipTenantCode) {
         const correctedPath = buildPathWithTenantCode(userTenantCode, to.path)
-        next({ path: correctedPath, replace: true })
+        next({ path: correctedPath, query: to.query, replace: true })
         return
       }
     }
diff --git a/frontend/src/views/contests/components/WorkDetailModal.vue b/frontend/src/views/contests/components/WorkDetailModal.vue
new file mode 100644
index 0000000..c66a545
--- /dev/null
+++ b/frontend/src/views/contests/components/WorkDetailModal.vue
@@ -0,0 +1,505 @@
+<template>
+  <a-drawer
+    v-model:open="visible"
+    :title="drawerTitle"
+    placement="right"
+    width="600px"
+    :footer="null"
+    class="work-detail-drawer"
+  >
+    <a-spin :spinning="loading">
+      <template v-if="workDetail">
+        <!-- 提交时间 -->
+        <div class="submit-time">
+          {{ formatDateTime(workDetail.submitTime) }}
+        </div>
+
+        <!-- 作品介绍 -->
+        <div class="section">
+          <div class="section-title">作品介绍</div>
+          <div class="section-content description">
+            <template v-if="workDetail.description">
+              <div v-html="workDetail.description"></div>
+            </template>
+            <span v-else class="empty-text">暂无介绍</span>
+          </div>
+        </div>
+
+        <!-- 作品详情 - 预览图 -->
+        <div class="section">
+          <div class="section-title">作品详情</div>
+          <div class="preview-container">
+            <div class="preview-image" @mouseenter="showPreviewBtn = true" @mouseleave="showPreviewBtn = false">
+              <img
+                v-if="previewImageUrl"
+                :src="previewImageUrl"
+                alt="作品预览"
+                @error="handleImageError"
+              />
+              <div v-else class="preview-placeholder">
+                <FileImageOutlined />
+                <span>暂无预览图</span>
+              </div>
+              <!-- 3D预览按钮 -->
+              <transition name="fade">
+                <div v-if="showPreviewBtn && hasModelFile" class="preview-btn-overlay" @click="handleView3DModel">
+                  <a-button type="primary">
+                    <template #icon><EyeOutlined /></template>
+                    3D模型预览
+                  </a-button>
+                </div>
+              </transition>
+            </div>
+          </div>
+        </div>
+
+        <!-- 作品附件 -->
+        <div class="section">
+          <div class="section-title">作品附件</div>
+          <div class="attachments-list">
+            <template v-if="workDetail.attachments && workDetail.attachments.length > 0">
+              <div
+                v-for="attachment in workDetail.attachments"
+                :key="attachment.id"
+                class="attachment-item"
+              >
+                <div class="attachment-name">
+                  <span class="label">附件名称：</span>
+                  <span>{{ attachment.fileName?.split('.')[0] || attachment.fileName }}</span>
+                </div>
+                <div class="attachment-file">
+                  <PaperClipOutlined class="file-icon" />
+                  <span class="file-name">{{ attachment.fileName }}</span>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click="handleDownload(attachment)"
+                  >
+                    <template #icon><DownloadOutlined /></template>
+                  </a-button>
+                </div>
+              </div>
+            </template>
+            <a-empty v-else description="暂无附件" :image="false" />
+          </div>
+        </div>
+
+        <!-- 评审记录 -->
+        <div class="section">
+          <div class="section-title">评审记录</div>
+          <div class="review-records">
+            <template v-if="reviewRecords && reviewRecords.length > 0">
+              <a-tabs v-model:activeKey="activeReviewTab">
+                <a-tab-pane
+                  v-for="record in reviewRecords"
+                  :key="record.id"
+                  :tab="record.judge?.nickname || record.judge?.username || '评委'"
+                >
+                  <div class="review-card">
+                    <div class="review-item">
+                      <span class="review-label">作品评分：</span>
+                      <span v-if="record.score !== null && record.score !== undefined" class="review-score">
+                        {{ record.score }} 分
+                      </span>
+                      <span v-else class="not-reviewed">未评审</span>
+                    </div>
+                    <div class="review-item">
+                      <span class="review-label">评委老师：</span>
+                      <span class="review-value">{{ record.judge?.nickname || record.judge?.username || '-' }}</span>
+                    </div>
+                    <div class="review-item">
+                      <span class="review-label">评分时间：</span>
+                      <span class="review-value">
+                        {{ record.scoreTime ? formatDateTime(record.scoreTime) : '-' }}
+                      </span>
+                    </div>
+                    <div v-if="record.comment" class="review-item comment">
+                      <span class="review-label">老师评语：</span>
+                      <span class="review-value">{{ record.comment }}</span>
+                    </div>
+                  </div>
+                </a-tab-pane>
+              </a-tabs>
+            </template>
+            <a-empty v-else description="暂无评审记录" :image="false" />
+          </div>
+        </div>
+      </template>
+      <a-empty v-else-if="!loading" description="暂无数据" />
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { message } from "ant-design-vue"
+import {
+  FileImageOutlined,
+  EyeOutlined,
+  PaperClipOutlined,
+  DownloadOutlined
+} from "@ant-design/icons-vue"
+import dayjs from "dayjs"
+import { worksApi, reviewsApi, type ContestWork } from "@/api/contests"
+
+interface Props {
+  open: boolean
+  workId?: number | null
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  "update:open": [value: boolean]
+}>()
+
+const route = useRoute()
+const router = useRouter()
+
+// 弹框显示状态
+const visible = ref(false)
+const loading = ref(false)
+const workDetail = ref<ContestWork | null>(null)
+const reviewRecords = ref<any[]>([])
+const activeReviewTab = ref<number | string>("")
+const showPreviewBtn = ref(false)
+
+// 抽屉标题
+const drawerTitle = computed(() => {
+  if (workDetail.value) {
+    const workNo = workDetail.value.workNo || ""
+    const title = workDetail.value.title || ""
+    return workNo && title ? `${workNo} ${title}` : workNo || title || "作品详情"
+  }
+  return "作品详情"
+})
+
+// 预览图URL
+const previewImageUrl = computed(() => {
+  if (!workDetail.value) return ""
+  // 优先使用预览图
+  if (workDetail.value.previewUrl) {
+    return workDetail.value.previewUrl
+  }
+  // 其次从 files 数组中查找图片
+  const imageFromFiles = workDetail.value.files?.find(
+    (url) => /\.(jpg|jpeg|png|gif|webp)$/i.test(url)
+  )
+  if (imageFromFiles) return imageFromFiles
+  // 最后从 attachments 中查找
+  const imageAttachment = workDetail.value.attachments?.find(
+    (att) => att.fileType?.startsWith("image/") || /\.(jpg|jpeg|png|gif|webp)$/i.test(att.fileName || "")
+  )
+  return imageAttachment?.fileUrl || ""
+})
+
+// 检查URL或文件名是否是3D模型文件（支持带查询参数的URL）
+const isModelFile = (urlOrFileName: string): boolean => {
+  // 移除查询参数后检查扩展名
+  const pathWithoutQuery = urlOrFileName.split("?")[0]
+  return /\.(glb|gltf|obj|fbx|stl|zip)$/i.test(pathWithoutQuery)
+}
+
+// 是否有3D模型文件
+const hasModelFile = computed(() => {
+  if (!workDetail.value) return false
+  // 检查 files 数组
+  const hasInFiles = workDetail.value.files?.some((url) => isModelFile(url))
+  if (hasInFiles) return true
+  // 检查 attachments 数组
+  const hasInAttachments = workDetail.value.attachments?.some(
+    (att) => isModelFile(att.fileName || "") || isModelFile(att.fileUrl || "")
+  )
+  return hasInAttachments || false
+})
+
+// 获取3D模型文件URL
+const modelFileUrl = computed(() => {
+  if (!workDetail.value) return ""
+  // 优先从 files 数组中查找
+  const modelFromFiles = workDetail.value.files?.find((url) => isModelFile(url))
+  if (modelFromFiles) return modelFromFiles
+  // 其次从 attachments 中查找
+  const modelAtt = workDetail.value.attachments?.find(
+    (att) => isModelFile(att.fileName || "") || isModelFile(att.fileUrl || "")
+  )
+  return modelAtt?.fileUrl || ""
+})
+
+// 格式化日期时间
+const formatDateTime = (dateStr?: string) => {
+  if (!dateStr) return "-"
+  return dayjs(dateStr).format("YYYY.MM.DD  HH:mm")
+}
+
+// 获取作品详情
+const fetchWorkDetail = async (id: number) => {
+  loading.value = true
+  try {
+    const detail = await worksApi.getDetail(id)
+    workDetail.value = detail
+    // 获取评审记录
+    await fetchReviewRecords(id)
+  } catch (error: any) {
+    message.error(error?.response?.data?.message || "获取作品详情失败")
+    workDetail.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取评审记录
+const fetchReviewRecords = async (workId: number) => {
+  try {
+    const records = await reviewsApi.getWorkScores(workId)
+    reviewRecords.value = records || []
+    if (records && records.length > 0) {
+      activeReviewTab.value = records[0].id
+    }
+  } catch (error) {
+    console.error("获取评审记录失败", error)
+    reviewRecords.value = []
+  }
+}
+
+// 处理图片加载错误
+const handleImageError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  target.style.display = "none"
+}
+
+// 跳转3D模型预览
+const handleView3DModel = () => {
+  const tenantCode = route.params.tenantCode as string
+  console.log("3D模型预览 - modelFileUrl:", modelFileUrl.value)
+  console.log("3D模型预览 - files:", workDetail.value?.files)
+  console.log("3D模型预览 - attachments:", workDetail.value?.attachments)
+  if (modelFileUrl.value) {
+    const url = `/${tenantCode}/workbench/model-viewer?url=${encodeURIComponent(modelFileUrl.value)}`
+    console.log("3D模型预览 - 跳转URL:", url)
+    window.open(url, "_blank")
+  } else {
+    message.warning("未找到3D模型文件")
+  }
+}
+
+// 下载附件
+const handleDownload = (attachment: any) => {
+  if (attachment.fileUrl) {
+    window.open(attachment.fileUrl, "_blank")
+  }
+}
+
+// 监听 open 属性变化
+watch(
+  () => props.open,
+  (newVal) => {
+    visible.value = newVal
+    if (newVal && props.workId) {
+      fetchWorkDetail(props.workId)
+    } else if (!newVal) {
+      workDetail.value = null
+      reviewRecords.value = []
+    }
+  }
+)
+
+// 监听 visible 变化同步到父组件
+watch(visible, (newVal) => {
+  emit("update:open", newVal)
+})
+
+// 监听 workId 变化
+watch(
+  () => props.workId,
+  (newVal) => {
+    if (newVal && props.open) {
+      fetchWorkDetail(newVal)
+    }
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.work-detail-drawer {
+  :deep(.ant-drawer-body) {
+    padding: 16px 24px;
+  }
+}
+
+.submit-time {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.section {
+  margin-bottom: 24px;
+
+  .section-title {
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 12px;
+  }
+
+  .section-content {
+    color: #666;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+
+  .description {
+    background: #fafafa;
+    padding: 12px 16px;
+    border-radius: 6px;
+  }
+
+  .empty-text {
+    color: #999;
+  }
+}
+
+.preview-container {
+  .preview-image {
+    position: relative;
+    width: 100%;
+    height: 280px;
+    background: #f5f5f5;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+
+    .preview-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #bbb;
+      font-size: 14px;
+
+      :deep(.anticon) {
+        font-size: 48px;
+        margin-bottom: 12px;
+      }
+    }
+
+    .preview-btn-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+}
+
+.attachments-list {
+  .attachment-item {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .attachment-name {
+      margin-bottom: 8px;
+      font-size: 14px;
+
+      .label {
+        color: #0958d9;
+      }
+    }
+
+    .attachment-file {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background: #fafafa;
+      border-radius: 6px;
+
+      .file-icon {
+        color: #52c41a;
+        margin-right: 8px;
+      }
+
+      .file-name {
+        flex: 1;
+        color: #333;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.review-records {
+  :deep(.ant-tabs-nav) {
+    margin-bottom: 16px;
+  }
+
+  .review-card {
+    background: #fff;
+    border-left: 3px solid #52c41a;
+    padding: 16px;
+    border-radius: 0 8px 8px 0;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+
+    .review-item {
+      margin-bottom: 12px;
+      font-size: 14px;
+      line-height: 1.6;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .review-label {
+        color: #666;
+      }
+
+      .review-value {
+        color: #333;
+      }
+
+      .review-score {
+        color: #0958d9;
+        font-size: 18px;
+        font-weight: 600;
+      }
+
+      .not-reviewed {
+        color: #999;
+      }
+
+      &.comment {
+        .review-value {
+          color: #52c41a;
+        }
+      }
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/src/views/contests/results/Detail.vue b/frontend/src/views/contests/results/Detail.vue
index 01ce5bd..f09842a 100644
--- a/frontend/src/views/contests/results/Detail.vue
+++ b/frontend/src/views/contests/results/Detail.vue
@@ -68,6 +68,9 @@
         <template v-if="column.key === 'index'">
           {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
         </template>
+        <template v-else-if="column.key === 'workNo'">
+          <a @click="handleViewWorkDetail(record)">{{ record.workNo || "-" }}</a>
+        </template>
         <template v-else-if="column.key === 'finalScore'">
           <span v-if="record.finalScore !== null" class="score">
             {{ Number(record.finalScore).toFixed(2) }}
@@ -94,6 +97,12 @@
         </template>
       </template>
     </a-table>
+
+    <!-- 作品详情弹框 -->
+    <WorkDetailModal
+      v-model:open="workDetailModalVisible"
+      :work-id="currentWorkId"
+    />
   </div>
 </template>
 
@@ -107,6 +116,7 @@ import {
   ReloadOutlined,
 } from "@ant-design/icons-vue"
 import { resultsApi } from "@/api/contests"
+import WorkDetailModal from "../components/WorkDetailModal.vue"
 
 const route = useRoute()
 const router = useRouter()
@@ -120,6 +130,10 @@ const contestInfo = ref<{
   resultState: string
 } | null>(null)
 
+// 作品详情弹框
+const workDetailModalVisible = ref(false)
+const currentWorkId = ref<number | null>(null)
+
 // 列表状态
 const loading = ref(false)
 const publishLoading = ref(false)
@@ -145,7 +159,6 @@ const columns = [
   },
   {
     title: "作品编号",
-    dataIndex: "workNo",
     key: "workNo",
     width: 120,
   },
@@ -231,6 +244,12 @@ const handleBack = () => {
   router.push(`/${tenantCode}/contests/results`)
 }
 
+// 查看作品详情
+const handleViewWorkDetail = (record: any) => {
+  currentWorkId.value = record.id
+  workDetailModalVisible.value = true
+}
+
 // 发布/撤回赛果
 const handlePublish = () => {
   const isPublished = contestInfo.value?.resultState === "published"
diff --git a/frontend/src/views/contests/reviews/ProgressDetail.vue b/frontend/src/views/contests/reviews/ProgressDetail.vue
index d11da0b..faad85c 100644
--- a/frontend/src/views/contests/reviews/ProgressDetail.vue
+++ b/frontend/src/views/contests/reviews/ProgressDetail.vue
@@ -83,6 +83,9 @@
         <template v-if="column.key === 'index'">
           {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
         </template>
+        <template v-else-if="column.key === 'workNo'">
+          <a @click="handleViewWorkDetail(record)">{{ record.workNo || "-" }}</a>
+        </template>
         <template v-else-if="column.key === 'username'">
           {{ record.submitterAccountNo || record.registration?.user?.username || "-" }}
         </template>
@@ -214,6 +217,12 @@
       </template>
     </a-drawer>
 
+    <!-- 作品详情弹框 -->
+    <WorkDetailModal
+      v-model:open="workDetailModalVisible"
+      :work-id="currentWorkId"
+    />
+
     <!-- 未提交作品弹框 -->
     <a-modal
       v-model:open="notSubmittedModalVisible"
@@ -259,6 +268,7 @@ import {
 import dayjs from "dayjs"
 import { contestsApi, worksApi, reviewsApi, type ContestWork } from "@/api/contests"
 import { judgesManagementApi, type Judge } from "@/api/judges-management"
+import WorkDetailModal from "../components/WorkDetailModal.vue"
 
 const route = useRoute()
 const router = useRouter()
@@ -268,6 +278,10 @@ const contestType = (route.query.type as string) || "individual"
 // 赛事名称
 const contestName = ref("")
 
+// 作品详情弹框
+const workDetailModalVisible = ref(false)
+const currentWorkId = ref<number | null>(null)
+
 // 列表状态
 const loading = ref(false)
 const dataSource = ref<ContestWork[]>([])
@@ -287,7 +301,7 @@ const searchParams = reactive({
 // 表格列定义
 const columns = [
   { title: "序号", key: "index", width: 70 },
-  { title: "作品编号", dataIndex: "workNo", key: "workNo", width: 120 },
+  { title: "作品编号", key: "workNo", width: 120 },
   { title: "报名账号", key: "username", width: 150 },
   { title: "评委评分", key: "judgeScore", width: 100 },
   { title: "评审进度", key: "reviewProgress", width: 100 },
@@ -461,6 +475,12 @@ const handleBack = () => {
   router.back()
 }
 
+// 查看作品详情
+const handleViewWorkDetail = (record: ContestWork) => {
+  currentWorkId.value = record.id
+  workDetailModalVisible.value = true
+}
+
 // 开始评审
 const handleStartReview = async () => {
   try {
diff --git a/frontend/src/views/contests/works/WorksDetail.vue b/frontend/src/views/contests/works/WorksDetail.vue
index b1581ac..a474b80 100644
--- a/frontend/src/views/contests/works/WorksDetail.vue
+++ b/frontend/src/views/contests/works/WorksDetail.vue
@@ -21,11 +21,18 @@
     </a-card>
 
     <!-- 搜索表单 -->
-    <a-form :model="searchParams" layout="inline" class="search-form" @finish="handleSearch">
+    <a-form
+      :model="searchParams"
+      layout="inline"
+      class="search-form"
+      @finish="handleSearch"
+    >
       <a-form-item :label="contestType === 'team' ? '队伍名称' : '选手名称'">
         <a-input
           v-model:value="searchParams.name"
-          :placeholder="contestType === 'team' ? '请输入队伍名称' : '请输入选手名称'"
+          :placeholder="
+            contestType === 'team' ? '请输入队伍名称' : '请输入选手名称'
+          "
           allow-clear
           style="width: 150px"
         />
@@ -108,31 +115,44 @@
           {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
         </template>
         <template v-else-if="column.key === 'workNo'">
-          <a @click="handleViewWork(record)">{{ record.workNo || '-' }}</a>
+          <a @click="handleViewWork(record)">{{ record.workNo || "-" }}</a>
         </template>
         <template v-else-if="column.key === 'username'">
-          {{ record.submitterAccountNo || record.registration?.user?.username || '-' }}
+          {{
+            record.submitterAccountNo ||
+            record.registration?.user?.username ||
+            "-"
+          }}
         </template>
         <template v-else-if="column.key === 'name'">
           <template v-if="contestType === 'team'">
-            {{ record.registration?.team?.teamName || '-' }}
+            {{ record.registration?.team?.teamName || "-" }}
           </template>
           <template v-else>
-            {{ record.registration?.user?.nickname || '-' }}
+            {{ record.registration?.user?.nickname || "-" }}
           </template>
         </template>
         <template v-else-if="column.key === 'submitTime'">
           {{ formatDate(record.submitTime) }}
         </template>
         <template v-else-if="column.key === 'assignStatus'">
-          <a-tag v-if="record._count?.assignments > 0" color="success">已分配</a-tag>
+          <a-tag v-if="record._count?.assignments > 0" color="success"
+            >已分配</a-tag
+          >
           <a-tag v-else color="default">未分配</a-tag>
         </template>
         <template v-else-if="column.key === 'judges'">
           <template v-if="record.assignments && record.assignments.length > 0">
             <a-space wrap>
-              <a-tag v-for="assignment in record.assignments" :key="assignment.id">
-                {{ assignment.judge?.nickname || assignment.judge?.username || '-' }}
+              <a-tag
+                v-for="assignment in record.assignments"
+                :key="assignment.id"
+              >
+                {{
+                  assignment.judge?.nickname ||
+                  assignment.judge?.username ||
+                  "-"
+                }}
               </a-tag>
             </a-space>
           </template>
@@ -147,122 +167,141 @@
     </a-table>
 
     <!-- 作品详情弹框 -->
-    <a-modal
+    <WorkDetailModal
       v-model:open="workModalVisible"
-      title="作品详情"
-      width="700px"
-      :footer="null"
-    >
-      <template v-if="currentWork">
-        <a-descriptions :column="2" bordered>
-          <a-descriptions-item label="作品编号" :span="2">
-            {{ currentWork.workNo || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="作品标题" :span="2">
-            {{ currentWork.title }}
-          </a-descriptions-item>
-          <a-descriptions-item label="所属比赛" :span="2">
-            {{ currentWork.contest?.contestName || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="提交人">
-            {{ currentWork.registration?.user?.nickname || currentWork.submitterAccountNo || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="报名账号">
-            {{ currentWork.registration?.user?.username || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="提交时间" :span="2">
-            {{ formatDate(currentWork.submitTime) }}
-          </a-descriptions-item>
-          <a-descriptions-item v-if="currentWork.description" label="作品描述" :span="2">
-            <div v-html="currentWork.description"></div>
-          </a-descriptions-item>
-          <a-descriptions-item v-if="currentWork.previewUrl" label="预览链接" :span="2">
-            <a :href="currentWork.previewUrl" target="_blank">{{ currentWork.previewUrl }}</a>
-          </a-descriptions-item>
-        </a-descriptions>
+      :work-id="currentWorkId"
+    />
 
-        <!-- 附件列表 -->
-        <a-divider orientation="left">附件列表</a-divider>
-        <a-table
-          :columns="attachmentColumns"
-          :data-source="currentWork.attachments || []"
-          :pagination="false"
-          size="small"
-          row-key="id"
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'fileName'">
-              <a :href="record.fileUrl" target="_blank">
-                <FileOutlined /> {{ record.fileName }}
-              </a>
-            </template>
-            <template v-else-if="column.key === 'size'">
-              {{ formatFileSize(record.size) }}
-            </template>
-          </template>
-        </a-table>
-      </template>
-    </a-modal>
-
-    <!-- 分配评委弹框 -->
-    <a-modal
+    <!-- 分配评委抽屉 -->
+    <a-drawer
       v-model:open="assignModalVisible"
       title="分配评委"
+      placement="right"
       width="800px"
-      :confirm-loading="assignLoading"
-      @ok="handleConfirmAssign"
+      :footer-style="{ textAlign: 'right' }"
+      @close="handleAssignDrawerClose"
     >
-      <!-- 搜索 -->
-      <a-form layout="inline" class="mb-3">
-        <a-form-item label="评委姓名">
-          <a-input
-            v-model:value="judgeSearchParams.nickname"
-            placeholder="请输入姓名"
-            allow-clear
-            style="width: 150px"
-          />
-        </a-form-item>
-        <a-form-item label="机构">
-          <a-input
-            v-model:value="judgeSearchParams.tenantName"
-            placeholder="请输入机构"
-            allow-clear
-            style="width: 150px"
-          />
-        </a-form-item>
-        <a-form-item>
-          <a-button type="primary" @click="handleSearchJudges">搜索</a-button>
-          <a-button class="ml-2" @click="handleResetJudgeSearch">重置</a-button>
-        </a-form-item>
-      </a-form>
+      <div class="assign-judge-drawer">
+        <!-- 搜索区域 -->
+        <a-card class="mb-4" size="small">
+          <a-form layout="inline" :model="judgeSearchParams" @finish="handleSearchJudges">
+            <a-form-item label="姓名">
+              <a-input
+                v-model:value="judgeSearchParams.nickname"
+                placeholder="请输入姓名"
+                allow-clear
+                style="width: 150px"
+                @press-enter="handleSearchJudges"
+              />
+            </a-form-item>
+            <a-form-item label="所属单位">
+              <a-input
+                v-model:value="judgeSearchParams.tenantName"
+                placeholder="请输入所属单位"
+                allow-clear
+                style="width: 200px"
+                @press-enter="handleSearchJudges"
+              />
+            </a-form-item>
+            <a-form-item>
+              <a-button type="primary" html-type="submit">
+                <template #icon><SearchOutlined /></template>
+                搜索
+              </a-button>
+              <a-button style="margin-left: 8px" @click="handleResetJudgeSearch">
+                <template #icon><ReloadOutlined /></template>
+                重置
+              </a-button>
+            </a-form-item>
+          </a-form>
+        </a-card>
 
-      <!-- 评委列表 -->
-      <a-table
-        :columns="judgeColumns"
-        :data-source="judgeList"
-        :loading="judgeListLoading"
-        :pagination="judgePagination"
-        :row-selection="judgeRowSelection"
-        row-key="id"
-        size="small"
-        @change="handleJudgeTableChange"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'judgeName'">
-            {{ record.judge?.nickname || record.judge?.username || '-' }}
+        <!-- 全部评委列表 -->
+        <a-card class="mb-4" size="small">
+          <template #title>全部评委</template>
+          <a-table
+            :columns="judgeColumns"
+            :data-source="judgeList"
+            :loading="judgeListLoading"
+            :pagination="judgePagination"
+            :row-selection="{
+              selectedRowKeys: selectedJudgeKeys,
+              onChange: handleJudgeSelectionChange,
+            }"
+            row-key="id"
+            size="small"
+            @change="handleJudgeTableChange"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'judgeName'">
+                {{ record.judge?.nickname || record.judge?.username || "-" }}
+              </template>
+              <template v-else-if="column.key === 'phone'">
+                {{ record.judge?.phone || "-" }}
+              </template>
+              <template v-else-if="column.key === 'tenant'">
+                {{ record.judge?.organization || record.judge?.tenant?.name || "-" }}
+              </template>
+              <template v-else-if="column.key === 'assignedCount'">
+                {{ record._count?.assignedContestWorks || 0 }}
+              </template>
+            </template>
+          </a-table>
+        </a-card>
+
+        <!-- 已选评委区域 -->
+        <a-card size="small">
+          <template #title>
+            已选 {{ selectedJudgeRows.length }} 位评委
           </template>
-          <template v-else-if="column.key === 'phone'">
-            {{ record.judge?.phone || '-' }}
-          </template>
-          <template v-else-if="column.key === 'tenant'">
-            {{ record.judge?.tenant?.name || '-' }}
-          </template>
-          <template v-else-if="column.key === 'assignedCount'">
-            {{ record._count?.assignedContestWorks || 0 }}
-          </template>
-        </template>
-      </a-table>
-    </a-modal>
+          <a-list
+            :data-source="selectedJudgeRows"
+            size="small"
+          >
+            <template #renderItem="{ item }">
+              <a-list-item>
+                <a-list-item-meta>
+                  <template #title>
+                    {{ item.judge?.nickname || item.judge?.username || "-" }}
+                  </template>
+                  <template #description>
+                    {{ item.judge?.organization || item.judge?.tenant?.name || "-" }}
+                  </template>
+                </a-list-item-meta>
+                <template #actions>
+                  <a-button
+                    type="link"
+                    danger
+                    size="small"
+                    @click="handleRemoveSelectedJudge(item.id)"
+                  >
+                    移除
+                  </a-button>
+                </template>
+              </a-list-item>
+            </template>
+            <template #empty>
+              <a-empty description="暂未选择评委" :image="false" />
+            </template>
+          </a-list>
+        </a-card>
+
+        <!-- 底部操作按钮 -->
+        <div class="drawer-footer">
+          <a-space>
+            <a-button @click="handleAssignDrawerClose">取消</a-button>
+            <a-button
+              type="primary"
+              :loading="assignLoading"
+              :disabled="selectedJudgeRows.length === 0"
+              @click="handleConfirmAssign"
+            >
+              确定
+            </a-button>
+          </a-space>
+        </div>
+      </div>
+    </a-drawer>
   </div>
 </template>
 
@@ -276,7 +315,6 @@ import {
   ArrowLeftOutlined,
   SearchOutlined,
   ReloadOutlined,
-  FileOutlined,
 } from "@ant-design/icons-vue"
 import dayjs from "dayjs"
 import {
@@ -287,6 +325,7 @@ import {
   type ContestWork,
   type ContestJudge,
 } from "@/api/contests"
+import WorkDetailModal from "../components/WorkDetailModal.vue"
 
 interface Tenant {
   id: number
@@ -344,7 +383,7 @@ const columns = computed(() => [
   {
     title: contestType === "team" ? "队伍名称" : "选手姓名",
     key: "name",
-    width: 150
+    width: 150,
   },
   { title: "递交时间", key: "submitTime", width: 160 },
   { title: "分配状态", key: "assignStatus", width: 100 },
@@ -352,16 +391,9 @@ const columns = computed(() => [
   { title: "操作", key: "action", width: 100, fixed: "right" as const },
 ])
 
-// 附件表格列
-const attachmentColumns = [
-  { title: "文件名", key: "fileName", dataIndex: "fileName", width: 300 },
-  { title: "类型", key: "fileType", dataIndex: "fileType", width: 100 },
-  { title: "大小", key: "size", dataIndex: "size", width: 100 },
-]
-
 // 作品详情弹框
 const workModalVisible = ref(false)
-const currentWork = ref<ContestWork | null>(null)
+const currentWorkId = ref<number | null>(null)
 
 // 分配评委弹框
 const assignModalVisible = ref(false)
@@ -384,14 +416,40 @@ const judgeSearchParams = reactive({
 const selectedJudgeKeys = ref<number[]>([])
 const selectedJudgeRows = ref<ContestJudge[]>([])
 
-// 评委行选择配置
-const judgeRowSelection = computed<TableProps["rowSelection"]>(() => ({
-  selectedRowKeys: selectedJudgeKeys.value,
-  onChange: (keys: any, rows: ContestJudge[]) => {
-    selectedJudgeKeys.value = keys
-    selectedJudgeRows.value = rows
-  },
-}))
+// 评委选择变化
+const handleJudgeSelectionChange = (selectedKeys: number[]) => {
+  // 找出新增的评委
+  const newSelectedIds = selectedKeys.filter(
+    (id) => !selectedJudgeKeys.value.includes(id)
+  )
+  // 找出移除的评委
+  const removedIds = selectedJudgeKeys.value.filter(
+    (id) => !selectedKeys.includes(id)
+  )
+
+  // 更新已选评委ID列表
+  selectedJudgeKeys.value = selectedKeys
+
+  // 更新已选评委详情列表
+  // 先移除被取消选择的
+  selectedJudgeRows.value = selectedJudgeRows.value.filter(
+    (judge) => !removedIds.includes(judge.id)
+  )
+
+  // 再添加新选择的（从当前页的评委列表中查找）
+  const newSelectedJudges = judgeList.value.filter((judge) =>
+    newSelectedIds.includes(judge.id)
+  )
+  selectedJudgeRows.value = [...selectedJudgeRows.value, ...newSelectedJudges]
+}
+
+// 移除已选评委
+const handleRemoveSelectedJudge = (judgeId: number) => {
+  selectedJudgeKeys.value = selectedJudgeKeys.value.filter((id) => id !== judgeId)
+  selectedJudgeRows.value = selectedJudgeRows.value.filter(
+    (judge) => judge.id !== judgeId
+  )
+}
 
 // 评委表格列
 const judgeColumns = [
@@ -407,16 +465,6 @@ const formatDate = (dateStr?: string) => {
   return dayjs(dateStr).format("YYYY-MM-DD HH:mm")
 }
 
-// 格式化文件大小
-const formatFileSize = (size?: string | number) => {
-  if (!size) return "-"
-  const bytes = typeof size === "string" ? parseInt(size) : size
-  if (isNaN(bytes)) return size
-  if (bytes < 1024) return bytes + " B"
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"
-  return (bytes / (1024 * 1024)).toFixed(1) + " MB"
-}
-
 // 搜索选项过滤
 const filterOption = (input: string, option: any) => {
   return option.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -507,14 +555,9 @@ const handleBack = () => {
 }
 
 // 查看作品详情
-const handleViewWork = async (record: ContestWork) => {
-  try {
-    const detail = await worksApi.getDetail(record.id)
-    currentWork.value = detail
-    workModalVisible.value = true
-  } catch (error: any) {
-    message.error(error?.response?.data?.message || "获取作品详情失败")
-  }
+const handleViewWork = (record: ContestWork) => {
+  currentWorkId.value = record.id
+  workModalVisible.value = true
 }
 
 // 单个分配评委
@@ -540,6 +583,14 @@ const handleBatchAssign = () => {
   fetchJudgeList()
 }
 
+// 关闭分配评委抽屉
+const handleAssignDrawerClose = () => {
+  assignModalVisible.value = false
+  selectedJudgeKeys.value = []
+  selectedJudgeRows.value = []
+  currentAssignWork.value = null
+}
+
 // 搜索评委
 const handleSearchJudges = () => {
   judgePagination.current = 1
@@ -570,7 +621,7 @@ const handleConfirmAssign = async () => {
 
   assignLoading.value = true
   try {
-    const judgeIds = selectedJudgeRows.value.map(j => j.judgeId)
+    const judgeIds = selectedJudgeRows.value.map((j) => j.judgeId)
 
     if (isBatchAssign.value) {
       // 批量分配
@@ -606,7 +657,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .works-detail-page {
   padding: 0;
 }
@@ -629,4 +680,16 @@ onMounted(() => {
 .ml-2 {
   margin-left: 8px;
 }
+
+.assign-judge-drawer {
+  .drawer-footer {
+    position: sticky;
+    bottom: 0;
+    padding: 16px 0;
+    background: #fff;
+    border-top: 1px solid #f0f0f0;
+    margin-top: 16px;
+    text-align: right;
+  }
+}
 </style>
diff --git a/frontend/src/views/model/ModelViewer.vue b/frontend/src/views/model/ModelViewer.vue
index 15b91d6..6a2f173 100644
--- a/frontend/src/views/model/ModelViewer.vue
+++ b/frontend/src/views/model/ModelViewer.vue
@@ -433,13 +433,37 @@ let fillLight: THREE.DirectionalLight | null = null
 let spotLight: THREE.SpotLight | null = null
 let gridHelper: THREE.GridHelper | null = null
 
-// 获取模型 URL
-const modelUrl = ref((route.query.url as string) || "")
+// 获取模型 URL - 支持刷新页面保持状态
+const SESSION_KEY = "model-viewer-url"
+const getModelUrl = (): string => {
+  // 优先从 query 获取
+  const queryUrl = route.query.url as string
+  if (queryUrl) {
+    // 保存到 sessionStorage，以便刷新页面时恢复
+    sessionStorage.setItem(SESSION_KEY, queryUrl)
+    return queryUrl
+  }
+  // 如果 query 没有，尝试从 sessionStorage 恢复
+  const storedUrl = sessionStorage.getItem(SESSION_KEY)
+  if (storedUrl) {
+    return storedUrl
+  }
+  return ""
+}
+const modelUrl = ref(getModelUrl())
 console.log("模型查看器 - URL:", modelUrl.value)
 
 // 返回上一页
 const handleBack = () => {
-  router.back()
+  // 清除 sessionStorage 中的 URL，防止下次从其他入口进入时使用旧的 URL
+  sessionStorage.removeItem(SESSION_KEY)
+  // 检查是否有历史记录可以返回
+  // 如果是从新窗口打开的（无历史），则关闭窗口
+  if (window.history.length <= 1) {
+    window.close()
+  } else {
+    router.back()
+  }
 }
 
 // 重置相机视角