shenjianZ
/
email-unlimit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: fix sender|recipient display

This commit is contained in:
shenjianZ 2025-07-28 22:51:23 +08:00
parent d85b531e24
commit 7bfb909532
2 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.vue
View File

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

35
frontend/src/assets/main.css
View File

@ -201,8 +201,11 @@ body {
.message-list { .message-list {
width: 35%; width: 35%;
border-right: 1px solid var(--medium-grey); background-color: #ffffff;
padding-right: 1.5rem; border: 1px solid #d1d5db;
border-radius: var(--border-radius);
padding: 1.5rem;
box-sizing: border-box;
} }
.message-list-header { .message-list-header {
@ -245,6 +248,7 @@ body {
.message-item .from { .message-item .from {
font-weight: 700; font-weight: 700;
word-break: break-all;
} }
.message-item .subject { .message-item .subject {
@ -256,6 +260,11 @@ body {
.message-detail { .message-detail {
width: 65%; 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 { .empty-state, .loading-state {
@ -278,12 +287,14 @@ body {
.message-content-header p { .message-content-header p {
margin: 0; margin: 0;
color: var(--dark-grey); color: var(--dark-grey);
word-break: break-all;
} }
.message-body { .message-body {
background-color: #ffffff; background-color: #ffffff;
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: 8px;
border: 1px solid #d1d5db;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
height: 300px; height: 300px;
@ -433,4 +444,24 @@ body {
width: 95%; width: 95%;
padding: 1.5rem; 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)); /* 悬停时加深渐变 */
} }