style: compact split-pane mail list

CHANGELOG.md

@@ -14,6 +14,8 @@
 
 ### Improvements
 
+- style: |Frontend| 将分栏邮件列表改为紧凑布局，压缩信息间距并省略长主题和地址，减少窄列表换行，为正文保留更多空间
+
 ## v1.12.0
 
 ### Features

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

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">
+                <div class="mail-summary">
-                  <template #description>
+                  <div class="mail-summary-header">
-                    <n-tag type="info">
+                    <n-ellipsis class="mail-summary-sender">{{ row.source }}</n-ellipsis>
-                      ID: {{ row.id }}
+                    <n-ellipsis class="mail-summary-date">
-                    </n-tag>
-                    <n-tag type="info">
                       {{ 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>
+                  </div>
-                    <n-tag v-if="showEMailTo" type="info">
+                  <div class="mail-summary-subject" :title="`ID: ${row.id}
-                      <n-ellipsis style="max-width: 240px;">
+${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>
-                    </n-tag>
                   <AiExtractInfo :metadata="row.metadata" compact />
-                  </template>
+                </div>
-                </n-thing>
               </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 {