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

Author: YunaiV

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

@@ -1,5 +1,6 @@
 <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)

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', // 客服消息类型

src/views/mall/promotion/kefu/index.vue

@@ -1,10 +1,13 @@
 <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 keFuChatBoxRef = ref<InstanceType<typeof KeFuChatBox>>()
-const handleChange = (conversation: KeFuConversationRespVO) => {
-  keFuChatBoxRef.value?.getMessageList(conversation)
-}
+const message = useMessage() // 消息弹窗
 
-//======================= 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>