whm优化的set文件

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

@@ -4,7 +4,15 @@
       <!-- 标题 -->
       <div class="title">
         <div class="style">
-          <span class="name">{{ props.item.text }}</span>
+          <div class="name" ref="nameRef">{{ props.item.text }}</div>
+          <div class="generate-data" ref="generateDataRef">
+            <div class="detailed-data first-detailed-data">{{ props.item.model }}</div>
+            <!-- <div class="detailed-data">多少秒</div> -->
+            <div class="detailed-data">{{ props.item.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">
           <span class="time">源自 {{ props.item.parentTime }}</span>
@@ -97,31 +105,27 @@ const useDisplay = useDisplayStore()
 const useParams = useParamStore()
 const useUser = useUserStore()
 
+const generateStatusText = computed(() => {
+  if (props.item.status === 'generate') {
+    return '正在生成中...'
+  }
+  return ''
+})
+
 const AIvideo = (file, index) => {
   emit('open-canvas', file)
 }
 
 const reEdit = (url, number) => {
   console.log(number)
-  // const index = String(number + 1)
-  // useDisplay.DialogModification = true
-  // useDisplay.AIvideo = false
-  // useParams.dialogModificationImage = { title: '对话修改', url, time: props.item.time, parentIndex: index, parentTaskId: props.item.id }
 }
 
 const againGenerate = (url, number) => {
   console.log(number)
-  // const index = String(number + 1)
-  // useDisplay.AIvideo = true
-  // useDisplay.DialogModification = false
-  // useParams.AIvideoImage = { title: '对话修改', url, time: props.item.time, parentIndex: index, parentTaskId: props.item.id }
 }
 
 const deleteImage = (url, number) => {
   console.log(number)
-  // const index = String(number + 1)
-  // useDisplay.deleteImage = true
-  // useParams.deleteImage = { title: '删除图片', url, time: props.item.time, parentIndex: index, parentTaskId: props.item.id }
 }
 
 const bottomBtnGroup = [
@@ -143,15 +147,7 @@ const bottomBtnGroup = [
 ]
 
 const addCollection = (url) => {
-  setCollectImg({ userId: useUser.userInfo.id, url, clothesId: 0 }).then((res) => {
-    if (res.code === '0' && res.success === true) {
-      // eslint-disable-next-line no-undef
-      ElMessage.success('添加收藏成功')
-    } else {
-      // eslint-disable-next-line no-undef
-      ElMessage.error(res.msg || '添加收藏失败')
-    }
-  })
+  console.log('添加收藏:', url)
 }
 </script>
 
@@ -170,25 +166,55 @@ const addCollection = (url) => {
 }
 
 .title{
-  height: 25px;
+  // height: 25px;
   width: 100%;
   display: flex;
   align-items: center;
   gap: 20px;
 
   .style{
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    width: 100%;
+    display: inline;
   }
+
   .name{
     color: #333;
     font-family: "Microsoft YaHei";
     font-size: 15px;
     font-style: normal;
     font-weight: 700;
-    line-height: normal;
+    line-height: 1.5;
+    word-break: break-all;
+    display: inline;
+    margin-right: 20px;
   }
+
+  .generate-data{
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .detailed-data{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    font-family: "Microsoft YaHei";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 0 10px;
+    border-left: 1px solid #999;
+    white-space: nowrap;
+    height: 12px;
+  }
+
+  .first-detailed-data{
+    border-left: none;
+    padding-left: 0;
+  }
+
   .time{
     color: #333;
     font-family: "Microsoft YaHei";
@@ -197,13 +223,16 @@ const addCollection = (url) => {
     font-weight: 400;
     line-height: normal;
   }
+
   .dividing-line{
     height: 100%;
     border: 1px solid #ccc;
   }
+
   .delete-btn{
     cursor: pointer;
   }
+
   .delete-btn:hover{
     color: #ff4949;
   }