From 17bdec62bcdcce268276ccfa9a8a14d85fbb3d80 Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Thu, 9 Apr 2026 11:26:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RightResult/RightResult.vue    |  30 +-
 src/components/index/StencilTabs.vue          | 101 +++++++
 .../{Stencil.vue => StencilWaterfall.vue}     | 257 +++++-------------
 src/components/video/ImgVideo.vue             | 218 +++++++++------
 src/views/Bill/Bill.vue                       |  24 +-
 src/views/index/index.vue                     |  99 ++++++-
 6 files changed, 426 insertions(+), 303 deletions(-)
 create mode 100644 src/components/index/StencilTabs.vue
 rename src/components/index/{Stencil.vue => StencilWaterfall.vue} (65%)

diff --git a/src/components/RightResult/RightResult.vue b/src/components/RightResult/RightResult.vue
index c48a41d..b5f0091 100644
--- a/src/components/RightResult/RightResult.vue
+++ b/src/components/RightResult/RightResult.vue
@@ -16,7 +16,7 @@
         <div class="top">
           <el-checkbox v-model="showProcessing" @change="handleFilterChange" label="进行中" size="large" />
           
-          <el-select v-model="statusFilter" placeholder="全部状态" style="width: 240px" @change="handleFilterChange">
+          <el-select v-model="statusFilter" placeholder="全部状态" style="width: 240px" popper-class="custom-select-popup" @change="handleFilterChange">
             <el-option label="全部状态" value="" />
             <el-option label="已创建" value="created" />
             <el-option label="处理中" value="processing" />
@@ -29,10 +29,8 @@
         <div class="content">
           <!-- 加载中 -->
           <div v-if="isLoading" class="loading-container">
-            <el-icon class="is-loading" :size="40">
-              <svg viewBox="0 0 1024 1024">
-                <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896A448 448 0 0 1 0 64z"></path>
-              </svg>
+            <el-icon class="is-loading" :size="40" color="#ffffff">
+              <Loading />
             </el-icon>
             <div class="loading-text">加载中...</div>
           </div>
@@ -546,7 +544,6 @@ defineExpose({
   refreshTaskList: loadTaskList  // 刷新任务列表
 });
 
-
 </script>
 
 <style lang="less" scoped>
@@ -615,4 +612,25 @@ defineExpose({
   color: rgba(255, 255, 255, 0.8);
   font-weight: 500;
 }
+</style>
+
+<style>
+/* 全局样式（保留原有下拉框样式） */
+.custom-select-popup {
+  background-color: #2A2D34 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+  border: none !important;
+}
+
+.custom-select-popup .el-select-dropdown__item {
+  color: #ffffff !important;
+  background-color: transparent !important;
+  font-size: 14px !important;
+}
+
+.custom-select-popup .el-select-dropdown__item.selected,
+.custom-select-popup .el-select-dropdown__item:hover {
+  background-color: #3a3d46 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/index/StencilTabs.vue b/src/components/index/StencilTabs.vue
new file mode 100644
index 0000000..3b7c817
--- /dev/null
+++ b/src/components/index/StencilTabs.vue
@@ -0,0 +1,101 @@
+
+<template>
+  <div class="stencil-container">
+    <div class="stencil-top">
+      <div
+        class="stencil-item"
+        :class="{ active: activeTab === 'mixed' }"
+        @click="handleTabClick('mixed')"
+      >
+        <div class="item-title">推荐</div>
+      </div>
+      <div
+        class="stencil-item"
+        :class="{ active: activeTab === 'share_elements' }"
+        @click="handleTabClick('share_elements')"
+      >
+        <div class="item-title reference-title">
+          <img
+            src="https://sfzas1.vidu.cn/2.17.51-cn/_next/static/media/refhub_zh.4622df68.svg"
+            alt="reference"
+            class="reference-icon"
+          />
+          <img
+            src="https://sfzas1.vidu.cn/2.17.51-cn/_next/static/media/reference_2.0.bbfb4cad.svg"
+            alt="reference_2.0"
+            class="reference-sub-icon"
+          />
+        </div>
+      </div>
+      <div
+        class="stencil-item"
+        :class="{ active: activeTab === 'short_film' }"
+        @click="handleTabClick('short_film')"
+      >
+        <div class="item-title">短片</div>
+      </div>
+      <div
+        class="stencil-item"
+        :class="{ active: activeTab === 'tutorial' }"
+        @click="handleTabClick('tutorial')"
+      >
+        <div class="item-title">教程</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  activeTab: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'tab-change', tabType: string): void
+}>()
+
+const handleTabClick = (type: string) => {
+  emit('tab-change', type)
+}
+</script>
+
+<style scoped>
+.stencil-container {
+  width: 100%;
+}
+
+.stencil-top {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 12px 0;
+}
+
+.stencil-item {
+  cursor: pointer;
+}
+
+.stencil-item.active .item-title {
+  color: #fff;
+  font-weight: bold;
+}
+
+.item-title {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+}
+
+.reference-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.reference-icon,
+.reference-sub-icon {
+  height: 20px;
+  width: auto;
+  object-fit: contain;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/index/Stencil.vue b/src/components/index/StencilWaterfall.vue
similarity index 65%
rename from src/components/index/Stencil.vue
rename to src/components/index/StencilWaterfall.vue
index 4feff5a..d3468a9 100644
--- a/src/components/index/Stencil.vue
+++ b/src/components/index/StencilWaterfall.vue
@@ -1,29 +1,6 @@
+<!-- components/index/StencilWaterfall.vue -->
 <template>
   <div class="content">
-    <!-- 只替换这里的 Tab 结构，其他全部不动 -->
-    <div class="stencil-container">
-      <div class="stencil-top">
-        <div class="stencil-item" :class="{ active: activeTab === 'mixed' }" @click="switchTab('mixed')">
-          <div class="item-title">推荐</div>
-        </div>
-        <div class="stencil-item" :class="{ active: activeTab === 'share_elements' }"
-          @click="switchTab('share_elements')">
-          <div class="item-title reference-title">
-            <img src="https://sfzas1.vidu.cn/2.17.51-cn/_next/static/media/refhub_zh.4622df68.svg" alt="reference"
-              class="reference-icon" />
-            <img src="https://sfzas1.vidu.cn/2.17.51-cn/_next/static/media/reference_2.0.bbfb4cad.svg"
-              alt="reference_2.0" class="reference-sub-icon" />
-          </div>
-        </div>
-        <div class="stencil-item" :class="{ active: activeTab === 'short_film' }" @click="switchTab('short_film')">
-          <div class="item-title">短片</div>
-        </div>
-        <div class="stencil-item" :class="{ active: activeTab === 'tutorial' }" @click="switchTab('tutorial')">
-          <div class="item-title">教程</div>
-        </div>
-      </div>
-    </div>
-
     <div ref="container" class="waterfall-container" :style="{
       width: '100%',
       height: 'auto',
@@ -51,19 +28,18 @@
             top: `${item.top}px`,
             left: `${item.left}px`,
           }">
+          <!-- 卡片内容保持不变 -->
           <div class="card-wrapper">
             <div class="video-container" :style="{ aspectRatio: item.aspectRatio }"
               @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
-              <video :ref="(el) => setVideoRef(index, el)" :src="item.src" :poster="item.poster" preload="none"
-                class="video-element" :class="{ 'playing': isVideoPlaying[index] }" loop muted playsinline />
-              <!-- 底部信息栏 -->
+              <video :ref="(el) => setVideoRef(index, el as HTMLVideoElement | null)" :src="item.src"
+                :poster="item.poster" preload="none" class="video-element" :class="{ playing: isVideoPlaying[index] }"
+                loop muted playsinline />
               <div class="card-info-overlay">
-                <!-- 左侧：用户信息 -->
                 <div class="user-info">
                   <img v-if="item.avatar" :src="item.avatar" class="user-avatar" alt="avatar" />
                   <span v-if="item.userName" class="user-name">{{ item.userName }}</span>
                 </div>
-                <!-- 右侧：点赞和收藏 -->
                 <div class="interaction-info">
                   <div v-if="item.likes > 0" class="interaction-item">
                     <span class="icon-heart">♡</span>
@@ -76,7 +52,6 @@
         </div>
       </div>
 
-      <!-- 底部加载指示器 -->
       <div ref="loadMoreTrigger" class="load-more-trigger">
         <span v-if="loading" class="loading-spinner"></span>
         <span v-else-if="hasMore">加载更多...</span>
@@ -85,29 +60,19 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { getVideos } from '@/apis/home'
 import { transformFeedItem, transformShareElementItem } from '@/utlis/transform'
 import type { FeedResponse, ShareElementsResponse } from '@/types/home'
-
-// 定义卡片数据格式
-export interface StencilItem {
-  id: string
-  type: 'video'
-  src: string
-  poster: string
-  aspectRatio: string   // e.g., "1.77778/1"
-  avatar: string
-  userName: string
-  likes: number
-  averageColor?: string
-}
+import type { StencilItem } from '@/types/home'
 
 const props = defineProps<{
-  gap?: number          // 卡片间距，默认 16px
-  columnCount?: number  // 列数，默认根据屏幕宽度自动计算
-  items?: StencilItem[] // 外部传入的卡片数据
+  activeTab: string        // 由父组件传入当前激活的 Tab
+  gap?: number
+  columnCount?: number
+  items?: StencilItem[]
 }>()
 
 const emit = defineEmits<{
@@ -116,24 +81,6 @@ const emit = defineEmits<{
   (e: 'loadMore'): void
 }>()
 
-// ==================== Tab 切换核心（仅新增） ====================
-const activeTab = ref('mixed') // 默认推荐
-
-// Tab 切换方法
-const switchTab = (type: string) => {
-  if (activeTab.value === type) return
-  activeTab.value = type
-  // 重置数据 & 重新加载
-  items.value = []
-  pageToken.value = null
-  hasMore.value = true
-  containerHeight.value = 0
-  itemsWithPosition.value = []
-  loadFirstPage()
-  // 切换后滚动到顶部
-  if (container.value) container.value.scrollTop = 0
-}
-
 // ==================== 数据状态 ====================
 const items = ref<StencilItem[]>([])
 const loading = ref(false)
@@ -144,28 +91,23 @@ const pageToken = ref<string | null>(null)
 const videoRefs = ref<(HTMLVideoElement | null)[]>([])
 const isVideoPlaying = ref<Record<number, boolean>>({})
 
-// 设置视频引用
 const setVideoRef = (index: number, el: HTMLVideoElement | null) => {
   videoRefs.value[index] = el
 }
 
-// 鼠标移入：播放视频
 const handleMouseEnter = (index: number) => {
   const video = videoRefs.value[index]
   if (video) {
-    video.play().catch(err => {
-      console.log('播放失败:', err)
-    })
+    video.play().catch(err => console.log('播放失败:', err))
     isVideoPlaying.value[index] = true
   }
 }
 
-// 鼠标移出：暂停视频
 const handleMouseLeave = (index: number) => {
   const video = videoRefs.value[index]
   if (video) {
     video.pause()
-    video.currentTime = 0  // 重置到开头
+    video.currentTime = 0
     isVideoPlaying.value[index] = false
   }
 }
@@ -183,18 +125,16 @@ let resizeObserver: ResizeObserver | null = null
 let isLayoutPending = false
 let intersectionObserver: IntersectionObserver | null = null
 
-// ==================== 辅助函数 ====================
-// 获取当前列数（优先使用 props，否则根据屏幕宽度）
 const getColumnCount = (): number => {
   if (props.columnCount !== undefined) return props.columnCount
   const width = window.innerWidth
-  if (width >= 1280) return 4   // PC
-  if (width >= 768) return 3    // 平板
-  return 2                       // 手机
+  if (width >= 1280) return 4
+  if (width >= 768) return 3
+  return 2
 }
 
-/* 核心布局算法 */
 const layout = async () => {
+  // ... 布局算法保持不变，参考原文件 ...
   if (!container.value || !innerScrollContainer.value || items.value.length === 0) return
   if (isLayoutPending) return
   isLayoutPending = true
@@ -203,29 +143,21 @@ const layout = async () => {
     const containerWidth = container.value.clientWidth
     const columnCount = getColumnCount()
     const gap = 4
-
-    // 计算卡片宽度
     cardWidth.value = (containerWidth - gap * (columnCount - 1)) / columnCount
-
-    // 重置列高度
     columnHeights = new Array(columnCount).fill(0)
 
-    // 降级：根据宽高比估算高度（更可靠）
     const heights: number[] = []
     for (const item of items.value) {
-      const ratio = parseFloat(item.aspectRatio.split('/')[0]) / parseFloat(item.aspectRatio.split('/')[1])
-      heights.push(cardWidth.value / ratio)
+      const [num, den] = item.aspectRatio.split('/').map(Number)
+      heights.push(cardWidth.value / (num / den))
     }
 
-    // 计算每个卡片的位置
     const newItems = items.value.map((item, idx) => {
       const height = heights[idx] || 0
-      // 找到当前最短列
       const minHeight = Math.min(...columnHeights)
       const minIndex = columnHeights.indexOf(minHeight)
       const left = minIndex * (cardWidth.value + gap)
       const top = columnHeights[minIndex]
-      // 更新该列高度
       columnHeights[minIndex] += height + gap
       return { ...item, top, left, height }
     })
@@ -237,22 +169,17 @@ const layout = async () => {
   }
 }
 
-// 媒体加载完成后重新布局
 // ==================== 数据加载 ====================
-// 加载第一页
 const loadFirstPage = async () => {
   if (loading.value) return
   loading.value = true
   try {
     const res: FeedResponse | ShareElementsResponse = await getVideos({
-      channel_type: activeTab.value // 自动使用当前 Tab 类型
+      channel_type: props.activeTab
     })
 
     const cards: StencilItem[] = []
-
-    // 根据不同的数据格式进行转换
-    if (activeTab.value === 'share_elements') {
-      // 使用新的 share_elements 数据格式
+    if (props.activeTab === 'share_elements') {
       const shareRes = res as ShareElementsResponse
       for (const item of shareRes.share_elements) {
         const card = transformShareElementItem(item)
@@ -260,7 +187,6 @@ const loadFirstPage = async () => {
       }
       pageToken.value = shareRes.next_page_token ?? null
     } else {
-      // 使用原有的数据格式
       const feedRes = res as FeedResponse
       for (const item of feedRes.list) {
         const card = transformFeedItem(item)
@@ -282,59 +208,28 @@ const loadFirstPage = async () => {
   }
 }
 
-// 加载更多
 const loadMore = async () => {
-  console.log('--- loadMore 开始 ---')
-  console.log('loading:', loading.value, 'hasMore:', hasMore.value, 'pageToken:', pageToken.value)
-
-  if (loading.value || !hasMore.value) return
-  if (!pageToken.value) {
-    console.log('pageToken 为空，停止加载')
-    hasMore.value = false
-    return
-  }
+  if (loading.value || !hasMore.value || !pageToken.value) return
 
   loading.value = true
   try {
-    // 动态构建参数：只在 pageToken 有值时才传递 page_token
-    const params: {
-      channel_type: string;
-      page_token?: string;
-    } = {
-      channel_type: activeTab.value
+    const params: { channel_type: string; page_token?: string } = {
+      channel_type: props.activeTab,
     }
-    if (pageToken.value) {
-      params.page_token = pageToken.value
-    }
-
-    console.log('请求参数:', params)
-    console.log('准备调用 getVideos...')
+    if (pageToken.value) params.page_token = pageToken.value
 
     const res: FeedResponse | ShareElementsResponse = await getVideos(params)
 
-    console.log('getVideos 调用成功!')
-    console.log('接口返回数据:', res)
-
     const newCards: StencilItem[] = []
-
-    // 根据不同的数据格式进行转换
-    if (activeTab.value === 'share_elements') {
-      // 使用新的 share_elements 数据格式
+    if (props.activeTab === 'share_elements') {
       const shareRes = res as ShareElementsResponse
-      console.log('返回的 share_elements 长度:', shareRes.share_elements?.length)
-      console.log('返回的 next_page_token:', shareRes.next_page_token)
-
       for (const item of shareRes.share_elements) {
         const card = transformShareElementItem(item)
         if (card) newCards.push(card)
       }
       pageToken.value = shareRes.next_page_token ?? null
     } else {
-      // 使用原有的数据格式
       const feedRes = res as FeedResponse
-      console.log('返回的 list 长度:', feedRes.list?.length)
-      console.log('返回的 next_page_token:', feedRes.next_page_token)
-
       for (const item of feedRes.list) {
         const card = transformFeedItem(item)
         if (card) newCards.push(card)
@@ -342,41 +237,20 @@ const loadMore = async () => {
       pageToken.value = feedRes.next_page_token ?? null
     }
 
-    console.log('转换后的卡片数量:', newCards.length)
-
     items.value = [...items.value, ...newCards]
     hasMore.value = !!pageToken.value
-
-    console.log('更新后 - items 长度:', items.value.length, 'pageToken:', pageToken.value, 'hasMore:', hasMore.value)
   } catch (error) {
-    console.error('加载更多失败，错误详情:', error)
-    console.error('错误类型:', typeof error)
-    if (error instanceof Error) {
-      console.error('错误消息:', error.message)
-      console.error('错误堆栈:', error.stack)
-    } else if (error && typeof error === 'object') {
-      const errObj = error as Record<string, unknown>;
-      console.error('错误响应:', errObj.response)
-      console.error('错误请求:', errObj.request)
-    }
-    console.error('完整错误对象:', JSON.stringify(error))
+    console.error('加载更多失败', error)
     hasMore.value = false
   } finally {
     loading.value = false
   }
-  console.log('--- loadMore 结束 ---')
 }
 
-// ==================== 滚动监听 ====================
-// 设置 IntersectionObserver 监听底部
 const setupObserver = () => {
-  if (intersectionObserver) {
-    intersectionObserver.disconnect()
-  }
-  if (!loadMoreTrigger.value) {
-    console.warn('loadMoreTrigger 元素不存在')
-    return
-  }
+  if (intersectionObserver) intersectionObserver.disconnect()
+  if (!loadMoreTrigger.value) return
+
   intersectionObserver = new IntersectionObserver(
     (entries) => {
       const entry = entries[0]
@@ -385,54 +259,51 @@ const setupObserver = () => {
         loadMore()
       }
     },
-    {
-      root: container.value,
-      threshold: 0.1,
-    }
+    { root: container.value, threshold: 0.1 }
   )
   intersectionObserver.observe(loadMoreTrigger.value)
 }
 
 // ==================== 响应式监听 ====================
-// 响应窗口尺寸变化
-let resizeTimer: number
-const handleResize = () => {
-  if (resizeTimer) clearTimeout(resizeTimer)
-  resizeTimer = window.setTimeout(() => {
-    layout()
-  }, 100)
-}
-
-// 监听内部 items 变化，重新布局
+// 监听 activeTab 变化，重置并重新加载
 watch(
-  () => items.value,
+  () => props.activeTab,
   () => {
-    nextTick(() => layout())
-  },
-  { deep: true }
-)
-
-// 监听列数变化
-watch(
-  () => getColumnCount(),
-  () => {
-    layout()
+    items.value = []
+    pageToken.value = null
+    hasMore.value = true
+    containerHeight.value = 0
+    itemsWithPosition.value = []
+    loadFirstPage()
+    if (container.value) container.value.scrollTop = 0
   }
 )
 
-// ==================== 生命周期 ====================
+watch(
+  () => items.value,
+  () => nextTick(() => layout()),
+  { deep: true }
+)
+
+watch(
+  () => getColumnCount(),
+  () => layout()
+)
+
+let resizeTimer: number
+const handleResize = () => {
+  if (resizeTimer) clearTimeout(resizeTimer)
+  resizeTimer = window.setTimeout(() => layout(), 100)
+}
+
 onMounted(() => {
   loadFirstPage()
   window.addEventListener('resize', handleResize)
-
   if (window.ResizeObserver && container.value) {
     resizeObserver = new ResizeObserver(() => layout())
     resizeObserver.observe(container.value)
   }
-
-  nextTick(() => {
-    setupObserver()
-  })
+  nextTick(() => setupObserver())
 })
 
 onUnmounted(() => {
@@ -446,10 +317,16 @@ defineExpose({ refreshLayout: layout })
 </script>
 
 <style scoped>
-.user-avatar{
-  width: 20px!important;
-  height: 20px!important;
+.content {
+  width: 100%;
+  height: 100%;
 }
+
+.user-avatar {
+  width: 20px !important;
+  height: 20px !important;
+}
+
 /* 把原来的 .tab 相关样式删掉，换成下面这些 */
 .stencil-container {
   width: 100%;
diff --git a/src/components/video/ImgVideo.vue b/src/components/video/ImgVideo.vue
index a8ce3b4..cf88d3c 100644
--- a/src/components/video/ImgVideo.vue
+++ b/src/components/video/ImgVideo.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="reference-to-video">
-    <!-- 顶部卡片：图片上传和提示词输入区 -->
+    <!-- 顶部卡片：图片上传和提示词输入区域 -->
     <el-card class="card">
       <div class="reference-container">
-        <!-- 动态上传区域：根据模型生成图片上传项 -->
+        <!-- 动态上传区域：根据当前模型的 image 字段动态渲染上传项 -->
         <div v-if="currentModel" class="upload-section">
           <div v-for="field in imageFields" :key="field.name" class="upload-item">
             <div class="upload-label">
               {{ field.label }}
               <span v-if="field.required" class="required-star">*</span>
             </div>
-            <!-- 已上传图片时显示预览 -->
+
+            <!-- 已上传图片时显示预览卡片 -->
             <div v-if="uploadedFiles[field.name]" class="image-preview-container">
               <img :src="uploadedFiles[field.name]" :alt="field.label" class="preview-image" />
               <div class="preview-actions">
@@ -22,7 +23,8 @@
                 </span>
               </div>
             </div>
-            <!-- 未上传时显示上传框（已有图片时禁用上传） -->
+
+            <!-- 未上传时显示上传按钮（生成中或已有图片时禁用） -->
             <el-upload
               v-else
               action="#"
@@ -39,7 +41,7 @@
           </div>
         </div>
 
-        <!-- 文本输入框（绑定 prompt 字段） -->
+        <!-- 文本输入框（仅当模型包含 prompt 字段时显示） -->
         <div v-if="hasPromptField" class="input">
           <el-input
             type="textarea"
@@ -59,10 +61,10 @@
       <img w-full :src="dialogImageUrl" alt="Preview Image" />
     </el-dialog>
 
-    <!-- 底部配置卡片 -->
+    <!-- 底部配置卡片：模型选择及其他动态配置项 -->
     <el-card class="btmcard">
       <div class="select">
-        <!-- 模型选择（动态从接口加载） -->
+        <!-- 模型选择下拉框（动态从接口加载） -->
         <div class="select-item">
           <div class="select-title">模型</div>
           <div class="select-content">
@@ -83,7 +85,7 @@
           </div>
         </div>
 
-        <!-- 动态生成其他配置项（排除 prompt 和图片字段） -->
+        <!-- 动态渲染其他配置字段（排除图片和 prompt 字段） -->
         <template v-for="field in visibleFields" :key="field.name">
           <div class="select-item">
             <div class="select-title">
@@ -131,7 +133,7 @@
                 :disabled="generating"
               />
 
-              <!-- 音频上传 -->
+              <!-- 音频上传（示例） -->
               <div v-else-if="field.uitype === 'audio'" class="audio-wrapper">
                 <el-input
                   v-model="configData[field.name]"
@@ -152,7 +154,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
 import { ElMessage } from 'element-plus';
 import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
 import type { UploadFile } from 'element-plus';
@@ -166,33 +168,51 @@ import type {
   ModelParams,
 } from '../../types/model';
 
-// ==================== 事件定义 ====================
+// ==================== 组件事件定义 ====================
 const emit = defineEmits<{
+  /** 价格更新事件，携带当前计算出的价格（单位：分/元？） */
   (e: 'price-update', price: number): void;
+  /** 提示词/图片内容变更事件，用于告知父组件是否有有效输入 */
   (e: 'prompt-change', isEmpty: boolean): void;
+  /** 任务创建成功事件，携带返回的 taskid */
   (e: 'task-created', taskid: string): void;
 }>();
 
 // ==================== 类型定义 ====================
+/** 配置项可能的值类型（用于表单双向绑定） */
 type ConfigValue = string | number | boolean;
 
-// ==================== 数据定义 ====================
+// ==================== 响应式状态 ====================
+/** 模型列表 */
 const models = ref<Model[]>([]);
+/** 当前选中的模型 ID */
 const currentModelId = ref('');
+/** 当前选中的模型对象（从 models 中查找） */
 const currentModel = ref<Model | null>(null);
 
+/** 提示词内容 */
 const prompt = ref('');
+/** 已上传图片的 base64 数据映射（字段名 -> base64 字符串） */
 const uploadedFiles = ref<Record<string, string>>({});
+/** 已上传图片的原始文件名映射（用于验证存在性） */
 const uploadedFileNames = ref<Record<string, string>>({});
+/** 其他配置项数据（除 prompt 和图片外） */
 const configData = ref<Record<string, ConfigValue>>({});
 
+/** 是否正在生成视频（用于禁用交互） */
 const generating = ref(false);
+/** 当前预估价格 */
 const price = ref(0);
 
+/** 图片预览对话框相关 */
 const dialogImageUrl = ref('');
 const dialogVisible = ref(false);
 
+/** 价格查询防抖计时器 */
+let priceTimer: ReturnType<typeof setTimeout> | null = null;
+
 // ==================== 计算属性 ====================
+/** 图片类型的字段列表 */
 const imageFields = computed(() => {
   if (!currentModel.value) return [];
   return currentModel.value.input_fields.filter(
@@ -200,11 +220,13 @@ const imageFields = computed(() => {
   );
 });
 
+/** 是否存在 prompt 字段 */
 const hasPromptField = computed(() => {
   if (!currentModel.value) return false;
   return currentModel.value.input_fields.some(f => f.name === 'prompt');
 });
 
+/** 需要显示的其他配置字段（排除图片和 prompt） */
 const visibleFields = computed(() => {
   if (!currentModel.value) return [];
   return currentModel.value.input_fields.filter(
@@ -212,6 +234,7 @@ const visibleFields = computed(() => {
   );
 });
 
+/** prompt 输入框的占位文本（根据必填状态动态生成） */
 const promptPlaceholder = computed(() => {
   if (!currentModel.value) return '请输入提示词';
   const promptField = currentModel.value.input_fields.find(f => f.name === 'prompt');
@@ -219,11 +242,18 @@ const promptPlaceholder = computed(() => {
 });
 
 // ==================== 表单初始化 ====================
+/**
+ * 根据当前模型初始化 configData 对象
+ * - 对于 code 类型，若无默认值则取第一个选项
+ * - 对于 int 类型，默认值为 1
+ * - 其他类型默认空字符串
+ */
 const initFormData = () => {
   if (!currentModel.value) return;
   const newConfigData: Record<string, ConfigValue> = {};
 
   currentModel.value.input_fields.forEach(field => {
+    // 跳过图片和 prompt 字段（单独处理）
     if (field.uitype === 'image' || field.name === 'prompt') {
       return;
     }
@@ -245,12 +275,17 @@ const initFormData = () => {
   configData.value = newConfigData;
 };
 
-// ==================== 价格查询 ====================
+// ==================== 价格查询相关 ====================
+/**
+ * 构建价格查询所需的参数对象
+ * @returns 价格查询参数，若模型未加载则返回 null
+ */
 const buildPriceParams = (): PriceQueryParams | null => {
   if (!currentModel.value) return null;
 
   const configDataForPrice: PriceQueryParams['config_data'] = { action: '' };
 
+  // 收集非图片、非 prompt 的配置项
   currentModel.value.input_fields.forEach(field => {
     if (field.uitype === 'image' || field.name === 'prompt') {
       return;
@@ -267,20 +302,20 @@ const buildPriceParams = (): PriceQueryParams | null => {
 
   configDataForPrice.action = currentModel.value.apiname;
 
-  const priceParams = {
+  const priceParams: PriceQueryParams = {
     product_type: 'llm',
     product_id: currentModel.value.id,
     config_data: configDataForPrice,
   };
 
-  console.log('=== 构建价格查询参数 ===');
-  console.log('价格查询参数:', JSON.stringify(priceParams, null, 2));
-
+  console.log('=== 构建价格查询参数 ===', priceParams);
   return priceParams;
 };
 
-let priceTimer: ReturnType<typeof setTimeout> | null = null;
-
+/**
+ * 执行价格查询（防抖处理）
+ * - 先检查必填内容是否满足，若不满足则价格置零
+ */
 const fetchPrice = () => {
   if (priceTimer) clearTimeout(priceTimer);
 
@@ -314,6 +349,10 @@ const fetchPrice = () => {
   }, 500);
 };
 
+/**
+ * 检查必填内容是否存在（提示词或图片至少有一个）
+ * @returns 是否有有效内容
+ */
 const checkRequiredFields = (): boolean => {
   if (!currentModel.value) return false;
 
@@ -321,10 +360,13 @@ const checkRequiredFields = (): boolean => {
   const hasUploads = imageFields.value.length > 0 &&
     imageFields.value.some(f => uploadedFileNames.value[f.name]?.trim());
 
-  return hasPrompt || hasUploads;
+  return !!(hasPrompt || hasUploads);
 };
 
-// ==================== 模型加载 ====================
+// ==================== 模型加载与切换 ====================
+/**
+ * 加载模型列表（仅过滤 type 为 '图生视频'）
+ */
 const loadModels = async () => {
   try {
     const params: ModelParams = { type: '图生视频' };
@@ -332,6 +374,7 @@ const loadModels = async () => {
     if (res.status === 'ok' && Array.isArray(res.data)) {
       models.value = res.data;
       if (models.value.length > 0) {
+        // 默认选中第一个模型
         currentModelId.value = models.value[0].id;
         currentModel.value = models.value[0];
         initFormData();
@@ -346,14 +389,17 @@ const loadModels = async () => {
   }
 };
 
+/**
+ * 模型切换处理
+ * - 清空已上传图片
+ * - 重置表单配置
+ */
 const handleModelChange = (modelId: string) => {
   const selected = models.value.find(m => m.id === modelId);
   if (selected) {
-    console.log('=== 切换模型 ===');
-    console.log('新模型:', selected.name);
-    console.log('清空的文件:', uploadedFileNames.value);
-
+    console.log('=== 切换模型 ===', selected.name);
     currentModel.value = selected;
+    // 清空图片相关数据
     uploadedFiles.value = {};
     uploadedFileNames.value = {};
     initFormData();
@@ -362,6 +408,7 @@ const handleModelChange = (modelId: string) => {
 };
 
 // ==================== 监听器 ====================
+// 监听配置数据变化，重新查询价格
 watch(
   () => [configData.value, currentModelId.value],
   () => {
@@ -370,6 +417,7 @@ watch(
   { deep: true }
 );
 
+// 监听提示词和上传图片变化，更新父组件状态并触发价格查询
 watch(
   () => [prompt.value, uploadedFileNames.value],
   () => {
@@ -385,9 +433,14 @@ watch(
   { deep: true, immediate: true }
 );
 
-// ==================== 上传处理 ====================
+// ==================== 图片上传处理 ====================
+/**
+ * 图片上传变更回调
+ * @param file Element Plus 上传文件对象
+ * @param fieldName 对应的字段名
+ */
 const handleFileChange = (file: UploadFile, fieldName: string) => {
-  // 检查是否已存在该字段的文件（防御性判断）
+  // 防御性检查：是否已有图片
   if (uploadedFiles.value[fieldName]) {
     ElMessage.warning('每个字段只能上传一张图片，请先删除已有图片再上传');
     return;
@@ -402,51 +455,56 @@ const handleFileChange = (file: UploadFile, fieldName: string) => {
     uploadedFiles.value[fieldName] = base64;
     uploadedFileNames.value[fieldName] = fileName;
 
-    console.log('=== 上传图片 ===');
-    console.log('字段名:', fieldName);
-    console.log('文件名:', fileName);
-    console.log('Base64长度:', base64.length);
-    console.log('Base64前100字符:', base64.substring(0, 100));
-    console.log('当前所有上传文件:', Object.keys(uploadedFileNames.value));
-
+    console.log('=== 上传图片 ===', { fieldName, fileName, base64Length: base64.length });
     ElMessage.success('上传成功');
   };
   reader.readAsDataURL(rawFile);
 };
 
+/**
+ * 移除已上传的图片
+ * @param fieldName 字段名
+ */
 const handleRemove = (fieldName: string) => {
   uploadedFiles.value[fieldName] = '';
   uploadedFileNames.value[fieldName] = '';
 
-  console.log('=== 删除图片 ===');
-  console.log('字段名:', fieldName);
-  console.log('剩余上传文件:', uploadedFileNames.value);
-
+  console.log('=== 删除图片 ===', fieldName);
   ElMessage.info('已移除图片');
 };
 
+/**
+ * 图片预览
+ * @param file 包含 url 的文件对象
+ */
 const handlePictureCardPreview = (file: UploadFile) => {
   dialogImageUrl.value = file.url!;
   dialogVisible.value = true;
 };
 
+/**
+ * 模拟音频上传（示例）
+ */
 const simulateUpload = () => {
   ElMessage.info('此处可对接实际音频上传服务');
   configData.value.audio_file = 'https://example.com/demo_audio.mp3';
 };
 
-// ==================== 生成视频 ====================
+// ==================== 生成视频提交 ====================
+/**
+ * 构建提交给后端的参数对象
+ */
 const buildSubmitParams = (): Record<string, unknown> => {
   const baseParams: Record<string, unknown> = {
     llmid: currentModel.value!.id,
   };
 
-  // 添加提示词（如果存在）
+  // 添加提示词
   if (hasPromptField.value && prompt.value) {
     baseParams.prompt = prompt.value;
   }
 
-  // 添加上传的文件（使用base64格式）
+  // 添加图片 base64 数据
   Object.keys(uploadedFiles.value).forEach(key => {
     if (uploadedFiles.value[key]) {
       baseParams[key] = uploadedFiles.value[key];
@@ -466,25 +524,21 @@ const buildSubmitParams = (): Record<string, unknown> => {
     }
   });
 
-  console.log('=== 构建提交参数 ===');
-  console.log('完整参数:', JSON.stringify(baseParams, null, 2));
-  console.log('上传的图片字段:', Object.keys(uploadedFiles.value));
-
+  console.log('=== 构建提交参数 ===', baseParams);
   return baseParams;
 };
 
+/**
+ * 生成视频入口（供父组件通过 ref 调用）
+ * @returns 是否成功创建任务
+ */
 const generate = async (): Promise<boolean> => {
   if (!currentModel.value) {
     ElMessage.error('请选择模型');
     return false;
   }
 
-  console.log('=== 开始验证必填字段 ===');
-  console.log('当前模型:', currentModel.value.name);
-  console.log('图片文件:', uploadedFileNames.value);
-  console.log('提示词:', prompt.value);
-  console.log('配置数据:', configData.value);
-
+  // 验证必填字段
   const missingFields: string[] = [];
   currentModel.value.input_fields.forEach(field => {
     if (field.required) {
@@ -500,53 +554,41 @@ const generate = async (): Promise<boolean> => {
   });
 
   if (missingFields.length > 0) {
-    console.error('=== 必填字段验证失败 ===');
-    console.error('缺失的字段:', missingFields);
+    console.error('必填字段缺失:', missingFields);
     ElMessage.error(`请填写必填项：${missingFields.join('、')}`);
     return false;
   }
 
-  console.log('=== 必填字段验证通过 ===');
-
   generating.value = true;
 
   try {
     const params = buildSubmitParams();
-
-    console.log('=== 准备提交接口 ===');
-    console.log('接口路径: /api/llmage/vidu_inference.dspy');
-    console.log('请求参数:', JSON.stringify(params, null, 2));
-
     const res = (await imagetovideo(params)) as TextVideoResponse;
 
-    console.log('=== 图生视频接口响应 ===');
-    console.log('响应状态:', res.status);
-    console.log('响应数据:', res.data);
-    console.log('完整响应:', JSON.stringify(res, null, 2));
+    console.log('=== 图生视频接口响应 ===', res);
 
-    let taskid = res.data?.taskid || res.taskid;
-    console.log('提取的 taskid:', taskid);
+    const taskid = res.data?.taskid || res.taskid;
 
-    if (res.status === 'created' || res.status === 'processing' || res.status === 'queueing') {
-      const statusMsg = res.status === 'created' ? '视频生成任务已提交' : (res.status === 'processing' ? '进行中' : '排队中');
-      console.log('任务状态:', statusMsg);
-      console.log('任务创建成功，等待处理...');
+    if (res.status === 'created' || res.status === 'processing' || res.status === 'queueing' || res.status === 'CREATED') {
+      const statusMsg =
+        res.status === 'created'
+          ? '视频生成任务已提交'
+          : res.status === 'processing'
+          ? '进行中'
+          : '排队中';
       ElMessage.success(`${statusMsg}，请稍后在任务列表中查看`);
 
       if (taskid) {
-        console.log('向上传递 task-created 事件，taskid:', taskid);
         emit('task-created', taskid);
       }
       resetForm();
       return true;
     } else {
-      console.error('任务创建失败，状态:', res.status);
       ElMessage.error(res.message || '生成失败，请重试');
       return false;
     }
   } catch (error) {
-    console.error('=== 生成失败 ===');
-    console.error('错误详情:', error);
+    console.error('生成失败:', error);
     ElMessage.error(error instanceof Error ? error.message : '生成失败，请重试');
     return false;
   } finally {
@@ -554,10 +596,11 @@ const generate = async (): Promise<boolean> => {
   }
 };
 
+/**
+ * 重置表单（清空输入、图片、配置恢复默认）
+ */
 const resetForm = () => {
   console.log('=== 重置表单 ===');
-  console.log('清空的图片文件:', uploadedFileNames.value);
-
   prompt.value = '';
   uploadedFiles.value = {};
   uploadedFileNames.value = {};
@@ -567,7 +610,7 @@ const resetForm = () => {
   emit('prompt-change', true);
 };
 
-// ==================== 暴露给父组件 ====================
+// ==================== 暴露方法供父组件调用 ====================
 defineExpose({
   generate,
   resetForm,
@@ -577,24 +620,30 @@ defineExpose({
 onMounted(() => {
   loadModels();
 });
+
+// 组件卸载前清除防抖计时器
+onBeforeUnmount(() => {
+  if (priceTimer) {
+    clearTimeout(priceTimer);
+    priceTimer = null;
+  }
+});
 </script>
 
 <style scoped lang="less">
 @import url('../../assets/less/Video/text/text.less');
 
-// 全屏 + 滚动条样式
 .reference-to-video {
-  height: 100vh;                  // 占满整个视口高度
+  height: 100%;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;               // 内容超出时显示垂直滚动条
-//   padding: 16px;
+  overflow-y: auto;
   box-sizing: border-box;
-  background-color: #0f1114;      // 与设计背景一致
+  background-color: #0f1114;
 
   .card {
     margin-bottom: 16px;
-    flex-shrink: 0;               // 防止卡片被压缩
+    flex-shrink: 0;
   }
 
   .btmcard {
@@ -602,7 +651,6 @@ onMounted(() => {
   }
 }
 
-// 图片预览容器样式（保持不变）
 .image-preview-container {
   position: relative;
   width: 148px;
@@ -661,7 +709,7 @@ onMounted(() => {
 </style>
 
 <style>
-/* 全局样式（保留原有下拉框样式） */
+/* 全局样式：自定义下拉框弹出层 */
 .custom-select-popup {
   background-color: #2A2D34 !important;
   border-radius: 12px !important;
diff --git a/src/views/Bill/Bill.vue b/src/views/Bill/Bill.vue
index 6e5470a..002233a 100644
--- a/src/views/Bill/Bill.vue
+++ b/src/views/Bill/Bill.vue
@@ -13,7 +13,7 @@
             placeholder="订单状态"
             size="default"
             @change="handleFilterChange"
-            popper-class="custom-select-popper"
+            popper-class="custom-select-popup"
             class="status-select"
           >
             <el-option label="全部状态" value="" />
@@ -764,20 +764,22 @@ onMounted(() => {
 }
 </style>
 <style>
-.dark-popper .el-select-dropdown__list {
-  background-color: #1e2024 !important;
+/* 全局样式（保留原有下拉框样式） */
+.custom-select-popup {
+  background-color: #2A2D34 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+  border: none !important;
 }
 
-.dark-popper .el-select-dropdown__item {
+.custom-select-popup .el-select-dropdown__item {
   color: #ffffff !important;
+  background-color: transparent !important;
+  font-size: 14px !important;
 }
 
-.dark-popper .el-select-dropdown__item:hover {
-  background-color: #3a3d44 !important;
-}
-
-.dark-popper .el-select-dropdown__item.is-selected {
-  background-color: #2c2f36 !important;
-  color: #409eff !important;
+.custom-select-popup .el-select-dropdown__item.selected,
+.custom-select-popup .el-select-dropdown__item:hover {
+  background-color: #3a3d46 !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index eb4602c..81b8d9c 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,9 +1,18 @@
 <template>
-  <div>
+  <div class="index" ref="indexContainer">
     <div class="top"><Top /></div>
     <div class="AI"><AI /></div>
+
+    <!-- Tab 栏，后续通过添加 sticky 类实现吸顶 -->
+    <div class="sticky-tabs" :class="{ 'is-sticky': isTabSticky }">
+      <StencilTabs :activeTab="activeTab" @tab-change="handleTabChange" />
+    </div>
+
+    <!-- 瀑布流内容 -->
     <div class="stencil">
-      <Stencil
+      <StencilWaterfall
+        ref="waterfallRef"
+        :activeTab="activeTab"
         :gap="16"
         @like="handleLike"
         @make-same="handleMakeSame"
@@ -13,16 +22,84 @@
 </template>
 
 <script setup lang="ts">
-import Top from '@/components/index/top.vue';
-import AI from '@/components/index/AIMode.vue';
-import Stencil from '@/components/index/Stencil.vue';
-import type { StencilItem } from '../../types/home';
+import { ref, onMounted, onUnmounted } from 'vue'
+import Top from '@/components/index/top.vue'
+import AI from '@/components/index/AIMode.vue'
+import StencilTabs from '@/components/index/StencilTabs.vue'
+import StencilWaterfall from '@/components/index/StencilWaterfall.vue'
+import type { StencilItem } from '@/types/home'
+
+const activeTab = ref('mixed') // 默认推荐
+
+const handleTabChange = (tabType: string) => {
+  activeTab.value = tabType
+}
 
 const handleLike = (item: StencilItem) => {
-  console.log('点赞', item);
-};
+  console.log('点赞', item)
+}
 
 const handleMakeSame = (item: StencilItem) => {
-  console.log('做同款', item);
-};
-</script>
\ No newline at end of file
+  console.log('做同款', item)
+}
+
+// ===== 吸顶逻辑（示例，可根据实际滚动容器调整）=====
+const indexContainer = ref<HTMLElement>()
+const isTabSticky = ref(false)
+const tabsOffsetTop = ref(0)
+
+const handleScroll = () => {
+  if (!indexContainer.value) return
+  const scrollTop = indexContainer.value.scrollTop
+  // 当滚动超过 Tab 栏原始位置时，添加 sticky 类
+  isTabSticky.value = scrollTop >= tabsOffsetTop.value
+}
+
+onMounted(() => {
+  const container = indexContainer.value
+  if (container) {
+    container.addEventListener('scroll', handleScroll)
+    // 获取 Tab 栏距离滚动容器顶部的初始偏移量
+    const tabsEl = container.querySelector('.sticky-tabs') as HTMLElement
+    if (tabsEl) {
+      tabsOffsetTop.value = tabsEl.offsetTop
+    }
+  }
+})
+
+onUnmounted(() => {
+  indexContainer.value?.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style lang="less" scoped>
+.index {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.sticky-tabs {
+  position: relative;
+  z-index: 10;
+  background-color: #0f0f0f; /* 与页面背景一致，吸顶时遮盖内容 */
+  transition: box-shadow 0.2s;
+
+  &.is-sticky {
+    position: sticky;
+    top: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+}
+</style>
\ No newline at end of file