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

<template>
  <div>
    <!-- 新区域，放在头部 -->
   <el-row style="display: flex; justify-content: center;">
		
      <el-col :span="24">
        <div style="width:100%;height:70px;background-color:#3c80ff;">
          <el-row>
            <el-col :span="6">
              <el-input
                style="width: 80%;margin-top: 20px;margin-left:10px;"
                :suffix-icon="Search"
              />
            </el-col>

            <el-col :span="6">
				 <span style="display: flex;  margin-top: 15px;">
				    <el-avatar
				      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
				    />
				    <span style="margin-left:5px;margin-top: 9px;">客服桃子</span>
				    <el-switch
					  style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
					  v-model="value6"
				      class="ml-2"
				      width="60"
				      inline-prompt
				      active-text="在线"
				      inactive-text="下线"
				    />
				  </span>
            </el-col>
            <el-col :span="6">
              <el-button size="small" round style="margin-top:23px;margin-left:75%">退出登录</el-button>
            </el-col>

            <el-col :span="6">
              <el-menu
			  background-color="#3c80ff"
			  text-color="white"
			  active-text-color="white"
				  style="width:100%;display: flex;"
                >
                  <el-menu-item style="width:33%;height:70px" index="1">客户信息</el-menu-item>
                  <el-menu-item style="width:33%;height:70px" index="2">交易订单</el-menu-item>
                  <el-menu-item style="width:34%;height:70px" index="3">商品信息</el-menu-item>
                </el-menu>
				
				
				<!-- <div style="color: #ffffff;" class="header-title h-60px flex justify-center items-center">他的足迹</div> -->
				
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>

    <!-- 原有的三个区域 -->
    <el-row style="display: flex; justify-content: center;">
      <!-- 会话列表 -->
      <el-col :span="6">
        <ContentWrap>
          <KeFuConversationList ref="keFuConversationRef" @change="handleChange"/>
        </ContentWrap>
      </el-col>

      <!-- 会话详情（选中会话的消息列表） -->
      <el-col :span="12">
        <ContentWrap>
          <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/>
        </ContentWrap>
      </el-col>

      <!-- 会员足迹（选中会话的会员足迹） -->
      <el-col :span="6">
        <ContentWrap>
          <MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
        </ContentWrap>
      </el-col>
    </el-row>
  </div>
</template>


<script lang="ts" setup>
  import {KeFuConversationList, KeFuMessageList, MemberBrowsingHistory} from './components'
  import {WebSocketMessageTypeConstants} from './components/tools/constants'
  import {KeFuConversationRespVO} from '@/api/mall/promotion/kefu/conversation'
  import {getRefreshToken, getAccessToken} from '@/utils/auth'
  import {useWebSocket} from '@vueuse/core'
  import {Search} from '@element-plus/icons-vue'

  defineOptions({name: 'KeFu'})
  
  const value6 = ref(true)

  const message = useMessage() // 消息弹窗

  // ======================= WebSocket start =======================
  const server = ref(
    (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
    '?token=' +
    getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
  ) // WebSocket 服务地址

  /** 发起 WebSocket 连接 */
  const {data, close, open} = useWebSocket(server.value, {
    autoReconnect: false,
    heartbeat: true
  })

  /** 监听 WebSocket 数据 */
  watchEffect(() => {
    if (!data.value) {
      return
    }
    try {
      // 1. 收到心跳
      if (data.value === 'pong') {
        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) {
        // 刷新会话列表
        // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
        getConversationList()
        // 刷新消息列表
        keFuChatBoxRef.value?.refreshMessageList(JSON.parse(jsonMessage.content))
        return
      }
      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
        // 刷新会话列表
        // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
        getConversationList()
      }
    } catch (error) {
      console.error(error)
    }
  })
  // ======================= WebSocket end =======================
  /** 加载会话列表 */
  const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
  const getConversationList = () => {
    keFuConversationRef.value?.getConversationList()
  }

  /** 加载指定会话的消息列表 */
  const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
  const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
  const handleChange = (conversation: KeFuConversationRespVO) => {
    keFuChatBoxRef.value?.getNewMessageList(conversation)
    memberBrowsingHistoryRef.value?.initHistory(conversation)
  }

  /** 初始化 */
  onMounted(() => {
    getConversationList()
    // 打开 websocket 连接
    open()
  })

  /** 销毁 */
  onBeforeUnmount(() => {
    // 关闭 websocket 连接
    close()
  })
</script>

<style lang="scss">
  .kefu {
    height: calc(100vh - 165px);
    overflow: auto; /* 确保内容可滚动 */

  }

  /* 定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 10px;
    height: 6px;
  }

  /* 定义滚动条轨道 内阴影+圆角 */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
    border-radius: 10px;
    background-color: #fff;
  }

  /* 定义滑块 内阴影+圆角 */
  ::-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>