feat: fix sender|recipient display

frontend/src/App.vue

@@ -59,12 +59,12 @@
         </div>
         <div class="message-detail">
           <div v-if="!selectedMessage" class="empty-state">
-            <p>请从左侧选择一封邮件查看</p>
+            <p>请从选择一封邮件查看</p>
           </div>
           <div v-else>
             <div class="message-content-header">
               <h3>{{ selectedMessage.subject }}</h3>
-              <p><strong>发件人:</strong> {{ selectedMessage.sender }}</p>
+              <p class="from-line"><strong>发件人:</strong> {{ selectedMessage.sender }}</p>
               <p><strong>收件人:</strong> {{ selectedMessage.recipient }}</p>
             </div>
             <div class="message-body">

frontend/src/assets/main.css

@@ -201,8 +201,11 @@ body {
 
 .message-list {
   width: 35%;
-  border-right: 1px solid var(--medium-grey);
-  padding-right: 1.5rem;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+  box-sizing: border-box;
 }
 
 .message-list-header {
@@ -245,6 +248,7 @@ body {
 
 .message-item .from {
   font-weight: 700;
+  word-break: break-all;
 }
 
 .message-item .subject {
@@ -256,6 +260,11 @@ body {
 
 .message-detail {
   width: 65%;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+  box-sizing: border-box;
 }
 
 .empty-state, .loading-state {
@@ -278,12 +287,14 @@ body {
 .message-content-header p {
     margin: 0;
     color: var(--dark-grey);
+    word-break: break-all;
 }
 
 .message-body {
   background-color: #ffffff;
   padding: 1rem;
   border-radius: 8px;
+  border: 1px solid #d1d5db;
   white-space: pre-wrap;
   word-wrap: break-word;
   height: 300px;
@@ -434,3 +445,23 @@ body {
     padding: 1.5rem;
   }
 }
+
+/* 方案二优化版：现代渐变风格 */
+::-webkit-scrollbar {
+  width: 8px; /* 保持一个舒适的宽度 */
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--light-grey); /* 轨道颜色与背景融为一体 */
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(45deg, var(--light-purple), var(--primary-purple)); /* 调整渐变角度 */
+  border-radius: 4px; /* 圆角调整为一半的宽度 */
+  border: 2px solid var(--light-grey); /* 使用轨道颜色作为边框，营造内边距效果 */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(45deg, var(--primary-purple), var(--dark-purple)); /* 悬停时加深渐变 */
+}