File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 829829 class =" flex flex-col gap-4 items-start justify-start relative min-w-[620px] w-[65%] overflow-hidden"
830830 >
831831 <div class =" w-full" >
832- <div v-if =" currentVersion?.cover_urls && currentVersion?.cover_urls.length > 0" class =" space-y-4" >
832+ <div
833+ v-if =" currentVersion?.cover_urls && currentVersion?.cover_urls.length > 0"
834+ class =" space-y-4"
835+ >
833836 <div v-for =" (cover, index) in currentVersion?.cover_urls" :key =" index" class =" w-full" >
834837 <!-- 视频显示 -->
835838 <video
Original file line number Diff line number Diff line change 173173 class =" absolute inset-0 bg-gradient-to-br from-[#2a2a2a] to-[#1a1a1a]"
174174 :class =" { 'opacity-0': props.imageLoaded }"
175175 ></div >
176-
176+
177177 <!-- 视频显示(悬停时) -->
178178 <video
179179 v-if =" isVideo && isHovering && currentMediaSrc"
190190 @loadeddata =" handleImageLoad"
191191 @error =" handleImageError"
192192 />
193-
193+
194194 <img
195195 v-else-if =" currentMediaSrc"
196196 :src =" currentMediaSrc"
197197 :alt =" model.versions?.[0]?.version || model.name"
198198 :crossorigin ="
199- typeof currentMediaSrc === 'string' && currentMediaSrc.startsWith('blob:') ? 'anonymous' : undefined
199+ typeof currentMediaSrc === 'string' && currentMediaSrc.startsWith('blob:')
200+ ? 'anonymous'
201+ : undefined
200202 "
201203 class =" absolute inset-0 w-full h-full object-cover transition-all duration-300"
202204 :class =" {
206208 @load =" handleImageLoad"
207209 @error =" handleImageError"
208210 />
209-
211+
210212 <div v-if =" !props.imageLoaded" class =" absolute inset-0 flex items-center justify-center" >
211213 <vDefaultPic />
212214 </div >
Original file line number Diff line number Diff line change 4646 const isLoading = ref (false )
4747 const activeTab = ref <number >()
4848 const showAllTags = ref (false )
49-
49+
5050 // 添加视频检测函数
5151 const isVideoUrl = (url : string ) => {
5252 if (! url ) return false
697697 class =" flex flex-col gap-4 items-start justify-start relative min-w-[620px] w-[65%] overflow-hidden"
698698 >
699699 <div class =" w-full" >
700- <div v-if =" currentVersion?.cover_urls && currentVersion?.cover_urls.length > 0" class =" space-y-4" >
700+ <div
701+ v-if =" currentVersion?.cover_urls && currentVersion?.cover_urls.length > 0"
702+ class =" space-y-4"
703+ >
701704 <div v-for =" (cover, index) in currentVersion?.cover_urls" :key =" index" class =" w-full" >
702705 <!-- 视频显示 -->
703706 <video
Original file line number Diff line number Diff line change 163163 class =" absolute inset-0 bg-gradient-to-br from-[#2a2a2a] to-[#1a1a1a]"
164164 :class =" { 'opacity-0': props.imageLoaded }"
165165 ></div >
166-
166+
167167 <!-- 视频显示(悬停时) -->
168168 <video
169169 v-if =" isVideo && isHovering && currentMediaSrc"
180180 @loadeddata =" handleImageLoad"
181181 @error =" handleImageError"
182182 />
183-
183+
184184 <!-- 图片显示(包括视频缩略图) -->
185185 <img
186186 v-else-if =" currentMediaSrc"
187187 :src =" currentMediaSrc"
188188 :alt =" model.versions?.[0]?.version || model.name"
189189 :crossorigin ="
190- typeof currentMediaSrc === 'string' && currentMediaSrc.startsWith('blob:') ? 'anonymous' : undefined
190+ typeof currentMediaSrc === 'string' && currentMediaSrc.startsWith('blob:')
191+ ? 'anonymous'
192+ : undefined
191193 "
192194 class =" absolute inset-0 w-full h-full object-cover transition-all duration-300"
193195 :class =" {
197199 @load =" handleImageLoad"
198200 @error =" handleImageError"
199201 />
200-
202+
201203 <div v-if =" !props.imageLoaded" class =" absolute inset-0 flex items-center justify-center" >
202204 <vDefaultPic />
203205 </div >
Original file line number Diff line number Diff line change 4646 if (files ) {
4747 const file = files [0 ]
4848 currentFile .value = file
49-
49+
5050 // 创建预览URL
5151 mediaSrc .value = URL .createObjectURL (file )
5252 emit (' update:modelValue' , mediaSrc .value )
53-
53+
5454 try {
5555 let processedFile = file
56-
56+
5757 // 如果是图片且不是gif,才进行webp压缩
5858 if (file .type .startsWith (' image/' ) && file .type !== ' image/gif' ) {
5959 const { file : webpFile } = await formatToWebp (file )
6060 processedFile = webpFile
6161 }
62-
62+
6363 // 上传到OSS
6464 const { url } = await imageToOss (processedFile )
6565 mediaSrc .value = url
7272 }
7373 }
7474 }
75-
75+
7676 const clearVal = () => {
7777 mediaSrc .value = ' '
7878 currentFile .value = null
7979 if (fileInput .value ) {
8080 fileInput .value .value = ' '
8181 }
8282 }
83-
83+
8484 onMounted (() => {
8585 let previewPrc = props .previewPrc as string
8686 if (previewPrc .includes (' .mp4' )) {
108108 @change =" handleFileChange"
109109 accept =" image/*,video/*"
110110 />
111-
111+
112112 <!-- 视频预览 -->
113113 <video
114114 v-if =" isVideo && mediaSrc"
117117 muted
118118 controls
119119 />
120-
120+
121121 <!-- 图片预览 -->
122122 <vImage
123123 v-else-if =" isImage && mediaSrc"
124124 :src =" mediaSrc"
125125 class =" block object-cover w-full h-full rounded-lg absolute left-0 top-0 z-10"
126126 />
127-
127+
128128 <!-- 占位符 -->
129129 <div v-if =" !mediaSrc" >
130130 <div
134134 class =" w-1 h-[64%] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-slate-400 rounded-md"
135135 ></div >
136136 </div >
137-
137+
138138 <Trash2
139139 class =" absolute right-2 top-2 z-30 cursor-pointer text-white bg-black/50 rounded p-1"
140140 v-if =" mediaSrc"
You can’t perform that action at this time.
0 commit comments