76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<!-- 页面：在线客服（Service） -->
|
||
<script setup lang="ts">
|
||
import { onMounted } from 'vue'
|
||
import { storeToRefs } from 'pinia'
|
||
// 页面容器：只做组件引入、props 分发、事件中转，数据只经 store
|
||
import { useServiceStore } from '@/stores/modules/service'
|
||
import ChatWindow from './cpns/ChatWindow.vue'
|
||
|
||
const serviceStore = useServiceStore()
|
||
const { messages } = storeToRefs(serviceStore)
|
||
|
||
function onSend(content: string): void {
|
||
void serviceStore.send(content)
|
||
}
|
||
|
||
function onSendFile(file: File): void {
|
||
void serviceStore.sendFile(file)
|
||
}
|
||
|
||
onMounted(() => {
|
||
void serviceStore.fetchHistory()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="service">
|
||
<header class="service__head">
|
||
<h1 class="service__title">
|
||
在线客服
|
||
</h1>
|
||
<p class="service__subtitle text-secondary">
|
||
在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题。
|
||
</p>
|
||
</header>
|
||
|
||
<ChatWindow
|
||
:messages="messages"
|
||
@send="onSend"
|
||
@send-file="onSendFile"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.service {
|
||
.flex(column, flex-start, stretch);
|
||
gap: @spacing-base; // 头部→聊天卡 19 × 0.77
|
||
max-width: @container-width;
|
||
min-height: calc(100vh - @header-height);
|
||
margin: 0 auto;
|
||
padding: 25px @spacing-base @spacing-xxl; // 标题上留白 32 × 0.77
|
||
background: @white; // 设计 38 页面底色为纯白
|
||
|
||
// 设计 38：头部文案左缩进 42 × 0.77（标题 x112 相对内容边 x70）
|
||
&__head {
|
||
padding-left: 32px;
|
||
}
|
||
|
||
// 设计 38：大标题 36 → 28 / 700 / #121212
|
||
&__title {
|
||
font-size: @font-size-xxl;
|
||
font-weight: 700;
|
||
color: @home-ink;
|
||
}
|
||
|
||
// 设计 38：副标题 24 → 18 / 500 / #666666
|
||
&__subtitle {
|
||
margin-top: 12px; // 标题→副标题 15 × 0.77
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
color: @contract-muted;
|
||
}
|
||
}
|
||
</style>
|