review：【antd】【mall】客服模块

apps/web-antd/src/views/mall/promotion/kefu/components/KeFuConversationList.vue

@@ -114,7 +114,7 @@ async function updateConversationPinned(adminPinned: boolean) {
     id: rightClickConversation.value.id,
     adminPinned,
   });
-  message.notifySuccess(adminPinned ? '置顶成功' : '取消置顶成功');
+  message.success(adminPinned ? '置顶成功' : '取消置顶成功');
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu();
   await kefuStore.updateConversation(rightClickConversation.value.id);
@@ -123,6 +123,7 @@ async function updateConversationPinned(adminPinned: boolean) {
 /** 删除会话 */
 async function deleteConversation() {
   // 1. 删除会话
+  // TODO @jave：使用全局的 confirm，这样 ele 和 antd 可以相对复用；
   await message.confirm('您确定要删除该会话吗？');
   await KeFuConversationApi.deleteConversation(rightClickConversation.value.id);
   // 2. 关闭右键菜单，更新会话列表
@@ -140,10 +141,12 @@ watch(showRightMenu, (val) => {
 });
 
 const timer = ref<any>();
+
 /** 初始化 */
 onMounted(() => {
   timer.value = setInterval(calculationLastMessageTime, 1000 * 10); // 十秒计算一次
 });
+
 /** 组件卸载前 */
 onBeforeUnmount(() => {
   clearInterval(timer.value);
@@ -229,6 +232,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @jave：看看哪些可以用 tailwind 简化掉 */
 .kefu {
   background-color: var(--app-content-bg-color);
 

apps/web-antd/src/views/mall/promotion/kefu/components/KeFuMessageList.vue

@@ -52,7 +52,9 @@ const kefuStore = useMallKefuStore(); // 客服缓存
 const getMessageContent = computed(
   () => (item: any) => jsonParse(item.content),
 );
+
 /** 获得消息列表 */
+// TODO @jave：idea 的 linter 报错，处理下；
 async function getMessageList() {
   const res = await KeFuMessageApi.getKeFuMessageList(queryParams);
   if (isEmpty(res)) {
@@ -135,7 +137,7 @@ async function getNewMessageList(val: MallKefuMessageApi.Message) {
 }
 defineExpose({ getNewMessageList, refreshMessageList });
 
-// 是否显示聊天区域
+/** 是否显示聊天区域 */
 function showKeFuMessageList() {
   return !isEmpty(conversation.value);
 }
@@ -253,12 +255,7 @@ async function handleOldMessage() {
     oldPageHeight;
 }
 
-/**
- * 是否显示时间
- *
- * @param {*} item - 数据
- * @param {*} index - 索引
- */
+/** 是否显示时间 */
 function showTime(item: MallKefuMessageApi.Message, index: number) {
   if (unref(messageList.value)[index + 1]) {
     const dateString = dayjs(
@@ -425,6 +422,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @jave：看看哪些可以用 tailwind 简化掉 */
 .kefu {
   position: relative;
   width: calc(100% - 300px - 260px);

apps/web-antd/src/views/mall/promotion/kefu/components/index.ts

@@ -1,3 +1,6 @@
 export { default as KeFuConversationList } from './KeFuConversationList.vue';
 export { default as KeFuMessageList } from './KeFuMessageList.vue';
 export { default as MemberInfo } from './member/MemberInfo.vue';
+
+// TODO @jawe：components =》modules；在 vben 里，modules 是给自己用的，把一个大 vue 拆成 n 个小 vue；components 是给别的模块使用的；
+// TODO @jawe：1）组件名小写，类似 conversation-list.vue；2）KeFu 开头可以去掉，因为已经是当前模块下，不用重复拼写；

apps/web-antd/src/views/mall/promotion/kefu/components/member/MemberInfo.vue

@@ -6,6 +6,7 @@ import { computed, nextTick, ref } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
+// TODO @jawe：debounce 是不是还是需要的哈；应该有 2 处需要；可以微信沟通哈；
 // import { debounce } from 'lodash-es'
 import { useDebounceFn } from '@vueuse/core';
 import { Card, Empty, message } from 'ant-design-vue';
@@ -100,6 +101,7 @@ const handleScroll = useDebounceFn(() => {
 }, 200);
 
 /** 查询用户钱包信息 */
+// TODO @jawe：idea 的导入报错；需要看下；
 const WALLET_INIT_DATA = {
   balance: 0,
   totalExpense: 0,
@@ -137,6 +139,7 @@ async function getUserData() {
 </script>
 
 <template>
+  <!-- TODO @jave：from xingyu：a- 换成大写的方式，另外组件没有进行导入，其他页面也有这个问题 -->
   <a-layout class="kefu">
     <a-layout-header class="kefu-header">
       <div
@@ -205,6 +208,7 @@ async function getUserData() {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @jave：看看哪些可以用 tailwind 简化掉 */
 .kefu {
   position: relative;
   width: 300px !important;

apps/web-antd/src/views/mall/promotion/kefu/components/member/OrderBrowsingHistory.vue

@@ -5,7 +5,7 @@ import { computed, reactive, ref } from 'vue';
 
 import { getOrderPage } from '#/api/mall/trade/order';
 import OrderItem from '#/views/mall/promotion/kefu/components/message/OrderItem.vue';
-// import { concat } from 'lodash-es'
+
 defineOptions({ name: 'OrderBrowsingHistory' });
 
 const list = ref<any>([]); // 列表
@@ -39,7 +39,6 @@ async function loadMore() {
   queryParams.pageNo += 1;
   const res = await getOrderPage(queryParams);
   total.value = res.total;
-  // 使用展开运算符替代 concat 方法
   list.value = [...list.value, ...res.list];
 }
 defineExpose({ getHistoryList, loadMore });

apps/web-antd/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue

@@ -5,7 +5,6 @@ import { computed, reactive, ref } from 'vue';
 
 import { getBrowseHistoryPage } from '#/api/mall/product/history';
 import ProductItem from '#/views/mall/promotion/kefu/components/message/ProductItem.vue';
-// import { concat } from 'lodash-es'
 
 defineOptions({ name: 'ProductBrowsingHistory' });
 
@@ -41,7 +40,6 @@ async function loadMore() {
   queryParams.pageNo += 1;
   const res = await getBrowseHistoryPage(queryParams);
   total.value = res.total;
-  // 使用展开运算符替代 concat 方法
   list.value = [...list.value, ...res.list];
 }
 defineExpose({ getHistoryList, loadMore });
@@ -60,5 +58,3 @@ defineExpose({ getHistoryList, loadMore });
     class="mb-10px"
   />
 </template>
-
-<style lang="scss" scoped></style>

apps/web-antd/src/views/mall/promotion/kefu/components/message/MessageItem.vue

@@ -3,14 +3,15 @@ import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
 
 import { UserTypeEnum } from '@vben/constants';
 
+/** 消息组件 */
 defineOptions({ name: 'MessageItem' });
+
 defineProps<{
   message: MallKefuMessageApi.Message;
 }>();
 </script>
 
 <template>
-  <!-- 消息组件 -->
   <div
     :class="[
       message.senderType === UserTypeEnum.MEMBER

apps/web-antd/src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -132,6 +132,7 @@ function formatOrderStatus(order: any) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @jave：看看哪些可以用 tailwind 简化掉 */
 .order-list-card-box {
   padding: 10px;
   background-color: rgb(128 128 128 / 30%); // 透明色，暗黑模式下也能体现

apps/web-antd/src/views/mall/promotion/kefu/components/message/ProductItem.vue

@@ -76,6 +76,7 @@ function openDetail(spuId: number) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @jawe：下面的，看看要不要用 tailwind 简化，ai 友好； */
 .button {
   padding: 5px 10px;
   color: white;

apps/web-antd/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue

@@ -13,6 +13,7 @@ import { useEmoji } from './emoji';
 defineOptions({ name: 'EmojiSelectPopover' });
 
 /** 选择 emoji 表情 */
+// TODO @jawe：这里有 linter 告警，看看要不要处理下；
 const emits = defineEmits<{
   (e: 'selectEmoji', v: Emoji);
 }>();

apps/web-antd/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue

@@ -1,6 +1,6 @@
 <!-- 图片选择 -->
 <script lang="ts" setup>
-import message from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import * as FileApi from '#/api/infra/file';
 import Picture from '#/views/mall/promotion/kefu/asserts/picture.svg';
@@ -11,23 +11,17 @@ defineOptions({ name: 'PictureSelectUpload' });
 const emits = defineEmits<{
   (e: 'sendPicture', v: string): void;
 }>();
-const selectAndUpload = async () => {
+
+async function selectAndUpload() {
   const files: any = await getFiles();
   message.success('图片发送中请稍等。。。');
+  // TODO @jawe：直接使用 updateFile，不通过 FileApi。vben 这里的规范；
+  // TODO @jawe：这里的上传，看看能不能替换成 export function useUpload(directory?: string) {；它支持前端直传，更统一；
   const res = await FileApi.updateFile({ file: files[0].file });
   emits('sendPicture', res.data);
-};
+}
 
-/**
- * 唤起文件选择窗口，并获取选择的文件
- *
- * @param {object} options - 配置选项
- * @param {boolean} [options.multiple] - 是否支持多选
- * @param {string} [options.accept] - 文件上传格式限制
- * @param {number} [options.limit] - 单次上传最大文件数
- * @param {number} [options.fileSize] - 单个文件大小限制（单位：MB）
- * @returns {Promise<Array>} 选择的文件列表，每个文件带有一个uid
- */
+/** 唤起文件选择窗口，并获取选择的文件 */
 async function getFiles(options = {}) {
   const { multiple, accept, limit, fileSize } = {
     multiple: true,
@@ -65,7 +59,6 @@ async function getFiles(options = {}) {
         reject(new Error(`超出上传数量限制，最多允许 ${limit} 个文件`));
         return;
       }
-
       // 判断是否超出上传文件大小限制
       const overSizedFiles = filesArray.filter(
         (file: File) => file.size / 1024 ** 2 > fileSize,
@@ -89,8 +82,7 @@ async function getFiles(options = {}) {
 
 <template>
   <div>
+    <!-- TODO @jawe：看看能不能换成 antd 的 Image 组件 -->
     <img :src="Picture" class="h-[35px] w-[35px]" @click="selectAndUpload" />
   </div>
 </template>
-
-<style lang="scss" scoped></style>

apps/web-antd/src/views/mall/promotion/kefu/components/tools/constants.ts

@@ -1,4 +1,4 @@
-// 客服消息类型枚举类
+/** 客服消息类型枚举类 */
 export const KeFuMessageContentTypeEnum = {
   TEXT: 1, // 文本消息
   IMAGE: 2, // 图片消息
@@ -10,7 +10,7 @@ export const KeFuMessageContentTypeEnum = {
   ORDER: 11, //  订单消息"
 };
 
-// Promotion 的 WebSocket 消息类型枚举类
+/** Promotion 的 WebSocket 消息类型枚举类 */
 export const WebSocketMessageTypeConstants = {
   KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
   KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change', // 客服消息管理员已读

apps/web-antd/src/views/mall/promotion/kefu/components/tools/emoji.ts

@@ -101,11 +101,7 @@ export const useEmoji = () => {
     return newData;
   };
 
-  /**
-   * 获得所有表情
-   *
-   * @return 表情列表
-   */
+  /** 获得所有表情 */
   function getEmojiList(): Emoji[] {
     return emojiList.map((item) => ({
       url: getEmojiFileByName(item.name),

apps/web-antd/src/views/mall/promotion/kefu/index.vue

@@ -5,7 +5,7 @@ import { Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
 import { useWebSocket } from '@vueuse/core';
-import message from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useMallKefuStore } from '#/store/mall/kefu';
 
@@ -80,6 +80,7 @@ watch(
 /** 加载指定会话的消息列表 */
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>();
 const memberInfoRef = ref<InstanceType<typeof MemberInfo>>();
+// TODO @jawe：这里没导入
 const handleChange = (conversation: KeFuConversationRespVO) => {
   keFuChatBoxRef.value?.getNewMessageList(conversation);
   memberInfoRef.value?.initHistory(conversation);
@@ -88,7 +89,7 @@ const handleChange = (conversation: KeFuConversationRespVO) => {
 const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>();
 /** 初始化 */
 onMounted(() => {
-  /** 加载会话列表 */
+  // 加载会话列表
   kefuStore.setConversationList().then(() => {
     keFuConversationRef.value?.calculationLastMessageTime();
   });
@@ -105,6 +106,7 @@ onBeforeUnmount(() => {
 
 <template>
   <Page>
+    <!-- TODO @jawe：style 使用 tailwindcss，AI 友好； -->
     <a-layout-content class="kefu-layout hrow">
       <!-- 会话列表 -->
       <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />