为所有作品添加鼠标悬停做同款按钮 - 在右下角显示，支持所有作品页面

demo/frontend/src/views/ImageToVideo.vue

@@ -63,6 +63,13 @@
               <div class="work-overlay">
                 <div class="overlay-text">{{ work.text }}</div>
               </div>
+              <!-- 鼠标悬停时显示的做同款按钮 -->
+              <div class="hover-create-btn" @click.stop="goToCreate(work)">
+                <el-button type="primary" size="small" round>
+                  <el-icon><VideoPlay /></el-icon>
+                  做同款
+                </el-button>
+              </div>
             </div>
             <div class="work-info">
               <div class="work-title">{{ work.title }}</div>
@@ -452,6 +459,34 @@ onMounted(() => {
   object-fit: cover;
 }
 
+/* 鼠标悬停时显示的做同款按钮 */
+.hover-create-btn {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.work-thumbnail:hover .hover-create-btn {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.hover-create-btn .el-button {
+  background: rgba(64, 158, 255, 0.9);
+  border: none;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+.hover-create-btn .el-button:hover {
+  background: rgba(64, 158, 255, 1);
+  transform: scale(1.05);
+}
+
 .work-overlay {
   position: absolute;
   bottom: 0;

demo/frontend/src/views/MyWorks.vue

@@ -73,6 +73,13 @@
                 </template>
               </el-dropdown>
             </div>
+            <!-- 鼠标悬停时显示的做同款按钮 -->
+            <div class="hover-create-btn" @click.stop="createSimilar(item)">
+              <el-button type="primary" size="small" round>
+                <el-icon><VideoPlay /></el-icon>
+                做同款
+              </el-button>
+            </div>
           </div>
           <div class="meta">
             <div class="title" :title="item.title">{{ item.title }}</div>
@@ -370,8 +377,20 @@ const handleClose = () => {
 }
 
 // 创建同款
-const createSimilar = () => {
-  ElMessage.info('跳转到创作页面')
+const createSimilar = (item) => {
+  if (item) {
+    ElMessage.info(`基于作品"${item.title}"创建同款`)
+    // 根据作品类型跳转到相应的创建页面
+    if (item.type === 'video') {
+      router.push('/text-to-video/create')
+    } else if (item.type === 'image') {
+      router.push('/image-to-video/create')
+    } else {
+      router.push('/text-to-video/create')
+    }
+  } else {
+    ElMessage.info('跳转到创作页面')
+  }
 }
 
 const download = (item) => {
@@ -486,6 +505,34 @@ onMounted(() => {
 .checker { position: absolute; left: 6px; top: 6px; }
 .actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
 .thumb:hover .actions { opacity: 1; }
+
+/* 鼠标悬停时显示的做同款按钮 */
+.hover-create-btn {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.thumb:hover .hover-create-btn {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.hover-create-btn .el-button {
+  background: rgba(64, 158, 255, 0.9);
+  border: none;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+.hover-create-btn .el-button:hover {
+  background: rgba(64, 158, 255, 1);
+  transform: scale(1.05);
+}
 .work-card.selected .thumb::after {
   content: '';
   position: absolute;

demo/frontend/src/views/StoryboardVideo.vue

@@ -63,6 +63,13 @@
               <div class="work-overlay">
                 <div class="overlay-text">{{ work.text }}</div>
               </div>
+              <!-- 鼠标悬停时显示的做同款按钮 -->
+              <div class="hover-create-btn" @click.stop="goToCreate(work)">
+                <el-button type="primary" size="small" round>
+                  <el-icon><VideoPlay /></el-icon>
+                  做同款
+                </el-button>
+              </div>
             </div>
             <div class="work-info">
               <div class="work-title">{{ work.title }}</div>
@@ -452,6 +459,34 @@ onMounted(() => {
   object-fit: cover;
 }
 
+/* 鼠标悬停时显示的做同款按钮 */
+.hover-create-btn {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.work-thumbnail:hover .hover-create-btn {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.hover-create-btn .el-button {
+  background: rgba(64, 158, 255, 0.9);
+  border: none;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+.hover-create-btn .el-button:hover {
+  background: rgba(64, 158, 255, 1);
+  transform: scale(1.05);
+}
+
 .work-overlay {
   position: absolute;
   bottom: 0;

demo/frontend/src/views/TextToVideo.vue

@@ -63,6 +63,13 @@
               <div class="work-overlay">
                 <div class="overlay-text">{{ work.text }}</div>
               </div>
+              <!-- 鼠标悬停时显示的做同款按钮 -->
+              <div class="hover-create-btn" @click.stop="goToCreate(work)">
+                <el-button type="primary" size="small" round>
+                  <el-icon><VideoPlay /></el-icon>
+                  做同款
+                </el-button>
+              </div>
             </div>
             <div class="work-info">
               <div class="work-title">{{ work.title }}</div>
@@ -453,6 +460,34 @@ onMounted(() => {
   object-fit: cover;
 }
 
+/* 鼠标悬停时显示的做同款按钮 */
+.hover-create-btn {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.work-thumbnail:hover .hover-create-btn {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.hover-create-btn .el-button {
+  background: rgba(64, 158, 255, 0.9);
+  border: none;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+.hover-create-btn .el-button:hover {
+  background: rgba(64, 158, 255, 1);
+  transform: scale(1.05);
+}
+
 .work-overlay {
   position: absolute;
   bottom: 0;