From cd22f779f5f827eab63b5e54ec28db84bfa5d04d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Thu, 15 Jan 2026 15:06:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/WorkDetail.vue | 52 +++++++++++++++++++++++++++------
 client/src/pages/Works.vue      |  4 +--
 client/src/style.css            |  6 ++++
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/WorkDetail.vue b/client/src/pages/WorkDetail.vue
index 1ab20ca..05cd0bb 100644
--- a/client/src/pages/WorkDetail.vue
+++ b/client/src/pages/WorkDetail.vue
@@ -31,6 +31,13 @@
           :alt="work.title"
         >
         <div class="absolute inset-0 bg-black/40"></div>
+        
+        <!-- Play Button Overlay -->
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 rounded-full border border-white/20 bg-white/5 backdrop-blur-md flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-white/10 transition-all duration-500 group-hover:border-art-accent/50 z-20">
+            <i data-lucide="play" class="w-8 h-8 text-white fill-white ml-1"></i>
+            <div class="absolute inset-0 rounded-full border border-white/20 animate-pulse-slow"></div>
+        </div>
+
         <div class="absolute bottom-0 left-0 p-8 md:p-20 w-full">
           <div class="flex items-end justify-between border-t border-white/30 pt-8 animate-slide-down">
             <div>
@@ -74,17 +81,26 @@
         </div>
         <div class="md:w-2/3 bg-[#080808] flex flex-col">
           <div id="work-gallery" class="flex flex-col flex-grow">
-            <img 
-              v-for="(img, index) in work.gallery" 
-              :key="index"
-              :src="img" 
-              :alt="`${work.title} - 图片 ${index + 1}`" 
-              class="gallery-image"
-            >
+            <template v-for="(img, index) in work.gallery" :key="index">
+              <!-- Alternating layout logic -->
+              <img 
+                v-if="index % 2 === 0"
+                :src="img" 
+                :alt="`${work.title} - 图片 ${index + 1}`" 
+                class="gallery-image w-full object-cover aspect-video mb-8 md:mb-16 grayscale hover:grayscale-0 transition-all duration-700"
+              >
+              <div v-else class="flex justify-end mb-8 md:mb-16">
+                <img 
+                  :src="img" 
+                  :alt="`${work.title} - 图片 ${index + 1}`" 
+                  class="gallery-image w-4/5 object-cover aspect-[4/3] grayscale hover:grayscale-0 transition-all duration-700"
+                >
+              </div>
+            </template>
           </div>
           <div 
             class="h-[40vh] flex items-center justify-center border-t border-white/5 bg-[#050505] cursor-pointer group hover:bg-white/5 transition-colors"
-            @click="$router.push('/works')"
+            @click="openNextWork"
           >
             <div class="text-center">
               <p class="font-mono text-xs text-art-muted mb-4 tracking-widest">下一个作品</p>
@@ -99,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { fetchWork, Work } from '../services/api'
 import { useScrollAnimation } from '../composables/useScrollAnimation'
@@ -137,6 +153,14 @@ const updateScrollProgress = () => {
   }
 }
 
+const openNextWork = () => {
+  if (work.value.next) {
+    router.push(`/works/${work.value.next}`)
+  } else {
+    router.push('/works')
+  }
+}
+
 const fetchWorkDetails = async () => {
   loading.value = true
   error.value = ''
@@ -157,6 +181,16 @@ const fetchWorkDetails = async () => {
   }
 }
 
+// 监听路由变化，重新获取数据
+watch(() => route.params.id, (newId) => {
+  if (newId) {
+    // 强制刷新当前组件状态
+    work.value = { ...work.value, id: newId as string, title: '加载中...' }
+    window.scrollTo(0, 0)
+    fetchWorkDetails()
+  }
+})
+
 onMounted(() => {
   fetchWorkDetails()
   // 初始化Lucide图标
diff --git a/client/src/pages/Works.vue b/client/src/pages/Works.vue
index 73cee5a..437f893 100644
--- a/client/src/pages/Works.vue
+++ b/client/src/pages/Works.vue
@@ -26,7 +26,7 @@
         >
           <!-- 作品图片 -->
           <div 
-            :class="['md:order-1', index % 2 === 1 ? 'md:order-2' : 'md:order-1']"
+            :class="index % 2 === 1 ? 'md:order-2' : 'md:order-1'"
             class="relative aspect-[4/3] overflow-hidden rounded-sm bg-gray-900 border border-white/5"
           >
             <div 
@@ -45,7 +45,7 @@
           </div>
           <!-- 作品信息 -->
           <div 
-            :class="['md:order-2', index % 2 === 1 ? 'md:order-1 md:text-right' : 'md:order-2']"
+            :class="index % 2 === 1 ? 'md:order-1 md:text-right' : 'md:order-2'"
             class="space-y-6"
           >
             <!-- 年份和分类 -->
diff --git a/client/src/style.css b/client/src/style.css
index 8390921..aa8a79a 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -91,6 +91,12 @@
 .animate-reveal.visible { opacity: 1; transform: translateY(0); }
 .animate-slide-down { opacity: 0; transform: translateY(-30px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
 .animate-slide-down.visible { opacity: 1; transform: translateY(0); }
+.animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: .5; transform: scale(1.05); }
+}
 
 @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
 @keyframes marquee-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }