diff --git a/.env.local b/.env.local
index 82a3f72a..005d2f0d 100644
--- a/.env.local
+++ b/.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
diff --git a/src/api/ai/chat/conversation/index.ts b/src/api/ai/chat/conversation/index.ts
index 08ad26a1..9f5f70f2 100644
--- a/src/api/ai/chat/conversation/index.ts
+++ b/src/api/ai/chat/conversation/index.ts
@@ -43,8 +43,8 @@ export const ChatConversationApi = {
   },
 
   // 删除【我的】所有对话，置顶除外
-  deleteMyAllExceptPinned: async () => {
-    return await request.delete({ url: `/ai/chat/conversation/delete-my-all-except-pinned` })
+  deleteChatConversationMyByUnpinned: async () => {
+    return await request.delete({ url: `/ai/chat/conversation/delete-by-unpinned` })
   },
 
   // 获得【我的】聊天对话列表
diff --git a/src/assets/ai/dall2.jpg b/src/assets/ai/dall2.jpg
index f80a4a4d..c07374dc 100644
Binary files a/src/assets/ai/dall2.jpg and b/src/assets/ai/dall2.jpg differ
diff --git a/src/assets/ai/dall3.jpg b/src/assets/ai/dall3.jpg
index d4c87687..7f45803b 100644
Binary files a/src/assets/ai/dall3.jpg and b/src/assets/ai/dall3.jpg differ
diff --git a/src/assets/ai/qingxi.jpg b/src/assets/ai/qingxi.jpg
index 6e2739df..d76b8156 100644
Binary files a/src/assets/ai/qingxi.jpg and b/src/assets/ai/qingxi.jpg differ
diff --git a/src/assets/ai/ziran.jpg b/src/assets/ai/ziran.jpg
index 3e1b4b1c..62907242 100644
Binary files a/src/assets/ai/ziran.jpg and b/src/assets/ai/ziran.jpg differ
diff --git a/src/utils/download.ts b/src/utils/download.ts
index fe24ee27..ab200149 100644
--- a/src/utils/download.ts
+++ b/src/utils/download.ts
@@ -29,7 +29,7 @@ const download = {
   html: (data: Blob, fileName: string) => {
     download0(data, fileName, 'text/html')
   },
-  // 下载 MarkdownView 方法
+  // 下载 Markdown 方法
   markdown: (data: Blob, fileName: string) => {
     download0(data, fileName, 'text/markdown')
   }
diff --git a/src/views/ai/chat/Conversation.vue b/src/views/ai/chat/Conversation.vue
index 2afeb9ac..5976171b 100644
--- a/src/views/ai/chat/Conversation.vue
+++ b/src/views/ai/chat/Conversation.vue
@@ -1,11 +1,10 @@
 <!--  AI 对话  -->
 <template>
-  <el-aside width="260px" class="conversation-container" style="height: 100%;">
-
+  <el-aside width="260px" class="conversation-container" style="height: 100%">
     <!-- 左顶部：对话 -->
-    <div style="height: 100%;">
+    <div style="height: 100%">
       <el-button class="w-1/1 btn-new-conversation" type="primary" @click="createConversation">
-        <Icon icon="ep:plus" class="mr-5px"/>
+        <Icon icon="ep:plus" class="mr-5px" />
         新建对话
       </el-button>
 
@@ -18,17 +17,19 @@
         @keyup="searchConversation"
       >
         <template #prefix>
-          <Icon icon="ep:search"/>
+          <Icon icon="ep:search" />
         </template>
       </el-input>
 
       <!-- 左中间：对话列表 -->
       <div class="conversation-list">
-
         <el-empty v-if="loading" description="." :v-loading="loading" />
 
         <div v-for="conversationKey in Object.keys(conversationMap)" :key="conversationKey">
-          <div class="conversation-item classify-title" v-if="conversationMap[conversationKey].length">
+          <div
+            class="conversation-item classify-title"
+            v-if="conversationMap[conversationKey].length"
+          >
             <el-text class="mx-1" size="small" tag="b">{{ conversationKey }}</el-text>
           </div>
           <div
@@ -40,25 +41,27 @@
             @mouseout="hoverConversationId = ''"
           >
             <div
-              :class="conversation.id === activeConversationId ? 'conversation active' : 'conversation'"
+              :class="
+                conversation.id === activeConversationId ? 'conversation active' : 'conversation'
+              "
             >
               <div class="title-wrapper">
-                <img class="avatar" :src="conversation.roleAvatar || roleAvatarDefaultImg"/>
+                <img class="avatar" :src="conversation.roleAvatar || roleAvatarDefaultImg" />
                 <span class="title">{{ conversation.title }}</span>
               </div>
               <div class="button-wrapper" v-show="hoverConversationId === conversation.id">
-                <el-button class="btn" link @click.stop="handlerTop(conversation)" >
+                <el-button class="btn" link @click.stop="handlerTop(conversation)">
                   <el-icon title="置顶" v-if="!conversation.pinned"><Top /></el-icon>
                   <el-icon title="置顶" v-if="conversation.pinned"><Bottom /></el-icon>
                 </el-button>
                 <el-button class="btn" link @click.stop="updateConversationTitle(conversation)">
-                  <el-icon title="编辑" >
-                    <Icon icon="ep:edit"/>
+                  <el-icon title="编辑">
+                    <Icon icon="ep:edit" />
                   </el-icon>
                 </el-button>
                 <el-button class="btn" link @click.stop="deleteChatConversation(conversation)">
-                  <el-icon title="删除对话" >
-                    <Icon icon="ep:delete"/>
+                  <el-icon title="删除对话">
+                    <Icon icon="ep:delete" />
                   </el-icon>
                 </el-button>
               </div>
@@ -66,20 +69,19 @@
           </div>
         </div>
         <!--  底部站位  -->
-        <div style="height: 160px; width: 100%;"></div>
+        <div style="height: 160px; width: 100%"></div>
       </div>
-
     </div>
 
     <!-- 左底部：工具栏 -->
     <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
     <div class="tool-box">
       <div @click="handleRoleRepository">
-        <Icon icon="ep:user"/>
+        <Icon icon="ep:user" />
         <el-text size="small">角色仓库</el-text>
       </div>
       <div @click="handleClearConversation">
-        <Icon icon="ep:delete"/>
+        <Icon icon="ep:delete" />
         <el-text size="small">清空未置顶对话</el-text>
       </div>
     </div>
@@ -88,17 +90,16 @@
 
     <!-- 角色仓库抽屉 -->
     <el-drawer v-model="drawer" title="角色仓库" size="754px">
-      <Role/>
+      <Role />
     </el-drawer>
-
   </el-aside>
 </template>
 
 <script setup lang="ts">
-import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation'
-import {ref} from "vue";
-import Role from "@/views/ai/chat/role/index.vue";
-import {Bottom, Top} from "@element-plus/icons-vue";
+import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
+import { ref } from 'vue'
+import Role from '@/views/ai/chat/role/index.vue'
+import { Bottom, Top } from '@element-plus/icons-vue'
 import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 
 const message = useMessage() // 消息弹窗
@@ -107,8 +108,8 @@ const message = useMessage() // 消息弹窗
 const searchName = ref<string>('') // 对话搜索
 const activeConversationId = ref<string | null>(null) // 选中的对话，默认为 null
 const hoverConversationId = ref<string | null>(null) // 悬浮上去的对话
-const conversationList = ref([] as ChatConversationVO[])  // 对话列表
-const conversationMap = ref<any>({})  // 对话分组 (置顶、今天、三天前、一星期前、一个月前)
+const conversationList = ref([] as ChatConversationVO[]) // 对话列表
+const conversationMap = ref<any>({}) // 对话分组 (置顶、今天、三天前、一星期前、一个月前)
 const drawer = ref<boolean>(false) // 角色仓库抽屉 TODO @fan：roleDrawer 会不会好点哈
 const loading = ref<boolean>(false) // 加载中
 const loadingTime = ref<any>() // 加载中定时器
@@ -138,7 +139,7 @@ const searchConversation = async (e) => {
     conversationMap.value = await conversationTimeGroup(conversationList.value)
   } else {
     // 过滤
-    const filterValues = conversationList.value.filter(item => {
+    const filterValues = conversationList.value.filter((item) => {
       return item.title.includes(searchName.value.trim())
     })
     conversationMap.value = await conversationTimeGroup(filterValues)
@@ -150,7 +151,7 @@ const searchConversation = async (e) => {
  */
 const handleConversationClick = async (id: string) => {
   // 过滤出选中的对话
-  const filterConversation = conversationList.value.filter(item => {
+  const filterConversation = conversationList.value.filter((item) => {
     return item.id === id
   })
   // 回调 onConversationClick
@@ -211,20 +212,20 @@ const getChatConversationList = async () => {
 const conversationTimeGroup = async (list: ChatConversationVO[]) => {
   // 排序、指定、时间分组(今天、一天前、三天前、七天前、30天前)
   const groupMap = {
-    '置顶': [],
-    '今天': [],
-    '一天前': [],
-    '三天前': [],
-    '七天前': [],
-    '三十天前': []
+    置顶: [],
+    今天: [],
+    一天前: [],
+    三天前: [],
+    七天前: [],
+    三十天前: []
   }
   // 当前时间的时间戳
-  const now = Date.now();
+  const now = Date.now()
   // 定义时间间隔常量（单位：毫秒）
-  const oneDay = 24 * 60 * 60 * 1000;
-  const threeDays = 3 * oneDay;
-  const sevenDays = 7 * oneDay;
-  const thirtyDays = 30 * oneDay;
+  const oneDay = 24 * 60 * 60 * 1000
+  const threeDays = 3 * oneDay
+  const sevenDays = 7 * oneDay
+  const thirtyDays = 30 * oneDay
   for (const conversation: ChatConversationVO of list) {
     // 置顶
     if (conversation.pinned) {
@@ -232,7 +233,7 @@ const conversationTimeGroup = async (list: ChatConversationVO[]) => {
       continue
     }
     // 计算时间差（单位：毫秒）
-    const diff = now - conversation.updateTime;
+    const diff = now - conversation.updateTime
     // 根据时间间隔判断
     if (diff < oneDay) {
       groupMap['今天'].push(conversation)
@@ -271,7 +272,7 @@ const createConversation = async () => {
  */
 const updateConversationTitle = async (conversation: ChatConversationVO) => {
   // 1. 二次确认
-  const {value} = await ElMessageBox.prompt('修改标题', {
+  const { value } = await ElMessageBox.prompt('修改标题', {
     inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
     inputErrorMessage: '标题不能为空',
     inputValue: conversation.title
@@ -285,7 +286,7 @@ const updateConversationTitle = async (conversation: ChatConversationVO) => {
   // 3. 刷新列表
   await getChatConversationList()
   // 4. 过滤当前切换的
-  const filterConversationList = conversationList.value.filter(item => {
+  const filterConversationList = conversationList.value.filter((item) => {
     return item.id === conversation.id
   })
   if (filterConversationList.length > 0) {
@@ -310,8 +311,7 @@ const deleteChatConversation = async (conversation: ChatConversationVO) => {
     await getChatConversationList()
     // 回调
     emits('onConversationDelete', conversation)
-  } catch {
-  }
+  } catch {}
 }
 
 /**
@@ -343,16 +343,13 @@ const handleRoleRepository = async () => {
  */
 const handleClearConversation = async () => {
   // TODO @fan：可以使用 await message.confirm( 简化，然后使用 await 改成同步的逻辑，会更简洁
-  ElMessageBox.confirm(
-    '确认后对话会全部清空，置顶的对话除外。',
-    '确认提示',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
+  ElMessageBox.confirm('确认后对话会全部清空，置顶的对话除外。', '确认提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
     .then(async () => {
-      await ChatConversationApi.deleteMyAllExceptPinned()
+      await ChatConversationApi.deleteChatConversationMyByUnpinned()
       ElMessage({
         message: '操作成功!',
         type: 'success'
@@ -364,8 +361,7 @@ const handleClearConversation = async () => {
       // 回调 方法
       emits('onConversationClear')
     })
-    .catch(() => {
-    })
+    .catch(() => {})
 }
 
 // ============ 组件 onMounted
@@ -377,7 +373,7 @@ watch(activeId, async (newValue, oldValue) => {
 })
 
 // 定义 public 方法
-defineExpose({createConversation})
+defineExpose({ createConversation })
 
 onMounted(async () => {
   // 获取 对话列表
@@ -394,11 +390,9 @@ onMounted(async () => {
     }
   }
 })
-
 </script>
 
 <style scoped lang="scss">
-
 .conversation-container {
   position: relative;
   display: flex;
diff --git a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
index bda7c483..c755cecf 100644
--- a/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuChatBox.vue
@@ -6,75 +6,69 @@
     <el-main class="kefu-content" style="overflow: visible">
       <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)">
         <div ref="innerRef" class="w-[100%] pb-3px">
-          <div
-            v-for="item in messageList"
-            :key="item.id"
-            :class="[
-              item.senderType === UserTypeEnum.MEMBER
-                ? `ss-row-left`
-                : item.senderType === UserTypeEnum.ADMIN
-                  ? `ss-row-right`
-                  : ''
-            ]"
-            class="flex mb-20px w-[100%]"
-          >
-            <el-avatar
-              v-show="item.senderType === UserTypeEnum.MEMBER"
-              :src="keFuConversation.userAvatar"
-              alt="avatar"
-            />
-            <div class="kefu-message p-10px">
-              <!-- TODO puhui999: 消息相关等后续完成后统一抽离封装 -->
-              <!-- 文本消息 -->
-              <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
-                <div
-                  v-dompurify-html="replaceEmoji(item.content)"
-                  :class="[
-                    item.senderType === UserTypeEnum.MEMBER
-                      ? `ml-10px`
-                      : item.senderType === UserTypeEnum.ADMIN
-                        ? `mr-10px`
-                        : ''
-                  ]"
-                  class="flex items-center"
-                ></div>
-              </template>
-              <!-- 图片消息 -->
-              <template v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType">
-                <div
-                  :class="[
-                    item.senderType === UserTypeEnum.MEMBER
-                      ? `ml-10px`
-                      : item.senderType === UserTypeEnum.ADMIN
-                        ? `mr-10px`
-                        : ''
-                  ]"
-                  class="flex items-center"
-                >
-                  <el-image
-                    :src="item.content"
-                    fit="contain"
-                    style="width: 200px; height: 200px"
-                    @click="imagePreview(item.content)"
-                  />
-                </div>
-              </template>
+          <div v-for="(item, index) in messageList" :key="item.id" class="w-[100%]">
+            <div class="flex justify-center items-center mb-20px">
+              <!-- 日期 -->
+              <div
+                v-if="
+                  item.contentType !== KeFuMessageContentTypeEnum.SYSTEM && showTime(item, index)
+                "
+                class="date-message"
+              >
+                {{ formatDate(item.createTime) }}
+              </div>
+              <!-- 系统消息 -->
+              <view
+                v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
+                class="system-message"
+              >
+                {{ item.content }}
+              </view>
+            </div>
+            <div
+              :class="[
+                item.senderType === UserTypeEnum.MEMBER
+                  ? `ss-row-left`
+                  : item.senderType === UserTypeEnum.ADMIN
+                    ? `ss-row-right`
+                    : ''
+              ]"
+              class="flex mb-20px w-[100%]"
+            >
+              <el-avatar
+                v-if="item.senderType === UserTypeEnum.MEMBER"
+                :src="keFuConversation.userAvatar"
+                alt="avatar"
+              />
+              <div
+                :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
+                class="p-10px"
+              >
+                <!-- 文本消息 -->
+                <TextMessageItem :message="item" />
+                <!-- 图片消息 -->
+                <ImageMessageItem :message="item" />
+              </div>
+              <el-avatar
+                v-if="item.senderType === UserTypeEnum.ADMIN"
+                :src="item.senderAvatar"
+                alt="avatar"
+              />
             </div>
-            <el-avatar
-              v-show="item.senderType === UserTypeEnum.ADMIN"
-              :src="item.senderAvatar"
-              alt="avatar"
-            />
           </div>
         </div>
       </el-scrollbar>
     </el-main>
     <el-footer height="230px">
       <div class="h-[100%]">
-        <div class="chat-tools">
+        <div class="chat-tools flex items-center">
           <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+          <PictureSelectUpload
+            class="ml-15px mt-3px cursor-pointer"
+            @send-picture="handleSendPicture"
+          />
         </div>
-        <el-input v-model="message" :rows="6" type="textarea" />
+        <el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
         <div class="h-45px flex justify-end">
           <el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
         </div>
@@ -88,19 +82,25 @@
 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 { KeFuMessageContentTypeEnum } from './constants'
+import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
+import PictureSelectUpload from './tools/PictureSelectUpload.vue'
+import TextMessageItem from './message/TextMessageItem.vue'
+import ImageMessageItem from './message/ImageMessageItem.vue'
+import { Emoji } from './tools/emoji'
+import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { isEmpty } from '@/utils/is'
 import { UserTypeEnum } from '@/utils/constants'
-import { createImageViewer } from '@/components/ImageViewer'
+import { formatDate } from '@/utils/formatTime'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
 
 defineOptions({ name: 'KeFuMessageBox' })
 const messageTool = useMessage()
 const message = ref('') // 消息
 const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
 const keFuConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
-const poller = ref<any>(null) // TODO puhui999: 轮训定时器，暂时模拟 websocket
 // 获得消息 TODO puhui999:  先不考虑下拉加载历史消息
 const getMessageList = async (conversation: KeFuConversationRespVO) => {
   keFuConversation.value = conversation
@@ -111,25 +111,37 @@ const getMessageList = async (conversation: KeFuConversationRespVO) => {
   messageList.value = list.reverse()
   // TODO puhui999: 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
   await scrollToBottom()
-  // TODO puhui999: 轮训相关，功能完善后移除
-  if (!poller.value) {
-    poller.value = setInterval(() => {
-      getMessageList(conversation)
-    }, 1000)
-  }
 }
-defineExpose({ getMessageList })
+// 刷新消息列表
+const refreshMessageList = () => {
+  if (!keFuConversation.value) {
+    return
+  }
+  getMessageList(keFuConversation.value)
+}
+defineExpose({ getMessageList, refreshMessageList })
 // 是否显示聊天区域
 const showChatBox = computed(() => !isEmpty(keFuConversation.value))
 // 处理表情选择
 const handleEmojiSelect = (item: Emoji) => {
   message.value += item.name
 }
+// 处理图片发送
+const handleSendPicture = async (picUrl: string) => {
+  // 组织发送消息
+  const msg = {
+    conversationId: keFuConversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.IMAGE,
+    content: picUrl
+  }
+  await sendMessage(msg)
+}
 // 发送消息
 const handleSendMessage = async () => {
   // 1. 校验消息是否为空
   if (isEmpty(unref(message.value))) {
     messageTool.warning('请输入消息后再发送哦！')
+    return
   }
   // 2. 组织发送消息
   const msg = {
@@ -137,6 +149,11 @@ const handleSendMessage = async () => {
     contentType: KeFuMessageContentTypeEnum.TEXT,
     content: message.value
   }
+  await sendMessage(msg)
+}
+
+// 发送消息 【共用】
+const sendMessage = async (msg: any) => {
   await KeFuMessageApi.sendKeFuMessage(msg)
   message.value = ''
   // 3. 加载消息列表
@@ -152,20 +169,17 @@ const scrollToBottom = async () => {
   await nextTick()
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
 }
-
-/** 图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
-
-// TODO puhui999: 轮训相关，功能完善后移除
-onBeforeUnmount(() => {
-  if (!poller.value) {
-    return
+/**
+ * 是否显示时间
+ * @param {*} item - 数据
+ * @param {*} index - 索引
+ */
+const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
+  if (unref(messageList.value)[index + 1]) {
+    let dateString = dayjs(unref(messageList.value)[index + 1].createTime).fromNow()
+    return dateString !== dayjs(unref(item).createTime).fromNow()
   }
-  clearInterval(poller.value)
+  return false
 })
 </script>
 
@@ -241,14 +255,24 @@ onBeforeUnmount(() => {
         transform: scale(1.03);
       }
     }
+
+    .date-message,
+    .system-message {
+      width: fit-content;
+      border-radius: 12rpx;
+      padding: 8rpx 16rpx;
+      margin-bottom: 16rpx;
+      background-color: #e8e8e8;
+      color: #999;
+      font-size: 24rpx;
+    }
   }
 
   .chat-tools {
     width: 100%;
     border: #e4e0e0 solid 1px;
+    border-radius: 10px;
     height: 44px;
-    display: flex;
-    align-items: center;
   }
 
   ::v-deep(textarea) {
diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
index 19984db2..4a0e036f 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
@@ -35,33 +35,16 @@
 
 <script lang="ts" setup>
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
-import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
-import { formatDate, getNowDateTime } from '@/utils/formatTime'
-import { KeFuMessageContentTypeEnum } from '@/views/mall/promotion/kefu/components/constants'
+import { useEmoji } from './tools/emoji'
+import { formatDate } from '@/utils/formatTime'
+import { KeFuMessageContentTypeEnum } from './tools/constants'
 
 defineOptions({ name: 'KeFuConversationBox' })
+const { replaceEmoji } = useEmoji()
 const activeConversationIndex = ref(-1) // 选中的会话
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const getConversationList = async () => {
   conversationList.value = await KeFuConversationApi.getConversationList()
-  // 测试数据
-  for (let i = 0; i < 5; i++) {
-    conversationList.value.push({
-      id: 1,
-      userId: 283,
-      userAvatar:
-        'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKMezSxtOImrC9lbhwHiazYwck3xwrEcO7VJfG6WQo260whaeVNoByE5RreiaGsGfOMlIiaDhSaA991w/132',
-      userNickname: '辉辉鸭' + i,
-      lastMessageTime: getNowDateTime(),
-      lastMessageContent:
-        '[爱心][爱心]你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇',
-      lastMessageContentType: 1,
-      adminPinned: false,
-      userDeleted: false,
-      adminDeleted: false,
-      adminUnreadMessageCount: 19
-    })
-  }
 }
 defineExpose({ getConversationList })
 const emits = defineEmits<{
@@ -72,22 +55,6 @@ const openRightMessage = (item: KeFuConversationRespVO, index: number) => {
   activeConversationIndex.value = index
   emits('change', item)
 }
-const poller = ref<any>(null) // TODO puhui999: 轮训定时器，暂时模拟 websocket
-onMounted(() => {
-  // TODO puhui999: 轮训相关，功能完善后移除
-  if (!poller.value) {
-    poller.value = setInterval(() => {
-      getConversationList()
-    }, 1000)
-  }
-})
-// TODO puhui999: 轮训相关，功能完善后移除
-onBeforeUnmount(() => {
-  if (!poller.value) {
-    return
-  }
-  clearInterval(poller.value)
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/mall/promotion/kefu/components/images/a.png b/src/views/mall/promotion/kefu/components/images/a.png
new file mode 100644
index 00000000..32939004
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/a.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/aini.png b/src/views/mall/promotion/kefu/components/images/aini.png
new file mode 100644
index 00000000..02cf5c49
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/aini.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/aixin.png b/src/views/mall/promotion/kefu/components/images/aixin.png
new file mode 100644
index 00000000..25e64223
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/aixin.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/baiyan.png b/src/views/mall/promotion/kefu/components/images/baiyan.png
new file mode 100644
index 00000000..d16260af
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/baiyan.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/bizui.png b/src/views/mall/promotion/kefu/components/images/bizui.png
new file mode 100644
index 00000000..a3b18002
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/bizui.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/buhaoyisi.png b/src/views/mall/promotion/kefu/components/images/buhaoyisi.png
new file mode 100644
index 00000000..54c4b3f7
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/buhaoyisi.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/bukesiyi.png b/src/views/mall/promotion/kefu/components/images/bukesiyi.png
new file mode 100644
index 00000000..5f272e3e
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/bukesiyi.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/dajing.png b/src/views/mall/promotion/kefu/components/images/dajing.png
new file mode 100644
index 00000000..8649727e
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/dajing.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/danao.png b/src/views/mall/promotion/kefu/components/images/danao.png
new file mode 100644
index 00000000..aa85a294
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/danao.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/daxiao.png b/src/views/mall/promotion/kefu/components/images/daxiao.png
new file mode 100644
index 00000000..26206bc0
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/daxiao.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/dianzan.png b/src/views/mall/promotion/kefu/components/images/dianzan.png
new file mode 100644
index 00000000..2e7f00eb
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/dianzan.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/emo.png b/src/views/mall/promotion/kefu/components/images/emo.png
new file mode 100644
index 00000000..9c845516
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/emo.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/esi.png b/src/views/mall/promotion/kefu/components/images/esi.png
new file mode 100644
index 00000000..84e9726f
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/esi.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/fadai.png b/src/views/mall/promotion/kefu/components/images/fadai.png
new file mode 100644
index 00000000..0772de26
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/fadai.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/fankun.png b/src/views/mall/promotion/kefu/components/images/fankun.png
new file mode 100644
index 00000000..6e18dac3
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/fankun.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/feiwen.png b/src/views/mall/promotion/kefu/components/images/feiwen.png
new file mode 100644
index 00000000..be976165
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/feiwen.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/fennu.png b/src/views/mall/promotion/kefu/components/images/fennu.png
new file mode 100644
index 00000000..20c57338
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/fennu.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/ganga.png b/src/views/mall/promotion/kefu/components/images/ganga.png
new file mode 100644
index 00000000..30ec329d
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/ganga.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/ganmao.png b/src/views/mall/promotion/kefu/components/images/ganmao.png
new file mode 100644
index 00000000..35bbb89f
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/ganmao.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/hanyan.png b/src/views/mall/promotion/kefu/components/images/hanyan.png
new file mode 100644
index 00000000..a0bc838b
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/hanyan.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/haochi.png b/src/views/mall/promotion/kefu/components/images/haochi.png
new file mode 100644
index 00000000..2e52b6be
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/haochi.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/hongxin.png b/src/views/mall/promotion/kefu/components/images/hongxin.png
new file mode 100644
index 00000000..65b5de8f
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/hongxin.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/huaixiao.png b/src/views/mall/promotion/kefu/components/images/huaixiao.png
new file mode 100644
index 00000000..bc0e76c4
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/huaixiao.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/jingkong.png b/src/views/mall/promotion/kefu/components/images/jingkong.png
new file mode 100644
index 00000000..7aa65845
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/jingkong.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/jingshu.png b/src/views/mall/promotion/kefu/components/images/jingshu.png
new file mode 100644
index 00000000..0e984d68
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/jingshu.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/jingya.png b/src/views/mall/promotion/kefu/components/images/jingya.png
new file mode 100644
index 00000000..9ba6bab3
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/jingya.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/kaixin.png b/src/views/mall/promotion/kefu/components/images/kaixin.png
new file mode 100644
index 00000000..29c9f5dd
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/kaixin.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/keai.png b/src/views/mall/promotion/kefu/components/images/keai.png
new file mode 100644
index 00000000..d3b582c6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/keai.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/keshui.png b/src/views/mall/promotion/kefu/components/images/keshui.png
new file mode 100644
index 00000000..cef489ea
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/keshui.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/kun.png b/src/views/mall/promotion/kefu/components/images/kun.png
new file mode 100644
index 00000000..1ddc388a
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/kun.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/lengku.png b/src/views/mall/promotion/kefu/components/images/lengku.png
new file mode 100644
index 00000000..c5c6feeb
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/lengku.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/liuhan.png b/src/views/mall/promotion/kefu/components/images/liuhan.png
new file mode 100644
index 00000000..e6ddc6f4
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/liuhan.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/liukoushui.png b/src/views/mall/promotion/kefu/components/images/liukoushui.png
new file mode 100644
index 00000000..3e2fba65
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/liukoushui.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/liulei.png b/src/views/mall/promotion/kefu/components/images/liulei.png
new file mode 100644
index 00000000..dbf82040
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/liulei.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/mengbi.png b/src/views/mall/promotion/kefu/components/images/mengbi.png
new file mode 100644
index 00000000..a4206eef
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/mengbi.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/mianwubiaoqing.png b/src/views/mall/promotion/kefu/components/images/mianwubiaoqing.png
new file mode 100644
index 00000000..6f315b98
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/mianwubiaoqing.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/nanguo.png b/src/views/mall/promotion/kefu/components/images/nanguo.png
new file mode 100644
index 00000000..19b9fb94
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/nanguo.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/outu.png b/src/views/mall/promotion/kefu/components/images/outu.png
new file mode 100644
index 00000000..2f9a06d6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/outu.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/picture.svg b/src/views/mall/promotion/kefu/components/images/picture.svg
new file mode 100644
index 00000000..8811d495
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/images/picture.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1720063872285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6895"
+     width="200" height="200">
+    <path d="M782.16 880.98c-179.31 23.91-361 23.91-540.32 0C138.89 867.25 62 779.43 62 675.57V348.43c0-103.86 76.89-191.69 179.84-205.41 179.31-23.91 361-23.91 540.31 0C885.11 156.75 962 244.57 962 348.43v327.13c0 103.87-76.89 191.69-179.84 205.42z"
+          fill="#FF554D" p-id="6896"></path>
+    <path d="M226.11 596.86c-9.74 47.83 17.26 95.6 63.48 111.3C333.49 723.08 394.55 737 469.53 737c59.25 0 105.46-8.69 140.23-19.7 51.59-16.34 79.94-71.16 63.37-122.68-24.47-76.11-65.57-180.7-106.68-180.7-64.62 0-64.62 96.92-64.62 96.92S437.22 317 372.61 317c-82.11 0-117.85 139.12-146.5 279.86z"
+          fill="#FFFFFF" p-id="6897"></path>
+    <path d="M782 347m-60 0a60 60 0 1 0 120 0 60 60 0 1 0-120 0Z" fill="#FFBC55" p-id="6898"></path>
+</svg>
diff --git a/src/views/mall/promotion/kefu/components/images/shengqi.png b/src/views/mall/promotion/kefu/components/images/shengqi.png
new file mode 100644
index 00000000..7dce41dc
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/shengqi.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/shuizhuo.png b/src/views/mall/promotion/kefu/components/images/shuizhuo.png
new file mode 100644
index 00000000..97d0f0a6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/shuizhuo.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/tianshi.png b/src/views/mall/promotion/kefu/components/images/tianshi.png
new file mode 100644
index 00000000..eb922dd7
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/tianshi.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/xiaodiaoya.png b/src/views/mall/promotion/kefu/components/images/xiaodiaoya.png
new file mode 100644
index 00000000..29fbc0e1
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/xiaodiaoya.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/xiaoku.png b/src/views/mall/promotion/kefu/components/images/xiaoku.png
new file mode 100644
index 00000000..88a169d4
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/xiaoku.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/xinsui.png b/src/views/mall/promotion/kefu/components/images/xinsui.png
new file mode 100644
index 00000000..a0f572a1
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/xinsui.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/xiong.png b/src/views/mall/promotion/kefu/components/images/xiong.png
new file mode 100644
index 00000000..43dfd709
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/xiong.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/yiwen.png b/src/views/mall/promotion/kefu/components/images/yiwen.png
new file mode 100644
index 00000000..4c0da709
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/yiwen.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/yun.png b/src/views/mall/promotion/kefu/components/images/yun.png
new file mode 100644
index 00000000..56e5d021
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/yun.png differ
diff --git a/src/views/mall/promotion/kefu/components/images/ziya.png b/src/views/mall/promotion/kefu/components/images/ziya.png
new file mode 100644
index 00000000..593ef5e6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/images/ziya.png differ
diff --git a/src/views/mall/promotion/kefu/components/index.ts b/src/views/mall/promotion/kefu/components/index.ts
index fcf6bd5b..7a4e3b04 100644
--- a/src/views/mall/promotion/kefu/components/index.ts
+++ b/src/views/mall/promotion/kefu/components/index.ts
@@ -1,5 +1,5 @@
 import KeFuConversationBox from './KeFuConversationBox.vue'
 import KeFuChatBox from './KeFuChatBox.vue'
-import * as Constants from './constants'
+import * as Constants from './tools/constants'
 
 export { KeFuConversationBox, KeFuChatBox, Constants }
diff --git a/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
new file mode 100644
index 00000000..c8d5f650
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/ImageMessageItem.vue
@@ -0,0 +1,39 @@
+<template>
+  <!-- 图片消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.IMAGE === message.contentType">
+    <div
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+    >
+      <el-image
+        :src="message.content"
+        fit="contain"
+        style="width: 200px"
+        @click="imagePreview(message.content)"
+      />
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { createImageViewer } from '@/components/ImageViewer'
+
+defineOptions({ name: 'ImageMessageItem' })
+defineProps<{
+  message: KeFuMessageRespVO
+}>()
+/** 图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+</script>
diff --git a/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue b/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue
new file mode 100644
index 00000000..fd4b6edb
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue
@@ -0,0 +1,29 @@
+<template>
+  <!-- 文本消息 -->
+  <template v-if="KeFuMessageContentTypeEnum.TEXT === message.contentType">
+    <div
+      v-dompurify-html="replaceEmoji(message.content)"
+      :class="[
+        message.senderType === UserTypeEnum.MEMBER
+          ? `ml-10px`
+          : message.senderType === UserTypeEnum.ADMIN
+            ? `mr-10px`
+            : ''
+      ]"
+      class="flex items-center"
+    ></div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { KeFuMessageContentTypeEnum } from '../tools/constants'
+import { UserTypeEnum } from '@/utils/constants'
+import { useEmoji } from '../tools/emoji'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+
+defineOptions({ name: 'TextMessageItem' })
+defineProps<{
+  message: KeFuMessageRespVO
+}>()
+const { replaceEmoji } = useEmoji()
+</script>
diff --git a/src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue b/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
similarity index 87%
rename from src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue
rename to src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
index 03a963c6..116246a6 100644
--- a/src/views/mall/promotion/kefu/components/EmojiSelectPopover.vue
+++ b/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
@@ -2,7 +2,7 @@
 <template>
   <el-popover :width="500" placement="top" trigger="click">
     <template #reference>
-      <Icon :size="30" class="ml-10px" icon="twemoji:grinning-face" />
+      <Icon :size="30" class="ml-10px cursor-pointer" icon="twemoji:grinning-face" />
     </template>
     <ElScrollbar height="300px">
       <ul class="ml-2 flex flex-wrap px-2">
@@ -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<{
diff --git a/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue b/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
new file mode 100644
index 00000000..481df591
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <img :src="Picture" style="width: 35px; height: 35px" @click="selectAndUpload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Picture from '@/views/mall/promotion/kefu/components/images/picture.svg'
+import * as FileApi from '@/api/infra/file'
+
+defineOptions({ name: 'PictureSelectUpload' })
+const message = useMessage()
+const emits = defineEmits<{
+  (e: 'send-picture', v: string): void
+}>()
+// 选择并上传文件
+const selectAndUpload = async () => {
+  const files: any = await getFiles()
+  message.success('图片发送中请稍等。。。')
+  const res = await FileApi.updateFile({ file: files[0].file })
+  emits('send-picture', res.data)
+}
+
+/**
+ * 唤起文件选择窗口，并获取选择的文件
+ * @param {Object} options - 配置选项
+ * @param {boolean} [options.multiple=true] - 是否支持多选
+ * @param {string} [options.accept=''] - 文件上传格式限制
+ * @param {number} [options.limit=1] - 单次上传最大文件数
+ * @param {number} [options.fileSize=500] - 单个文件大小限制（单位：MB）
+ * @returns {Promise<Array>} 选择的文件列表，每个文件带有一个uid
+ */
+async function getFiles(options = {}) {
+  const { multiple, accept, limit, fileSize } = {
+    multiple: true,
+    accept: 'image/jpeg, image/png, image/gif', // 默认选择图片
+    limit: 1,
+    fileSize: 500,
+    ...options
+  }
+
+  // 创建文件选择元素
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.style.display = 'none'
+  if (multiple) input.multiple = true
+  if (accept) input.accept = accept
+
+  // 将文件选择元素添加到文档中
+  document.body.appendChild(input)
+
+  // 触发文件选择元素的点击事件
+  input.click()
+
+  // 等待文件选择元素的 change 事件
+  try {
+    const files = await new Promise((resolve, reject) => {
+      input.addEventListener('change', (event: any) => {
+        const filesArray = Array.from(event?.target?.files || [])
+
+        // 从文档中移除文件选择元素
+        document.body.removeChild(input)
+
+        // 判断是否超出上传数量限制
+        if (filesArray.length > limit) {
+          reject({ errorType: 'limit', files: filesArray })
+          return
+        }
+
+        // 判断是否超出上传文件大小限制
+        const oversizedFiles = filesArray.filter((file: File) => file.size / 1024 ** 2 > fileSize)
+        if (oversizedFiles.length > 0) {
+          reject({ errorType: 'fileSize', files: oversizedFiles })
+          return
+        }
+
+        // 生成文件列表，并添加 uid
+        const fileList = filesArray.map((file, index) => ({ file, uid: Date.now() + index }))
+        resolve(fileList)
+      })
+    })
+
+    return files
+  } catch (error) {
+    console.error('选择文件出错:', error)
+    throw error
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/mall/promotion/kefu/components/constants.ts b/src/views/mall/promotion/kefu/components/tools/constants.ts
similarity index 50%
rename from src/views/mall/promotion/kefu/components/constants.ts
rename to src/views/mall/promotion/kefu/components/tools/constants.ts
index f8599160..e171e363 100644
--- a/src/views/mall/promotion/kefu/components/constants.ts
+++ b/src/views/mall/promotion/kefu/components/tools/constants.ts
@@ -1,3 +1,4 @@
+// 客服消息类型枚举类
 export const KeFuMessageContentTypeEnum = {
   TEXT: 1, // 文本消息
   IMAGE: 2, // 图片消息
@@ -8,3 +9,8 @@ export const KeFuMessageContentTypeEnum = {
   PRODUCT: 10, //  商品消息
   ORDER: 11 //  订单消息"
 }
+// Promotion 的 WebSocket 消息类型枚举类
+export const WebSocketMessageTypeConstants = {
+  KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
+  KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change' // 客服消息管理员已读
+}
diff --git a/src/views/mall/promotion/kefu/components/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts
similarity index 58%
rename from src/views/mall/promotion/kefu/components/emoji.ts
rename to src/views/mall/promotion/kefu/components/tools/emoji.ts
index 765d2a6e..449f51c0 100644
--- a/src/views/mall/promotion/kefu/components/emoji.ts
+++ b/src/views/mall/promotion/kefu/components/tools/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] = []
-  }
-  emojiPage[Math.floor(index / 30) + 1].push(item)
-})
-
-// 后端上传地址
-const staticUrl = import.meta.env.VITE_STATIC_URL
-// 后缀
-const suffix = '/static/img/chat/emoji/'
-
-// 处理表情
-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
-          }"/>`
-        )
-      })
+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)
     }
   }
-  return newData
-}
-
-// 获得所有表情
-export function getEmojiList(): Emoji[] {
-  return emojiList.map((item) => ({
-    url: staticUrl + suffix + item.file,
-    name: item.name
-  })) as Emoji[]
-}
-
-function selEmojiFile(name: string) {
-  for (const index in emojiList) {
-    if (emojiList[index].name === name) {
-      return emojiList[index].file
+  // 初始化
+  onMounted(async () => {
+    if (isEmpty(emojiPathList.value)) {
+      await getStaticEmojiPath()
     }
+  })
+
+  // 处理表情
+  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 false
+
+  // 获得所有表情
+  function getEmojiList(): Emoji[] {
+    return emojiList.map((item) => ({
+      url: selEmojiFile(item.name),
+      name: item.name
+    })) as Emoji[]
+  }
+
+  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 { replaceEmoji, getEmojiList }
 }
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 1204b8dc..1cfea211 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -16,19 +16,77 @@
 <script lang="ts" setup>
 import { KeFuChatBox, KeFuConversationBox } from './components'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { getAccessToken } from '@/utils/auth'
+import { useWebSocket } from '@vueuse/core'
+import { WebSocketMessageTypeConstants } from '@/views/mall/promotion/kefu/components/tools/constants'
 
 defineOptions({ name: 'KeFu' })
-
+const message = useMessage()
 // 加载消息
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
 const handleChange = (conversation: KeFuConversationRespVO) => {
   keFuChatBoxRef.value?.getMessageList(conversation)
 }
 
-// 加载会话
+//======================= websocket start=======================
+const server = ref(
+  (import.meta.env.VITE_BASE_URL + '/infra/ws/').replace('http', 'ws') +
+    '?token=' +
+    getAccessToken()
+) // WebSocket 服务地址
+
+/** 发起 WebSocket 连接 */
+const { data, close, open } = useWebSocket(server.value, {
+  autoReconnect: false,
+  heartbeat: true
+})
+watchEffect(() => {
+  if (!data.value) {
+    return
+  }
+  try {
+    // 1. 收到心跳
+    if (data.value === 'pong') {
+      // state.recordList.push({
+      //   text: '【心跳】',
+      //   time: new Date().getTime()
+      // })
+      return
+    }
+
+    // 2.1 解析 type 消息类型
+    const jsonMessage = JSON.parse(data.value)
+    const type = jsonMessage.type
+    if (!type) {
+      message.error('未知的消息类型：' + data.value)
+      return
+    }
+    // 2.2 消息类型：KEFU_MESSAGE_TYPE
+    if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+      // 刷新列表
+      getConversationList()
+      // 刷新消息列表
+      keFuChatBoxRef.value?.refreshMessageList()
+      return
+    }
+  } catch (error) {
+    console.error(error)
+  }
+})
+//======================= websocket end=======================
+// 加载会话列表
 const keFuConversationRef = ref<InstanceType<typeof KeFuConversationBox>>()
-onMounted(() => {
+const getConversationList = () => {
   keFuConversationRef.value?.getConversationList()
+}
+onMounted(() => {
+  getConversationList()
+  // 打开 websocket 连接
+  open()
+})
+onBeforeUnmount(() => {
+  // 关闭 websocket 连接
+  close()
 })
 </script>
 
diff --git a/types/env.d.ts b/types/env.d.ts
index 63d9c3ee..057b5268 100644
--- a/types/env.d.ts
+++ b/types/env.d.ts
@@ -19,7 +19,6 @@ interface ImportMetaEnv {
   readonly VITE_UPLOAD_URL: string
   readonly VITE_API_URL: string
   readonly VITE_BASE_PATH: string
-  readonly VITE_STATIC_URL: string
   readonly VITE_DROP_DEBUGGER: string
   readonly VITE_DROP_CONSOLE: string
   readonly VITE_SOURCEMAP: string