【代码评审】Mall：客服的会话列表

65509834 · YunaiV · 00512641 · 65509834 · 65509834 · 65509834
Commit 65509834 authored Jul 10, 2024 by YunaiV
Showing with 52 additions and 24 deletions

src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+26 -10

src/views/mall/promotion/kefu/components/tools/constants.ts
+1 -0

src/views/mall/promotion/kefu/index.vue
+25 -14

No files found.
--- a/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationBox.vue
 <template>
  <div class="kefu">
+    <!-- TODO @puhui999：item => conversation 会不会更容易理解 -->
    <div
      v-for="(item, index) in conversationList"
      :key="item.id"
@@ -9,7 +10,9 @@
      @contextmenu.prevent="rightClick($event as PointerEvent, item)"
    >
      <div class="flex justify-center items-center w-100%">
+        <!-- TODO style 换成 unocss -->
        <div class="flex justify-center items-center" style="width: 50px; height: 50px">
+          <!-- 头像 + 未读 -->
          <el-badge
            :hidden="item.adminUnreadMessageCount === 0"
            :max="99"
@@ -41,7 +44,8 @@
        </div>
      </div>
    </div>
-    <!-- 通过右击获取到的坐标定位 -->
+    <!-- 右键，进行操作（类似微信） -->
    <ul v-show="showRightMenu" :style="rightMenuStyle" class="right-menu-ul">
      <li
        v-show="!selectedConversation.adminPinned"
@@ -78,23 +82,30 @@ import { formatDate } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 defineOptions({ name: 'KeFuConversationBox' })
-const message = useMessage()
+const message = useMessage() // 消息弹窗
 const { replaceEmoji } = useEmoji()
-const activeConversationIndex = ref(-1) // 选中的会话
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
+const activeConversationIndex = ref(-1) // 选中的会话 index 位置 TODO @puhui999：这个可以改成 activeConversationId 么？因为一般是选中的对话编号
+/** 加载会话列表 */
 const getConversationList = async () => {
  conversationList.value = await KeFuConversationApi.getConversationList()
 }
 defineExpose({ getConversationList })
+/** 打开右侧的消息列表 */
 const emits = defineEmits<{
  (e: 'change', v: KeFuConversationRespVO): void
 }>()
-// 打开右侧消息
 const openRightMessage = (item: KeFuConversationRespVO, index: number) => {
  activeConversationIndex.value = index
  emits('change', item)
 }
-// 获得消息类型
+// TODO @puhui999：这个，是不是改成 getConversationDisplayText，获取会话的展示文本。然后，把文本消息类型，也统一处理（包括上面的 replaceEmoji）。这样，更统一。
+/** 获得消息类型 */
 const getContentType = computed(() => (lastMessageContentType: number) => {
  switch (lastMessageContentType) {
    case KeFuMessageContentTypeEnum.SYSTEM:
@@ -117,8 +128,9 @@ const getContentType = computed(() => (lastMessageContentType: number) => {
 //======================= 右键菜单 =======================
 const showRightMenu = ref(false) // 显示右键菜单
 const rightMenuStyle = ref<any>({}) // 右键菜单 Style
-const selectedConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 右键选中的会话对象
+const selectedConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 右键选中的会话对象 TODO puhui999：这个是不是叫 rightClickConversation 会好点。因为 selected 容易和选中的对话，定义上有点重叠
-// 右键菜单
+/** 打开右键菜单 */
 const rightClick = (mouseEvent: PointerEvent, item: KeFuConversationRespVO) => {
  selectedConversation.value = item
  // 显示右键菜单
@@ -128,11 +140,12 @@ const rightClick = (mouseEvent: PointerEvent, item: KeFuConversationRespVO) => {
    left: mouseEvent.clientX - 80 + 'px'
  }
 }
-// 关闭菜单
+/** 关闭右键菜单 */
 const closeRightMenu = () => {
  showRightMenu.value = false
 }
-// 置顶会话
+/** 置顶会话 */
 const updateConversationPinned = async (adminPinned: boolean) => {
  // 1. 会话置顶/取消置顶
  await KeFuConversationApi.updateConversationPinned({
@@ -144,7 +157,8 @@ const updateConversationPinned = async (adminPinned: boolean) => {
  closeRightMenu()
  await getConversationList()
 }
-// 删除会话
+/** 删除会话 */
 const deleteConversation = async () => {
  // 1. 删除会话
  await message.confirm('您确定要删除该会话吗？')
@@ -153,6 +167,8 @@ const deleteConversation = async () => {
  closeRightMenu()
  await getConversationList()
 }
+/** 监听右键菜单的显示状态，添加点击事件监听器 */
 watch(showRightMenu, (val) => {
  if (val) {
    document.body.addEventListener('click', closeRightMenu)

--- a/src/views/mall/promotion/kefu/components/tools/constants.ts
+++ b/src/views/mall/promotion/kefu/components/tools/constants.ts
@@ -9,6 +9,7 @@ export const KeFuMessageContentTypeEnum = {
  PRODUCT: 10, //  商品消息
  ORDER: 11 //  订单消息"
 }
 // Promotion 的 WebSocket 消息类型枚举类
 export const WebSocketMessageTypeConstants = {
  KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型

--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
 <template>
  <el-row :gutter="10">
+    <!-- TODO @puhui999：KeFuConversationBox => KeFuConversationList ；KeFuChatBox => KeFuMessageList -->
+    <!-- 会话列表 -->
    <el-col :span="8">
      <ContentWrap>
        <KeFuConversationBox ref="keFuConversationRef" @change="handleChange" />
      </ContentWrap>
    </el-col>
+    <!-- 会话详情（选中会话的消息列表） -->
    <el-col :span="16">
      <ContentWrap>
        <KeFuChatBox ref="keFuChatBoxRef" @change="getConversationList" />
@@ -21,15 +24,10 @@ import { getAccessToken } from '@/utils/auth'
 import { useWebSocket } from '@vueuse/core'
 defineOptions({ name: 'KeFu' })
-const message = useMessage()
-// 加载消息
+const message = useMessage() // 消息弹窗
-const keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
-const handleChange = (conversation: KeFuConversationRespVO) => {
-  keFuChatBoxRef.value?.getMessageList(conversation)
-}
-//======================= websocket start=======================
+// ======================= WebSocket start =======================
 const server = ref(
  (import.meta.env.VITE_BASE_URL + '/infra/ws/').replace('http', 'ws') +
    '?token=' +
@@ -38,9 +36,11 @@ const server = ref(
 /** 发起 WebSocket 连接 */
 const { data, close, open } = useWebSocket(server.value, {
-  autoReconnect: false,
+  autoReconnect: false, // TODO @puhui999：重连要加下
  heartbeat: true
 })
+/** 监听 WebSocket 数据 */
 watchEffect(() => {
  if (!data.value) {
    return
@@ -75,17 +75,28 @@ watchEffect(() => {
    console.error(error)
  }
 })
-//======================= websocket end=======================
+// ======================= WebSocket end =======================
-// 加载会话列表
+/** 加载会话列表 */
 const keFuConversationRef = ref<InstanceType<typeof KeFuConversationBox>>()
 const getConversationList = () => {
  keFuConversationRef.value?.getConversationList()
 }
+/** 加载指定会话的消息列表 */
+const keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
+const handleChange = (conversation: KeFuConversationRespVO) => {
+  keFuChatBoxRef.value?.getMessageList(conversation)
+}
+/** 初始化 */
 onMounted(() => {
  getConversationList()
  // 打开 websocket 连接
  open()
 })
+/** 销毁 */
 onBeforeUnmount(() => {
  // 关闭 websocket 连接
  close()
@@ -104,17 +115,17 @@ onBeforeUnmount(() => {
  height: 6px;
 }
-/*定义滚动条轨道 内阴影+圆角*/
+/* 定义滚动条轨道 内阴影+圆角 */
 ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
+  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 0px rgba(240, 240, 240, 0.5);
+  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
  background-color: rgba(240, 240, 240, 0.5);
 }
 </style>