优化创建

.env.production

@@ -17,6 +17,9 @@ VITE_API_PAY_TARGET = 'https://sxwz.xueai.art'  # http://43.248.133.202
 VITE_API_WORKFLOW_UPLOAD = 'https://designtools.xueai.art/workflow/file/upload'  # https://sxwz.xueai.art/workflow  https://designtools.xueai.art/workflow 
 VITE_API_WORKFLOW_WS = 'wss://talkingdraw.xueai.art/testworkflow'
 
+# 模型资源
+VITE_API_MODEL_RESOURCE = 'https://resources.xueai.art/AIGC'
+
 # 是否开启KKFileView
 FILE_OPEN_PREVIEW = false
 # KKFileView服务器地址

Vidu Q3-T2V.json

@@ -0,0 +1,34 @@
+{
+  "nodeInfoList": {
+    "prompt":{ "nodeId":"2", "fieldName":"prompt", "fieldValue":"" },
+    "resolution":{ "nodeId":"2", "fieldName":"resolution", "fieldValue":"" },
+    "proportion":{ "nodeId":"2", "fieldName":"aspect_ratio", "fieldValue":"" },
+    "duration":{ "nodeId":"2", "fieldName":"duration", "fieldValue": 5},
+    "audio":{ "nodeId":"2", "fieldName":"audio", "fieldValue": false}
+  },
+  "workflowId": "2036349280088231938",
+  "display": {
+    "promptPlaceholder": {"default": "描述你想生成的画面和动作。"},
+    "prompt": {"default": ""},
+    "resolution": {"default": "1k","options":[
+      { "value": "360", "label": "流畅 360P" },
+      { "value": "540", "label": "标清 540P" },
+      { "value": "720", "label": "高清 720P" },
+      { "value": "1k", "label": "超清 1K" }
+    ]},
+    "proportion": {"default": "16:9","options":[
+      { "value": "21:9", "label": "21:9" },
+      { "value": "16:9", "label": "16:9" },
+      { "value": "4:3", "label": "4:3" },
+      { "value": "1:1", "label": "1:1" },
+      { "value": "3:4", "label": "3:4" },
+      { "value": "9:16", "label": "9:16" }
+    ]},
+    "duration": {"default": 5,"options":[ 
+      { "value": 5, "label": "5秒" },
+      { "value": 10, "label": "10秒" },
+      { "value": 15, "label": "15秒" }
+    ]},
+    "audio": {"default": false}
+  }
+}

auto-imports.d.ts

@@ -8,6 +8,7 @@ export {}
 declare global {
   const EffectScope: typeof import('vue').EffectScope
   const ElMessage: typeof import('element-plus/es').ElMessage
+  const ElMessageBox: typeof import('element-plus/es').ElMessageBox
   const ElNotification: typeof import('element-plus/es').ElNotification
   const acceptHMRUpdate: typeof import('pinia').acceptHMRUpdate
   const computed: typeof import('vue').computed

components.d.ts

@@ -24,15 +24,18 @@ declare module 'vue' {
     IEpStar: typeof import('~icons/ep/star')['default']
     ImageUploader: typeof import('./src/components/dialogBox/imageUploader/index.vue')['default']
     Img: typeof import('./src/components/Img/index.vue')['default']
-    Model: typeof import('./src/components/dialogBox/model/index.vue')['default']
+    Painting: typeof import('./src/components/dialogBox/model/painting.vue')['default']
     Pattern: typeof import('./src/components/dialogBox/pattern/index.vue')['default']
     Popover: typeof import('./src/components/Popover/index.vue')['default']
-    Proportion: typeof import('./src/components/dialogBox/proportion/index.vue')['default']
     Quantity: typeof import('./src/components/dialogBox/quantity/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Select: typeof import('./src/components/Select/index.vue')['default']
     Time: typeof import('./src/components/dialogBox/Time/index.vue')['default']
+    Video: typeof import('./src/components/dialogBox/model/video.vue')['default']
+    VideoImageUploader: typeof import('./src/components/dialogBox/videoImageUploader/index.vue')['default']
     VirtualScroller: typeof import('./src/components/virtual-scroller/VirtualScroller.vue')['default']
+    'VirtualScroller copy': typeof import('./src/components/virtual-scroller/VirtualScroller copy.vue')['default']
+    'VirtualScroller copy 2': typeof import('./src/components/virtual-scroller/VirtualScroller copy 2.vue')['default']
   }
 }

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="public, max-age=3600" />
     <title>AI Painting</title>
   </head>
   <body>

src/apis/display/index.js

@@ -7,5 +7,15 @@ export function getGenerateHistoryList(query) {
 
 // 取消或收藏
 export function cancelOrCollect(query) {
-  return service.post('/collect/toggle', query)
+  return service.post('/collect/toggle', null, { params: query })
+}
+
+// 删除生成历史
+export function deleteGenerateHistory(query) {
+  return service.delete('/taskRecordHistory/delete', { params: query })
+}
+
+// 获取免费次数
+export function getFreeTimes(id) {
+  return service.get('/plantformBalance/userBalances', { params: { id } })
 }

src/assets/dialog/videoPattern1.svg

@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5 2H15C15.5523 2 16 2.44772 16 3V5.5M16 12.5V15C16 15.5523 15.5523 16 15 16H12.5M5.5 16H3C2.44772 16 2 15.5523 2 15V12.5M2 5.5V3C2 2.44772 2.44772 2 3 2H5.5" stroke="#000F33" stroke-linecap="round"/>
-<path d="M8.53107 5.26725C8.69215 4.83194 9.30785 4.83194 9.46893 5.26725L10.0313 6.78706C10.2339 7.3345 10.6655 7.76612 11.2129 7.96869L12.7327 8.53107C13.1681 8.69215 13.1681 9.30785 12.7327 9.46893L11.2129 10.0313C10.6655 10.2339 10.2339 10.6655 10.0313 11.2129L9.46893 12.7327C9.30785 13.1681 8.69215 13.1681 8.53107 12.7327L7.96869 11.2129C7.76612 10.6655 7.3345 10.2339 6.78706 10.0313L5.26725 9.46893C4.83194 9.30785 4.83194 8.69215 5.26725 8.53107L6.78706 7.96869C7.3345 7.76612 7.76612 7.3345 7.96869 6.78706L8.53107 5.26725Z" fill="#000F33"/>
-</svg>

src/assets/dialog/videoPattern4.svg

@@ -1,4 +1,4 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5 2H15C15.5523 2 16 2.44772 16 3V5.5M16 12.5V15C16 15.5523 15.5523 16 15 16H12.5M5.5 16H3C2.44772 16 2 15.5523 2 15V12.5M2 5.5V3C2 2.44772 2.44772 2 3 2H5.5" stroke="#666666" stroke-linecap="round"/>
+<path d="M12.5 2H15C15.5523 2 16 2.44772 16 3V5.5M16 12.5V15C16 15.5523 15.5523 16 15 16H12.5M5.5 16H3C2.44772 16 2 15.5523 2 15V12.5M2 5.5V3C2 2.44772 2.44772 2 3 2H5.5" stroke="#000F33" stroke-linecap="round"/>
-<path d="M10 10.1765C10.7712 10.1765 11.5127 10.456 12.0707 10.957C12.6288 11.458 12.9603 12.142 12.9967 12.867L13 13H5C5 12.2512 5.31607 11.533 5.87868 11.0035C6.44129 10.4739 7.20435 10.1765 8 10.1765H10ZM9 5C9.66304 5 10.2989 5.2479 10.7678 5.68916C11.2366 6.13042 11.5 6.7289 11.5 7.35294C11.5 7.97698 11.2366 8.57546 10.7678 9.01672C10.2989 9.45798 9.66304 9.70588 9 9.70588C8.33696 9.70588 7.70107 9.45798 7.23223 9.01672C6.76339 8.57546 6.5 7.97698 6.5 7.35294C6.5 6.7289 6.76339 6.13042 7.23223 5.68916C7.70107 5.2479 8.33696 5 9 5Z" fill="#666666"/>
+<path d="M8.53107 5.26725C8.69215 4.83194 9.30785 4.83194 9.46893 5.26725L10.0313 6.78706C10.2339 7.3345 10.6655 7.76612 11.2129 7.96869L12.7327 8.53107C13.1681 8.69215 13.1681 9.30785 12.7327 9.46893L11.2129 10.0313C10.6655 10.2339 10.2339 10.6655 10.0313 11.2129L9.46893 12.7327C9.30785 13.1681 8.69215 13.1681 8.53107 12.7327L7.96869 11.2129C7.76612 10.6655 7.3345 10.2339 6.78706 10.0313L5.26725 9.46893C4.83194 9.30785 4.83194 8.69215 5.26725 8.53107L6.78706 7.96869C7.3345 7.76612 7.76612 7.3345 7.96869 6.78706L8.53107 5.26725Z" fill="#000F33"/>
 </svg>

src/assets/dialog/videoPattern6.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 2H15C15.5523 2 16 2.44772 16 3V5.5M16 12.5V15C16 15.5523 15.5523 16 15 16H12.5M5.5 16H3C2.44772 16 2 15.5523 2 15V12.5M2 5.5V3C2 2.44772 2.44772 2 3 2H5.5" stroke="#666666" stroke-linecap="round"/>
+<path d="M10 10.1765C10.7712 10.1765 11.5127 10.456 12.0707 10.957C12.6288 11.458 12.9603 12.142 12.9967 12.867L13 13H5C5 12.2512 5.31607 11.533 5.87868 11.0035C6.44129 10.4739 7.20435 10.1765 8 10.1765H10ZM9 5C9.66304 5 10.2989 5.2479 10.7678 5.68916C11.2366 6.13042 11.5 6.7289 11.5 7.35294C11.5 7.97698 11.2366 8.57546 10.7678 9.01672C10.2989 9.45798 9.66304 9.70588 9 9.70588C8.33696 9.70588 7.70107 9.45798 7.23223 9.01672C6.76339 8.57546 6.5 7.97698 6.5 7.35294C6.5 6.7289 6.76339 6.13042 7.23223 5.68916C7.70107 5.2479 8.33696 5 9 5Z" fill="#666666"/>
+</svg>

src/assets/display/collection-active.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1494 2.5C13.039 2.5 14.4998 3.96763 14.5 5.88477C14.5 7.06494 13.9819 8.17537 12.9678 9.4209C11.9479 10.6736 10.4752 12.006 8.64648 13.6387C8.63893 13.6454 8.63116 13.652 8.62402 13.6592L8.35547 13.9307C8.15984 14.1281 7.84016 14.1281 7.64453 13.9307L7.37598 13.6592L7.35352 13.6387L6.05078 12.4668C4.81731 11.3444 3.79719 10.3604 3.03223 9.4209C2.01813 8.17537 1.5 7.06494 1.5 5.88477C1.50024 3.9673 2.9594 2.5 4.84863 2.5C5.88613 2.5 6.93824 2.99756 7.61523 3.80469C7.71024 3.91796 7.85021 3.9834 7.99805 3.9834C8.14588 3.9834 8.28586 3.91796 8.38086 3.80469C9.05777 2.99766 10.1098 2.5 11.1494 2.5Z" fill="#FF4D4F"/>
+</svg>

src/components/Select/index.vue

@@ -29,8 +29,8 @@
             v-for="(option, index) in group.options"
             :key="option.value || index"
             class="dropdown-item"
-            :class="{ selected: option.value === selectedValue }"
+            :class="{ selected: option.value === selectedValue, disabled: option.disabled }"
-            @click.stop="selectOption(option)"
+            @click.stop="!option.disabled && selectOption(option)"
           >
             <slot name="option" :option="option" :selected="option.value === selectedValue">
               <div class="option-content">
@@ -46,8 +46,8 @@
           v-for="(option, index) in options"
           :key="option.value || index"
           class="dropdown-item"
-          :class="{ selected: option.value === selectedValue }"
+          :class="{ selected: option.value === selectedValue, disabled: option.disabled }"
-          @click.stop="selectOption(option)"
+          @click.stop="!option.disabled && selectOption(option)"
         >
           <slot name="option" :option="option" :selected="option.value === selectedValue">
             <div class="option-content">
@@ -321,12 +321,17 @@ onBeforeUnmount(() => {
   line-height: normal;
 }
 
-.dropdown-item:hover {
+.dropdown-item:hover:not(.disabled) {
   color: #333333;
   background-color: #f5f6f7;
   border-radius: 10px;
 }
 
+.dropdown-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .dropdown-item.selected {
   color: #333;
   font-weight: 400;

src/components/canvas/index.vue

@@ -89,7 +89,10 @@
               </div>
             </div>
 
-            <button class="confirm-btn" @click="handleSend">发送</button>
+            <button class="confirm-btn" :class="{ loading: isSending }" :disabled="isSending" @click="handleSend">
+              <span v-if="isSending">发送中...</span>
+              <span v-else>发送</span>
+            </button>
           </div>
         </div>
       </div>
@@ -158,7 +161,8 @@
 
 <script setup>
 import { generate } from '@/utils/websocket'
-import { useDisplayStore } from '@/stores'
+import { useDisplayStore, useUserStore } from '@/stores'
+import request from '@/utils/request'
 
 const props = defineProps({
   visible: {
@@ -176,6 +180,10 @@ const props = defineProps({
   source: {
     type: String,
     default: ''
+  },
+  type: {
+    type: String,
+    default: ''
   }
 })
 
@@ -208,6 +216,7 @@ const selectedReferenceImages = ref([])
 const currentEditingShapeIndex = ref(-1)
 const isPanelOpen = ref(false)
 const currentEditingContent = ref('')
+const isSending = ref(false)
 
 const handleInput = (e) => {
   inputText.value = e.target.innerHTML
@@ -236,15 +245,15 @@ const updateCurrentEditingContent = (description) => {
   const shapeWord = shapeType === 'circle' ? '圈' : '框'
   
   if (selectedReferenceImages.value.length > 0) {
-    const imageIndex = allReferenceImages.value.indexOf(selectedReferenceImages.value[0]) + 1
+    const imageIndex = allReferenceImages.value.indexOf(selectedReferenceImages.value[0]) + 2
     const prefix = isFirstShape ? '' : '，'
-    currentEditingContent.value = `${prefix}将${colorName}${shapeWord}内的【XXX】替换为【图${imageIndex}中的${description}】`
+    currentEditingContent.value = `${prefix}将图1${colorName}${shapeWord}内的【XXX】替换为【图${imageIndex}中的${description}】`
   } else if (description) {
     const prefix = isFirstShape ? '' : '，'
-    currentEditingContent.value = `${prefix}将${colorName}${shapeWord}内的【XXX】替换为【${description}】`
+    currentEditingContent.value = `${prefix}将图1${colorName}${shapeWord}内的【XXX】替换为【${description}】`
   } else {
     const prefix = isFirstShape ? '' : '，'
-    currentEditingContent.value = `${prefix}将${colorName}${shapeWord}内的【XXX】替换为【XXX】或【图X中的XXX】`
+    currentEditingContent.value = `${prefix}将图1${colorName}${shapeWord}内的【XXX】替换为【XXX】或【图X中的XXX】`
   }
 }
 
@@ -281,7 +290,13 @@ const initCanvas = () => {
   const containerHeight = container.clientHeight
   
   if (currentImage.value) {
-    if (currentImage.value.startsWith('data:')) {
+    let imageUrl = currentImage.value
+    
+    if (!imageUrl.startsWith('data:')) {
+      imageUrl = imageUrl.replace('https://sxwz.xueai.art', 'https://talkingdraw.xueai.art')
+    }
+    
+    if (imageUrl.startsWith('data:')) {
       const img = new Image()
       img.onload = () => {
         const imgScale = Math.min(containerWidth / img.width, containerHeight / img.height)
@@ -291,9 +306,9 @@ const initCanvas = () => {
         bgImage.value = img
         scale.value = imgScale
       }
-      img.src = currentImage.value
+      img.src = imageUrl
     } else {
-      fetch(currentImage.value)
+      fetch(imageUrl)
         .then(res => res.blob())
         .then(blob => {
           const img = new Image()
@@ -531,11 +546,15 @@ const handleClose = () => {
 }
 
 const handleSend = async () => {
+  if (isSending.value) return
   if (!inputText.value) {
     ElMessage.error('请输入提示词')
     return
   }
   
+  isSending.value = true
+  
+  try {
     const canvas = canvasRef.value
     const imageData = canvas.toDataURL('image/png')
     
@@ -548,18 +567,59 @@ const handleSend = async () => {
       imgs.push({ name: `image_${index + 2}`, url: img })
     })
     
+    const uploadImg = async (imgItem) => {
+      if (!imgItem.url.startsWith('data:') && !imgItem.url.startsWith('blob:')) {
+        return imgItem
+      }
+      
+      const response = await fetch(imgItem.url)
+      const blob = await response.blob()
+      const file = new File([blob], `${imgItem.name}.png`, { type: 'image/png' })
+      
+      const formData = new FormData()
+      formData.append('file', file)
+      
+      try {
+        const result = await request({
+          url: import.meta.env.VITE_API_WORKFLOW_UPLOAD,
+          method: 'POST',
+          data: formData,
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        if (result.success || result.code === 0) {
+          return { name: imgItem.name, url: result.url }
+        }
+        return imgItem
+      } catch (error) {
+        console.error('上传失败:', error)
+        return imgItem
+      }
+    }
+    
+    const uploadedImgs = await Promise.all(imgs.map(uploadImg))
+
+    const generateData = {
+      model: 'banana',
+      modelType: 'edit',
+      prompt: inputText.value,
+      proportion: '比例自动'
+    }
     const data = {
+      type: props.type,
+      modelType: 'edit',
       AIGC: 'Painting',
       platform: 'runninghub',
-    file_type: 'image',
+      modelName: 'banana',
-    modelName: 'flux',
+      quantity: 1,
+      free: useUserStore().freeTimes,
       params: [
-      { name: 'prompt', data: inputText.value },
+        { name: 'prompt', data: inputText.value + '并且去除掉图1中的框' },
-      { name: 'quantity', data: 1 },
+        { name: 'index', data: 1 },
-      { name: 'aspect_ratio', data: '16:9' },
-      { name: 'resolution', data: '1k' }
       ],
-    imgs
+      imgs: uploadedImgs,
+      result: JSON.stringify(generateData)
     }
     
     emit('send', {
@@ -568,8 +628,11 @@ const handleSend = async () => {
       shapes: shapes.value
     })
     
-  await generate('text', data)
+    await generate(data, generateData)
     handleClose()
+  } finally {
+    isSending.value = false
+  }
 }
 
 const removeReferenceImage = (index) => {
@@ -592,7 +655,7 @@ const handleUploadReference = () => {
   input.type = 'file'
   input.accept = 'image/*'
   input.multiple = true
-  input.onchange = (e) => {
+  input.onchange = async (e) => {
     const files = Array.from(e.target.files)
     const remainingSlots = 5 - allReferenceImages.value.length
     
@@ -603,14 +666,18 @@ const handleUploadReference = () => {
     
     const filesToUpload = files.slice(0, remainingSlots)
     
-    filesToUpload.forEach(file => {
+    const readFileAsDataURL = (file) => {
+      return new Promise((resolve, reject) => {
         const reader = new FileReader()
-      reader.onload = (event) => {
+        reader.onload = (event) => resolve(event.target.result)
-        allReferenceImages.value.push(event.target.result)
+        reader.onerror = (error) => reject(error)
-      }
         reader.readAsDataURL(file)
       })
     }
+    
+    const imageDataUrls = await Promise.all(filesToUpload.map(readFileAsDataURL))
+    allReferenceImages.value.push(...imageDataUrls)
+  }
   input.click()
 }
 
@@ -691,7 +758,7 @@ const handleBrushConfirm = () => {
     .preview-text {
       color: #333;
       font-family: "Microsoft YaHei";
-      font-size: 16px;
+      font-size: 14px;
       font-style: normal;
       font-weight: 700;
       line-height: normal;
@@ -818,11 +885,6 @@ const handleBrushConfirm = () => {
       cursor: pointer;
       transition: all 0.3s;
 
-      &:hover {
-        // border-color: #409eff;
-        // color: #409eff;
-      }
-
       &.active {
         color: #fff;
 
@@ -847,10 +909,6 @@ const handleBrushConfirm = () => {
       cursor: pointer;
       transition: all 0.3s;
 
-      &:hover {
-        // border-color: #409eff;
-        // color: #409eff;
-      }
     }
   }
 }
@@ -867,6 +925,18 @@ const handleBrushConfirm = () => {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:disabled {
+    background: #999;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  &.loading {
+    background: #666;
+  }
 }
 
 .brush-panel {
@@ -893,7 +963,7 @@ const handleBrushConfirm = () => {
       .brush-panel-title {
         color: #333;
         font-family: "Microsoft YaHei";
-        font-size: 16px;
+        font-size: 14px;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
@@ -959,7 +1029,7 @@ const handleBrushConfirm = () => {
       .brush-panel-text {
         color: #333;
         font-family: "Microsoft YaHei";
-        font-size: 16px;
+        font-size: 14px;
         font-style: normal;
         font-weight: 700;
         line-height: normal;

src/components/dialogBox/Time/index.vue

@@ -21,6 +21,17 @@ const props = defineProps({
   modelValue: {
     type: Number,
     default: 1
+  },
+  options: {
+    type: Array,
+    default: () => [
+      { value: 5, label: '5s' },
+      { value: 6, label: '6s' },
+      { value: 7, label: '7s' },
+      { value: 8, label: '8s' },
+      { value: 9, label: '9s' },
+      { value: 10, label: '10s' }
+    ]
   }
 })
 
@@ -31,14 +42,7 @@ const quantity = computed({
   set: (value) => emit('update:modelValue', value)
 })
 
-const quantityOptions = [
+const quantityOptions = computed(() => props.options)
-  { value: 5, label: '5s' },
-  { value: 6, label: '6s' },
-  { value: 7, label: '7s' },
-  { value: 8, label: '8s' },
-  { value: 9, label: '9s' },
-  { value: 10, label: '10s' }
-]
 </script>
 
 <style lang="less" scoped>

src/components/dialogBox/imageUploader/index.vue

@@ -40,6 +40,9 @@ const props = defineProps({
     type: Number,
     default: 1
   },
+  /**
+   * 图片列表，每个元素包含 url 和 uid 属性
+   */
   modelValue: {
     type: Array,
     default: () => []
@@ -52,13 +55,39 @@ const uploadurl = import.meta.env.VITE_API_WORKFLOW_UPLOAD
 const uploadRef = ref(null)
 const imageList = ref([...props.modelValue])
 const localPreviewList = ref([...props.modelValue])
+const isUploading = ref(false)
 
-watch(() => props.modelValue, (newVal) => {
+watch(() => props.modelValue, async (newVal) => {
-  imageList.value = [...newVal]
+  if (isUploading.value) {
-  if (newVal.length === 0) {
+    return
-    localPreviewList.value = []
   }
-}, { deep: true })
+  
+  imageList.value = [...newVal]
+  
+  const newPreviewList = []
+  for (const img of newVal) {
+    let previewImg = { ...img }
+    if (img.url && !img.url.startsWith('blob:')) {
+      try {
+        const response = await fetch(img.url)
+        const blob = await response.blob()
+        previewImg = {
+          ...img,
+          url: URL.createObjectURL(blob),
+          serverUrl: img.url
+        }
+      } catch (error) {
+        console.error('Failed to create blob URL:', error)
+        previewImg = {
+          ...img,
+          serverUrl: img.url
+        }
+      }
+    }
+    newPreviewList.push(previewImg)
+  }
+  localPreviewList.value = newPreviewList
+}, { deep: true, immediate: true })
 
 const triggerUpload = () => {
   uploadRef.value.$el.querySelector('input').click()
@@ -81,6 +110,8 @@ const beforeUpload = (rawFile) => {
 const handleSuccess = (response, uploadFile) => {
   ElMessage.success('上传成功')
   
+  isUploading.value = true
+  
   const localUrl = URL.createObjectURL(uploadFile.raw)
   
   const newImage = {
@@ -92,9 +123,14 @@ const handleSuccess = (response, uploadFile) => {
   
   const newPreview = {
     uid: uploadFile.uid,
-    url: localUrl
+    url: localUrl,
+    serverUrl: response.url
   }
   localPreviewList.value.push(newPreview)
+  
+  nextTick(() => {
+    isUploading.value = false
+  })
 }
 
 const handleError = () => {
@@ -107,7 +143,7 @@ const handleExceed = () => {
 
 const handleDelete = (index) => {
   const previewItem = localPreviewList.value[index]
-  if (previewItem && previewItem.url.startsWith('blob:')) {
+  if (previewItem && previewItem.url && previewItem.url.startsWith('blob:')) {
     URL.revokeObjectURL(previewItem.url)
   }
   
@@ -117,10 +153,10 @@ const handleDelete = (index) => {
 }
 
 const handleImageClick = (clickedIndex) => {
-  const clickedImage = imageList.value[clickedIndex]
+  const clickedImage = localPreviewList.value[clickedIndex]
   if (!clickedImage) return
   
-  const otherImages = imageList.value
+  const otherImages = localPreviewList.value
     .filter((_, index) => index !== clickedIndex)
     .map((img, index) => ({
       ...img,

src/components/dialogBox/index.vue

@@ -1,39 +1,63 @@
 <template>
   <Transition name="slide-up">
     <div class="input-container" :class="{ generate : !props.isGenerate }" @click="handleContainerClick">
-      <div v-if="!props.isGenerate && props.type === 'painting'" class="title">AI绘画2026</div>
+      <div v-if="!props.isGenerate && props.type === 'Painting'" class="title">AI绘画2026</div>
-      <div v-if="!props.isGenerate && props.type === 'video'" class="title">AI视频2026</div>
+      <div v-if="!props.isGenerate && props.type === 'Video'" class="title">AI视频2026</div>
 
       <div class="sender-top">
         <div v-if="useDisplay.Sender_variant === 'default'" class="scroll-to-bottom-text" @click.stop="handleScrollToBottom">回到底部<img src="@/assets/dialog/ArrowDown.svg"></div>
 
         <div v-show="modelType !== 'text'" class="upload-img-container">
           <div class="reference-diagram">
-            <ImageUploader ref="referenceDiagramRef" v-model="referenceImages" :limit="4" @open-canvas="handleOpenCanvas" />
+            <ImageUploader 
+              v-if="props.type === 'Painting'" 
+              ref="referenceDiagramRef" 
+              v-model="referenceImages" 
+              :limit="4" 
+              @open-canvas="handleOpenCanvas" 
+            />
+            <VideoImageUploader 
+              v-else-if="props.type === 'Video'" 
+              ref="referenceDiagramRef" 
+              v-model="referenceImages" 
+              :model-type="modelType"
+              :images-count="modelDisplayConfig?.display?.images || 1" 
+            />
           </div>
         </div>
       </div>
 
       <Sender :key="useDisplay.Sender_variant" v-model="prompt" :variant="useDisplay.Sender_variant" :placeholder="promptPlaceholder" :submit-btn-disabled="isgerenate.value" :auto-size="autoSizeConfig">
         <template #prefix>
-          <div v-show="useDisplay.Sender_variant !== 'default' && props.type === 'painting'" class="prefix-self-wrap">
+          <div v-if="useDisplay.Sender_variant !== 'default' && props.type === 'Painting'" class="prefix-self-wrap">
-            <Model v-model="model" v-model:typeValue="modelType" :type="props.type" />
+            <paintingModel v-model="model" v-model:typeValue="modelType" />
-            <Proportion v-model="proportion" v-model:resolution="resolution" />
+            <paintingProportion 
+              v-model="proportion" 
+              v-model:resolution="resolution" 
+              :proportion-options="proportionOptions"
+              :resolution-options="resolutionOptions"
+            />
             <Quantity v-model="quantity" />
           </div>
 
-          <div v-show="useDisplay.Sender_variant !== 'default' && props.type === 'video'" class="prefix-self-wrap">
+          <div v-if="useDisplay.Sender_variant !== 'default' && props.type === 'Video'" class="prefix-self-wrap">
-            <Model v-model="model" v-model:typeValue="modelType" :type="props.type" />
             <Pattern v-model="videoPattern" />
-            <Proportion v-model="proportion" v-model:resolution="resolution" :type="props.type" />
+            <videoModel v-model="model" v-model:typeValue="modelType" :video-pattern="videoPattern" />
-            <Time v-model="time" />
+            
+            <videoProportion 
+              v-model="proportion" 
+              v-model:resolution="resolution" 
+              :proportion-options="proportionOptions"
+              :resolution-options="resolutionOptions"
+            />
+            <Time v-model="duration" :options="durationOptions" />
           </div>
         </template>
 
         <template #action-list>
           <div style="display: flex; align-items: center; gap: 8px; height: 100%;">
-            <el-button v-if="isgerenate" round color="#626aef" style="animation: spin 1s linear infinite;">
+            <el-button v-if="isgerenate" round color="#626aef">
-              <i-ep-loading />
+              <i-ep-loading style="animation: spin 1s linear infinite;"  />
             </el-button>
             <div v-else class="gerenate" :class="{ isprompt: prompt }" @click="handleStart">
               <img v-if="!prompt" src="@/assets/dialog/darkArrow.svg" alt="" />
@@ -49,16 +73,20 @@
 </template>
 
 <script setup>
-import Proportion from './proportion/index.vue'
+import paintingProportion from './proportion/painting.vue'
+import videoProportion from './proportion/video.vue'
+import paintingModel from './model/painting.vue'
+import videoModel from './model/video.vue'
 import Quantity from './quantity/index.vue'
 import Pattern from './pattern/index.vue'
-import Model from './model/index.vue'
 import ImageUploader from './imageUploader/index.vue'
+import VideoImageUploader from './videoImageUploader/index.vue'
 import Time from './Time/index.vue'
 import { Sender } from 'vue-element-plus-x'
-import { useDisplayStore } from '@/stores'
+import { useDisplayStore, useUserStore } from '@/stores'
 import { generate } from '@/utils/websocket'
 import { useRouter } from 'vue-router'
+import { fetchModelConfig } from '@/utils/modelConfig'
 
 const props = defineProps({
   isGenerate: {
@@ -71,32 +99,39 @@ const props = defineProps({
   },
   type: {
     type: String,
-    default: 'painting'
+    default: 'Painting'
   }
 })
 
-const emit = defineEmits(['open-canvas'])
 const router = useRouter()
 const useDisplay = useDisplayStore()
+const useUser = useUserStore()
 
 const isgerenate = ref(false)
 
-const model = ref('flux')
+const model = ref() // 模型
 const modelType = ref('text')
 
-// 公用参数
+const modelDisplayConfig = ref(null)
-const prompt = ref('一个女孩在树下吃苹果')
+const promptPlaceholder = ref('描述你想生成的画面和动作。') // 提示词占位符
-const promptPlaceholder = '描述你想生成的画面和动作。'
+
-const proportion = ref('16:9')
+const prompt = ref('') // 提示词
+const proportion = ref('16:9') // 比例
+const resolution = ref('1k') // 分辨率
 const referenceImages = ref([])
 
 // 绘画
-const quantity = ref(1)
+const quantity = ref(1) // 生成数量
-const resolution = ref('1k')
 
 // 视频
-const time = ref(5)
+const duration = ref(5) // 时间
-const videoPattern = ref('全能参考')
+const videoPattern = ref('文生视频') // 视频模式下，默认值为'文生视频'
+
+const resolutionOptions = ref([])
+const proportionOptions = ref([])
+const durationOptions = ref([])
+
+const isInitialized = ref(false)
 
 const autoSizeConfig = computed(() => {
   if (useDisplay.Sender_variant !== 'default') {
@@ -106,39 +141,129 @@ const autoSizeConfig = computed(() => {
   }
 })
 
+const loadModelConfig = async (modelName, currentModelType) => {
+  try {
+    const config = await fetchModelConfig(props.type, modelName, currentModelType)
+    modelDisplayConfig.value = config
+    
+    if (config.display) {
+      const display = config.display
+      
+      if (display.promptPlaceholder) {
+        promptPlaceholder.value = display.promptPlaceholder.default || '描述你想生成的画面和动作。'
+      }
+      
+      if (display.prompt && !isInitialized.value) {
+        prompt.value = display.prompt.default || ''
+      }
+      
+      if (display.resolution) {
+        resolution.value = display.resolution.default || '1k'
+        resolutionOptions.value = display.resolution.options || []
+      }
+      
+      if (display.proportion) {
+        proportion.value = display.proportion.default || '16:9'
+        proportionOptions.value = display.proportion.options || []
+      }
+      
+      if (display.duration) {
+        duration.value = display.duration.default || 5
+        durationOptions.value = display.duration.options || []
+      }
+    }
+    
+    isInitialized.value = true
+    
+    return config
+  } catch (error) {
+    console.error('加载模型配置失败:', error)
+    return null
+  }
+}
+
 const handleStart = async () => {
+  const currentType = props.type
+  let currentModelType = modelType.value
+
+  if(model.value === 'Seedance 2.0') {
+    ElMessage.primary('敬请期待 Seedance 2.0')
+    return
+  }
+  
   if (!props.isGenerate) {
-    router.push({ name: 'home', query: { loading: false, Generate: true } })
+    router.push({ name: 'home', query: { loading: false, Generate: true, type: currentType } })
   }
   if (!prompt.value) {
     // eslint-disable-next-line no-undef
     ElMessage.error('请输入提示词')
     return
   }
+  if (modelType.value === 'image' && !referenceImages.value.length){
+    ElMessage.warning('请上传图片')
+    return
+  }
+  
   isgerenate.value = true
   console.log('生成开始', isgerenate.value)
   const imgs = []
   referenceImages.value.forEach((img, index) => {
     imgs.push({ name: `image_${index + 1}`, url: img.url })
   })
-  console.log('imgs', imgs)
+  
+  const generateData = {
+    model: model.value,
+    modelType: currentModelType,
+    prompt: prompt.value,
+    proportion: proportion.value,
+    referenceImages: referenceImages.value,
+    quantity: quantity.value,
+    resolution: resolution.value,
+    duration: duration.value,
+    videoPattern: videoPattern.value
+  }
+  
   const data = { 
-    AIGC: 'Painting',
+    type: currentType,
+    modelType: currentModelType,
+    AIGC: currentType,
     platform: 'runninghub',
-    file_type: 'image',
     modelName: model.value,
+    quantity: quantity.value,
+    free: useUser.freeTimes,
     params: [
       { name: 'prompt', data: prompt.value}, 
       { name: 'quantity', data: quantity.value},
-      { name: 'aspect_ratio', data: proportion.value},
+      { name: 'proportion', data: proportion.value},
       { name: 'resolution', data: resolution.value},
+      { name: 'duration', data: duration.value}
     ],
-    imgs
+    imgs,
+    result: JSON.stringify(generateData)
   }
-  await generate(modelType.value, data)
+  await generate(data, generateData)
   console.log('生成中', isgerenate.value)
 }
 
+const fillParamsFromResult = (resultData) => {
+  if (!resultData) return
+
+  if (resultData.model !== undefined) model.value = resultData.model
+  if (resultData.modelType !== undefined) modelType.value = resultData.modelType
+  if (resultData.prompt !== undefined) prompt.value = resultData.prompt
+  if (resultData.proportion !== undefined) proportion.value = resultData.proportion
+  if (resultData.referenceImages !== undefined) referenceImages.value = resultData.referenceImages
+  if (resultData.quantity !== undefined) quantity.value = resultData.quantity
+  if (resultData.resolution !== undefined) resolution.value = resultData.resolution
+  if (resultData.duration !== undefined) duration.value = resultData.duration
+  if (resultData.videoPattern !== undefined) videoPattern.value = resultData.videoPattern
+}
+
+defineExpose({
+  fillParamsFromResult,
+  handleStart
+})
+
 const handleContainerClick = () => {
   if (useDisplay.Sender_variant === 'default') {
     useDisplay.Sender_variant = 'updown'
@@ -151,23 +276,37 @@ const handleScrollToBottom = () => {
 }
 
 const handleOpenCanvas = (data) => {
-  emit('open-canvas', data)
+  useDisplay.openCanvas(data)
 }
 
 watch(() => useDisplay.isSubGerenate, (newValue) => {
   console.log('生成状态', newValue)
   isgerenate.value = newValue
-  // handleScrollToBottom()
 }, { immediate: true })
 
-watch(() => modelType.value, (newValue) => {
+watch([() => model.value, () => modelType.value], async ([newModel, newModelType]) => {
-  console.log('modelType.value', newValue)
+  console.log('模型或类型改变:', newModel, newModelType)
-})
+  if (newModel && newModelType) {
-onMounted(() => {
+    await loadModelConfig(newModel, newModelType)
-  if(props.type === 'video'){
-    model.value = 'Vidu Q3-T2V'
   }
 })
+
+watch(() => props.type, (newType) => {
+  if (newType === 'Video') {
+    model.value = 'LTX2.0'
+  } else {
+    model.value = 'flux'
+  }
+  const chargeType = newType === 'Painting' ? 1 : 4
+  useUser.fetchFreeTimes(chargeType)
+}, { immediate: true })
+
+// 组件挂载时获取免费次数
+onMounted(async () => {
+  const chargeType = props.type === 'Painting' ? 1 : 4
+  await useUser.fetchFreeTimes(chargeType)
+  console.log('免费次数', useUser.freeTimes)
+})
 </script>
 
 <style lang="less" scoped>
@@ -194,11 +333,12 @@ onMounted(() => {
   position: relative;
 
   .scroll-to-bottom-text {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
     padding: 10px;
-    width: auto;
-    height: auto;
     border-radius: 10px;
-    // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     background-color: #F8F9FA;
     color: #666;
     font-size: 12px;
@@ -206,6 +346,7 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     gap: 5px;
+
     &:active {
       transform: scale(0.95);
     }

src/components/dialogBox/model/painting.vue

@@ -13,8 +13,6 @@
 
 <script setup>
 import Select from '@/components/Select/index.vue'
-import paintingConfig from '@/config/modelConfig/painting.json'
-import videoConfig from '@/config/modelConfig/video.json'
 
 const props = defineProps({
   modelValue: {
@@ -24,15 +22,52 @@ const props = defineProps({
   typeValue: {
     type: String,
     default: 'text'
-  },
-  type: {
-    type: String,
-    default: 'painting'
   }
 })
 
 const emit = defineEmits(['update:modelValue', 'update:typeValue'])
 
+const paintingConfig = ref({
+  generate: [],
+  edit: [],
+  vision: []
+})
+
+const fetchConfig = async () => {
+  try {
+    const url = `${import.meta.env.VITE_API_MODEL_RESOURCE}/static/public/Platform/AIGC_modelConfig/painting.json`
+    const response = await fetch(url)
+    const data = await response.json()
+    paintingConfig.value = data
+  } catch (error) {
+    console.error('Failed to fetch painting config:', error)
+  }
+}
+
+
+fetchConfig()
+
+watch(() => paintingConfig.value, (newConfig) => {
+  const allModels = [
+    ...(newConfig.generate || []),
+    ...(newConfig.edit || []),
+    ...(newConfig.vision || [])
+  ]
+  if (allModels.length > 0) {
+    const enabledModels = allModels.filter(m => !m.disabled)
+    if (enabledModels.length > 0) {
+      const currentModelExists = enabledModels.find(m => m.value === props.modelValue)
+      if (!currentModelExists) {
+        const firstEnabled = enabledModels[0].value
+        emit('update:modelValue', firstEnabled)
+        const newType = getModelType(firstEnabled)
+        emit('update:typeValue', newType)
+      }
+    }
+  }
+}, { deep: true })
+
+
 const model = computed({
   get: () => props.modelValue,
   set: (value) => {
@@ -42,35 +77,11 @@ const model = computed({
   }
 })
 
-const getModelsByType = (type) => {
+const generateModels = computed(() => paintingConfig.value.generate || [])
-  if (type === 'video') {
+const editModels = computed(() => paintingConfig.value.edit || [])
-    return videoConfig.video || []
+const visionModels = computed(() => paintingConfig.value.vision || [])
-  }
-  const config = paintingConfig
-  return {
-    generate: config.generate || [],
-    edit: config.edit || [],
-    vision: config.vision || []
-  }
-}
-
-const modelData = computed(() => {
-  return getModelsByType(props.type)
-})
-
-const isVideo = computed(() => props.type === 'video')
-
-const generateModels = computed(() => modelData.value.generate || [])
-const editModels = computed(() => modelData.value.edit || [])
-const visionModels = computed(() => modelData.value.vision || [])
 
 const modelGroups = computed(() => {
-  if (isVideo.value) {
-    return [{
-      label: '选择模型',
-      options: modelData.value
-    }]
-  }
   return [
     {
       label: '生成模型',
@@ -88,9 +99,6 @@ const modelGroups = computed(() => {
 })
 
 const getModelType = (value) => {
-  if (isVideo.value) {
-    return 'text'
-  }
   if (generateModels.value.find(m => m.value === value)) {
     return 'text'
   }
@@ -102,6 +110,25 @@ const getModelType = (value) => {
   }
   return 'text'
 }
+
+const getFirstEnabledModel = () => {
+  const allModels = [...generateModels.value, ...editModels.value, ...visionModels.value]
+  const firstEnabled = allModels.find(m => !m.disabled)
+  return firstEnabled ? firstEnabled.value : ''
+}
+
+watch(() => props.modelValue, (newValue) => {
+  const allModels = [...generateModels.value, ...editModels.value, ...visionModels.value]
+  const currentModel = allModels.find(m => m.value === newValue)
+  if (currentModel && currentModel.disabled) {
+    const firstEnabled = getFirstEnabledModel()
+    if (firstEnabled) {
+      emit('update:modelValue', firstEnabled)
+      const newType = getModelType(firstEnabled)
+      emit('update:typeValue', newType)
+    }
+  }
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>

src/components/dialogBox/model/video.vue

@@ -0,0 +1,149 @@
+<template>
+    <Select
+        v-model="model"
+        :options="modelGroups"
+        class="model-select"
+        position="top"
+    >
+        <template #prefix>
+            <img src="@/assets/dialog/model.svg" alt="" style="width: 16px;">
+        </template>
+    </Select>
+</template>
+
+<script setup>
+import Select from '@/components/Select/index.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  typeValue: {
+    type: String,
+    default: 'text'
+  },
+  videoPattern: {
+    type: String,
+    default: '文生视频'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:typeValue'])
+
+const videoConfig = ref({})
+
+const fetchConfig = async () => {
+  try {
+    const url = `${import.meta.env.VITE_API_MODEL_RESOURCE}/static/public/Platform/AIGC_modelConfig/video.json`
+    const response = await fetch(url)
+    const data = await response.json()
+    videoConfig.value = data
+  } catch (error) {
+    console.error('Failed to fetch video config:', error)
+  }
+}
+
+
+fetchConfig()
+
+watch(() => videoConfig.value, (newConfig) => {
+  const models = newConfig[props.videoPattern] || []
+  if (models.length > 0) {
+    const enabledModels = models.filter(m => !m.disabled)
+    if (enabledModels.length > 0) {
+      const currentModelExists = enabledModels.find(m => m.value === props.modelValue)
+      if (!currentModelExists) {
+        model.value = enabledModels[0].value
+      }
+    }
+  }
+}, { deep: true })
+
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+    const newType = getModelType(props.videoPattern)
+    emit('update:typeValue', newType)
+  }
+})
+
+const modelGroups = computed(() => {
+  const models = videoConfig.value[props.videoPattern] || []
+  return models
+})
+
+const getModelType = (value) => {
+  switch (value) {
+    case '文生视频':
+      return 'text'
+    case '首尾帧':
+      return 'image'
+    case '数字人':
+      return 'digitalHuman'
+    default:
+      return 'text'
+  }
+}
+
+watch(() => props.videoPattern, (newPattern) => {
+  const models = videoConfig.value[newPattern] || []
+  if (models.length > 0) {
+    const enabledModels = models.filter(m => !m.disabled)
+    if (enabledModels.length > 0) {
+      const currentModelExists = enabledModels.find(m => m.value === props.modelValue)
+      if (!currentModelExists) {
+        model.value = enabledModels[0].value
+      }
+    }
+  }
+})
+
+watch(() => props.modelValue, (newValue) => {
+  const models = videoConfig.value[props.videoPattern] || []
+  const currentModel = models.find(m => m.value === newValue)
+  if (currentModel && currentModel.disabled) {
+    const enabledModels = models.filter(m => !m.disabled)
+    if (enabledModels.length > 0) {
+      model.value = enabledModels[0].value
+    }
+  }
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+.model-select {
+    :deep(.select-header) {
+        height: 40px;
+        padding: 0 15px;
+        border-radius: 10px;
+        border: 1px solid #E8E9EB;
+        background: #f5f6f7;
+        
+        &:hover {
+            background: #e9eaeb;
+        }
+    }
+    
+    :deep(.select-text) {
+      font-size: 14px;
+    }
+    
+    :deep(.dropdown-menu) {
+        max-height: 510px;
+        overflow-y: auto;
+    }
+    
+    :deep(.dropdown-item) {
+        min-width: 120px;
+        
+        &.active {
+            background: rgba(0, 15, 51, 0.10);
+            color: #000F33;
+            font-weight: 600;
+        }
+    }
+}
+</style>

src/components/dialogBox/pattern/index.vue

@@ -19,10 +19,11 @@
 
 <script setup>
 import Select from '@/components/Select/index.vue'
-import videoPattern1 from '@/assets/dialog/videoPattern1.svg'
+
 import videoPattern2 from '@/assets/dialog/videoPattern2.svg'
-import videoPattern3 from '@/assets/dialog/videoPattern3.svg'
 import videoPattern4 from '@/assets/dialog/videoPattern4.svg'
+import videoPattern5 from '@/assets/dialog/videoPattern5.svg'
+import videoPattern6 from '@/assets/dialog/videoPattern6.svg'
 
 const props = defineProps({
   modelValue: {
@@ -39,10 +40,12 @@ const quantity = computed({
 })
 
 const quantityOptions = [
-  { value: '全能参考', label: '全能参考', labelText: '全能参考', icon: videoPattern1 },
+  { value: '文生视频', label: '文生视频', labelText: '文生视频', icon: videoPattern2 },
   { value: '首尾帧', label: '首尾帧', labelText: '首尾帧', icon: videoPattern2 },
-  { value: '智能多帧', label: '智能多帧', labelText: '智能多帧', icon: videoPattern3 },       
+  { value: '数字人', label: '数字人', labelText: '数字人', icon: videoPattern2 },
-  { value: '主体参考', label: '主体参考', labelText: '主体参考', icon: videoPattern4 }
+  { value: '全能参考', label: '全能参考', labelText: '全能参考', icon: videoPattern4 },
+  { value: '智能多帧', label: '智能多帧', labelText: '智能多帧', icon: videoPattern5 },       
+  { value: '主体参考', label: '主体参考', labelText: '主体参考', icon: videoPattern6 }
 ]
 
 const selectedIcon = computed(() => {

src/components/dialogBox/proportion/painting.vue

@@ -3,7 +3,7 @@
         <div class="proportion-container">
             <div class="section">
               <h3>选择比例</h3>
-                <div class="proportion-options" :style="{ marginBottom: props.type === 'video' ? '0px' : '20px' }">
+              <div class="proportion-options">
                 <div 
                   v-for="item in proportionOptions" 
                   :key="item.value"
@@ -17,7 +17,7 @@
               </div>
             </div>
 
-            <div v-if="type === 'painting'" class="section">
+            <div v-if="resolutionOptions.length > 0" class="section">
                 <h3>选择分辨率</h3>
                 <div class="resolution-options">
                   <div 
@@ -32,7 +32,7 @@
                 </div>
             </div>
 
-            <div v-if="type === 'painting'" class="section">
+            <div class="section">
                 <h3>尺寸(px)</h3>
                 <div class="size-inputs">
                     <div class="input-group">
@@ -60,7 +60,6 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
 import Popover from '@/components/Popover/index.vue'
 import lockIcon from '@/assets/dialog/lock.svg'
 import lockNoIcon from '@/assets/dialog/lockNo.svg'
@@ -74,9 +73,25 @@ const props = defineProps({
     type: String,
     default: '2k'
   },
-  type: {
+  proportionOptions: {
-    type: String,
+    type: Array,
-    default: 'painting'
+    default: () => [
+      { value: '智能', label: '智能' },
+      { value: '21:9', label: '21:9' },
+      { value: '16:9', label: '16:9' },
+      { value: '4:3', label: '4:3' },
+      { value: '1:1', label: '1:1' },
+      { value: '3:4', label: '3:4' },
+      { value: '9:16', label: '9:16' }
+    ]
+  },
+  resolutionOptions: {
+    type: Array,
+    default: () => [
+      { value: '1k', label: '标清 1K' },
+      { value: '2k', label: '高清 2K' },
+      { value: '4k', label: '超清 4K' }
+    ]
   }
 })
 
@@ -92,24 +107,6 @@ const resolution = computed({
   set: (value) => emit('update:resolution', value)
 })
 
-const proportionOptions = [
-  { value: '智能', label: '智能' },
-  { value: '21:9', label: '21:9' },
-  { value: '16:9', label: '16:9' },
-  // { value: '3:2', label: '3:2' },
-  { value: '4:3', label: '4:3' },
-  { value: '1:1', label: '1:1' },
-  { value: '3:4', label: '3:4' },
-  // { value: '2:3', label: '2:3' },
-  { value: '9:16', label: '9:16' }
-]
-
-const resolutionOptions = [
-  { value: '1k', label: '标清 1K' },
-  { value: '2k', label: '高清 2K' },
-  { value: '4k', label: '超清 4K' }
-]
-
 const width = ref(2048)
 const height = ref(2048)
 const isLocked = ref(true)

src/components/dialogBox/proportion/video.vue

@@ -0,0 +1,241 @@
+<template>
+    <Popover placement="top" :width="400">
+        <div class="proportion-container">
+            <div class="section">
+                <h3>选择比例</h3>
+                <div class="proportion-options" :style="{ marginBottom: props.type === 'Video' ? '0px' : '20px' }">
+                    <div 
+                        v-for="item in proportionOptions" 
+                        :key="item.value"
+                        class="proportion-item"
+                        :class="{ active: proportion === item.value }"
+                        :style="getProportionStyle(item.value)"
+                        @click="selectProportion(item.value)"
+                    >
+                        {{ item.label }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="section">
+                <h3>选择分辨率</h3>
+                <div class="resolution-options">
+                    <div 
+                        v-for="item in resolutionOptions" 
+                        :key="item.value"
+                        class="resolution-item"
+                        :class="{ active: resolution === item.value }"
+                        @click="selectResolution(item.value)"
+                    >
+                        {{ item.label }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <template #reference>
+            <div class="choice-btn">
+                <img src="@/assets/dialog/proportion.svg" alt="" style="width: 16px;">
+                <span>{{ proportion }}</span>
+                <div style="border: 0.5px solid #000; width: 1px; height:13px;margin: 0 5px;" />
+                <span>{{ resolution }}</span>
+            </div>
+        </template>
+    </Popover>
+</template>
+
+<script setup>
+import Popover from '@/components/Popover/index.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '1:1'
+  },
+  resolution: {
+    type: String,
+    default: '2k'
+  },
+  proportionOptions: {
+    type: Array,
+    default: () => [
+      { value: '21:9', label: '21:9' },
+      { value: '16:9', label: '16:9' },
+      { value: '4:3', label: '4:3' },
+      { value: '1:1', label: '1:1' },
+      { value: '3:4', label: '3:4' },
+      { value: '9:16', label: '9:16' }
+    ]
+  },
+  resolutionOptions: {
+    type: Array,
+    default: () => [
+      { value: '360', label: '流畅 360P' },
+      { value: '540', label: '标清 540P' },
+      { value: '720', label: '高清 720P' },
+      { value: '1k', label: '超清 1K' }
+    ]
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:resolution'])
+
+const proportion = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const resolution = computed({
+  get: () => props.resolution,
+  set: (value) => emit('update:resolution', value)
+})
+
+const selectProportion = (value) => {
+  proportion.value = value
+}
+
+const selectResolution = (value) => {
+  resolution.value = value
+}
+
+const getProportionStyle = (value) => {
+  if (value === '智能') {
+    return {
+      '--width': '20px',
+      '--height': '20px'
+    }
+  }
+  const [w, h] = value.split(':').map(Number)
+  const aspectRatio = w / h
+  const baseSize = 20
+  
+  if (aspectRatio > 1) {
+    return {
+      '--width': `${baseSize}px`,
+      '--height': `${Math.round(baseSize / aspectRatio)}px`
+    }
+  } else {
+    return {
+      '--width': `${Math.round(baseSize * aspectRatio)}px`,
+      '--height': `${baseSize}px`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.choice-btn{
+  display: flex;
+  height: 40px;
+  padding: 0 15px;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  border-radius: 10px;
+  border: 1px solid #E8E9EB;
+  background: #f5f6f7;
+  cursor: pointer;
+  position: relative;
+}
+.choice-btn:hover{
+  background: #e9eaeb;
+}
+
+.proportion-container{
+  padding: 20px;
+}
+
+.section{
+  margin-bottom: 20px;
+  border-radius: 20px;
+  
+  &:last-child{
+    margin-bottom: 0;
+  }
+  
+  h3{
+    font-family: "Microsoft YaHei";
+    font-size: 12px;
+    font-weight: 400;
+    margin-bottom: 12px;
+    color: #999;
+  }
+}
+.proportion-options{
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  background-color: #F8F9FA;
+  padding: 5px;
+  border-radius: 10px;
+}
+
+.proportion-item{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 5px;
+  width: auto;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  border-radius: 5px;
+  text-align: bottom;
+  color: #999;
+  
+  &::before{
+    content: '';
+    width: var(--width, 20px);
+    height: var(--height, 20px);
+    background: #F5F6F7;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    border: 2px solid #999;
+  }
+  
+  &:hover{
+    background: #e0e0e0;
+  }
+  
+  &.active{
+    color: #000F33;
+    background: #ffffff;
+  }
+  &.active::before{
+    border-color: #000F33;
+  }
+}
+
+.resolution-options{
+  display: flex;
+  padding: 5px;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 10px;
+  background: #F8F9FA;
+  gap: 10px;
+}
+
+.resolution-item{
+  flex: 1;
+  padding: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: center;
+  transition: all 0.2s ease;
+  color: #666;
+  
+  &:hover{
+    background: #e0e0e0;
+  }
+  
+  &.active{
+    background: #ffffff;
+    color: #000000;
+    font-weight: 500;
+  }
+}
+</style>

src/components/dialogBox/videoImageUploader/index.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="video-image-uploader">
+    <div class="image-list">
+      <div
+        v-for="(item, index) in localPreviewList"
+        :key="item.uid"
+        class="image-item"
+      >
+        <img :src="item.url" class="uploaded-image" :alt="getFrameLabel(index)" />
+        <div class="frame-label">{{ getFrameLabel(index) }}</div>
+        <div class="delete-icon" @click.stop="handleDelete(index)">
+          <i-ep-close />
+        </div>
+      </div>
+      <template v-for="i in maxImages" :key="i">
+        <div
+          v-if="localPreviewList.length < maxImages && !localPreviewList[i - 1]"
+          class="upload-trigger"
+          @click="triggerUpload(i - 1)"
+        >
+          <i-ep-plus color="#333333" />
+          <div class="upload-text">{{ getUploadText(i) }}</div>
+        </div>
+      </template>
+    </div>
+    <el-upload
+      v-for="i in maxImages"
+      :key="i"
+      :ref="el => setUploadRef(el, i - 1)"
+      v-show="false"
+      :action="uploadurl"
+      :limit="1"
+      :before-upload="beforeUpload"
+      :on-success="(response, uploadFile) => handleSuccess(response, uploadFile, i - 1)"
+      :on-error="handleError"
+    />
+  </div>
+</template>
+
+<script setup>
+import { genFileId } from 'element-plus'
+
+const props = defineProps({
+  modelType: {
+    type: String,
+    default: 'text'
+  },
+  imagesCount: {
+    type: Number,
+    default: 1
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const uploadurl = import.meta.env.VITE_API_WORKFLOW_UPLOAD
+const uploadRefs = ref([])
+const imageList = ref([...props.modelValue])
+const localPreviewList = ref([...props.modelValue])
+const isUploading = ref(false)
+
+const showEndFrame = computed(() => props.modelType === 'image' && props.imagesCount === 2)
+const maxImages = computed(() => props.modelType === 'image' ? (showEndFrame.value ? 2 : 1) : 1)
+
+const setUploadRef = (el, index) => {
+  if (el) {
+    uploadRefs.value[index] = el
+  }
+}
+
+const getFrameLabel = (index) => {
+  if (props.modelType === 'digitalHuman') {
+    return ''
+  }
+  return index === 0 ? '首帧' : '尾帧'
+}
+
+const getUploadText = (i) => {
+  if (props.modelType === 'digitalHuman') {
+    return '参考内容'
+  }
+  return i === 1 ? '首帧' : '尾帧'
+}
+
+watch(() => props.modelValue, async (newVal) => {
+  if (isUploading.value) {
+    return
+  }
+  
+  imageList.value = [...newVal]
+  
+  const newPreviewList = []
+  for (const img of newVal) {
+    let previewImg = { ...img }
+    if (img.url && !img.url.startsWith('blob:')) {
+      try {
+        const response = await fetch(img.url)
+        const blob = await response.blob()
+        previewImg = {
+          ...img,
+          url: URL.createObjectURL(blob),
+          serverUrl: img.url
+        }
+      } catch (error) {
+        console.error('Failed to create blob URL:', error)
+        previewImg = {
+          ...img,
+          serverUrl: img.url
+        }
+      }
+    }
+    newPreviewList.push(previewImg)
+  }
+  localPreviewList.value = newPreviewList
+}, { deep: true, immediate: true })
+
+const triggerUpload = (index) => {
+  if (uploadRefs.value[index]) {
+    uploadRefs.value[index].$el.querySelector('input').click()
+  }
+}
+
+const beforeUpload = (rawFile) => {
+  const allowedTypes = ['image/jpeg', 'image/png']
+
+  if (!allowedTypes.includes(rawFile.type)) {
+    ElMessage.error('不支持的文件类型，请上传 JPG、PNG 格式的图片')
+    return false
+  }
+
+  if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error('图片大小不能超过 10MB')
+    return false
+  }
+}
+
+const handleSuccess = (response, uploadFile, index) => {
+  ElMessage.success('上传成功')
+  
+  isUploading.value = true
+  
+  const localUrl = URL.createObjectURL(uploadFile.raw)
+  
+  const newImage = {
+    uid: uploadFile.uid,
+    url: response.url
+  }
+  
+  if (imageList.value[index]) {
+    const previewItem = localPreviewList.value[index]
+    if (previewItem && previewItem.url && previewItem.url.startsWith('blob:')) {
+      URL.revokeObjectURL(previewItem.url)
+    }
+    imageList.value[index] = newImage
+    localPreviewList.value[index] = {
+      uid: uploadFile.uid,
+      url: localUrl,
+      serverUrl: response.url
+    }
+  } else {
+    imageList.value[index] = newImage
+    localPreviewList.value[index] = {
+      uid: uploadFile.uid,
+      url: localUrl,
+      serverUrl: response.url
+    }
+  }
+  
+  emit('update:modelValue', [...imageList.value])
+  
+  nextTick(() => {
+    isUploading.value = false
+  })
+}
+
+const handleError = () => {
+  ElMessage.error('上传失败，请重新选择图片')
+}
+
+const handleDelete = (index) => {
+  const previewItem = localPreviewList.value[index]
+  if (previewItem && previewItem.url && previewItem.url.startsWith('blob:')) {
+    URL.revokeObjectURL(previewItem.url)
+  }
+  
+  localPreviewList.value.splice(index, 1)
+  imageList.value.splice(index, 1)
+  emit('update:modelValue', [...imageList.value])
+}
+
+const handleSelect = async (url, index = 0) => {
+  const initialFile = await fetch(url)
+  const blob = await initialFile.blob()
+  const file = new File([blob], `selected_image_${Date.now()}.jpg`, { type: blob.type })
+  file.uid = genFileId()
+
+  if (uploadRefs.value[index]) {
+    uploadRefs.value[index].handleStart(file)
+    uploadRefs.value[index].submit()
+  }
+}
+
+defineExpose({
+  handleSelect
+})
+</script>
+
+<style lang="less" scoped>
+.video-image-uploader {
+  display: flex;
+  align-items: center;
+}
+
+.image-list {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.image-item {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    z-index: 10;
+
+    .delete-icon {
+      opacity: 1;
+    }
+  }
+
+  .uploaded-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: all 0.3s ease;
+    border-radius: 8px;
+  }
+
+  .frame-label {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    width: 32px;
+    height: 20px;
+    background: rgba(0, 15, 51, 0.8);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 10px;
+    font-weight: bold;
+    z-index: 5;
+    transition: all 0.3s ease;
+  }
+
+  .delete-icon {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 20px;
+    height: 20px;
+    background: #ef4444;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.3s ease;
+    z-index: 20;
+
+    &:hover {
+      background: #dc2626;
+      transform: scale(1.1);
+    }
+  }
+}
+
+.upload-trigger {
+  width: 56px;
+  height: 56px;
+  background: rgba(0, 15, 51, 0.04);
+  backdrop-filter: blur(5px);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  cursor: pointer;
+  color: #9ca3af;
+  font-size: 15px;
+  transition: all 0.3s ease;
+
+  span {
+    color: #333;
+    font-family: "Microsoft YaHei";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  &:hover {
+    background-color: #F0F1F2;
+    border-color: #626aef;
+    transform: scale(1.05);
+  }
+}
+
+.upload-text {
+  color: #666;
+  font-family: "Microsoft YaHei";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+</style>

src/components/virtual-scroller/VirtualScroller copy 2.vue

@@ -0,0 +1,486 @@
+<template>
+  <div class="virtual-scroller" :style="containerStyle">
+    <div
+      ref="scrollContainerRef"
+      class="virtual-scroller-container"
+      :style="scrollContainerStyle"
+      @scroll.passive="handleScroll"
+      @wheel="handleWheel"
+    >
+      <div class="virtual-scroller-spacer" :style="spacerStyle"></div>
+      <div class="virtual-scroller-placeholder" :style="placeholderStyle">
+        <slot name="bottom-placeholder" />
+      </div>
+      <div
+        v-for="item in visibleItems"
+        :key="item.key"
+        :ref="el => setItemRef(el, item.key)"
+        class="virtual-scroller-item"
+        :style="getItemStyle(item)"
+        :data-index="item.index"
+        :data-key="item.key"
+      >
+        <slot name="default" :item="item.data" :index="item.index" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  itemKey: {
+    type: [String, Function],
+    default: 'id'
+  },
+  estimatedHeight: {
+    type: Number,
+    default: 100
+  },
+  buffer: {
+    type: Number,
+    default: 5
+  },
+  placeholderHeight: {
+    type: Number,
+    default: 350
+  }
+})
+
+const emit = defineEmits(['scroll', 'scroll-start', 'scroll-end'])
+
+const scrollContainerRef = ref(null)
+const itemRefs = new Map()
+const itemHeights = ref(new Map())
+const resizeObserver = ref(null)
+const isScrolling = ref(false)
+const scrollTimeout = ref(null)
+
+const getKey = (item, index) => {
+  if (typeof props.itemKey === 'function') {
+    return props.itemKey(item, index)
+  }
+  if (item && typeof item === 'object') {
+    return item[props.itemKey] ?? index
+  }
+  return index
+}
+
+const getItemHeight = (key) => {
+  return itemHeights.value.get(key) ?? props.estimatedHeight
+}
+
+const containerStyle = computed(() => ({
+  height: '100%',
+  width: '100%',
+  position: 'relative',
+}))
+
+const scrollContainerStyle = computed(() => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  direction: 'rtl',
+  transform: 'rotate(180deg)'
+}))
+
+const totalDataHeight = computed(() => {
+  let height = 0
+  for (let i = 0; i < props.data.length; i++) {
+    const key = getKey(props.data[i], i)
+    height += getItemHeight(key)
+  }
+  return height
+})
+
+const totalHeight = computed(() => {
+  return props.placeholderHeight + totalDataHeight.value
+})
+
+const spacerStyle = computed(() => ({
+  height: `${totalHeight.value}px`,
+  width: '100%',
+  flexShrink: 0
+}))
+
+const placeholderStyle = computed(() => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: `${props.placeholderHeight}px`,
+  zIndex: 1,
+  direction: 'ltr'
+}))
+
+const visibleRange = computed(() => {
+  const count = props.data.length
+  if (count === 0) {
+    return { start: 0, end: 0, offset: 0 }
+  }
+
+  const el = scrollContainerRef.value
+  if (!el) {
+    return { start: 0, end: Math.min(count - 1, 9), offset: 0 }
+  }
+
+  const scrollTop = el.scrollTop
+  const viewportHeight = el.clientHeight || 600
+  const bufferCount = props.buffer
+
+  // In inverted scroll (180deg rotation):
+  // - scrollTop = 0: visual BOTTOM (shows newer data, lower index)
+  // - scrollTop = max: visual TOP (shows older data, higher index)
+  // - visibleStart/visibleEnd are offsets in the data area (after placeholder)
+  const visibleStart = Math.max(0, scrollTop - props.placeholderHeight)
+  const visibleEnd = visibleStart + viewportHeight
+
+  let startIndex = 0
+  let endIndex = count - 1
+  let startOffset = 0
+  let currentOffset = 0
+
+  // Find startIndex: first item that ends after visibleStart
+  for (let i = 0; i < count; i++) {
+    const key = getKey(props.data[i], i)
+    const height = getItemHeight(key)
+    const itemEnd = currentOffset + height
+
+    if (itemEnd > visibleStart) {
+      startIndex = Math.max(0, i - bufferCount)
+      break
+    }
+
+    currentOffset += height
+  }
+
+  // Calculate startOffset for startIndex
+  startOffset = 0
+  for (let i = 0; i < startIndex; i++) {
+    const key = getKey(props.data[i], i)
+    startOffset += getItemHeight(key)
+  }
+
+  // Find endIndex: last item that starts before visibleEnd
+  currentOffset = startOffset
+  for (let i = startIndex; i < count; i++) {
+    const key = getKey(props.data[i], i)
+    const height = getItemHeight(key)
+
+    // Check if this item is visible (item starts before visibleEnd)
+    if (currentOffset >= visibleEnd) {
+      // This item starts after visibleEnd, so previous item is the last visible
+      endIndex = Math.min(count - 1, Math.max(startIndex, i - 1 + bufferCount))
+      break
+    }
+
+    endIndex = i
+    currentOffset += height
+  }
+
+  return { start: startIndex, end: endIndex, offset: startOffset }
+})
+
+const visibleItems = computed(() => {
+  const { start, end, offset } = visibleRange.value
+  const items = []
+  const count = props.data.length
+
+  if (count === 0) return items
+
+  const safeStart = Math.max(0, start)
+  const safeEnd = Math.min(count - 1, end)
+
+  if (safeStart > safeEnd) return items
+
+  let currentOffset = offset + props.placeholderHeight
+  const seenKeys = new Set()
+
+  for (let i = safeStart; i <= safeEnd; i++) {
+    const data = props.data[i]
+    if (!data) continue
+
+    const key = getKey(data, i)
+    
+    // Deduplicate by key
+    if (seenKeys.has(key)) continue
+    seenKeys.add(key)
+
+    const height = getItemHeight(key)
+
+    items.push({
+      data,
+      index: i,
+      key,
+      offset: currentOffset,
+      height
+    })
+
+    currentOffset += height
+  }
+
+  return items
+})
+
+const getItemStyle = (item) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  transform: `translateY(${item.offset}px)`,
+  direction: 'ltr',
+  willChange: 'transform'
+})
+
+const setItemRef = (el, key) => {
+  if (el) {
+    itemRefs.set(key, el)
+  } else {
+    itemRefs.delete(key)
+  }
+}
+
+const measureItem = (key, element) => {
+  if (!element) return
+
+  const target = element.firstElementChild || element
+  const height = target.getBoundingClientRect().height
+
+  if (height > 0 && height !== itemHeights.value.get(key)) {
+    const newHeights = new Map(itemHeights.value)
+    newHeights.set(key, height)
+    itemHeights.value = newHeights
+  }
+}
+
+const setupResizeObserver = () => {
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect()
+  }
+
+  resizeObserver.value = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const key = entry.target.dataset.key
+      if (key !== undefined) {
+        measureItem(key, entry.target)
+      }
+    }
+  })
+}
+
+const observeItems = () => {
+  if (!resizeObserver.value) return
+
+  resizeObserver.value.disconnect()
+
+  for (const [key, element] of itemRefs) {
+    if (element) {
+      resizeObserver.value.observe(element)
+    }
+  }
+}
+
+const handleWheel = (event) => {
+  if (!scrollContainerRef.value) return
+
+  scrollContainerRef.value.scrollBy({
+    top: -event.deltaY,
+    behavior: 'instant'
+  })
+
+  event.preventDefault()
+}
+
+const handleScroll = (event) => {
+  const target = event.target
+  const scrollHeight = target.scrollHeight
+  const scrollTop = target.scrollTop
+  const clientHeight = target.clientHeight
+
+  isScrolling.value = true
+
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value)
+  }
+
+  scrollTimeout.value = setTimeout(() => {
+    isScrolling.value = false
+  }, 150)
+
+  // In inverted scroll:
+  // - distanceToTop (visual top) = scrollHeight - scrollTop - clientHeight
+  // - distanceToBottom (visual bottom) = scrollTop
+  // - isAtTop (visual top, older data) = distanceToTop <= threshold
+  // - isAtBottom (visual bottom, newer data) = distanceToBottom <= threshold
+  const distanceToTop = scrollHeight - scrollTop - clientHeight
+  const distanceToBottom = scrollTop
+  const threshold = 5
+
+  const isAtTop = distanceToTop <= threshold
+  const isAtBottom = distanceToBottom <= threshold
+
+  emit('scroll', {
+    scrollTop,
+    scrollHeight,
+    clientHeight,
+    distanceToTop,
+    distanceToBottom,
+    isAtTop,
+    isAtBottom
+  })
+
+  // scroll-start: reached visual top (older data, need to load more)
+  if (isAtTop) {
+    emit('scroll-start')
+  }
+
+  // scroll-end: reached visual bottom (newer data)
+  if (isAtBottom) {
+    emit('scroll-end')
+  }
+}
+
+const scrollToIndex = (index, behavior = 'auto') => {
+  if (!scrollContainerRef.value || index < 0 || index >= props.data.length) return
+
+  let offset = 0
+  for (let i = 0; i < index; i++) {
+    const key = getKey(props.data[i], i)
+    offset += getItemHeight(key)
+  }
+
+  const targetScrollTop = offset + props.placeholderHeight
+
+  scrollContainerRef.value.scrollTo({
+    top: targetScrollTop,
+    behavior
+  })
+}
+
+const scrollToBottom = (behavior = 'smooth') => {
+  if (!scrollContainerRef.value) return
+
+  requestAnimationFrame(() => {
+    if (!scrollContainerRef.value) return
+    // In inverted scroll, bottom is scrollTop = 0
+    scrollContainerRef.value.scrollTo({ top: 0, behavior })
+  })
+}
+
+const scrollToTop = (behavior = 'smooth') => {
+  if (!scrollContainerRef.value) return
+
+  requestAnimationFrame(() => {
+    if (!scrollContainerRef.value) return
+    // In inverted scroll, top is scrollTop = max
+    scrollContainerRef.value.scrollTo({
+      top: scrollContainerRef.value.scrollHeight,
+      behavior
+    })
+  })
+}
+
+const getScrollElement = () => scrollContainerRef.value
+
+const isAtTop = () => {
+  if (!scrollContainerRef.value) return false
+  const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.value
+  return scrollHeight - scrollTop - clientHeight <= 5
+}
+
+const isAtBottom = () => {
+  if (!scrollContainerRef.value) return false
+  return scrollContainerRef.value.scrollTop <= 5
+}
+
+const reset = () => {
+  itemHeights.value = new Map()
+  itemRefs.clear()
+}
+
+watch(() => props.data, (newData, oldData) => {
+  const newLength = newData?.length || 0
+  const oldLength = oldData?.length || 0
+
+  if (newLength < oldLength) {
+    reset()
+  }
+
+  nextTick(observeItems)
+}, { deep: true })
+
+watch(visibleItems, () => {
+  nextTick(observeItems)
+}, { deep: true })
+
+onMounted(() => {
+  setupResizeObserver()
+  nextTick(observeItems)
+})
+
+onBeforeUnmount(() => {
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect()
+  }
+
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value)
+  }
+
+  itemRefs.clear()
+})
+
+defineExpose({
+  scrollToIndex,
+  scrollToBottom,
+  scrollToTop,
+  getScrollElement,
+  isAtTop,
+  isAtBottom,
+  reset,
+  scrollContainerRef
+})
+</script>
+
+<style lang="less" scoped>
+.virtual-scroller {
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &-container {
+    contain: layout style;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  &-spacer {
+    flex-shrink: 0;
+    width: 100%;
+  }
+
+  &-item {
+    contain: layout style;
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+
+  &-placeholder {
+    contain: layout style;
+  }
+}
+</style>

src/components/virtual-scroller/VirtualScroller copy.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="virtual-scroller" :style="containerStyle">
+    <div class="virtual-scroller-wrapper" :style="wrapperStyle">
+      <div
+        ref="scrollContainerRef"
+        class="virtual-scroller-container"
+        :style="containerInnerStyle"
+        @scroll.passive="handleScroll"
+        @wheel="handleWheel"
+      >
+        <div class="virtual-scroller-spacer" :style="spacerStyle"></div>
+        <div class="virtual-scroller-placeholder" :style="placeholderStyle">
+          <slot name="bottom-placeholder" />
+        </div>
+        <div
+          v-for="item in visibleItems"
+          :key="item.key"
+          :ref="el => setItemRef(el, item.key)"
+          class="virtual-scroller-item"
+          :style="getItemStyle(item)"
+          :data-index="item.index"
+          :data-key="item.key"
+        >
+          <slot name="default" :item="item.data" :index="item.index" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  itemKey: {
+    type: [String, Function],
+    default: 'id'
+  },
+  estimatedHeight: {
+    type: Number,
+    default: 100
+  },
+  buffer: {
+    type: Number,
+    default: 5
+  },
+  placeholderHeight: {
+    type: Number,
+    default: 350
+  }
+})
+
+const emit = defineEmits(['scroll', 'scroll-start', 'scroll-end'])
+
+const scrollContainerRef = ref(null)
+const itemRefs = new Map()
+const itemHeights = ref(new Map())
+const resizeObserver = ref(null)
+const isScrolling = ref(false)
+const scrollTimeout = ref(null)
+
+const getKey = (item, index) => {
+  if (typeof props.itemKey === 'function') {
+    return props.itemKey(item, index)
+  }
+  if (item && typeof item === 'object') {
+    return item[props.itemKey] ?? index
+  }
+  return index
+}
+
+const getItemHeight = (key) => {
+  return itemHeights.value.get(key) ?? props.estimatedHeight
+}
+
+const containerStyle = computed(() => ({
+  height: '100%',
+  width: '100%',
+  position: 'relative'
+}))
+
+const wrapperStyle = computed(() => ({
+  height: '100%',
+  width: '100%',
+  position: 'relative',
+  overflow: 'hidden',
+  transform: 'rotate(180deg)',
+  direction: 'rtl'
+}))
+
+const containerInnerStyle = computed(() => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  direction: 'ltr'
+}))
+
+const totalDataHeight = computed(() => {
+  let height = 0
+  for (let i = 0; i < props.data.length; i++) {
+    const key = getKey(props.data[i], i)
+    height += getItemHeight(key)
+  }
+  return height
+})
+
+const totalHeight = computed(() => {
+  return props.placeholderHeight + totalDataHeight.value
+})
+
+const spacerStyle = computed(() => ({
+  height: `${totalHeight.value}px`,
+  width: '100%',
+  flexShrink: 0
+}))
+
+const placeholderStyle = computed(() => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: `${props.placeholderHeight}px`,
+  zIndex: 1
+}))
+
+const getItemOffsets = () => {
+  const offsets = []
+  let offset = 0
+  for (let i = 0; i < props.data.length; i++) {
+    offsets.push(offset)
+    const key = getKey(props.data[i], i)
+    offset += getItemHeight(key)
+  }
+  return offsets
+}
+
+const visibleRange = computed(() => {
+  const count = props.data.length
+  if (count === 0) {
+    return { start: 0, end: 0, offset: 0 }
+  }
+
+  const el = scrollContainerRef.value
+  if (!el) {
+    return { start: 0, end: Math.min(count - 1, 9), offset: 0 }
+  }
+
+  const scrollTop = el.scrollTop
+  const viewportHeight = el.clientHeight || 600
+  const bufferCount = props.buffer
+
+  // In inverted scroll (180deg rotation):
+  // - scrollTop = 0: visual BOTTOM (shows newer data, lower index)
+  // - scrollTop = max: visual TOP (shows older data, higher index)
+  // - Items are positioned from top: placeholderHeight, then data items
+  // - visibleStart/visibleEnd are offsets in the data area (after placeholder)
+  
+  // When scrollTop = 0, we're at visual bottom, showing items near the START of data
+  // When scrollTop = max, we're at visual top, showing items near the END of data
+  
+  // The visible area in data coordinates:
+  // - scrollTop 0 means we see items at offset 0 (start of data)
+  // - scrollTop increases means we see items at higher offsets (end of data)
+  
+  const visibleStart = Math.max(0, scrollTop - props.placeholderHeight)
+  const visibleEnd = visibleStart + viewportHeight
+
+  let startIndex = 0
+  let endIndex = count - 1
+  let startOffset = 0
+  let currentOffset = 0
+
+  // Find startIndex: first item that ends after visibleStart
+  for (let i = 0; i < count; i++) {
+    const key = getKey(props.data[i], i)
+    const height = getItemHeight(key)
+    const itemEnd = currentOffset + height
+
+    if (itemEnd > visibleStart) {
+      startIndex = Math.max(0, i - bufferCount)
+      break
+    }
+
+    currentOffset += height
+  }
+
+  // Calculate startOffset for startIndex
+  startOffset = 0
+  for (let i = 0; i < startIndex; i++) {
+    const key = getKey(props.data[i], i)
+    startOffset += getItemHeight(key)
+  }
+
+  // Find endIndex: last item that starts before visibleEnd
+  currentOffset = startOffset
+  for (let i = startIndex; i < count; i++) {
+    const key = getKey(props.data[i], i)
+    const height = getItemHeight(key)
+
+    // Check if this item is visible (item starts before visibleEnd)
+    if (currentOffset >= visibleEnd) {
+      // This item starts after visibleEnd, so previous item is the last visible
+      endIndex = Math.min(count - 1, Math.max(startIndex, i - 1 + bufferCount))
+      break
+    }
+
+    endIndex = i
+    currentOffset += height
+  }
+
+  return { start: startIndex, end: endIndex, offset: startOffset }
+})
+
+const visibleItems = computed(() => {
+  const { start, end, offset } = visibleRange.value
+  const items = []
+  const count = props.data.length
+
+  if (count === 0) return items
+
+  const safeStart = Math.max(0, start)
+  const safeEnd = Math.min(count - 1, end)
+
+  if (safeStart > safeEnd) return items
+
+  let currentOffset = offset + props.placeholderHeight
+  const seenKeys = new Set()
+
+  for (let i = safeStart; i <= safeEnd; i++) {
+    const data = props.data[i]
+    if (!data) continue
+
+    const key = getKey(data, i)
+    
+    // Deduplicate by key
+    if (seenKeys.has(key)) continue
+    seenKeys.add(key)
+
+    const height = getItemHeight(key)
+
+    items.push({
+      data,
+      index: i,
+      key,
+      offset: currentOffset,
+      height
+    })
+
+    currentOffset += height
+  }
+
+  return items
+})
+
+const getItemStyle = (item) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  transform: `translateY(${item.offset}px)`,
+  willChange: 'transform'
+})
+
+const setItemRef = (el, key) => {
+  if (el) {
+    itemRefs.set(key, el)
+  } else {
+    itemRefs.delete(key)
+  }
+}
+
+const measureItem = (key, element) => {
+  if (!element) return
+
+  const target = element.firstElementChild || element
+  const height = target.getBoundingClientRect().height
+
+  if (height > 0 && height !== itemHeights.value.get(key)) {
+    const newHeights = new Map(itemHeights.value)
+    newHeights.set(key, height)
+    itemHeights.value = newHeights
+  }
+}
+
+const setupResizeObserver = () => {
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect()
+  }
+
+  resizeObserver.value = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const key = entry.target.dataset.key
+      if (key !== undefined) {
+        measureItem(key, entry.target)
+      }
+    }
+  })
+}
+
+const observeItems = () => {
+  if (!resizeObserver.value) return
+
+  resizeObserver.value.disconnect()
+
+  for (const [key, element] of itemRefs) {
+    if (element) {
+      resizeObserver.value.observe(element)
+    }
+  }
+}
+
+const handleWheel = (event) => {
+  if (!scrollContainerRef.value) return
+
+  scrollContainerRef.value.scrollBy({
+    top: -event.deltaY,
+    behavior: 'instant'
+  })
+
+  event.preventDefault()
+}
+
+const handleScroll = (event) => {
+  const target = event.target
+  const scrollHeight = target.scrollHeight
+  const scrollTop = target.scrollTop
+  const clientHeight = target.clientHeight
+
+  isScrolling.value = true
+
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value)
+  }
+
+  scrollTimeout.value = setTimeout(() => {
+    isScrolling.value = false
+  }, 150)
+
+  // In inverted scroll:
+  // - distanceToTop (visual top) = scrollHeight - scrollTop - clientHeight
+  // - distanceToBottom (visual bottom) = scrollTop
+  // - isAtTop (visual top, older data) = distanceToTop <= threshold
+  // - isAtBottom (visual bottom, newer data) = distanceToBottom <= threshold
+  const distanceToTop = scrollHeight - scrollTop - clientHeight
+  const distanceToBottom = scrollTop
+  const threshold = 5
+
+  const isAtTop = distanceToTop <= threshold
+  const isAtBottom = distanceToBottom <= threshold
+
+  emit('scroll', {
+    scrollTop,
+    scrollHeight,
+    clientHeight,
+    distanceToTop,
+    distanceToBottom,
+    isAtTop,
+    isAtBottom
+  })
+
+  // scroll-start: reached visual top (older data, need to load more)
+  if (isAtTop) {
+    emit('scroll-start')
+  }
+
+  // scroll-end: reached visual bottom (newer data)
+  if (isAtBottom) {
+    emit('scroll-end')
+  }
+}
+
+const scrollToIndex = (index, behavior = 'auto') => {
+  if (!scrollContainerRef.value || index < 0 || index >= props.data.length) return
+
+  let offset = 0
+  for (let i = 0; i < index; i++) {
+    const key = getKey(props.data[i], i)
+    offset += getItemHeight(key)
+  }
+
+  const targetScrollTop = offset + props.placeholderHeight
+
+  scrollContainerRef.value.scrollTo({
+    top: targetScrollTop,
+    behavior
+  })
+}
+
+const scrollToBottom = (behavior = 'smooth') => {
+  if (!scrollContainerRef.value) return
+
+  requestAnimationFrame(() => {
+    if (!scrollContainerRef.value) return
+    // In inverted scroll, bottom is scrollTop = 0
+    scrollContainerRef.value.scrollTo({ top: 0, behavior })
+  })
+}
+
+const scrollToTop = (behavior = 'smooth') => {
+  if (!scrollContainerRef.value) return
+
+  requestAnimationFrame(() => {
+    if (!scrollContainerRef.value) return
+    // In inverted scroll, top is scrollTop = max
+    scrollContainerRef.value.scrollTo({
+      top: scrollContainerRef.value.scrollHeight,
+      behavior
+    })
+  })
+}
+
+const getScrollElement = () => scrollContainerRef.value
+
+const isAtTop = () => {
+  if (!scrollContainerRef.value) return false
+  const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.value
+  return scrollHeight - scrollTop - clientHeight <= 5
+}
+
+const isAtBottom = () => {
+  if (!scrollContainerRef.value) return false
+  return scrollContainerRef.value.scrollTop <= 5
+}
+
+const reset = () => {
+  itemHeights.value = new Map()
+  itemRefs.clear()
+}
+
+watch(() => props.data, (newData, oldData) => {
+  const newLength = newData?.length || 0
+  const oldLength = oldData?.length || 0
+
+  if (newLength < oldLength) {
+    reset()
+  }
+
+  nextTick(observeItems)
+}, { deep: true })
+
+watch(visibleItems, () => {
+  nextTick(observeItems)
+}, { deep: true })
+
+onMounted(() => {
+  setupResizeObserver()
+  nextTick(observeItems)
+})
+
+onBeforeUnmount(() => {
+  if (resizeObserver.value) {
+    resizeObserver.value.disconnect()
+  }
+
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value)
+  }
+
+  itemRefs.clear()
+})
+
+defineExpose({
+  scrollToIndex,
+  scrollToBottom,
+  scrollToTop,
+  getScrollElement,
+  isAtTop,
+  isAtBottom,
+  reset,
+  scrollContainerRef
+})
+</script>
+
+<style lang="less" scoped>
+.virtual-scroller {
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &-wrapper {
+    contain: content;
+  }
+
+  &-container {
+    contain: layout style;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  &-spacer {
+    flex-shrink: 0;
+    width: 100%;
+  }
+
+  &-item {
+    contain: layout style;
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+
+  &-placeholder {
+    contain: layout style;
+  }
+}
+</style>

src/components/virtual-scroller/VirtualScroller.vue

@@ -13,8 +13,10 @@
         ref="renderContainerRef"
         class="virtual-scroller-render-container"
         :style="renderContainerStyle"
+        @scroll.passive="handleScroll"
+        @wheel="handleWheel"
       >
-        <div class="virtual-scroller-spacer" :style="{ height: `${totalSize}px` }"></div>
+        <div class="virtual-scroller-spacer" :style="{ height: `${totalHeight}px` }"></div>
         <div
           class="virtual-scroller-bottom-placeholder"
           :style="bottomPlaceholderStyle"
@@ -22,18 +24,17 @@
           <slot name="bottom-placeholder" />
         </div>
         <div
-          v-for="renderItem in pool"
+          v-for="renderItem in visibleItems"
-          :key="renderItem.nr.key"
+          :key="getItemKey(renderItem.item, renderItem.index)"
-          :ref="el => setItemRef(el, renderItem.nr.key)"
+          :ref="el => setItemRef(el, renderItem.index)"
           class="virtual-scroller-item"
           :style="getItemStyle(renderItem)"
-          :data-index="renderItem.nr.index"
+          :data-index="renderItem.index"
-          :data-key="renderItem.nr.key"
         >
           <slot
             name="default"
             :item="renderItem.item"
-            :index="renderItem.nr.index"
+            :index="renderItem.index"
           />
         </div>
       </div>
@@ -42,29 +43,38 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowReactive, watch, markRaw } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const props = defineProps({
   data: {
     type: Array,
-    required: true,
+    required: false,
+    default: () => []
+  },
+  items: {
+    type: Array,
+    required: false,
     default: () => []
   },
   itemKey: {
     type: [String, Function],
     default: 'id'
   },
+  keyField: {
+    type: String,
+    default: 'id'
+  },
   estimatedHeight: {
     type: Number,
-    default: null
+    default: 100
-  },
-  minItemSize: {
-    type: [Number, String],
-    default: null
   },
   buffer: {
     type: Number,
-    default: 200
+    default: 3
+  },
+  bufferSize: {
+    type: Number,
+    default: 3
   },
   height: {
     type: [String, Number],
@@ -79,36 +89,45 @@ const props = defineProps({
     default: 'default',
     validator: (value) => ['default', 'top'].includes(value)
   },
+  direction: {
+    type: String,
+    default: 'reverse',
+    validator: (value) => ['normal', 'reverse'].includes(value)
+  },
   bottomPlaceholderHeight: {
     type: Number,
     default: 350
   }
 })
 
-const emit = defineEmits(['scroll', 'scroll-start', 'scroll-end', 'resize', 'update'])
+const computedData = computed(() => {
+  return props.data.length > 0 ? props.data : props.items
+})
+
+const computedItemKey = computed(() => {
+  if (typeof props.itemKey === 'function') return props.itemKey
+  if (props.itemKey !== 'id') return props.itemKey
+  return props.keyField
+})
+
+const computedBuffer = computed(() => {
+  return props.buffer !== 3 ? props.buffer : props.bufferSize
+})
+
+const emit = defineEmits(['scroll', 'scroll-start', 'scroll-end', 'visible-change'])
 
 const containerRef = ref(null)
 const wrapperRef = ref(null)
 const renderContainerRef = ref(null)
 const itemRefs = new Map()
+const itemHeights = ref(new Map())
 const resizeObserver = ref(null)
 const scrollTop = ref(0)
 const isScrolling = ref(false)
 const scrollTimeout = ref(null)
 const isInitialized = ref(false)
 const pendingScrollToBottom = ref(false)
-
+const previousDataLength = ref(0)
-let uid = 0
-const pool = ref([])
-const viewMap = new Map()
-const unusedViews = new Map()
-const itemSizeMap = ref(new Map())
-const totalSize = ref(0)
-
-let $_startIndex = 0
-let $_endIndex = 0
-let $_scrollDirty = false
-let $_lastUpdateScrollPosition = 0
 
 const containerStyle = computed(() => {
   return {
@@ -118,48 +137,108 @@ const containerStyle = computed(() => {
   }
 })
 
-const getItemKey = (item, index) => {
+const totalHeight = computed(() => {
-  if (typeof props.itemKey === 'function') {
+  let height = 0
-    return props.itemKey(item, index)
+  const len = computedData.value.length
-  }
-  if (typeof props.itemKey === 'string' && item && typeof item === 'object') {
-    return item[props.itemKey] ?? index
-  }
-  return index
-}
   
-const minSize = computed(() => {
+  for (let i = 0; i < len; i++) {
-  if (props.minItemSize) {
+    const cachedHeight = itemHeights.value.get(i)
-    return typeof props.minItemSize === 'string' ? parseInt(props.minItemSize, 10) : props.minItemSize
+    height += cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
   }
-  return props.estimatedHeight || 50
+  
+  height += props.bottomPlaceholderHeight
+  
+  return height
 })
 
-const sizes = computed(() => {
+const getItemPosition = (index) => {
-  const sizesMap = {
+  let offset = 0
-    '-1': { accumulator: 0 }
-  }
-  const items = props.data
-  let accumulator = 0
-  let computedMinSize = 10000
   
-  for (let i = 0, l = items.length; i < l; i++) {
+  for (let i = 0; i < index; i++) {
-    const key = getItemKey(items[i], i)
+    const cachedHeight = itemHeights.value.get(i)
-    let size = itemSizeMap.value.get(key)
+    offset += cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
-    
-    if (size === undefined) {
-      size = minSize.value
   }
   
-    if (size < computedMinSize) {
+  const height = itemHeights.value.get(index) ?? props.estimatedHeight
-      computedMinSize = size
+  
+  return { offset, height }
+}
+
+const containerHeight = computed(() => {
+  if (!renderContainerRef.value) return 0
+  return renderContainerRef.value.clientHeight
+})
+
+const visibleRange = computed(() => {
+  if (!renderContainerRef.value || computedData.value.length === 0) {
+    return { start: 0, end: 0, offset: 0 }
   }
   
-    accumulator += size
+  const viewportHeight = containerHeight.value
-    sizesMap[i] = { accumulator, size }
+  const currentScrollTop = scrollTop.value
+  const bufferCount = computedBuffer.value
+  
+  let startIndex = 0
+  let endIndex = computedData.value.length - 1
+  let startOffset = 0
+  
+  let offset = 0
+  for (let i = 0; i < computedData.value.length; i++) {
+    const cachedHeight = itemHeights.value.get(i)
+    const height = cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
+    
+    if (offset + height > currentScrollTop) {
+      startIndex = Math.max(0, i - bufferCount)
+      break
     }
     
-  return sizesMap
+    offset += height
+  }
+  
+  startOffset = 0
+  for (let i = 0; i < startIndex; i++) {
+    const cachedHeight = itemHeights.value.get(i)
+    startOffset += cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
+  }
+  
+  offset = startOffset
+  for (let i = startIndex; i < computedData.value.length; i++) {
+    const cachedHeight = itemHeights.value.get(i)
+    const height = cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
+    
+    if (offset >= currentScrollTop + viewportHeight) {
+      endIndex = Math.min(computedData.value.length - 1, i + bufferCount)
+      break
+    }
+    
+    offset += height
+    endIndex = i
+  }
+  
+  return { start: startIndex, end: endIndex, offset: startOffset }
+})
+
+const visibleItems = computed(() => {
+  const { start, end, offset } = visibleRange.value
+  const items = []
+  
+  let currentOffset = offset
+  
+  for (let i = start; i <= end && i < computedData.value.length; i++) {
+    const cachedHeight = itemHeights.value.get(i)
+    const height = cachedHeight !== undefined ? cachedHeight : props.estimatedHeight
+    
+    items.push({
+      item: computedData.value[i],
+      index: i,
+      offset: currentOffset + props.bottomPlaceholderHeight,
+      height
+    })
+    
+    currentOffset += height
+  }
+  
+  return items
 })
 
 const wrapperStyle = computed(() => ({
@@ -198,6 +277,17 @@ const bottomPlaceholderStyle = computed(() => ({
   zIndex: 1
 }))
 
+const getItemKey = (item, index) => {
+  const keyField = computedItemKey.value
+  if (typeof keyField === 'function') {
+    return keyField(item, index)
+  }
+  if (typeof keyField === 'string' && item && typeof item === 'object') {
+    return item[keyField] ?? index
+  }
+  return index
+}
+
 const getItemStyle = (renderItem) => {
   return {
     position: 'absolute',
@@ -205,196 +295,20 @@ const getItemStyle = (renderItem) => {
     right: 0,
     top: 0,
     width: '100%',
-    transform: `translateY(${renderItem.position}px)`,
+    transform: `translateY(${renderItem.offset}px)`,
     willChange: 'transform'
   }
 }
 
-const setItemRef = (el, key) => {
+const setItemRef = (el, index) => {
   if (el) {
-    itemRefs.set(key, el)
+    itemRefs.set(index, el)
   } else {
-    itemRefs.delete(key)
+    itemRefs.delete(index)
   }
 }
 
-const addView = (index, item, key) => {
+const measureItem = (index, element) => {
-  const nr = markRaw({
-    id: uid++,
-    index,
-    used: true,
-    key
-  })
-  const view = shallowReactive({
-    item,
-    position: 0,
-    nr
-  })
-  pool.value.push(view)
-  return view
-}
-
-const unuseView = (view) => {
-  view.nr.used = false
-  view.position = -9999
-}
-
-const getScroll = () => {
-  const el = renderContainerRef.value
-  if (!el) return { start: 0, end: 0 }
-  
-  return {
-    start: el.scrollTop,
-    end: el.scrollTop + el.clientHeight
-  }
-}
-
-const updateVisibleItems = (checkItem = false, checkPositionDiff = false) => {
-  const items = props.data
-  const count = items.length
-  const sizesMap = sizes.value
-  const keyField = typeof props.itemKey === 'string' ? props.itemKey : 'id'
-  
-  if (!count) {
-    pool.value = []
-    viewMap.clear()
-    totalSize.value = props.bottomPlaceholderHeight
-    return { continuous: true }
-  }
-  
-  const el = renderContainerRef.value
-  if (!el) return { continuous: true }
-  
-  const scrollHeight = el.scrollHeight
-  const scrollTop = el.scrollTop
-  const clientHeight = el.clientHeight
-  
-  const visualScrollStart = scrollHeight - scrollTop - clientHeight
-  const visualScrollEnd = scrollHeight - scrollTop
-  
-  if (checkPositionDiff) {
-    let positionDiff = visualScrollStart - $_lastUpdateScrollPosition
-    if (positionDiff < 0) positionDiff = -positionDiff
-    if (positionDiff < minSize.value) {
-      return { continuous: true }
-    }
-  }
-  
-  $_lastUpdateScrollPosition = visualScrollStart
-  
-  const buffer = props.buffer
-  let scrollStart = visualScrollStart - buffer
-  let scrollEnd = visualScrollEnd + buffer
-  
-  scrollStart -= props.bottomPlaceholderHeight
-  scrollEnd += props.bottomPlaceholderHeight
-  
-  scrollStart = Math.max(0, scrollStart)
-  
-  let startIndex = 0
-  let endIndex = count - 1
-  let newTotalSize = 0
-  
-  let a = 0
-  let b = count - 1
-  let i = ~~(count / 2)
-  let oldI
-  
-  do {
-    oldI = i
-    const h = sizesMap[i]?.accumulator || 0
-    if (h < scrollStart) {
-      a = i
-    } else if (i < count - 1 && (sizesMap[i + 1]?.accumulator || 0) > scrollStart) {
-      b = i
-    }
-    i = ~~((a + b) / 2)
-  } while (i !== oldI)
-  
-  i < 0 && (i = 0)
-  startIndex = i
-  
-  newTotalSize = sizesMap[count - 1]?.accumulator || count * minSize.value
-  
-  for (endIndex = i; endIndex < count && (sizesMap[endIndex]?.accumulator || 0) < scrollEnd; endIndex++);
-  
-  if (endIndex === -1) {
-    endIndex = count - 1
-  } else {
-    endIndex++
-    endIndex > count && (endIndex = count)
-  }
-  
-  totalSize.value = newTotalSize + props.bottomPlaceholderHeight
-  
-  const continuous = startIndex <= $_endIndex && endIndex >= $_startIndex
-  
-  if (continuous) {
-    for (let j = 0, l = pool.value.length; j < l; j++) {
-      const view = pool.value[j]
-      if (view.nr.used) {
-        if (checkItem) {
-          const newKey = getItemKey(view.item, view.nr.index)
-          let newIndex = -1
-          for (let k = 0; k < count; k++) {
-            if (getItemKey(items[k], k) === newKey) {
-              newIndex = k
-              break
-            }
-          }
-          view.nr.index = newIndex
-        }
-        
-        if (
-          view.nr.index == null ||
-          view.nr.index < startIndex ||
-          view.nr.index >= endIndex
-        ) {
-          unuseView(view)
-        }
-      }
-    }
-  }
-  
-  for (let j = startIndex; j < endIndex; j++) {
-    const item = items[j]
-    if (!item) continue
-    
-    const key = getItemKey(item, j)
-    let view = viewMap.get(key)
-    
-    if (!view) {
-      view = addView(j, item, key)
-      viewMap.set(key, view)
-    } else {
-      if (!view.nr.used) {
-        view.nr.used = true
-      }
-    }
-    
-    view.item = item
-    view.nr.index = j
-    view.nr.key = key
-    
-    const prevSize = j > 0 ? sizesMap[j - 1] : { accumulator: 0 }
-    view.position = (prevSize?.accumulator || 0) + props.bottomPlaceholderHeight
-  }
-  
-  pool.value = pool.value.filter(v => v.nr.used)
-  
-  $_startIndex = startIndex
-  $_endIndex = endIndex
-  
-  emit('update', startIndex, endIndex)
-  
-  nextTick(() => {
-    observeVisibleItems()
-  })
-  
-  return { continuous }
-}
-
-const measureItem = (key, element) => {
   if (!element) return
   
   const firstChild = element.firstElementChild
@@ -403,11 +317,11 @@ const measureItem = (key, element) => {
   const height = targetElement.getBoundingClientRect().height
   
   if (height > 0) {
-    const currentSize = itemSizeMap.value.get(key)
+    const cachedHeight = itemHeights.value.get(index)
-    if (currentSize !== height) {
+    if (cachedHeight !== height) {
-      const newSizes = new Map(itemSizeMap.value)
+      const newHeights = new Map(itemHeights.value)
-      newSizes.set(key, height)
+      newHeights.set(index, height)
-      itemSizeMap.value = newSizes
+      itemHeights.value = newHeights
     }
   }
 }
@@ -418,22 +332,12 @@ const setupResizeObserver = () => {
   }
   
   resizeObserver.value = new ResizeObserver((entries) => {
-    let hasChanges = false
     for (const entry of entries) {
-      const key = entry.target.dataset.key
+      const index = parseInt(entry.target.dataset.index, 10)
-      if (key !== undefined) {
+      if (!isNaN(index)) {
-        const oldSize = itemSizeMap.value.get(key)
+        measureItem(index, entry.target)
-        measureItem(key, entry.target)
-        const newSize = itemSizeMap.value.get(key)
-        if (oldSize !== newSize) {
-          hasChanges = true
       }
     }
-    }
-    
-    if (hasChanges) {
-      updateVisibleItems(false)
-    }
   })
 }
 
@@ -452,15 +356,6 @@ const handleWheel = (event) => {
 }
 
 const handleScroll = (event) => {
-  if (!$_scrollDirty) {
-    $_scrollDirty = true
-    
-    requestAnimationFrame(() => {
-      $_scrollDirty = false
-      updateVisibleItems(false, true)
-    })
-  }
-  
   const target = event.target
   scrollTop.value = target.scrollTop
   isScrolling.value = true
@@ -506,13 +401,12 @@ const handleScroll = (event) => {
 }
 
 const scrollToIndex = (index, behavior = 'auto') => {
-  if (!renderContainerRef.value || index < 0 || index >= props.data.length) return
+  if (!renderContainerRef.value || index < 0 || index >= computedData.value.length) return
   
-  const sizesMap = sizes.value
+  const position = getItemPosition(index)
-  const offset = index > 0 ? (sizesMap[index - 1]?.accumulator || 0) : 0
   
   renderContainerRef.value.scrollTo({
-    top: offset,
+    top: position.offset,
     behavior
   })
 }
@@ -550,21 +444,13 @@ const scrollToTop = (behavior = 'smooth') => {
 const getScrollElement = () => renderContainerRef.value
 
 const getVisibleIndices = () => {
-  const indices = []
+  const { start, end } = visibleRange.value
-  for (let i = $_startIndex; i < $_endIndex; i++) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
-    indices.push(i)
-  }
-  return indices
 }
 
 const resetMeasurements = () => {
-  itemSizeMap.value = new Map()
+  itemHeights.value = new Map()
   itemRefs.clear()
-  pool.value = []
-  viewMap.clear()
-  scrollTop.value = 0
-  $_startIndex = 0
-  $_endIndex = 0
 }
 
 const isAtPageBottom = () => {
@@ -584,33 +470,52 @@ const observeVisibleItems = () => {
   
   resizeObserver.value.disconnect()
   
-  for (const [key, element] of itemRefs) {
+  for (const [index, element] of itemRefs) {
     if (element) {
       resizeObserver.value.observe(element)
     }
   }
 }
 
-watch(() => props.data, () => {
+watch(() => computedData.value, (newData, oldData) => {
-  itemSizeMap.value = new Map()
+  const oldLength = oldData?.length || 0
-  pool.value = []
+  const newLength = newData.length
-  viewMap.clear()
+  
-  itemRefs.clear()
+  if (newLength !== oldLength) {
-  $_startIndex = 0
+    const newHeights = new Map()
-  $_endIndex = 0
+    
+    const minLen = Math.min(oldLength, newLength)
+    for (let i = 0; i < minLen; i++) {
+      if (itemHeights.value.has(i)) {
+        newHeights.set(i, itemHeights.value.get(i))
+      }
+    }
+    
+    itemHeights.value = newHeights
     
     nextTick(() => {
-    updateVisibleItems(true)
+      observeVisibleItems()
     })
-}, { deep: true })
+  }
   
-watch(sizes, () => {
+  previousDataLength.value = newLength
-  updateVisibleItems(false)
+}, { deep: false })
+
+watch(visibleItems, (newItems) => {
+  nextTick(() => {
+    observeVisibleItems()
+  })
+  if (newItems.length > 0) {
+    const firstItem = newItems[0]
+    const lastItem = newItems[newItems.length - 1]
+    emit('visible-change', firstItem.index, lastItem.index)
+  }
 }, { deep: true })
 
 onMounted(() => {
   setupResizeObserver()
   isInitialized.value = true
+  previousDataLength.value = computedData.value.length
   
   nextTick(() => {
     if (pendingScrollToBottom.value) {
@@ -618,7 +523,7 @@ onMounted(() => {
       scrollToBottom()
     }
     
-    updateVisibleItems(true)
+    observeVisibleItems()
   })
 })
 
@@ -632,11 +537,11 @@ onBeforeUnmount(() => {
   }
   
   itemRefs.clear()
-  viewMap.clear()
 })
 
 defineExpose({
   scrollToIndex,
+  scrollToItem: scrollToIndex,
   scrollToBottom,
   scrollToTop,
   getScrollElement,
@@ -651,17 +556,29 @@ defineExpose({
 <style lang="less" scoped>
 .virtual-scroller {
   -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
   
   &::-webkit-scrollbar {
     display: none;
-    width: 0;
+    width: 6px;
-    height: 0;
+    height: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
   }
   
   .virtual-scroller-wrapper {
     contain: content;
+    
   }
   
   .virtual-scroller-spacer {
@@ -675,6 +592,12 @@ defineExpose({
   
   .virtual-scroller-render-container {
     contain: layout style;
+      
+    &::-webkit-scrollbar {
+      display: none;
+      width: 6px;
+      height: 6px;
+    }
   }
   
   .virtual-scroller-item {

src/config/modelConfig/painting.json

@@ -12,6 +12,6 @@
     { "value": "Jimeng_4.0", "label": "Jimeng.4.0" }
   ],
   "vision": [
-    { "value": "Qwen3.5plus", "label": "Qwen3.5plus" }
+    { "value": "Qwen3.5plus", "label": "Qwen3.5plus", "disabled": true }
   ]
 }

src/config/modelConfig/video.json

@@ -1,8 +1,24 @@
 {
-  "video": [
+  "文生视频": [
-    { "value": "FlashHead", "label": "FlashHead" },
+    { "value": "LTX2.0", "label": "LTX2.0 T2V" },
-    { "value": "LTX2.3-T2V", "label": "LTX 2.3-T2V" },
+    { "value": "viduQ3-T2V", "label": "viduQ3 T2V" }
-    { "value": "Vidu Q3-I2V", "label": "Vidu Q3-I2V" },
+  ],
-    { "value": "Vidu Q3-T2V", "label": "Vidu Q3-T2V" }
+  "首尾帧": [
+    { "value": "Hailuo-02-fast", "label": "海螺 fast" },
+    { "value": "LTX2.0-I2V", "label": "LTX2.0 I2V" },
+    { "value": "LTX2.3-T2V", "label": "LTX2.3 T2V", "disabled": true },
+    { "value": "ViduQ3-turbo", "label": "ViduQ3-turbo" }
+  ],
+  "数字人": [
+    { "value": "FlashHead", "label": "FlashHead" }
+  ],
+  "全能参考": [
+    { "value": "Seedance 2.0", "label": "Seedance 2.0", "disabled": true }
+  ],
+  "智能多帧": [
+    { "value": "Seedance 2.0", "label": "Seedance 2.0", "disabled": true }
+  ],
+  "主体参考": [
+    { "value": "Seedance 2.0", "label": "Seedance 2.0", "disabled": true }
   ]
 }

src/config/runninghub/index.js

@@ -1,12 +1,14 @@
-export async function Playload(data,type) {
+import { fetchModelConfig } from '@/utils/modelConfig'
-  // data = getWidthHeight(data)
+
+export async function Playload(data) {
   try {
-    const response = await fetch(`https://resources.xueai.art/AIGC/static/public/Platform/Painting/workflows/${type}/${data.modelName}.json`)
+    const json = await fetchModelConfig(data.type, data.modelName, data.modelType)
-    const json = await response.json()
     
     const nodeInfoList = []
+    const proportionParam = data.params.find(param => param.name === 'proportion') || {data: 0}
+    const resolutionParam = data.params.find(param => param.name === 'resolution') || {data: 0}
     
-    if (Array.isArray(data.imgs) && data.imgs.length > 0 && type === 'image') {
+    if (Array.isArray(data.imgs) && data.imgs.length > 0 && (data.modelType === 'image' || data.modelType === 'edit')) {
       for (const key of data.imgs) {
         if (json.nodeInfoList[key.name]) {
           console.log(key)
@@ -27,9 +29,30 @@ export async function Playload(data,type) {
       }
     }
 
+    if ((json.nodeInfoList.width || json.nodeInfoList.height) && (proportionParam.data && resolutionParam.data)) {
+      const { width, height } = getWidthHeight({
+        proportion: proportionParam.data,
+        resolution: resolutionParam.data
+      })
+      json.nodeInfoList.width.fieldValue = width
+      json.nodeInfoList.height.fieldValue = height
+      nodeInfoList.push(json.nodeInfoList.width, json.nodeInfoList.height)
+    }
+
+    if (Array.isArray(json.seed)) {
+      const min = Math.pow(10, 0)
+      const max = Math.pow(10, 9) - 1
+      const randomNum = Math.floor(Math.random() * (max - min + 1)) + min
+      json.seed.map((seedItem) => {
+        seedItem.fieldValue = randomNum
+        nodeInfoList.push(seedItem)
+      })
+    }
+
     if (Array.isArray(json.must)) {
       nodeInfoList.push(...json.must)
     }
+
     return {
       workflowId: json.workflowId,
       nodeInfoList
@@ -46,22 +69,3 @@ export function result(result) {
   }
   return { type: false, message: result.data.exception_message }
 }
-function getWidthHeight(data) {
-  // 去除分辨率字符串中的'p'并转换为数字
-  // const resolution = 720
-  const resolution = Number.parseInt(data.resolution.replace('p', '')) || Number.parseInt(data.resolution)
-  // 解析宽高比
-  const aspectRatioParts = data.aspect_ratio.split(':') || data.aspect_ratio.split('：')
-  const widthRatio = Number.parseInt(aspectRatioParts[0])
-  const heightRatio = Number.parseInt(aspectRatioParts[1])
-  if (widthRatio > heightRatio) {
-    data.height = resolution
-    data.width = Math.round(resolution * widthRatio / heightRatio)
-  } else {
-    data.width = resolution
-    data.height = Math.round(resolution * heightRatio / widthRatio)
-  }
-  console.log(data.width, data.height)
-
-  return data
-}

src/router/index.js

@@ -29,49 +29,47 @@ const router = createRouter({
   routes
 })
 
-// router.beforeEach(async (to, from) => {
+router.beforeEach(async (to, from) => {
-//   if(to.query.token){
+  if(to.query.token){
-//     setToken(to.query.token)
+    setToken(to.query.token)
-//   } else {
+  } else {
-//     // 检查是否有 token
+    // 检查是否有 token
-//     const token = getToken()
+    const token = getToken()
-//     if (!token) {
+    if (!token) {
-//       // 没有 token，重定向到登录页
+      // 没有 token，重定向到登录页
-//       return '/login'
+      return '/login'
-//     }
+    }
-//   }
+  }
 
-//   // 白名单路径（不需要验证 token 的路径）
+  // 白名单路径（不需要验证 token 的路径）
-//   const whiteList = ['/login']
+  const whiteList = ['/login']
-//   // 获取用户 store 实例
+  // 获取用户 store 实例
-//   const userStore = useUserStore()
+  const userStore = useUserStore()
-//   // 如果访问的是白名单路径，直接放行
+  // 如果访问的是白名单路径，直接放行
-//   if (whiteList.includes(to.path)) {
+  if (whiteList.includes(to.path)) {
-//     return true
+    return true
-//   }
+  }
 
-//   // 检查 token 是否有效
+  // 检查 token 是否有效
-//   try {
+  try {
-//     const isTokenValid = await userStore.checkTokenValid()
+    const isTokenValid = await userStore.checkTokenValid()
-//     console.log(isTokenValid)
+    console.log(isTokenValid)
-//     if (isTokenValid) {
+    if (isTokenValid) {
-//       // token 有效，允许访问
+      // token 有效，允许访问
-//       if (!userStore.userInfo.id) {
+      if (!userStore.userInfo.id) {
-//         // 如果用户信息不存在，则从服务器获取
+        // 如果用户信息不存在，则从服务器获取
-//         await userStore.getInfo()
+        await userStore.getInfo()
-//       }
+      }
-//       return true
+      return true
-//     } else {
+    } else {
-//       // token 无效，重定向到登录页
+      // token 无效，重定向到登录页
-//       return '/login'
+      return '/login'
-//     }
+    }
-//   } catch (error) {
+  } catch (error) {
-//     // 验证过程中出错，重定向到登录页
+    // 验证过程中出错，重定向到登录页
-//     console.error('验证 token 时出错:', error)
+    console.error('验证 token 时出错:', error)
-//     return '/login'
+    return '/login'
-//   }
+  }
-// })
+})
-
-  router.beforeEach(async (to, from) => {return true})
 
 export default router

src/stores/display.js

@@ -6,17 +6,22 @@ const DisplayStoreSetup = () => {
   const currentPage = ref(0)
   const hasMoreData = ref(true)
   const isLoading = ref(false)
+  const currentResultData = ref(null)
+  const dialogBoxRef = ref(null)
+  
+  const canvasVisible = ref(false)
+  const canvasImage = ref('')
+  const canvasReferenceImages = ref([])
+  const canvasSource = ref('')
   
   const addGeneratingItem = (item) => {
     const newItem = {
       id: item.taskId || crypto.randomUUID(),
       status: 'generate',
-      text: item.text || '生成中...',
-      name: item.name || '生成中...',
       type: item.type || 'image',
       time: item.time || new Date().toLocaleString(),
       files: [],
-      ...item
+      generateData: item.generateData || {}
     }
     tempList.value.unshift(newItem)
     return newItem
@@ -50,6 +55,13 @@ const DisplayStoreSetup = () => {
     isLoading.value = false
   }
 
+  const deleteHistoryItem = (id) => {
+    const index = tempList.value.findIndex(item => item.id === id)
+    if (index !== -1) {
+      tempList.value.splice(index, 1)
+    }
+  }
+  
   const scrollToBottom = async () => {
     const refValue = scrollerRef.value
     
@@ -81,6 +93,40 @@ const DisplayStoreSetup = () => {
     }
   }
   
+  const setResultData = (data) => {
+    currentResultData.value = data
+  }
+  
+  const setDialogBoxRef = (ref) => {
+    dialogBoxRef.value = ref
+  }
+  
+  const triggerGenerateWithResult = async () => {
+    if (dialogBoxRef.value && currentResultData.value) {
+      await dialogBoxRef.value.fillParamsFromResult(currentResultData.value)
+      await dialogBoxRef.value.handleStart()
+    }
+  }
+  
+  const fillParamsForEdit = () => {
+    if (dialogBoxRef.value && currentResultData.value) {
+      dialogBoxRef.value.fillParamsFromResult(currentResultData.value)
+    }
+  }
+  
+  const openCanvas = (data) => {
+    if (typeof data === 'string') {
+      canvasImage.value = data
+      canvasReferenceImages.value = []
+      canvasSource.value = ''
+    } else {
+      canvasImage.value = data.mainImage?.url || data.mainImage || ''
+      canvasReferenceImages.value = data.referenceImages || []
+      canvasSource.value = data.source || ''
+    }
+    canvasVisible.value = true
+  }
+
   return {
     Sender_variant,
     scrollerRef,
@@ -89,13 +135,25 @@ const DisplayStoreSetup = () => {
     currentPage,
     hasMoreData,
     isLoading,
+    currentResultData,
+    dialogBoxRef,
+    canvasVisible,
+    canvasImage,
+    canvasReferenceImages,
+    canvasSource,
     addGeneratingItem,
     updateItemToSuccess,
     initHistoryList,
     prependHistoryList,
     appendHistoryList,
     resetPagination,
-    scrollToBottom
+    scrollToBottom,
+    deleteHistoryItem,
+    setResultData,
+    setDialogBoxRef,
+    triggerGenerateWithResult,
+    fillParamsForEdit,
+    openCanvas
   }
 }
 

src/stores/user.js

@@ -4,6 +4,7 @@ import {
   getUserInfo as getUserInfoApi,
   logout as logoutApi
 } from '@/apis/auth'
+import { getFreeTimes } from '@/apis/display'
 import { clearToken, getToken, setToken } from '@/utils/auth'
 
 const storeSetup = () => {
@@ -33,6 +34,7 @@ const storeSetup = () => {
 
   const dept = ref({}) // 当前用户所在部门集合
   const isLogin = ref(false)
+  const freeTimes = ref(0) // 免费次数
 
   // 重置token
   const resetToken = () => {
@@ -70,6 +72,18 @@ const storeSetup = () => {
     }
   }
 
+  // 获取免费次数
+  const fetchFreeTimes = async (chargeType = 1) => {
+    if (userInfo.id) {
+      const res = await getFreeTimes(userInfo.id)
+      const balanceList = res.data || []
+      const target = balanceList.find((item) => item.chargeType === chargeType)
+      freeTimes.value = target?.balance || 0
+      return freeTimes.value
+    }
+    return 0
+  }
+
   // 登录
   const accountLogin = async (req) => {
     const res = await accountLoginApi(req)
@@ -120,12 +134,14 @@ const storeSetup = () => {
     dept,
     username,
     isLogin,
+    freeTimes,
     accountLogin,
     logout,
     logoutCallBack,
     getInfo,
     resetToken,
-    checkTokenValid
+    checkTokenValid,
+    fetchFreeTimes
   }
 }
 

src/utils/createTask.js

@@ -1,19 +1,21 @@
 import outPlatform from '@/config/index'
 
 // 处理音频生成任务的数据并返回
-export async function createTask(data, type, taskId, token) {
+export async function createTask(data, taskId, token) {
-  console.log(data, type)
+  console.log(data)
-  const payload = await outPlatform[data.platform].Playload(data, type)
+  const payload = await outPlatform[data.platform].Playload(data)
 
   return {
     AIGC: data.AIGC,
     platform: data.platform,
-    prompt: data.prompt,
+    taskType: data.modelType === 'text' ? 1 : 2,
-    taskType: type === 'text' ? 1 : 2,
     modelName: data.modelName,
     payload,
     taskId,
-    token
+    token,
+    quantity: data.quantity,
+    free: data.free,
+    result: data.result
   }
 }
 
@@ -23,5 +25,5 @@ export async function getTask(result) {
     const urls = result.data.map(item => item.fileUrl)
     return { type: true, urls: urls }
   }
-  return { type: false, message: result.data?.exception_message || '生成失败' }
+  return { type: false, message: result.data.exception_message || '生成失败' }
 }

src/utils/modelConfig.js

@@ -0,0 +1,95 @@
+const STORAGE_PREFIX = 'model_config_'
+
+function getTodayDateString() {
+  const today = new Date()
+  return `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+}
+
+function getStorageKey(modelName, modelType) {
+  return `${STORAGE_PREFIX}${modelType}_${modelName}`
+}
+
+function getConfigFromStorage(modelName, modelType) {
+  try {
+    const key = getStorageKey(modelName, modelType)
+    const stored = localStorage.getItem(key)
+    
+    if (!stored) {
+      return null
+    }
+    
+    const data = JSON.parse(stored)
+    const todayStr = getTodayDateString()
+    
+    if (data.storageDate !== todayStr) {
+      localStorage.removeItem(key)
+      return null
+    }
+    
+    return data.config
+  } catch (error) {
+    console.error('从localStorage读取配置失败:', error)
+    return null
+  }
+}
+
+function saveConfigToStorage(modelName, modelType, config) {
+  try {
+    const key = getStorageKey(modelName, modelType)
+    const data = {
+      config,
+      storageDate: getTodayDateString(),
+      timestamp: Date.now()
+    }
+    localStorage.setItem(key, JSON.stringify(data))
+  } catch (error) {
+    console.error('保存配置到localStorage失败:', error)
+  }
+}
+
+export async function fetchModelConfig(type, modelName, modelType) {
+  const cachedConfig = getConfigFromStorage(modelName, modelType)
+  
+  if (cachedConfig) {
+    console.log(`从缓存加载模型配置: ${modelName}`)
+    return cachedConfig
+  }
+  
+  try {
+    const url = `${import.meta.env.VITE_API_MODEL_RESOURCE}/static/public/Platform/${type}/workflows/${modelType}/${modelName}.json`
+    console.log(`从远程获取模型配置: ${url}`)
+    
+    const response = await fetch(url)
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    
+    const config = await response.json()
+    
+    saveConfigToStorage(modelName, modelType, config)
+    
+    return config
+  } catch (error) {
+    console.error('获取模型配置失败:', error)
+    throw error
+  }
+}
+
+export function clearModelConfigCache(modelName, modelType) {
+  const key = getStorageKey(modelName, modelType)
+  localStorage.removeItem(key)
+}
+
+export function clearAllModelConfigCache() {
+  const keysToRemove = []
+  
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i)
+    if (key && key.startsWith(STORAGE_PREFIX)) {
+      keysToRemove.push(key)
+    }
+  }
+  
+  keysToRemove.forEach(key => localStorage.removeItem(key))
+}

src/utils/websocket.js

@@ -1,16 +1,16 @@
 import { ElNotification } from 'element-plus'
 import { h, ref } from 'vue'
-import { useDisplayStore } from '@/stores'
+import { useDisplayStore, useUserStore } from '@/stores'
 import { getToken } from '@/utils/auth'
 import { createTask, getTask } from '@/utils/createTask'
 import { userError } from '@/utils/tokenError'
 
 export function getChargeType(chargeType) {
   switch (chargeType) {
-    case 'painting':
+    case 'Painting':
       return 1
-    case 'video':
+    case 'Video':
-      return 2
+      return 4
     default:
       return 2
   }
@@ -37,17 +37,18 @@ export function websocketError(code, msg) {
   }
 
   ElNotification({
-    title: '生成通知',
+    title: '生成失败',
 
     message: h('i', { style: 'color: teal' }, message),
-    type: 'error'
+    type: 'error',
+    duration: 6000 // 增加持续时间以适应更多信息
   })
 }
 
 export function websocketSuccess() {
   // 合并两个通知为一个
   ElNotification({
-    title: '生成通知',
+    title: '生成成功',
     message: h('div', [
       h('div', { style: 'font-weight: bold; color: teal;' }, '生成成功！'),
       h('br'),
@@ -58,7 +59,7 @@ export function websocketSuccess() {
   })
 }
 
-export async function generate(type, data) {
+export async function generate(data, generateData) {
   const progress_text = ref('')
   const message = ref('')
   const useDisplay = useDisplayStore()
@@ -68,7 +69,7 @@ export async function generate(type, data) {
   
   useDisplay.isSubGerenate = true
 
-  const result = await createTask(data, type, taskId, token)
+  const result = await createTask(data, taskId, token)
   console.log(result)
   // const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjY0NDEwODAyMjk1OTgzNzIzMCwicm5TdHIiOiJiWkVwS2JLWFJyZmRIaFFHWXZKTkdzOGdGM0JSRmxQOCJ9.5eQ2GtVdrDntQDe2tnF8vl_DhTfd2uW-KNqzvl1imc0'
   const wsURL = `${import.meta.env.VITE_API_WORKFLOW_WS}/?token=Bearer ${token}`
@@ -102,9 +103,8 @@ export async function generate(type, data) {
         
         useDisplay.addGeneratingItem({
           taskId: taskId,
-          text: data.prompt || '生成中...',
+          type: data.type,
-          name: data.prompt || '生成中...',
+          generateData: generateData
-          type: type
         })
         setTimeout(() => {
           useDisplay.scrollToBottom()
@@ -136,7 +136,6 @@ export async function generate(type, data) {
     socket.onclose = async (event) => {
       console.log('WebSocket已关闭:', event)
       useDisplay.isSubGerenate = false
-      // 清理心跳定时器
       if (heartbeatInterval) {
         clearInterval(heartbeatInterval)
       }
@@ -147,21 +146,19 @@ export async function generate(type, data) {
       } else if (event.code === 1000 && event.reason === 'success') {
         console.log('收到服务器消息:', res)
         const result = await getTask(res)
+        if(useUserStore().freeTimes) await useUserStore().fetchFreeTimes()
         if (result.type) {
-          
           if (currentTaskId) {
             useDisplay.updateItemToSuccess(currentTaskId, result.urls)
           }
           
           websocketSuccess()
         } else {
-          websocketError(4403, res.message)
+          websocketError(4403, result.message)
         }
       } else {
         websocketError(event.code, event.reason)
       }
-      // clearInterval(progressInterval.value)
-      // 清理心跳定时器
       if (heartbeatInterval) {
         clearInterval(heartbeatInterval)
       }

src/views/home/display/components/set.vue

@@ -1,25 +1,20 @@
 <template>
   <div style="width: 100%;display: flex;justify-content: center;align-items: center;transform: rotate(180deg);">
     <div class="primary-box" :class="{ 'none-primary-box': props.item.status === 'none' }">
-      <!-- 标题 -->
+      
-      <div class="title">
+      <div class="prompt-container" ref="promptContainerRef">
-        <div class="style">
+        <div class="prompt-wrapper" ref="promptWrapperRef">
-          <div class="name" ref="nameRef">{{ props.item.text }}</div>
+          <div class="prompt" ref="promptRef" :class="{ 'expanded': isHovering }">
-          <div class="generate-data" ref="generateDataRef">
+            <span class="prompt-text" @mouseenter="isHovering = true" @mouseleave="isHovering = false">{{ props.item.generateData.prompt || '生成图片' }}</span>
-            <div class="detailed-data first-detailed-data">{{ props.item.model }}</div>
+            <div class="generate-data internal" v-show="!isHovering && !showExternalGenerateData">
-            <!-- <div class="detailed-data">多少秒</div> -->
+              <div class="detailed-data first-detailed-data">{{ props.item.generateData.model }}</div>
-            <div class="detailed-data">{{ props.item.proportion }}</div>
+              <div class="detailed-data">{{ props.item.generateData.proportion }}</div>
-            <div class="detailed-data">{{ props.item.resolution }}</div>
-            <div class="detailed-data">{{ props.item.quantity }}张</div>
-            <!-- <div class="detailed-data">多少k</div> -->
             </div>
           </div>
-        <div v-if="props.item.parentIndex" class="style">
+        </div>
-          <span class="time">源自 {{ props.item.parentTime }}</span>
+        <div class="generate-data external" v-show="!isHovering && showExternalGenerateData">
-          <div class="dividing-line"></div>
+          <div class="detailed-data first-detailed-data">{{ props.item.generateData.model }}</div>
-          <span class="time">源自 {{ props.item.parentTime }}</span>
+          <div class="detailed-data">{{ props.item.generateData.proportion }}</div>
-          <div v-if="props.item.parentIndex" class="dividing-line"></div>
-          <span class="time"> 第 {{ props.item.parentIndex }} 张图片</span>
         </div>
       </div>
 
@@ -49,16 +44,16 @@
         </div>
       </div>
 
-      <!-- 已完成 -->
+      <!-- 已完成 图片 -->
-      <div v-if="props.item.status === 'success'" class="box success-box">
+      <div v-if="props.item.status === 'success' && props.item.type === 'Painting'" class="box success-box">
-        <div v-for="(file, index) in props.item.files" :key="index" class="one-box">
+        <div v-for="(file, index) in props.item.files" :key="index" class="one-box" :class="{ 'collected': isCollected(file) }" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1">
           <!-- <img :src="file" alt="index" class="img" /> -->
           <Img :src="file" alt="index" class="img" />
 
           <div class="left-top">
-            <div class="left-top-btn" @click="downloadImage(file, 'image')"><img src="@/assets/display/download.svg" /></div>
+            <div v-show="hoverIndex === index" class="left-top-btn download-btn" @click="downloadImage(file, 'image')"><img src="@/assets/display/download.svg" /></div>
-            <span class="line" />
+            <span v-if="hoverIndex === index" class="line" />
-            <div class="left-top-btn" @click="addCollection(file)"><img src="@/assets/display/collection.svg" /></div>
+            <div class="left-top-btn collect-btn" @click="addCollection(file)"><img :src="isCollected(file) ? collectionActiveIcon : collectionIcon" /></div>
           </div>
           
           <el-tooltip
@@ -74,8 +69,22 @@
         </div>
       </div>
 
-      <div v-if="props.item.status === 'success'" class="bottom-btn-group">
+      <!-- 已完成 视频 -->
-        <div v-for="(item, index) in bottomBtnGroup" :key="index" class="bottom-btn" @click="item.click(file, index)">
+      <div v-if="props.item.status === 'success' && props.item.type === 'Video'" class="box success-box">
+        <div class="one-box" :class="{ 'collected': isCollected(props.item.files[0]) }" @mouseenter="hoverIndex = 0" @mouseleave="hoverIndex = -1">
+          <!-- <img :src="file" alt="index" class="img" /> -->
+          <video :src="props.item.files[0]" class="video" controls playsinline />
+
+          <div class="left-top">
+            <div v-show="hoverIndex === 0" class="left-top-btn download-btn" @click="downloadImage(props.item.files[0], 'video')"><img src="@/assets/display/download.svg" /></div>
+            <span v-if="hoverIndex === 0" class="line" />
+            <div class="left-top-btn collect-btn" @click="addCollection(props.item.files[0])"><img :src="isCollected(props.item.files[0]) ? collectionActiveIcon : collectionIcon" /></div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="props.item.status === 'success'" class="bottom-btn-group" style="margin-top: 8px;">
+        <div v-for="(item, index) in bottomBtnGroup" :key="index" class="bottom-btn" @click="item.click()">
           <img :src="item.icon" />
           <span>{{ item.name }}</span>
         </div>
@@ -86,13 +95,15 @@
 
 <script setup>
 import brush from '@/assets/display/brush.svg'
+import collectionIcon from '@/assets/display/collection.svg'
+import collectionActiveIcon from '@/assets/display/collection-active.svg'
 import { useDisplayStore, useParamStore, useUserStore } from '@/stores'
 import { downloadImage } from '@/utils/downloadImage.js'
 import reEditIcon from '@/assets/display/reEdit.svg'
 import againGenerateIcon from '@/assets/display/againGenerate.svg'
 import deleteImageIcon from '@/assets/display/deleteImage.svg'
 import Img from '@/components/Img/index.vue'
-import { cancelOrCollect } from '@/apis/display'
+import { cancelOrCollect, deleteGenerateHistory } from '@/apis/display'
 
 const props = defineProps({
   item: {
@@ -100,13 +111,84 @@ const props = defineProps({
     default: () => ({})
   }
 })
-
+const emit = defineEmits(['open-canvas', 'delete-success'])
-const emit = defineEmits(['open-canvas'])
 
 const useDisplay = useDisplayStore()
 const useParams = useParamStore()
 const useUser = useUserStore()
 
+const localCollectStatus = ref({ ...props.item.collectStatus })
+const hoverIndex = ref(-1)
+const isHovering = ref(false)
+const showExternalGenerateData = ref(false)
+const promptContainerRef = ref(null)
+const promptWrapperRef = ref(null)
+const promptRef = ref(null)
+
+const checkTextOverflow = () => {
+  nextTick(() => {
+    if (promptRef.value && promptWrapperRef.value && promptContainerRef.value) {
+      const lineHeight = 22.5
+      const padding = 8
+      const twoLineHeight = lineHeight * 2 + padding
+      
+      promptRef.value.style.maxHeight = 'none'
+      promptRef.value.style.overflow = 'hidden'
+      
+      const actualHeight = promptRef.value.scrollHeight
+      const lineCount = Math.ceil((actualHeight - padding) / lineHeight)
+      
+      if (!isHovering.value) {
+        promptRef.value.style.maxHeight = `${twoLineHeight}px`
+        promptRef.value.style.overflow = 'hidden'
+      }
+      
+      showExternalGenerateData.value = lineCount >= 3
+      
+      if (!isHovering.value) {
+        if(lineCount >= 3){
+          promptContainerRef.value.style.height = `${twoLineHeight}px`
+        } else {
+          promptContainerRef.value.style.height = `${actualHeight}px`
+        }
+      }
+    }
+  })
+}
+
+watch(isHovering, (newVal) => {
+  if (promptRef.value) {
+    const lineHeight = 22.5
+    const padding = 8
+    const twoLineHeight = lineHeight * 2 + padding 
+    
+    if (newVal) {
+      promptRef.value.style.maxHeight = 'none'
+      promptRef.value.style.overflow = 'visible'
+    } else {
+      promptRef.value.style.maxHeight = `${twoLineHeight}px`
+      promptRef.value.style.overflow = 'hidden'
+    }
+  }
+})
+
+watch(() => props.item.generateData.prompt, () => {
+  checkTextOverflow()
+}, { immediate: true })
+
+onMounted(() => {
+  checkTextOverflow()
+  window.addEventListener('resize', checkTextOverflow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkTextOverflow)
+})
+
+const isCollected = (url) => {
+  return localCollectStatus.value[url] === true
+}
+
 const generateStatusText = computed(() => {
   if (props.item.status === 'generate') {
     return '正在生成中...'
@@ -122,19 +204,53 @@ const AIbrush = (file, index) => {
   })
 }
 
-const reEdit = (url, number) => {
+const reEdit = () => {
-  console.log(number)
+  if(props.item.generateData?.modelType === 'edit'){
+    ElMessage.error('画笔生成的任务不能重新编辑')
+    return
+  }
+  useDisplay.setResultData(props.item.generateData)
+  useDisplay.fillParamsForEdit()
 }
 
-const againGenerate = (url, number) => {
+const againGenerate = () => {
-  console.log(number)
+  if(props.item.generateData?.modelType === 'edit'){
+    ElMessage.error('画笔生成的任务不能再次生成')
+    return
+  }
+  useDisplay.setResultData(props.item.generateData)
+  useDisplay.triggerGenerateWithResult()
 }
 
-const deleteImage = (url, number) => {
+const deleteImage = () => {
-  console.log(number)
+  ElMessageBox.confirm(
+    '确定要删除该批次图片吗？此操作不可恢复！',
+    '删除确认',
+    {
+      confirmButtonText: '确定删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+      confirmButtonClass: 'el-button--danger'
+    }
+  ).then(async () => {
+    try {
+      const res = await deleteGenerateHistory({
+        id: props.item.id
+      })
+      if (res.success) {
+        ElMessage.success('删除成功')
+        emit('delete-success', props.item.id)
+      } else {
+        ElMessage.error(res.message || '删除失败')
+      }
+    } catch (error) {
+      console.error('删除操作失败:', error)
+      ElMessage.error('删除操作失败')
+    }
+  }).catch(() => {})
 }
 
-const bottomBtnGroup = [
+const bottomBtnGroup = computed(() => [
   {
     name: '重新编辑',
     icon: reEditIcon,
@@ -150,17 +266,18 @@ const bottomBtnGroup = [
     icon: deleteImageIcon,
     click: deleteImage
   }
-]
+])
 
 const addCollection = async (url) => {
   try {
     const res = await cancelOrCollect({
       taskId: props.item.id,
       userId: useUser.userInfo.id,
-      url: url
+      url: url,
     })
     if (res.success) {
       ElMessage.success(res.message || '操作成功')
+      localCollectStatus.value[url] = !localCollectStatus.value[url]
     } else {
       ElMessage.error(res.message || '操作失败')
     }
@@ -178,43 +295,87 @@ const addCollection = async (url) => {
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 20px;
+  gap: 12px;
-  padding-bottom: 20px;
+  padding-bottom: 40px;
 }
 .none-primary-box{
   height: 350px;
 }
 
-.title{
+.prompt-container{
-  // height: 25px;
   width: 100%;
-  display: flex;
+  position: relative;
-  align-items: center;
+  overflow: visible;
-  gap: 20px;
+}
 
-  .style{
+.prompt-wrapper{
+  position: relative;
   width: 100%;
-    display: inline;
+}
-  }
 
-  .name{
+.prompt{
   color: #333;
   font-family: "Microsoft YaHei";
-    font-size: 15px;
+  font-size: 14px;
   font-style: normal;
-    font-weight: 700;
+  font-weight: 400;
-    line-height: 1.5;
+  line-height: 22.5px;
   word-break: break-all;
-    display: inline;
+  padding: 8px;
-    margin-right: 20px;
+  background-color: #fff;
-  }
+  position: absolute;
+  left: -8px;
+  top: 0;
+  width: 102%;
+  z-index: 5;
+  width: auto;
   
-  .generate-data{
+  &.expanded{
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+}
+
+.prompt-text{
+  display: inline;
+  color: #333;
+  font-family: "Microsoft YaHei";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.generate-data{
   display: inline-flex;
   align-items: center;
+  background-color: #fff;
+  height: 22.5px;
+  text-align: center;
+  padding: 0 12px;
+
+  color: #999;
+  font-family: "Microsoft YaHei";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  
+  &.internal{
+    display: inline-flex;
+    margin-left: 10px;
   }
   
-  .detailed-data{
+  &.external{
+    position: absolute;
+    right: -16px;
+    bottom: 0;
+    z-index: 6;
+    // padding-right: 20px;
+  }
+}
+
+.detailed-data{
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -228,34 +389,11 @@ const addCollection = async (url) => {
   border-left: 1px solid #999;
   white-space: nowrap;
   height: 12px;
-  }
+}
 
-  .first-detailed-data{
+.first-detailed-data{
   border-left: none;
   padding-left: 0;
-  }
-
-  .time{
-    color: #333;
-    font-family: "Microsoft YaHei";
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-  }
-
-  .dividing-line{
-    height: 100%;
-    border: 1px solid #ccc;
-  }
-
-  .delete-btn{
-    cursor: pointer;
-  }
-
-  .delete-btn:hover{
-    color: #ff4949;
-  }
 }
 
 .box{
@@ -346,6 +484,11 @@ const addCollection = async (url) => {
     display:flex
   }
 }
+.one-box.collected{
+  .left-top{
+    display:flex
+  }
+}
 .success-box{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -358,6 +501,13 @@ const addCollection = async (url) => {
     object-fit: contain; /* 确保图片完整显示，不被裁剪 */
     border-radius: 8px; /* 可选：给图片添加圆角 */
   }
+
+  .video{
+    width: 380px;
+    height: auto; /* 保持宽高比 */
+    object-fit: contain; /* 确保图片完整显示，不被裁剪 */
+    border-radius: 8px; /* 可选：给图片添加圆角 */
+  }
 }
 
 .left-top,.bottom-brush{

src/views/home/display/index-vue-virtual-scroller.vue

@@ -1,391 +0,0 @@
-<template>
-  <div id="display" class="content-area">
-    <RefreshOverlay :visible="refreshing" />
-
-    <div class="back">
-      <img src="@/assets/display/back.svg" alt="">
-      <span class="title-text">退出</span>
-    </div>
-
-    <div v-if="props.if" class="btn-container">
-      <div class="btn">
-        <!-- <span class="btn-text">全部</span> -->
-        <img src="@/assets/display/search.svg" alt="">
-      </div>
-      <span class="line"></span>
-      <div class="btn">
-        <Select v-model="selectedTime" :options="timeOptions" width="auto">
-          <template #prefix>
-            <i-ep-Calendar />
-          </template>
-
-          <template #header>
-            <div class="header">
-              <el-date-picker
-                v-model="value1"
-                type="daterange"
-                start-placeholder="Start date"
-                end-placeholder="End date"
-                :size="size"
-              />
-            </div>
-          </template>
-        </Select>
-      </div>
-      <span class="line"></span>
-      <div class="btn">
-        <Select v-model="selectedFavorite" :options="favoriteOptions" width="auto" >
-          <template #prefix>
-            <i-ep-Star />
-          </template>
-        </Select>
-      </div>
-    </div>
-
-    <DynamicScroller
-      ref="scrollerRef"
-      v-if="props.if"
-      :items="list"
-      :min-item-size="800"
-      class="scroller"
-      :buffer="50"
-      @scroll="handleScroll"
-    >
-      <template #default="{ item, index, active }">
-        <DynamicScrollerItem
-          :key="item.id" 
-          :item="item"
-          :active="active"
-          :index="index"
-          data-index="index"
-        >
-          <Set :key="`${item.id}`" :item="item" />
-        </DynamicScrollerItem>
-      </template>
-    </DynamicScroller>
-  </div>
-</template>
-
-<script setup>
-import { useDisplayStore, useParamStore, useUserStore } from '@/stores'
-import { storeToRefs } from 'pinia'
-import Set from './components/set.vue'
-import RefreshOverlay from './components/RefreshOverlay.vue'
-import Select from '@/components/Select/index.vue'
-import { getGenerateHistoryList } from '@/apis/display'
-import { useRouter } from 'vue-router'
-
-const props = defineProps({
-  if: {
-    type: Boolean,
-    default: false
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const useDisplay = useDisplayStore()
-const useParams = useParamStore()
-const userStore = useUserStore()
-const router = useRouter()
-const refreshing = ref(false)
-const scrollerRef = ref(null)
-const isLoadingMore = ref(false)
-const activeTab = ref('all')
-const isInitializing = ref(true)
-let total = 0
-
-const timeOptions = [
-  { label: '全部', value: 'all' },
-  { label: '最近一周', value: 'week' },
-  { label: '最近一个月', value: 'month' },
-  { label: '最近三个月', value: 'quarter' }
-]
-
-const favoriteOptions = [
-  { label: '全部', value: 'all' },
-  { label: '已收藏', value: 'favorite' }
-]
-
-const selectedTime = ref('all')
-const selectedFavorite = ref('all')
-const { tempList } = storeToRefs(useDisplay)
-
-// const tempList = ref([
-//   { id: 0, type: 'image', status: 'none', name: '局部重绘', time: '2025-12-01 18:26', files: [] },
-//   { id: 1, type: 'image', status: 'success', name: '局部重绘', time: '2025-12-01 18:26', parentName: '2', parentTime: '2025-12-01 12:26', files: ['https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png'] },
-//   { id: 2, type: 'image', status: 'success', name: '局部重绘', time: '2025-12-01 18:26', parentName: '2', parentTime: '2025-12-01 12:26', files: ['https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png'] },
-//   { id: 3, type: 'image', status: 'success', name: '局部重绘', time: '2025-12-01 18:26', parentName: '2', parentTime: '2025-12-01 12:26', files: ['https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png'] },
-//   { id: 4, type: 'image', status: 'success', name: '局部重绘', time: '2025-12-01 18:26', parentName: '2', parentTime: '2025-12-01 12:26', files: ['https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png', 'https://sxwz.xueai.art/static/png/image4-1-1-BZWQeEAk.png'] }
-
-
-// ])
-const activeFilter = ref('all')
-const list = computed(() => {
-  const data = tempList.value || []
-  if (activeFilter.value === 'all') {
-    return data
-  }
-  return data.filter((item) => item.type === activeFilter.value)
-})
-
-const page = ref(1)
-	// 筛选列表里的不同生成类型： 图片，视频
-const toggleDisplay = (newValue, oldValue) => {
-  activeFilter.value = newValue
-}
-
-// 转换数据
-const conversion = (newlist) => {
-  const temp = newlist.data.records.map((item) => {
-    return {
-      id: item.taskId,
-      collection: item.collection,
-      status: 'success',
-      prompt: item.prompt,
-      params: item.params,
-      time: item.createTime,
-      files: [item.fileUrl]
-    }
-  })
-  return temp
-}
-
-// 获取历史列表
-const fetchHistory= async (isScrollTopLoad = false) => {
-  try {
-    if (isScrollTopLoad) {
-      return
-    }
-    
-    const result = await getGenerateHistoryList({ userId: userStore.userInfo.id, chargeType: 1 })
-    total = result.data ? result.data.length : 0
-    if (total === 0) {
-      useDisplay.Sender_variant = 'updown'
-      router.push({ name: 'home' })
-    }
-    
-    const wrappedData = {
-      data: {
-        records: result.data
-      }
-    }
-    const convertedList = conversion(wrappedData)
-    
-    const adaptedList = convertedList.map((item, index) => {
-      const originalItem = result.data[index]
-      return {
-        ...item,
-        text: originalItem?.title || item.prompt || '生成图片',
-        name: originalItem?.title || item.prompt || '生成图片',
-        type: 'image',
-        title: originalItem?.title || '生成图片'
-      }
-    })
-    
-    if (!isScrollTopLoad && adaptedList.length > 0) {
-      useDisplay.initHistoryList(adaptedList)
-      
-      await nextTick()
-      
-      const scrollToBottomDirect = (force = false) => {
-        if (scrollerRef.value) {
-          const el = scrollerRef.value.$el
-          if (el) {
-            const viewport = el.querySelector('.vue-recycle-scroller__viewport')
-            if (viewport) {
-              console.log('直接滚动 - scrollHeight:', viewport.scrollHeight, 'force:', force)
-              if (force) {
-                viewport.scrollTop = viewport.scrollHeight + 1000
-              } else {
-                viewport.scrollTop = viewport.scrollHeight
-              }
-            }
-          }
-          
-          if (typeof scrollerRef.value.scrollToItem === 'function') {
-            console.log('直接 scrollToItem')
-            scrollerRef.value.scrollToItem(list.value.length - 1)
-          }
-        }
-      }
-      
-      for (let i = 0; i < 20; i++) {
-        setTimeout(() => {
-          scrollToBottomDirect(i >= 15)
-        }, 60 * i)
-      }
-      
-      setTimeout(() => {
-        scrollToBottomDirect(true)
-        setTimeout(() => {
-          refreshing.value = false
-          isInitializing.value = false
-          useDisplay.scrollToBottom()
-        }, 600)
-      }, 1500)
-    } else {
-      useDisplay.initHistoryList(adaptedList)
-    }
-  } catch (error) {
-    console.error('获取历史失败:', error)
-    ElMessage({
-      message: '获取历史失败',
-      type: 'warning'
-    })
-  }
-}
-
-// 获取下一页数据
-const getList = async () => {
-  if (isLoadingMore.value) return
-  isLoadingMore.value = true
-  try {
-    await fetchHistory(true)
-  } finally {
-    isLoadingMore.value = false
-  }
-}
-
-// 处理滚动事件
-const handleScroll = (event) => {
-  if (isInitializing.value) return
-  
-  const { scrollTop, scrollHeight, clientHeight } = event.target
-  const distanceToBottom = scrollHeight - scrollTop - clientHeight
-  
-  // 临时禁用滚动到顶部获取历史记录
-  // if (scrollTop <= 50 && !isLoadingMore.value) {
-  //   getList()
-  // }
-  
-  if (distanceToBottom <= 50) {
-    useDisplay.Sender_variant = 'updown'
-  } else if (distanceToBottom >= 350) {
-    useDisplay.Sender_variant = 'default'
-  }
-}
-
-onMounted(() => {
-  console.log('display 组件已挂载')
-  if (!props.loading) return
-  refreshing.value = true
-  
-  nextTick(() => {
-    console.log('设置 scrollerRef 到 store')
-    useDisplay.scrollerRef = scrollerRef.value
-    fetchHistory()
-  })
-  
-  page.value++
-})
-</script>
-
-<style lang="less" scoped>
-.content-area {
-  width: 100%;
-  min-width: 750px;
-  height: 100%;
-  overflow-y: auto;
-  transition: all 0.3s ease;
-}
-.back{
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 36px;
-  padding: 10px;
-  position: absolute;
-  left: 30px;
-  top: 22px;
-  z-index: 3;
-  cursor: pointer;
-  border-radius: 10px;
-  // background-color: #FAFBFC;
-}
-
-.back:hover{
-  background-color: #e4e7ed;
-}
-
-.btn-container{
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: auto;
-  padding: 4px;
-  right: 30px;
-  top: 22px;
-  z-index: 3;
-
-  border-radius: 10px;
-  background-color: #FAFBFC;
-  position: absolute;
-
-  .btn{
-    display: flex;
-    padding: 5px;
-    align-items: center;
-    gap: 5px;
-  }
-
-  .btn-text{
-    color: #000;
-    font-family: "Microsoft YaHei";
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    text-align: center;
-  }
-
-  .line{
-    width: 1px;
-    height: 8px;
-    background-color: #ccc;
-  }
-}
-
-.scroller {
-  height: 100%;
-  padding: 30px 0px 350px 0px;
-  will-change: scroll-position;
-  -webkit-overflow-scrolling: touch; /* iOS Safari */
-  scroll-behavior: smooth; /* 平滑滚动 */
-
-  &::-webkit-scrollbar-track {
-    background: transparent; /* 轨道透明 */
-  }
-
-  :deep(.option-item) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 0 20px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-  }
-
-  :deep(.option-item:hover) {
-    background-color: #f5f7fa;
-  }
-
-  :deep(.option-item.selected) {
-    color: #000F33;
-    font-weight: 500;
-  }
-
-  :deep(.option-text) {
-    flex: 1;
-    text-align: left;
-  }
-
-  :deep(.option-check) {
-    margin-left: 10px;
-    font-weight: bold;
-  }
-}
-</style>

src/views/home/display/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="display" class="content-area">
     <RefreshOverlay :visible="refreshing" />
-    <Canvas v-model:visible="canvasVisible" :image="canvasImage" :reference-images="canvasReferenceImages" :source="canvasSource" @send="handleCanvasSend" />
+    <Canvas v-model:visible="canvasVisible" :image="canvasImage" :reference-images="canvasReferenceImages" :source="canvasSource" :type="props.type" @send="handleCanvasSend" />
 
     <div class="back" @click="handleExit">
       <img src="@/assets/display/back.svg" alt="">
@@ -45,16 +45,21 @@
     <VirtualScroller
       ref="scrollerRef"
       v-if="props.if"
-      :data="list"
+      :items="list"
-      :item-key="'id'"
+      key-field="id"
       :estimated-height="300"
-      :render-mode="'top'"
+      :buffer-size="3"
-      :buffer="2"
+      direction="reverse"
+      :bottom-placeholder-height="350"
       class="scroller"
       @scroll="handleScroll"
+      @visible-change="handleVisibleChange"
     >
       <template #default="{ item, index }">
-        <Set :key="item.id" :item="item" @open-canvas="openCanvas" />
+        <Set :key="item.id" :item="item" @open-canvas="openCanvas" @delete-success="handleDeleteSuccess" />
+      </template>
+      <template #bottom-placeholder>
+        <div style="height: 350px;"></div>
       </template>
     </VirtualScroller>
   </div>
@@ -83,7 +88,7 @@ const props = defineProps({
   },
   type: {
     type: String,
-    default: 'painting'
+    default: 'Painting'
   }
 })
 
@@ -96,13 +101,10 @@ const scrollerRef = ref(null)
 const isLoadingMoreLocked = ref(false)
 const activeTab = ref('all')
 const isInitializing = ref(true)
-const canvasVisible = ref(false)
+const { canvasVisible, canvasImage, canvasReferenceImages, canvasSource } = storeToRefs(useDisplay)
-const canvasImage = ref('')
-const canvasReferenceImages = ref([])
-const canvasSource = ref('')
 
 const chargeType = computed(() => getChargeType(props.type))
-console.log(chargeType.value)
+// console.log(chargeType.value)
 
 const timeOptions = [
   { label: '全部', value: 'all' },
@@ -134,35 +136,25 @@ const toggleDisplay = (newValue, oldValue) => {
 }
 
 const conversion = (newlist) => {
-  const temp = newlist.list.map((item) => {
+  const temp = newlist.map((item) => {
     const files = item.fileUrl ? item.fileUrl.split(',').filter(url => url.trim()) : []
+    const generateData = JSON.parse(item.result || '{}')
     return {
-      id: item.taskId,
+      id: item.id,
+      taskId: item.taskId,
+      type: props.type,
       collection: item.collection,
       status: 'success',
-      prompt: item.prompt,
+      generateData: generateData,
-      params: item.params,
       time: item.createTime,
-      files: files
+      files: files,
+      collectStatus: item.collectStatus || {}
     }
   })
+  console.log(temp) 
   return temp
 }
 
-const adaptDataList = (dataList) => {
-  const convertedList = conversion({ list: dataList })
-  return convertedList.map((item, index) => {
-    const originalItem = dataList[index]
-    return {
-      ...item,
-      text: originalItem?.title || item.prompt || '生成图片',
-      name: originalItem?.title || item.prompt || '生成图片',
-      type: 'image',
-      title: originalItem?.title || '生成图片'
-    }
-  })
-}
-
 const fetchHistory = async (isLoadMore = false) => {
   if (isLoading.value || (!isLoadMore && !hasMoreData.value)) return
   
@@ -187,12 +179,12 @@ const fetchHistory = async (isLoadMore = false) => {
         refreshing.value = false
         isInitializing.value = false
         useDisplay.Sender_variant = 'updown'
-        router.push({ name: 'generate' })
+        router.push({ name: 'generate', query: { type: props.type } })
       }
       return
     }
 
-    const adaptedList = adaptDataList(dataList)
+    const adaptedList = conversion(dataList)
 
     if (isLoadMore) {
       useDisplay.appendHistoryList(adaptedList)
@@ -236,10 +228,11 @@ const fetchHistory = async (isLoadMore = false) => {
   }
 }
 
-const handleScroll = (event) => {
+const handleScroll = (scrollInfo) => {
   if (isInitializing.value) return
   
-  const { distanceToPageTop, distanceToPageBottom, isAtPageTop, isAtPageBottom } = event
+  if (!scrollInfo) return
+  const { isAtPageTop, isAtPageBottom, distanceToPageTop, distanceToPageBottom } = scrollInfo
 
   if (isAtPageTop && !isLoading.value && !isLoadingMoreLocked.value && hasMoreData.value) {
     isLoadingMoreLocked.value = true
@@ -256,17 +249,15 @@ const handleScroll = (event) => {
   }
 }
 
+const handleVisibleChange = (startIndex, endIndex) => {
+}
+
+const handleScrollStart = () => {}
+
+const handleScrollEnd = () => {}
+
 const openCanvas = (data) => {
-  if (typeof data === 'string') {
+  useDisplay.openCanvas(data)
-    canvasImage.value = data
-    canvasReferenceImages.value = []
-    canvasSource.value = ''
-  } else {
-    canvasImage.value = data.mainImage?.url || data.mainImage || ''
-    canvasReferenceImages.value = data.referenceImages || []
-    canvasSource.value = data.source || ''
-  }
-  canvasVisible.value = true
 }
 
 const handleCanvasSend = (data) => {
@@ -284,6 +275,10 @@ const handleExit = () => {
   }
 }
 
+const handleDeleteSuccess = (id) => {
+  useDisplay.deleteHistoryItem(id)
+}
+
 onMounted(() => {
   if (!props.loading) return
   refreshing.value = true

src/views/home/index.vue

@@ -1,43 +1,35 @@
 <script setup>
+import { computed, ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import display from './display/index.vue'
-import Canvas from '@/components/canvas/index.vue'
+import { useDisplayStore } from '@/stores'
 
 const route = useRoute()
+const useDisplay = useDisplayStore()
+const dialogBoxRef = ref(null)
 
 const shouldShowDisplay = computed(() => route.path === '/home')
 const loading = computed(() => route.query.loading ? false : (route.path === '/home'))
 const Generate = computed(() => route.query.Generate || false)
-const type = computed(() => route.query.type || 'painting')
+const type = computed(() => route.query.type || 'Painting')
 console.log(type.value)
 
-const canvasVisible = ref(false)
+watch(dialogBoxRef, (newRef) => {
-const canvasImage = ref('')
+  if (newRef) {
-const canvasReferenceImages = ref([])
+    useDisplay.setDialogBoxRef(newRef)
-const canvasSource = ref('')
+  }
+}, { immediate: true })
 
-const handleOpenCanvas = (data) => {
+onMounted(() => {
-  canvasImage.value = data.mainImage?.url || data.mainImage || ''
+  if (dialogBoxRef.value) {
-  canvasReferenceImages.value = data.referenceImages || []
+    useDisplay.setDialogBoxRef(dialogBoxRef.value)
-  canvasSource.value = data.source || 'uploader'
+  }
-  canvasVisible.value = true
+})
-}
-
-const handleCanvasSend = (data) => {
-  console.log('Canvas send:', data)
-}
 </script>
 
 <template>
   <div class="app-container">
-    <Canvas 
+    <dialogBox ref="dialogBoxRef" :is-generate="shouldShowDisplay" :type="type" :generate="Generate" :loading="loading" />
-      v-model:visible="canvasVisible" 
-      :image="canvasImage" 
-      :reference-images="canvasReferenceImages"
-      :source="canvasSource"
-      @send="handleCanvasSend" 
-    />
-    <dialogBox :is-generate="shouldShowDisplay" :type="type" :generate="Generate" :loading="loading" @open-canvas="handleOpenCanvas" />
 
     <display :if="shouldShowDisplay" :type="type" :loading="loading" />
   </div>

test/FlashHead.json

@@ -1,10 +0,0 @@
-{
-  "nodeInfoList": {
-    "value_1":{ "nodeId":"20", "fieldName":"value", "fieldValue":"512" },
-    "value_2":{ "nodeId":"21", "fieldName":"value", "fieldValue":"512" },
-    "model_type":{ "nodeId":"18", "fieldName":"model_type", "fieldValue":"pro" },
-    "audio":{ "nodeId":"16", "fieldName":"audio", "fieldValue":"dce37fba29e596ddcd927c4660b4fb47bd3ecdbef4ad242fed72bd860e032b1f.flac" },
-    "image":{ "nodeId":"17", "fieldName":"image", "fieldValue":"d3ee810ce387739e7a99cb3ba87a104e34b0a955149b8525a600867edbab1138.png" }
-  },
-  "workflowId": "2036266399357739009"
-}

test/LTX2.3-T2V.json

@@ -1,11 +0,0 @@
-{
-  "nodeInfoList": {
-    "text":{ "nodeId":"40", "fieldName":"text", "fieldValue":"深夜，一个美丽的中年中国女人在一边弹吉他一边歌唱，环绕镜头，半身特写，逆光，月光，海风吹拂。场景是海边。" },
-    "audio":{ "nodeId":"39", "fieldName":"audio", "fieldValue":"62e5c0b15854bcac34e9aa0bf9f449767bda9f66047a60abeddbcd47c712ee8d.mp3" },
-    "start_index":{ "nodeId":"58", "fieldName":"start_index", "fieldValue":0 },
-    "duration":{ "nodeId":"58", "fieldName":"duration", "fieldValue":25 },
-    "value_1":{ "nodeId":"55", "fieldName":"value", "fieldValue":1280 },
-    "value_2":{ "nodeId":"56", "fieldName":"value", "fieldValue":720 }
-  },
-  "workflowId": "2036343285949665282"
-}

test/Vidu Q3-I2V.json

@@ -1,10 +0,0 @@
-{
-  "nodeInfoList": {
-    "image":{ "nodeId":"2", "fieldName":"image", "fieldValue":"67bbf03a4ce453557b8c9acf85bd83d3519d3374ef35c54da1084d03f9ac111f.png" },
-    "prompt":{ "nodeId":"3", "fieldName":"prompt", "fieldValue":"一个小女孩在树下吃苹果" },
-    "resolution":{ "nodeId":"3", "fieldName":"resolution", "fieldValue":"540p" },
-    "duration":{ "nodeId":"3", "fieldName":"duration", "fieldValue":5 },
-    "audio":{ "nodeId":"3", "fieldName":"audio", "fieldValue":true }
-  },
-  "workflowId": "2036354451904139265"
-}

test/Vidu Q3-T2V.json

@@ -1,11 +0,0 @@
-{
-  "nodeInfoList": {
-    "style":{ "nodeId":"2", "fieldName":"style", "fieldValue":"general" },
-    "prompt":{ "nodeId":"2", "fieldName":"prompt", "fieldValue":"一个小女孩在树下吃苹果" },
-    "resolution":{ "nodeId":"2", "fieldName":"resolution", "fieldValue":"540p" },
-    "aspect_ratio":{ "nodeId":"2", "fieldName":"aspect_ratio", "fieldValue":"4:3" },
-    "duration":{ "nodeId":"2", "fieldName":"duration", "fieldValue":5 },
-    "audio":{ "nodeId":"2", "fieldName":"audio", "fieldValue":true }
-  },
-  "workflowId": "2036349280088231938"
-}