高亮文本显示增加富文本格式处理，能正确显示表情、换行符等；视频类消息能直接在消息记录中查看并播放；处理文件格式校验，预览文件前先校验

2025-07-04 11:38:57 +08:00 · 2025-07-04 11:38:57 +08:00 · 481719a685
commit 481719a685
parent 6a54757c6a
4 changed files with 175 additions and 37 deletions
--- a/src/components/search/highLightText.vue
+++ b/src/components/search/highLightText.vue
@ -1,70 +1,172 @@
 <template>
  <span>
-    <template v-for="(part, index) in parts" :key="index">
-      <span v-if="part.highlighted" :class="highlightClass">
-        {{ part.text }}
+    <template v-if="isHtml">
+      <span v-html="highlightedHtml" />
+    </template>
+    <template v-else>
+      <span class="text-content">
+        <template v-for="(part, index) in parts" :key="index">
+          <span
+            v-if="part.highlighted"
+            :class="highlightClass"
+            v-html="textReplaceEmoji(part.text)"
+          />
+          <span v-else v-html="textReplaceEmoji(part.text)" />
+        </template>
      </span>
-      <span v-else>{{ part.text }}</span>
    </template>
  </span>
 </template>

 <script setup>
 import { computed } from 'vue'
+import { textReplaceEmoji } from '@/utils/emojis'

 const props = defineProps({
  text: {
    type: String,
-    required: true,
+    required: true
  },
  searchText: {
    type: String,
-    default: '',
+    default: ''
  },
  highlightClass: {
    type: String,
-    default: 'highlight',
-  },
+    default: 'highlight'
+  }
+})
+
+// 检测是否为HTML内容
+const isHtml = computed(() => {
+  return /<[^>]*>/g.test(props.text)
 })

 const escapedSearchText = computed(() =>
-  String(props.searchText).replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),
+  String(props.searchText).replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
 )

 const pattern = computed(() => new RegExp(escapedSearchText.value, 'gi'))

 const parts = computed(() => {
-  if (!props.searchText || !props.text)
-    return [{ text: props.text, highlighted: false }];
+  if (!props.searchText || !props.text) return [{ text: props.text, highlighted: false }]

-  const result = [];
-  let currentIndex = 0;
-  const escapedSearchTextValue = escapedSearchText.value;
-  const searchPattern = new RegExp(`(${escapedSearchTextValue})`, 'gi');
+  const result = []
+  let currentIndex = 0
+  const escapedSearchTextValue = escapedSearchText.value
+  const searchPattern = new RegExp(`(${escapedSearchTextValue})`, 'gi')

  props.text.replace(searchPattern, (match, p1, offset) => {
    // 添加非高亮文本
    if (currentIndex < offset) {
-      result.push({ text: props.text.slice(currentIndex, offset), highlighted: false });
+      result.push({ text: props.text.slice(currentIndex, offset), highlighted: false })
    }
    // 添加高亮文本
-    result.push({ text: p1, highlighted: true });
+    result.push({ text: p1, highlighted: true })
    // 更新当前索引
-    currentIndex = offset + p1.length;
-    return p1; // 这个返回值不影响最终结果，只是replace方法的要求
-  });
+    currentIndex = offset + p1.length
+    return p1 // 这个返回值不影响最终结果，只是replace方法的要求
+  })

  // 添加剩余的非高亮文本（如果有的话）
  if (currentIndex < props.text.length) {
-    result.push({ text: props.text.slice(currentIndex), highlighted: false });
+    result.push({ text: props.text.slice(currentIndex), highlighted: false })
  }

-  return result;
-});
+  return result
+})
+
+// 处理特殊字符的函数
+const processSpecialChars = (text) => {
+  return (
+    text
+      // 处理换行符
+      .replace(/\n/g, '<br>')
+      // 处理制表符
+      .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
+      // 处理连续空格（保留第一个，其余转换为&nbsp;）
+      .replace(/ {2,}/g, (match) => {
+        return '&nbsp;'.repeat(match.length)
+      })
+      // 处理不可见字符（零宽空格等）
+      .replace(/[\u200B-\u200D\uFEFF]/g, '')
+  )
+}
+
+// 处理HTML内容的高亮 - 使用字符串处理方法
+const highlightedHtml = computed(() => {
+  if (!props.searchText || !props.text) {
+    // 先处理特殊字符，再处理表情
+    return textReplaceEmoji(processSpecialChars(props.text))
+  }
+
+  // 对于富文本，使用一个更安全的方法
+  // 将HTML内容按标签分割，只对文本部分进行高亮
+
+  // 分割HTML字符串，保护标签
+  const parts = []
+  let lastIndex = 0
+  const tagRegex = /<[^>]*>/g
+  let tagMatch
+
+  // 重置正则表达式的lastIndex
+  tagRegex.lastIndex = 0
+
+  while ((tagMatch = tagRegex.exec(props.text)) !== null) {
+    // 添加标签前的文本
+    if (tagMatch.index > lastIndex) {
+      const textBeforeTag = props.text.slice(lastIndex, tagMatch.index)
+      if (textBeforeTag) {
+        // 先处理特殊字符，再处理高亮
+        const processedText = processSpecialChars(textBeforeTag)
+        const searchPattern = new RegExp(`(${escapedSearchText.value})`, 'gi')
+        const highlightedText = processedText.replace(
+          searchPattern,
+          `<span class="${props.highlightClass}">$1</span>`
+        )
+        parts.push(highlightedText)
+      }
+    }
+
+    // 添加标签本身（不处理）
+    parts.push(tagMatch[0])
+    lastIndex = tagMatch.index + tagMatch[0].length
+  }
+
+  // 添加最后一个标签后的文本
+  if (lastIndex < props.text.length) {
+    const textAfterLastTag = props.text.slice(lastIndex)
+    if (textAfterLastTag) {
+      // 先处理特殊字符，再处理高亮
+      const processedText = processSpecialChars(textAfterLastTag)
+      const searchPattern = new RegExp(`(${escapedSearchText.value})`, 'gi')
+      const highlightedText = processedText.replace(
+        searchPattern,
+        `<span class="${props.highlightClass}">$1</span>`
+      )
+      parts.push(highlightedText)
+    }
+  }
+
+  let html = parts.join('')
+  // 最后处理表情
+  return textReplaceEmoji(html)
+})
 </script>

 <style scoped>
 .highlight {
  color: #7a58de;
 }
+
+.text-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+  :deep(.emoji) {
+    vertical-align: text-bottom!important;
+    margin: 0 5px !important;
+    width: 22px !important;
+    height: 22px !important;
+  }
+}
 </style>
--- a/src/components/search/searchByCondition.vue
+++ b/src/components/search/searchByCondition.vue
@ -137,7 +137,7 @@
                        @click="toDialogueByMember(item)"
                        :searchResultKey="'search_by_member_condition'"
                        :searchItem="item"
-                        :searchText="state.searchText"
+                        :searchText="props?.searchRecordByConditionText"
                        :searchRecordDetail="true"
                      ></searchItem>
                    </div>
@ -305,6 +305,7 @@ import { parseTime } from '@/utils/datetime'
 import { fileFormatSize, fileSuffix } from '@/utils/strings'
 import { NImage, NInfiniteScroll, NScrollbar, NIcon, NDatePicker } from 'naive-ui'
 import { MessageComponents } from '@/constant/message'
+import { checkFileCanPreview } from '@/utils/helper/form'

 const emits = defineEmits([
  'clearSearchMemberByAlphabet',
@ -693,11 +694,15 @@ const previewPDF = (item) => {
  //     downloadAndOpenFile(item)
  //   })
  // }
-  window.open(
-    `${import.meta.env.VITE_PAGE_URL}/office?url=${item.extra.path}`,
-    '_blank',
-    'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
-  )
+  if(checkFileCanPreview(item?.extra?.path || '')){
+    window.open(
+      `${import.meta.env.VITE_PAGE_URL}/office?url=${item.extra.path}`,
+      '_blank',
+      'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
+    )
+  } else {
+    toDialogueByMember(item)
+  }
 }

 const downloadAndOpenFile = (item) => {
--- a/src/components/search/searchItem.vue
+++ b/src/components/search/searchItem.vue
@ -69,9 +69,9 @@
          class="text-[12px] font-regular"
          :text="resultDetail"
          :searchText="props.searchText"
-          v-if="props.searchItem?.msg_type !== 3 && props.searchItem?.msg_type !== 6"
+          v-if="props.searchItem?.msg_type !== 3 && props.searchItem?.msg_type !== 5 && props.searchItem?.msg_type !== 6"
        />
-        <div class="message-component-wrapper" v-if="props.searchItem?.msg_type === 3" @click.stop>
+        <div class="message-component-wrapper" v-if="props.searchItem?.msg_type === 3 || props.searchItem?.msg_type === 5" @click.stop>
          <component
            :is="MessageComponents[props.searchItem?.msg_type] || 'unknown-message'"
            :extra="resultDetail"
@ -122,6 +122,7 @@ import { ref, watch, computed, onMounted, onUnmounted, reactive, defineProps } f
 import HighlightText from './highLightText.vue'
 import { beautifyTime } from '@/utils/datetime'
 import { ChatMsgTypeMapping, MessageComponents } from '@/constant/message'
+import { checkFileCanPreview } from '@/utils/helper/form'
 const props = defineProps({
  searchItem: Object | Number,
  searchResultKey: {
@ -291,7 +292,7 @@ const resultDetail = computed(() => {
      result_detail =
        props.searchItem?.msg_type === 1
          ? props.searchItem?.extra?.content
-          : props.searchItem?.msg_type === 3 || props.searchItem?.msg_type === 6
+          : props.searchItem?.msg_type === 3 || props.searchItem?.msg_type === 5 || props.searchItem?.msg_type === 6
          ? props.searchItem?.extra
          : ChatMsgTypeMapping[props.searchItem?.msg_type]
      break
@ -310,11 +311,15 @@ const previewPDF = (item) => {
  //     downloadAndOpenFile(item)
  //   })
  // }
-  window.open(
-    `${import.meta.env.VITE_PAGE_URL}/office?url=${item}`,
-    '_blank',
-    'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
-  )
+  if(checkFileCanPreview(item?.extra?.path || '')){
+    window.open(
+      `${import.meta.env.VITE_PAGE_URL}/office?url=${item}`,
+      '_blank',
+      'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
+    )
+  } else {
+    //由于聊天记录本身有跳转到指定位置的逻辑，所以这里不需要再做跳转
+  }
 }
 </script>
 <style lang="scss" scoped>
--- a/src/utils/helper/form.js
+++ b/src/utils/helper/form.js
@ -345,3 +345,29 @@ export const formatNumberWithCommas = (num) => {
  }
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
+// 判断文件是否可以预览
+export const checkFileCanPreview = (path) => {
+  if (!path) {
+    return false
+  }
+  //PDF文件扩展名映射
+  const PDF_EXTENSIONS = ['PDF', 'pdf']
+  // Excel文件扩展名映射
+  const EXCEL_EXTENSIONS = ['XLS', 'XLSX', 'CSV', 'xls', 'xlsx', 'csv']
+  // Word文件扩展名映射
+  const WORD_EXTENSIONS = ['DOC', 'DOCX', 'RTF', 'DOT', 'DOTX', 'doc', 'docx', 'rtf', 'dot', 'dotx']
+  // PPT文件扩展名映射
+  const PPT_EXTENSIONS = ['PPT', 'PPTX', 'PPS', 'PPSX', 'ppt', 'pptx', 'pps', 'ppsx']
+
+  // 获取文件扩展名
+  function getFileExtension(filepath) {
+    const parts = filepath?.split('.')
+    return parts?.length > 1 ? parts?.pop()?.toUpperCase() : ''
+  }
+
+  const extension = getFileExtension(path)
+  return PDF_EXTENSIONS.includes(extension) || 
+         EXCEL_EXTENSIONS.includes(extension) || 
+         WORD_EXTENSIONS.includes(extension) || 
+         PPT_EXTENSIONS.includes(extension)
+}