私信界面

# Conflicts:
#	Front/vue-unilife/src/routers/routers.ts

Front/vue-unilife/src/components/HeaderBar.vue

@@ -9,6 +9,7 @@
 <template>
     <header class ="header-bar" >
       <!-- 左侧图标组 -->
+      <img src = "@/assets/images/logo.png" alt="Logo" class="logo" />
       <div class="left-icons">
         <router-link to="/unilifeHome" class="icon-btn" title="首页">
           <el-icon  class="icon-btn" :size="24">
@@ -20,12 +21,12 @@
               <MessageBox />
           </el-icon>
         </router-link>
-        <router-link to="/self" class="icon-btn" title="日程">
+        <router-link to="/personal/curriculum" class="icon-btn" title="日程">
           <el-icon class = "icon-btn" :size="24">
             <Calendar />
           </el-icon>
         </router-link>
-        <router-link to="/assistant" class="icon-btn" title="AI助手">
+        <router-link to="/personal/ai" class="icon-btn" title="AI助手">
             <el-icon class = "icon-btn" :size="24">
               <Cpu />
             </el-icon>
@@ -45,6 +46,11 @@
             <User />
           </el-icon>
         </router-link>
+        <router-link to="/register" class="icon-btn" title="注册">
+          <el-icon class = "icon-btn" :size="24">
+          <Message/>
+          </el-icon>
+        </router-link>
       </div>
     </header>
   </template>
@@ -75,10 +81,14 @@
   
   .left-icons,
   .right-section {
+    flex:7;
     padding:50px;
     display: flex;
     align-items: center;
   }
+  .right-section{
+    justify-content: flex-end;
+  }
   
   .icon-btn {
     margin: 0 10px;
@@ -98,4 +108,14 @@
     color: #303133;
     cursor: pointer;
   }
+
+  .logo
+  {
+    flex:1;
+    width: 120px;
+    height: 120px;
+    margin-left: 20px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
   </style>

Front/vue-unilife/src/components/MarkdownRender.vue

@@ -38,7 +38,7 @@ async function renderMarkdown() {
 watch(() => props.content, renderMarkdown, { immediate: true })
 </script>
 
-<style scoped>
+<style>
 .markdown-body {
   font-size: 16px;
   line-height: 1.8;

Front/vue-unilife/src/components/MessageNav.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="left-nav">
+      <div class="nav-title">消息中心</div>
+      <ul class="nav-list">
+        <li 
+          v-for="(item, index) in navItems" 
+          :key="index"
+          :class="['nav-item', { active: activeIndex === index }]"
+          @click="handleNavClick(index)"
+        >
+          <span>{{ item.text }}</span>
+        </li>
+      </ul>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue';
+  
+  const emit = defineEmits(['nav-change']);
+  
+  const activeIndex = ref(0);
+  
+  const navItems = [
+    { text: '私信消息' },
+    { text: '评论回复' },
+    { text: '收到的赞' },
+    { text: '系统通知' }
+  ];
+  
+  const handleNavClick = (index: number) => {
+    activeIndex.value = index;
+    emit('nav-change', index);
+  };
+  </script>
+  
+  <style scoped>
+  .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;
+    margin-left: 100px;
+    height: 90%;
+  }
+  
+  .nav-title {
+    font-size: 32px;
+    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;
+    font-size: 24px;
+  }
+  
+  .nav-item.active {
+    background: rgba(156, 136, 255, 0.2);
+    color: #9c88ff;
+    font-size: 24px;
+  }
+  
+  .nav-item:hover {
+    background: rgba(156, 136, 255, 0.1);
+  }
+  </style>

Front/vue-unilife/src/components/Personal.vue

@@ -69,14 +69,14 @@ export default defineComponent({
             <div class="text">测试样例3</div>
           </router-link>
         </li>
-        <li :class="{active:route.name === 'AiManager'}" @click="setActive(4)">
-          <router-link :to="{name:'Manager'}">
+        <li :class="{active:route.name === 'AIManager'}" @click="setActive(4)">
+          <router-link :to="{name:'AIManager'}">
             <div class="icon">
               <div class="imageBox">
               <img src="@/assets/images/个人.png">
               </div>
             </div>
-            <div class="text">测试样例4</div>
+            <div class="text">AI助手</div>
           </router-link>
         </li>
     </ul>

Front/vue-unilife/src/routers/routers.ts

@@ -6,6 +6,7 @@ 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> = [
     {
@@ -58,6 +59,19 @@ const routes:Array<RouteRecordRaw> = [
         name:'PostDetail',
         component: () => import('@/views/PostDetailPage.vue'),
     },
+    {
+        path: '/postEdit',
+        name: 'PostEdit',
+        component: () => import('@/views/PostEditView.vue'),
+        meta:{
+            hideHeader: true,
+        }
+    },
+    {
+        path: '/message',
+        name: 'DirectMessage',
+        component: DirectMessage,
+    }
 ];
 
 const router = createRouter({

Front/vue-unilife/src/utils/time.ts

@@ -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();
+}

Front/vue-unilife/src/views/AiManager.vue

@@ -6,7 +6,7 @@
       <!-- 主容器 -->
       <div class="main-container">
         <!-- 侧边栏 -->
-        <aside class="sidebar">
+        <aside class="sidebar card">
           <h2 class="sidebar-title">历史对话</h2>
           <ul class="history-list">
             <li class="history-item" 
@@ -31,7 +31,7 @@
         </aside>
   
         <!-- 聊天区域 -->
-        <main class="chat-area">
+        <main class="chat-area card">
           <div class="chat-content">
             <!-- 欢迎消息始终显示在最上方 -->
             <div class="welcome-message">

Front/vue-unilife/src/views/DirectMessage.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="message-center">
+    <!-- 使用导航组件 -->
+    <MessageNav @nav-change="handleNavChange" />
+
+    <!-- 右侧主要内容区域 -->
+    <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-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">
+              <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';
+import MessageNav from '@/components/MessageNav.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 = '';
+};
+
+// 处理导航切换
+const handleNavChange = (index: number) => {
+  // 根据需要处理导航切换逻辑
+  console.log('导航切换到:', index);
+};
+</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;
+}
+
+/* 主要内容区域样式 */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+}
+
+/* 顶部标题区域样式 */
+.content-header {
+  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: 10px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.header-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: #7e7e7e;
+}
+
+/* 下方内容区域样式 */
+.content-body {
+  display: flex;
+  flex: 1;
+  gap: 0; /* 移除间距 */
+}
+
+/* 消息列表样式 */
+.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 0 0 10px; /* 修改右边圆角为0 */
+  margin-right: 0; /* 移除右侧间距 */
+  height: 93.5%; /* 减去顶部区域的高度和间距 */
+}
+
+.sidebar-title {
+  padding: 13px;
+  font-size: 26px;
+  border-bottom: 1px solid rgba(133, 88, 207, 0.2);
+  color: #7e7e7e;
+  text-align: center;
+}
+
+.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;
+  font-size: 22px;
+}
+
+/* 聊天区域样式 */
+.chat-area {
+  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: 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 {
+  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;
+  font-size: 20px;
+}
+
+.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);
+  font-size: 20px;
+}
+
+.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(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;
+  width: 100%;
+  gap: 16px;
+  align-items: flex-end;
+  position: relative;
+}
+
+.message-input {
+  flex: 1;
+  height: 150px;  /* 从230px调整为150px，保持比例 */
+  padding: 16px;
+  border: 1px solid rgba(200, 180, 255, 0.5);
+  border-radius: 12px;
+  resize: none;
+  font-size: 22px;  /* 稍微调小字体 */
+  font-family: inherit;
+  outline: none;
+  background: rgba(255, 255, 255, 0.9);
+  transition: border-color 0.3s;
+}
+
+.message-input:focus {
+  border-color: #9c88ff;
+}
+
+.send-button {
+  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;
+  transition: transform 0.2s, box-shadow 0.2s;
+  white-space: nowrap;
+}
+
+.send-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(156, 136, 255, 0.3);
+}
+
+.send-button:active {
+  transform: translateY(0);
+}
+
+/* 自定义滚动条 */
+::-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>

Front/vue-unilife/src/views/PostDetailPage.vue

@@ -81,7 +81,7 @@ onMounted(() => {
   gap:16px;
 
   .sidebar{
-    flex:2;
+    width:15%;
     position:sticky;
     height: fit-content;
     border-radius: 8px;
@@ -90,13 +90,13 @@ onMounted(() => {
   }
 
   .content{
-    flex: 8;
+    width: 60%;
     padding: 16px;
     border-radius: 8px;
   }
 
   .author-info{
-    flex:3;
+    width: 20%;
     position:sticky;
     flex-shrink:0;
     height:fit-content;

Front/vue-unilife/src/views/PostEditView.vue

@@ -3,7 +3,9 @@
   <div class="post-editor">
     <!-- 顶部工具栏 -->
     <div class="toolbar">
+      <router-link to = '/personal'>
       <el-button :icon="ArrowLeft" circle></el-button>
+      </router-link>
       <el-select v-model="selectedCategory" placeholder="选择分区" class="category-select" size="large">
         <el-option
           v-for="item in categories"
@@ -40,7 +42,6 @@
             <el-icon size = 30px v-else><Plus/></el-icon>
         </el-upload>
           <template #footer>
-            <button class = "btn btn-primary" @click="uploadPictureDialog = false,previewUrl = ''">取消</button>
             <button class = "btn btn-primary" @click="uploadPictureDialog = false ,previewUrl = ''">确定</button>
           </template>
       </el-dialog>
@@ -70,10 +71,7 @@
       <!-- 右侧Markdown预览框 -->
       <div class="preview-pane card">
         <div class="editor-title">{{ title || '请输入文章标题' }}</div>
-        <div
-          class="markdown-preview"
-          v-html="DOMPurify.sanitize(compiledMarkdown)"
-        ></div>
+        <MarkdownRender :content="markdownText" />
       </div>
     </div>
 
@@ -88,6 +86,8 @@ import type { UploadFile } from 'element-plus'
 import { markedHighlight } from 'marked-highlight'
 import 'highlight.js/styles/github.css'
 import { ArrowLeft, Document, Picture, ArrowRight } from '@element-plus/icons-vue'
+import MarkdownRender from '@/components/MarkdownRender.vue'
+import { useRoute } from 'vue-router'
 import DOMPurify from 'dompurify'
 
 const title = ref('')
@@ -251,14 +251,15 @@ function insertAtCursor(text: string) {
     display: flex;
     flex-direction:row;
     justify-content: space-between;
+    align-items: flex-start;
     gap: 16px;
     margin-top:20px;
     min-height: 100%;
 
     .editor-pane,
     .preview-pane {
+      min-height:93%;
       width:50%;
-      height:auto;
       padding: 16px;
       background: #fff;
       border-radius: 8px;
@@ -275,17 +276,11 @@ function insertAtCursor(text: string) {
     .markdown-input {
       font-size:20px;
       width: 100%;
+      
+      ::v-deep(.el-textarea__inner) {
+        border:none !important;
+        box-shadow:none !important;
+      } 
     }
-
-    .markdown-preview {
-      padding-top: 10px;
-
-      img {
-        max-width: 50%;
-        height: auto;
-        display: block;
-        margin: 0.5rem 0;
-      }
-    }
-  }
+}
 </style>