【优化】：mall 客服表情包存放到本地使用

Author: puhui999

.env.local

@@ -29,9 +29,5 @@ VITE_BASE_PATH=/
 # 商城H5会员端域名
 VITE_MALL_H5_DOMAIN='http://localhost:3000'
 
-# TODO puhui999：这个可以不走 cdn 地址么？
-# 客户端静态资源地址 空=默认使用服务端指定的CDN资源地址前缀 | local=本地  |  http(s)://xxx.xxx=自定义静态资源地址前缀
-VITE_STATIC_URL = https://file.sheepjs.com
-
 # 验证码的开关
 VITE_APP_CAPTCHA_ENABLE=false

src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue

@@ -26,8 +26,9 @@
 
 <script lang="ts" setup>
 defineOptions({ name: 'EmojiSelectPopover' })
-import { Emoji, getEmojiList } from './emoji'
+import { Emoji, useEmoji } from './emoji'
 
+const { getEmojiList } = useEmoji()
 const emojiList = computed(() => getEmojiList())
 
 const emits = defineEmits<{

src/views/mall/promotion/kefu/components/KeFuChatBox.vue

@@ -89,13 +89,14 @@ import { ElScrollbar as ElScrollbarType } from 'element-plus'
 import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import EmojiSelectPopover from './EmojiSelectPopover.vue'
-import { Emoji, replaceEmoji } from './emoji'
+import { Emoji, useEmoji } from './emoji'
 import { KeFuMessageContentTypeEnum } from './constants'
 import { isEmpty } from '@/utils/is'
 import { UserTypeEnum } from '@/utils/constants'
 import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'KeFuMessageBox' })
+const { replaceEmoji } = useEmoji()
 const messageTool = useMessage()
 const message = ref('') // 消息
 const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
@@ -130,6 +131,7 @@ const handleSendMessage = async () => {
   // 1. 校验消息是否为空
   if (isEmpty(unref(message.value))) {
     messageTool.warning('请输入消息后再发送哦！')
+    return
   }
   // 2. 组织发送消息
   const msg = {

src/views/mall/promotion/kefu/components/KeFuConversationBox.vue

@@ -35,11 +35,12 @@
 
 <script lang="ts" setup>
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
-import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
+import { useEmoji } from './emoji'
 import { formatDate, getNowDateTime } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from '@/views/mall/promotion/kefu/components/constants'
 
 defineOptions({ name: 'KeFuConversationBox' })
+const { replaceEmoji } = useEmoji()
 const activeConversationIndex = ref(-1) // 选中的会话
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const getConversationList = async () => {

src/views/mall/promotion/kefu/components/emoji.ts

@@ -1,4 +1,6 @@
-export const emojiList = [
+import { isEmpty } from '@/utils/is'
+
+const emojiList = [
   { name: '[笑掉牙]', file: 'xiaodiaoya.png' },
   { name: '[可爱]', file: 'keai.png' },
   { name: '[冷酷]', file: 'lengku.png' },
@@ -54,53 +56,60 @@ export interface Emoji {
   url: string
 }
 
-export const emojiPage = {}
-emojiList.forEach((item, index) => {
-  if (!emojiPage[Math.floor(index / 30) + 1]) {
-    emojiPage[Math.floor(index / 30) + 1] = []
+export const useEmoji = () => {
+  const emojiPathList = ref<any[]>([])
+  // 加载本地图片
+  const getStaticEmojiPath = async () => {
+    const pathList = import.meta.glob(
+      '@/views/mall/promotion/kefu/components/images/*.{png,jpg,jpeg,svg}'
+    )
+    for (const path in pathList) {
+      const imageModule: any = await pathList[path]()
+      emojiPathList.value.push(imageModule.default)
+    }
   }
-  emojiPage[Math.floor(index / 30) + 1].push(item)
-})
-
-// 后端上传地址
-const staticUrl = import.meta.env.VITE_STATIC_URL
-// 后缀
-const suffix = '/static/img/chat/emoji/'
+  // 初始化
+  onMounted(async () => {
+    if (isEmpty(emojiPathList.value)) {
+      await getStaticEmojiPath()
+    }
+  })
 
-// 处理表情
-export function replaceEmoji(data: string) {
-  let newData = data
-  if (typeof newData !== 'object') {
-    const reg = /\[(.+?)\]/g // [] 中括号
-    const zhEmojiName = newData.match(reg)
-    if (zhEmojiName) {
-      zhEmojiName.forEach((item) => {
-        const emojiFile = selEmojiFile(item)
-        newData = newData.replace(
-          item,
-          `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${
-            staticUrl + suffix + emojiFile
-          }"/>`
-        )
-      })
+  // 处理表情
+  function replaceEmoji(data: string) {
+    let newData = data
+    if (typeof newData !== 'object') {
+      const reg = /\[(.+?)\]/g // [] 中括号
+      const zhEmojiName = newData.match(reg)
+      if (zhEmojiName) {
+        zhEmojiName.forEach((item) => {
+          const emojiFile = selEmojiFile(item)
+          newData = newData.replace(
+            item,
+            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}"/>`
+          )
+        })
+      }
     }
+    return newData
   }
-  return newData
-}
 
-// 获得所有表情
-export function getEmojiList(): Emoji[] {
-  return emojiList.map((item) => ({
-    url: staticUrl + suffix + item.file,
-    name: item.name
-  })) as Emoji[]
-}
+  // 获得所有表情
+  function getEmojiList(): Emoji[] {
+    return emojiList.map((item) => ({
+      url: selEmojiFile(item.name),
+      name: item.name
+    })) as Emoji[]
+  }
 
-function selEmojiFile(name: string) {
-  for (const index in emojiList) {
-    if (emojiList[index].name === name) {
-      return emojiList[index].file
+  function selEmojiFile(name: string) {
+    for (const emoji of emojiList) {
+      if (emoji.name === name) {
+        return emojiPathList.value.find((item: string) => item.indexOf(emoji.file) > -1)
+      }
     }
+    return false
   }
-  return false
+
+  return { replaceEmoji, getEmojiList }
 }