diff --git a/src/api/index.js b/src/api/index.js
index 525753d..487fb66 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,8 +19,8 @@ const service = axios.create({
 	// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
 	// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
 	// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
-	// baseURL: '/api', //本地
-	baseURL: '/', //正式
+	baseURL: '/api', //本地
+	// baseURL: '/', //正式
 
 });
 
diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
index febaf40..07fbaac 100644
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@@ -181,6 +181,8 @@ export default {
                 localStorage.removeItem('journalTypeData');
                 localStorage.removeItem('journalTypeDataAll');
                 localStorage.removeItem('opMedicalListData');
+                localStorage.removeItem('mailboxCollect_j_email_id');
+                localStorage.removeItem('mailboxCollect_journal_id');
                 this.$router.push('/login');
             }
         },
diff --git a/src/components/common/Header2.vue b/src/components/common/Header2.vue
index 5e0ee7b..e9dcd42 100644
--- a/src/components/common/Header2.vue
+++ b/src/components/common/Header2.vue
@@ -179,6 +179,8 @@ export default {
                 localStorage.removeItem('journalTypeData');
                 localStorage.removeItem('journalTypeDataAll');
                 localStorage.removeItem('opMedicalListData');
+                localStorage.removeItem('mailboxCollect_j_email_id');
+                localStorage.removeItem('mailboxCollect_journal_id');
                 this.$router.push('/login');
             }
         },
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index 901975e..eb8db1a 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -184,6 +184,9 @@
                     <el-menu-item index="scholarCrawlers">
                         {{ $t('sidebar.scholarCrawlers') }}
                     </el-menu-item>
+                    <el-menu-item index="scholarCrawlersKeywords">
+                        {{ $t('sidebar.crawlerKeywords') }}
+                    </el-menu-item>
                     <!-- <el-menu-item index="1" key="1"> -->
                     <a href="http://master.tmrjournals.com" target="_blank" class="linkBar"> Management System </a>
                     <!-- </el-menu-item> -->
diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index c390035..c5c0802 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -276,6 +276,7 @@ const en = {
 		mailboxManagement: 'Mailbox Management',
 		mailboxConfig: 'Mailbox Management',
 		scholarCrawlers: 'Scholar Crawlers',
+		crawlerKeywords: 'Crawl Keywords',
 		expertDatabase: 'Expert Database',
 		autoPromotion: 'Auto Promotion',
 		ReArticles: 'Rejected Manuscripts',     // 被拒稿件
@@ -530,7 +531,57 @@ colTitle: 'Template title',
 		loadingMore: 'Loading more...',
 		noMore: 'No more',
 		yesterday: 'Yesterday',
-		selectAccountTip: 'Please select an email account first.'
+		selectAccountTip: 'Please select an email account first.',
+		attachmentCount: ' attachment(s)',
+		downloadFail: 'Download failed',
+		accountNotBelong: 'This account does not belong to you. Please select another one.',
+		totalAttachments: '{count} attachment(s) in total',
+		etcSuffix: '... etc.',
+		viewAttachments: 'View attachments',
+		newMailArrived: '{count} new mail(s) received, click to view',
+		downloadAllZip: 'Download all',
+		packingAttachments: 'Packing attachments, please wait...',
+		downloadBtn: 'Download',
+		printBtn: 'Print',
+		previewNotSupported: 'This file format cannot be previewed online',
+		downloadToView: 'Download to view locally',
+	},
+	crawlerKeywords: {
+		pageTitle: 'Keyword Configuration',
+		pageDesc: 'Manage core search terms for discovering experts.',
+		exportData: 'Export Data',
+		startCrawl: 'Start Crawl',
+		inputPlaceholder: 'Enter new keyword, e.g. deep learning, semiconductor expert...',
+		addKeyword: 'Add Keyword',
+		searchPlaceholder: 'Search keywords...',
+		searchBtn: 'Search',
+		totalCount: '{count} keyword(s) in total',
+		colKeyword: 'Keyword',
+		colCategory: 'Category',
+		colStatus: 'Status',
+		colExpertCount: 'Expert Count',
+		colLastCrawl: 'Last Crawl',
+		colAction: 'Action',
+		save: 'Save',
+		cancel: 'Cancel',
+		stateRunning: 'Running',
+		statePaused: 'Paused',
+		stateError: 'Error',
+		stateDone: 'Done',
+		emptyKeywordWarn: 'Please enter a keyword',
+		addSuccess: 'Added successfully',
+		addFail: 'Failed to add',
+		updateSuccess: 'Updated successfully',
+		updateFail: 'Failed to update',
+		deleteConfirm: 'Are you sure to delete this keyword? This action cannot be undone.',
+		confirmTitle: 'Confirm',
+		deleteSuccess: 'Deleted successfully',
+		deleteFail: 'Failed to delete',
+		refreshSuccess: 'Refreshed successfully',
+		refreshFail: 'Failed to refresh',
+		crawlStarted: 'Crawl task started',
+		crawlFail: 'Failed to start crawl',
+		exportFail: 'Failed to export',
 	},
 	mailboxSend: {
 		title: 'Write mail',
diff --git a/src/components/common/langs/zh.js b/src/components/common/langs/zh.js
index 46fb914..9c473c9 100644
--- a/src/components/common/langs/zh.js
+++ b/src/components/common/langs/zh.js
@@ -264,6 +264,7 @@ const zh = {
 	
 		
 		scholarCrawlers: '学者数据库',
+		crawlerKeywords: '抓取关键词配置',
 		expertDatabase: '专家库',
 		autoPromotion: '自动推广',
 		ReArticles: '被拒稿件',     // 被拒稿件
@@ -520,6 +521,56 @@ const zh = {
 		noMore: '没有更多了',
 		yesterday: '昨天',
 		selectAccountTip: '请先选择一个邮箱账号.',
+		attachmentCount: '个附件',
+		downloadFail: '下载失败',
+		accountNotBelong: '该邮箱账号不属于当前用户，请重新选择',
+		totalAttachments: '共{count}个附件',
+		etcSuffix: '... 等',
+		viewAttachments: '查看附件',
+		newMailArrived: '收到 {count} 封新邮件，点击查看',
+		downloadAllZip: '打包下载',
+		packingAttachments: '正在打包附件，请稍后...',
+		downloadBtn: '下载',
+		printBtn: '打印',
+		previewNotSupported: '该文件格式无法在线预览',
+		downloadToView: '下载到本地查看',
+	},
+	crawlerKeywords: {
+		pageTitle: '关键词配置',
+		pageDesc: '管理用于发现专家的核心搜索词。',
+		exportData: '导出数据',
+		startCrawl: '开始抓取',
+		inputPlaceholder: '输入新关键词，例如：深度学习、半导体专家...',
+		addKeyword: '添加关键词',
+		searchPlaceholder: '搜索关键词...',
+		searchBtn: '搜索',
+		totalCount: '共 {count} 个词条',
+		colKeyword: '关键词',
+		colCategory: '分类',
+		colStatus: '状态',
+		colExpertCount: '专家数量',
+		colLastCrawl: '最后抓取',
+		colAction: '操作',
+		save: '保存',
+		cancel: '取消',
+		stateRunning: '运行中',
+		statePaused: '已暂停',
+		stateError: '异常',
+		stateDone: '已完成',
+		emptyKeywordWarn: '请输入关键词',
+		addSuccess: '添加成功',
+		addFail: '添加失败',
+		updateSuccess: '更新成功',
+		updateFail: '更新失败',
+		deleteConfirm: '确定删除该关键词吗？删除后无法恢复。',
+		confirmTitle: '提示',
+		deleteSuccess: '删除成功',
+		deleteFail: '删除失败',
+		refreshSuccess: '刷新成功',
+		refreshFail: '刷新失败',
+		crawlStarted: '抓取任务已启动',
+		crawlFail: '启动抓取失败',
+		exportFail: '导出失败',
 	},
 	mailboxSend: {
 		title: '写邮件',
diff --git a/src/components/page/autoPromotion.vue b/src/components/page/autoPromotion.vue
index 270a8d8..4f1bdd8 100644
--- a/src/components/page/autoPromotion.vue
+++ b/src/components/page/autoPromotion.vue
@@ -445,7 +445,7 @@ export default {
 .journal-info { display: flex; align-items: center; }
 .icon-box { width: 28px; height: 28px; background: #edf5ff; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-right: 10px; }
 .icon-box i { color: #409eff; font-size: 14px; }
-.journal-name { font-size: 16px; font-weight: 600; color: #1f2d3d; }
+.journal-name { font-size: 14px; font-weight: 600; color: #1f2d3d; }
 .module-wrapper { display: grid; grid-template-columns: 1fr; }
 .module-card { border-radius: 6px; padding: 14px; display: flex; flex-direction: column; min-height: 160px; border: 1px solid transparent; }
 .is-solicit-active { background: #f4f9ff; border-color: #e1eeff; }
diff --git a/src/components/page/components/email/FilePreviewDialog.vue b/src/components/page/components/email/FilePreviewDialog.vue
new file mode 100644
index 0000000..c3979d0
--- /dev/null
+++ b/src/components/page/components/email/FilePreviewDialog.vue
@@ -0,0 +1,237 @@
+<template>
+    <el-dialog
+      :visible.sync="visible"
+      fullscreen
+      append-to-body
+      :show-close="false"
+      custom-class="mail-preview-dialog"
+    >
+      <div slot="title" class="preview-navbar">
+        <div class="navbar-left">
+          <div class="file-icon-box" :class="getFileTypeClass(file.name)">
+            <i :class="getFileIcon(file.name)"></i>
+          </div>
+          <span class="file-name" :title="file.name">{{ file.name }}</span>
+        </div>
+        
+        <div class="navbar-right">
+          <div class="action-item" @click="handleDownload" :title="$t('mailboxCollect.downloadBtn')">
+            <i class="el-icon-download"></i>
+          </div>
+          <div class="action-item" @click="handlePrint" v-if="isPdf" :title="$t('mailboxCollect.printBtn')">
+            <i class="el-icon-printer"></i>
+          </div>
+          <div class="nav-divider"></div>
+          <div class="action-item close-btn" @click="visible = false">
+            <i class="el-icon-close"></i>
+          </div>
+        </div>
+      </div>
+ 
+      <div class="preview-body" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.7)">
+        <iframe 
+          v-if="previewUrl" 
+          :src="previewUrl" 
+          class="preview-iframe" 
+          frameborder="0"
+          @load="loading = false"
+        ></iframe>
+        
+        <div v-else-if="isImage" class="image-viewer">
+          <img :src="rawUrl" alt="preview" @load="loading = false" />
+        </div>
+  
+        <div v-else-if="!loading" class="error-state">
+          <el-empty :description="$t('mailboxCollect.previewNotSupported')">
+            <el-button type="primary" size="small" @click="handleDownload">{{ $t('mailboxCollect.downloadToView') }}</el-button>
+          </el-empty>
+        </div>
+      </div>
+    </el-dialog>
+    
+  </template>
+  
+  <script>
+  export default {
+    name: 'FilePreviewDialog',
+    data() {
+      return {
+        visible: false,
+        loading: false,
+        file: {},
+        rawUrl: '', // 原始地址
+        previewUrl: '', // 拼接后的预览地址
+      }
+    },
+    computed: {
+      fileExt() {
+        return this.file.name ? this.file.name.split('.').pop().toLowerCase() : '';
+      },
+      isImage() {
+        return ['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(this.fileExt);
+      },
+      isPdf() {
+        return this.fileExt === 'pdf';
+      }
+    },
+    methods: {
+      /**
+       * 父组件调用此方法打开弹窗
+       * @param file 附件对象 {name: '', ...}
+       * @param url 文件的公网绝对路径
+       */
+      init(file, url) {
+        this.file = file;
+        this.rawUrl = url;
+        this.loading = true;
+        this.visible = true;
+  
+        const ext = this.fileExt;
+        
+        // 策略选择
+        if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
+          // Office系列：使用微软接口
+          this.previewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
+        } else if (['pdf', 'txt'].includes(ext) || this.isImage) {
+          // 浏览器原生支持
+          this.previewUrl = url;
+        } else {
+          this.previewUrl = '';
+          this.loading = false;
+        }
+      },
+      handleDownload() {
+        this.$emit('download', this.file);
+      },
+      handlePrint() {
+        window.print();
+      },
+      // 复用你之前的图标逻辑
+      getFileIcon(name) {
+        if (!name) return 'el-icon-files';
+        var ext = name.split('.').pop().toLowerCase();
+        if (['doc', 'docx'].includes(ext)) return 'el-icon-document';
+        if (['jpg', 'png', 'jpeg'].includes(ext)) return 'el-icon-picture';
+        return 'el-icon-files';
+      },
+      getFileTypeClass(name) {
+        if (!name) return 'default';
+        var ext = name.split('.').pop().toLowerCase();
+        if (['doc', 'docx'].includes(ext)) return 'word';
+        if (['jpg', 'png', 'jpeg'].includes(ext)) return 'img';
+        return 'default';
+      }
+    }
+  }
+  </script>
+  
+  <style lang="css">
+  /* 弹窗全屏覆盖与背景 */
+  .mail-preview-dialog {
+    background: #000 !important;
+  }
+  .mail-preview-dialog .el-dialog__header {
+    padding: 0;
+  }
+  .mail-preview-dialog .el-dialog__body {
+    padding: 0;
+    height: calc(100vh - 56px);
+    background: #333;
+  }
+  
+  /* 顶部导航栏 */
+  .preview-navbar {
+    height: 56px;
+    background: #1a1a1a;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+  }
+  
+  .navbar-left {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    max-width: 70%;
+  }
+  
+  .file-icon-box {
+    width: 30px;
+    height: 30px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    font-size: 18px;
+  }
+  .file-icon-box.word { background: #0052d9; }
+  .file-icon-box.img { background: #e34d59; }
+  .file-icon-box.default { background: #737b85; }
+  
+  .navbar-left .file-name {
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  /* 右侧操作栏 */
+  .navbar-right {
+    display: flex;
+    align-items: center;
+  }
+  
+  .action-item {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    cursor: pointer;
+    font-size: 20px;
+    transition: all 0.2s;
+    border-radius: 4px;
+  }
+  .action-item:hover {
+    background: #333;
+    color: #fff;
+  }
+  .close-btn:hover {
+    background: #e34d59;
+  }
+  
+  .nav-divider {
+    width: 1px;
+    height: 20px;
+    background: #444;
+    margin: 0 10px;
+  }
+  
+  /* 内容区域 */
+  .preview-body {
+    width: 100%;
+    height: 100%;
+  }
+  .preview-iframe {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+  }
+  .image-viewer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+  .image-viewer img {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+  }
+  .error-state {
+    padding-top: 100px;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/components/page/components/email/MailDetail.vue b/src/components/page/components/email/MailDetail.vue
index ba8f605..51ee67b 100644
--- a/src/components/page/components/email/MailDetail.vue
+++ b/src/components/page/components/email/MailDetail.vue
@@ -1,164 +1,354 @@
 <template>
     <div class="mail-detail-container">
-      <div class="detail-toolbar">
-        <div class="toolbar-left">
-          <h1 class="mail-subject-top">{{ $t('mailboxCollect.subject') }}：{{ mailData.subject }}</h1>
-        </div>
-        <div class="toolbar-right">
-          <!-- <i class="el-icon-star-off action-icon"></i> -->
-          <i class="el-icon-close action-icon" @click="$emit('close')"></i>
+        <div class="detail-toolbar">
+            <div class="toolbar-left">
+                <h1 class="mail-subject-top">{{ $t('mailboxCollect.subject') }}：{{ mailData.subject }}</h1>
+            </div>
+            <div class="toolbar-right">
+                <!-- <i class="el-icon-star-off action-icon"></i> -->
+                <i class="el-icon-close action-icon" @click="$emit('close')"></i>
+            </div>
         </div>
+
+        <div class="detail-scroll-content">
+            <div class="mail-header-info">
+                <el-avatar :size="40" class="sender-avatar">{{ (mailData.from_name || 'U')[0] }}</el-avatar>
+                <div class="info-main">
+                    <div class="first-line">
+                        <span class="sender-name">{{ mailData.from_name }}</span>
+                        <span class="sender-email">&lt;{{ mailData.from_email }}&gt;</span>
+                        <span class="send-time">{{ formatDisplayTime(mailData.email_date) }}</span>
+                       
+                        <span
+                            class="detail-toggle"
+                            @click="isDetailExpanded = !isDetailExpanded"
+                            v-if="mailData.to_list && mailData.to_list.length > 0"
+                        >
+                            {{ isDetailExpanded ? '收起' : '详情' }}
+                            <i :class="isDetailExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+                        </span>
+                    </div>
+
+                    <div v-if="isDetailExpanded" class="expanded-info">
+                        <div class="info-row">
+                            <span class="label">收件人：</span>
+                            <div class="recipient-tags">
+                                <el-tag v-for="(to, index) in mailData.to_list" :key="'to-' + index" size="mini" type="info">{{
+                                    to.name || to.email
+                                }}</el-tag>
+                            </div>
+                        </div>
+                        <div v-if="mailData.cc_list && mailData.cc_list.length" class="info-row">
+                            <span class="label">抄送：</span>
+                            <div class="recipient-tags">
+                                <el-tag
+                                    v-for="(cc, index) in mailData.cc_list"
+                                    :key="'cc-' + index"
+                                    size="mini"
+                                    type="warning"
+                                    effect="plain"
+                                    >{{ cc.name || cc.email }}</el-tag
+                                >
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-else class="simple-info" v-if="mailData.to_list && mailData.to_list.length > 0">
+                        发送给
+                        {{ mailData.to_list && mailData.to_list[0] ? mailData.to_list[0].name || mailData.to_list[0].email : '' }} 等{{
+                            mailData.to_list.length
+                        }}人
+                    </div>
+                    <div v-if="mailData.attachments && mailData.attachments.length" class="attachment-brief-bar">
+  <span class="brief-info">
+    {{ $t('mailboxCollect.totalAttachments', { count: mailData.attachments.length }) }}（
+    <i class="el-icon-document" style="color: #409EFF;"></i>
+    <span class="first-file-name">{{ mailData.attachments[0].name }}{{ mailData.attachments.length > 1 ? $t('mailboxCollect.etcSuffix') : '' }}</span>
+    ）
+    
+  </span>
+  <el-link type="primary" :underline="false" @click="scrollToAttachments" class="jump-link">
+    {{ $t('mailboxCollect.viewAttachments') }}
+  </el-link>
+</div>
+                </div>
+            </div>
+
+            <div class="mail-body-content" v-html="mailData.content_html"></div>
+
+            <div v-if="mailData.attachments && mailData.attachments.length" class="attachment-section">
+  <div class="attachment-header">
+    <div class="header-left">
+      <span>{{ mailData.attachments.length }}{{ $t('mailboxCollect.attachmentCount') }} ({{ totalAttachmentSize }})</span>
+      <span class="divider">|</span>
+      <span class="download-all" @click="downloadAll">
+        <template v-if="packingAll"><i class="el-icon-loading"></i> {{ $t('mailboxCollect.packingAttachments') }}</template>
+        <template v-else>{{ $t('mailboxCollect.downloadAllZip') }}</template>
+      </span>
+    </div>
+    
+    
+  </div>
+
+  <div class="attachment-list">
+    <div v-for="(file, index) in mailData.attachments" :key="index" class="attachment-card">
+      <div class="file-icon" :class="getFileTypeClass(file.name)">
+        <i :class="getFileIcon(file.name)"></i>
       </div>
-  
-      <div class="detail-scroll-content">
-        <div class="mail-header-info">
-          <el-avatar :size="40" class="sender-avatar">{{ (mailData.from_name || 'U')[0] }}</el-avatar>
-          <div class="info-main">
-            <div class="first-line">
-              <span class="sender-name">{{ mailData.from_name }}</span>
-              <span class="sender-email">&lt;{{ mailData.from_email }}&gt;</span>
-              <span class="send-time">{{ formatDisplayTime(mailData.email_date) }}</span>
-              <span class="detail-toggle" @click="isDetailExpanded = !isDetailExpanded" v-if="mailData.to_list&&mailData.to_list.length>0">
-                {{ isDetailExpanded ? '收起' : '详情' }} <i :class="isDetailExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
-              </span>
-            </div>
-  
-            <div v-if="isDetailExpanded" class="expanded-info">
-              <div class="info-row">
-                <span class="label">收件人：</span>
-                <div class="recipient-tags">
-                  <el-tag v-for="(to, index) in mailData.to_list" :key="'to-'+index" size="mini" type="info">{{ to.name || to.email }}</el-tag>
-                </div>
-              </div>
-              <div v-if="mailData.cc_list && mailData.cc_list.length" class="info-row">
-                <span class="label">抄送：</span>
-                <div class="recipient-tags">
-                  <el-tag v-for="(cc, index) in mailData.cc_list" :key="'cc-'+index" size="mini" type="warning" effect="plain">{{ cc.name || cc.email }}</el-tag>
-                </div>
-              </div>
-            </div>
-            
-            <div v-else class="simple-info" v-if="mailData.to_list&&mailData.to_list.length>0">
-              发送给 {{ mailData.to_list && mailData.to_list[0] ? (mailData.to_list[0].name || mailData.to_list[0].email) : '' }} 等{{ mailData.to_list.length }}人
-            </div>
-          </div>
-        </div>
-  
-        <div class="mail-body-content" v-html="mailData.content_html"></div>
-  
-        <div v-if="mailData.attachments && mailData.attachments.length" class="attachment-section">
-          <div class="attachment-header">
-            <span>{{ mailData.attachments.length }}个附件 ({{ totalAttachmentSize }})</span>
-            <el-button type="text" size="small">打包下载</el-button>
-            <span class="security-tip"><i class="el-icon-success"></i> 附件中未发现病毒</span>
-          </div>
-          <div class="attachment-list">
-            <div v-for="(file, index) in mailData.attachments" :key="index" class="attachment-card">
-              <div class="file-icon">
-                <i :class="getFileIcon(file.name)"></i>
-              </div>
-              <div class="file-info">
-                <div class="file-name" :title="file.name">{{ file.name }}</div>
-                <div class="file-size">{{ file.size }}</div>
-              </div>
-            </div>
-          </div>
+      <div class="file-info">
+        <div class="file-name" :title="file.name">{{ file.name }}</div>
+        <div class="file-size-row">
+          <span class="file-size">{{ formatFileSize(file.size) }}</span>
+          <span class="file-actions">
+            <!-- <i class="el-icon-view" title="预览" @click.stop="previewAttachment(file)"></i> -->
+            <i
+              :class="downloadingIndex === index ? 'el-icon-loading' : 'el-icon-download'"
+              :title="downloadingIndex === index ? '' : '下载'"
+              @click.stop="downloadAttachment(file, index)"
+            ></i>
+          
+          </span>
         </div>
       </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
+  </div>
+</div>
+        </div>
+        <file-preview-dialog 
+  ref="previewDialog" 
+  @download="downloadAttachment" 
+/>
+    </div>
+</template>
+
+<script>
+import Common from '@/components/common/common';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+import FilePreviewDialog from './FilePreviewDialog.vue';
+export default {
+    components: {
+        FilePreviewDialog
+    },
     name: 'MailDetail',
     props: {
-      mailData: {
-        type: Object,
-        default: () => ({
-          subject: '',
-          from_name: '',
-          from_email: '',
-          send_time: '',
-          to_list: [],
-          cc_list: [],
-          content: '',
-          attachments: []
-        })
-      }
+        mailData: {
+            type: Object,
+            default: () => ({
+                subject: '',
+                from_name: '',
+                from_email: '',
+                send_time: '',
+                to_list: [],
+                cc_list: [],
+                content: '',
+                attachments: []
+            })
+        }
     },
     data() {
-      return {
-        isDetailExpanded: false
-      };
+        return {
+            mediaUrl: Common.mediaUrl,
+            isDetailExpanded: false,
+            downloadingIndex: -1,
+            packingAll: false
+        };
     },
     computed: {
-      totalAttachmentSize() {
-        // 简单模拟计算总量，实际可根据逻辑累加
-        return "11MB"; 
-      }
+        totalAttachmentSize() {
+            if (!this.mailData.attachments || !this.mailData.attachments.length) return '0B';
+            const total = this.mailData.attachments.reduce((sum, f) => sum + (Number(f.size) || 0), 0);
+            return this.formatFileSize(total);
+        }
     },
     methods: {
-        formatDisplayTime(timestamp) {
-  if (!timestamp) return '';
-
-  // 1. 处理 10 位秒级时间戳，转为毫秒并实例化 Date 对象
-  const date = new Date(Number(timestamp) * 1000);
-  const now = new Date();
-  
-  // 提取日期信息用于比较
-  const dateYear = date.getFullYear();
-  const nowYear = now.getFullYear();
-  const lang = localStorage.getItem('langs') === 'zh' ? 'zh-CN' : 'en-US';
-  
-  // 获取昨天日期
-  const yesterday = new Date(now);
-  yesterday.setDate(now.getDate() - 1);
-
-  // 获取具体时分并补零 (例如 09:05)
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  const timePart = `${hours}:${minutes}`;
-
-  // --- 按照图示规则判断返回 ---
-
-  // 1. 如果是今天：只显示时间，如 "15:57"
-  if (date.toDateString() === now.toDateString()) {
-    return timePart;
-  }
-
-  // 2. 如果是昨天：只显示 "昨天"
-  if (date.toDateString() === yesterday.toDateString()) {
-    return this.$t('mailboxCollect.yesterday');
-  }
-
-  // 3. 如果是今年（非今天/昨天）：按语言显示月日
-  if (dateYear === nowYear) {
-    return new Intl.DateTimeFormat(lang, { month: 'short', day: 'numeric' }).format(date);
-  }
-
-  // 4. 如果是往年：显示完整年月日，如 "2025-12-05"
-  const dateMonth = date.getMonth() + 1;
-  const dateDay = date.getDate();
-  const fullMonth = dateMonth.toString().padStart(2, '0');
-  const fullDay = dateDay.toString().padStart(2, '0');
-  return `${dateYear}-${fullMonth}-${fullDay}`;
-},
-      getFileIcon(fileName) {
-        if (fileName.includes('.doc')) return 'el-icon-document text-blue';
-        if (fileName.includes('.pdf')) return 'el-icon-document text-red';
-        return 'el-icon-document';
-      }
+        scrollToAttachments() {
+    // 1. 获取目标元素的 DOM
+    const target = this.$el.querySelector('.attachment-section');
+    
+    if (target) {
+      // 2. 使用原生 scrollIntoView 实现平滑滚动
+      target.scrollIntoView({
+        behavior: 'smooth', // 平滑滚动
+        block: 'start'      // 滚动到元素顶部
+      });
     }
-  };
-  </script>
-  
-  <style scoped>
-  .mail-detail-container { height: 100%; display: flex; flex-direction: column; background: #fff; }
-  
-  /* 顶部工具栏 */
-  .detail-toolbar { padding: 10px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
-  .toolbar-left { flex: 1; min-width: 0; }
-  .mail-subject-top {
+  },
+      getFileTypeClass(fileName) {
+    if (!fileName) return 'txt';
+    const ext = fileName.split('.').pop().toLowerCase();
+    if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) return 'img';
+    if (['doc', 'docx'].includes(ext)) return 'word';
+    if (['html', 'htm'].includes(ext)) return 'html';
+    return 'txt';
+  },
+  // 你原有的 getFileIcon 也要对应修改
+  getFileIcon(fileName) {
+     const ext = fileName.split('.').pop().toLowerCase();
+     if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) return 'el-icon-picture';
+     if (['doc', 'docx'].includes(ext)) return 'el-icon-document'; // 这里可以用Word图标
+     if (['html', 'htm'].includes(ext)) return 'el-icon-document-remove';
+     return 'el-icon-tickets';
+  },
+        formatFileSize(bytes) {
+            const b = Number(bytes);
+            if (!b || b <= 0) return '-';
+            if (b < 1024) return b + 'B';
+            if (b < 1024 * 1024) return (b / 1024).toFixed(1) + 'KB';
+            if (b < 1024 * 1024 * 1024) return (b / (1024 * 1024)).toFixed(1) + 'MB';
+            return (b / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
+        },
+        async ensureFileUrl(file) {
+            if (file.file_url) return file.file_url;
+            const inboxId = this.mailData.inbox_id;
+            const partIndex = file.part_index != null ? file.part_index : 0;
+            if (!inboxId) return '';
+            const res = await this.$api.post('api/email_client/getAttachment', {
+                inbox_id: String(inboxId),
+                part_index: String(partIndex)
+            });
+            if (res && res.data && res.data.file_url) {
+                file.file_url = res.data.file_url;
+                return res.data.file_url;
+            }
+            return '';
+        },
+        async downloadAll() {
+            if (this.packingAll) return;
+            this.packingAll = true;
+            try {
+                const zip = new JSZip();
+                const promises = this.mailData.attachments.map(async (file) => {
+                    const url = await this.ensureFileUrl(file);
+                    if (!url) return;
+                    const fileUrl = this.mediaUrl + url;
+                    const resp = await fetch(fileUrl);
+                    const blob = await resp.blob();
+                    zip.file(file.name || 'attachment', blob);
+                });
+                await Promise.all(promises);
+                const content = await zip.generateAsync({ type: 'blob' });
+                const zipName = (this.mailData.subject || 'attachments') + '.zip';
+                saveAs(content, zipName);
+            } catch (e) {
+                this.$message.error(this.$t('mailboxCollect.downloadFail') || '下载失败');
+            } finally {
+                this.packingAll = false;
+            }
+        },
+      async  previewAttachment(file){
+        console.log("🚀 ~ previewAttachment ~ file:", file);
+
+        var that = this;
+        that.$refs.previewDialog.init(file, this.mediaUrl+file.file_url || '');
+// 1. 获取后端返回的 URL
+const res = await this.$api.post('api/email_client/getAttachment', {
+        inbox_id: String(this.mailData.inbox_id),
+        part_index: String(file.part_index || 0)
+      });
+      
+      if (res.data && res.data.file_url) {
+        const fullUrl = this.mediaUrl + res.data.file_url;
+        
+        // 2. 调用弹窗组件的 init 方法
+        // 注意：微软预览要求 fullUrl 必须是公网可访问的！
+
+       
+      }
+   
+        },
+        async downloadAttachment(file, index) {
+            if (this.downloadingIndex >= 0) return;
+            this.downloadingIndex = index;
+            try {
+                const url = await this.ensureFileUrl(file);
+                if (!url) {
+                    this.$message.warning(this.$t('mailboxCollect.downloadFail') || '下载失败');
+                    return;
+                }
+                const fileUrl = this.mediaUrl + url;
+                const fileName = file.name || 'attachment';
+                const resp = await fetch(fileUrl);
+                const blob = await resp.blob();
+                saveAs(blob, fileName);
+            } catch (e) {
+                this.$message.error(this.$t('mailboxCollect.downloadFail') || '下载失败');
+            } finally {
+                this.downloadingIndex = -1;
+            }
+        },
+
+        formatDisplayTime(timestamp) {
+            if (!timestamp) return '';
+
+            // 1. 处理 10 位秒级时间戳，转为毫秒并实例化 Date 对象
+            const date = new Date(Number(timestamp) * 1000);
+            const now = new Date();
+
+            // 提取日期信息用于比较
+            const dateYear = date.getFullYear();
+            const nowYear = now.getFullYear();
+            const lang = localStorage.getItem('langs') === 'zh' ? 'zh-CN' : 'en-US';
+
+            // 获取昨天日期
+            const yesterday = new Date(now);
+            yesterday.setDate(now.getDate() - 1);
+
+            // 获取具体时分并补零 (例如 09:05)
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            const timePart = `${hours}:${minutes}`;
+
+            // --- 按照图示规则判断返回 ---
+
+            // 1. 如果是今天：只显示时间，如 "15:57"
+            if (date.toDateString() === now.toDateString()) {
+                return timePart;
+            }
+
+            // 2. 如果是昨天：显示 "昨天 15:57"
+            if (date.toDateString() === yesterday.toDateString()) {
+                return this.$t('mailboxCollect.yesterday') + ' ' + timePart;
+            }
+
+            // 3. 如果是今年（非今天/昨天）：按语言显示月日
+            if (dateYear === nowYear) {
+                return new Intl.DateTimeFormat(lang, { month: 'short', day: 'numeric' }).format(date);
+            }
+
+            // 4. 如果是往年：显示完整年月日，如 "2025-12-05"
+            const dateMonth = date.getMonth() + 1;
+            const dateDay = date.getDate();
+            const fullMonth = dateMonth.toString().padStart(2, '0');
+            const fullDay = dateDay.toString().padStart(2, '0');
+            return `${dateYear}-${fullMonth}-${fullDay}`;
+        },
+     
+    }
+};
+</script>
+
+<style scoped>
+.mail-detail-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+}
+
+/* 顶部工具栏 */
+.detail-toolbar {
+    padding: 10px 20px;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.toolbar-left {
+    flex: 1;
+    min-width: 0;
+}
+.mail-subject-top {
     margin: 0;
     font-size: 18px;
     font-weight: bold;
@@ -166,40 +356,307 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+}
+.action-icon {
+    font-size: 18px;
+    color: #606266;
+    cursor: pointer;
+}
+.action-icon:hover {
+    color: #409eff;
+}
+
+.detail-scroll-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 20px;
+}
+
+/* 头部信息 */
+.mail-header-info {
+    display: flex;
+    margin-bottom: 20px;
+}
+.info-main {
+    flex: 1;
+    margin-left: 15px;
+}
+.first-line {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    font-size: 14px;
+}
+.sender-name {
+    font-weight: bold;
+    color: #303133;
+}
+.sender-email {
+    color: #909399;
+    margin-left: 5px;
+}
+.send-time {
+    margin-left: auto;
+    color: #909399;
+}
+.detail-toggle {
+    margin-left: 10px;
+    color: #409eff;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.expanded-info {
+    background: #f8f9fa;
+    padding: 10px;
+    border-radius: 4px;
+    margin-top: 10px;
+}
+.info-row {
+    display: flex;
+    margin-bottom: 8px;
+}
+.info-row .label {
+    width: 60px;
+    color: #909399;
+    font-size: 13px;
+}
+.recipient-tags {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+.simple-info {
+    font-size: 12px;
+    color: #909399;
+}
+
+/* 正文 */
+.mail-body-content {
+    line-height: 1.6;
+    font-size: 14px;
+    color: #303133;
+    min-height: 200px;
+    margin-bottom: 50px;
+}
+
+/* 附件卡片 */
+.attachment-section {
+    border-top: 1px solid #eee;
+    padding-top: 20px;
+}
+.attachment-header {
+    margin-bottom: 15px;
+    font-size: 13px;
+    color: #606266;
+    display: flex;
+    align-items: center;
+}
+.security-tip {
+    margin-left: auto;
+    color: #67c23a;
+}
+.attachment-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+.attachment-card {
+    /* width: 260px; */
+    /* border: 1px solid #e4e7ed; */
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: #fbfbfc;
+    cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.attachment-card:hover {
+    border-color: #409eff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.12);
+}
+.file-icon {
+    font-size: 32px;
+    color: #409eff;
+    margin-right: 12px;
+}
+.file-info {
+    flex: 1;
+    overflow: hidden;
+}
+.file-name {
+    font-size: 13px;
+    color: #303133;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.file-size {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 4px;
+}
+.file-download {
+    font-size: 18px;
+    color: #909399;
+    margin-left: 8px;
+}
+.attachment-card:hover .file-download {
+    color: #409eff;
+}
+.text-blue {
+    color: #409eff;
+}
+.text-red {
+    color: #f56c6c;
+}
+.attachment-section {
+ padding-top: 10px;
+  background-color: #fff;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* 头部样式 */
+.attachment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #666;
+}
+
+.attachment-header .divider {
+  margin: 0 10px;
+  color: #e0e0e0;
+}
+
+.attachment-header .download-all {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.attachment-header .header-right {
+  color: #2ba471; /* 安全绿色 */
+  font-size: 12px;
+}
+
+/* 列表布局 */
+.attachment-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 10px;
+}
+
+/* 附件卡片 */
+.attachment-card {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: #f3f5f8; /* 浅灰色背景 */
+  border-radius: 2px;
+  cursor: default;
+  transition: background-color 0.2s;
+  height: 54px;
+  box-sizing: border-box;
+}
+
+.attachment-card:hover {
+  background-color: #e7eaf0;
+}
+
+/* 图标颜色控制 */
+.file-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  border-radius: 2px;
+  font-size: 20px;
+  color: #fff;
+}
+
+/* 根据类型设置背景色 (需在 getFileTypeClass 中返回) */
+.file-icon.img { background-color: #e34d59; }  /* 红色 */
+.file-icon.word { background-color: #0052d9; } /* 蓝色 */
+.file-icon.html { background-color: #ed7b2f; } /* 橙色 */
+.file-icon.txt { background-color: #737b85; }  /* 灰色 */
+
+/* 信息部分 */
+.file-info {
+  flex: 1;
+  overflow: hidden;
+}
+
+.file-name {
+  font-size: 13px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 2px;
+}
+
+.file-size-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 18px;
+}
+
+.file-size {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 悬浮图标控制 */
+.file-actions {
+
+  align-items: center;
+}
+
+.attachment-card:hover .file-actions {
+  display: flex;
+}
+
+.file-actions i {
+  margin-left: 12px;
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+}
+
+.file-actions i:hover {
+  color: #0052d9;
+}
+.attachment-brief-bar {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  font-size: 13px;
+  color: #606266;
+  border-top: 1px solid #ebeef5; 
+  
+  
+}
+.attachment-brief-bar .brief-info {
+    
   }
-  .action-icon { font-size: 18px; color: #606266; cursor: pointer; }
-  .action-icon:hover { color: #409EFF; }
-  
-  .detail-scroll-content { flex: 1; overflow-y: auto; padding: 20px 40px; }
-  
-  /* 头部信息 */
-  .mail-header-info { display: flex; margin-bottom: 30px; }
-  .info-main { flex: 1; margin-left: 15px; }
-  .first-line { display: flex; align-items: center; margin-bottom: 5px; font-size: 14px; }
-  .sender-name { font-weight: bold; color: #303133; }
-  .sender-email { color: #909399; margin-left: 5px; }
-  .send-time { margin-left: auto; color: #909399; }
-  .detail-toggle { margin-left: 10px; color: #409EFF; cursor: pointer; font-size: 12px; }
-  
-  .expanded-info { background: #f8f9fa; padding: 10px; border-radius: 4px; margin-top: 10px; }
-  .info-row { display: flex; margin-bottom: 8px; }
-  .info-row .label { width: 60px; color: #909399; font-size: 13px; }
-  .recipient-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
-  .simple-info { font-size: 12px; color: #909399; }
-  
-  /* 正文 */
-  .mail-body-content { line-height: 1.6; font-size: 14px; color: #303133; min-height: 200px; margin-bottom: 50px; }
-  
-  /* 附件卡片 */
-  .attachment-section { border-top: 1px solid #eee; padding-top: 20px; }
-  .attachment-header { margin-bottom: 15px; font-size: 13px; color: #606266; display: flex; align-items: center; }
-  .security-tip { margin-left: auto; color: #67C23A; }
-  .attachment-list { display: flex; flex-wrap: wrap; gap: 15px; }
-  .attachment-card { width: 260px; border: 1px solid #e4e7ed; border-radius: 4px; display: flex; padding: 10px; background: #fbfbfc; }
-  .file-icon { font-size: 32px; color: #409EFF; margin-right: 12px; }
-  .file-info { flex: 1; overflow: hidden; }
-  .file-name { font-size: 13px; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .file-size { font-size: 12px; color: #909399; margin-top: 4px; }
-  .text-blue { color: #409EFF; }
-  .text-red { color: #F56C6C; }
-  </style>
\ No newline at end of file
+  .attachment-brief-bar .first-file-name {
+      color: #909399;
+      margin-left: 4px;
+    }
+  .jump-link {
+    margin-left: 15px;
+    font-size: 13px;
+  }
+.attachment-section {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 2px solid #f0f2f5;
+}
+</style>
diff --git a/src/components/page/components/email/TmrEmailEditor.vue b/src/components/page/components/email/TmrEmailEditor.vue
index 5842507..0d3e9d2 100644
--- a/src/components/page/components/email/TmrEmailEditor.vue
+++ b/src/components/page/components/email/TmrEmailEditor.vue
@@ -8,6 +8,7 @@
       </div>
   
       <textarea
+      maxlength="-1"
         :value="plainText"
         @input="handleInput"
         :placeholder="resolvedPlaceholder"
@@ -49,22 +50,26 @@
       resolvedPlaceholder() {
         return this.placeholder || this.$t('tmrEmailEditor.placeholder');
       },
-      // 剥离外壳给 textarea 显示
       plainText() {
         if (!this.value) return '';
-        const regex = /<div class="common_tmr_email_box">([\s\S]*?)<\/div>/i;
-        const match = this.value.match(regex);
-        const content = (match && match[1]) ? match[1] : this.value;
-        return content.replace(/<br\s*\/?>/gi, '\n');
+        var inner = this.extractInnerContent(this.value);
+        return inner.replace(/<br\s*\/?>/gi, '\n');
       },
-      // 提取内部内容用于预览
       htmlContentForPreview() {
-        const regex = /<div class="common_tmr_email_box">([\s\S]*?)<\/div>/i;
-        const match = this.value.match(regex);
-        return match ? match[1] : this.value;
+        if (!this.value) return '';
+        return this.extractInnerContent(this.value);
       }
     },
     methods: {
+      extractInnerContent(html) {
+        var tag = '<div class="common_tmr_email_box">';
+        var start = html.indexOf(tag);
+        if (start === -1) return html;
+        start += tag.length;
+        var lastDivClose = html.lastIndexOf('</div>');
+        if (lastDivClose <= start) return html.substring(start);
+        return html.substring(start, lastDivClose);
+      },
       handleInput(e) {
         const rawValue = e.target.value;
         const htmlContent = rawValue.replace(/\n/g, '<br>');
@@ -146,7 +151,8 @@
   
   .modal-body {
     padding: 20px;
-    min-height: 60vh;
+    min-height: 200px;
+    max-height: 75vh;
     overflow-y: auto;
     text-align: left;
   }
diff --git a/src/components/page/edit_per_text.vue b/src/components/page/edit_per_text.vue
index 708ca62..a1231a3 100644
--- a/src/components/page/edit_per_text.vue
+++ b/src/components/page/edit_per_text.vue
@@ -240,7 +240,7 @@ If you're still having trouble with Chrome, you could use other browsers to comp
          <el-dialog :visible.sync="questionVisible" width="1000px" :close-on-click-modal="false">
                 <!-- 审稿人表单修改  -->
                 <!-- 不显示给编辑的话  -->
-                <common-review-article
+                <common-review-article v-if="questionVisible"
                     :form="questionform1"
                     type="questionform"
                     :txt_mess="txt_mess"
diff --git a/src/components/page/mailboxCollect.vue b/src/components/page/mailboxCollect.vue
index 2bec5b4..9aefc89 100644
--- a/src/components/page/mailboxCollect.vue
+++ b/src/components/page/mailboxCollect.vue
@@ -1,46 +1,45 @@
 <template>
-  <div class="mail-container">
-    <div class="mail-sidebar">
-      <div class="p-10">
-        <div class="sidebar-top-actions">
-          <el-button type="primary" icon="el-icon-plus" class="write-btn" @click="handleWrite">
-            {{ $t('mailboxCollect.writeBtn')  }}
-          </el-button>
-          <el-button type="success" icon="el-icon-refresh" class="receive-btn" :loading="syncLoading" @click="handleSyncInbox">
-            {{ $t('mailboxCollect.receiveBtn')  }}
-          </el-button>
-        </div>
-      </div>
-      <ul class="folder-list">
-        <li :class="{ active: currentFolder === 'inbox' }" @click="switchFolder('inbox')">
-          <i class="el-icon-message"></i> {{ $t('mailboxCollect.inboxTab')  }}
-          <span class="badge" v-if="queryIn.num > 0">{{ queryIn.num }}</span>
-        </li>
-         <li :class="{ active: currentFolder === 'sent' }" @click="switchFolder('sent')">
-          <i class="el-icon-position"></i><span style="font-size: 14px;">{{ $t('mailboxCollect.outboxTab')}}</span> 
-        </li>
-        <!-- <li @click="notImplemented"><i class="el-icon-document"></i> <span style="font-size: 14px;">{{ $t('mailboxCollect.draftsTab')}}</span> </li>
+    <div class="mail-container">
+        <div class="mail-sidebar">
+            <div class="p-10">
+                <div class="sidebar-top-actions">
+                    <el-button type="primary" icon="el-icon-plus" class="write-btn" @click="handleWrite">
+                        {{ $t('mailboxCollect.writeBtn') }}
+                    </el-button>
+                    <el-button type="success" icon="el-icon-refresh" class="receive-btn" :loading="syncLoading" @click="handleSyncInbox">
+                        {{ $t('mailboxCollect.receiveBtn') }}
+                    </el-button>
+                </div>
+            </div>
+            <ul class="folder-list">
+                <li :class="{ active: currentFolder === 'inbox' }" @click="switchFolder('inbox')">
+                    <i class="el-icon-message"></i> {{ $t('mailboxCollect.inboxTab') }}
+                    <span class="badge" v-if="queryIn.num > 0">{{ queryIn.num }}</span>
+                </li>
+                <!-- <li :class="{ active: currentFolder === 'sent' }" @click="switchFolder('sent')">
+                    <i class="el-icon-position"></i><span style="font-size: 14px">{{ $t('mailboxCollect.outboxTab') }}</span>
+                </li> -->
+                <!-- <li @click="notImplemented"><i class="el-icon-document"></i> <span style="font-size: 14px;">{{ $t('mailboxCollect.draftsTab')}}</span> </li>
         <li @click="notImplemented"><i class="el-icon-delete"></i> <span style="font-size: 14px;">{{ $t('mailboxCollect.deletedTab')}}</span> </li>
      -->
-    
-      </ul>
-      
-      <div class="sidebar-footer">
-        <div class="user-card">
-          <el-avatar size="small" icon="el-icon-user-solid" class="user-avatar"></el-avatar>
-          <div class="user-detail">
-            <div class="user-name">{{ selectedAccount ? (selectedAccount.smtp_from_name || 'Nova Demo') : '-' }}</div>
-            <div class="user-email" :title="selectedAccountEmail">{{ selectedAccountEmail  }}</div>
-          </div>
-        </div>
-        <el-button size="mini" type="text" @click="openAccountDialog" class="switch-btn">
-          {{ $t('mailboxCollect.changeAccountBtn')}}
-        </el-button>
-      </div>
-    </div>
+            </ul>
 
-    <div class="mail-list-panel" :style="{ width: listWidth + 'px' }" v-if="selectedAccount">
-      <!-- <div class="panel-header">
+            <div class="sidebar-footer">
+                <div class="user-card">
+                    <el-avatar size="small" icon="el-icon-user-solid" class="user-avatar"></el-avatar>
+                    <div class="user-detail">
+                        <div class="user-name">{{ selectedAccount ? selectedAccount.smtp_from_name || 'Nova Demo' : '-' }}</div>
+                        <div class="user-email" :title="selectedAccountEmail">{{ selectedAccountEmail }}</div>
+                    </div>
+                </div>
+                <el-button size="mini" type="text" @click="openAccountDialog" class="switch-btn">
+                    {{ $t('mailboxCollect.changeAccountBtn') }}
+                </el-button>
+            </div>
+        </div>
+
+        <div class="mail-list-panel" :style="{ width: listWidth + 'px' }" v-if="selectedAccount">
+            <!-- <div class="panel-header">
         <el-input 
           v-model="searchKeyword"
           prefix-icon="el-icon-search"
@@ -51,539 +50,1074 @@
         <el-button icon="el-icon-refresh" circle :loading="syncLoading" @click="handleSyncInbox" style="margin-left: 10px;"></el-button> 
       </div> -->
 
-      <div
-        ref="listScrollArea"
-        class="list-scroll-area"
-        @scroll="onListScroll"
-        v-loading="inboxLoading"
-        :element-loading-text="$t('mailboxCollect.loading')"
-      >
-        <template v-if="displayList.length > 0">
-          <div 
-            v-for="item in displayList" 
-            :key="item.id" 
-            :class="['mail-item-box', { active: activeMailId === item.id, unread: item.state === 1 }]"
-            @click="selectMail(item)"
-          >
-            <div class="item-left">
-              <el-avatar :size="32" icon="el-icon-user-solid" class="sender-avatar"></el-avatar>
-            </div>
-            
-            <div class="item-right">
-              <div class="row-one">
-                <span class="sender-name">{{ item.from_name || item.email }}</span>
-                <span class="send-time">{{ formatDisplayTime(item.email_date) }}</span>
-              </div>
-              <div class="row-two">
-                <span class="mail-subject">{{ item.subject || $t('mailboxCollect.noSubject') }}</span>
-              </div>
-              <div class="row-three">
-                <p class="mail-excerpt">{{ stripHtml(item.content || '') }}</p>
-              </div>
-            </div>
-          </div>
-        </template>
-        <div v-if="inboxLoadingMore" class="load-more-tip">
-          <i class="el-icon-loading"></i> {{ $t('mailboxCollect.loadingMore') || '加载更多...' }}
-        </div>
-        <div v-else-if="displayList.length > 0 && inboxPage >= inboxTotalPages" class="load-more-tip no-more">
-          {{ $t('mailboxCollect.noMore') || '没有更多了' }}
-        </div>
-        <div v-else-if="displayList.length === 0" class="empty-list-container">
-          <div class="empty-wrapper">
+            <div
+                ref="listScrollArea"
+                class="list-scroll-area"
+                @scroll="onListScroll"
+                v-loading="inboxLoading"
+                :element-loading-text="$t('mailboxCollect.loading')"
+            >
+            <transition name="el-zoom-in-top">
+        <div v-if="newMailsBuffer.length > 0" class="new-mail-alert" @click="newMailsBuffer=[]">
             <i class="el-icon-message"></i>
-            <p>{{ $t('mailboxCollect.emptyText')  }}</p>
-          </div>
+            {{ $t('mailboxCollect.newMailArrived', { count: newMailsBuffer.length }) || `收到 ${newMailsBuffer.length} 封新邮件，点击查看` }}
         </div>
-      </div>
-    </div>
+    </transition>
+                <template v-if="displayList.length > 0">
+                    <div
+                        v-for="(item,i) in displayList"
+                        :key="item.id"
+                        :class="['mail-item-box', { active: activeMailId === item.id, unread: item.state === 1 }]"
+                        @click="selectMail(item,i)"
+                    >
+                        <div class="item-left">
+                            <div v-if="item.is_read === 0" class="unread-dot"></div>
+                            <el-avatar :size="32" icon="el-icon-user-solid" class="sender-avatar"></el-avatar>
+                        </div>
 
-    <div class="list-resizer" @mousedown="initResize" v-if="selectedAccount"></div>
-
-    <div class="mail-content-panel" v-if="selectedAccount" v-loading="detailLoading">
-      <template v-if="activeMailId && !detailLoading">
-        <div class="mail-page">
-    <mail-detail 
-      v-if="detailMail" 
-      :mailData="detailMail" 
-      @close="closeDetail"
-    />
-  </div>
-      </template>
-      
-      <div v-else class="empty-state">
-        <div class="empty-wrapper">
-          <i class="el-icon-message"></i>
-          <p>{{ $t('mailboxCollect.selectMailTip')  }}</p>
+                        <div class="item-right">
+                            <div class="row-one">
+                                <span class="sender-name">{{ item.from_name || item.email }}</span>
+                                <span class="send-time"><span style="color: #999;margin-right: 4px;" v-if="item.has_attachment==1"><i class="el-icon-paperclip"></i></span>{{ formatDisplayTime(item.email_date) }}</span>
+                            </div>
+                            <div class="row-two">
+                                <span class="mail-subject">{{ item.subject || $t('mailboxCollect.noSubject') }}</span>
+                            </div>
+                            <div class="row-three">
+                                <p class="mail-excerpt">{{ stripHtml(item.content || '') }}</p>
+                            </div>
+		</div>
+					</div>
+								</template>
+                <div v-if="inboxLoadingMore" class="load-more-tip">
+                    <i class="el-icon-loading"></i> {{ $t('mailboxCollect.loadingMore') || '加载更多...' }}
+                </div>
+                <div v-else-if="displayList.length > 0 && inboxPage >= inboxTotalPages" class="load-more-tip no-more">
+                    {{ $t('mailboxCollect.noMore') || '没有更多了' }}
+                </div>
+                <div v-else-if="displayList.length === 0" class="empty-list-container">
+                    <div class="empty-wrapper">
+                        <i class="el-icon-message"></i>
+                        <p>{{ $t('mailboxCollect.emptyText') }}</p>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <el-dialog
-      :title="$t('mailboxCollect.selectAccountTitle')"
-      :visible.sync="accountDialogVisible"
-      width="800px"
-      append-to-body
-      :close-on-click-modal="false"
-      :show-close="true"
-      :before-close="handleAccountDialogBeforeClose"
-    >
-      <el-form inline style="margin-bottom: 10px;">
-        <el-form-item :label="$t('mailboxCollect.journal')">
-          <el-select
-            v-model="accountJournalId"
-            style="width: 260px;"
-            :loading="journalLoading"
-            @change="loadAccountsForJournal"
-          >
-            <el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <el-table :data="accountList" v-loading="accountLoading" size="small">
-        <el-table-column prop="smtp_user" :label="$t('mailboxCollect.accountColumn')" />
-        <el-table-column prop="smtp_from_name" :label="$t('mailboxCollect.nameColumn')" />
-        <el-table-column :label="$t('mailboxCollect.operation')" width="140">
-          <template slot-scope="scope">
-            <span v-if="isCurrentAccount(scope.row)" class="current-account-text">{{ $t('mailboxCollect.currentAccountText') }}</span>
-            <el-button v-else type="primary" size="mini" @click="chooseAccount(scope.row)">{{ $t('mailboxCollect.switchColumn') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
-  </div>
+        <div class="list-resizer" @mousedown="initResize" v-if="selectedAccount"></div>
+
+        <div class="mail-content-panel" v-if="selectedAccount" v-loading="detailLoading">
+            <template v-if="activeMailId && !detailLoading">
+                <div class="mail-page">
+                    <mail-detail v-if="detailMail" :mailData="detailMail" @close="closeDetail" />
+                </div>
+								</template>
+
+            <div v-else class="empty-state">
+                <div class="empty-wrapper">
+                    <i class="el-icon-message"></i>
+                    <p>{{ $t('mailboxCollect.selectMailTip') }}</p>
+						</div>
+					</div>
+					</div>
+
+        <el-dialog
+            :title="$t('mailboxCollect.selectAccountTitle')"
+            :visible.sync="accountDialogVisible"
+            width="800px"
+            append-to-body
+            :close-on-click-modal="false"
+            :show-close="true"
+            :before-close="handleAccountDialogBeforeClose"
+        >
+            <el-form inline style="margin-bottom: 10px">
+                <el-form-item :label="$t('mailboxCollect.journal')">
+                    <el-select v-model="accountJournalId" style="width: 260px" :loading="journalLoading" @change="loadAccountsForJournal">
+                        <el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id" />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <el-table :data="accountList" v-loading="accountLoading" size="small">
+                <el-table-column prop="smtp_user" :label="$t('mailboxCollect.accountColumn')" />
+                <el-table-column prop="smtp_from_name" :label="$t('mailboxCollect.nameColumn')" />
+                <el-table-column :label="$t('mailboxCollect.operation')" width="140">
+								<template slot-scope="scope">
+                        <span v-if="isCurrentAccount(scope.row)" class="current-account-text">{{
+                            $t('mailboxCollect.currentAccountText')
+                        }}</span>
+                        <el-button v-else type="primary" size="mini" @click="chooseAccount(scope.row)">{{
+                            $t('mailboxCollect.switchColumn')
+                        }}</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+        </el-dialog>
+	</div>
 </template>
 
 <script>
 const API = {
-  getInboxList: 'api/email_client/getInboxList',
-  getEmailDetail: 'api/email_client/getEmailDetail',
-  syncInbox: 'api/email_client/syncInbox',
-  getAccounts: 'api/email_client/getAccounts',
-  getOneEmail: 'api/email_client/getOneEmail',
-  getAllJournal: 'api/Article/getJournal',
+    getInboxList: 'api/email_client/getInboxList',
+    inboxSse: 'api/email_client/inboxSse',
+    getEmailDetail: 'api/email_client/getEmailDetail',
+    listAttachments: 'api/email_client/listEmailAttachments',
+    getAttachment: 'api/email_client/getAttachment',
+    syncInbox: 'api/email_client/syncInbox',
+    getAccounts: 'api/email_client/getAccounts',
+    getOneEmail: 'api/email_client/getOneEmail',
+    getAllJournal: 'api/Article/getJournal'
 };
 import MailDetail from '../../components/page/components/email/MailDetail.vue';
-export default {
-  data() {
-    return {
-      currentFolder: 'inbox',
-      searchKeyword: '',
-      syncLoading: false,
-      activeMailId: null,
-      tableData_in: [],
-      tableData_out: [],
-      detailMail: {},
-      queryIn: { num: 0 },
-      inboxPage: 1,
-      inboxPerPage: 20,
-      inboxTotalPages: 1,
-      inboxTotal: 0,
-      inboxLoadingMore: false,
-      inboxLoading: false,
-      listWidth: 350,
-      minWidth: 260,
-      maxWidth: 600,
-      selectedAccount: null,
-      accountDialogVisible: false,
-      journalList: [],
-      journalLoading: false,
-      accountJournalId: null,
-      accountList: [],
-      accountLoading: false,
-      detailLoading: false,
-    };
-  },
-  components: { MailDetail },
-  computed: {
-    displayList() {
-      return this.currentFolder === 'inbox' ? this.tableData_in : this.tableData_out;
+	export default {
+		data() {
+			return {
+            currentFolder: 'inbox',
+            searchKeyword: '',
+            syncLoading: false,
+            activeMailId: null,
+            tableData_in: [],
+				tableData_out: [],
+            detailMail: {},
+            queryIn: { num: 0 },
+            inboxPage: 1,
+            inboxPerPage:100,
+            inboxTotalPages: 1,
+            inboxTotal: 0,
+            inboxLoadingMore: false,
+            inboxLoading: false,
+            listWidth: 350,
+            minWidth: 260,
+            maxWidth: 600,
+            selectedAccount: null,
+            accountDialogVisible: false,
+            journalList: [],
+            journalLoading: false,
+            accountJournalId: null,
+            accountList: [],
+            accountLoading: false,
+            detailLoading: false,
+            // SSE (POST 长连接)
+            sseAbortController: null,
+            sseReconnectTimer: null,
+            sseReader: null,
+            sseBuffer: '',
+            sseManuallyStopped: false,
+            inboxRefreshTimer: null,
+            sseSyncing: false,
+            newMailsBuffer: [], // SSE 发现的新邮件暂存区
+        };
     },
-    selectedAccountEmail() {
-      return this.selectedAccount ? this.selectedAccount.smtp_user : '';
-    }
-  },
-  created() {
-    this.loadJournals();
-    this.initAccountSelection();
-  },
-  methods: {
-	closeDetail() {
-      this.activeMailId = null;
-      this.detailMail = {};
-    },
-    // 拖拽逻辑
-    initResize(e) {
-      const startX = e.clientX;
-      const startWidth = this.listWidth;
-      const doDrag = (moveEvent) => {
-        const newWidth = startWidth + (moveEvent.clientX - startX);
-        if (newWidth >= this.minWidth && newWidth <= this.maxWidth) {
-          this.listWidth = newWidth;
+    components: { MailDetail },
+    computed: {
+        displayList() {
+            return this.currentFolder === 'inbox' ? this.tableData_in : this.tableData_out;
+        },
+        selectedAccountEmail() {
+            return this.selectedAccount ? this.selectedAccount.smtp_user : '';
         }
-      };
-      const stopDrag = () => {
-        document.removeEventListener('mousemove', doDrag);
-        document.removeEventListener('mouseup', stopDrag);
-        document.body.style.cursor = 'default';
-      };
-      document.addEventListener('mousemove', doDrag);
-      document.addEventListener('mouseup', stopDrag);
-      document.body.style.cursor = 'col-resize';
     },
-    initAccountSelection() {
-      const q = this.$route.query;
-      const storedEmailId = localStorage.getItem('mailboxCollect_j_email_id');
-      const storedJournalId = localStorage.getItem('mailboxCollect_journal_id');
-
-      // 1. 兼容老链接：如果地址栏里带有参数，优先用并写入本地
-      if (q.j_email_id) {
-        this.loadAccountById(q.j_email_id);
-        localStorage.setItem('mailboxCollect_j_email_id', q.j_email_id);
-        if (q.journal_id) {
-          localStorage.setItem('mailboxCollect_journal_id', q.journal_id);
-        }
-        return;
-      }
-
-      // 2. 否则尝试从本地缓存恢复上次选择
-      if (storedEmailId) {
-        this.loadAccountById(storedEmailId);
-        return;
-      }
-
-      // 3. 都没有则弹出选择账号弹窗
-      this.openAccountDialog();
-    },
-    loadAccountById(jEmailId) {
-      this.$api
-        .post(API.getOneEmail, { j_email_id: jEmailId })
-        .then(res => {
-          const email = res && res.data ? res.data.email : null;
-          if (res && res.code === 0 && email) {
-            this.selectedAccount = email;
-            this.fetchData();
-            return;
-          }
-          // 接口返回 null/非 0：回退到选择账号弹窗
-          this.selectedAccount = null;
-          this.openAccountDialog();
-        })
-        .catch(() => {
-          // 请求失败：同样回退到选择账号弹窗
-          this.selectedAccount = null;
-          this.openAccountDialog();
-        });
-    },
-    openAccountDialog() {
-      this.accountDialogVisible = true;
-      // 期刊列表进入页面时已加载；仅在首次为空时补拉，避免每次切换账号都请求
-      if (!this.journalList || this.journalList.length === 0) {
+		created() {
         this.loadJournals();
-      }
-      if (this.selectedAccount && this.selectedAccount.journal_id) {
-        this.accountJournalId = this.selectedAccount.journal_id;
-        this.loadAccountsForJournal(this.selectedAccount.journal_id);
-      }
+        this.initAccountSelection();
     },
-    loadJournals() {
-      this.journalLoading = true;
-      this.$api
-        .post(API.getAllJournal, {username: localStorage.getItem('U_name')})
-        .then(res => {
-          this.journalList = (res || []).map(i => ({
-            journal_id: i.journal_id || i.id,
-            title: i.title || i.name || ''
-          }));
-          if (!this.accountJournalId && this.journalList.length > 0) {
-            this.accountJournalId = this.journalList[0].journal_id;
-            this.loadAccountsForJournal(this.accountJournalId);
-          }
-        })
-        .finally(() => {
-          this.journalLoading = false;
-        });
-    },
-    loadAccountsForJournal(id) {
-      this.accountLoading = true;
-      this.$api.post(API.getAccounts, { journal_id: id }).then(res => {
-        this.accountLoading = false;
-        this.accountList = res.data || [];
-      });
-    },
-    isCurrentAccount(row) {
-      if (!row || !this.selectedAccount) return false;
-      return String(row.j_email_id || '') === String(this.selectedAccount.j_email_id || '');
-    },
-    chooseAccount(row) {
-      this.selectedAccount = row;
-      this.accountDialogVisible = false;
-      this.closeDetail();
-
-      // 将所选邮箱配置持久化到本地，避免暴露在地址栏
-      if (row && row.j_email_id) {
-        localStorage.setItem('mailboxCollect_j_email_id', String(row.j_email_id));
-      }
-      if (row && row.journal_id) {
-        localStorage.setItem('mailboxCollect_journal_id', String(row.journal_id));
-      }
-
-      // 不再写入路由 query，直接拉取数据
-      this.fetchData();
-    },
-    handleAccountDialogBeforeClose(done) {
-      const hasAccount = this.selectedAccount || this.$route.query.j_email_id;
-      if (hasAccount) {
-        done();
-      }else{
-        this.$message.error(this.$t('mailboxCollect.selectAccountTip'));
-      }
-      // 没选账号时不允许关闭
-    },
-    // 拉取收件列表，支持分页：page=1 时替换列表，page>1 时追加；接口返回 total、page、per_page、total_pages
-    fetchData(page) {
-      if (!this.selectedAccount) return;
-      const isFirstPage = page === 1 || page == null;
-      if (isFirstPage) {
-        this.inboxPage = 1;
-        // 首次拉取：显示加载中
-        this.inboxLoading = true;
-        // 避免复用旧列表造成“先空后满”的闪烁
-        this.tableData_in = [];
-      }
-      const params = {
-        j_email_id: this.selectedAccount.j_email_id,
-        journal_id: this.selectedAccount.journal_id,
-        // keyword: this.searchKeyword || '',
-        page: isFirstPage ? 1 : page,
-        per_page: this.inboxPerPage
-      };
-      if (isFirstPage) {
-        // 第一页不显示 loadingMore，仅翻页时显示
-      } else {
-        this.inboxLoadingMore = true;
-      }
-      this.$api.post(API.getInboxList, params).then(res => {
-        const data = res && res.data ? res.data : {};
-        const list = Array.isArray(data.list) ? data.list : (Array.isArray(data) ? data : []);
-        const rows = list.map(item => ({
-          id: item.inbox_id || item.id,
-          inbox_id: item.inbox_id || item.id,
-          email: item.from_email,
-          from_name: item.from_name,
-          subject: item.subject,
-          email_date: item.email_date,
-          content: item.content_html || item.content_text || '',
-          state: item.is_read === 1 ? 0 : 1
-        }));
-        if (isFirstPage) {
-          this.tableData_in = rows;
-        } else {
-          this.tableData_in = this.tableData_in.concat(rows);
+    beforeDestroy() {
+        this.stopInboxSse(true);
+        if (this.inboxRefreshTimer) {
+            clearTimeout(this.inboxRefreshTimer);
+            this.inboxRefreshTimer = null;
         }
-        this.inboxPage = data.page != null ? Number(data.page) : (isFirstPage ? 1 : this.inboxPage);
-        this.inboxTotalPages = data.total_pages != null ? Number(data.total_pages) : 1;
-        this.inboxTotal = data.total != null ? Number(data.total) : this.tableData_in.length;
-        this.queryIn.num = this.inboxTotal;
-        this.inboxLoadingMore = false;
-        if (isFirstPage) this.inboxLoading = false;
-      }).catch(() => {
-        this.inboxLoadingMore = false;
-        if (isFirstPage) this.inboxLoading = false;
-      });
-    },
-    switchFolder(f) { this.currentFolder = f; this.activeMailId = null; },
-    selectMail(item) {
-      this.activeMailId = item.id;
-      this.detailLoading = true;
-      const inboxId = item.inbox_id || item.id;
-      this.$api.post(API.getEmailDetail, { inbox_id: inboxId }).then(res => {
-        this.detailLoading = false;
-        const d = res && res.data;
-        if (res && res.code === 0 && d) {
-          this.detailMail = {
-           ...d
-          };
-          item.state = 0;
-        }
-      }).catch(() => {
-        this.detailLoading = false;
-      });
-    },
-    // 同步收件箱：api/email_client/syncInbox 参数 j_email_id、journal_id（均为 String），完成后重新拉取 displayList
-    handleSyncInbox() {
-      if (!this.selectedAccount) return;
-      this.syncLoading = true;
-      const params = {
-        j_email_id: String(this.selectedAccount.j_email_id),
-        journal_id: String(this.selectedAccount.journal_id),
-      };
-      this.$api.post(API.syncInbox, params).then((res) => {
-        this.syncLoading = false;
-        if (res && res.code === 0) {
-          this.$message.success(this.$t('mailboxCollect.syncSuccess'));
-          this.fetchData();
-        } else {
-          this.$message.error((res && res.msg) || this.$t('mailboxCollect.syncFail'));
-        }
-      }).catch(() => {
-        this.syncLoading = false;
-        this.$message.error(this.$t('mailboxCollect.syncFail'));
-      });
-    },
-/**
- * 格式化邮件显示时间
- * @param {Number|String} timestamp 后端返回的时间戳 (如: 1773110269)
- * @returns {String} 格式化后的字符串 (如: 15:57, 昨天, 3月8日, 2025-12-05)
- */
- formatDisplayTime(timestamp) {
-  if (!timestamp) return '';
-
-  // 1. 处理 10 位秒级时间戳，转为毫秒并实例化 Date 对象
-  const date = new Date(Number(timestamp) * 1000);
-  const now = new Date();
-  
-  // 提取日期信息用于比较
-  const dateYear = date.getFullYear();
-  const nowYear = now.getFullYear();
-  const lang = localStorage.getItem('langs') === 'zh' ? 'zh-CN' : 'en-US';
-  
-  // 获取昨天日期
-  const yesterday = new Date(now);
-  yesterday.setDate(now.getDate() - 1);
-
-  // 获取具体时分并补零 (例如 09:05)
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  const timePart = `${hours}:${minutes}`;
-
-  // --- 按照图示规则判断返回 ---
-
-  // 1. 如果是今天：只显示时间，如 "15:57"
-  if (date.toDateString() === now.toDateString()) {
-    return timePart;
-  }
-
-  // 2. 如果是昨天：只显示 "昨天"
-  if (date.toDateString() === yesterday.toDateString()) {
-    return this.$t('mailboxCollect.yesterday');
-  }
-
-  // 3. 如果是今年（非今天/昨天）：按语言显示月日
-  if (dateYear === nowYear) {
-    return new Intl.DateTimeFormat(lang, { month: 'short', day: 'numeric' }).format(date);
-  }
-
-  // 4. 如果是往年：显示完整年月日，如 "2025-12-05"
-  const dateMonth = date.getMonth() + 1;
-  const dateDay = date.getDate();
-  const fullMonth = dateMonth.toString().padStart(2, '0');
-  const fullDay = dateDay.toString().padStart(2, '0');
-  return `${dateYear}-${fullMonth}-${fullDay}`;
+		},
+		methods: {
+            insertMailsFromBuffer() {
+    // 1. 合并数据
+    this.tableData_in = [...this.newMailsBuffer, ...this.tableData_in];
+   
+    // 3. 滚动到顶部
+    this.$nextTick(() => {
+        this.$refs.listScrollArea.scrollTop = 0;
+    });
 },
-    stripHtml(html) { return new DOMParser().parseFromString(html, 'text/html').body.textContent || ""; },
-    handleWrite() {
-      if (!this.selectedAccount) return;
-      this.$router.push(
-        '/mailboxSend'
-      );
-    },
-    handleSearch() { this.fetchData(1); },
-    onListScroll(e) {
-      const el = e.target;
-      if (!el || this.currentFolder !== 'inbox' || this.inboxLoadingMore) return;
-      if (this.inboxPage >= this.inboxTotalPages) return;
-      const threshold = 80;
-      if (el.scrollHeight - el.scrollTop - el.clientHeight <= threshold) {
-        this.fetchData(this.inboxPage + 1);
-      }
-    },
-    notImplemented() { this.$message.info(this.$t('mailboxCollect.featureDev')); }
-  }
-};
+        closeDetail() {
+            this.activeMailId = null;
+            this.detailMail = {};
+        },
+        // 拖拽逻辑
+        initResize(e) {
+            const startX = e.clientX;
+            const startWidth = this.listWidth;
+            const doDrag = (moveEvent) => {
+                const newWidth = startWidth + (moveEvent.clientX - startX);
+                if (newWidth >= this.minWidth && newWidth <= this.maxWidth) {
+                    this.listWidth = newWidth;
+                }
+            };
+            const stopDrag = () => {
+                document.removeEventListener('mousemove', doDrag);
+                document.removeEventListener('mouseup', stopDrag);
+                document.body.style.cursor = 'default';
+            };
+            document.addEventListener('mousemove', doDrag);
+            document.addEventListener('mouseup', stopDrag);
+            document.body.style.cursor = 'col-resize';
+        },
+        initAccountSelection() {
+            const q = this.$route.query;
+            const storedEmailId = localStorage.getItem('mailboxCollect_j_email_id');
+            const storedJournalId = localStorage.getItem('mailboxCollect_journal_id');
+
+            // 1. 兼容老链接：如果地址栏里带有参数，优先用并写入本地
+            if (q.j_email_id) {
+                this.loadAccountById(q.j_email_id);
+                localStorage.setItem('mailboxCollect_j_email_id', q.j_email_id);
+                if (q.journal_id) {
+                    localStorage.setItem('mailboxCollect_journal_id', q.journal_id);
+                }
+                return;
+            }
+
+            // 2. 否则尝试从本地缓存恢复上次选择
+            if (storedEmailId) {
+                this.loadAccountById(storedEmailId);
+                return;
+            }
+
+            // 3. 都没有则弹出选择账号弹窗
+            this.openAccountDialog();
+        },
+        clearStoredAccount() {
+            localStorage.removeItem('mailboxCollect_j_email_id');
+            localStorage.removeItem('mailboxCollect_journal_id');
+        },
+        loadAccountById(jEmailId) {
+            this.$api
+                .post(API.getOneEmail, { j_email_id: jEmailId })
+                .then((res) => {
+                    const email = res && res.data ? res.data.email : null;
+                    if (res && res.code === 0 && email) {
+                        this.selectedAccount = email;
+                        this.fetchData();
+                        this.startInboxSse();
+                        return;
+                    }
+                    // 账号不存在或不属于当前用户：清除本地缓存并弹窗选择
+                    this.clearStoredAccount();
+                    this.selectedAccount = null;
+                    this.$message.warning(this.$t('mailboxCollect.accountNotBelong'));
+                    this.openAccountDialog();
+                })
+                .catch(() => {
+                    this.clearStoredAccount();
+                    this.selectedAccount = null;
+                    this.$message.warning(this.$t('mailboxCollect.accountNotBelong'));
+                    this.openAccountDialog();
+                });
+        },
+        openAccountDialog() {
+            this.accountDialogVisible = true;
+            // 期刊列表进入页面时已加载；仅在首次为空时补拉，避免每次切换账号都请求
+            if (!this.journalList || this.journalList.length === 0) {
+                this.loadJournals();
+            }
+            if (this.selectedAccount && this.selectedAccount.journal_id) {
+                this.accountJournalId = this.selectedAccount.journal_id;
+                this.loadAccountsForJournal(this.selectedAccount.journal_id);
+            }
+        },
+        loadJournals() {
+            this.journalLoading = true;
+            this.$api
+                .post(API.getAllJournal, { username: localStorage.getItem('U_name') })
+                .then((res) => {
+                    this.journalList = (res || []).map((i) => ({
+                        journal_id: i.journal_id || i.id,
+                        title: i.title || i.name || ''
+                    }));
+                    if (!this.accountJournalId && this.journalList.length > 0) {
+                        this.accountJournalId = this.journalList[0].journal_id;
+                        this.loadAccountsForJournal(this.accountJournalId);
+                    }
+                })
+                .finally(() => {
+                    this.journalLoading = false;
+                });
+        },
+        loadAccountsForJournal(id) {
+            this.accountLoading = true;
+            this.$api.post(API.getAccounts, { journal_id: id }).then((res) => {
+                this.accountLoading = false;
+                this.accountList = res.data || [];
+            });
+        },
+        isCurrentAccount(row) {
+            if (!row || !this.selectedAccount) return false;
+            return String(row.j_email_id || '') === String(this.selectedAccount.j_email_id || '');
+        },
+        chooseAccount(row) {
+            this.selectedAccount = row;
+            this.accountDialogVisible = false;
+            this.closeDetail();
+
+            // 将所选邮箱配置持久化到本地，避免暴露在地址栏
+            if (row && row.j_email_id) {
+                localStorage.setItem('mailboxCollect_j_email_id', String(row.j_email_id));
+            }
+            if (row && row.journal_id) {
+                localStorage.setItem('mailboxCollect_journal_id', String(row.journal_id));
+            }
+
+            // 不再写入路由 query，直接拉取数据
+            this.fetchData();
+            this.startInboxSse();
+        },
+        handleAccountDialogBeforeClose(done) {
+            const hasAccount = this.selectedAccount || this.$route.query.j_email_id;
+            if (hasAccount) {
+                done();
+            } else {
+                this.$message.error(this.$t('mailboxCollect.selectAccountTip'));
+            }
+            // 没选账号时不允许关闭
+        },
+        // 修改此方法：收到 SSE 后，只拉取最新的一封或几封，不刷新整页
+syncInboxBySse(payload) {
+    if (!payload || this.sseSyncing) return;
+    const jEmailId = String(payload.j_email_id || '');
+    const journalId = String(payload.journal_id || '');
+    
+    this.sseSyncing = true;
+    this.$api.post(API.syncInbox, { j_email_id: jEmailId, journal_id: journalId })
+        .then(() => {
+            // 同步成功后，拉取最新的一封邮件数据（假设后端支持或通过 getInboxList 第一页获取）
+            this.fetchLatestSingleMail(jEmailId, journalId);
+        })
+        .finally(() => { this.sseSyncing = false; });
+},
+
+fetchLatestSingleMail(jEmailId, journalId) {
+    // 获取第一页的最新数据
+    this.$api.post(API.getInboxList, { j_email_id: jEmailId, journal_id: journalId, page: 1, per_page: 100 })
+        .then(res => {
+            const list = res.data.list || res.data || [];
+            this.queryIn.num = res.data.total || 0;
+            // 找出 tableData_in 中不存在的新邮件
+            list.forEach(item => {
+                const isNew = !this.tableData_in.some(old => (old.id === (item.inbox_id || item.id)));
+                const isNotBuffered = !this.newMailsBuffer.some(b => (b.id === (item.inbox_id || item.id)));
+                
+                if (isNew && isNotBuffered) {
+                    // 格式化数据结构（保持与 fetchData 映射一致）
+                    const formatted = {
+                        id: item.inbox_id || item.id,
+                        inbox_id: item.inbox_id || item.id,
+                        email: item.from_email,
+                        from_name: item.from_name,
+                        subject: item.subject,
+                        email_date: item.email_date,
+                        content: item.content_html || item.content_text || '',
+                        is_read: item.is_read
+                    };
+                    this.newMailsBuffer.unshift(formatted);
+                    
+                }
+            });
+            this.insertMailsFromBuffer();
+        });
+},
+        // 拉取收件列表，支持分页：page=1 时替换列表，page>1 时追加；接口返回 total、page、per_page、total_pages
+        fetchData(page) {
+            if (!this.selectedAccount) return;
+            const isFirstPage = page === 1 || page == null;
+            if (isFirstPage) {
+                this.inboxPage = 1;
+                // 首次拉取：显示加载中
+                this.inboxLoading = true;
+                // 避免复用旧列表造成“先空后满”的闪烁
+                this.tableData_in = [];
+            }
+            const params = {
+                j_email_id: this.selectedAccount.j_email_id,
+                journal_id: this.selectedAccount.journal_id,
+                // keyword: this.searchKeyword || '',
+                page: isFirstPage ? 1 : page,
+                per_page: this.inboxPerPage
+            };
+            if (isFirstPage) {
+                // 第一页不显示 loadingMore，仅翻页时显示
+            } else {
+                this.inboxLoadingMore = true;
+            }
+            this.$api
+                .post(API.getInboxList, params)
+                .then((res) => {
+                    const data = res && res.data ? res.data : {};
+                    const list = Array.isArray(data.list) ? data.list : Array.isArray(data) ? data : [];
+                    const rows = list.map((item) => ({
+                        id: item.inbox_id || item.id,
+                        inbox_id: item.inbox_id || item.id,
+                        email: item.from_email,
+                        has_attachment: item.has_attachment,    
+                        from_name: item.from_name,
+                        subject: item.subject,
+                        email_date: item.email_date,
+                        content: item.content_html || item.content_text || '',
+                        is_read: item.is_read
+                    }));
+                    if (isFirstPage) {
+                        this.tableData_in = rows;
+                    } else {
+                        // 过滤掉已经在列表中存在的 id (可能来自 SSE 之前手动插入的)
+            const filteredRows = rows.filter(row => 
+                !this.tableData_in.some(existing => existing.id === row.id)
+            );
+            this.tableData_in = this.tableData_in.concat(filteredRows);
+                        
+                    }
+                    this.inboxPage = data.page != null ? Number(data.page) : isFirstPage ? 1 : this.inboxPage;
+                    this.inboxTotalPages = data.total_pages != null ? Number(data.total_pages) : 1;
+                    this.inboxTotal = data.total != null ? Number(data.total) : this.tableData_in.length;
+                    this.queryIn.num = this.inboxTotal;
+                    this.inboxLoadingMore = false;
+                    if (isFirstPage) this.inboxLoading = false;
+                })
+                .catch(() => {
+                    this.inboxLoadingMore = false;
+                    if (isFirstPage) this.inboxLoading = false;
+                });
+        },
+        switchFolder(f) {
+            this.currentFolder = f;
+            this.activeMailId = null;
+        },
+        selectMail(item,index) {
+            this.activeMailId = item.id;
+            this.detailLoading = true;
+            const inboxId = item.inbox_id || item.id;
+            this.$api
+                .post(API.getEmailDetail, { inbox_id: inboxId })
+                .then((res) => {
+                    const d = res && res.data;
+                    if (res && res.code === 0 && d) {
+                        this.detailMail = { ...d, inbox_id: String(inboxId), attachments: [] };
+                        item.state = 0;
+                        this.displayList[index].is_read = d.is_read;
+                        if (Number(d.has_attachment) === 1) {
+                            this.fetchAttachments(String(inboxId));
+                        } else {
+                            this.detailLoading = false;
+                        }
+                    } else {
+                        this.detailLoading = false;
+                    }
+                })
+                .catch(() => {
+                    this.detailLoading = false;
+                });
+        },
+        fetchAttachments(inboxId) {
+            this.$api
+                .post(API.listAttachments, { inbox_id: inboxId })
+                .then((res) => {
+                    const list = (res && res.data) || (res && res.list) || [];
+                    const arr = Array.isArray(list) ? list : [];
+                    const attachments = arr.map((a, idx) => ({
+                        ...a,
+                        part_index: a.part_index != null ? a.part_index : idx,
+                        name: a.filename || a.name || `attachment_${idx}`,
+                        size: a.size || '',
+                        file_url: ''
+                    }));
+                    this.$set(this.detailMail, 'attachments', attachments);
+                    this.batchFetchDownloadUrls(inboxId, attachments);
+                })
+                .catch(() => {})
+                .finally(() => {
+                    this.detailLoading = false;
+                });
+        },
+        batchFetchDownloadUrls(inboxId, attachments) {
+            attachments.forEach((att) => {
+                this.$api
+                    .post(API.getAttachment, {
+                        inbox_id: String(inboxId),
+                        part_index: String(att.part_index)
+                    })
+                    .then((res) => {
+                        if (res && res.data && res.data.file_url) {
+                            this.$set(att, 'file_url', res.data.file_url);
+                        }
+                    })
+                    .catch(() => {});
+            });
+        },
+        // 同步收件箱：api/email_client/syncInbox 参数 j_email_id、journal_id（均为 String），完成后重新拉取 displayList
+        handleSyncInbox() {
+            if (!this.selectedAccount) return;
+            this.syncLoading = true;
+            const params = {
+                j_email_id: String(this.selectedAccount.j_email_id),
+                journal_id: String(this.selectedAccount.journal_id)
+            };
+            this.$api
+                .post(API.syncInbox, params)
+                .then((res) => {
+                    this.syncLoading = false;
+                    if (res && res.code === 0) {
+                        this.newMailsBuffer=[]
+                        this.$message.success(this.$t('mailboxCollect.syncSuccess'));
+                        this.fetchData();
+                    } else {
+                        this.$message.error((res && res.msg) || this.$t('mailboxCollect.syncFail'));
+                    }
+                })
+                .catch(() => {
+                    this.syncLoading = false;
+                    this.$message.error(this.$t('mailboxCollect.syncFail'));
+                });
+        },
+        /**
+         * 格式化邮件显示时间
+         * @param {Number|String} timestamp 后端返回的时间戳 (如: 1773110269)
+         * @returns {String} 格式化后的字符串 (如: 15:57, 昨天, 3月8日, 2025-12-05)
+         */
+        formatDisplayTime(timestamp) {
+            if (!timestamp) return '';
+
+            // 1. 处理 10 位秒级时间戳，转为毫秒并实例化 Date 对象
+            const date = new Date(Number(timestamp) * 1000);
+            const now = new Date();
+
+            // 提取日期信息用于比较
+            const dateYear = date.getFullYear();
+            const nowYear = now.getFullYear();
+            const lang = localStorage.getItem('langs') === 'zh' ? 'zh-CN' : 'en-US';
+
+            // 获取昨天日期
+            const yesterday = new Date(now);
+            yesterday.setDate(now.getDate() - 1);
+
+            // 获取具体时分并补零 (例如 09:05)
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            const timePart = `${hours}:${minutes}`;
+
+            // --- 按照图示规则判断返回 ---
+
+            // 1. 如果是今天：只显示时间，如 "15:57"
+            if (date.toDateString() === now.toDateString()) {
+                return timePart;
+            }
+
+            // 2. 如果是昨天：显示 "昨天 15:57"
+            if (date.toDateString() === yesterday.toDateString()) {
+                return this.$t('mailboxCollect.yesterday') + ' ' + timePart;
+            }
+
+            // 3. 如果是今年（非今天/昨天）：按语言显示月日
+            if (dateYear === nowYear) {
+                return new Intl.DateTimeFormat(lang, { month: 'short', day: 'numeric' }).format(date);
+            }
+
+            // 4. 如果是往年：显示完整年月日，如 "2025-12-05"
+            const dateMonth = date.getMonth() + 1;
+            const dateDay = date.getDate();
+            const fullMonth = dateMonth.toString().padStart(2, '0');
+            const fullDay = dateDay.toString().padStart(2, '0');
+            return `${dateYear}-${fullMonth}-${fullDay}`;
+        },
+        stripHtml(html) {
+            return new DOMParser().parseFromString(html, 'text/html').body.textContent || '';
+        },
+        handleWrite() {
+            if (!this.selectedAccount) return;
+            this.$router.push('/mailboxSend');
+        },
+        handleSearch() {
+            this.fetchData(1);
+        },
+        onListScroll(e) {
+            const el = e.target;
+            if (!el || this.currentFolder !== 'inbox' || this.inboxLoadingMore) return;
+            if (this.inboxPage >= this.inboxTotalPages) return;
+            const threshold = 80;
+            if (el.scrollHeight - el.scrollTop - el.clientHeight <= threshold) {
+                this.fetchData(this.inboxPage + 1);
+            }
+        },
+        buildSseUrl(jEmailId) {
+            // 与现有 axios baseURL=/api + 相对路径 规则一致；GET + query 传参
+            const base = `/api/${API.inboxSse}`;
+            const q = new URLSearchParams({ j_email_id: String(jEmailId) }).toString();
+            return `${base}?${q}`;
+        },
+        stopInboxSse(manual) {
+            this.sseManuallyStopped = !!manual;
+            if (this.sseReconnectTimer) {
+                clearTimeout(this.sseReconnectTimer);
+                this.sseReconnectTimer = null;
+            }
+            if (this.sseReader) {
+                try {
+                    this.sseReader.cancel();
+                } catch (e) {}
+                this.sseReader = null;
+            }
+            if (this.sseAbortController) {
+                try {
+                    this.sseAbortController.abort();
+                } catch (e) {}
+                this.sseAbortController = null;
+            }
+            this.sseBuffer = '';
+        },
+        scheduleInboxRefresh() {
+            if (!this.selectedAccount || this.currentFolder !== 'inbox') return;
+            if (this.inboxRefreshTimer) return;
+            this.inboxRefreshTimer = setTimeout(() => {
+                this.inboxRefreshTimer = null;
+                this.fetchData(1);
+            }, 1200);
+        },
+        syncInboxBySse(payload) {
+            if (!payload || this.sseSyncing) return;
+            const jEmailId = payload.j_email_id != null ? String(payload.j_email_id) : '';
+            const journalId = payload.journal_id != null ? String(payload.journal_id) : '';
+            if (!jEmailId || !journalId) return;
+            this.sseSyncing = true;
+            this.$api
+                .post(API.syncInbox, {
+                    j_email_id: jEmailId,
+                    journal_id: journalId
+                })
+                .then(() => {
+                    this.fetchLatestSingleMail(jEmailId, journalId);
+                    // this.scheduleInboxRefresh();
+                })
+                .catch(() => {})
+                .finally(() => {
+                    this.sseSyncing = false;
+                });
+        },
+        handleSsePayload(rawData) {
+            // 仅 inbox_updated 且 synced=1 时才处理；其它消息不刷新
+            let payload = rawData;
+            try {
+                payload = JSON.parse(rawData);
+            } catch (e) {}
+            if (payload && payload.type === 'heartbeat') return;
+            if (payload && payload.type === 'inbox_updated' && payload.synced>0) {
+                this.syncInboxBySse(payload);
+            }
+        },
+        handleSseDisconnected() {
+            // 收到后端的“断开”事件：挂掉当前连接并立即重连
+            if (this.sseReconnectTimer) return;
+
+            // 标记为手动停止：避免当前 startInboxSse 的 catch 再额外 schedule 重连
+            this.stopInboxSse(true);
+
+            this.sseReconnectTimer = setTimeout(() => {
+                this.sseReconnectTimer = null;
+                this.sseManuallyStopped = false;
+                this.startInboxSse();
+            }, 800);
+        },
+        processSseChunk(textChunk) {
+            // 归一化换行，避免 \r\n 导致按 \n\n 切块失败
+            const normalized = String(textChunk).replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+            this.sseBuffer += normalized;
+            const events = this.sseBuffer.split('\n\n');
+            this.sseBuffer = events.pop() || '';
+            events.forEach((evt) => {
+                const lines = evt.split('\n');
+                const eventNameLine = lines.find((line) => line.trim().startsWith('event:'));
+                const eventName = eventNameLine ? eventNameLine.replace(/^\s*event:\s?/, '').trim() : '';
+                const dataLines = lines
+                    .filter((line) => line.trim().startsWith('data:'))
+                    .map((line) => line.replace(/^\s*data:\s?/, ''));
+
+                // 断开事件可能没有 data；因此需要单独处理 event
+                if (eventName === 'disconnected') {
+                    this.handleSseDisconnected();
+                    return;
+                }
+
+                if (!dataLines.length) return;
+                this.handleSsePayload(dataLines.join('\n'));
+            });
+        },
+//         startInboxSse() {
+//   // 1. 使用原生 EventSource，它会自动处理长连接
+//   // 2. 注意：如果存在跨域，URL 必须写全；如果配置了 proxy，写代理路径
+//   const url = "/api/api/email_client/inboxSse?j_email_id=12";
+  
+//   const es = new EventSource(url);
+
+//   es.onopen = () => console.log("✅ SSE 连接成功！");
+  
+//   es.onmessage = (e) => {
+//     console.log("📩 收到数据:", e.data);
+//   };
+
+//   es.onerror = (err) => {
+//     console.error("❌ SSE 连接失败，请检查 Network 面板的 Status Code", err);
+//     es.close();
+//   };
+// },
+        async startInboxSse() {
+            if (!this.selectedAccount || !this.selectedAccount.j_email_id) return;
+            // 账号切换前先断开旧连接
+            this.stopInboxSse(false);
+            this.sseManuallyStopped = false;
+            const jEmailId = String(this.selectedAccount.j_email_id);
+            try {
+                this.sseAbortController = new AbortController();
+                const response = await fetch(this.buildSseUrl(jEmailId), {
+                    method: 'GET',
+                    signal: this.sseAbortController.signal
+                });
+                if (!response.ok || !response.body) {
+                    throw new Error('SSE response invalid');
+                }
+                this.sseReader = response.body.getReader();
+                const decoder = new TextDecoder('utf-8');
+                while (true) {
+                    const { done, value } = await this.sseReader.read();
+                    if (done) {
+                        // 流结束：把缓冲区里剩余内容当作最后一个事件处理
+                        if (this.sseBuffer) {
+                            this.processSseChunk('\n\n');
+                        }
+                        break;
+                    }
+                    if (value) this.processSseChunk(decoder.decode(value, { stream: true }));
+                }
+            } catch (e) {
+                // 只有非手动停止时才尝试重连
+                if (!this.sseManuallyStopped) {
+                    if (this.sseReconnectTimer) clearTimeout(this.sseReconnectTimer);
+                    this.sseReconnectTimer = setTimeout(() => {
+                        this.sseReconnectTimer = null;
+                        this.startInboxSse();
+                    }, 3000);
+                }
+            }
+        },
+        notImplemented() {
+            this.$message.info(this.$t('mailboxCollect.featureDev'));
+        }
+		}
+	};
 </script>
 
 <style scoped>
 .mail-container {
-  display: flex;
-  height: calc(100vh - 120px);
-  background: #fff;
-  overflow: hidden;
+    display: flex;
+    height: calc(100vh - 120px);
+    background: #fff;
+    overflow: hidden;
 }
 
 /* 1. 左侧栏 */
 .mail-sidebar {
-  width: 240px;
-  background-color: #f8f9fa;
-  border-right: 1px solid #eaeaea;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
+    width: 240px;
+    background-color: #f8f9fa;
+    border-right: 1px solid #eaeaea;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+}
+.p-10 {
+    padding: 10px;
+}
+.p-20 {
+    padding: 20px;
+}
+.sidebar-top-actions {
+    display: flex;
+    gap: 10px;
+    padding: 0 6px;
+}
+.write-btn {
+    flex: 1;
+    width: auto;
+    border-radius: 8px;
+    font-weight: bold;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.receive-btn {
+    flex: 1;
+    width: auto;
+    border-radius: 8px;
+    font-weight: bold;
+    margin-left: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.folder-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex: 1;
 }
-.p-10 { padding: 10px; }
-.p-20 { padding: 20px; }
-.sidebar-top-actions { display: flex; gap: 10px; padding: 0 6px; }
-.write-btn { flex: 1; width: auto; border-radius: 8px; font-weight: bold; padding-left: 10px; padding-right: 10px; }
-.receive-btn { flex: 1; width: auto; border-radius: 8px; font-weight: bold; margin-left: 0px; padding-left: 10px; padding-right: 10px; }
-.folder-list { list-style: none; padding: 0; margin: 0; flex: 1; }
 .folder-list li {
-  padding: 12px 20px;
-  cursor: pointer;
-  color: #606266;
-  display: flex;
-  align-items: center;
+    padding: 12px 20px;
+    cursor: pointer;
+    color: #606266;
+    display: flex;
+    align-items: center;
+}
+.folder-list li i {
+    margin-right: 12px;
+    font-size: 18px;
+}
+.folder-list li.active {
+    background: #edeef0;
+    color: #006699;
+    font-weight: bold;
+    border-left: 3px solid #006699;
+}
+.badge {
+    margin-left: auto;
+    background: #ddd;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 12px;
 }
-.folder-list li i { margin-right: 12px; font-size: 18px; }
-.folder-list li.active { background: #edeef0; color: #006699; font-weight: bold; border-left: 3px solid #006699; }
-.badge { margin-left: auto; background: #ddd; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
 
-.sidebar-footer { padding: 10px 0px; border-top: 1px solid #eee; background: #f8f9fa; }
-.user-card { display: flex; align-items: center; margin-bottom: 8px; overflow: hidden; }
-.user-avatar { flex-shrink: 0; background: #ffeded; color: #f56c6c; }
-.user-detail { margin-left: 10px; overflow: hidden; flex: 1; }
-.user-name { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.user-email { font-size: 12px; color: #909399; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.switch-btn { padding: 0; font-size: 12px; color: #409eff; }
+.sidebar-footer {
+    padding: 10px 0px;
+    border-top: 1px solid #eee;
+    background: #f8f9fa;
+}
+.user-card {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    overflow: hidden;
+}
+.user-avatar {
+    flex-shrink: 0;
+    background: #ffeded;
+    color: #f56c6c;
+}
+.user-detail {
+    margin-left: 10px;
+    overflow: hidden;
+    flex: 1;
+}
+.user-name {
+    font-size: 14px;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.user-email {
+    font-size: 12px;
+    color: #909399;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.switch-btn {
+    padding: 0;
+    font-size: 12px;
+    color: #409eff;
+}
 
 /* 2. 中间列表栏 - 参考 image_8649db.png */
-.mail-list-panel { display: flex; flex-direction: column; flex-shrink: 0; background: #fff; }
-.panel-header { padding: 15px; border-bottom: 1px solid #f5f5f5; display: flex; }
-.list-scroll-area { flex: 1; overflow-y: auto; }
+.mail-list-panel {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    background: #fff;
+}
+.panel-header {
+    padding: 15px;
+    border-bottom: 1px solid #f5f5f5;
+    display: flex;
+}
+.list-scroll-area {
+    flex: 1;
+    overflow-y: auto;
+}
 
 .mail-item-box {
-  display: flex;
-  padding: 12px 16px;
-  border-bottom: 1px solid #f0f0f0;
-  cursor: pointer;
+    display: flex;
+    padding: 8px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+}
+.mail-item-box:hover {
+    background: #f5f7fa;
+}
+.mail-item-box.active {
+    background: #eef1f6;
+    border-left: 3px solid #006699;
+}
+.item-left {
+    margin-right: 12px;
+    display: flex;
+    align-items: flex-start;
+    padding-top: 4px;
+}
+.sender-avatar {
+    background: #c0c4cc;
+}
+.item-right {
+    flex: 1;
+    overflow: hidden;
+}
+.row-one {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+.sender-name {
+    font-size: 14px;
+    color: #303133;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.send-time {
+    font-size: 12px;
+    color: #909399;
+    flex-shrink: 0;
+}
+.row-two {
+    margin-bottom: 4px;
+}
+.mail-subject {
+    font-size: 13px;
+    color: #6a7282;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.mail-excerpt {
+    font-size: 12px;
+    color: #606266;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.load-more-tip {
+    text-align: center;
+    padding: 12px;
+    font-size: 12px;
+    color: #909399;
+}
+.load-more-tip.no-more {
+    color: #c0c4cc;
+}
+.current-account-text {
+    color: #006699;
+    font-size: 12px;
 }
-.mail-item-box:hover { background: #f5f7fa; }
-.mail-item-box.active { background: #eef1f6; border-left: 3px solid #006699; }
-.item-left { margin-right: 12px; display: flex; align-items: flex-start; padding-top: 4px; }
-.sender-avatar { background: #c0c4cc; }
-.item-right { flex: 1; overflow: hidden; }
-.row-one { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
-.sender-name { font-size: 14px; color: #303133; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.send-time { font-size: 12px; color: #909399; flex-shrink: 0; }
-.row-two { margin-bottom: 4px; }
-.mail-subject { font-size: 13px; color: #6a7282;  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.mail-excerpt { font-size: 12px; color: #606266; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-.load-more-tip { text-align: center; padding: 12px; font-size: 12px; color: #909399; }
-.load-more-tip.no-more { color: #c0c4cc; }
-.current-account-text { color: #006699; font-size: 12px; }
 
 /* 拖拽条 */
-.list-resizer { width: 4px; cursor: col-resize; border-left: 1px solid #eaeaea; transition: background 0.2s; }
-.list-resizer:hover { background: #409eff; }
+.list-resizer {
+    width: 4px;
+    cursor: col-resize;
+    border-left: 1px solid #eaeaea;
+    transition: background 0.2s;
+}
+.list-resizer:hover {
+    background: #409eff;
+}
 
 /* 3. 右侧详情 */
-.mail-content-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
-.mail-page { flex: 1; min-height: 0; overflow-y: auto; }
-.detail-toolbar { padding: 10px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }
-.detail-content { padding: 30px 40px; overflow-y: auto; }
-.mail-title { font-size: 24px; margin-bottom: 20px; }
-.mail-info { display: flex; align-items: center; }
-.info-main { margin-left: 15px; }
-.mail-body { line-height: 1.6; font-size: 15px; }
-.empty-state, .empty-list-container { flex: 1; display: flex; align-items: center; justify-content: center; color: #ccc; text-align: center; }
-.empty-state i, .empty-list-container i { font-size: 48px; margin-bottom: 10px; }
-</style>
\ No newline at end of file
+.mail-content-panel {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.mail-page {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+}
+.detail-toolbar {
+    padding: 10px 20px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+}
+.detail-content {
+    padding: 30px 40px;
+    overflow-y: auto;
+}
+.mail-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+.mail-info {
+    display: flex;
+    align-items: center;
+}
+.info-main {
+    margin-left: 15px;
+}
+.mail-body {
+    line-height: 1.6;
+    font-size: 15px;
+}
+.empty-state,
+.empty-list-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    text-align: center;
+}
+.empty-state i,
+.empty-list-container i {
+    font-size: 48px;
+    margin-bottom: 10px;
+}
+.new-mail-alert {
+    background-color: #f0f9eb;
+    color: #67c23a;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    font-size: 13px;
+    border-bottom: 1px solid #e1f3d8;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    font-weight: bold;
+}
+.new-mail-alert:hover {
+    background-color: #e1f3d8;
+}
+.item-left {
+    position: relative; /* 关键：让红点相对于此容器定位 */
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+}
+
+.unread-dot {
+    position: absolute;
+    top: 16px;      /* 调整红点上下位置 */
+    left: -13px;    /* 调整红点左右位置 */
+    width: 8px;     /* 红点大小 */
+    height: 8px;
+    background-color: #F56C6C; /* 经典的警告红 */
+    border-radius: 50%;
+    border: 1.5px solid #fff;  /* 加个白边，在深色背景或头像上更清晰 */
+    z-index: 10;
+}
+</style>
diff --git a/src/components/page/mailboxConfig.vue b/src/components/page/mailboxConfig.vue
index 690ae98..806d5ce 100644
--- a/src/components/page/mailboxConfig.vue
+++ b/src/components/page/mailboxConfig.vue
@@ -67,8 +67,8 @@
 				<el-form-item :label="$t('mailboxConfig.password')" prop="password">
 					<el-input
 						v-model="form.password"
-						type="password"
-						show-password
+						type="text"
+						
 						clearable
 						autocomplete="new-password"
 					></el-input>
@@ -256,6 +256,7 @@
 								today_sent: item.today_sent,
 								state: item.state,
 								remaining_today: item.remaining_today,
+								smtp_password: item.smtp_password,
 							};
 						}.bind(this));
 						this.tableData = list;
@@ -289,12 +290,14 @@
 				this.$nextTick(function() { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); }.bind(this));
 			},
 			handleEdit(row) {
+				console.log("🚀 ~ handleEdit ~ row:", row);
+
 				this.dialogTitle = this.$t('mailboxConfig.dialogEdit');
 				this.form = {
 					id: row.id,
 					journal_id: row.journal_id,
 					account: row.account || row.smtp_user || '',
-					password: '',
+					password: row.smtp_password || '',
 					smtp_from_name: row.smtp_from_name || '',
 					smtp_host: row.smtp_host || '',
 					smtp_port: row.smtp_port != null && row.smtp_port !== '' ? String(row.smtp_port) : '',
diff --git a/src/components/page/mailboxSend.vue b/src/components/page/mailboxSend.vue
index fcf513d..778de69 100644
--- a/src/components/page/mailboxSend.vue
+++ b/src/components/page/mailboxSend.vue
@@ -107,7 +107,7 @@
 					:source-content.sync="sourceContent"
 					:source-rows="16"
 					:source-placeholder="$t('mailboxSend.sourcePlaceholder')"
-					:show-select-template-button="true"
+					:show-select-template-button="false"
 					@onSelectTemplate="showTemplateDialog = true"
 				/>
 			</div>
@@ -672,24 +672,23 @@ import TemplateSelectorDialog from '@/components/page/components/email/TemplateS
 						this.$message.warning(this.$t('mailboxSend.needAccount'));
 						return;
 					}
-					if (!this.selectedTemplateId || !this.selectedStyleId) {
-						this.$message.warning(this.$t('mailboxSend.selectTemplateStyleFirst'));
-						return;
-					}
+					// if (!this.selectedTemplateId || !this.selectedStyleId) {
+					// 	this.$message.warning(this.$t('mailboxSend.selectTemplateStyleFirst'));
+					// 	return;
+					// }
 
 					this.sendLoading = true;
 					const params = {
-						journal_id: String(journalId),
-						template_id: String(this.selectedTemplateId),
 						to_email: toList.join(','),
-						style_id: String(this.selectedStyleId),
-						expert_id: expert_id_list.join(',') || '1',
+						subject: this.queryMail.sendtitle || '',
+						content: this.queryMail.content || '',
 						j_email_id: String(jEmailId),
+						journal_id: String(journalId),
 					};
 
 					const self = this;
 					this.$api
-						.post('api/email_client/sendTemplateStyleTest', params)
+						.post('api/email_client/sendOne', params)
 						.then((res) => {
 							if (res && res.code === 0) {
 								self.$message.success(self.$t('mailboxSend.sendSuccess'));
diff --git a/src/components/page/scholarCrawlersKeywords.vue b/src/components/page/scholarCrawlersKeywords.vue
new file mode 100644
index 0000000..09bdc66
--- /dev/null
+++ b/src/components/page/scholarCrawlersKeywords.vue
@@ -0,0 +1,545 @@
+<template>
+    <div class="keywords-container">
+      <transition name="el-zoom-in-top" appear>
+        <div class="page-header">
+          <div class="header-left">
+            <h2 class="page-title">{{ $t('crawlerKeywords.pageTitle') }}</h2>
+            <p class="page-desc">
+              <i class="el-icon-info"></i> {{ $t('crawlerKeywords.pageDesc') }}
+            </p>
+          </div>
+          <div class="header-actions">
+           
+            <!-- <el-button 
+              type="primary" 
+              icon="el-icon-video-play" 
+              @click="handleStartCrawl" 
+              :loading="crawlLoading" 
+              class="glow-button" 
+              round
+            >
+              {{ $t('crawlerKeywords.startCrawl') }}
+            </el-button> -->
+          </div>
+        </div>
+      </transition>
+  
+      <div class="add-section shadow-hover">
+        <el-input
+          v-model="newKeyword"
+          :placeholder="$t('crawlerKeywords.inputPlaceholder')"
+          class="add-input-custom"
+          prefix-icon="el-icon-collection-tag"
+          clearable
+          @keyup.enter.native="handleAdd"
+        />
+        <el-button 
+          type="primary" 
+          icon="el-icon-plus" 
+          @click="handleAdd" 
+          :loading="addLoading" 
+          class="add-btn"
+        >
+          {{ $t('crawlerKeywords.addKeyword') }}
+        </el-button>
+      </div>
+  
+      <el-card shadow="never" class="table-card animated-card">
+        <div class="table-toolbar">
+          <el-input
+            v-model="searchText"
+            :placeholder="$t('crawlerKeywords.searchPlaceholder')"
+            prefix-icon="el-icon-search"
+            clearable
+            class="search-input"
+            @input="handleSearch"
+          />
+          <el-button style="margin-left: 20px;"
+            type="primary"
+            icon="el-icon-search"
+            @click="handleSearchNow"
+          >
+            {{ $t('crawlerKeywords.searchBtn') }}
+          </el-button>
+        </div>
+  
+        <el-table 
+          :data="list" 
+          v-loading="loading" 
+          border 
+          stripe
+          highlight-current-row
+          header-row-class-name="custom-header" 
+          style="width: 100%" 
+          class="modern-table"
+        >
+          <el-table-column prop="keyword" :label="$t('crawlerKeywords.colKeyword')" min-width="180">
+            <template slot-scope="scope">
+              <transition name="fade-slide" mode="out-in">
+                <span :key="'t'+scope.row.id" v-if="editingId !== scope.row.id" class="keyword-text">
+                  {{ scope.row.keyword }}
+                </span>
+                <el-input 
+                  :key="'e'+scope.row.id" 
+                  v-else 
+                  v-model="editForm.keyword" 
+                  size="small" 
+                  v-focus
+                  class="edit-input"
+                />
+              </transition>
+            </template>
+          </el-table-column>
+  
+          <el-table-column prop="category" :label="$t('crawlerKeywords.colCategory')" width="150">
+            <template slot-scope="scope">
+              <transition name="fade-slide" mode="out-in">
+                <div :key="editingId === scope.row.id">
+                  <el-tag 
+                    v-if="editingId !== scope.row.id" 
+                    :type="scope.row.category ? 'success' : 'info'" 
+                    size="small" 
+                    effect="light"
+                  >
+                    {{ scope.row.category || 'Default' }}
+                  </el-tag>
+                  <el-input v-else v-model="editForm.category" size="small" />
+                </div>
+              </transition>
+            </template>
+          </el-table-column>
+  
+          <el-table-column prop="state" :label="$t('crawlerKeywords.colStatus')" width="140" align="center">
+            <template slot-scope="scope">
+              <div class="status-container">
+                <span :class="['status-dot', 'pulse', 'status-' + scope.row.state]"></span>
+                <span :class="['status-label', 'text-' + scope.row.state]">
+                  {{ getStateText(scope.row.state) }}
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+  
+          <el-table-column prop="expert_count" :label="$t('crawlerKeywords.colExpertCount')" width="120" align="center">
+            <template slot-scope="scope">
+              <span class="count-badge">{{ scope.row.expert_count }}</span>
+            </template>
+          </el-table-column>
+  
+          <el-table-column prop="last_crawl_time" :label="$t('crawlerKeywords.colLastCrawl')" width="180" />
+  
+          <el-table-column :label="$t('crawlerKeywords.colAction')" width="160" align="center" fixed="right">
+            <template slot-scope="scope">
+              <div class="action-wrapper">
+                <template v-if="editingId === scope.row.id">
+                  <el-button type="text" icon="el-icon-circle-check" class="save-btn" @click="handleSaveEdit(scope.row)">
+                    {{ $t('crawlerKeywords.save') }}
+                  </el-button>
+                  <el-button type="text" icon="el-icon-circle-close" class="cancel-btn" @click="editingId = null">
+                    {{ $t('crawlerKeywords.cancel') }}
+                  </el-button>
+                </template>
+                <template v-else>
+                  <el-tooltip :content="$t('crawlerKeywords.refresh')" placement="top">
+                    <el-button 
+                      type="text" 
+                      icon="el-icon-refresh" 
+                      :class="['refresh-icon', { 'is-spinning': scope.row._refreshing }]"
+                      @click="handleRefresh(scope.row)"
+                    />
+                  </el-tooltip>
+                  <el-tooltip :content="$t('crawlerKeywords.edit')" placement="top">
+                    <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(scope.row)" />
+                  </el-tooltip>
+                  <el-tooltip :content="$t('crawlerKeywords.delete')" placement="top">
+                    <el-button type="text" icon="el-icon-delete" class="del-btn" @click="handleDelete(scope.row)" />
+                  </el-tooltip>
+                </template>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+  
+        <div class="pagination-wrapper">
+          <el-pagination
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :current-page="query.pageIndex"
+            :page-size="query.pageSize"
+            :page-sizes="[10, 20, 50]"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handlePageChange"
+          />
+        </div>
+      </el-card>
+    </div>
+  </template>
+  
+  <script>
+  import Common from '@/components/common/common';
+  
+  const API = {
+    list: 'api/expert_manage/getKeywordList',
+    add: 'api/expert_manage/addKeyword',
+    update: 'api/expert_manage/updateKeyword',
+    delete: 'api/expert_manage/deleteKeyword',
+    refresh: 'api/expert_manage/refreshKeyword',
+    startCrawl: 'api/expert_manage/startCrawl',
+    exportData: 'api/expert_manage/exportKeywords'
+  };
+  
+  export default {
+    name: 'scholarCrawlersKeywords',
+    directives: {
+      focus: {
+        inserted: (el) => el.querySelector('input').focus()
+      }
+    },
+    data() {
+      return {
+        mediaUrl: Common.mediaUrl,
+        newKeyword: '',
+        searchText: '',
+        loading: false,
+        addLoading: false,
+        exportLoading: false,
+        crawlLoading: false,
+        editingId: null,
+        editForm: { keyword: '', category: '' },
+        query: { pageIndex: 1, pageSize: 10 },
+        list: [],
+        total: 0,
+        searchTimer: null
+      };
+    },
+    created() {
+      this.fetchList();
+    },
+    methods: {
+      getStateText(state) {
+        const map = {
+          running: this.$t('crawlerKeywords.stateRunning'),
+          paused: this.$t('crawlerKeywords.statePaused'),
+          error: this.$t('crawlerKeywords.stateError'),
+          done: this.$t('crawlerKeywords.stateDone')
+        };
+        return map[state] || state || '-';
+      },
+      async fetchList() {
+        this.loading = true;
+        try {
+          const params = {
+            keyword: this.searchText || '',
+            pageIndex: this.query.pageIndex,
+            pageSize: this.query.pageSize
+          };
+          const res = await this.$api.post(API.list, params);
+          if (res && res.code === 0 && res.data) {
+            this.list = (res.data.list || []).map(item => ({
+              ...item,
+              _refreshing: false
+            }));
+            this.total = res.data.total || 0;
+          }
+        } catch (e) {
+          console.error(e);
+        } finally {
+          setTimeout(() => { this.loading = false; }, 300); // 增加微小延迟让加载动画更平滑
+        }
+      },
+      handleSearch() {
+        if (this.searchTimer) clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(() => {
+          this.query.pageIndex = 1;
+          this.fetchList();
+        }, 400);
+      },
+      handleSearchNow() {
+        if (this.searchTimer) {
+          clearTimeout(this.searchTimer);
+          this.searchTimer = null;
+        }
+        this.query.pageIndex = 1;
+        this.fetchList();
+      },
+      async handleAdd() {
+        const kw = (this.newKeyword || '').trim();
+        if (!kw) {
+          this.$message.warning(this.$t('crawlerKeywords.emptyKeywordWarn'));
+          return;
+        }
+        this.addLoading = true;
+        try {
+          const res = await this.$api.post(API.add, { keyword: kw });
+          if (res && res.code === 0) {
+            this.$notify({ title: 'Success', message: this.$t('crawlerKeywords.addSuccess'), type: 'success' });
+            this.newKeyword = '';
+            this.query.pageIndex = 1;
+            this.fetchList();
+          }
+        } finally {
+          this.addLoading = false;
+        }
+      },
+      handleEdit(row) {
+        this.editingId = row.id;
+        this.editForm = { keyword: row.keyword, category: row.category || '' };
+      },
+      async handleSaveEdit(row) {
+        if (!(this.editForm.keyword || '').trim()) {
+          this.$message.warning(this.$t('crawlerKeywords.emptyKeywordWarn'));
+          return;
+        }
+        try {
+          const res = await this.$api.post(API.update, {
+            id: String(row.id),
+            keyword: this.editForm.keyword.trim(),
+            category: this.editForm.category || ''
+          });
+          if (res && res.code === 0) {
+            this.$message.success(this.$t('crawlerKeywords.updateSuccess'));
+            this.editingId = null;
+            this.fetchList();
+          }
+        } catch (e) {
+          this.$message.error(this.$t('crawlerKeywords.updateFail'));
+        }
+      },
+      handleDelete(row) {
+        this.$confirm(`确定要删除关键词 "${row.keyword}" 吗？`, '安全警告', {
+          confirmButtonText: '确定删除',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true,
+          roundButton: true
+        }).then(async () => {
+          const res = await this.$api.post(API.delete, { id: String(row.id) });
+          if (res && res.code === 0) {
+            this.$notify({ title: 'Deleted', type: 'success', duration: 2000 });
+            this.fetchList();
+          }
+        }).catch(() => {});
+      },
+      async handleRefresh(row) {
+        row._refreshing = true;
+        try {
+          const res = await this.$api.post(API.refresh, { id: String(row.id) });
+          if (res && res.code === 0) {
+            this.$message.success(this.$t('crawlerKeywords.refreshSuccess'));
+            this.fetchList();
+          }
+        } finally {
+          row._refreshing = false;
+        }
+      },
+      async handleStartCrawl() {
+        this.crawlLoading = true;
+        try {
+          const res = await this.$api.post(API.startCrawl, {});
+          if (res && res.code === 0) {
+            this.$message({ message: this.$t('crawlerKeywords.crawlStarted'), type: 'success', showClose: true });
+            this.fetchList();
+          }
+        } finally {
+          this.crawlLoading = false;
+        }
+      },
+      async handleExport() {
+        this.exportLoading = true;
+        try {
+          const res = await this.$api.post(API.exportData, {});
+          if (res && res.code === 0 && res.data.file_url) {
+            window.open(this.mediaUrl + res.data.file_url, '_blank');
+          }
+        } finally {
+          this.exportLoading = false;
+        }
+      },
+      handleSizeChange(size) {
+        this.query.pageSize = size;
+        this.fetchList();
+      },
+      handlePageChange(page) {
+        this.query.pageIndex = page;
+        this.fetchList();
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  /* 容器及整体布局 */
+  .keywords-container {
+    padding: 10px;
+   
+    margin: 0 auto;
+    background-color: #f8fafc;
+    /* min-height: 100vh; */
+  }
+  
+  /* 头部样式 */
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+  .page-title {
+    margin: 0 0 6px;
+    font-size: 24px;
+    font-weight: 700;
+    color: #1e293b;
+    letter-spacing: -0.5px;
+  }
+  .page-desc {
+    margin: 0;
+    font-size: 14px;
+    color: #64748b;
+  }
+  
+  /* 新增区域：卡片化 */
+  .add-section {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 20px;
+    border: 1px solid #e2e8f0;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .shadow-hover:hover {
+    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
+    transform: translateY(-2px);
+  }
+  .add-input-custom ::v-deep .el-input__inner {
+    border-radius: 8px;
+    background-color: #f1f5f9;
+    border-color: transparent;
+  }
+  .add-input-custom ::v-deep .el-input__inner:focus {
+    background-color: #fff;
+    border-color: #409eff;
+  }
+  
+  /* 按钮发光 */
+  .glow-button {
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+  }
+  .glow-button:hover {
+    box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
+  }
+  
+  /* 表格卡片 */
+  .table-card {
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    padding: 10px;
+  }
+  .table-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 18px;
+  }
+  .search-input ::v-deep .el-input__inner {
+    border-radius: 20px;
+  }
+  
+  /* 状态标签与脉冲 */
+  .status-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  .pulse {
+    animation: shadow-pulse 2s infinite;
+  }
+  @keyframes shadow-pulse {
+    0% { box-shadow: 0 0 0 0px rgba(103, 194, 58, 0.4); }
+    70% { box-shadow: 0 0 0 8px rgba(103, 194, 58, 0); }
+    100% { box-shadow: 0 0 0 0px rgba(103, 194, 58, 0); }
+  }
+  
+  .status-running { background: #67C23A; }
+  .status-paused { background: #E6A23C; }
+  .status-error { background: #F56C6C; animation-name: shadow-pulse-error; }
+  .status-done { background: #94a3b8; }
+  
+  @keyframes shadow-pulse-error {
+    0% { box-shadow: 0 0 0 0px rgba(245, 108, 108, 0.4); }
+    70% { box-shadow: 0 0 0 8px rgba(245, 108, 108, 0); }
+    100% { box-shadow: 0 0 0 0px rgba(245, 108, 108, 0); }
+  }
+  
+  .text-running { color: #67C23A; font-weight: 600; }
+  .text-error { color: #F56C6C; font-weight: 600; }
+  
+  /* 表格定制 */
+  ::v-deep .custom-header th {
+    /* background-color: #f8fafc !important; */
+    color: #475569;
+    font-weight: 600;
+    /* height: 50px; */
+  }
+  .count-badge {
+    background: #eff6ff;
+    color: #2563eb;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-weight: 700;
+    font-size: 13px;
+  }
+  
+  /* 操作按钮 */
+  .action-wrapper .el-button {
+    font-size: 18px;
+    padding: 0 6px;
+    transition: all 0.2s;
+  }
+  .action-wrapper .el-button:hover {
+    transform: scale(1.2);
+  }
+  .del-btn { color: #ef4444 !important; }
+  .save-btn { color: #10b981 !important; font-size: 14px !important; }
+  .cancel-btn { color: #64748b !important; font-size: 14px !important; }
+  
+  /* 刷新旋转 */
+  .is-spinning {
+    animation: rotate 1s linear infinite;
+    color: #409eff;
+  }
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  
+  /* 过渡动画 */
+  .fade-slide-enter-active, .fade-slide-leave-active {
+    transition: all 0.25s ease;
+  }
+  .fade-slide-enter {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  .fade-slide-leave-to {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  
+  .pagination-wrapper {
+    margin-top: 24px;
+    display: flex;
+    justify-content: flex-end;
+  }
+  ::v-deep .el-card__body{
+    padding: 10px !important;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index b7dd17d..b99d0bb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1097,6 +1097,13 @@ export default new Router({
 				title: 'Scholar Database'
 			}
 		},
+		{
+			path: '/scholarCrawlersKeywords',
+			component: () => import('../components/page/scholarCrawlersKeywords'),
+			meta: {
+				title: 'Crawl Keywords Config'
+			}
+		},
 		{
 			path: '/expertDatabase', //专家库
 			component: () => import('../components/page/expertDatabase'),
diff --git a/vue.config.js b/vue.config.js
index 998452e..2491e3c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -60,7 +60,7 @@ module.exports = {
 	assetsDir: 'static',
 	productionSourceMap: false,
 	devServer: {
-		
+
 		// public: 'http://192.168.110.159:8080/', // 你自己本地的ip地址:端口号
 		port: '8080',
 		open: true,
@@ -77,7 +77,16 @@ module.exports = {
 				changeOrigin: true,
 				pathRewrite: {
 					'^/api': ''
-				}
+				},
+				compress: false, // 💡 关键：禁止压缩，否则 SSE 流会被攒着不发
+
+				// 增加超时时间，防止长连接被代理提前掐断
+				proxyTimeout: 10 * 60 * 1000,
+				timeout: 10 * 60 * 1000
+			},
+			'/public': {
+				target: 'https://submission.tmrjournals.com/',
+				changeOrigin: true
 			}
 		}
 	},