update

src/api/index.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 
 // 创建axios实例
 const api = axios.create({
-  baseURL: import.meta.env.PROD ? 'https://meida-api.beefast.co/' : 'http://127.0.0.1:8000/',
+  baseURL: import.meta.env.PROD ? 'https://meida-api.beefast.co/' : 'https://meida-api.beefast.co/',
   timeout: 10000,
   headers: {
     'Content-Type': 'application/json'

src/views/TryonHistory.vue

@@ -16,29 +16,38 @@
     <div v-else class="waterfall-container">
       <div v-for="history in histories" :key="history.id" class="waterfall-item">
         <div class="history-card card">
-          <div class="result-image">
+          <div class="result-image" @click="openLightbox(history.completion_url)">
             <img :src="history.completion_url" alt="穿搭效果" />
+            <div class="image-overlay">
+              <span class="zoom-icon">🔍</span>
+            </div>
           </div>
           
           <div class="history-details">
-            <div class="score">
+            <div v-if="history.score" class="score">
               <span class="score-value" :class="getScoreClass(history.score)">{{ history.score }}分</span>
             </div>
+            <div v-else class="no-score">
+              <span>暂无评分</span>
+            </div>
             
-            <div class="comment">
+            <div v-if="history.comment" class="comment">
               <p>{{ history.comment }}</p>
             </div>
+            <div v-else class="no-comment">
+              <p>暂无评价</p>
+            </div>
             
             <div class="source-images">
               <h4>搭配来源</h4>
               <div class="image-row">
-                <div class="person-image">
+                <div class="person-image" @click="openLightbox(history.person_image_url)">
                   <img :src="history.person_image_url" alt="用户照片" />
                 </div>
-                <div v-if="history.top_clothing_url" class="top-image">
+                <div v-if="history.top_clothing_url" class="top-image" @click="openLightbox(history.top_clothing_url)">
                   <img :src="history.top_clothing_url" alt="上衣" />
                 </div>
-                <div v-if="history.bottom_clothing_url" class="bottom-image">
+                <div v-if="history.bottom_clothing_url" class="bottom-image" @click="openLightbox(history.bottom_clothing_url)">
                   <img :src="history.bottom_clothing_url" alt="下装" />
                 </div>
               </div>
@@ -51,6 +60,14 @@
         </div>
       </div>
     </div>
+    
+    <!-- 图片放大查看 -->
+    <div v-if="lightbox.visible" class="lightbox" @click="closeLightbox">
+      <div class="lightbox-content">
+        <img :src="lightbox.imgSrc" alt="放大查看" />
+        <button class="close-btn" @click.stop="closeLightbox">×</button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -61,6 +78,27 @@ import api from '../api'
 const histories = ref([])
 const loading = ref(false)
 const error = ref(null)
+const lightbox = ref({
+  visible: false,
+  imgSrc: ''
+})
+
+// 打开大图查看
+const openLightbox = (imgSrc) => {
+  lightbox.value = {
+    visible: true,
+    imgSrc
+  }
+  // 阻止背景滚动
+  document.body.style.overflow = 'hidden'
+}
+
+// 关闭大图
+const closeLightbox = () => {
+  lightbox.value.visible = false
+  // 恢复背景滚动
+  document.body.style.overflow = 'auto'
+}
 
 // 获取试穿历史记录
 const fetchHistories = async () => {
@@ -104,6 +142,13 @@ const getScoreClass = (score) => {
 
 onMounted(() => {
   fetchHistories()
+  
+  // 添加ESC键关闭大图功能
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && lightbox.value.visible) {
+      closeLightbox()
+    }
+  })
 })
 </script>
 
@@ -139,6 +184,11 @@ onMounted(() => {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
+.result-image {
+  position: relative;
+  cursor: pointer;
+}
+
 .result-image img {
   width: 100%;
   display: block;
@@ -146,11 +196,34 @@ onMounted(() => {
   border-radius: 8px 8px 0 0;
 }
 
+.image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.result-image:hover .image-overlay {
+  opacity: 1;
+}
+
+.zoom-icon {
+  font-size: 24px;
+  color: white;
+}
+
 .history-details {
   padding: 15px;
 }
 
-.score {
+.score, .no-score {
   margin-bottom: 12px;
 }
 
@@ -162,6 +235,16 @@ onMounted(() => {
   border-radius: 4px;
 }
 
+.no-score span {
+  display: inline-block;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: #fff;
+  background-color: #555;
+}
+
 .score-excellent {
   color: #fff;
   background-color: #fe2c55;
@@ -182,13 +265,21 @@ onMounted(() => {
   background-color: #b91c1c;
 }
 
-.comment {
+.comment, .no-comment {
   margin-bottom: 15px;
   line-height: 1.5;
-  color: #f0f0f0;
   font-size: 14px;
 }
 
+.comment {
+  color: #f0f0f0;
+}
+
+.no-comment {
+  color: #888;
+  font-style: italic;
+}
+
 .source-images h4 {
   margin-bottom: 10px;
   font-size: 14px;
@@ -201,12 +292,34 @@ onMounted(() => {
   margin-bottom: 15px;
 }
 
+.person-image, .top-image, .bottom-image {
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  border: 1px solid #333;
+}
+
+.person-image:hover::after, .top-image:hover::after, .bottom-image:hover::after {
+  content: '🔍';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .person-image img, .top-image img, .bottom-image img {
   width: 60px;
   height: 60px;
   object-fit: cover;
-  border-radius: 4px;
-  border: 1px solid #333;
 }
 
 .date {
@@ -215,6 +328,43 @@ onMounted(() => {
   text-align: right;
 }
 
+/* 图片放大查看 */
+.lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.lightbox-content {
+  position: relative;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.lightbox-content img {
+  max-width: 100%;
+  max-height: 90vh;
+  object-fit: contain;
+}
+
+.close-btn {
+  position: absolute;
+  top: -30px;
+  right: -30px;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 36px;
+  cursor: pointer;
+}
+
 /* 响应式布局 */
 @media (min-width: 576px) {
   .waterfall-container {