【代码优化】 refactor: 展示数据优化

src/api/article/types.ts

@@ -157,6 +157,7 @@ export interface ArticleItemDto {
   hasPraised: boolean
   hasCollect: boolean
   imgUrl: string
+  imgUrlList?: string[]
   createUserAvatar: string
   createUserName: string
   showAvatar: string

src/views/questionDetail/index.vue

@@ -168,16 +168,16 @@
               </button>
             </div>
             <div
-              v-if="questionDetail.imgUrl"
+              v-if="questionDetail.imgUrlList?.length"
               class="mt-3 flex gap-2 flex-wrap items-center justify-start"
             >
               <el-image
-                v-for="(item, i) in questionDetail.imgUrl.split(',')"
+                v-for="(item, i) in questionDetail.imgUrlList"
                 :key="item"
                 :src="item"
                 fit="cover"
                 class="rounded-lg w-24 h-24 hover:scale-105 transition-transform cursor-pointer"
-                :preview-src-list="questionDetail.imgUrl.split(',')"
+                :preview-src-list="questionDetail.imgUrlList"
                 :initial-index="i"
                 :preview-teleported="true"
               />
@@ -346,7 +346,7 @@
           <!-- 评论图片列表 -->
           <div class="flex flex-wrap gap-3 mb-3">
             <div
-              v-for="(img, imgIndex) in answer.imgUrl.split(',').filter(Boolean)"
+              v-for="(img, imgIndex) in answer.imgUrlList"
               :key="imgIndex"
               class="w-24 h-24 rounded-lg overflow-hidden mb-2"
             >
@@ -354,7 +354,7 @@
                 :src="img"
                 :preview-teleported="true"
                 class="w-full h-full object-cover"
-                :preview-src-list="answer.imgUrl.split(',').filter(Boolean)"
+                :preview-src-list="answer.imgUrlList"
                 :initial-index="imgIndex"
                 fit="cover"
               />
@@ -503,7 +503,10 @@ const isOverThreeLine = computed(() => {
 })
 const getQuestionDetail = async () => {
   const { data } = await getArticleDetail(questionId)
-  questionDetail.value = data
+  questionDetail.value = {
+    ...data,
+    imgUrlList: getImageUrlList(data.imgUrl),
+  }
 }
 
 const {
@@ -522,11 +525,16 @@ const {
   formatList: (list) =>
     list.map((item) => ({
       ...item,
+      imgUrlList: getImageUrlList(item.imgUrl),
       showComment: false,
       isExpand: false,
     })),
 })
 
+const getImageUrlList = (imgUrl?: string) => {
+  return imgUrl?.split(',').filter(Boolean) ?? []
+}
+
 const answerSortOptions = [
   { label: '最多点赞', value: CommentSortTypeEnum.MOST_LIKE },
   { label: '最多评论', value: CommentSortTypeEnum.MOST_COMMENT },