【需求 25171】feat: 支持问吧富文本展示与图片预览

src/views/homePage/askTab/index.vue

@@ -45,26 +45,30 @@
             </h2>
 
             <div class="mb-3">
-              <p
+              <!-- 虽然带了html-content的class 但是还是重置了字体样式 为了让列表页的ui看起来好一点 -->
+              <!-- 评论摘要只展示内容，不启用图片预览。 -->
+              <div
+                v-if="item.cultureCommentListVo?.replyName || item.cultureCommentListVo?.hiddenName"
                 :ref="(e) => (contentRefList[index] = e as HTMLElement)"
-                class="text-gray-600 text-sm sm:text-base leading-relaxed transition-all duration-300"
+                class="html-content transition-all duration-300 text-gray-600 text-sm sm:text-base leading-relaxed"
                 :class="{ 'line-clamp-3': !item.isExpand }"
                 @click="openNewPage(`/questionDetail/${item.id}`)"
               >
-                <template
-                  v-if="
-                    item.cultureCommentListVo?.replyName || item.cultureCommentListVo?.hiddenName
-                  "
-                >
                 {{
                   item.cultureCommentListVo?.replyName || item.cultureCommentListVo?.hiddenName
                 }}：
-                  <span v-html="parseEmoji(item.cultureCommentListVo?.content)"></span>
-                </template>
-                <template v-else>
-                  <span v-html="parseEmoji(item.content)"></span>
-                </template>
-              </p>
+                <span v-html="parseEmoji(item.cultureCommentListVo?.content || '')"></span>
+              </div>
+              <!-- 正文的样式、HTML 内容和预览指令统一放在同一个 DOM 上。 -->
+              <div
+                v-else
+                :ref="(e) => (contentRefList[index] = e as HTMLElement)"
+                class="html-content transition-all duration-300 text-gray-600 text-sm sm:text-base leading-relaxed"
+                :class="{ 'line-clamp-3': !item.isExpand }"
+                v-html="parseEmoji(item.content)"
+                v-image-preview
+                @click="openNewPage(`/questionDetail/${item.id}`)"
+              ></div>
               <div class="flex justify-end" v-if="isOverThreeLine(index)">
                 <el-button @click.stop="handleExpand(item)" type="primary" text size="small">
                   {{ item.isExpand ? '收起' : '阅读全文' }}
@@ -201,13 +205,21 @@
       </template>
     </div>
     <CommentDialog ref="commentDialogRef" @commentSuccess="search" />
+    <el-image-viewer
+      v-if="showPreview"
+      :url-list="srcList"
+      show-progress
+      :teleported="true"
+      :initial-index="currentPreviewIndex"
+      @close="showPreview = false"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import Tabs from '@/components/common/Tabs'
 import Comment from '@/components/common/Comment/index.vue'
-import { useScrollTop, usePageSearch } from '@/hooks'
+import { useImagePreview, usePageSearch, useScrollTop } from '@/hooks'
 import { TABS_REF_KEY } from '@/constants'
 import PublishBox from '@/components/common/PublishBox/index.vue'
 import { ArticleTypeEnum } from '@/constants'
@@ -228,6 +240,7 @@ const { shouldShowAskTabTour } = storeToRefs(tourStore)
 const router = useRouter()
 const publishBoxRef = useTemplateRef('publishBoxRef')
 const commentDialogRef = useTemplateRef<typeof CommentDialog>('commentDialogRef')
+const { showPreview, currentPreviewIndex, srcList, vImagePreview } = useImagePreview()
 
 const activeTab = ref('最新')
 const tabs = [

src/views/questionDetail/index.vue

@@ -152,10 +152,15 @@
             </h1>
 
             <!-- 描述：次要信息，深灰 -->
-            <div class="text-gray-600 text-base leading-relaxed transition-all duration-300">
-              <div :class="{ 'line-clamp-3': !isExpand }" ref="questionContentRef">
-                {{ questionDetail.content }}
-              </div>
+            <div class="transition-all duration-300">
+              <div
+                :class="{ 'line-clamp-3': !isExpand }"
+                ref="questionContentRef"
+                class="html-content"
+                v-html="parseEmoji(questionDetail.content)"
+                v-image-preview
+                v-parse-comment
+              ></div>
               <button
                 v-if="isOverThreeLine"
                 class="text-blue-500 text-sm font-medium hover:text-blue-600 mt-1 flex items-center gap-0.5 cursor-pointer"
@@ -446,6 +451,14 @@
     </div>
     <CommentDialog ref="commentDialogRef" @commentSuccess="refresh" />
     <SendMessageDialog ref="sendMessageDialogRef" />
+    <el-image-viewer
+      v-if="showPreview"
+      :url-list="srcList"
+      show-progress
+      :teleported="true"
+      :initial-index="currentPreviewIndex"
+      @close="showPreview = false"
+    />
   </div>
 </template>
 <script setup lang="ts">
@@ -467,8 +480,7 @@ import BackButton from '@/components/common/BackButton/index.vue'
 import dayjs from 'dayjs'
 import { useUserStore } from '@/stores/user'
 import { storeToRefs } from 'pinia'
-import { useNavigation, useScrollTop } from '@/hooks'
-import { useMessageBox } from '@/hooks'
+import { useImagePreview, useMessageBox, useNavigation, useScrollTop } from '@/hooks'
 import { parseEmoji } from '@/utils/emoji'
 import { isWxShareCancel, wxShare } from '@/utils/wxUtil'
 import { ArticleTypeEnum, BooleanFlag } from '@/constants'
@@ -490,6 +502,7 @@ const commentDialogRef = useTemplateRef<typeof CommentDialog>('commentDialogRef'
 const sendMessageDialogRef = useTemplateRef<InstanceType<typeof SendMessageDialog> | null>(
   'sendMessageDialogRef',
 )
+const { showPreview, currentPreviewIndex, srcList, vImagePreview } = useImagePreview()
 
 // 回滚到子评论框
 const { handleBackTop: handleBackTopChildren } = useScrollTop(answerRefList)