【代码优化 11609】 refactor:模板层只关注图片列表展示和预览交互，不再处理字符串解析细节

src/api/article/types.ts

@@ -377,6 +377,7 @@ export interface CommentItemDto {
   isExpand: boolean
   childNum: number
   imgUrl: string
+  imgUrlList?: string[]
   floorNumber: number
 }
 

src/components/common/Comment/index.vue

@@ -144,7 +144,7 @@
                   <!-- 评论图片列表 -->
                   <div class="flex flex-wrap gap-2">
                     <div
-                      v-for="(img, imgIndex) in item.imgUrl.split(',').filter(Boolean)"
+                      v-for="(img, imgIndex) in item.imgUrlList"
                       :key="imgIndex"
                       class="w-20 h-20 rounded-lg overflow-hidden mb-2 cursor-pointer"
                     >
@@ -152,7 +152,7 @@
                         :src="img"
                         :preview-teleported="true"
                         class="w-full h-full object-cover"
-                        :preview-src-list="item.imgUrl.split(',').filter(Boolean)"
+                        :preview-src-list="item.imgUrlList"
                         :initial-index="imgIndex"
                         fit="cover"
                       />
@@ -228,7 +228,7 @@
                           <!-- 评论图片列表 -->
                           <div class="flex flex-wrap gap-2">
                             <div
-                              v-for="(img, imgIndex) in child.imgUrl.split(',').filter(Boolean)"
+                              v-for="(img, imgIndex) in child.imgUrlList"
                               :key="imgIndex"
                               class="w-20 h-20 rounded-lg overflow-hidden mb-2"
                             >
@@ -236,7 +236,7 @@
                                 :src="img"
                                 :preview-teleported="true"
                                 class="w-full h-full object-cover"
-                                :preview-src-list="child.imgUrl.split(',').filter(Boolean)"
+                                :preview-src-list="child.imgUrlList"
                                 :initial-index="imgIndex"
                                 fit="cover"
                               />
@@ -487,7 +487,11 @@ const {
     return list.map((item) => {
       // 初始化的时候 添加新的字段 是否展示分页子评论 默认是false 当前子评论分页current 以及子评论分页列表 loading效果
 
-      const obj: CommentItemDto = { ...item }
+      const obj: CommentItemDto = {
+        ...item,
+        imgUrlList: getCommentImageList(item.imgUrl),
+        children: item.children?.map(formatCommentImageList) ?? [],
+      }
       // if (obj.showChildrenPage == undefined) {
       obj.showChildrenPage = false
       // }
@@ -514,7 +518,7 @@ const commentSortOptions = [
   { label: '最新发布', value: CommentSortTypeEnum.NEWEST_PUBLISH },
 ]
 
-const handleChangeSort = async (sortType: CommentSortTypeEnum) => {
+const handleChangeSort = (sortType: CommentSortTypeEnum) => {
   searchParams.value.sortType = sortType
   refresh()
 }
@@ -524,6 +528,15 @@ const handleCurrentChange = async (e: number) => {
   handleBackTop()
 }
 
+const getCommentImageList = (imgUrl?: string) => {
+  return imgUrl?.split(',').filter(Boolean) ?? []
+}
+
+const formatCommentImageList = (item: CommentItemDto): CommentItemDto => ({
+  ...item,
+  imgUrlList: getCommentImageList(item.imgUrl),
+})
+
 // 自己发出的评论
 const myComment = ref('')
 const myCommentLoading = ref(false)
@@ -705,7 +718,7 @@ const getCommentChildrenList = async (item: CommentItemDto) => {
     current: item.childrenPageCurrent,
     size: 10,
   })
-  item.childrenPageList = data.list
+  item.childrenPageList = data.list.map(formatCommentImageList)
 }
 
 // 获取当前要渲染的子列表