pizvue73f
/
unilife
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改后的私信界面

Browse Source
main
勿妄 1 week ago
parent 1e1ed6ee03
commit ee406304c0
2 changed files with 496 additions and 85 deletions
Show Stats Download Patch File Download Diff File

194
Front/vue-unilife/src/views/DirectMessage.vue
Unescape View File

@ -1,23 +1,7 @@
<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>
<!-- 使用导航组件 -->
<MessageNav @nav-change="handleNavChange" />
<!-- 右侧主要内容区域 -->
<div class="main-content">
@ -43,6 +27,16 @@
<!-- 右侧聊天区域，使用 AiManager 的样式 -->
<main class="chat-area">
<!-- 添加用户信息区域 -->
<div class="chat-header">
<div class="user-info">
<div class="chat-avatar">
<img src="@/assets/images/aiRobot.png" alt="用户头像" />
</div>
<span class="chat-username">{{ currentConversation?.title || '选择一个聊天' }}</span>
</div>
</div>
<div class="chat-content">
<!-- 对话消息 -->
<template v-if="currentConversation">
@ -84,6 +78,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import MessageNav from '@/components/MessageNav.vue';
// 定义消息类型
interface Message {
@ -143,6 +138,12 @@ const sendMessage = () => {
currentConversation.value.messages.push(newMessage);
message.value = '';
};
// 处理导航切换
const handleNavChange = (index: number) => {
// 根据需要处理导航切换逻辑
console.log('导航切换到:', index);
};
</script>
<style scoped>
@ -156,43 +157,6 @@ const sendMessage = () => {
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;
@ -203,29 +167,29 @@ const sendMessage = () => {
/* 顶部标题区域样式 */
.content-header {
height: 60px;
width:1400px;
height: 70px;
width:1267px;
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;
margin-bottom: 10px;
display: flex;
align-items: center;
padding: 0 20px;
}
.header-title {
font-size: 20px;
font-size: 30px;
font-weight: bold;
color: #333;
color: #7e7e7e;
}
/* 下方内容区域样式 */
.content-body {
display: flex;
flex: 1;
gap: 20px;
gap: 0; /* 移除间距 */
}
/* 消息列表样式 */
@ -234,16 +198,17 @@ const sendMessage = () => {
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); /* 减去顶部区域的高度和间距 */
border-radius: 10px 0 0 10px; /* 修改右边圆角为0 */
margin-right: 0; /* 移除右侧间距 */
height: 93.5%; /* 减去顶部区域的高度和间距 */
}
.sidebar-title {
padding: 20px;
font-size: 20px;
padding: 13px;
font-size: 26px;
border-bottom: 1px solid rgba(133, 88, 207, 0.2);
color: #333;
color: #7e7e7e;
text-align: center;
}
.history-list {
@ -265,19 +230,60 @@ const sendMessage = () => {
.history-text {
color: #333;
font-size: 22px;
}
/* 聊天区域样式 */
.chat-area {
width: 50%; /* 设置固定宽度比例 */
width: 60%; /* 设置固定宽度比例 */
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); /* 减去顶部区域的高度和间距 */
border-radius: 0 10px 10px 0; /* 修改左边圆角为0 */
border-left: none; /* 移除左边框 */
height: 93.5%; /* 减去顶部区域的高度和间距 */
}
/* 聊天区域顶部用户信息样式 */
.chat-header {
padding: 15px 20px;
border-bottom: 1px solid rgba(133, 88, 207, 0.2);
background: rgba(255, 255, 255, 0.7);
border-radius: 0 10px 0 0;
height: 56px;
display: flex;
justify-content: center; /* 添加水平居中 */
align-items: center; /* 添加垂直居中 */
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
justify-content: center; /* 添加水平居中 */
}
.chat-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.chat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-username {
font-size: 22px;
font-weight: 500;
color: #333;
text-align: center; /* 文字居中 */
}
.chat-content {
@ -296,6 +302,7 @@ const sendMessage = () => {
display: flex;
justify-content: flex-start;
margin-bottom: 10px;
font-size: 20px;
}
.message-text {
@ -305,6 +312,7 @@ const sendMessage = () => {
background: rgba(255, 255, 255, 0.9);
margin: 0 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 20px;
}
.user-message .message-text {
@ -321,44 +329,56 @@ const sendMessage = () => {
}
.input-area {
padding: 20px;
border-top: 1px solid rgba(133, 88, 207, 0.2);
background: rgba(255, 255, 255, 0.3);
padding: 20px; /* 减小内边距 */
border-top: 1px solid rgba(200, 180, 255, 0.3);
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
height: 200px; /* 从300px调整为200px */
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 0 10px 10px;
}
.input-container {
display: flex;
align-items: center;
width: 100%;
gap: 16px;
align-items: flex-end;
position: relative;
}
.message-input {
flex: 1;
height: 100px;
padding: 12px;
border: 1px solid rgba(133, 88, 207, 0.3);
border-radius: 8px;
height: 150px; /* 从230px调整为150px，保持比例 */
padding: 16px;
border: 1px solid rgba(200, 180, 255, 0.5);
border-radius: 12px;
resize: none;
margin-right: 12px;
font-size: 16px;
font-size: 22px; /* 稍微调小字体 */
font-family: inherit;
outline: none;
background: rgba(255, 255, 255, 0.9);
transition: all 0.3s;
transition: border-color 0.3s;
}
.message-input:focus {
border-color: #9c88ff;
outline: none;
}
.send-button {
padding: 8px 24px;
position: absolute;
bottom: 15px; /* 从20px调整为15px */
right: 15px; /* 从20px调整为15px */
padding: 12px 24px;
background: linear-gradient(45deg, #9c88ff, #ff6b9d);
color: white;
border: none;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
transition: transform 0.2s, box-shadow 0.2s;
white-space: nowrap;
}
.send-button:hover {
@ -366,6 +386,10 @@ const sendMessage = () => {
box-shadow: 0 4px 15px rgba(156, 136, 255, 0.3);
}
.send-button:active {
transform: translateY(0);
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 6px;

387
Front/vue-unilife/src/views/DirectMessage.vue.bak
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save