zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 在线客服和详细中心整改

Browse Source
This commit is contained in:
Ironsp
2026-10-13 16:08:55 +08:00
parent 367380e44c
commit a067fd8357
10 changed files with 381 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/message/cpns/MessageItem.vue
View File

@@ -7,12 +7,18 @@ interface Props {
defineProps<Props>() defineProps<Props>()
const emit = defineEmits<{ view: [id: string] }>() const emit = defineEmits<{ view: [message: Message] }>()
const emojiMap: Record<MessageType, string> = { const LABEL_MAP: Record<MessageType, string> = {
在线客服: '💬', 在线客服: '客',
状态通知: '📢', 状态通知: '态',
系统通知: '🔔', 系统通知: '系',
}
const TONE_MAP: Record<MessageType, string> = {
在线客服: 'is-service',
状态通知: 'is-status',
系统通知: 'is-system',
} }
</script> </script>
@@ -22,10 +28,17 @@ const emojiMap: Record<MessageType, string> = {
:class="{ 'is-unread': !message.isRead }" :class="{ 'is-unread': !message.isRead }"
role="button" role="button"
tabindex="0" tabindex="0"
@click="emit('view', message.id)" @click="emit('view', message)"
@keydown.enter="emit('view', message.id)" @keydown.enter="emit('view', message)"
> >
<span class="message-item__emoji">{{ emojiMap[message.type] }}</span> <span
class="message-item__icon"
:class="TONE_MAP[message.type]"
aria-hidden="true"
>
{{ LABEL_MAP[message.type] }}
<span v-if="!message.isRead" class="message-item__dot" aria-label="未读" />
</span>
<div class="message-item__body"> <div class="message-item__body">
<div class="message-item__head"> <div class="message-item__head">
<span class="message-item__title">{{ message.title }}</span> <span class="message-item__title">{{ message.title }}</span>
@@ -34,18 +47,17 @@ const emojiMap: Record<MessageType, string> = {
<p class="message-item__summary"> <p class="message-item__summary">
{{ message.summary }} {{ message.summary }}
</p> </p>
<span class="message-item__type">{{ message.type }}</span>
</div> </div>
<span v-if="!message.isRead" class="message-item__dot" aria-label="未读" />
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.message-item { .message-item {
position: relative;
.flex(row, flex-start, flex-start); .flex(row, flex-start, flex-start);
gap: 16px; gap: @spacing-base;
min-height: 86px; min-height: 88px;
padding: 19px 29px; padding: @spacing-base @spacing-lg;
background: @white; background: @white;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
@@ -55,20 +67,38 @@ const emojiMap: Record<MessageType, string> = {
background: @bg-color-light; background: @bg-color-light;
} }
&__emoji { &__icon {
position: relative;
flex-shrink: 0; flex-shrink: 0;
.flex(row, center); .flex(row, center);
width: 42px; width: 40px;
height: 42px; height: 40px;
border-radius: @radius-round; border-radius: @radius-round;
background: @message-item-icon; background: @primary-light;
font-size: 20px; color: @primary-strong;
font-size: @font-size-sm;
font-weight: 600;
line-height: 1; line-height: 1;
&.is-service {
background: @primary-light;
color: @primary-strong;
}
&.is-status {
background: fade(@success-color, 12%);
color: @success-color;
}
&.is-system {
background: fade(@warning-color, 14%);
color: @warning-color;
}
} }
&__body { &__body {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 8px; gap: @spacing-xs;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
@@ -80,33 +110,44 @@ const emojiMap: Record<MessageType, string> = {
} }
&__title { &__title {
font-size: 14px; font-size: @font-size-base;
font-weight: 600; font-weight: 500;
line-height: 20px; line-height: 1.4;
color: @finance-ink; color: @heading-color;
.ellipsis(); .ellipsis();
} }
&__time { &__time {
flex-shrink: 0; flex-shrink: 0;
font-size: 12px; font-size: @font-size-xs;
line-height: 20px; line-height: 1.4;
color: @message-tabs-text; color: @text-color-secondary;
} }
&__summary { &__summary {
font-size: 12px; margin: 0;
line-height: 18px; font-size: @font-size-sm;
color: @message-tabs-text; line-height: 1.5;
color: @text-color-secondary;
.ellipsis(); .ellipsis();
} }
&__type {
width: fit-content;
padding: 0 @spacing-sm;
border-radius: @radius-round;
background: @bg-color-light;
color: @text-color-secondary;
font-size: @font-size-xs;
line-height: 20px;
}
&__dot { &__dot {
position: absolute; position: absolute;
top: 21px; top: 0;
left: 60px; right: 0;
width: 14px; width: 8px;
height: 14px; height: 8px;
border: 2px solid @white; border: 2px solid @white;
border-radius: @radius-round; border-radius: @radius-round;
background: @message-tabs-badge; background: @message-tabs-badge;

5
src/views/message/cpns/MessageList.vue
View File

@@ -8,7 +8,7 @@ interface Props {
defineProps<Props>() defineProps<Props>()
const emit = defineEmits<{ view: [id: string] }>() const emit = defineEmits<{ view: [message: Message] }>()
</script> </script>
<template> <template>
@@ -33,11 +33,12 @@ const emit = defineEmits<{ view: [id: string] }>()
gap: 0; gap: 0;
margin-top: 0; margin-top: 0;
padding: 0; padding: 0;
border: 1px solid @border-color;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
overflow: hidden; overflow: hidden;
.message-item + .message-item { :deep(.message-item + .message-item) {
border-top: 1px solid @border-color; border-top: 1px solid @border-color;
} }

22
src/views/message/cpns/MessageTabs.vue
View File

@@ -44,6 +44,7 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
gap: 2px; gap: 2px;
min-height: 0; min-height: 0;
padding: @spacing-sm 0; padding: @spacing-sm 0;
border: 1px solid @border-color;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
box-sizing: border-box; box-sizing: border-box;
@@ -76,17 +77,22 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
&__count { &__count {
flex-shrink: 0; flex-shrink: 0;
min-width: 15px; min-width: 18px;
height: 15px; height: 18px;
padding: 0 4px; padding: 0 @spacing-xs;
border-radius: @radius-round; border-radius: @radius-round;
background: @message-tabs-badge; background: @bg-color-light;
color: @white; color: @text-color-secondary;
font-size: 10px; font-size: @font-size-xs;
font-weight: 400; font-weight: 500;
line-height: 15px; line-height: 18px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
} }
&__tab.is-active &__count {
background: fade(@primary-strong, 12%);
color: @primary-strong;
}
} }
</style> </style>

165
src/views/message/detail.vue
View File

@@ -1,7 +1,7 @@
<!-- 页面：消息详情（MessageDetail） --> <!-- 页面：消息详情（MessageDetail） -->
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, watch } from 'vue' import { computed, onMounted, watch } from 'vue'
import { ElButton, ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { PageHead } from '@/components' import { PageHead } from '@/components'
import { useMessageStore } from '@/stores/modules/message' import { useMessageStore } from '@/stores/modules/message'
@@ -42,7 +42,7 @@ onMounted(load)
slogan="查看站内消息完整内容与附件资料" slogan="查看站内消息完整内容与附件资料"
/> />
<div class="message-detail__wrap"> <div class="container message-detail__wrap">
<nav class="message-detail__breadcrumb"> <nav class="message-detail__breadcrumb">
<RouterLink to="/message" class="message-detail__breadcrumb-link"> <RouterLink to="/message" class="message-detail__breadcrumb-link">
消息中心 消息中心
@@ -53,12 +53,15 @@ onMounted(load)
<template v-if="item"> <template v-if="item">
<article class="message-detail__card"> <article class="message-detail__card">
<header class="message-detail__head">
<h1 class="message-detail__title"> <h1 class="message-detail__title">
{{ item.title }} {{ item.title }}
</h1> </h1>
<p class="message-detail__time"> <p class="message-detail__time">
发布时间：{{ item.publishTime }} 发布时间：{{ item.publishTime }}
</p> </p>
</header>
<div class="message-detail__content"> <div class="message-detail__content">
{{ item.content }} {{ item.content }}
</div> </div>
@@ -80,32 +83,33 @@ onMounted(load)
</span> </span>
</div> </div>
<div class="message-detail__file-actions"> <div class="message-detail__file-actions">
<el-button <button
type="button"
class="message-detail__file-btn" class="message-detail__file-btn"
link
@click="onPreview" @click="onPreview"
> >
预览 预览
</el-button> </button>
<el-button <button
type="button"
class="message-detail__file-btn" class="message-detail__file-btn"
link
@click="onDownload" @click="onDownload"
> >
下载 下载
</el-button> </button>
</div> </div>
</li> </li>
</ul> </ul>
</section> </section>
<div class="message-detail__actions"> <div class="message-detail__actions">
<el-button <button
type="button"
class="message-detail__back" class="message-detail__back"
@click="onBack" @click="onBack"
> >
返回 返回
</el-button> </button>
</div> </div>
</article> </article>
</template> </template>
@@ -127,165 +131,176 @@ onMounted(load)
background: @bg-color; background: @bg-color;
&__wrap { &__wrap {
width: 100%; padding-top: @spacing-lg;
max-width: @container-width; padding-right: @home-gutter;
margin: 0 auto; padding-left: @home-gutter;
padding: @spacing-lg @page-gutter 0;
box-sizing: border-box; box-sizing: border-box;
@media (max-width: 1600px) {
padding-right: @spacing-lg;
padding-left: @spacing-lg;
}
} }
&__breadcrumb { &__breadcrumb {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: 4px; gap: @spacing-xs;
min-height: 40px; margin-bottom: @spacing-base;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 1.5; line-height: 1.5;
color: @project-muted; color: @text-color-secondary;
} }
&__breadcrumb-link { &__breadcrumb-link {
color: @project-muted; color: @text-color-secondary;
&:hover { &:hover {
color: @primary-strong; color: @primary-strong;
} }
} }
&__breadcrumb-sep {
color: @project-muted;
}
&__breadcrumb-current { &__breadcrumb-current {
color: @message-tabs-text; color: @heading-color;
font-weight: 500; font-weight: 500;
} }
&__card { &__card {
padding: @spacing-xl; padding: @spacing-xl;
border: 1px solid @border-color;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
box-sizing: border-box; box-sizing: border-box;
} }
&__head {
padding-bottom: @spacing-base;
border-bottom: 1px solid @border-color;
}
&__title { &__title {
margin: 0;
font-size: @font-size-xl; font-size: @font-size-xl;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;
color: @finance-ink; color: @heading-color;
text-align: left;
} }
&__time { &__time {
margin-top: 14px; margin: @spacing-sm 0 0;
font-size: 12px; font-size: @font-size-sm;
line-height: 18px; line-height: 1.4;
color: @project-muted; color: @text-color-secondary;
text-align: center;
} }
&__content { &__content {
margin-top: 16px; margin-top: @spacing-lg;
background: transparent; color: @text-color;
color: @message-tabs-text; font-size: @font-size-base;
font-size: 13px; line-height: 1.8;
line-height: 2.8; text-align: left;
text-align: center;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
} }
&__attachments { &__attachments {
margin-top: 24px; margin-top: @spacing-xl;
&-title {
margin-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: @project-muted;
} }
&__attachments-title {
margin: 0 0 @spacing-base;
font-size: @font-size-sm;
font-weight: 600;
color: @heading-color;
} }
&__file-list { &__file-list {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 10px; gap: @spacing-sm;
margin: 0;
padding: 0;
} }
&__file { &__file {
.flex(row, space-between, center); .flex(row, space-between, center);
gap: @spacing-base; gap: @spacing-base;
width: 254px; width: 100%;
max-width: 100%; max-width: 520px;
padding: 15px 12px 15px 19px; padding: @spacing-base;
border-radius: @radius-sm; border: 1px solid @border-color;
background: @finance-row-bg; border-radius: @radius-base;
background: @bg-color-light;
list-style: none; list-style: none;
box-sizing: border-box; box-sizing: border-box;
} }
&__file-info { &__file-info {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
gap: 4px; gap: @spacing-xs;
min-width: 0; min-width: 0;
} }
&__file-name { &__file-name {
font-size: 12px; font-size: @font-size-sm;
font-weight: 700; font-weight: 600;
color: @finance-ink; color: @heading-color;
.ellipsis(); .ellipsis();
} }
&__file-meta { &__file-meta {
font-size: 11px; font-size: @font-size-xs;
color: @project-muted; color: @text-color-secondary;
.ellipsis(); .ellipsis();
} }
&__file-actions { &__file-actions {
.flex(column, center, center); .flex(row, flex-end, center);
gap: 2px; gap: @spacing-sm;
flex-shrink: 0; flex-shrink: 0;
} }
&__file-btn { &__file-btn {
padding: 0; height: 28px;
font-size: 12px; padding: 0 @spacing-sm;
font-weight: 400; border: none;
color: @message-tabs-text; border-radius: @radius-round;
background: transparent;
color: @primary-strong;
font-size: @font-size-sm;
cursor: pointer;
&:hover { &:hover {
color: @primary-strong; background: fade(@primary-strong, 8%);
} }
} }
&__actions { &__actions {
.flex(row, flex-end); .flex(row, flex-end);
margin-top: 40px; margin-top: @spacing-xl;
} }
&__back { &__back {
width: 94px; min-width: 88px;
height: 34px; height: 36px;
padding: 0; padding: 0 @spacing-lg;
border-color: @primary-strong; border: none;
border-radius: @radius-sm; border-radius: @radius-round;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 13px; font-size: @font-size-sm;
font-weight: 500; font-weight: 500;
cursor: pointer;
transition: background 0.2s;
&:hover { &:hover {
border-color: @primary-strong; background: @primary-hover;
background: @primary-strong;
color: @white;
} }
} }
&__empty { &__empty {
padding: 80px 0; padding: @spacing-xxl 0;
text-align: center; text-align: center;
font-size: 13px; font-size: @font-size-sm;
color: @project-muted; color: @text-color-secondary;
} }
} }
</style> </style>

22
src/views/message/index.vue
View File

@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router'
import { ElButton, ElInput } from 'element-plus' import { ElButton, ElInput } from 'element-plus'
import { PageHead, PaginationBar } from '@/components' import { PageHead, PaginationBar } from '@/components'
import { useMessageStore } from '@/stores/modules/message' import { useMessageStore } from '@/stores/modules/message'
import type { MessageType } from '@/types/business/message' import type { Message, MessageType } from '@/types/business/message'
import MessageTabs from './cpns/MessageTabs.vue' import MessageTabs from './cpns/MessageTabs.vue'
import MessageList from './cpns/MessageList.vue' import MessageList from './cpns/MessageList.vue'
@@ -35,8 +35,13 @@ function onTabChange(type: MessageType | 'all'): void {
void messageStore.search() void messageStore.search()
} }
function onView(id: string): void { function onView(message: Message): void {
void router.push(`/message/${id}`) // 用 message.type 区分：在线客服进会话页，其余进消息详情
if (message.type === '在线客服') {
void router.push('/service')
return
}
void router.push(`/message/${message.id}`)
} }
function onMarkAllRead(): void { function onMarkAllRead(): void {
@@ -128,8 +133,15 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
.flex(row, flex-start, flex-start); .flex(row, flex-start, flex-start);
gap: @spacing-lg; gap: @spacing-lg;
width: 100%; width: 100%;
padding: @spacing-lg 0 0; padding-top: @spacing-lg;
padding-right: @home-gutter;
padding-left: @home-gutter;
box-sizing: border-box; box-sizing: border-box;
@media (max-width: 1600px) {
padding-right: @spacing-lg;
padding-left: @spacing-lg;
}
} }
&__tabs { &__tabs {
@@ -149,7 +161,7 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
gap: @spacing-base; gap: @spacing-base;
min-height: 64px; min-height: 64px;
padding: 0 @spacing-lg; padding: 0 @spacing-lg;
border: none; border: 1px solid @border-color;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
box-sizing: border-box; box-sizing: border-box;

32
src/views/service/cpns/ChatFileCard.vue
View File

@@ -31,45 +31,47 @@ function extOf(name: string): string {
<style lang="less" scoped> <style lang="less" scoped>
.chat-file-card { .chat-file-card {
.flex(row, center); .flex(row, center);
gap: 12px; gap: @spacing-base;
min-width: 300px; min-width: 240px;
max-width: 420px; max-width: 420px;
padding: 14px 16px; padding: @spacing-base;
border: 1px solid @border-color;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
box-shadow: @shadow-base;
&__icon { &__icon {
flex-shrink: 0; flex-shrink: 0;
.flex(row, center); .flex(row, center);
width: 37px; width: 40px;
height: 37px; height: 40px;
border-radius: @radius-sm; border-radius: @radius-sm;
background: @service-scroll-bg; background: @primary-light;
color: @primary-strong; color: @primary-strong;
font-size: 11px; font-size: @font-size-xs;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
} }
&__info { &__info {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
gap: 6px; gap: @spacing-xs;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
&__name { &__name {
font-size: 12px; font-size: @font-size-sm;
font-weight: 700; font-weight: 600;
line-height: 16px; line-height: 1.4;
color: @service-bubble-text; color: @heading-color;
.ellipsis(); .ellipsis();
} }
&__size { &__size {
font-size: 12px; font-size: @font-size-xs;
line-height: 16px; line-height: 1.4;
color: @project-muted; color: @text-color-secondary;
} }
} }
</style> </style>

120
src/views/service/cpns/ChatInput.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
const MAX_FILE_SIZE = 1024 * 1024 * 1024 const MAX_FILE_SIZE = 1024 * 1024 * 1024
const content = ref('') const content = ref('')
const fileRef = ref<HTMLInputElement | null>(null)
const emit = defineEmits<{ const emit = defineEmits<{
send: [content: string] send: [content: string]
@@ -26,6 +27,10 @@ function onKeydown(event: KeyboardEvent): void {
} }
} }
function onPickFile(): void {
fileRef.value?.click()
}
function onFileChange(event: Event): void { function onFileChange(event: Event): void {
const target = event.target const target = event.target
if (!(target instanceof HTMLInputElement)) return if (!(target instanceof HTMLInputElement)) return
@@ -45,27 +50,35 @@ function onFileChange(event: Event): void {
<textarea <textarea
v-model="content" v-model="content"
class="chat-input__textarea" class="chat-input__textarea"
placeholder="输入消息，按Enter发送，Shift+Enter换行..." placeholder="输入消息，按 Enter 发送，Shift + Enter 换行"
rows="3" rows="3"
@keydown="onKeydown" @keydown="onKeydown"
/> />
<div class="chat-input__bar"> <div class="chat-input__bar">
<span class="chat-input__hint"> <div class="chat-input__tools">
按 Enter 发送 | 支持拖拽上传文件 <button
</span> type="button"
<div class="chat-input__actions"> class="chat-input__attach"
@click="onPickFile"
>
附件
</button>
<span class="chat-input__hint">Enter 发送</span>
</div>
<input <input
ref="fileRef"
type="file" type="file"
class="chat-input__file" class="chat-input__file"
@change="onFileChange" @change="onFileChange"
> >
<el-button <button
type="button"
class="chat-input__send" class="chat-input__send"
:disabled="!content.trim()"
@click="doSend" @click="doSend"
> >
发送 发送
</el-button> </button>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -73,34 +86,34 @@ function onFileChange(event: Event): void {
<style lang="less" scoped> <style lang="less" scoped>
.chat-input { .chat-input {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 0; gap: @spacing-base;
padding: 16px 22px 20px; padding: @spacing-base @spacing-lg @spacing-lg;
border-top: 1px solid @service-card-line; border-top: 1px solid @border-color;
background: @white; background: @white;
box-sizing: border-box; box-sizing: border-box;
&__textarea { &__textarea {
width: 100%; width: 100%;
height: 72px; min-height: 84px;
padding: 12px 14px; padding: @spacing-base;
border: none; border: 1px solid @border-color;
border-radius: @radius-sm; border-radius: @radius-base;
background: @service-input-bg; background: @bg-color-light;
color: @service-bubble-text; color: @service-bubble-text;
font-size: 13px; font-size: @font-size-sm;
line-height: 1.6; line-height: 1.6;
resize: none; resize: none;
outline: none; outline: none;
transition: background 0.2s; transition: border-color 0.2s, background 0.2s;
box-sizing: border-box; box-sizing: border-box;
&:focus { &:focus {
border: none; border-color: @primary-color;
background: @service-input-bg; background: @white;
} }
&::placeholder { &::placeholder {
color: @project-muted; color: @text-color-secondary;
} }
} }
@@ -108,24 +121,35 @@ function onFileChange(event: Event): void {
.flex(row, space-between, center); .flex(row, space-between, center);
gap: @spacing-base; gap: @spacing-base;
width: 100%; width: 100%;
margin-top: 0;
padding-top: 14px;
background: @service-bar-bg;
} }
&__hint { &__tools {
font-size: 11px; .flex(row, flex-start, center);
line-height: 16px; gap: @spacing-base;
color: @project-muted; min-width: 0;
}
&__actions {
.flex(row, flex-end, center);
gap: @spacing-sm;
} }
&__attach { &__attach {
display: none; height: 32px;
padding: 0 @spacing-base;
border: 1px solid @border-color;
border-radius: @radius-round;
background: @white;
color: @text-color;
font-size: @font-size-sm;
cursor: pointer;
transition: all 0.2s;
&:hover {
border-color: @primary-strong;
color: @primary-strong;
}
}
&__hint {
font-size: @font-size-xs;
line-height: 1.4;
color: @text-color-secondary;
} }
&__file { &__file {
@@ -133,20 +157,26 @@ function onFileChange(event: Event): void {
} }
&__send { &__send {
width: 76px; flex-shrink: 0;
height: 30px; min-width: 80px;
padding: 0; height: 32px;
border-color: @primary-strong; padding: 0 @spacing-lg;
border-radius: @radius-sm; border: none;
border-radius: @radius-round;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 12px; font-size: @font-size-sm;
font-weight: 500; font-weight: 500;
cursor: pointer;
transition: background 0.2s;
&:hover { &:hover:not(:disabled) {
border-color: @primary-strong; background: @primary-hover;
background: @primary-strong; }
color: @white;
&:disabled {
opacity: 0.45;
cursor: not-allowed;
} }
} }
} }

44
src/views/service/cpns/ChatMessageItem.vue
View File

@@ -29,14 +29,14 @@ withDefaults(defineProps<Props>(), { unread: false })
<span class="chat-message-item__time">{{ message.time }}</span> <span class="chat-message-item__time">{{ message.time }}</span>
</div> </div>
<span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">王</span> <span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">我</span>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.chat-message-item { .chat-message-item {
.flex(row, flex-start, flex-start); .flex(row, flex-start, flex-start);
gap: 16px; gap: @spacing-base;
&__avatar { &__avatar {
flex-shrink: 0; flex-shrink: 0;
@@ -46,55 +46,54 @@ withDefaults(defineProps<Props>(), { unread: false })
border-radius: @radius-round; border-radius: @radius-round;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 14px; font-size: @font-size-sm;
font-weight: 400; font-weight: 500;
&--user { &--user {
background: @service-user-avatar; background: @service-user-avatar;
color: @white;
} }
} }
&__main { &__main {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
gap: 6px; gap: @spacing-xs;
max-width: 420px; max-width: min(480px, 70%);
} }
&__bubble { &__bubble {
position: relative; position: relative;
padding: 12px 16px; padding: @spacing-base;
border-radius: @radius-base; border-radius: @radius-base @radius-base @radius-base @radius-sm;
background: @white; background: @white;
border: 1px solid @border-color;
color: @service-bubble-text; color: @service-bubble-text;
font-size: 13px; font-size: @font-size-sm;
line-height: 1.7; line-height: 1.7;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
box-shadow: @shadow-base;
} }
&__bubble:has(.chat-file-card) { &__bubble:has(.chat-file-card) {
padding: 0; padding: 0;
border: none;
background: transparent; background: transparent;
box-shadow: none;
} }
&__time { &__time {
font-size: 11px; font-size: @font-size-xs;
line-height: 16px; line-height: 1.4;
color: @project-muted; color: @text-color-secondary;
} }
&__unread { &__unread {
position: absolute; position: absolute;
top: 100%; top: calc(100% + @spacing-xs);
left: 0; left: 0;
margin-top: 8px; color: @text-color-secondary;
padding: 0; font-size: @font-size-xs;
background: transparent; line-height: 1.4;
color: @project-muted;
font-size: 10px;
font-weight: 400;
line-height: 14px;
} }
&--user { &--user {
@@ -105,8 +104,11 @@ withDefaults(defineProps<Props>(), { unread: false })
} }
.chat-message-item__bubble { .chat-message-item__bubble {
border: none;
border-radius: @radius-base @radius-base @radius-sm @radius-base;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
box-shadow: none;
} }
} }
} }

71
src/views/service/cpns/ChatWindow.vue
View File

@@ -37,14 +37,17 @@ watch(
<template> <template>
<div class="chat-window"> <div class="chat-window">
<div class="chat-window__header"> <div class="chat-window__header">
<span class="chat-window__header-avatar" /> <span class="chat-window__header-avatar" aria-hidden="true">客</span>
<div class="chat-window__header-meta">
<span class="chat-window__header-name">专属客服</span> <span class="chat-window__header-name">专属客服</span>
<span class="chat-window__header-status">在线 · 通常几分钟内回复</span>
</div>
</div> </div>
<div ref="scrollRef" class="chat-window__scroll"> <div ref="scrollRef" class="chat-window__scroll">
<template v-for="(item, index) in messages" :key="item.id"> <template v-for="(item, index) in messages" :key="item.id">
<div v-if="index === 0" class="chat-window__divider"> <div v-if="index === 0" class="chat-window__divider">
—— 历史消息 —— <span class="chat-window__divider-text">历史消息</span>
</div> </div>
<ChatMessageItem <ChatMessageItem
:message="item" :message="item"
@@ -60,7 +63,7 @@ watch(
<style lang="less" scoped> <style lang="less" scoped>
.chat-window { .chat-window {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
border: none; border: 1px solid @border-color;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
box-sizing: border-box; box-sizing: border-box;
@@ -69,8 +72,8 @@ watch(
&__header { &__header {
.flex(row, flex-start, center); .flex(row, flex-start, center);
gap: @spacing-base; gap: @spacing-base;
height: 56px; min-height: 64px;
padding: 0 @spacing-lg; padding: @spacing-base @spacing-lg;
border-bottom: 1px solid @border-color; border-bottom: 1px solid @border-color;
background: @white; background: @white;
box-sizing: border-box; box-sizing: border-box;
@@ -78,37 +81,65 @@ watch(
&__header-avatar { &__header-avatar {
flex-shrink: 0; flex-shrink: 0;
width: 33px; .flex(row, center);
height: 33px; width: 40px;
height: 40px;
border-radius: @radius-round; border-radius: @radius-round;
background: @primary-strong; background: @primary-strong;
color: @white;
font-size: @font-size-base;
font-weight: 600;
}
&__header-meta {
.flex(column, flex-start, flex-start);
gap: 2px;
min-width: 0;
} }
&__header-name { &__header-name {
font-size: 13px; font-size: @font-size-base;
font-weight: 500; font-weight: 600;
line-height: 18px; line-height: 1.4;
color: @service-header-name; color: @heading-color;
}
&__header-status {
font-size: @font-size-xs;
line-height: 1.4;
color: @text-color-secondary;
} }
&__scroll { &__scroll {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 32px; gap: @spacing-lg;
height: 450px; height: 460px;
padding: 24px 22px; padding: @spacing-lg;
background: @service-scroll-bg; background: @bg-color-light;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
.scrollbar(); .scrollbar();
} }
&__divider { &__divider {
.flex(row, center, center);
flex-shrink: 0; flex-shrink: 0;
margin-bottom: -18px; gap: @spacing-base;
font-size: 12px;
line-height: 18px; &::before,
color: @project-muted; &::after {
text-align: center; content: '';
flex: 1;
height: 1px;
background: @border-color;
}
}
&__divider-text {
flex-shrink: 0;
font-size: @font-size-xs;
line-height: 1.4;
color: @text-color-secondary;
} }
} }
</style> </style>

3
src/views/service/index.vue
View File

@@ -50,6 +50,9 @@ onMounted(() => {
&__wrap { &__wrap {
width: 100%; width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: @spacing-lg 0 0; padding: @spacing-lg 0 0;
box-sizing: border-box; box-sizing: border-box;
} }