私信界面

main
勿妄 1 week ago
parent 1362d573ec
commit 4111a053b6

@ -1,13 +1,14 @@
import type { RouteRecordRaw } from 'vue-router';
import { createRouter,createWebHistory } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router';
import LogPage from '../views/LogPage.vue';
import Personal from '@/components/Personal.vue';
import Manager from '@/views/AcountManager.vue';
import PersonalHome from '@/views/Home.vue';
import ForumHome from '@/views/ForumHome.vue';
import Curriculum from '@/views/Curriculum.vue';
import DirectMessage from '@/views/DirectMessage.vue';
const routes:Array<RouteRecordRaw> = [
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/log',
@ -18,44 +19,49 @@ const routes:Array<RouteRecordRaw> = [
component: () => import('@/views/404.vue'),
},
{
path:'/log',
path: '/log',
name: 'LogPage',
component: LogPage
},
{
path:'/personal',
path: '/personal',
name: 'Personal',
component: Personal,
children: [
{
path:'',
name:'Home',
component:PersonalHome,
path: '',
name: 'Home',
component: PersonalHome,
},
{
path:'manager',
path: 'manager',
name: 'Manager',
component:Manager,
component: Manager,
},
{
path:'ai',
path: 'ai',
redirect: '/personal',
},
{
path:'curriculum',
name:'Curriculum',
component:Curriculum,
},
path: 'curriculum',
name: 'Curriculum',
component: Curriculum,
}
]
},
{
path:'/uniLifeHome',
path: '/message',
name: 'DirectMessage',
component: DirectMessage,
},
{
path: '/uniLifeHome',
name: 'ForumHome',
component: ForumHome,
},
{
path:'/post/:id',
name:'PostDetail',
path: '/post/:id',
name: 'PostDetail',
component: () => import('@/views/PostDetailPage.vue'),
},
];

@ -0,0 +1,41 @@
export function formatTime(timestamp: number): string {
const date = new Date(timestamp);
const now = new Date();
const diff = now.getTime() - timestamp;
// 不到1分钟
if (diff < 60 * 1000) {
return '刚刚';
}
// 不到1小时
if (diff < 60 * 60 * 1000) {
const minutes = Math.floor(diff / (60 * 1000));
return `${minutes}分钟前`;
}
// 不到24小时
if (diff < 24 * 60 * 60 * 1000) {
const hours = Math.floor(diff / (60 * 60 * 1000));
return `${hours}小时前`;
}
// 不到7天
if (diff < 7 * 24 * 60 * 60 * 1000) {
const days = Math.floor(diff / (24 * 60 * 60 * 1000));
return `${days}天前`;
}
// 同一年
if (date.getFullYear() === now.getFullYear()) {
return `${date.getMonth() + 1}${date.getDate()}${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
}
// 其他情况显示完整日期
return `${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
}
// 补零函数
function padZero(num: number): string {
return num < 10 ? `0${num}` : num.toString();
}

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