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

Compare commits

base: zhangchao:6af8fd7b09b72b4d2aba733252457caa4d12f3cc
Branches Tags
zhangchao:main zhangchao:wzp
...
compare: zhangchao:53f23d4e699d21c88337c2dd46c8a153aca1acbc
Branches Tags
zhangchao:main zhangchao:wzp

2 Commits
6af8fd7b09 ... 53f23d4e69

Author SHA1 Message Date
Ironsp
53f23d4e69 feat 消息中心 2026-10-10 08:12:28 +08:00
Ironsp
6ecc649a1c feat 在线客服 2026-10-10 08:12:18 +08:00
11 changed files with 473 additions and 472 deletions
Expand all files Collapse all files

17
src/styles/variables.less
View File

@@ -286,3 +286,20 @@
@finance-chart-switch-active: #024fff; @finance-chart-switch-active: #024fff;
@finance-switch-active-bg: #e8f0ff; @finance-switch-active-bg: #e8f0ff;
@finance-switch-idle-bg: #f2f4f7; @finance-switch-idle-bg: #f2f4f7;
// 消息中心（设计稿 #22）
@message-page-bg: #f4f6f8;
@message-tabs-text: #4b5563;
@message-tabs-badge: #f53f3f;
@message-toolbar-btn-border: #e5e7eb;
@message-pager-active-bg: #edf3fe;
@message-item-icon: #3b82f6;
// 在线客服（设计稿 #42）
@service-card-line: #f0f1f3;
@service-scroll-bg: #fafbfc;
@service-input-bg: #f7f8fa;
@service-bar-bg: #f8f8f9;
@service-header-name: #1f2937;
@service-avatar-text: #8d99ae;
@service-bubble-text: #1f2937;

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

@@ -29,9 +29,9 @@ const emojiMap: Record<MessageType, string> = {
<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>
<span class="message-item__time text-secondary">{{ message.publishTime }}</span> <span class="message-item__time">{{ message.publishTime }}</span>
</div> </div>
<p class="message-item__summary text-secondary"> <p class="message-item__summary">
{{ message.summary }} {{ message.summary }}
</p> </p>
</div> </div>
@@ -42,11 +42,13 @@ const emojiMap: Record<MessageType, string> = {
<style lang="less" scoped> <style lang="less" scoped>
.message-item { .message-item {
position: relative; position: relative;
.flex(row, flex-start); .flex(row, flex-start, flex-start);
gap: @spacing-base; gap: 16px;
padding: 14px 17px; min-height: 86px;
padding: 19px 29px;
background: @white; background: @white;
cursor: pointer; cursor: pointer;
box-sizing: border-box;
transition: background 0.2s; transition: background 0.2s;
&:hover { &:hover {
@@ -56,60 +58,63 @@ const emojiMap: Record<MessageType, string> = {
&__emoji { &__emoji {
flex-shrink: 0; flex-shrink: 0;
.flex(row, center); .flex(row, center);
width: 31px; width: 42px;
height: 31px; height: 42px;
border-radius: @radius-round; border-radius: @radius-round;
background: @message-icon-bg; background: @message-item-icon;
font-size: 15px; font-size: 20px;
line-height: 1; line-height: 1;
} }
&__body { &__body {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 5px; gap: 8px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
margin-top: 6px;
} }
&__head { &__head {
.flex(row, space-between); .flex(row, space-between, flex-start);
gap: @spacing-base; gap: @spacing-base;
width: 100%; width: 100%;
} }
&__title { &__title {
font-size: 11px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: @heading-color; line-height: 20px;
color: @finance-ink;
.ellipsis(); .ellipsis();
} }
&__time { &__time {
flex-shrink: 0; flex-shrink: 0;
font-size: 11px; font-size: 12px;
color: @text-color-disabled; line-height: 20px;
color: @message-tabs-text;
} }
&__summary { &__summary {
font-size: 11px; font-size: 12px;
line-height: 18px;
color: @message-tabs-text;
.ellipsis(); .ellipsis();
} }
&__dot { &__dot {
position: absolute; position: absolute;
top: 12px; top: 21px;
left: 42px; left: 60px;
width: 15px; width: 14px;
height: 15px; height: 14px;
border: 2px solid @white;
border-radius: @radius-round; border-radius: @radius-round;
background: @danger-color; background: @message-tabs-badge;
box-sizing: content-box;
} }
&.is-unread { &.is-unread .message-item__title {
.message-item__title {
font-weight: 600; font-weight: 600;
} }
}
} }
</style> </style>

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

@@ -31,19 +31,20 @@ const emit = defineEmits<{ view: [id: string] }>()
.message-list { .message-list {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 0; gap: 0;
margin-top: 16px;
padding: 0; padding: 0;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
overflow: hidden; overflow: hidden;
.message-item + .message-item { .message-item + .message-item {
border-top: 1px solid @project-divider; border-top: 1px solid @finance-card-line;
} }
&__empty { &__empty {
padding: 40px 0; padding: 60px 0;
text-align: center; text-align: center;
font-size: 11px; font-size: 13px;
} }
} }
</style> </style>

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

@@ -1,16 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { MessageTabCounts } from '@/stores/modules/message'
import type { MessageType } from '@/types/business/message' import type { MessageType } from '@/types/business/message'
interface Counts {
all: number
在线客服: number
状态通知: number
系统通知: number
}
interface Props { interface Props {
active: MessageType | 'all' active: MessageType | 'all'
counts: Counts counts: MessageTabCounts
} }
defineProps<Props>() defineProps<Props>()
@@ -24,7 +18,7 @@ const tabs: Array<{ label: string; value: MessageType | 'all' }> = [
{ label: '系统通知', value: '系统通知' }, { label: '系统通知', value: '系统通知' },
] ]
function countOf(value: MessageType | 'all', counts: Counts): number { function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
return counts[value] return counts[value]
} }
</script> </script>
@@ -47,23 +41,25 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
<style lang="less" scoped> <style lang="less" scoped>
.message-tabs { .message-tabs {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
padding: 18px 0; gap: 0;
min-height: 338px; height: 438px;
padding: 14px 0;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
box-shadow: none; box-sizing: border-box;
&__tab { &__tab {
.flex(row, space-between); .flex(row, space-between, center);
gap: @spacing-sm; gap: @spacing-sm;
height: 32px; height: 44px;
padding: 0 18px 0 25px; padding: 0 25px;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
color: @text-color; color: @message-tabs-text;
font-size: 11px; font-size: 13px;
font-weight: 400; font-weight: 400;
transition: all 0.2s; line-height: 18px;
transition: color 0.2s;
&:hover { &:hover {
color: @primary-strong; color: @primary-strong;
@@ -77,21 +73,18 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
} }
&__count { &__count {
flex-shrink: 0;
min-width: 15px; min-width: 15px;
height: 15px; height: 15px;
padding: 0 4px; padding: 0 4px;
border-radius: @radius-round; border-radius: @radius-round;
background: @danger-color; background: @message-tabs-badge;
color: @white; color: @white;
font-size: 11px; font-size: 10px;
font-weight: 400;
line-height: 15px; line-height: 15px;
text-align: center; text-align: center;
} box-sizing: border-box;
.is-active &__count {
background: @danger-color;
color: @white;
font-weight: 600;
} }
} }
</style> </style>

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

@@ -1,8 +1,9 @@
<!-- 页面：消息详情（MessageDetail） -->
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, watch } from 'vue' import { computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus' import { ElButton, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { AppButton } from '@/components' import { PageHead } from '@/components'
import { useMessageStore } from '@/stores/modules/message' import { useMessageStore } from '@/stores/modules/message'
import { formatFileSize } from '@/utils/format' import { formatFileSize } from '@/utils/format'
@@ -36,12 +37,18 @@ onMounted(load)
<template> <template>
<div class="message-detail"> <div class="message-detail">
<nav class="message-detail__breadcrumb text-secondary"> <PageHead
<RouterLink to="/message" class="link"> title="消息详情"
slogan="查看站内消息完整内容与附件资料"
/>
<div class="message-detail__wrap">
<nav class="message-detail__breadcrumb">
<RouterLink to="/message" class="message-detail__breadcrumb-link">
消息中心 消息中心
</RouterLink> </RouterLink>
<span> &gt; </span> <span class="message-detail__breadcrumb-sep">&gt;</span>
<span>{{ item ? `${item.type}详情` : '消息详情' }}</span> <span class="message-detail__breadcrumb-current">{{ item ? `${item.type}详情` : '消息详情' }}</span>
</nav> </nav>
<template v-if="item"> <template v-if="item">
@@ -49,7 +56,7 @@ onMounted(load)
<h1 class="message-detail__title"> <h1 class="message-detail__title">
{{ item.title }} {{ item.title }}
</h1> </h1>
<p class="message-detail__time text-secondary"> <p class="message-detail__time">
发布时间：{{ item.publishTime }} 发布时间：{{ item.publishTime }}
</p> </p>
<div class="message-detail__content"> <div class="message-detail__content">
@@ -68,149 +75,180 @@ onMounted(load)
> >
<div class="message-detail__file-info"> <div class="message-detail__file-info">
<span class="message-detail__file-name" :title="file.name">{{ file.name }}</span> <span class="message-detail__file-name" :title="file.name">{{ file.name }}</span>
<span class="message-detail__file-meta text-secondary"> <span class="message-detail__file-meta">
{{ formatFileSize(file.size) }} · 上传于{{ file.uploadTime }} {{ formatFileSize(file.size) }} · 上传于{{ file.uploadTime }}
</span> </span>
</div> </div>
<div class="message-detail__file-actions"> <div class="message-detail__file-actions">
<button class="message-detail__file-btn" @click="onPreview"> <el-button
class="message-detail__file-btn"
link
@click="onPreview"
>
预览 预览
</button> </el-button>
<button class="message-detail__file-btn" @click="onDownload"> <el-button
class="message-detail__file-btn"
link
@click="onDownload"
>
下载 下载
</button> </el-button>
</div> </div>
</li> </li>
</ul> </ul>
</section> </section>
<div class="message-detail__actions"> <div class="message-detail__actions">
<AppButton type="primary" @click="onBack"> <el-button
class="message-detail__back"
@click="onBack"
>
返回 返回
</AppButton> </el-button>
</div> </div>
</article> </article>
</template> </template>
<p v-else class="message-detail__empty text-secondary"> <p v-else class="message-detail__empty">
消息不存在 消息不存在
</p> </p>
</div> </div>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.message-detail { .message-detail {
max-width: @container-width; .flex(column, flex-start, stretch);
margin: 0 auto; gap: 0;
padding: @spacing-lg @spacing-base @spacing-xxl; width: 100%;
padding-bottom: 60px;
background: @message-page-bg;
&__wrap {
width: 100%;
padding: 28px 70px 0;
box-sizing: border-box;
}
&__breadcrumb { &__breadcrumb {
display: flex; .flex(row, flex-start, center);
align-items: center;
gap: 4px; gap: 4px;
margin-bottom: 12px; height: 49px;
font-size: 11px; font-size: 12px;
color: @text-color-disabled; line-height: 17px;
color: @project-muted;
.link {
color: @text-color-disabled;
} }
span:last-child { &__breadcrumb-link {
color: @text-color; color: @project-muted;
&:hover {
color: @primary-strong;
}
}
&__breadcrumb-sep {
color: @project-muted;
}
&__breadcrumb-current {
color: @message-tabs-text;
font-weight: 500; font-weight: 500;
} }
}
&__card { &__card {
padding: 32px 36px 34px; padding: 45px 47px 40px;
border-radius: @radius-lg; border-radius: @radius-base;
background: @white; background: @white;
box-shadow: none; box-sizing: border-box;
} }
&__title { &__title {
font-size: 15px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: @heading-color; line-height: 28px;
color: @finance-ink;
text-align: center; text-align: center;
} }
&__time { &__time {
margin-top: 11px; // 14 × 0.77 margin-top: 14px;
font-size: 11px; font-size: 12px;
color: @text-color-disabled; line-height: 18px;
color: @project-muted;
text-align: center; text-align: center;
} }
&__content { &__content {
margin-top: 24px; margin-top: 16px;
background: transparent; background: transparent;
color: @text-color; color: @message-tabs-text;
font-size: 11px; font-size: 13px;
line-height: 1.9; line-height: 2.8;
text-align: center; text-align: center;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
} }
&__attachments { &__attachments {
margin-top: 20px; margin-top: 24px;
&-title { &-title {
margin-bottom: 8px; margin-bottom: 10px;
font-size: 11px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: @text-color-disabled; color: @project-muted;
} }
} }
&__file-list { &__file-list {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: @spacing-sm; gap: 10px;
} }
&__file { &__file {
.flex(row, space-between); .flex(row, space-between, center);
gap: @spacing-base; gap: @spacing-base;
align-items: center; width: 254px;
width: fit-content;
max-width: 100%; max-width: 100%;
padding: 10px 14px; padding: 15px 12px 15px 19px;
border: none; border-radius: @radius-sm;
border-radius: 6px;
background: @finance-row-bg; background: @finance-row-bg;
list-style: none; list-style: none;
box-sizing: border-box;
} }
&__file-info { &__file-info {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
gap: 3px; gap: 4px;
min-width: 0; min-width: 0;
} }
&__file-name { &__file-name {
font-size: 11px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: @heading-color; color: @finance-ink;
.ellipsis(); .ellipsis();
} }
&__file-meta { &__file-meta {
font-size: 11px; font-size: 11px;
color: @text-color-disabled; color: @project-muted;
.ellipsis();
} }
&__file-actions { &__file-actions {
.flex(row, center); .flex(column, center, center);
gap: @spacing-sm; gap: 2px;
flex-shrink: 0; flex-shrink: 0;
} }
&__file-btn { &__file-btn {
font-size: 11px; padding: 0;
color: @text-color-secondary; font-size: 12px;
transition: color 0.2s; font-weight: 400;
color: @message-tabs-text;
&:hover { &:hover {
color: @primary-strong; color: @primary-strong;
@@ -219,28 +257,32 @@ onMounted(load)
&__actions { &__actions {
.flex(row, flex-end); .flex(row, flex-end);
margin-top: 32px; margin-top: 40px;
}
.app-button { &__back {
height: 24px; // 31 × 0.77 width: 94px;
padding: 0 16px; height: 34px;
border-radius: 6px; padding: 0;
border-color: @primary-strong;
border-radius: @radius-sm;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 11px; font-size: 13px;
font-weight: 500; font-weight: 500;
&:hover { &:hover {
border-color: @primary-strong;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
} }
} }
}
&__empty { &__empty {
padding: @spacing-xxl 0; padding: 80px 0;
text-align: center; text-align: center;
font-size: 11px; font-size: 13px;
color: @project-muted;
} }
} }
</style> </style>

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

@@ -1,9 +1,10 @@
<!-- 页面：消息中心（Message） --> <!-- 页面：消息中心（Message） -->
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted } from 'vue' import { computed, onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { AppButton, FilterPanel, PaginationBar } from '@/components' import { ElButton, ElInput } from 'element-plus'
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 { MessageType } from '@/types/business/message'
import MessageTabs from './cpns/MessageTabs.vue' import MessageTabs from './cpns/MessageTabs.vue'
@@ -13,16 +14,15 @@ const router = useRouter()
const messageStore = useMessageStore() const messageStore = useMessageStore()
const { query, list, total, unreadCount, tabCounts } = storeToRefs(messageStore) const { query, list, total, unreadCount, tabCounts } = storeToRefs(messageStore)
const keyword = computed({ const keyword = ref(query.value.keyword)
get: () => query.value.keyword,
set: (value: string) => messageStore.setQuery({ ...query.value, keyword: value }),
})
function onSearch(): void { function onSearch(): void {
messageStore.setQuery({ ...query.value, keyword: keyword.value })
void messageStore.search() void messageStore.search()
} }
function onReset(): void { function onReset(): void {
keyword.value = ''
void messageStore.resetQuery() void messageStore.resetQuery()
} }
@@ -50,18 +50,16 @@ onMounted(() => {
messageStore.fetchTabCounts(), messageStore.fetchTabCounts(),
]) ])
}) })
const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${unreadCount.value})` : '全部已读'))
</script> </script>
<template> <template>
<div class="message"> <div class="message">
<header class="message__head"> <PageHead
<h1 class="message__title"> title="消息中心"
消息中心 slogan="统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒"
</h1> />
</header>
<p class="message__subtitle text-secondary">
统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒
</p>
<div class="message__body"> <div class="message__body">
<MessageTabs <MessageTabs
@@ -73,21 +71,34 @@ onMounted(() => {
<div class="message__main"> <div class="message__main">
<div class="message__toolbar"> <div class="message__toolbar">
<FilterPanel <el-input
class="message__filter" v-model="keyword"
v-model:keyword="keyword" class="message__search"
keyword-placeholder="搜索消息标题、内容" placeholder="搜索消息标题、内容"
@search="onSearch" clearable
@reset="onReset" @keyup.enter="onSearch"
/> />
<AppButton
class="message__mark-read" <el-button
type="default" class="message__btn"
@click="onReset"
>
重置
</el-button>
<el-button
class="message__btn message__btn--primary"
@click="onSearch"
>
搜索
</el-button>
<el-button
class="message__btn message__btn--read"
:disabled="unreadCount === 0" :disabled="unreadCount === 0"
@click="onMarkAllRead" @click="onMarkAllRead"
> >
全部已读 {{ UNREAD_LABEL }}
</AppButton> </el-button>
</div> </div>
<MessageList :messages="list" @view="onView" /> <MessageList :messages="list" @view="onView" />
@@ -107,143 +118,124 @@ onMounted(() => {
<style lang="less" scoped> <style lang="less" scoped>
.message { .message {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: @spacing-base; gap: 0;
max-width: @container-width; width: 100%;
margin: 0 auto; padding-bottom: 14px;
padding: @spacing-xl @spacing-base @spacing-xxl; background: @message-page-bg;
&__head {
.flex(row, flex-start);
margin-bottom: -10px;
}
&__title {
font-size: 17px;
font-weight: 700;
color: @heading-color;
}
&__subtitle {
text-align: center;
font-size: 11px;
}
&__body { &__body {
.flex(row, flex-start); .flex(row, flex-start, flex-start);
gap: 26px; gap: 22px;
align-items: flex-start; width: 100%;
padding: 119px 25px 0;
box-sizing: border-box;
} }
&__tabs { &__tabs {
flex-shrink: 0; flex-shrink: 0;
width: 156px; width: 198px;
} }
&__main { &__main {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 15px; gap: 0;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
&__toolbar { &__toolbar {
.flex(row, flex-start); .flex(row, flex-start, center);
align-items: center; gap: 0;
gap: 11px; height: 69px;
padding: 10px 17px; padding: 0 21px 0 25px;
border: 1px solid @message-toolbar-btn-border;
border-radius: @radius-base; border-radius: @radius-base;
background: @white; background: @white;
box-sizing: border-box;
} }
& .message__filter { &__search {
flex: 1; flex: 0 1 460px;
min-width: 0; height: 37px;
padding: 0;
background: transparent;
}
& .message__mark-read { :deep(.el-input__wrapper) {
flex-shrink: 0; height: 37px;
height: 26px; // 34 × 0.77
padding: 0 16px; padding: 0 16px;
border: 1px solid @border-color; border-radius: @radius-base;
border-radius: 6px;
background: @white;
color: @text-color;
font-size: 11px;
font-weight: 500;
&:hover:not(:disabled) {
border-color: @primary-color;
background: @white;
color: @primary-color;
}
}
& .message__pagination {
justify-content: flex-end;
align-self: stretch;
padding: 0;
}
.message__filter {
:deep(.filter-panel__bar) {
gap: 6px;
}
:deep(.filter-panel__body) {
margin-top: 0;
}
:deep(.filter-panel__input) {
order: 0;
flex: 0 1 349px;
max-width: 349px;
height: 29px; // 38 × 0.77
margin-right: 2px;
padding: 0 10px;
border: none;
border-radius: 6px;
background: @finance-field-bg; background: @finance-field-bg;
color: @text-color; box-shadow: none;
font-size: 11px; }
:deep(.el-input__inner) {
color: @finance-ink;
font-size: 13px;
&::placeholder { &::placeholder {
color: @contract-placeholder; color: @contract-placeholder;
} }
&:focus {
border: none;
} }
} }
:deep(.filter-panel__btn) { &__btn {
order: 1; height: 28px;
min-width: 46px; margin-left: 14px;
height: 29px; padding: 0 15px;
padding: 0 12px; border-radius: @radius-sm;
border: none; font-size: 12px;
border-radius: 6px; font-weight: 400;
background: @contract-reset-bg;
color: @text-color; &:hover {
font-size: 11px; border-color: @primary-strong;
color: @primary-strong;
}
&--primary {
border-color: @primary-strong;
background: @primary-strong;
color: @white;
&:hover {
border-color: @primary-strong;
background: @primary-strong;
color: @white;
}
}
&--read {
margin-left: auto;
border-color: @message-toolbar-btn-border;
background: @white;
color: @finance-entry-text;
&:hover:not(:disabled) {
border-color: @primary-strong;
background: @white;
color: @primary-strong;
}
}
}
&__pagination {
justify-content: flex-end;
align-self: stretch;
margin-top: 16px;
padding: 0;
:deep(.pagination__btn) {
min-width: 23px;
height: 26px;
border-color: @message-toolbar-btn-border;
border-radius: @radius-sm;
background: @white;
color: @finance-entry-text;
font-size: 12px;
}
:deep(.pagination__btn.is-active) {
border-color: @message-pager-active-bg;
background: @message-pager-active-bg;
color: @primary-strong;
font-weight: 500; font-weight: 500;
&:hover {
background: @contract-reset-bg;
color: @text-color;
}
}
:deep(.filter-panel__btn--primary) {
order: 2;
background: @primary-strong;
color: @white;
&:hover {
background: @primary-strong;
color: @white;
}
} }
} }
} }

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

@@ -12,73 +12,64 @@ interface Props {
defineProps<Props>() defineProps<Props>()
const emit = defineEmits<{ download: [] }>() function extOf(name: string): string {
const idx = name.lastIndexOf('.')
return idx > -1 ? name.slice(idx + 1).toUpperCase() : 'FILE'
}
</script> </script>
<template> <template>
<div class="chat-file-card"> <div class="chat-file-card">
<span class="chat-file-card__icon">📄</span> <span class="chat-file-card__icon">{{ extOf(file.name) }}</span>
<div class="chat-file-card__info"> <div class="chat-file-card__info">
<span class="chat-file-card__name" :title="file.name">{{ file.name }}</span> <span class="chat-file-card__name" :title="file.name">{{ file.name }}</span>
<span class="chat-file-card__size text-secondary">{{ formatFileSize(file.size) }}</span> <span class="chat-file-card__size">{{ formatFileSize(file.size) }}</span>
</div> </div>
<button class="chat-file-card__download" @click="emit('download')">
下载
</button>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.chat-file-card { .chat-file-card {
.flex(row, center); .flex(row, center);
gap: 8px; gap: 12px;
min-width: 181px; min-width: 300px;
max-width: 320px; max-width: 420px;
padding: 10px 12px; padding: 14px 16px;
border: 1px solid @project-divider; border-radius: @radius-base;
border-radius: 6px;
background: @white; background: @white;
&__icon { &__icon {
flex-shrink: 0; flex-shrink: 0;
font-size: 14px; .flex(row, center);
width: 37px;
height: 37px;
border-radius: @radius-sm;
background: @service-scroll-bg;
color: @primary-strong;
font-size: 11px;
font-weight: 700;
line-height: 1; line-height: 1;
} }
&__info { &__info {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
gap: 4px; gap: 6px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
&__name { &__name {
font-size: 11px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: @heading-color; line-height: 16px;
color: @service-bubble-text;
.ellipsis(); .ellipsis();
} }
&__size { &__size {
font-size: 11px; font-size: 12px;
color: @text-color-disabled; line-height: 16px;
} color: @project-muted;
&__download {
flex-shrink: 0;
height: 22px;
padding: 0 8px;
border: 1px solid @border-color;
border-radius: 4px;
background: @white;
color: @text-color-secondary;
font-size: 11px;
transition: all 0.2s;
&:hover {
border-color: @primary-strong;
color: @primary-strong;
}
} }
} }
</style> </style>

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

@@ -1,12 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import { ElMessage } from 'element-plus' import { ElButton, ElMessage } from 'element-plus'
import { AppButton } from '@/components'
const MAX_FILE_SIZE = 1024 * 1024 * 1024 const MAX_FILE_SIZE = 1024 * 1024 * 1024
const content = ref('') const content = ref('')
const fileInputRef = ref<HTMLInputElement | null>(null)
const emit = defineEmits<{ const emit = defineEmits<{
send: [content: string] send: [content: string]
@@ -28,10 +26,6 @@ function onKeydown(event: KeyboardEvent): void {
} }
} }
function openFilePicker(): void {
fileInputRef.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
@@ -56,28 +50,21 @@ function onFileChange(event: Event): void {
@keydown="onKeydown" @keydown="onKeydown"
/> />
<div class="chat-input__bar"> <div class="chat-input__bar">
<span class="chat-input__hint text-secondary"> <span class="chat-input__hint">
按Enter发送 | 支持拖拽上传文件 按 Enter 发送 | 支持拖拽上传文件
</span> </span>
<div class="chat-input__actions"> <div class="chat-input__actions">
<button
type="button"
class="chat-input__attach"
aria-label="上传附件"
title="上传附件"
@click="openFilePicker"
>
📎
</button>
<input <input
ref="fileInputRef"
type="file" type="file"
class="chat-input__file" class="chat-input__file"
@change="onFileChange" @change="onFileChange"
> >
<AppButton type="primary" @click="doSend"> <el-button
class="chat-input__send"
@click="doSend"
>
发送 发送
</AppButton> </el-button>
</div> </div>
</div> </div>
</div> </div>
@@ -86,20 +73,21 @@ 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: 16px; gap: 0;
padding: 12px 16px 24px; padding: 16px 22px 20px;
border-top: 1px solid @project-divider; border-top: 1px solid @service-card-line;
background: @white; background: @white;
box-sizing: border-box;
&__textarea { &__textarea {
width: 100%; width: 100%;
height: 57px; height: 72px;
padding: 11px 10px; padding: 12px 14px;
border: none; border: none;
border-radius: 6px; border-radius: @radius-sm;
background: @finance-row-bg; background: @service-input-bg;
color: @heading-color; color: @service-bubble-text;
font-size: 11px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
resize: none; resize: none;
outline: none; outline: none;
@@ -108,24 +96,27 @@ function onFileChange(event: Event): void {
&:focus { &:focus {
border: none; border: none;
background: @finance-row-bg; background: @service-input-bg;
} }
&::placeholder { &::placeholder {
color: @heading-color; color: @project-muted;
} }
} }
&__bar { &__bar {
.flex(row, space-between); .flex(row, space-between, center);
gap: @spacing-base; gap: @spacing-base;
align-items: center;
width: 100%; width: 100%;
margin-top: 0;
padding-top: 14px;
background: @service-bar-bg;
} }
&__hint { &__hint {
font-size: 11px; font-size: 11px;
color: @text-color-disabled; line-height: 16px;
color: @project-muted;
} }
&__actions { &__actions {
@@ -134,35 +125,26 @@ function onFileChange(event: Event): void {
} }
&__attach { &__attach {
.flex(row, center); display: none;
width: 28px;
height: 28px;
border: none;
border-radius: @radius-sm;
background: transparent;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: @bg-color-light;
}
} }
&__file { &__file {
display: none; display: none;
} }
.app-button { &__send {
height: 24px; // 31 × 0.77 width: 76px;
padding: 0 14px; height: 30px;
border-radius: 6px; padding: 0;
border-color: @primary-strong;
border-radius: @radius-sm;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 11px; font-size: 12px;
font-weight: 500; font-weight: 500;
&:hover { &:hover {
border-color: @primary-strong;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
} }

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

@@ -8,8 +8,6 @@ interface Props {
} }
withDefaults(defineProps<Props>(), { unread: false }) withDefaults(defineProps<Props>(), { unread: false })
const emit = defineEmits<{ download: [] }>()
</script> </script>
<template> <template>
@@ -25,11 +23,10 @@ const emit = defineEmits<{ download: [] }>()
<ChatFileCard <ChatFileCard
v-if="message.file" v-if="message.file"
:file="message.file" :file="message.file"
@download="emit('download')"
/> />
<template v-else>{{ message.content }}</template> <template v-else>{{ message.content }}</template>
</div> </div>
<span class="chat-message-item__time text-secondary">{{ 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>
@@ -39,17 +36,17 @@ const emit = defineEmits<{ download: [] }>()
<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: 9px; gap: 16px;
&__avatar { &__avatar {
flex-shrink: 0; flex-shrink: 0;
.flex(row, center); .flex(row, center);
width: 28px; width: 36px;
height: 28px; height: 36px;
border-radius: @radius-round; border-radius: @radius-round;
background: @primary-strong; background: @primary-strong;
color: @white; color: @white;
font-size: 12px; // 16 → 12 font-size: 14px;
font-weight: 400; font-weight: 400;
&--user { &--user {
@@ -60,19 +57,18 @@ const emit = defineEmits<{ download: [] }>()
&__main { &__main {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
gap: 4px; gap: 6px;
max-width: 320px; max-width: 420px;
} }
&__bubble { &__bubble {
position: relative; position: relative;
padding: 9px 12px; padding: 12px 16px;
border-radius: 8px; border-radius: @radius-base;
background: @white; background: @white;
box-shadow: @shadow-base; color: @service-bubble-text;
color: @heading-color; font-size: 13px;
font-size: 11px; line-height: 1.7;
line-height: 1.75;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
} }
@@ -80,25 +76,25 @@ const emit = defineEmits<{ download: [] }>()
&__bubble:has(.chat-file-card) { &__bubble:has(.chat-file-card) {
padding: 0; padding: 0;
background: transparent; background: transparent;
box-shadow: none;
} }
&__time { &__time {
font-size: 11px; font-size: 11px;
color: @text-color-disabled; line-height: 16px;
color: @project-muted;
} }
&__unread { &__unread {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
margin-top: 6px; margin-top: 8px;
padding: 0; padding: 0;
background: transparent; background: transparent;
color: @text-color-disabled; color: @project-muted;
font-size: 11px; font-size: 10px;
font-weight: 400; font-weight: 400;
line-height: 1.3; line-height: 14px;
} }
&--user { &--user {

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

@@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, ref, watch } from 'vue' import { nextTick, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { ChatMessage } from '@/types/business/service' import type { ChatMessage } from '@/types/business/service'
import ChatMessageItem from './ChatMessageItem.vue' import ChatMessageItem from './ChatMessageItem.vue'
import ChatInput from './ChatInput.vue' import ChatInput from './ChatInput.vue'
@@ -29,10 +28,6 @@ async function scrollToBottom(): Promise<void> {
if (el) el.scrollTop = el.scrollHeight if (el) el.scrollTop = el.scrollHeight
} }
function onDownload(): void {
ElMessage.info('下载待接口接入')
}
watch( watch(
() => props.messages.length, () => props.messages.length,
() => void scrollToBottom(), () => void scrollToBottom(),
@@ -48,13 +43,12 @@ watch(
<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 text-secondary"> <div v-if="index === 0" class="chat-window__divider">
—— 历史消息 —— —— 历史消息 ——
</div> </div>
<ChatMessageItem <ChatMessageItem
:message="item" :message="item"
:unread="isUnread(index)" :unread="isUnread(index)"
@download="onDownload"
/> />
</template> </template>
</div> </div>
@@ -66,51 +60,54 @@ watch(
<style lang="less" scoped> <style lang="less" scoped>
.chat-window { .chat-window {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
border-radius: @radius-lg; border: 1px solid @service-card-line;
border-radius: @radius-base;
background: @white; background: @white;
box-shadow: @shadow-base; box-sizing: border-box;
overflow: hidden; overflow: hidden;
&__header { &__header {
.flex(row, flex-start); .flex(row, flex-start, center);
gap: 11px; gap: 16px;
height: 46px; height: 66px;
padding: 0 16px; // 21 × 0.77 padding: 0 22px;
border-bottom: 1px solid @project-divider; border-bottom: 1px solid @service-card-line;
background: @white; background: @white;
box-sizing: border-box;
} }
&__header-avatar { &__header-avatar {
flex-shrink: 0; flex-shrink: 0;
width: 28px; width: 33px;
height: 28px; height: 33px;
border-radius: @radius-round; border-radius: @radius-round;
background: @primary-strong; background: @primary-strong;
} }
&__header-name { &__header-name {
align-self: center; font-size: 13px;
font-size: 11px; font-weight: 500;
font-weight: 700; line-height: 18px;
color: @heading-color; color: @service-header-name;
} }
&__scroll { &__scroll {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: 56px; gap: 32px;
max-height: 60vh; height: 450px;
min-height: 347px; padding: 24px 22px;
padding: 22px 16px; background: @service-scroll-bg;
background: @bg-color-light;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box;
.scrollbar(); .scrollbar();
} }
&__divider { &__divider {
flex-shrink: 0; flex-shrink: 0;
margin-bottom: -42px; margin-bottom: -18px;
font-size: 11px; font-size: 12px;
color: @text-color-disabled; line-height: 18px;
color: @project-muted;
text-align: center; text-align: center;
} }
} }

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

@@ -2,6 +2,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { PageHead } from '@/components'
import { useServiceStore } from '@/stores/modules/service' import { useServiceStore } from '@/stores/modules/service'
import ChatWindow from './cpns/ChatWindow.vue' import ChatWindow from './cpns/ChatWindow.vue'
@@ -23,49 +24,33 @@ onMounted(() => {
<template> <template>
<div class="service"> <div class="service">
<header class="service__head"> <PageHead
<h1 class="service__title"> title="在线客服"
在线客服 slogan="在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题"
</h1> />
<p class="service__subtitle text-secondary">
在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题。
</p>
</header>
<div class="service__wrap">
<ChatWindow <ChatWindow
:messages="messages" :messages="messages"
@send="onSend" @send="onSend"
@send-file="onSendFile" @send-file="onSendFile"
/> />
</div> </div>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.service { .service {
.flex(column, flex-start, stretch); .flex(column, flex-start, stretch);
gap: @spacing-base; gap: 0;
max-width: @container-width; width: 100%;
min-height: calc(100vh - @header-height); padding-bottom: 60px;
margin: 0 auto; background: @message-page-bg;
padding: 25px @spacing-base @spacing-xxl;
background: @white;
&__head { &__wrap {
padding-left: 32px; width: 100%;
} padding: 0 70px;
box-sizing: border-box;
&__title {
font-size: @font-size-xxl;
font-weight: 700;
color: @home-ink;
}
&__subtitle {
margin-top: 12px;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
color: @contract-muted;
} }
} }
</style> </style>