Merge branch '线上优化/兼容url' into 'master'

线上优化/兼容url

See merge request !45

src/components/common/ArticleContent/index.vue

@@ -179,7 +179,7 @@
               :src="articleDetail.articleVideoUrl"
               controls
               class="w-100%! aspect-video bg-black"
-              :poster="`${articleDetail.articleVideoUrl}?x-oss-process=video/snapshot,t_1000,f_jpg`"
+              :poster="getVideoPosterUrl(articleDetail.articleVideoUrl)"
             />
           </div>
           <!-- 文章内容 -->
@@ -214,7 +214,7 @@
                 :src="articleDetail.videoUrl"
                 controls
                 class="w-100%! aspect-video bg-black"
-                :poster="`${articleDetail.videoUrl}?x-oss-process=video/snapshot,t_1000,f_jpg`"
+                :poster="getVideoPosterUrl(articleDetail.videoUrl)"
               />
             </div>
           </div>
@@ -228,7 +228,7 @@
               :src="articleDetail.articleVideoUrl"
               controls
               class="w-100%! aspect-video bg-black"
-              :poster="`${articleDetail.articleVideoUrl}?x-oss-process=video/snapshot,t_1000,f_jpg`"
+              :poster="getVideoPosterUrl(articleDetail.articleVideoUrl)"
             />
           </div>
           <!-- 标签 -->
@@ -294,6 +294,7 @@
 
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { getVideoPosterUrl } from '@/utils'
 import { getRelatedColumnList, type ArticleItemDto, type RelatedColumnItemDto } from '@/api'
 import { articleTypeListOptions, ArticleTypeEnum, VideoPositionEnum } from '@/constants'
 import ActionMore from '@/components/common/ActionMore/index.vue'

src/utils/index.ts

 export * from './app'
 export * from './wxUtil'
 export * from './excel'
+export * from './oss'

src/utils/oss.ts

+/**
+ * 给文件 URL 拼接 OSS 处理参数。
+ * 后端返回的 URL 可能已带 query(如 ?expires=...&sign=...),
+ * 此时必须用 & 连接,否则会出现双 ? 导致资源加载失败。
+ */
+export const withOssProcess = (url: string, process: string) => {
+  if (!url) return url
+  return `${url}${url.includes('?') ? '&' : '?'}x-oss-process=${process}`
+}
+
+/** 图片转 webp */
+export const toWebpUrl = (url: string) => withOssProcess(url, 'image/format,webp')
+
+/** 视频第 1 秒截帧作为封面 */
+export const getVideoPosterUrl = (url: string) => withOssProcess(url, 'video/snapshot,t_1000,f_jpg')

src/views/homePage/homeTab/components/recommendList.vue

@@ -72,7 +72,7 @@
 
             <div v-show="item.faceUrl" class="relative flex-shrink-0 w-30 h-20 xl:w-36 xl:h-24">
               <el-image
-                :src="item.faceUrl + '?x-oss-process=image/format,webp'"
+                :src="toWebpUrl(item.faceUrl)"
                 alt="文章配图"
                 fit="cover"
                 :lazy="true"
@@ -136,6 +136,7 @@ import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
 import { useScrollTop, useNavigation } from '@/hooks'
 import { articleTypeListOptions } from '@/constants'
 import dayjs from 'dayjs'
+import { toWebpUrl } from '@/utils'
 
 const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
   getArticleList,