From 38b23e7e77ab1829934ccf7225e395d5382c8509 Mon Sep 17 00:00:00 2001
From: zhangxiaohua <827885272@qq.com>
Date: Wed, 14 Jan 2026 16:14:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contests/components/SubmitWorkDrawer.vue  | 618 +++++++++++++++---
 frontend/src/views/model/ModelViewer.vue      | 155 ++++-
 2 files changed, 674 insertions(+), 99 deletions(-)

diff --git a/frontend/src/views/contests/components/SubmitWorkDrawer.vue b/frontend/src/views/contests/components/SubmitWorkDrawer.vue
index bf9c8eb..b5cb6fb 100644
--- a/frontend/src/views/contests/components/SubmitWorkDrawer.vue
+++ b/frontend/src/views/contests/components/SubmitWorkDrawer.vue
@@ -17,8 +17,8 @@
       ref="formRef"
       :model="form"
       :rules="rules"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 20 }"
       layout="horizontal"
     >
       <a-form-item label="作品名称" name="title" required>
@@ -33,33 +33,129 @@
         <a-textarea
           v-model:value="form.description"
           placeholder="请输入作品介绍"
-          :rows="6"
+          :rows="4"
           :maxlength="2000"
           show-count
         />
       </a-form-item>
 
-      <a-form-item label="上传作品" name="workFile" required>
-        <a-upload
-          v-model:file-list="workFileList"
-          :before-upload="handleBeforeUploadWork"
-          :remove="handleRemoveWork"
-          :accept="workAcceptTypes"
-          :max-count="1"
-        >
-          <a-button>
-            <template #icon><UploadOutlined /></template>
-            选择
-          </a-button>
-          <template #tip>
-            <div class="upload-tip">
-              支持3D文件格式：.obj, .fbx, .3ds, .dae, .blend, .max, .c4d, .stl,
-              .ply, .gltf, .glb
-            </div>
-          </template>
-        </a-upload>
+      <a-form-item label="选择方式" required>
+        <a-radio-group v-model:value="uploadMode" @change="handleModeChange">
+          <a-radio value="history">从创作历史选择</a-radio>
+          <a-radio value="local">本地上传</a-radio>
+        </a-radio-group>
       </a-form-item>
 
+      <!-- 从创作历史选择模式 -->
+      <template v-if="uploadMode === 'history'">
+        <a-form-item label="选择作品" name="selectedWork" required>
+          <div class="work-selection">
+            <!-- 加载状态 -->
+            <div v-if="worksLoading" class="works-loading">
+              <a-spin />
+              <span>加载创作历史...</span>
+            </div>
+
+            <!-- 空状态 -->
+            <div v-else-if="completedWorks.length === 0" class="works-empty">
+              <a-empty description="暂无已完成的3D作品">
+                <template #image>
+                  <FileImageOutlined style="font-size: 48px; color: #d9d9d9" />
+                </template>
+              </a-empty>
+              <a-button type="link" @click="goTo3DLab">
+                前往3D建模实验室创作
+              </a-button>
+            </div>
+
+            <!-- 作品网格 -->
+            <div v-else class="works-grid">
+              <div
+                v-for="work in completedWorks"
+                :key="work.id"
+                class="work-card"
+                :class="{ 'is-selected': form.selectedWorkId === work.id }"
+                @click="handleSelectWork(work)"
+              >
+                <div class="work-preview">
+                  <img
+                    v-if="work.previewUrl"
+                    :src="getPreviewUrl(work.previewUrl)"
+                    alt="预览"
+                    @error="handleImageError"
+                  />
+                  <div v-else class="preview-placeholder">
+                    <FileImageOutlined />
+                  </div>
+                  <div v-if="form.selectedWorkId === work.id" class="selected-badge">
+                    <CheckOutlined />
+                  </div>
+                </div>
+                <div class="work-info">
+                  <div class="work-desc" :title="work.inputContent">
+                    {{ work.inputContent }}
+                  </div>
+                  <div class="work-time">
+                    {{ formatTime(work.createTime) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 分页 -->
+            <div v-if="worksPagination.total > worksPagination.pageSize" class="works-pagination">
+              <a-pagination
+                v-model:current="worksPagination.current"
+                :total="worksPagination.total"
+                :page-size="worksPagination.pageSize"
+                size="small"
+                @change="handleWorksPageChange"
+              />
+            </div>
+          </div>
+        </a-form-item>
+      </template>
+
+      <!-- 本地上传模式 -->
+      <template v-else>
+        <a-form-item label="上传作品" name="localWorkFile" required>
+          <a-upload
+            v-model:file-list="localWorkFileList"
+            :before-upload="handleBeforeUploadWork"
+            :remove="handleRemoveWork"
+            :accept="workAcceptTypes"
+            :max-count="1"
+          >
+            <a-button>
+              <template #icon><UploadOutlined /></template>
+              选择3D文件
+            </a-button>
+          </a-upload>
+          <div class="upload-tip">
+            支持格式：.obj, .fbx, .3ds, .dae, .blend, .stl, .ply, .gltf, .glb，最大500MB
+          </div>
+        </a-form-item>
+
+        <a-form-item label="预览图" name="localPreviewFile" required>
+          <a-upload
+            v-model:file-list="localPreviewFileList"
+            :before-upload="handleBeforeUploadPreview"
+            :remove="handleRemovePreview"
+            accept="image/*"
+            :max-count="1"
+            list-type="picture-card"
+          >
+            <div v-if="localPreviewFileList.length === 0" class="upload-placeholder">
+              <PlusOutlined />
+              <div>上传预览图</div>
+            </div>
+          </a-upload>
+          <div class="upload-tip">
+            请上传作品预览图，支持 JPG、PNG 格式，用于作品展示
+          </div>
+        </a-form-item>
+      </template>
+
       <a-form-item label="上传附件">
         <a-upload
           v-model:file-list="attachmentFileList"
@@ -69,9 +165,17 @@
         >
           <a-button>
             <template #icon><UploadOutlined /></template>
-            上传
+            上传附件
           </a-button>
+          <template #itemRender="{ file, actions }">
+            <div class="attachment-item">
+              <PaperClipOutlined />
+              <span class="file-name">{{ file.name }}</span>
+              <DeleteOutlined class="delete-icon" @click="actions.remove" />
+            </div>
+          </template>
         </a-upload>
+        <div class="upload-tip">可上传补充材料，最多5个文件，单个文件不超过100MB</div>
       </a-form-item>
     </a-form>
 
@@ -79,7 +183,7 @@
       <a-space>
         <a-button @click="handleCancel">取消</a-button>
         <a-button type="primary" :loading="submitLoading" @click="handleSubmit">
-          确定
+          提交作品
         </a-button>
       </a-space>
     </template>
@@ -87,13 +191,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue"
+import { ref, reactive, watch, computed } from "vue"
+import { useRouter, useRoute } from "vue-router"
 import { message } from "ant-design-vue"
-import { UploadOutlined } from "@ant-design/icons-vue"
+import {
+  UploadOutlined,
+  FileImageOutlined,
+  CheckOutlined,
+  PaperClipOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+} from "@ant-design/icons-vue"
 import type { FormInstance, UploadFile } from "ant-design-vue"
 import { worksApi, registrationsApi, type SubmitWorkForm } from "@/api/contests"
+import { getAI3DTasks, type AI3DTask } from "@/api/ai-3d"
 import { useAuthStore } from "@/stores/auth"
 import request from "@/utils/request"
+import dayjs from "dayjs"
 
 interface Props {
   open: boolean
@@ -108,47 +222,102 @@ interface Emits {
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
+const router = useRouter()
+const route = useRoute()
 const authStore = useAuthStore()
 const visible = ref(false)
 const submitLoading = ref(false)
 const formRef = ref<FormInstance>()
 
+// 上传模式
+const uploadMode = ref<"history" | "local">("history")
+
 // 3D文件格式
 const workAcceptTypes =
   ".obj,.fbx,.3ds,.dae,.blend,.max,.c4d,.stl,.ply,.gltf,.glb"
 
+// 表单数据
 const form = reactive<{
   title: string
   description: string
-  workFile: File | null
+  // 历史记录模式
+  selectedWorkId: number | null
+  selectedWork: AI3DTask | null
+  // 本地上传模式
+  localWorkFile: File | null
+  localPreviewFile: File | null
+  // 附件
   attachmentFiles: File[]
 }>({
   title: "",
   description: "",
-  workFile: null,
+  selectedWorkId: null,
+  selectedWork: null,
+  localWorkFile: null,
+  localPreviewFile: null,
   attachmentFiles: [],
 })
 
-const workFileList = ref<UploadFile[]>([])
+// 文件列表
+const localWorkFileList = ref<UploadFile[]>([])
+const localPreviewFileList = ref<UploadFile[]>([])
 const attachmentFileList = ref<UploadFile[]>([])
 
+// 3D作品列表
+const worksLoading = ref(false)
+const worksList = ref<AI3DTask[]>([])
+const worksPagination = reactive({
+  current: 1,
+  pageSize: 8,
+  total: 0,
+})
+
+// 只显示已完成的作品
+const completedWorks = computed(() => {
+  return worksList.value.filter((work) => work.status === "completed")
+})
+
 // 表单验证规则
-const rules = {
+const rules = computed(() => ({
   title: [{ required: true, message: "请输入作品名称", trigger: "blur" }],
   description: [{ required: true, message: "请输入作品介绍", trigger: "blur" }],
-  workFile: [
+  selectedWork: [
     {
-      required: true,
+      required: uploadMode.value === "history",
       validator: () => {
-        if (!form.workFile) {
-          return Promise.reject(new Error("请上传作品文件"))
+        if (uploadMode.value === "history" && !form.selectedWorkId) {
+          return Promise.reject(new Error("请选择一个3D作品"))
         }
         return Promise.resolve()
       },
       trigger: "change",
     },
   ],
-}
+  localWorkFile: [
+    {
+      required: uploadMode.value === "local",
+      validator: () => {
+        if (uploadMode.value === "local" && !form.localWorkFile) {
+          return Promise.reject(new Error("请上传3D文件"))
+        }
+        return Promise.resolve()
+      },
+      trigger: "change",
+    },
+  ],
+  localPreviewFile: [
+    {
+      required: uploadMode.value === "local",
+      validator: () => {
+        if (uploadMode.value === "local" && !form.localPreviewFile) {
+          return Promise.reject(new Error("请上传预览图"))
+        }
+        return Promise.resolve()
+      },
+      trigger: "change",
+    },
+  ],
+}))
 
 watch(
   () => props.open,
@@ -157,6 +326,7 @@ watch(
     if (newVal) {
       resetForm()
       fetchRegistrationId()
+      fetchWorks()
     }
   },
   { immediate: true }
@@ -166,6 +336,20 @@ watch(visible, (newVal) => {
   emit("update:open", newVal)
 })
 
+// 模式切换时清空对应的数据
+const handleModeChange = () => {
+  if (uploadMode.value === "history") {
+    form.localWorkFile = null
+    form.localPreviewFile = null
+    localWorkFileList.value = []
+    localPreviewFileList.value = []
+  } else {
+    form.selectedWorkId = null
+    form.selectedWork = null
+  }
+  formRef.value?.clearValidate()
+}
+
 // 获取报名记录ID
 const registrationIdRef = ref<number | null>(null)
 
@@ -201,60 +385,137 @@ const fetchRegistrationId = async () => {
   }
 }
 
-// 上传作品前验证
+// 获取3D创作历史
+const fetchWorks = async () => {
+  worksLoading.value = true
+  try {
+    const res = await getAI3DTasks({
+      page: worksPagination.current,
+      pageSize: worksPagination.pageSize,
+      status: "completed",
+    })
+    const data = res.data || res
+    worksList.value = data.list || []
+    worksPagination.total = data.total || 0
+  } catch (error) {
+    console.error("获取创作历史失败:", error)
+    message.error("获取创作历史失败")
+  } finally {
+    worksLoading.value = false
+  }
+}
+
+// 分页变化
+const handleWorksPageChange = (page: number) => {
+  worksPagination.current = page
+  fetchWorks()
+}
+
+// 选择作品
+const handleSelectWork = (work: AI3DTask) => {
+  if (form.selectedWorkId === work.id) {
+    form.selectedWorkId = null
+    form.selectedWork = null
+  } else {
+    form.selectedWorkId = work.id
+    form.selectedWork = work
+    if (!form.title && work.inputContent) {
+      form.title = work.inputContent.substring(0, 50)
+    }
+  }
+}
+
+// 获取预览图URL
+const getPreviewUrl = (url: string) => {
+  if (!url) return ""
+  if (url.includes("tencentcos.cn") || url.includes("qcloud.com")) {
+    return `/api/ai-3d/proxy-preview?url=${encodeURIComponent(url)}`
+  }
+  return url
+}
+
+// 图片加载错误处理
+const handleImageError = (e: Event) => {
+  const img = e.target as HTMLImageElement
+  img.style.display = "none"
+}
+
+// 格式化时间
+const formatTime = (time: string) => {
+  return dayjs(time).format("MM-DD HH:mm")
+}
+
+// 跳转到3D实验室
+const goTo3DLab = () => {
+  const tenantCode = route.params.tenantCode as string
+  router.push(`/${tenantCode}/workbench/3d-lab`)
+  visible.value = false
+}
+
+// 上传3D文件前验证
 const handleBeforeUploadWork = (file: File): boolean => {
   const fileName = file.name.toLowerCase()
   const validExtensions = [
-    ".obj",
-    ".fbx",
-    ".3ds",
-    ".dae",
-    ".blend",
-    ".max",
-    ".c4d",
-    ".stl",
-    ".ply",
-    ".gltf",
-    ".glb",
+    ".obj", ".fbx", ".3ds", ".dae", ".blend",
+    ".max", ".c4d", ".stl", ".ply", ".gltf", ".glb",
   ]
 
   const isValid = validExtensions.some((ext) => fileName.endsWith(ext))
-
   if (!isValid) {
-    message.error(
-      "请上传3D文件格式（.obj, .fbx, .3ds, .dae, .blend, .max, .c4d, .stl, .ply, .gltf, .glb）"
-    )
+    message.error("请上传支持的3D文件格式")
     return false
   }
 
-  // 检查文件大小（限制为500MB）
-  const maxSize = 500 * 1024 * 1024 // 500MB
+  const maxSize = 500 * 1024 * 1024
   if (file.size > maxSize) {
     message.error("文件大小不能超过500MB")
     return false
   }
 
-  form.workFile = file
-  return false // 阻止自动上传
+  form.localWorkFile = file
+  return false
 }
 
-// 移除作品文件
+// 移除3D文件
 const handleRemoveWork = () => {
-  form.workFile = null
+  form.localWorkFile = null
+  return true
+}
+
+// 上传预览图前验证
+const handleBeforeUploadPreview = (file: File): boolean => {
+  const isImage = file.type.startsWith("image/")
+  if (!isImage) {
+    message.error("请上传图片文件")
+    return false
+  }
+
+  const maxSize = 10 * 1024 * 1024
+  if (file.size > maxSize) {
+    message.error("图片大小不能超过10MB")
+    return false
+  }
+
+  form.localPreviewFile = file
+  return false
+}
+
+// 移除预览图
+const handleRemovePreview = () => {
+  form.localPreviewFile = null
   return true
 }
 
 // 上传附件前验证
 const handleBeforeUploadAttachment = (file: File): boolean => {
-  // 检查文件大小（限制为100MB）
-  const maxSize = 100 * 1024 * 1024 // 100MB
+  const maxSize = 100 * 1024 * 1024
   if (file.size > maxSize) {
     message.error("附件大小不能超过100MB")
     return false
   }
 
   form.attachmentFiles.push(file)
-  return false // 阻止自动上传
+  return false
 }
 
 // 移除附件
@@ -270,12 +531,18 @@ const handleRemoveAttachment = (file: UploadFile) => {
 
 // 重置表单
 const resetForm = () => {
+  uploadMode.value = "history"
   form.title = ""
   form.description = ""
-  form.workFile = null
+  form.selectedWorkId = null
+  form.selectedWork = null
+  form.localWorkFile = null
+  form.localPreviewFile = null
   form.attachmentFiles = []
-  workFileList.value = []
+  localWorkFileList.value = []
+  localPreviewFileList.value = []
   attachmentFileList.value = []
+  worksPagination.current = 1
   formRef.value?.resetFields()
 }
 
@@ -291,24 +558,45 @@ const handleSubmit = async () => {
       return
     }
 
-    if (!form.workFile) {
-      message.error("请上传作品文件")
-      return
-    }
-
     submitLoading.value = true
 
-    // 上传文件并获取URL
-    const workFileUrls: string[] = []
+    let workFileUrl = ""
+    let previewUrl = ""
     const attachmentUrls: string[] = []
 
-    // 上传作品文件
-    if (form.workFile) {
+    if (uploadMode.value === "history") {
+      // 从创作历史选择模式
+      if (!form.selectedWork) {
+        message.error("请选择一个3D作品")
+        return
+      }
+      workFileUrl = form.selectedWork.resultUrl || ""
+      previewUrl = form.selectedWork.previewUrl || ""
+    } else {
+      // 本地上传模式
+      if (!form.localWorkFile) {
+        message.error("请上传3D文件")
+        return
+      }
+      if (!form.localPreviewFile) {
+        message.error("请上传预览图")
+        return
+      }
+
+      // 上传3D文件
       try {
-        const workUrl = await uploadFile(form.workFile)
-        workFileUrls.push(workUrl)
+        workFileUrl = await uploadFile(form.localWorkFile)
       } catch (error: any) {
-        message.error("作品文件上传失败：" + (error?.message || "未知错误"))
+        message.error("3D文件上传失败：" + (error?.message || "未知错误"))
+        submitLoading.value = false
+        return
+      }
+
+      // 上传预览图
+      try {
+        previewUrl = await uploadFile(form.localPreviewFile)
+      } catch (error: any) {
+        message.error("预览图上传失败：" + (error?.message || "未知错误"))
         submitLoading.value = false
         return
       }
@@ -321,7 +609,6 @@ const handleSubmit = async () => {
         attachmentUrls.push(url)
       } catch (error: any) {
         console.error("附件上传失败:", error)
-        // 附件上传失败不影响主流程，只记录错误
       }
     }
 
@@ -329,7 +616,8 @@ const handleSubmit = async () => {
       registrationId: registrationIdRef.value,
       title: form.title,
       description: form.description,
-      files: [...workFileUrls, ...attachmentUrls],
+      files: [workFileUrl, ...attachmentUrls],
+      previewUrl: previewUrl,
     }
 
     await worksApi.submit(submitData)
@@ -340,7 +628,6 @@ const handleSubmit = async () => {
     resetForm()
   } catch (error: any) {
     if (error?.errorFields) {
-      // 表单验证错误
       return
     }
     message.error(error?.response?.data?.message || "作品提交失败")
@@ -355,14 +642,12 @@ const uploadFile = async (file: File): Promise<string> => {
   formData.append("file", file)
 
   try {
-    // 使用文件上传接口
     const response = await request.post<any>("/upload", formData, {
       headers: {
         "Content-Type": "multipart/form-data",
       },
     })
 
-    // 返回文件URL
     if (response && typeof response === "object" && "url" in response) {
       return String(response.url)
     }
@@ -388,6 +673,167 @@ const handleCancel = () => {
   color: #303133;
 }
 
+.work-selection {
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  padding: 16px;
+  background: #fafafa;
+  min-height: 200px;
+}
+
+.works-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 180px;
+  color: #8c8c8c;
+}
+
+.works-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+}
+
+.works-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.work-card {
+  background: #fff;
+  border: 2px solid #e8e8e8;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #1677ff;
+    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
+  }
+
+  &.is-selected {
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+
+    .work-preview {
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(22, 119, 255, 0.1);
+      }
+    }
+  }
+
+  .work-preview {
+    position: relative;
+    height: 100px;
+    background: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .preview-placeholder {
+      font-size: 32px;
+      color: #d9d9d9;
+    }
+
+    .selected-badge {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 24px;
+      height: 24px;
+      background: #1677ff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 14px;
+      z-index: 1;
+    }
+  }
+
+  .work-info {
+    padding: 8px;
+
+    .work-desc {
+      font-size: 12px;
+      color: #303133;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 4px;
+    }
+
+    .work-time {
+      font-size: 11px;
+      color: #8c8c8c;
+    }
+  }
+}
+
+.works-pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+.upload-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #8c8c8c;
+
+  .anticon {
+    font-size: 24px;
+    margin-bottom: 8px;
+  }
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  margin-top: 8px;
+
+  .file-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+  }
+
+  .delete-icon {
+    color: #8c8c8c;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #ff4d4f;
+    }
+  }
+}
+
 .upload-tip {
   margin-top: 8px;
   font-size: 12px;
@@ -395,6 +841,18 @@ const handleCancel = () => {
 }
 
 :deep(.ant-upload-list) {
-  margin-top: 8px;
+  &.ant-upload-list-picture-card {
+    display: flex;
+  }
+}
+
+:deep(.ant-upload-select-picture-card) {
+  width: 120px !important;
+  height: 120px !important;
+}
+
+:deep(.ant-upload-list-item-container) {
+  width: 120px !important;
+  height: 120px !important;
 }
 </style>
diff --git a/frontend/src/views/model/ModelViewer.vue b/frontend/src/views/model/ModelViewer.vue
index 9e22c16..6f6ebc2 100644
--- a/frontend/src/views/model/ModelViewer.vue
+++ b/frontend/src/views/model/ModelViewer.vue
@@ -363,6 +363,10 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
 // @ts-ignore
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"
 // @ts-ignore
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js"
+// @ts-ignore
+import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js"
+// @ts-ignore
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
 
 const router = useRouter()
@@ -682,12 +686,12 @@ const loadModel = async () => {
   // 检查文件扩展名（支持GLB、GLTF和ZIP格式，ZIP会在后端解压）
   // 从URL中提取文件扩展名（忽略查询参数）
   const urlWithoutQuery = modelUrl.value.split("?")[0].toLowerCase()
-  const supportedExtensions = [".glb", ".gltf", ".zip"]
+  const supportedExtensions = [".glb", ".gltf", ".zip", ".obj"]
   const isSupported = supportedExtensions.some((ext) =>
     urlWithoutQuery.endsWith(ext)
   )
   if (!isSupported) {
-    error.value = `不支持的文件格式，目前仅支持 GLB/GLTF/ZIP 格式`
+    error.value = `不支持的文件格式，目前仅支持 GLB/GLTF/ZIP/OBJ 格式`
     loading.value = false
     console.error("不支持的文件格式:", modelUrl.value)
     return
@@ -699,24 +703,25 @@ const loadModel = async () => {
   try {
     console.log("开始加载模型，URL:", modelUrl.value)
 
-    // 使用后端代理解决CORS问题
-    // 将原始URL编码后作为查询参数传递给后端代理
-    const proxyUrl = `/api/ai-3d/proxy-model?url=${encodeURIComponent(modelUrl.value)}`
-    console.log("使用代理URL:", proxyUrl)
+    // 判断是本地URL还是外部URL
+    // 本地URL: /api/uploads/... 或相对路径
+    // 外部URL: http:// 或 https:// 开头的腾讯云COS链接
+    const isLocalUrl =
+      modelUrl.value.startsWith("/api/") ||
+      modelUrl.value.startsWith("/uploads/") ||
+      (!modelUrl.value.startsWith("http://") &&
+        !modelUrl.value.startsWith("https://"))
 
-    const loader = new GLTFLoader()
-
-    // 配置 DRACO 解码器
-    if (!dracoLoader) {
-      dracoLoader = new DRACOLoader()
-      dracoLoader.setDecoderPath(
-        "https://www.gstatic.com/draco/versioned/decoders/1.5.6/"
-      )
+    let loadUrl: string
+    if (isLocalUrl) {
+      // 本地URL直接使用，不需要代理
+      loadUrl = modelUrl.value
+      console.log("使用本地URL:", loadUrl)
+    } else {
+      // 外部URL使用后端代理解决CORS问题
+      loadUrl = `/api/ai-3d/proxy-model?url=${encodeURIComponent(modelUrl.value)}`
+      console.log("使用代理URL:", loadUrl)
     }
-    loader.setDRACOLoader(dracoLoader)
-
-    // 使用代理URL加载模型
-    const gltf = await loader.loadAsync(proxyUrl)
 
     // 移除旧模型
     if (model && scene) {
@@ -724,7 +729,119 @@ const loadModel = async () => {
       disposeModel(model)
     }
 
-    model = gltf.scene
+    // 判断模型类型
+    let modelType: "glb" | "gltf" | "obj" = "glb" // 默认类型
+
+    // 先根据 URL 扩展名判断
+    if (urlWithoutQuery.endsWith(".obj")) {
+      modelType = "obj"
+    } else if (urlWithoutQuery.endsWith(".gltf")) {
+      modelType = "gltf"
+    }
+
+    // 如果是 ZIP 或代理请求，需要获取实际类型
+    const needsTypeDetection =
+      urlWithoutQuery.endsWith(".zip") || loadUrl.includes("proxy-model")
+
+    if (needsTypeDetection) {
+      // 对于 ZIP 或代理请求，先获取数据并检查类型头
+      console.log("获取模型数据以检测类型...")
+      const response = await fetch(loadUrl)
+
+      if (!response.ok) {
+        throw new Error(`模型加载失败: ${response.status} ${response.statusText}`)
+      }
+
+      // 检查 X-Model-Type 头部
+      const xModelType = response.headers.get("X-Model-Type")
+      if (xModelType === "obj") {
+        modelType = "obj"
+      } else if (xModelType === "gltf") {
+        modelType = "gltf"
+      }
+
+      console.log("检测到模型类型:", modelType)
+
+      // 获取数据
+      const arrayBuffer = await response.arrayBuffer()
+
+      if (modelType === "obj") {
+        // OBJ 是文本格式
+        const decoder = new TextDecoder()
+        const objText = decoder.decode(arrayBuffer)
+        const objLoader = new OBJLoader()
+        model = objLoader.parse(objText)
+
+        // 为 OBJ 模型添加默认材质
+        model.traverse((child: THREE.Object3D) => {
+          if (child instanceof THREE.Mesh) {
+            if (
+              !child.material ||
+              (child.material as THREE.Material).type === "MeshBasicMaterial"
+            ) {
+              child.material = new THREE.MeshStandardMaterial({
+                color: 0x888888,
+                metalness: 0.3,
+                roughness: 0.7,
+              })
+            }
+          }
+        })
+      } else {
+        // GLB/GLTF 格式
+        const gltfLoader = new GLTFLoader()
+
+        if (!dracoLoader) {
+          dracoLoader = new DRACOLoader()
+          dracoLoader.setDecoderPath(
+            "https://www.gstatic.com/draco/versioned/decoders/1.5.6/"
+          )
+        }
+        gltfLoader.setDRACOLoader(dracoLoader)
+
+        // 使用 parse 方法解析已获取的数据
+        const gltf = await new Promise<any>((resolve, reject) => {
+          gltfLoader.parse(arrayBuffer, "", resolve, reject)
+        })
+        model = gltf.scene
+      }
+    } else {
+      // 非 ZIP 且非代理，直接使用 loader 加载
+      console.log("检测到模型类型:", modelType)
+
+      if (modelType === "obj") {
+        const objLoader = new OBJLoader()
+        model = await objLoader.loadAsync(loadUrl)
+
+        model.traverse((child: THREE.Object3D) => {
+          if (child instanceof THREE.Mesh) {
+            if (
+              !child.material ||
+              (child.material as THREE.Material).type === "MeshBasicMaterial"
+            ) {
+              child.material = new THREE.MeshStandardMaterial({
+                color: 0x888888,
+                metalness: 0.3,
+                roughness: 0.7,
+              })
+            }
+          }
+        })
+      } else {
+        const gltfLoader = new GLTFLoader()
+
+        if (!dracoLoader) {
+          dracoLoader = new DRACOLoader()
+          dracoLoader.setDecoderPath(
+            "https://www.gstatic.com/draco/versioned/decoders/1.5.6/"
+          )
+        }
+        gltfLoader.setDRACOLoader(dracoLoader)
+
+        const gltf = await gltfLoader.loadAsync(loadUrl)
+        model = gltf.scene
+      }
+    }
 
     // 计算模型信息
     let vertexCount = 0