【需求 17679】 perf: 富文本默认字体大小调整,富文本支持图片预览

src/components/common/ArticleContent/index.vue

@@ -100,7 +100,7 @@
         </div>
       </div>
 
-      <div v-else v-html="articleDetail.content" />
+      <div v-else v-html="articleDetail.content" class="html-content" v-image-preview="1111" />
 
       <!-- 标签 -->
       <div class="flex flex-wrap gap-2 mt-6">
@@ -113,6 +113,15 @@
         </span>
       </div>
     </div>
+    <!-- 富文本内容的 图片预览 -->
+    <el-image-viewer
+      v-if="showPreview"
+      :url-list="srcList"
+      show-progress
+      :teleported="true"
+      :initial-index="currentPreviewIndex"
+      @close="showPreview = false"
+    />
   </div>
 </template>
 
@@ -124,6 +133,7 @@ import ActionMore from '@/components/common/ActionMore/index.vue'
 import { jumpToUserHomePage } from '@/utils'
 import { useUserStore } from '@/stores/user'
 import { storeToRefs } from 'pinia'
+import type { Directive } from 'vue'
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const router = useRouter()
@@ -148,4 +158,31 @@ const isHtml = computed(() => {
     articleDetail.type === ArticleTypeEnum.INTERVIEW
   )
 })
+
+const showPreview = ref(false)
+const currentPreviewIndex = ref(0)
+const srcList = ref<string[]>([])
+
+// 图片预览的指令
+const vImagePreview: Directive = {
+  mounted(el: HTMLElement) {
+    const imgs = el.querySelectorAll('img')
+    imgs.forEach((item, index) => {
+      item.style.cursor = 'pointer'
+      if (item.src) {
+        srcList.value.push(item.src)
+        item.addEventListener('click', () => {
+          currentPreviewIndex.value = index
+          showPreview.value = true
+        })
+      }
+    })
+  },
+}
 </script>
+
+<style scoped>
+.html-content {
+  font-size: 18px;
+}
+</style>

src/components/common/WangEditor/index.vue

@@ -56,3 +56,9 @@ const handleCreated = (editor) => {
   editorRef.value = editor // 记录 editor 实例，重要！
 }
 </script>
+<style scoped>
+/* 使用 :deep() 来穿透 scoped 样式的限制, 直接为编辑器内容区域设置样式。这里的 p 标签是内容的最小单位，为其设置样式最精确。 */
+:deep(.w-e-text-container p) {
+  font-size: 18px !important;
+}
+</style>