From d6e015afe19b04e5d498a52c6dd20e0c513f74ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8B=BF=E5=A6=84?= <3124832605@qq.com>
Date: Fri, 30 May 2025 16:10:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=90=8E=E7=9A=84=E7=A7=81?=
 =?UTF-8?q?=E4=BF=A1=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-unilife/src/components/MessageNav.vue |  76 ++++
 Front/vue-unilife/src/views/DirectMessage.vue | 194 +++++----
 .../src/views/DirectMessage.vue.bak           | 387 ++++++++++++++++++
 3 files changed, 572 insertions(+), 85 deletions(-)
 create mode 100644 Front/vue-unilife/src/components/MessageNav.vue
 create mode 100644 Front/vue-unilife/src/views/DirectMessage.vue.bak

diff --git a/Front/vue-unilife/src/components/MessageNav.vue b/Front/vue-unilife/src/components/MessageNav.vue
new file mode 100644
index 0000000..efd3404
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/Front/vue-unilife/src/views/DirectMessage.vue b/Front/vue-unilife/src/views/DirectMessage.vue
index 5395732..083ff84 100644
--- a/Front/vue-unilife/src/views/DirectMessage.vue
+++ b/Front/vue-unilife/src/views/DirectMessage.vue
@@ -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;
diff --git a/Front/vue-unilife/src/views/DirectMessage.vue.bak b/Front/vue-unilife/src/views/DirectMessage.vue.bak
new file mode 100644
index 0000000..5395732
--- /dev/null
+++ b/Front/vue-unilife/src/views/DirectMessage.vue.bak
@@ -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>
\ No newline at end of file