smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化客服

Browse Source
This commit is contained in:
xingyu4j
2025-11-05 18:26:40 +08:00
parent 318f142fa7
commit dec939ee30
8 changed files with 71 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/web-antd/src/views/mall/promotion/kefu/modules/conversation-list.vue
View File

@@ -158,8 +158,8 @@ onBeforeUnmount(() => {
</script>
<template>
<Layout.Sider class="h-full bg-[var(--background)] pt-[5px]" width="260px">
<div class="my-[10px] font-bold text-[#999]">
<Layout.Sider class="bg-card h-full border-b-2 p-2" width="260px">
<div class="m-4 border-b border-gray-200 pb-4 font-bold">
会话记录({{ kefuStore.getConversationList.length }})
</div>
<div
@@ -168,12 +168,12 @@ onBeforeUnmount(() => {
:class="{
'bg-gray-500/50': item.id === activeConversationId,
}"
class="flex h-[60px] cursor-pointer items-center px-[10px]"
class="flex h-14 cursor-pointer items-center px-3"
@click="openRightMessage(item)"
@contextmenu.prevent="rightClick($event as PointerEvent, item)"
>
<div class="flex w-full items-center justify-center">
<div class="flex h-[50px] w-[50px] items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center">
<!-- 头像 + 未读 -->
<Badge
:hidden="item.adminUnreadMessageCount === 0"
@@ -183,12 +183,12 @@ onBeforeUnmount(() => {
<Avatar :src="item.userAvatar" alt="avatar" />
</Badge>
</div>
<div class="ml-[10px] w-full">
<div class="ml-3 w-full">
<div class="flex w-full items-center justify-between">
<span class="line-clamp-1 min-w-0 max-w-[60%]">{{
item.userNickname || 'null'
}}</span>
<span class="text-[13px] text-[#999]">
<span class="line-clamp-1 min-w-0 max-w-[60%]">
{{ item.userNickname || 'null' }}
</span>
<span class="text-sm text-gray-500">
{{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
</span>
</div>
@@ -200,7 +200,7 @@ onBeforeUnmount(() => {
item.lastMessageContent,
)
"
class="line-clamp-1 flex items-center text-[13px] text-[#999]"
class="line-clamp-1 flex items-center text-sm text-gray-500"
></div>
</div>
</div>
@@ -210,14 +210,14 @@ onBeforeUnmount(() => {
<ul
v-show="showRightMenu"
:style="rightMenuStyle"
class="absolute z-[1999] m-0 w-[130px] list-none rounded-xl bg-[hsl(var(--background))] p-[5px] shadow-md"
class="absolute z-[1999] m-0 w-[130px] list-none rounded-xl bg-[hsl(var(--background))] p-1 shadow-md"
>
<li
v-show="!rightClickConversation.adminPinned"
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="updateConversationPinnedFn(true)"
>
<IconifyIcon class="mr-[5px]" icon="ep:top" />
<IconifyIcon class="mr-1" icon="lucide:arrow-up-to-line" />
置顶会话
</li>
<li
@@ -225,21 +225,21 @@ onBeforeUnmount(() => {
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="updateConversationPinnedFn(false)"
>
<IconifyIcon class="mr-[5px]" icon="ep:bottom" />
<IconifyIcon class="mr-1" icon="lucide:arrow-down-from-line" />
取消置顶
</li>
<li
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="deleteConversationFn"
>
<IconifyIcon class="mr-[5px]" color="red" icon="ep:delete" />
<IconifyIcon class="mr-1" color="red" icon="lucide:trash-2" />
删除会话
</li>
<li
class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
@click.stop="closeRightMenu"
>
<IconifyIcon class="mr-[5px]" color="red" icon="ep:close" />
<IconifyIcon class="mr-1" color="red" icon="lucide:x" />
取消
</li>
</ul>

21
apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue
View File

@@ -22,7 +22,7 @@ import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
import OrderBrowsingHistory from './order-browsing-history.vue';
import ProductBrowsingHistory from './product-browsing-history.vue';
const activeTab = ref<'交易订单' | '会员信息' | '最近浏览'>('会员信息');
const activeTab = ref<string>('会员信息');
const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
@@ -140,10 +140,10 @@ async function getUserData() {
<template>
<Layout
class="relative w-[300px] bg-[var(--background)] after:absolute after:left-0 after:top-0 after:h-full after:w-[1px] after:scale-x-[0.3] after:bg-[var(--el-border-color)] after:content-['']"
class="bg-card relative w-72 after:absolute after:left-0 after:top-0 after:h-full after:w-[1px] after:scale-x-[0.3] after:bg-gray-200 after:content-['']"
>
<Layout.Header
class="relative flex items-center justify-around bg-[var(--background)] before:absolute before:bottom-0 before:left-0 before:h-[1px] before:w-full before:scale-y-[0.3] before:bg-[var(--el-border-color)] before:content-['']"
class="!bg-card relative flex items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-[1px] before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
>
<div
:class="{
@@ -176,7 +176,7 @@ async function getUserData() {
交易订单
</div>
</Layout.Header>
<Layout.Content class="relative m-0 h-full w-full p-[10px]">
<Layout.Content class="relative m-0 h-full w-full p-2">
<template v-if="!isEmpty(conversation)">
<div
v-loading="loading"
@@ -190,11 +190,20 @@ async function getUserData() {
</template>
</BasicInfo>
<!-- 账户信息 -->
<Card class="mt-10px h-full" shadow="never">
<Card
class="mt-2 h-full"
:body-style="{ padding: '16px' }"
shadow="never"
>
<template #title>
<span class="text-sm font-bold">账户信息</span>
</template>
<AccountInfo :column="1" :user="user" :wallet="wallet" />
<AccountInfo
:column="1"
:user="user"
:wallet="wallet"
mode="kefu"
/>
</Card>
</div>
<div

2
apps/web-antd/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue
View File

@@ -53,6 +53,6 @@ defineExpose({ getHistoryList, loadMore });
:spu-id="item.spuId"
:stock="item.stock"
:title="item.spuName"
class="mb-10px"
class="mb-2.5"
/>
</template>

38
apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue
View File

@@ -255,7 +255,7 @@ async function handleOldMessage() {
function showTime(item: MallKefuMessageApi.Message, index: number) {
if (unref(messageList.value)[index + 1]) {
const dateString = dayjs(
unref(messageList.value)[index + 1].createTime,
unref(messageList.value)[index + 1]!.createTime,
).fromNow();
return dateString !== dayjs(unref(item).createTime).fromNow();
}
@@ -286,21 +286,21 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
:key="item.id"
class="w-full"
>
<div class="mb-[20px] flex items-center justify-center">
<div class="mb-5 flex items-center justify-center">
<!-- 日期 -->
<div
v-if="
item.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
showTime(item, index)
"
class="w-fit rounded-lg bg-black/10 px-[5px] text-[10px] text-white"
class="w-fit rounded-lg bg-black/10 px-2 text-xs text-white"
>
{{ formatDate(item.createTime) }}
</div>
<!-- 系统消息 -->
<div
v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
class="w-fit rounded-lg bg-black/10 px-[5px] text-[10px] text-white"
class="w-fit rounded-lg bg-black/10 px-2 text-xs text-white"
>
{{ item.content }}
</div>
@@ -313,22 +313,22 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
? 'justify-end'
: '',
]"
class="mb-[20px] flex w-full"
class="mb-5 flex w-full"
>
<Avatar
v-if="item.senderType === UserTypeEnum.MEMBER"
:src="conversation.userAvatar"
alt="avatar"
class="h-[60px] w-[60px]"
class="h-14 w-14"
/>
<div
:class="{
'w-auto max-w-[50%] px-[10px] py-[5px] font-medium text-[#414141] transition-all duration-200 hover:scale-105':
'w-auto max-w-[50%] px-2 py-1 font-medium text-gray-500 transition-all duration-200 hover:scale-105':
KeFuMessageContentTypeEnum.TEXT === item.contentType,
'ml-[10px] mt-[3px] rounded-bl-[10px] rounded-br-[10px] rounded-tr-[10px] bg-white':
'rounded-bl-2 rounded-br-2 rounded-tr-2 ml-2 mt-1 bg-white':
KeFuMessageContentTypeEnum.TEXT === item.contentType &&
item.senderType === UserTypeEnum.MEMBER,
'mr-[10px] mt-[3px] rounded-bl-[10px] rounded-br-[10px] rounded-tl-[10px] bg-[rgb(206_223_255)]':
'rounded-bl-2 rounded-br-2 rounded-tl-2 mr-2 mt-1 bg-blue-50':
KeFuMessageContentTypeEnum.TEXT === item.contentType &&
item.senderType === UserTypeEnum.ADMIN,
}"
@@ -355,7 +355,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
getMessageContent(item).picUrl || item.content,
]"
:src="getMessageContent(item).picUrl || item.content"
class="mx-[10px] !w-[200px]"
class="mx-2 !w-52"
fit="contain"
preview-teleported
/>
@@ -370,7 +370,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
:spu-id="getMessageContent(item).spuId"
:stock="getMessageContent(item).stock"
:title="getMessageContent(item).spuName"
class="mx-[10px] max-w-[300px]"
class="mx-2 max-w-80"
/>
</MessageItem>
<!-- 订单消息 -->
@@ -378,7 +378,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
<OrderItem
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item"
class="mx-[10px] max-w-full"
class="mx-2 max-w-full"
/>
</MessageItem>
</div>
@@ -393,26 +393,28 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
</div>
<div
v-show="showNewMessageTip"
class="absolute bottom-[35px] right-[35px] z-10 flex cursor-pointer items-center rounded-[30px] bg-[var(--background)] p-[10px] text-xs shadow-md"
class="bg-card absolute bottom-9 right-9 z-10 flex cursor-pointer items-center rounded-full p-2.5 text-xs shadow-md"
@click="handleToNewMessage"
>
<span>有新消息</span>
<IconifyIcon class="ml-5px" icon="ep:bottom" />
<IconifyIcon class="ml-1" icon="lucide:arrow-down-from-line" />
</div>
</Layout.Content>
<Layout.Footer class="!bg-card m-0 flex flex-col p-0">
<div class="flex h-[44px] w-full items-center">
<Layout.Footer
class="!bg-card m-0 flex flex-col border-t-2 border-gray-200 p-0"
>
<div class="flex h-11 w-full items-center">
<EmojiSelectPopover @select-emoji="handleEmojiSelect" />
<PictureSelectUpload
class="ml-[15px] mt-[3px] cursor-pointer"
class="ml-4 mt-1 cursor-pointer"
@send-picture="handleSendPicture"
/>
</div>
<Textarea
v-model:value="message"
:rows="6"
class="border-none"
placeholder="输入消息，Enter发送，Shift+Enter换行"
style="border-style: none"
@press-enter="handleSendMessage"
/>
</Layout.Footer>

4
apps/web-antd/src/views/mall/promotion/kefu/modules/message/message-item.vue
View File

@@ -14,9 +14,9 @@ defineProps<{
<div
:class="[
message.senderType === UserTypeEnum.MEMBER
? `ml-[10px]`
? `ml-2`
: message.senderType === UserTypeEnum.ADMIN
? `mr-[10px]`
? `mr-2`
: '',
]"
>

24
apps/web-antd/src/views/mall/promotion/kefu/modules/message/order-item.vue
View File

@@ -34,19 +34,19 @@ function openDetail(id: number) {
*/
function formatOrderColor(order: any) {
if (order.status === 0) {
return 'text-[#999]';
return 'text-gray-500';
}
if (
order.status === 10 ||
order.status === 20 ||
(order.status === 30 && !order.commentStatus)
) {
return 'text-[#faad14]';
return 'text-orange-500';
}
if (order.status === 30 && order.commentStatus) {
return 'text-[#52c41a]';
return 'text-green-500';
}
return 'text-[#ff3000]';
return 'text-red-500';
}
/**
@@ -81,10 +81,10 @@ function formatOrderStatus(order: any) {
<div
v-if="isObject(getMessageContent)"
:key="getMessageContent.id"
class="mb-[10px] rounded-[10px] bg-gray-500/30 p-[10px]"
class="mb-2.5 rounded-md bg-gray-500/30 p-2.5"
>
<div class="flex h-[28px] items-center justify-between px-[5px] font-bold">
<div class="text-[13px]">
<div class="flex h-7 items-center justify-between px-1.5 font-bold">
<div class="text-sm">
订单号：
<span
class="cursor-pointer hover:text-[var(--left-menu-bg-active-color)] hover:underline"
@@ -95,7 +95,7 @@ function formatOrderStatus(order: any) {
</div>
<div
:class="formatOrderColor(getMessageContent)"
class="text-[13px] font-bold"
class="text-sm font-bold"
>
{{ formatOrderStatus(getMessageContent) }}
</div>
@@ -103,7 +103,7 @@ function formatOrderStatus(order: any) {
<div
v-for="item in getMessageContent.items"
:key="item.id"
class="border-b"
class="border-b border-gray-200"
>
<ProductItem
:num="item.count"
@@ -116,12 +116,12 @@ function formatOrderStatus(order: any) {
:title="item.spuName"
/>
</div>
<div class="flex justify-end pr-[5px] pt-[10px] font-bold">
<div class="flex justify-end pr-1.5 pt-2.5 font-bold">
<div class="flex items-center">
<div class="text-[13px] leading-normal">
<div class="text-sm leading-normal">
共 {{ getMessageContent?.productCount }} 件商品,总金额:
</div>
<div class="font-[OPPOSANS] text-[13px] leading-normal">
<div class="text-sm font-medium leading-normal">
￥{{ fenToYuan(getMessageContent?.payPrice) }}
</div>
</div>

6
apps/web-antd/src/views/mall/promotion/kefu/modules/message/product-item.vue
View File

@@ -42,11 +42,11 @@ function openDetail(spuId: number) {
<template>
<div
class="mb-[10px] flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-[10px]"
class="mb-2.5 flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-2.5"
@click.stop="openDetail(spuId)"
>
<!-- 左侧商品图片-->
<div class="mr-6 w-[70px]">
<div class="mr-2 w-16">
<Image
:initial-index="0"
:preview-src-list="[picUrl]"
@@ -65,7 +65,7 @@ function openDetail(spuId: number) {
<span>销量: {{ salesCount || 0 }}</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[#ff3000]">￥{{ fenToYuan(price) }}</span>
<span class="text-red-500">￥{{ fenToYuan(price) }}</span>
<Button size="small" text type="primary">详情</Button>
</div>
</div>

6
apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
View File

@@ -137,7 +137,7 @@ watch(
/>
<IconifyIcon
v-show="!disabled"
icon="ep:circle-close-filled"
icon="lucide:x"
class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
@click="handleRemoveActivity(index)"
/>
@@ -148,10 +148,10 @@ watch(
<!-- 添加按钮 -->
<Tooltip v-if="canAdd" title="选择活动">
<div
class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
@click="openPointActivityTableSelect"
>
<IconifyIcon icon="ep:plus" class="text-lg text-gray-400" />
<IconifyIcon icon="lucide:plus" class="text-lg text-gray-400" />
</div>
</Tooltip>
</div>