From 8bb0ed98c2983e7f187be9cde6a3251002807e98 Mon Sep 17 00:00:00 2001
From: dreamhunter2333 <dreamhunter2333@gmail.com>
Date: Mon, 14 Sep 2026 21:49:08 +0800
Subject: [PATCH] style: compact split-pane mail list

---
 CHANGELOG.md                        |   2 +
 CHANGELOG_EN.md                     |   2 +
 frontend/src/components/MailBox.vue | 103 ++++++++++++++++++++++------
 3 files changed, 85 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6d9074c..4114cc8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@
 
 ### Improvements
 
+- style: |Frontend| 将分栏邮件列表改为紧凑布局，压缩信息间距并省略长主题和地址，减少窄列表换行，为正文保留更多空间
+
 ## v1.12.0
 
 ### Features
diff --git a/CHANGELOG_EN.md b/CHANGELOG_EN.md
index f141b500..4f41f470 100644
--- a/CHANGELOG_EN.md
+++ b/CHANGELOG_EN.md
@@ -14,6 +14,8 @@
 
 ### Improvements
 
+- style: |Frontend| Compact the split-pane mail list with tighter spacing and truncated subjects and addresses, reducing wrapping in narrow lists and preserving space for message content
+
 ## v1.12.0
 
 ### Features
diff --git a/frontend/src/components/MailBox.vue b/frontend/src/components/MailBox.vue
index 0777efa2..c2a466c3 100644
--- a/frontend/src/components/MailBox.vue
+++ b/frontend/src/components/MailBox.vue
@@ -425,34 +425,30 @@ onBeforeUnmount(() => {
           </div>
         </template>
         <template #1>
-          <div style="overflow: auto; min-height: 60vh; max-height: 100vh;">
+          <div class="mail-list-scroll mail-list-compact">
             <n-list hoverable clickable>
               <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
                 :class="[mailItemClass(row), { 'mail-list-unread': enableMailReadStatus && row.is_unread === 1 }]">
                 <template #prefix v-if="multiActionMode">
-                  <n-checkbox v-model:checked="row.checked" />
+                  <n-checkbox v-model:checked="row.checked" @click.stop />
                 </template>
-                <n-thing :title="row.subject">
-                  <template #description>
-                    <n-tag type="info">
-                      ID: {{ row.id }}
-                    </n-tag>
-                    <n-tag type="info">
+                <div class="mail-summary">
+                  <div class="mail-summary-header">
+                    <n-ellipsis class="mail-summary-sender">{{ row.source }}</n-ellipsis>
+                    <n-ellipsis class="mail-summary-date">
                       {{ utcToLocalDate(row.created_at, useUTCDate) }}
-                    </n-tag>
-                    <n-tag type="info">
-                      <n-ellipsis style="max-width: 240px;">
-                        {{ showEMailTo ? "FROM: " + row.source : row.source }}
-                      </n-ellipsis>
-                    </n-tag>
-                    <n-tag v-if="showEMailTo" type="info">
-                      <n-ellipsis style="max-width: 240px;">
-                        TO: {{ row.address }}
-                      </n-ellipsis>
-                    </n-tag>
-                    <AiExtractInfo :metadata="row.metadata" compact />
-                  </template>
-                </n-thing>
+                    </n-ellipsis>
+                  </div>
+                  <div class="mail-summary-subject" :title="`ID: ${row.id}
+${row.subject || ''}`">
+                    <span v-if="enableMailReadStatus && row.is_unread === 1" class="mail-summary-unread-dot" />
+                    <n-ellipsis>{{ row.subject || '—' }}</n-ellipsis>
+                  </div>
+                  <n-ellipsis v-if="showEMailTo" class="mail-summary-recipient">
+                    TO: {{ row.address }}
+                  </n-ellipsis>
+                  <AiExtractInfo :metadata="row.metadata" compact />
+                </div>
               </n-list-item>
             </n-list>
           </div>
@@ -664,6 +660,69 @@ onBeforeUnmount(() => {
   max-height: 100vh;
 }
 
+.mail-list-compact :deep(.n-list-item) {
+  height: auto;
+  padding: 8px 10px;
+}
+
+.mail-summary {
+  min-width: 0;
+  line-height: 20px;
+}
+
+.mail-summary-header,
+.mail-summary-subject {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.mail-summary-sender {
+  flex: 1;
+  min-width: 0;
+}
+
+.mail-summary-date {
+  max-width: 48%;
+  font-size: 12px;
+  opacity: 0.65;
+}
+
+.mail-summary-subject :deep(.n-ellipsis) {
+  min-width: 0;
+}
+
+.mail-summary-recipient {
+  display: block;
+  font-size: 12px;
+  opacity: 0.65;
+}
+
+.mail-list-unread .mail-summary-sender,
+.mail-list-unread .mail-summary-subject {
+  font-weight: 700;
+}
+
+.mail-summary-unread-dot {
+  flex: 0 0 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #2080f0;
+}
+
+.mail-summary :deep(.ai-extract-info) {
+  margin: 2px 0 0;
+}
+
+.mail-summary :deep(.n-tag) {
+  max-width: 100%;
+}
+
+.mail-summary :deep(.n-tag__content) {
+  min-width: 0;
+}
+
 .mail-list-thing,
 .mail-list-title,
 .mail-list-preview {