feat: 增加全宽列表视图功能 (#1079)

* feat(mailbox): add list view mode

- Add a toggleable list view for the mailbox, with a settings option and back button.
- deselect mail on second click in list view
- set current mail on row click in multi-action mode

* feat(mailbox): add configurable body preview line clamp

Allow users to set the number of preview lines (0–5) for mail body in the list view via a slider in Appearance settings. Includes i18n support for the new option and its "Off" state.

* chore: clarify some i18n message in settings

include the following changes:
- The original "Mailbox Split Size" to "Left list width in two-column mailbox view"
- The description of new feature "Full-width mailbox list view"
sync all languages with the updated message

* docs: update changelog with recent UI improvements

- Added mailbox full-width list view and body preview lines settings
- Extended left panel width ratio range to 0
- Included English changelog translations

* docs: fix CHANGELOG improvements types

* fix: enable mail list preview line clamp settings on mobile

CHANGELOG.md

@@ -10,6 +10,9 @@
 
 ### Features
 
+- feat: |Frontend| 邮箱新增「邮箱全宽列表视图」开关（在外观设置中控制），开启后默认全宽列表展示邮件标题与正文预览，点击单封邮件再展开为双栏，再次点击同一封邮件可回到列表视图；多选模式下点击邮件会同步切换勾选状态与右侧预览，并禁用同邮件点击收回列表，展开时双栏左侧列表宽度仍遵循「邮箱双栏视图左侧列表宽度占比」配置；默认关闭，保留原有双栏行为
+- feat: |Frontend| 邮箱全宽列表视图新增「正文预览行数」配置（在外观设置中控制），可设置邮件正文预览的最大行数，默认 2 行，0 表示关闭预览
+
 ### Bug Fixes
 
 - fix: |AI 提取| 强化提示词，要求 AI 保持邮件原始链接域名，避免小模型改写验证链接域名导致错误跳转（issue #1072）
@@ -18,6 +21,8 @@
 
 ### Improvements
 
+- feat: |Frontend| 「邮箱双栏视图左侧列表宽度占比」最小值由 0.25 放宽至 0，左侧列表可完全折叠使正文近乎全屏，刻度增加 0 点；收件箱与发件箱的双栏拆分同步生效，并优化外观设置文案以明确该比例控制左侧邮件列表宽度
+
 ## v1.9.0
 
 ### Features

CHANGELOG_EN.md

@@ -10,6 +10,9 @@
 
 ### Features
 
+- feat: |Frontend| Add a "Full-width mailbox list view" toggle in Appearance settings. When enabled, the mailbox shows a full-width list of subjects and body previews by default; clicking a mail expands it into the two-pane split view, clicking the same mail again returns to the list view; in multi-select mode, clicking a mail updates both its checked state and the right-side preview while disabling same-mail collapse, and the split width still follows the "Left list width in two-column mailbox view" setting. Defaults to off, preserving the original two-pane behavior
+- feat: |Frontend| Add "Body Preview Lines" in Appearance settings for the full-width mailbox list view, allowing runtime control over the body-preview clamp. It defaults to 2 lines, and 0 disables previews
+
 ### Bug Fixes
 
 - fix: |AI Extract| Strengthen the prompt to keep original link domains from the email, preventing small models from rewriting verification-link domains (issue #1072)
@@ -18,6 +21,8 @@
 
 ### Improvements
 
+- feat: |Frontend| Lower the "Left list width in two-column mailbox view" minimum from 0.25 to 0 so the left list pane can fully collapse for a near-fullscreen content view, with a 0 mark added; applies to both the inbox and send-box two-pane splits, and clarifies the Appearance setting label so it is clear the value controls the left mail list width
+
 ## v1.9.0
 
 ### Features

frontend/src/components/MailBox.vue

@@ -60,7 +60,7 @@ const props = defineProps({
 const localFilterKeyword = ref('')
 
 const {
-  isDark, mailboxSplitSize, indexTab, loading, useUTCDate,
+  isDark, mailboxSplitSize, mailListView, mailListPreviewLineClamp, indexTab, loading, useUTCDate,
   autoRefresh, configAutoRefreshInterval, sendMailModel
 } = useGlobalState()
 const autoRefreshInterval = ref(configAutoRefreshInterval.value)
@@ -71,6 +71,12 @@ const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 
+const mailListPreviewLineClampValue = computed(() => {
+  const value = Number(mailListPreviewLineClamp.value)
+  if (!Number.isFinite(value)) return 0
+  return Math.min(5, Math.max(0, Math.round(value)))
+})
+
 // Computed property for filtered data (only filter current page)
 const data = computed(() => {
   if (!localFilterKeyword.value || localFilterKeyword.value.trim() === '') {
@@ -183,7 +189,7 @@ const refresh = async () => {
       count.value = totalCount;
     }
     curMail.value = null;
-    if (!isMobile.value && data.value.length > 0) {
+    if (!isMobile.value && !mailListView.value && data.value.length > 0) {
       curMail.value = data.value[0];
     }
   } catch (error) {
@@ -202,6 +208,11 @@ const backFirstPageAndRefresh = async () => {
 const clickRow = async (row) => {
   if (multiActionMode.value) {
     row.checked = !row.checked;
+    curMail.value = row;
+    return;
+  }
+  if (mailListView.value && curMail.value?.id === row.id) {
+    curMail.value = null;
     return;
   }
   curMail.value = row;
@@ -375,8 +386,13 @@ onBeforeUnmount(() => {
             clearable />
         </n-space>
       </div>
-      <n-split class="left" direction="horizontal" :max="0.75" :min="0.25" :default-size="mailboxSplitSize"
-        :on-update:size="onSpiltSizeChange">
+      <n-split class="left" direction="horizontal" :max="0.75" :min="0" :resize-trigger-size="8"
+        :default-size="mailboxSplitSize" :on-update:size="onSpiltSizeChange" v-if="!mailListView || curMail">
+        <template #resize-trigger>
+          <div class="split-handle">
+            <div class="split-handle__grip" />
+          </div>
+        </template>
         <template #1>
           <div style="overflow: auto; min-height: 60vh; max-height: 100vh;">
             <n-list hoverable clickable>
@@ -412,15 +428,25 @@ onBeforeUnmount(() => {
         </template>
         <template #2>
           <div v-if="curMail" style="margin: 8px;">
-            <n-flex justify="space-between">
-              <n-button @click="prevMail" :disabled="!canGoPrevMail" text size="small">
-                <template #icon>
-                  <n-icon>
-                    <ArrowBackIosNewFilled />
-                  </n-icon>
-                </template>
-                {{ t('prevMail') }}
-              </n-button>
+            <n-flex justify="space-between" align="center">
+              <n-space :wrap="false" align="center">
+                <n-button v-if="mailListView" @click="curMail = null" text size="small">
+                  <template #icon>
+                    <n-icon>
+                      <ArrowBackIosNewFilled />
+                    </n-icon>
+                  </template>
+                  {{ t('backToList') }}
+                </n-button>
+                <n-button @click="prevMail" :disabled="!canGoPrevMail" text size="small">
+                  <template #icon>
+                    <n-icon>
+                      <ArrowBackIosNewFilled />
+                    </n-icon>
+                  </template>
+                  {{ t('prevMail') }}
+                </n-button>
+              </n-space>
               <n-button @click="nextMail" :disabled="!canGoNextMail" text size="small" icon-placement="right">
                 <template #icon>
                   <n-icon>
@@ -446,6 +472,48 @@ onBeforeUnmount(() => {
           </n-card>
         </template>
       </n-split>
+      <div v-else class="mail-list-scroll">
+        <n-list hoverable clickable>
+          <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+            :class="mailItemClass(row)">
+            <template #prefix v-if="multiActionMode">
+              <n-checkbox v-model:checked="row.checked" />
+            </template>
+            <n-thing class="mail-list-thing">
+              <template #header>
+                <n-ellipsis class="mail-list-title">
+                  {{ row.subject }}
+                </n-ellipsis>
+              </template>
+              <template #description>
+                <div class="mail-list-meta">
+                  <n-tag type="info">
+                    ID: {{ row.id }}
+                  </n-tag>
+                  <n-tag type="info">
+                    {{ utcToLocalDate(row.created_at, useUTCDate) }}
+                  </n-tag>
+                  <n-tag type="info">
+                    <n-ellipsis class="mail-list-meta-text">
+                      {{ showEMailTo ? "FROM: " + row.source : row.source }}
+                    </n-ellipsis>
+                  </n-tag>
+                  <n-tag v-if="showEMailTo" type="info">
+                    <n-ellipsis class="mail-list-meta-text">
+                      TO: {{ row.address }}
+                    </n-ellipsis>
+                  </n-tag>
+                  <AiExtractInfo :metadata="row.metadata" compact />
+                </div>
+              </template>
+              <n-ellipsis v-if="row.text && mailListPreviewLineClampValue > 0"
+                :line-clamp="mailListPreviewLineClampValue" class="mail-list-preview" :tooltip="false">
+                {{ row.text }}
+              </n-ellipsis>
+            </n-thing>
+          </n-list-item>
+        </n-list>
+      </div>
     </div>
     <div class="left" v-else>
       <n-space justify="space-around" align="center" :wrap="false" style="display: flex; align-items: center;">
@@ -555,8 +623,80 @@ onBeforeUnmount(() => {
   height: 100%;
 }
 
+.mail-list-scroll {
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 60vh;
+  max-height: 100vh;
+}
+
+.mail-list-thing,
+.mail-list-title,
+.mail-list-preview {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.mail-list-thing,
+.mail-list-preview {
+  width: 100%;
+}
+
+.mail-list-thing :deep(.n-thing-main),
+.mail-list-thing :deep(.n-thing-header),
+.mail-list-thing :deep(.n-thing-header__title),
+.mail-list-thing :deep(.n-thing-main__description),
+.mail-list-thing :deep(.n-thing-main__content) {
+  min-width: 0;
+}
+
+.mail-list-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.mail-list-meta :deep(.n-tag) {
+  max-width: 100%;
+}
+
+.mail-list-meta-text {
+  max-width: min(240px, 100%);
+}
+
+.mail-list-preview {
+  display: -webkit-box;
+  overflow-wrap: anywhere;
+  opacity: 0.7;
+}
+
+.mail-list-scroll :deep(.n-list-item__main) {
+  min-width: 0;
+}
+
 pre {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+
+.split-handle {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.split-handle__grip {
+  width: 4px;
+  height: 32px;
+  border-radius: 2px;
+  background-color: var(--n-resize-trigger-color);
+  transition: background-color 0.2s;
+}
+
+.split-handle:hover .split-handle__grip {
+  background-color: var(--n-resize-trigger-color-hover);
+}
 </style>

frontend/src/components/SendBox.vue

@@ -210,8 +210,13 @@ onMounted(async () => {
           </n-button>
         </n-space>
       </div>
-      <n-split direction="horizontal" :max="0.75" :min="0.25" :default-size="mailboxSplitSize"
-        :on-update:size="onSpiltSizeChange">
+      <n-split direction="horizontal" :max="0.75" :min="0" :resize-trigger-size="8"
+        :default-size="mailboxSplitSize" :on-update:size="onSpiltSizeChange">
+        <template #resize-trigger>
+          <div class="split-handle">
+            <div class="split-handle__grip" />
+          </div>
+        </template>
         <template #1>
           <div style="overflow: auto; min-height: 60vh; max-height: 100vh;">
             <n-list hoverable clickable>
@@ -379,4 +384,23 @@ pre {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+
+.split-handle {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.split-handle__grip {
+  width: 4px;
+  height: 32px;
+  border-radius: 2px;
+  background-color: var(--n-resize-trigger-color);
+  transition: background-color 0.2s;
+}
+
+.split-handle:hover .split-handle__grip {
+  background-color: var(--n-resize-trigger-color-hover);
+}
 </style>

frontend/src/i18n/locales/source/de.ts

@@ -74,6 +74,7 @@ export const deMessages = {
   "components.AiExtractInfo.authLink": "Authentifizierungslink",
   "views.admin.Maintenance.autoCleanup": "Automatische Bereinigung",
   "components.MailBox.autoRefresh": "Automatische Aktualisierung",
+  "components.MailBox.backToList": "Zurück zur Liste",
   "views.common.Appearance.autoRefreshInterval": "Automatisches Aktualisierungsintervall (s)",
   "views.Index.auto_reply": "Automatische Antwort",
   "views.index.AutoReply.autoReply": "Automatische Antwort",
@@ -299,7 +300,10 @@ export const deMessages = {
   "views.index.SimpleIndex.deleteSuccess": "E-Mail erfolgreich gelöscht",
   "views.user.UserLogin.cannotForgotPassword": "E-Mail-Verifizierung oder Registrierung ist deaktiviert; das Passwort kann nicht zurückgesetzt werden. Bitte den Administrator kontaktieren.",
   "views.Admin.mailWebhook": "Mail-Webhook",
-  "views.common.Appearance.mailboxSplitSize": "Größe der Mailbox-Aufteilung",
+  "views.common.Appearance.mailboxSplitSize": "Breite der linken Liste in der zweispaltigen Postfachansicht",
+  "views.common.Appearance.mailListView": "Postfach-Listenansicht in voller Breite",
+  "views.common.Appearance.mailListPreviewLineClamp": "Zeilen der Textvorschau",
+  "views.common.Appearance.off": "Aus",
   "views.index.SimpleIndex.refreshSuccess": "E-Mails erfolgreich aktualisiert",
   "views.Admin.unknow": "E-Mails mit unbekanntem Empfänger",
   "views.Admin.maintenance": "Wartung",

frontend/src/i18n/locales/source/es.ts

@@ -74,6 +74,7 @@ export const esMessages = {
   "components.AiExtractInfo.authLink": "Enlace de autenticación",
   "views.admin.Maintenance.autoCleanup": "Limpieza automática",
   "components.MailBox.autoRefresh": "Actualización automática",
+  "components.MailBox.backToList": "Volver a la lista",
   "views.common.Appearance.autoRefreshInterval": "Intervalo de actualización automática (s)",
   "views.Index.auto_reply": "Respuesta automática",
   "views.index.AutoReply.autoReply": "Respuesta automática",
@@ -299,7 +300,10 @@ export const esMessages = {
   "views.index.SimpleIndex.deleteSuccess": "Correo eliminado correctamente",
   "views.user.UserLogin.cannotForgotPassword": "La verificación por correo o el registro está desactivado; no se puede restablecer la contraseña. Contacta con el administrador.",
   "views.Admin.mailWebhook": "Webhook de correo",
-  "views.common.Appearance.mailboxSplitSize": "Tamaño de división del buzón",
+  "views.common.Appearance.mailboxSplitSize": "Ancho de la lista izquierda en la vista de buzón de dos columnas",
+  "views.common.Appearance.mailListView": "Vista de lista del buzón de ancho completo",
+  "views.common.Appearance.mailListPreviewLineClamp": "Líneas de vista previa del cuerpo",
+  "views.common.Appearance.off": "Desactivado",
   "views.index.SimpleIndex.refreshSuccess": "Correos actualizados correctamente",
   "views.Admin.unknow": "Correos con destinatario desconocido",
   "views.Admin.maintenance": "Mantenimiento",

frontend/src/i18n/locales/source/ja.ts

@@ -74,6 +74,7 @@ export const jaMessages = {
   "components.AiExtractInfo.authLink": "認証リンク",
   "views.admin.Maintenance.autoCleanup": "自動クリーンアップ",
   "components.MailBox.autoRefresh": "自動更新",
+  "components.MailBox.backToList": "リストに戻る",
   "views.common.Appearance.autoRefreshInterval": "自動更新間隔 (秒)",
   "views.Index.auto_reply": "自動返信",
   "views.index.AutoReply.autoReply": "自動返信",
@@ -299,7 +300,10 @@ export const jaMessages = {
   "views.index.SimpleIndex.deleteSuccess": "メールを削除しました",
   "views.user.UserLogin.cannotForgotPassword": "メール検証または登録が無効のため、パスワードを再設定できません。管理者へ連絡してください。",
   "views.Admin.mailWebhook": "メールWebhook",
-  "views.common.Appearance.mailboxSplitSize": "メールボックス分割サイズ",
+  "views.common.Appearance.mailboxSplitSize": "メールボックス2カラム表示の左側リスト幅",
+  "views.common.Appearance.mailListView": "メールボックス全幅リスト表示",
+  "views.common.Appearance.mailListPreviewLineClamp": "本文プレビュー行数",
+  "views.common.Appearance.off": "オフ",
   "views.index.SimpleIndex.refreshSuccess": "メールを更新しました",
   "views.Admin.unknow": "受信者不明のメール",
   "views.Admin.maintenance": "メンテナンス",

frontend/src/i18n/locales/source/ptBR.ts

@@ -74,6 +74,7 @@ export const ptBRMessages = {
   "components.AiExtractInfo.authLink": "Link de autenticação",
   "views.admin.Maintenance.autoCleanup": "Limpeza automática",
   "components.MailBox.autoRefresh": "Atualização automática",
+  "components.MailBox.backToList": "Voltar para a lista",
   "views.common.Appearance.autoRefreshInterval": "Intervalo de atualização automática (s)",
   "views.Index.auto_reply": "Resposta automática",
   "views.index.AutoReply.autoReply": "Resposta automática",
@@ -299,7 +300,10 @@ export const ptBRMessages = {
   "views.index.SimpleIndex.deleteSuccess": "E-mail excluído com sucesso",
   "views.user.UserLogin.cannotForgotPassword": "A verificação por e-mail ou o registro está desativado; não é possível redefinir a senha. Entre em contato com o administrador.",
   "views.Admin.mailWebhook": "Webhook de e-mail",
-  "views.common.Appearance.mailboxSplitSize": "Tamanho da divisão da caixa de correio",
+  "views.common.Appearance.mailboxSplitSize": "Largura da lista esquerda na visualização de duas colunas da caixa de correio",
+  "views.common.Appearance.mailListView": "Visualização de lista da caixa de correio em largura total",
+  "views.common.Appearance.mailListPreviewLineClamp": "Linhas da prévia do corpo",
+  "views.common.Appearance.off": "Desativado",
   "views.index.SimpleIndex.refreshSuccess": "E-mails atualizados com sucesso",
   "views.Admin.unknow": "E-mails com destinatário desconhecido",
   "views.Admin.maintenance": "Manutenção",

frontend/src/i18n/message-registry.ts

@@ -42,6 +42,10 @@ export const MESSAGE_REGISTRY = {
       "en": "Auto Refresh",
       "zh": "自动刷新"
     },
+    "backToList": {
+      "en": "Back to List",
+      "zh": "返回列表"
+    },
     "cancelMultiAction": {
       "en": "Cancel Multi Action",
       "zh": "取消多选"
@@ -2107,8 +2111,20 @@ export const MESSAGE_REGISTRY = {
       "zh": "左侧"
     },
     "mailboxSplitSize": {
-      "en": "Mailbox Split Size",
-      "zh": "邮箱界面分栏大小"
+      "en": "Left list width in two-column mailbox view",
+      "zh": "邮箱双栏视图左侧列表宽度占比"
+    },
+    "mailListView": {
+      "en": "Full-width mailbox list view",
+      "zh": "邮箱全宽列表视图"
+    },
+    "mailListPreviewLineClamp": {
+      "en": "Body Preview Lines",
+      "zh": "正文预览行数"
+    },
+    "off": {
+      "en": "Off",
+      "zh": "关闭"
     },
     "preferShowTextMail": {
       "en": "Display text Mail by default",

frontend/src/store/index.js

@@ -88,6 +88,8 @@ export const useGlobalState = createGlobalState(
         const adminMailTabAddress = ref("");
         const adminSendBoxTabAddress = ref("");
         const mailboxSplitSize = useStorage('mailboxSplitSize', 0.25);
+        const mailListView = useStorage('mailListView', false);
+        const mailListPreviewLineClamp = useStorage('mailListPreviewLineClamp', 2);
         const useIframeShowMail = useStorage('useIframeShowMail', false);
         const preferShowTextMail = useStorage('preferShowTextMail', false);
         const userJwt = useStorage('userJwt', '');
@@ -160,6 +162,8 @@ export const useGlobalState = createGlobalState(
             adminMailTabAddress,
             adminSendBoxTabAddress,
             mailboxSplitSize,
+            mailListView,
+            mailListPreviewLineClamp,
             useIframeShowMail,
             preferShowTextMail,
             userJwt,

frontend/src/views/common/Appearance.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 })
 
 const {
-    mailboxSplitSize, useIframeShowMail, preferShowTextMail, configAutoRefreshInterval,
+    mailboxSplitSize, mailListView, mailListPreviewLineClamp, useIframeShowMail, preferShowTextMail, configAutoRefreshInterval,
     globalTabplacement, useSideMargin, useUTCDate, useSimpleIndex
 } = useGlobalState()
 const isMobile = useIsMobile()
@@ -23,12 +23,26 @@ const { t } = useScopedI18n('views.common.Appearance')
     <div class="center">
         <n-card :bordered="false" embedded>
             <n-form-item-row v-if="!isMobile" :label="t('mailboxSplitSize')">
-                <n-slider v-model:value="mailboxSplitSize" :min="0.25" :max="0.75" :step="0.01" :marks="{
+                <n-slider v-model:value="mailboxSplitSize" :min="0" :max="0.75" :step="0.01" :marks="{
+                    0: '0',
                     0.25: '0.25',
                     0.5: '0.5',
                     0.75: '0.75'
                 }" />
             </n-form-item-row>
+            <n-form-item-row v-if="!isMobile" :label="t('mailListView')">
+                <n-switch v-model:value="mailListView" :round="false" />
+            </n-form-item-row>
+            <n-form-item-row :label="t('mailListPreviewLineClamp')">
+                <n-slider v-model:value="mailListPreviewLineClamp" :min="0" :max="5" :step="1" :marks="{
+                    0: t('off'),
+                    1: '1',
+                    2: '2',
+                    3: '3',
+                    4: '4',
+                    5: '5'
+                }" />
+            </n-form-item-row>
             <n-form-item-row :label="t('autoRefreshInterval')">
                 <n-slider v-model:value="configAutoRefreshInterval" :min="30" :max="300" :step="1" :marks="{
                     60: '60', 120: '120', 180: '180', 240: '240'