feat: 优化图片尺寸用于移动端

web/components.d.ts

@@ -17,7 +17,6 @@ declare module 'vue' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']

web/src/common/Editor/RichEditor.vue

@@ -1,20 +1,38 @@
 <template>
   <div class="editor-wrapper border">
-    <Toolbar :class="['toolbar', props.staticToolBar ? 'static-toolbar' : 'dynamic-toolbar']" ref="toolbar"
+    <Toolbar
-      v-show="showToolbar" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+      :class="['toolbar', props.staticToolBar ? 'static-toolbar' : 'dynamic-toolbar']"
-    <Editor class="editor" ref="editor" :modelValue="curValue" :defaultConfig="editorConfig" @onCreated="onCreated"
+      ref="toolbar"
-      @onChange="onChange" @onBlur="onBlur" @onFocus="onFocus" :mode="mode" />
+      v-show="showToolbar"
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      class="editor"
+      ref="editor"
+      :modelValue="curValue"
+      :defaultConfig="editorConfig"
+      @onCreated="onCreated"
+      @onChange="onChange"
+      @onBlur="onBlur"
+      @onFocus="onFocus"
+      :mode="mode"
+    />
   </div>
 </template>
 
 <script setup>
-import '@wangeditor/editor/dist/css/style.css'
-import './styles/reset-wangeditor.scss'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { ref, shallowRef, onBeforeMount, watch, computed } from 'vue'
 import { useStore } from 'vuex'
 import { get as _get } from 'lodash-es'
 
+import '@wangeditor/editor/dist/css/style.css'
+import './styles/reset-wangeditor.scss'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+import { replacePxWithRem } from './utils'
+
 const emit = defineEmits(['input', 'onFocus', 'change', 'blur', 'created'])
 const model = defineModel()
 const props = defineProps({
@@ -34,7 +52,7 @@ const toolbarConfig = computed(() => {
       'color', // 字体色
       'bgColor', // 背景色
       'bold',
-      'insertLink', // 链接
+      'insertLink' // 链接
     ]
   }
   if (props.needUploadImage) {
@@ -51,13 +69,14 @@ const editorConfig = {
 const store = useStore()
 const token = _get(store, 'state.user.userInfo.token')
 
+// 图片
 editorConfig.MENU_CONF['uploadImage'] = {
   allowedFileTypes: ['image/jpeg', 'image/png'],
   server: '/api/file/upload',
   fieldName: 'file',
   meta: {
     //! 此处的channel需要跟上传接口内配置的channel一致
-    channel: 'upload' 
+    channel: 'upload'
   },
   headers: {
     Authorization: `Bearer ${token}`
@@ -65,7 +84,7 @@ editorConfig.MENU_CONF['uploadImage'] = {
   customInsert(res, insertFn) {
     const url = res.data.url
     insertFn(url, '', '')
-  },
+  }
 }
 
 const setHtml = (newHtml) => {
@@ -82,7 +101,8 @@ const onCreated = (editor) => {
   emit('created', editor)
 }
 const onChange = (editor) => {
-  const editorHtml = editor.getHtml()
+  const editorHtml = replacePxWithRem(editor.getHtml())
+
   curValue.value = editorHtml // 记录当前 html 内容
   emit('input', editorHtml) // 用于自定义 v-model
 }

web/src/common/Editor/utils.js

@@ -0,0 +1,31 @@
+// px 转换为 rem
+const pxToRem = (px) => {
+  return `${(parseFloat(px) / 50).toFixed(2)}rem`
+}
+
+// 图片style的宽高改成rem
+export const replacePxWithRem = (html) => {
+  const imgRegex = /<img[^>]*style=["'][^"']*\b(?:width|height):\s*\d+(\.\d+)?px[^"']*["'][^>]*>/gi
+  const styleRegex = /style="([^"]*)"/g
+  if (!imgRegex.test(html)) {
+    console.log('无需修改')
+    return html
+  }
+
+  const res = html.replaceAll(imgRegex, (imgHtml) => {
+    return imgHtml.replace(styleRegex, (match, content) => {
+      let styleContent = content
+      const pxRegex = /(width|height):\s*(\d+(\.\d+)?)px/g
+
+      styleContent = styleContent.replace(pxRegex, (pxMatch, prop, value) => {
+        return `${prop}: ${pxToRem(value)}`
+      })
+
+      return `style="${styleContent}"`
+    })
+  })
+
+  console.log('生成的结果', res)
+
+  return res
+}

web/src/common/xss.js

@@ -31,7 +31,9 @@ export const cleanRichTextWithMediaTag = (text) => {
   if (!text) {
     return text === 0 ? 0 : ''
   }
-  const html = transformHtmlTag(text).replace(/<img([\w\W]+?)\/>/g,'[图片]').replace(/<video.*\/video>/g,'[视频]')
+  const html = transformHtmlTag(text)
+    .replace(/<img([\w\W]+?)\/>/g, '[图片]')
+    .replace(/<video.*\/video>/g, '[视频]')
   const content = html.replace(/<[^<>]+>/g, '').replace(/&nbsp;/g, '')
 
   return content

web/src/management/components/LeftMenu.vue

@@ -6,9 +6,12 @@
         <div
           :class="[
             'tab-btn',
-            (['QuestionEditIndex', 'QuestionEditSetting', 'QuestionSkinSetting'].includes(
+            ([
-              route.name
+              'QuestionEditIndex',
-            ) &&
+              'QuestionEditSetting',
+              'QuestionSkinSetting',
+              'QuestionEditResultConfig'
+            ].includes(route.name) &&
               tab.to.name === 'QuestionEditIndex') ||
             isActive
               ? 'router-link-active'

web/src/management/pages/analysis/components/DataTable.vue

@@ -16,11 +16,11 @@
         :label="item.title"
         minWidth="200"
       >
-
         <template #header="scope">
           <div class="table-row-cell">
             <span
               class="table-row-head"
+              @click="onPreviewImage"
               @mouseover="onPopoverRefOver(scope, 'head')"
               :ref="(el) => (popoverRefMap[scope.column.id] = el)"
               v-html="item.title"
@@ -46,21 +46,19 @@
       ref="popover"
       popper-style="text-align: center;font-size: 13px;"
       :virtual-ref="popoverVirtualRef"
-      placement="top"
+      placement="bottom"
-      width="400"
       trigger="hover"
       virtual-triggering
     >
       <div v-html="popoverContent"></div>
     </el-popover>
 
-    <ImagePreview :url="previewImageUrl" v-model:visible="showPreviewImage"/>
+    <ImagePreview :url="previewImageUrl" v-model:visible="showPreviewImage" />
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { cleanRichText } from '@/common/xss'
 import ImagePreview from './ImagePreview.vue'
 
 const props = defineProps({
@@ -106,7 +104,6 @@ const onPreviewImage = (e) => {
     previewImageUrl.value = e.target.src
     showPreviewImage.value = true
   }
-  console.log(e.target.src)
 }
 </script>
 
@@ -140,12 +137,14 @@ const onPreviewImage = (e) => {
     overflow: hidden; /* 超出部分隐藏 */
     text-overflow: ellipsis; /* 显示省略号 */
     :deep(img) {
-      height: 23px;
+      height: 23px !important;
-      width: auto;
+      width: auto !important;
+      object-fit: cover;
+      margin-left: 5px;
     }
     :deep(p) {
-        display: flex;
+      display: flex;
-        align-items: center;
+      align-items: center;
     }
   }
 }
@@ -153,8 +152,3 @@ const onPreviewImage = (e) => {
   font-size: 13px;
 }
 </style>
-<style>
-.el-popover p image {
-  max-width: 100%;
-}
-</style>

web/src/management/pages/analysis/components/ImagePreview.vue

@@ -1,72 +1,70 @@
 <template>
-    <Teleport to="body">
+  <Teleport to="body">
-        <Transition>
+    <Transition>
-            <div class="image-preview" v-show="visible">
+      <div class="image-preview" v-show="visible">
-                <div class="close-btn" @click="visible = false"> <i-ep-close /> </div>
+        <div class="close-btn" @click="visible = false"><i-ep-close /></div>
-                <div class="image-con">
+        <div class="image-con">
-                    <img :src="props.url" class="image-item" />
+          <img :src="props.url" class="image-item" />
-                </div>
+        </div>
-            </div>
+      </div>
-        </Transition>
+    </Transition>
-    </Teleport>
+  </Teleport>
 </template>
 <script setup lang="ts">
 const props = defineProps<{
-    url: string
+  url: string
 }>()
 
 const visible = defineModel('visible')
-
 </script>
 <style lang="scss" scoped>
 .v-enter-active,
 .v-leave-active {
-    transition: opacity 0.2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
 
 .v-enter-from,
 .v-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 
 .image-preview {
-    position: fixed;
+  position: fixed;
-    left: 0;
+  left: 0;
-    top: 0;
+  top: 0;
-    right: 0;
+  right: 0;
-    bottom: 0;
+  bottom: 0;
-    background-color: rgba($color: #000000, $alpha: .4);
+  background-color: rgba($color: #000000, $alpha: 0.4);
-    z-index: 2024;
+  z-index: 2024;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image-con {
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .image-con {
+    .image-item {
-        width: 100%;
+      max-width: 80%;
-        height: 100%;
+      max-height: 70%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .image-item {
-            max-width: 80%;
-            max-height: 70%;
-        }
     }
+  }
 
-
+  .close-btn {
-    .close-btn {
+    position: absolute;
-        position: absolute;
+    right: 20px;
-        right: 20px;
+    top: 20px;
-        top: 20px;
+    width: 30px;
-        width: 30px;
+    height: 30px;
-        height: 30px;
+    display: flex;
-        display: flex;
+    align-items: center;
-        align-items: center;
+    justify-content: center;
-        justify-content: center;
+    cursor: pointer;
-        cursor: pointer;
+    border-radius: 50%;
-        border-radius: 50%;
+    background-color: #d0d0d0;
-        background-color: #d0d0d0;
+  }
-    }
 }
-</style>
+</style>

web/src/management/pages/edit/pages/skin/index.vue

@@ -58,7 +58,7 @@ watch(
     position: absolute;
     top: 10px;
     cursor: pointer;
-    z-index: 9999;
+    z-index: 999;
     :deep(.el-radio-button__original-radio + .el-radio-button__inner) {
       font-size: 12px;
       height: 28px;

web/src/management/styles/common.scss

@@ -1,8 +1,8 @@
 // 富文本标题、选项中的预览弹窗的图片宽度
 .el-popover {
-    p {
+  p {
-      img {
+    img {
-        max-width: 100%;
+      max-width: 100%;
-      }
     }
-  }
+  }
+}