添加通知弹窗、音效，具有防抖

yudao-admin-vue3/.env.local

@@ -5,7 +5,8 @@ VITE_DEV=true
 
 # 请求路径
 VITE_BASE_URL='https://zysc.fjptzykj.com'
-# VITE_BASE_URL='http://192.168.1.12:6127'
+# VITE_BASE_URL='http://192.168.10.75:6127'
+# VITE_BASE_URL='http://127.0.0.1:6127'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

yudao-admin-vue3/.vscode/settings.json

@@ -62,7 +62,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"

yudao-admin-vue3/src/App.vue

@@ -4,7 +4,9 @@ import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 import routerSearch from '@/components/RouterSearch/index.vue'
-
+import EventBus from '@/utils/eventBus'
+import { debounce } from 'lodash'
+import { ElNotification } from 'element-plus'
 defineOptions({ name: 'APP' })
 
 const { getPrefixCls } = useDesign()
@@ -23,6 +25,17 @@ const setDefaultTheme = () => {
   appStore.setIsDark(isDarkTheme)
 }
 setDefaultTheme()
+const debounceNotify = debounce((msg) => {
+  alert(msg)
+    ElNotification.info({
+      title: "新消息",
+      message: msg,
+      duration: 3000,
+    })
+  }, 600);
+onMounted(() => {
+EventBus.on('show-notification', debounceNotify);
+})
 </script>
 <template>
   <ConfigGlobal :size="currentSize">

yudao-admin-vue3/src/layout/Layout.vue

@@ -5,6 +5,9 @@ import { Backtop } from '@/components/Backtop'
 import { Setting } from '@/layout/components/Setting'
 import { useRenderLayout } from './components/useRenderLayout'
 import { useDesign } from '@/hooks/web/useDesign'
+import EventBus from '@/utils/eventBus'
+import { debounce } from 'lodash'
+import { ElNotification } from 'element-plus'
 
 const { getPrefixCls } = useDesign()
 
@@ -42,7 +45,14 @@ const renderLayout = () => {
       break
   }
 }
-
+const debounceNotify = debounce((msg) => {
+    ElNotification.info({
+      title: "新消息",
+      message: msg,
+      duration: 3000,
+    })
+  }, 600);
+EventBus.on('notification', debounceNotify);
 export default defineComponent({
   name: 'Layout',
   setup() {

yudao-admin-vue3/src/utils/eventBus.ts

@@ -0,0 +1,2 @@
+import mitt from 'mitt';
+export default mitt();

yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue

@@ -7,13 +7,12 @@
         <div style="width:100%;height:68px;background-color:#3c80ff;">
           <el-row>
             <el-col :span="6">
-              <el-input @input="findNameInput" v-model="findName"
+              <el-input @input="findNameInput" v-model="findName" style="width: 80%;margin-top: 20px;margin-left:23px;"
-                        style="width: 80%;margin-top: 20px;margin-left:23px;"
+                :suffix-icon="Search" />
-                        :suffix-icon="Search"/>
             </el-col>
 
             <el-col :span="1">
-				<el-avatar style="  margin-top: 15px;" :src="pic"/>
+              <el-avatar style="  margin-top: 15px;" :src="pic" />
               <!-- <span style="display: flex;  margin-top: 15px;">
 								
 								<span style="margin-left:5px;margin-top: 9px;">{{name}}</span>
@@ -27,17 +26,15 @@
 
               <span style="display: flex;  margin-top: 15px;">
                 <!-- <el-avatar :src="pic"/> -->
-								<span style="margin-left:5px;margin-top: 9px;">{{name}}</span>
+                <span style="margin-left:5px;margin-top: 9px;">{{ name }}</span>
-								<el-switch
+                <el-switch style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
-			      style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
+                  v-model="lineStatus" class="ml-2" width="60" inline-prompt active-text="在线" inactive-text="下线"
-			      v-model="lineStatus" class="ml-2" width="60" inline-prompt active-text="在线"
+                  @change="handleSwitchChange" />
-			      inactive-text="下线" @change="handleSwitchChange"/>
               </span>
             </el-col>
 
             <el-col :span="4">
-              <el-button @click="out" size="small" round
+              <el-button @click="out" size="small" round style="margin-top:23px;margin-left:72%">退出
-                         style="margin-top:23px;margin-left:72%">退出
               </el-button>
             </el-col>
 
@@ -65,14 +62,14 @@
       <!-- 会话列表 -->
       <el-col :span="6">
         <ContentWrap>
-          <KeFuConversationList ref="keFuConversationRef" @change="handleChange"/>
+          <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
         </ContentWrap>
       </el-col>
 
       <!-- 会话详情（选中会话的消息列表） -->
       <el-col :span="12">
 
-        <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/>
+        <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
 
       </el-col>
 
@@ -83,29 +80,29 @@
           <div style="height: 522px ;">
             <div>
               <span style="display: flex;">
-					<el-avatar style="border: 1px solid #f8f9ee;" :src="user.avatar"/>
+                <el-avatar style="border: 1px solid #f8f9ee;" :src="user.avatar" />
-					<span style="margin-left:5px;margin-top: 9px;">{{user.nickname}}</span>
+                <span style="margin-left:5px;margin-top: 9px;">{{ user.nickname }}</span>
               </span>
             </div>
 
-            <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;"/>
+            <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
             <div>
               <span style="color: #5d5d59;font-size: 13px ;">手机号</span><span
-              style="margin-left: 47px;font-size: 14px ;">{{user.mobile}}</span>
+                style="margin-left: 47px;font-size: 14px ;">{{ user.mobile }}</span>
             </div>
             <div style="margin-top: 5px;">
               <span style="color: #5d5d59;font-size: 13px ;">分组</span><span
-              style="margin-left: 60px;font-size: 14px ;">{{user.groupName}}</span>
+                style="margin-left: 60px;font-size: 14px ;">{{ user.groupName }}</span>
             </div>
             <div style="margin-top: 5px;">
               <span style="color: #5d5d59;font-size: 13px ;">用户标签</span><span
                 style="margin-left: 33px;font-size: 14px ;">客户</span>
             </div>
-            <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;"/>
+            <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
 
             <div>
               <span style="color: #5d5d59;font-size: 13px ;">用户等级</span><span
-              style="margin-left: 35px;font-size: 14px ;">{{user.levelName}}</span>
+                style="margin-left: 35px;font-size: 14px ;">{{ user.levelName }}</span>
             </div>
             <div style="margin-top: 5px;">
               <span style="color: #5d5d59;font-size: 13px ;">推荐人</span><span
@@ -117,7 +114,7 @@
             </div> -->
             <div style="margin-top: 5px;">
               <span style="color: #5d5d59;font-size: 13px ;">积分</span><span
-              style="margin-left: 60px;font-size: 14px ;">{{user.point}}</span>
+                style="margin-left: 60px;font-size: 14px ;">{{ user.point }}</span>
             </div>
             <div style="margin-top: 5px;">
               <span style="color: #5d5d59;font-size: 13px ;">推广员</span><span
@@ -125,9 +122,9 @@
             </div>
             <div style="margin-top: 5px;">
               <span style="color: #5d5d59;font-size: 13px ;">生日</span><span
-              style="margin-left: 60px;font-size: 14px ;">{{user.birthday}}</span>
+                style="margin-left: 60px;font-size: 14px ;">{{ user.birthday }}</span>
             </div>
-            <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;"/>
+            <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
           </div>
         </ContentWrap>
 
@@ -136,11 +133,11 @@
         </ContentWrap>
 
         <ContentWrap v-show="chick == '2'">
-          <MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
+          <MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
         </ContentWrap>
 
         <ContentWrap v-show="chick == '3'">
-		  <MemberBrowsingHistorys ref="memberBrowsingHistorysRef"/>
+          <MemberBrowsingHistorys ref="memberBrowsingHistorysRef" />
         </ContentWrap>
 
       </el-col>
@@ -150,54 +147,57 @@
 
 
 <script lang="ts" setup>
-  import {
+import {
   KeFuConversationList,
   KeFuMessageList,
   MemberBrowsingHistorys,
   MemberBrowsingHistory
 
-  } from './components'
+} from './components'
-  import {WebSocketMessageTypeConstants} from './components/tools/constants'
+import { WebSocketMessageTypeConstants } from './components/tools/constants'
-  import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
-  import {KeFuConversationRespVO} from '@/api/mall/promotion/kefu/conversation'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
-  import {getRefreshToken, getAccessToken} from '@/utils/auth'
+import { getRefreshToken, getAccessToken } from '@/utils/auth'
-  import {useWebSocket} from '@vueuse/core'
+import { useWebSocket } from '@vueuse/core'
-  import {Search} from '@element-plus/icons-vue'
+import { Search } from '@element-plus/icons-vue'
-  import * as UserApi from '@/api/member/user'
+import * as UserApi from '@/api/member/user'
-  import {SupportStaffApi, SupportStaffVO} from '@/api/mall/promotion/supportstaff'
+import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportstaff'
-  import {string} from 'vue-types'
+import { string } from 'vue-types'
+import EventBus from '@/utils/eventBus';
+import bgm from './xm3463.mp3'
 import type { TabsPaneContext } from 'element-plus'
-  const findName = ref('')
+import { ElNotification } from 'element-plus'
+const findName = ref('')
+const audio = new Audio(bgm)
+defineOptions({ name: 'KeFu' })
 
-  defineOptions({name: 'KeFu'})
+const lineStatus = ref(true)
 
-  const lineStatus = ref(true)
+const clickUser = ref(1)
-  
-  const clickUser = ref(1)
 
 
-  const message = useMessage() // 消息弹窗
+const message = useMessage() // 消息弹窗
 
-  const params = new URLSearchParams(window.location.search);
+const params = new URLSearchParams(window.location.search);
-  const name = params.get('name');
+const name = params.get('name');
-  const pic = params.get('pic');
+const pic = params.get('pic');
-  const kefuId = params.get('id')
+const kefuId = params.get('id')
-  const conversations = ref<KeFuConversationRespVO[]>([])
+const conversations = ref<KeFuConversationRespVO[]>([])
-  // const userInfoRef =  ref<InstanceType<typeof UserInfo>>()
+// const userInfoRef =  ref<InstanceType<typeof UserInfo>>()
-  const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
+const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
-  const userId = ref(0)
+const userId = ref(0)
-  const stat = ref(false)
+const stat = ref(false)
 
-  // ======================= WebSocket start =======================
+// ======================= WebSocket start =======================
-  const server = ref(
+const server = ref(
   (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
-    '?token=' + getRefreshToken() 
+  '?token=' + getAccessToken()
   // getAccessToken()
   // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
-  ) // WebSocket 服务地址
+) // WebSocket 服务地址
 
 
-  const handleSwitchChange = async (value) => {
+const handleSwitchChange = async (value) => {
   console.log('11111:', value)
   let a = 0;
 
@@ -211,19 +211,19 @@ import type { TabsPaneContext } from 'element-plus'
     message.success('已下线')
   }
 
-  }
+}
 
-  const shangxian = async () => {
+const shangxian = async () => {
   await SupportStaffApi.updateLineStatus(kefuId, 1)
-  }
+}
 
-  const xiaxian = async () => {
+const xiaxian = async () => {
   await SupportStaffApi.updateLineStatus(kefuId, 2)
-  }
+}
 
-  let a = 0;
+let a = 0;
 
-  const {status, data, send, open, close} = useWebSocket(server.value, {
+const { status, data, send, open, close } = useWebSocket(server.value, { 
   onConnected: function (ws) {
     shangxian(); //连接成功上线
     console.log('websocket 连接成功！', ws);
@@ -241,36 +241,26 @@ import type { TabsPaneContext } from 'element-plus'
   //   }
   // },
   onMessage: function (ws, event) {
-      // console.log('收到的 WebSocket 消息:', event.data);
-
     a = a + 1;
     if (a == 2) {
       getConversationList()
-		if(userId.value != 0){
+      if (userId.value != 0) {
         getBySenderIdStat()
-			if(stat.value){
+        if (stat.value) {
           keFuChatBoxRef.value?.refreshMessageList()
         }
       }
-      	
       a = 0;
     }
-
-
   },
   autoReconnect: true,  // 开启自动重连
   heartbeat: true
-  });
+});
-
-  // const { data, close, open } = useWebSocket(server.value, {
-  //   autoReconnect: true,
-  //   heartbeat: true
-  // })
 
 
-  /** 监听 WebSocket 数据 */
+
-  watchEffect(() => {
+/** 监听 WebSocket 数据 */
-    console.log('连接服务器得到消息:', data.value)
+watchEffect(() => {
   if (!data.value) {
     return
   }
@@ -292,6 +282,23 @@ import type { TabsPaneContext } from 'element-plus'
     // 2.2 消息类型：KEFU_MESSAGE_TYPE
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
       console.log('来自用户发送的消息:', JSON.parse(jsonMessage.content))
+      const message = JSON.parse(jsonMessage.content)
+      if (message.senderType == 1) {
+        audio.play()
+        EventBus.emit('notification', message.content)
+        // Notification.requestPermission().then(permission => {
+        //   if (permission === 'granted') {
+        //     console.log('通知权限已开启');
+        //   }
+        // });
+        // if (Notification.permission === 'granted') {
+        //   console.warn('有通知权限');
+        //   new Notification("新消息:"+message.content);
+        // } else {
+        //   console.warn('没有通知权限');
+        // }
+      }
+      
       // 刷新会话列表
       // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
       getConversationList()
@@ -308,23 +315,23 @@ import type { TabsPaneContext } from 'element-plus'
   } catch (error) {
     console.error(error)
   }
-  })
+})
 
 
 
 
-  // ======================= WebSocket end =======================
+// ======================= WebSocket end =======================
-  /** 加载会话列表 */
+/** 加载会话列表 */
-  const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
+const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
-  const getConversationList = () => {
+const getConversationList = () => {
   keFuConversationRef.value?.getConversationList(findName.value)
-  }
+}
 
-  /** 加载指定会话的消息列表 */
+/** 加载指定会话的消息列表 */
-  const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
+const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
-  const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
+const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
-  const memberBrowsingHistorysRef = ref<InstanceType<typeof MemberBrowsingHistorys>>()
+const memberBrowsingHistorysRef = ref<InstanceType<typeof MemberBrowsingHistorys>>()
-  const handleChange = async (conversation: KeFuConversationRespVO) => {
+const handleChange = async (conversation: KeFuConversationRespVO) => {
   conversations.value = conversation
   // chick.value = '1'
   clickUser.value = 2
@@ -333,52 +340,52 @@ import type { TabsPaneContext } from 'element-plus'
   keFuChatBoxRef.value?.getNewMessageList(conversation)
   memberBrowsingHistoryRef.value?.initHistory(conversation)
   memberBrowsingHistorysRef.value?.initHistory(conversation)
-  }
+}
 
-  const out = async () => {
+const out = async () => {
   // await SupportStaffApi.updateLineStatus(kefuId, 2)
   window.close();
   // window.location.href = '/kefu/support-staff';
-  }
+}
 
-  const getBySenderIdStat = async () => {
+const getBySenderIdStat = async () => {
   stat.value = await KeFuMessageApi.getBySenderIdStat(userId.value)
-  	}
+}
 
 
-  const chick = ref('1')
+const chick = ref('1')
-  const userInfo = async () => {
+const userInfo = async () => {
   chick.value = '1'
-	if(clickUser.value == 2){
+  if (clickUser.value == 2) {
     user.value = await UserApi.getUserInfo(userId.value)
   }
 
-  }
+}
-  const zuoji = () => {
+const zuoji = () => {
   chick.value = '2'
   // keFuChatBoxRef.value?.getNewMessageList(conversations.value)
   memberBrowsingHistoryRef.value?.initHistory(conversations.value)
-  }
+}
-  const jiaoyi = () => {
+const jiaoyi = () => {
   chick.value = '3'
   // keFuChatBoxRef.value?.getNewMessageList(conversations.value)
   // memberBrowsingHistoryRef.value?.initHistory(conversations.value)
-  }
+}
 
 
-  const findNameInput = () => {
+const findNameInput = () => {
   keFuConversationRef.value?.getConversationList(findName.value)
-  }
+}
 
-  /** 初始化 */
+/** 初始化 */
-  onMounted(() => {
+onMounted(() => {
   getConversationList()
   // 打开 websocket 连接
   open()
   console.log('WebSocket 已初始化');
-  })
+})
 
-  // /** 销毁 */
+// /** 销毁 */
   // onBeforeUnmount(() => {
   //   // 关闭 websocket 连接
   //   close()
@@ -387,32 +394,32 @@ import type { TabsPaneContext } from 'element-plus'
 </script>
 
 <style lang="scss">
-  .kefu {
+.kefu {
   height: calc(100vh - 165px);
   overflow: auto;
   /* 确保内容可滚动 */
 
-  }
+}
 
-  /* 定义滚动条样式 */
+/* 定义滚动条样式 */
-  ::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 10px;
   height: 6px;
-  }
+}
 
-  /* 定义滚动条轨道 内阴影+圆角 */
+/* 定义滚动条轨道 内阴影+圆角 */
-  ::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
   border-radius: 10px;
   background-color: #fff;
-  }
+}
 
-  /* 定义滑块 内阴影+圆角 */
+/* 定义滑块 内阴影+圆角 */
-  ::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
 
   border-radius: 10px;
   box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
   background-color: rgba(240, 240, 240, 0.5);
 
-  }
+}
 </style>

yudao-admin-vue3/src/views/mall/promotion/supportstaff/index.vue

@@ -169,6 +169,8 @@ import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportsta
 import SupportStaffForm from './SupportStaffForm.vue'
 import { setStaffToken} from '@/utils/auth'
 import { createImageViewer } from '@/components/ImageViewer'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 /** 客服人员 列表 */
 defineOptions({ name: 'SupportStaff' })
 
@@ -247,8 +249,10 @@ const handleDelete = async (id: number) => {
 /** 客服进入工作台 */
 const handleEnterConsole = async (id: number,name: string,pic: string) => {
   setStaffToken(id);
-  const url = `${window.location.origin}/kefu/kefu?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}&pic=${encodeURIComponent(pic)}`;
+  const url = `${window.location.origin}/kefu/chat?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}&pic=${encodeURIComponent(pic)}`;
   window.open(url, '_blank');
+  // const url = `/kefu/chat?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}&pic=${encodeURIComponent(pic)}`;
+  // router.push(url);
 }
 /** 导出按钮操作 */
 const handleExport = async () => {