|
|
|
@ -0,0 +1,387 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="message-center">
|
|
|
|
|
<!-- 左侧导航 -->
|
|
|
|
|
<div class="left-nav">
|
|
|
|
|
<div class="nav-title">消息中心</div>
|
|
|
|
|
<ul class="nav-list">
|
|
|
|
|
<li class="nav-item active">
|
|
|
|
|
<span>私信消息</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<span>评论回复</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<span>收到的赞</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<span>系统通知</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧主要内容区域 -->
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<!-- 顶部标题区域 -->
|
|
|
|
|
<div class="content-header">
|
|
|
|
|
<span class="header-title">私信消息</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 下方内容区域 -->
|
|
|
|
|
<div class="content-body">
|
|
|
|
|
<!-- 中间消息列表,使用 AiManager 的样式 -->
|
|
|
|
|
<aside class="sidebar">
|
|
|
|
|
<h2 class="sidebar-title">近期消息</h2>
|
|
|
|
|
<ul class="history-list">
|
|
|
|
|
<li class="history-item"
|
|
|
|
|
v-for="conversation in conversations"
|
|
|
|
|
:key="conversation.id"
|
|
|
|
|
@click="selectConversation(conversation)">
|
|
|
|
|
<span class="history-text">{{ conversation.title }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧聊天区域,使用 AiManager 的样式 -->
|
|
|
|
|
<main class="chat-area">
|
|
|
|
|
<div class="chat-content">
|
|
|
|
|
<!-- 对话消息 -->
|
|
|
|
|
<template v-if="currentConversation">
|
|
|
|
|
<div v-for="message in currentConversation.messages"
|
|
|
|
|
:key="message.id"
|
|
|
|
|
:class="message.isUser ? 'user-message' : 'bot-message'">
|
|
|
|
|
<template v-if="message.isUser">
|
|
|
|
|
<div class="message-text">{{ message.text }}</div>
|
|
|
|
|
<div class="user-avatar">
|
|
|
|
|
<img src="@/assets/images/aiRobot.png" alt="用户头像" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<div class="bot-avatar">
|
|
|
|
|
<img src="@/assets/images/aiRobot.png" alt="对方头像" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="message-text">{{ message.text }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 输入区域 -->
|
|
|
|
|
<div class="input-area">
|
|
|
|
|
<div class="input-container">
|
|
|
|
|
<textarea
|
|
|
|
|
class="message-input"
|
|
|
|
|
placeholder="输入消息..."
|
|
|
|
|
v-model="message"
|
|
|
|
|
></textarea>
|
|
|
|
|
<button class="send-button" @click="sendMessage">发送</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
|
|
|
|
// 定义消息类型
|
|
|
|
|
interface Message {
|
|
|
|
|
id: number;
|
|
|
|
|
text: string;
|
|
|
|
|
isUser: boolean;
|
|
|
|
|
timestamp: number;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 定义对话类型
|
|
|
|
|
interface Conversation {
|
|
|
|
|
id: number;
|
|
|
|
|
title: string;
|
|
|
|
|
messages: Message[];
|
|
|
|
|
timestamp: number;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 对话列表
|
|
|
|
|
const conversations = ref<Conversation[]>([
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
title: '用户A',
|
|
|
|
|
messages: [
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
text: '你好!',
|
|
|
|
|
isUser: false,
|
|
|
|
|
timestamp: Date.now() - 1000
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
timestamp: Date.now()
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
// 当前对话
|
|
|
|
|
const currentConversation = ref<Conversation | null>(null);
|
|
|
|
|
|
|
|
|
|
// 当前输入的消息
|
|
|
|
|
const message = ref('');
|
|
|
|
|
|
|
|
|
|
// 选择对话
|
|
|
|
|
const selectConversation = (conversation: Conversation) => {
|
|
|
|
|
currentConversation.value = conversation;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 发送消息
|
|
|
|
|
const sendMessage = () => {
|
|
|
|
|
if (!currentConversation.value || !message.value.trim()) return;
|
|
|
|
|
|
|
|
|
|
const newMessage: Message = {
|
|
|
|
|
id: Date.now(),
|
|
|
|
|
text: message.value.trim(),
|
|
|
|
|
isUser: true,
|
|
|
|
|
timestamp: Date.now()
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
currentConversation.value.messages.push(newMessage);
|
|
|
|
|
message.value = '';
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 修改消息中心的样式 */
|
|
|
|
|
.message-center {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: calc(100% - 100px); /* 减去侧边栏宽度 */
|
|
|
|
|
height: calc(100vh - 120px);
|
|
|
|
|
margin: 130px 20px 20px 350px; /* 左侧margin增加到120px,为侧边栏留出空间 */
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 左侧导航样式 */
|
|
|
|
|
.left-nav {
|
|
|
|
|
width: 15%; /* 调整为百分比宽度 */
|
|
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 2px solid rgba(133, 88, 207, 0.5);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
padding: 20px 0;
|
|
|
|
|
margin-right: 20px; /* 只保留右侧间距 */
|
|
|
|
|
height: 90%; /* 修改为100%填充 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-title {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item {
|
|
|
|
|
padding: 15px 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
margin: 5px 10px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item.active {
|
|
|
|
|
background: rgba(156, 136, 255, 0.2);
|
|
|
|
|
color: #9c88ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item:hover {
|
|
|
|
|
background: rgba(156, 136, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 主要内容区域样式 */
|
|
|
|
|
.main-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 顶部标题区域样式 */
|
|
|
|
|
.content-header {
|
|
|
|
|
height: 60px;
|
|
|
|
|
width:1400px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 2px solid rgba(133, 88, 207, 0.5);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-title {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 下方内容区域样式 */
|
|
|
|
|
.content-body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
gap: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 消息列表样式 */
|
|
|
|
|
.sidebar {
|
|
|
|
|
width: 15%; /* 调整为百分比宽度 */
|
|
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 2px solid rgba(133, 88, 207, 0.5);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
margin-right: 20px; /* 只保留右侧间距 */
|
|
|
|
|
height: calc(100% - 80px); /* 减去顶部区域的高度和间距 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-title {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
border-bottom: 1px solid rgba(133, 88, 207, 0.2);
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.history-list {
|
|
|
|
|
list-style: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.history-item {
|
|
|
|
|
padding: 15px 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border-bottom: 1px solid rgba(133, 88, 207, 0.2);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.history-item:hover {
|
|
|
|
|
background: rgba(156, 136, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.history-text {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 聊天区域样式 */
|
|
|
|
|
.chat-area {
|
|
|
|
|
width: 50%; /* 设置固定宽度比例 */
|
|
|
|
|
flex: none; /* 移除 flex: 1,避免自动扩展 */
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 2px solid rgba(133, 88, 207, 0.5);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
height: calc(100% - 80px); /* 减去顶部区域的高度和间距 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-message {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bot-message {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-text {
|
|
|
|
|
max-width: 70%;
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
margin: 0 12px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-message .message-text {
|
|
|
|
|
background: rgba(156, 136, 255, 0.9);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bot-avatar,
|
|
|
|
|
.user-avatar {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-area {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-top: 1px solid rgba(133, 88, 207, 0.2);
|
|
|
|
|
background: rgba(255, 255, 255, 0.3);
|
|
|
|
|
border-radius: 0 0 10px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 100px;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
border: 1px solid rgba(133, 88, 207, 0.3);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
resize: none;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-input:focus {
|
|
|
|
|
border-color: #9c88ff;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.send-button {
|
|
|
|
|
padding: 8px 24px;
|
|
|
|
|
background: linear-gradient(45deg, #9c88ff, #ff6b9d);
|
|
|
|
|
color: white;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.send-button:hover {
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
box-shadow: 0 4px 15px rgba(156, 136, 255, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 自定义滚动条 */
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
background: rgba(200, 180, 255, 0.1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(156, 136, 255, 0.3);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: rgba(156, 136, 255, 0.5);
|
|
|
|
|
}
|
|
|
|
|
</style>
|