Merge branch 'master' of https://git.nuttyreading.com/wangjinlei/tougao_web into Editorial-Board

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: '/', //正式
 
 });
 

src/components/common/Sidebar.vue

@@ -159,6 +159,12 @@
                     <el-menu-item index="mailboxManagement">
                         {{ $t('sidebar.mailboxManagement') }}
                     </el-menu-item>
+                    <el-menu-item index="mailboxConfig">
+                        {{ $t('sidebar.mailboxConfig') }}
+                    </el-menu-item>
+                    <el-menu-item index="mailboxCollect">
+                        {{ $t('sidebar.mailboxCollect') }}
+                    </el-menu-item>
                 </el-submenu>
                 <el-submenu index="tools">
                     <template slot="title"> <i class="el-icon-paperclip"></i> {{ $t('sidebar.tools') }} </template>

src/components/common/Tags.vue

@@ -3,7 +3,7 @@
         <ul>
             <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
                 <router-link :to="item.path" class="tags-li-title">
-                    {{item.title}}
+                    {{ item.titleKey ? $t(item.titleKey) : item.title }}
                 </router-link>
                 <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
             </li>
@@ -70,6 +70,7 @@
                     }
                     this.tagsList.push({
                         title: route.meta.title,
+                        titleKey: route.meta.titleKey || null,
                         path: route.fullPath,
                         name: route.matched[1].components.default.name
                     })

src/components/common/langs/en.js

@@ -270,6 +270,8 @@ const en = {
 		mailbox3: 'Mailbox template',
 		tools: 'Assistant tools',
 		mailboxManagement: 'Mailbox Management',
+		mailboxConfig: 'Mailbox config',
+		mailboxCollect: 'Mailbox list',
 		scholarCrawlers: 'Scholar Crawlers',
 		ReArticles: 'Rejected Manuscripts',     // 被拒稿件
 		editorialBoard: 'Boss System',
@@ -282,6 +284,144 @@ const en = {
 		GroupClassification: 'Group List',
 		JournalInstallment: 'Journal Installment',
 	},
+	mailboxConfig: {
+		mailSystem: 'Mailbox system',
+		title: 'Mailbox config',
+		journal: 'Journal',
+		allJournal: 'All journals',
+		query: 'Search',
+		addAccount: 'Add email account',
+		noData: 'No data',
+		smtpFromName: 'Sender name',
+		smtpFromNamePlaceholder: 'Display name when sending',
+		smtpHost: 'SMTP host',
+		smtpPort: 'SMTP port',
+		smtpPortPlaceholder: 'eg: 465',
+		smtpEncryption: 'SMTP encryption',
+		smtpEncryptionPlaceholder: 'eg: ssl',
+		imapHost: 'IMAP host',
+		imapPort: 'IMAP port',
+		imapPortPlaceholder: 'eg: 993',
+		todaySent: 'Today sent',
+		remainingToday: 'Remaining today',
+		state: 'State',
+		primary: 'Primary',
+		primaryTag: 'Primary',
+		operation: 'Operation',
+		edit: 'Edit',
+		delete: 'Delete',
+		mailManage: 'Mail manage',
+		dialogAdd: 'Add email account',
+		dialogEdit: 'Edit email account',
+		selectJournal: 'Select journal',
+		account: 'Email account',
+		accountPlaceholder: 'Sender / login email',
+		password: 'Password',
+		passwordPlaceholder: 'Password',
+		passwordTip: 'Leave blank to keep unchanged when editing',
+		smtpPlaceholder: 'eg: mail.tmrjournals.co.nz',
+		imapPlaceholder: 'eg: mail.tmrjournals.co.nz',
+		isPrimary: 'Set as primary',
+		yes: 'Yes',
+		no: 'No',
+		primaryTip: 'Each journal has exactly one primary mailbox for sending and receiving.',
+		cancel: 'Cancel',
+		save: 'Save',
+		deleteConfirm: 'Delete this email config?',
+		confirm: 'Confirm',
+		addSuccess: 'Added successfully',
+		editSuccess: 'Updated successfully',
+		deleteSuccess: 'Deleted successfully',
+		addFail: 'Add failed',
+		editFail: 'Update failed',
+		deleteFail: 'Delete failed',
+		addSuccessMock: 'Added (mock)',
+		editSuccessMock: 'Updated (mock)',
+		deleteSuccessMock: 'Deleted (mock)',
+		rulesJournal: 'Please select journal',
+		rulesAccount: 'Please enter email account',
+		rulesAccountFormat: 'Please enter a valid email',
+		rulesPassword: 'Please enter password',
+		rulesSmtpFromName: 'Please enter sender name',
+		rulesSmtpHost: 'Please enter SMTP host',
+		rulesSmtpPort: 'Please enter SMTP port',
+		rulesSmtpEncryption: 'Please enter SMTP encryption',
+		rulesImapHost: 'Please enter IMAP host',
+		rulesImapPort: 'Please enter IMAP port',
+		rulesIsPrimary: 'Please set primary or not',
+	},
+	mailboxCollect: {
+		inboxTab: 'Mail received',
+		outboxTab: 'Mail sent',
+		draftsTab: 'Drafts',
+		deletedTab: 'Deleted',
+		spamTab: 'Spam',
+		searchPlaceholder: 'Please enter name or email',
+		searchBtn: 'Search',
+		syncBtn: 'Sync remote mail',
+		writeBtn: 'Write letter',
+		email: 'Email',
+		account: 'Account',
+		time: 'Time',
+		look: 'Look',
+		emptyText: 'New messages (0)',
+		detailTitle: 'Mail detail',
+		from: 'From',
+		to: 'To',
+		subject: 'Subject',
+		close: 'Close',
+		noSubject: '(No subject)',
+		reply: 'Reply',
+		forward: 'Forward',
+		delete: 'Delete',
+		featureDev: 'This feature is under development',
+		selectMailTip: 'Select an email to read',
+		selectAccountTitle: 'Select email account',
+		journal: 'Journal',
+		accountColumn: 'Email account',
+		nameColumn: 'Name',
+		switchColumn: 'Switch',
+		useBtn: 'Switch',
+		changeAccountBtn: 'Change account',
+		syncSuccess: 'Sync succeeded',
+		syncFail: 'Sync failed',
+		operation: 'Operation',
+	},
+	mailboxSend: {
+		title: 'Write mail',
+		to: 'To:',
+		selectFromLibrary: 'Select from address book',
+		subject: 'Subject:',
+		cc: 'Cc:',
+		attachments: 'Attachments:',
+		upload: 'Upload',
+		templateSelection: 'Template selection',
+		sender: 'Sender:',
+		send: 'Send',
+		selectUser: 'Select User',
+		batchSelection: 'Batch selection',
+		email: 'Email',
+		account: 'Account',
+		operation: 'Operation',
+		selectBtn: 'Select',
+		emptyText: 'No data',
+		selectTemplate: 'Select template',
+		chooseTemplate: 'Choose Template:',
+		chooseTemplatePlaceholder: 'Please select template',
+		none: 'None',
+		previewTemplate: 'Preview Formatted Document:',
+		cancel: 'Cancel',
+		save: 'Save',
+		saveDraft: 'Save draft',
+		editorPlaceholder: 'Please enter...',
+		validateTo: 'Please add at least one addressee',
+		validateSubject: 'Please enter mail subject',
+		sendSuccess: 'Send success',
+		sendFail: 'Send failed',
+		sendMock: 'Send (mock): will really send when api/Mail/sendMail is ready',
+		needAccount: 'Please select a sender account from the mailbox list first',
+		backToInbox: 'Back to inbox',
+	},
 	home: {
 		authortop: 'Author guide',
 		usermsg: 'New messages',

src/components/common/langs/zh.js

@@ -255,6 +255,8 @@ const zh = {
 		mailbox3: '模板管理',
 		tools: '辅助工具',
 		mailboxManagement: '邮箱管理',
+		mailboxConfig: '邮箱配置管理',
+		mailboxCollect: '邮箱列表',
 		scholarCrawlers: '学者抓取',
 		ReArticles: '被拒稿件',     // 被拒稿件
 		editorialBoard: '编委管理',
@@ -268,6 +270,144 @@ const zh = {
 		JournalInstallment: '分期列表',
 
 	},
+	mailboxConfig: {
+		mailSystem: '邮件系统',
+		title: '邮箱配置管理',
+		journal: '所属期刊',
+		allJournal: '全部期刊',
+		query: '搜索',
+		addAccount: '添加邮箱账号',
+		noData: '暂无数据',
+		smtpFromName: '发件人名称',
+		smtpFromNamePlaceholder: '发信时显示的名称',
+		smtpHost: 'SMTP 地址',
+		smtpPort: 'SMTP 端口',
+		smtpPortPlaceholder: 'eg: 465',
+		smtpEncryption: 'SMTP 加密',
+		smtpEncryptionPlaceholder: 'ssl',
+		imapHost: 'IMAP 地址',
+		imapPort: 'IMAP 端口',
+		imapPortPlaceholder: 'eg: 993',
+		todaySent: '今日已发',
+		remainingToday: '今日剩余',
+		state: '状态',
+		primary: '主邮箱',
+		primaryTag: '主邮箱',
+		operation: '操作',
+		edit: '编辑',
+		delete: '删除',
+		mailManage: '邮箱管理',
+		dialogAdd: '添加邮箱账号',
+		dialogEdit: '修改邮箱账号信息',
+		selectJournal: '请选择期刊',
+		account: '邮箱账号',
+		accountPlaceholder: '发件/登录邮箱',
+		password: '密码',
+		passwordPlaceholder: '密码',
+		passwordTip: '编辑时留空表示不修改',
+		smtpPlaceholder: 'eg: mail.tmrjournals.co.nz',
+		imapPlaceholder: 'eg: mail.tmrjournals.co.nz',
+		isPrimary: '设为主邮箱',
+		yes: '是',
+		no: '否',
+		primaryTip: '每个期刊有且仅有一个主邮箱，用于默认发信与收信。',
+		cancel: '取消',
+		save: '保存',
+		deleteConfirm: '确定删除该邮箱配置？',
+		confirm: '确定',
+		addSuccess: '添加成功',
+		editSuccess: '修改成功',
+		deleteSuccess: '删除成功',
+		addFail: '添加失败',
+		editFail: '修改失败',
+		deleteFail: '删除失败',
+		addSuccessMock: '添加成功（模拟）',
+		editSuccessMock: '修改成功（模拟）',
+		deleteSuccessMock: '删除成功（模拟）',
+		rulesJournal: '请选择所属期刊',
+		rulesAccount: '请输入邮箱账号',
+		rulesAccountFormat: '请输入正确的邮箱格式',
+		rulesPassword: '请输入密码',
+		rulesSmtpFromName: '请输入发件人显示名称',
+		rulesSmtpHost: '请输入 SMTP 地址',
+		rulesSmtpPort: '请输入 SMTP 端口',
+		rulesSmtpEncryption: '请输入 SMTP 加密方式',
+		rulesImapHost: '请输入 IMAP 地址',
+		rulesImapPort: '请输入 IMAP 端口',
+		rulesIsPrimary: '请选择是否主邮箱',
+	},
+	mailboxCollect: {
+		inboxTab: '收件箱',
+		outboxTab: '发件箱',
+		draftsTab: '草稿箱',
+		deletedTab: '已删除',
+		spamTab: '垃圾邮件',
+		searchPlaceholder: '请输入姓名或邮箱',
+		searchBtn: '搜索',
+		syncBtn: '同步远程邮箱',
+		writeBtn: '写邮件',
+		email: '邮箱',
+		account: '账户',
+		time: '时间',
+		look: '查看',
+		emptyText: '暂无邮件',
+		detailTitle: '邮件详情',
+		from: '发件人',
+		to: '收件人',
+		subject: '主题',
+		close: '关闭',
+		noSubject: '(无主题)',
+		reply: '回复',
+		forward: '转发',
+		delete: '删除',
+		featureDev: '该功能正在开发中',
+		selectMailTip: '选择一封邮件进行阅读',
+		selectAccountTitle: '选择邮箱账号',
+		journal: '期刊',
+		accountColumn: '邮箱账号',
+		nameColumn: '名称',
+		switchColumn: '切换',
+		useBtn: '切换',
+		changeAccountBtn: '切换邮箱账号',
+		syncSuccess: '同步成功',
+		syncFail: '同步失败',
+		operation: '操作',
+	},
+	mailboxSend: {
+		title: '写邮件',
+		to: '收件人：',
+		selectFromLibrary: '从通讯录选择',
+		subject: '主题：',
+		cc: '抄送：',
+		attachments: '附件：',
+		upload: '上传',
+		templateSelection: '模板选择',
+		sender: '发件人：',
+		send: '发送',
+		selectUser: '选择用户',
+		batchSelection: '批量选择',
+		email: '邮箱',
+		account: '账户',
+		operation: '操作',
+		selectBtn: '选择',
+		emptyText: '暂无数据',
+		selectTemplate: '选择模板',
+		chooseTemplate: '选择模板：',
+		chooseTemplatePlaceholder: '请选择模板',
+		none: '无',
+		previewTemplate: '模板预览：',
+		cancel: '取消',
+		save: '保存',
+		saveDraft: '保存草稿',
+		editorPlaceholder: '请输入邮件内容...',
+		validateTo: '请至少添加一个收件人',
+		validateSubject: '请输入邮件主题',
+		sendSuccess: '发送成功',
+		sendFail: '发送失败',
+		sendMock: '发送（模拟）：接口 api/Mail/sendMail 就绪后将真实发送',
+		needAccount: '请从邮箱列表选择发件账号后再发送',
+		backToInbox: '返回收件箱',
+	},
 	home: {
 		authortop: '用户指南',
 		usermsg: '新消息',

src/components/page/components/email/MailDetail.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="mail-detail-container">
+      <div class="detail-toolbar">
+        <div class="toolbar-left">
+          <el-tooltip content="回复" placement="bottom"><i class="el-icon-chat-line-square action-icon"></i></el-tooltip>
+          <el-tooltip content="转发" placement="bottom"><i class="el-icon-position action-icon"></i></el-tooltip>
+          <el-tooltip content="删除" placement="bottom"><i class="el-icon-delete action-icon" style="color: #fb2c36;"></i></el-tooltip>
+        </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">
+        <h1 class="mail-subject">{{ mailData.subject }}</h1>
+  
+        <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>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'MailDetail',
+    props: {
+      mailData: {
+        type: Object,
+        default: () => ({
+          subject: '',
+          from_name: '',
+          from_email: '',
+          send_time: '',
+          to_list: [],
+          cc_list: [],
+          content: '',
+          attachments: []
+        })
+      }
+    },
+    data() {
+      return {
+        isDetailExpanded: false
+      };
+    },
+    computed: {
+      totalAttachmentSize() {
+        // 简单模拟计算总量，实际可根据逻辑累加
+        return "11MB"; 
+      }
+    },
+    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 dateMonth = date.getMonth() + 1;
+  const dateDay = date.getDate();
+  const nowYear = now.getFullYear();
+  
+  // 获取昨天日期
+  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 '昨天';
+  }
+
+  // 3. 如果是今年（非今天/昨天）：显示 "月-日"，如 "3月8日"
+  if (dateYear === nowYear) {
+    return `${dateMonth}月${dateDay}日`;
+  }
+
+  // 4. 如果是往年：显示完整年月日，如 "2025-12-05"
+  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';
+      }
+    }
+  };
+  </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; }
+  .action-icon { font-size: 18px; color: #606266; cursor: pointer; margin-right: 20px; }
+  .action-icon:hover { color: #409EFF; }
+  
+  .detail-scroll-content { flex: 1; overflow-y: auto; padding: 20px 40px; }
+  
+  /* 邮件标题 */
+  .mail-subject { font-size: 20px; font-weight: bold; margin-bottom: 25px; color: #303133; }
+  
+  /* 头部信息 */
+  .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>

src/components/page/mailboxCollect.vue

@@ -1,147 +1,432 @@
 <template>
-	<div>
-		<div class="crumbs">
-			<el-breadcrumb separator="/">
-				<el-breadcrumb-item>
-					<i class="el-icon-message"></i> Mailbox list
-				</el-breadcrumb-item>
-			</el-breadcrumb>
-		</div>
-		<div class="container">
-			<el-tabs tab-position="left" style="height: 200px;">
-				<el-tab-pane :label="'Mail received ( '+queryIn.num+' )'">
-					<div style="margin: 5px 0 20px 10px;">
-						<el-input v-model="queryIn.username" placeholder="Please enter name or email" style="width: 300px;margin: 0 15px 0 0;"></el-input>
-						<el-button type="primary" icon="el-icon-search" @click="handleSearchIn" style="">Search</el-button>
-						<el-button type="primary" icon="el-icon-plus" @click="handleAdd" style="float: right;">Write Letter</el-button>
-					</div>
-					<div style="margin: 0 0 0 10px;">
-						<el-table :data="tableData_in" border ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
-							<el-table-column label="Email">
-								<template slot-scope="scope">
-									<img v-if="scope.row.state==0" src="../../assets/img/mes_op.png" alt="" style="vertical-align: text-bottom;margin: 0 6px 0 2px;">
-									<img v-if="scope.row.state==1" src="../../assets/img/mes_ne.png" alt="" style="vertical-align: top;margin: 0 6px 0 0;">
-									{{scope.row.email}}
-								</template>
-							</el-table-column>
-							<el-table-column prop="account" label="Account"></el-table-column>
-							<el-table-column prop="ctime" label="Time" width="100"></el-table-column>
-							<el-table-column label=" " width="100" align="center">
-								<template slot-scope="scope">
-									<el-button plain type="primary" icon="el-icon-edit" @click="handleDetail(scope.row)">Look</el-button>
-								</template>
-							</el-table-column>
-						</el-table>
-						<div class="pagination">
-							<el-pagination background layout="total, prev, pager, next" :current-page="queryIn.pageIndex" :page-size="queryIn.pageSize"
-							 :total="link_TotalIn" @current-change="handlePageChangeIn"></el-pagination>
-						</div>
-					</div>
-				</el-tab-pane>
-				<el-tab-pane :label="'Mail sent ( '+queryOut.num+' )'">
-					<div style="margin: 5px 0 20px 10px;">
-						<el-input v-model="queryOut.username" placeholder="Please enter name or email" style="width: 300px;margin: 0 15px 0 0;"></el-input>
-						<el-button type="primary" icon="el-icon-search" @click="handleSearchOut" style="">Search</el-button>
-						<el-button type="primary" icon="el-icon-plus" @click="handleAdd" style="float: right;">Write Letter</el-button>
-					</div>
-					<div style="margin: 0 0 0 10px;">
-						<el-table :data="tableData_out" border ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
-							<el-table-column prop="email" label="Email"></el-table-column>
-							<el-table-column prop="account" label="Account"></el-table-column>
-							<el-table-column prop="ctime" label="Time" width="100"></el-table-column>
-							<el-table-column label=" " width="100" align="center">
-								<template slot-scope="scope">
-									<el-button plain type="primary" icon="el-icon-edit" @click="handleDetail(scope.row)">Look</el-button>
-								</template>
-							</el-table-column>
-						</el-table>
-						<div class="pagination">
-							<el-pagination background layout="total, prev, pager, next" :current-page="queryOut.pageIndex" :page-size="queryOut.pageSize"
-							 :total="link_TotalOut" @current-change="handlePageChangeIn"></el-pagination>
-						</div>
-					</div>
+  <div class="mail-container">
+    <div class="mail-sidebar">
+      <div class="p-20">
+        <el-button type="primary" icon="el-icon-plus" class="write-btn" @click="handleWrite">
+          {{ $t('mailboxCollect.writeBtn')  }}
+        </el-button>
+      </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>
 
-				</el-tab-pane>
-			</el-tabs>
+    <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"
+          :placeholder="$t('mailboxCollect.searchPlaceholder')"
+          clearable
+          @change="handleSearch"
+        ></el-input>
+        <el-button icon="el-icon-refresh" circle :loading="syncLoading" @click="handleSyncInbox" style="margin-left: 10px;"></el-button>
+      </div>
 
-		</div>
+      <div class="list-scroll-area">
+        <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-else 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 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="600px" append-to-body>
+      <el-form inline style="margin-bottom: 10px;">
+        <el-form-item :label="$t('mailboxCollect.journal')">
+          <el-select v-model="accountJournalId" style="width: 260px;" @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="100">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="chooseAccount(scope.row)">
+              {{ $t('mailboxCollect.useBtn')  }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				baseUrl: this.Common.baseUrl,
-				mediaUrl: this.Common.mediaUrl,
-				tableData_in: [{
-					state:0,
-					email: '123456',
-					account: '123456',
-					ctime: '123456',
-				},{
-					state:1,
-					email: '123456',
-					account: '123456',
-					ctime: '123456',
-				}],
-				tableData_out: [],
-				queryIn: {
-					pageIndex: 1,
-					pageSize: 15,
-					username: '',
-					num: 10
-				},
-				queryOut: {
-					pageIndex: 1,
-					pageSize: 15,
-					username: '',
-					num: 30
-				},
-				link_TotalIn: 0,
-				link_TotalOut: 0,
-			};
-		},
-		created() {
-			this.getDate();
-		},
-		methods: {
-			// 获取编辑列表数据
-			getDate() {
+const API = {
+  getInboxList: 'api/email_client/getInboxList',
+  getEmailDetail: 'api/email_client/getEmailDetail',
+  receiveMail: 'api/Mail/receiveMail',
+  getAccounts: 'api/email_client/getAccounts',
+  getOneEmail: 'api/email_client/getOneEmail',
+  getAllJournal: 'api/Journal/getAllJournal',
+};
+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 },
+      listWidth: 350,
+      minWidth: 260,
+      maxWidth: 600,
+      selectedAccount: null,
+      accountDialogVisible: false,
+      journalList: [],
+      accountJournalId: null,
+      accountList: [],
+      accountLoading: false,
+      detailLoading: false,
+    };
+  },
+  components: { MailDetail },
+  computed: {
+    displayList() {
+      return this.currentFolder === 'inbox' ? this.tableData_in : this.tableData_out;
+    },
+    selectedAccountEmail() {
+      return this.selectedAccount ? this.selectedAccount.smtp_user : '';
+    }
+  },
+  created() {
+    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;
+        }
+      };
+      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;
+      if (q.j_email_id) {
+        this.loadAccountById(q.j_email_id);
+      } else {
+        this.openAccountDialog();
+      }
+    },
+    loadAccountById(jEmailId) {
+      this.$api.post(API.getOneEmail, { j_email_id: jEmailId }).then(res => {
+        const email = res.data.email;
+        if (res.code === 0 && email) {
+          this.selectedAccount = email;
+          this.fetchData();
+        } else {
+          this.openAccountDialog();
+        }
+      }).catch(() => this.openAccountDialog());
+    },
+    openAccountDialog() {
+      this.accountDialogVisible = true;
+      this.loadJournals();
+      if (this.selectedAccount.journal_id) {
+        this.accountJournalId = this.selectedAccount.journal_id;
+        this.loadAccountsForJournal(this.selectedAccount.journal_id);
+      }
+    },
+    loadJournals() {
+      this.$api.post(API.getAllJournal, {}).then(res => {
+        this.journalList = (res.data.journals || res.data || []).map(i => ({
+          journal_id: i.journal_id || i.id,
+          title: i.title || i.name || ''
+        }));
+      });
+    },
+    loadAccountsForJournal(id) {
+      this.accountLoading = true;
+      this.$api.post(API.getAccounts, { journal_id: id }).then(res => {
+        this.accountLoading = false;
+        this.accountList = res.data || [];
+      });
+    },
+    chooseAccount(row) {
+      this.selectedAccount = row;
+      this.accountDialogVisible = false;
+	  this.closeDetail();
+      this.fetchData();
+    },
+    fetchData() {
+      if (!this.selectedAccount) return;
+      const params = {
+        j_email_id: this.selectedAccount.j_email_id,
+        journal_id: this.selectedAccount.journal_id,
+        keyword: this.searchKeyword || ''
+      };
+      this.$api.post(API.getInboxList, params).then(res => {
+        const list = (res && res.data && (res.data.list || res.data)) || [];
+        this.tableData_in = (Array.isArray(list) ? 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
+        }));
+        this.queryIn.num = this.tableData_in.length;
+      });
+    },
+    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;
+      });
+    },
+    handleSyncInbox() {
+      this.syncLoading = true;
+      this.$api.post(API.receiveMail, { j_email_id: this.selectedAccount.j_email_id }).then(() => {
+        this.syncLoading = false;
+        this.fetchData();
+      }).catch(() => this.syncLoading = false);
+    },
+/**
+ * 格式化邮件显示时间
+ * @param {Number|String} timestamp 后端返回的时间戳 (如: 1773110269)
+ * @returns {String} 格式化后的字符串 (如: 15:57, 昨天, 3月8日, 2025-12-05)
+ */
+ formatDisplayTime(timestamp) {
+  if (!timestamp) return '';
 
-			},
-			// 搜索-收件箱
-			handleSearchIn() {
-				this.getDate();
-			},
-			// 搜索-发件箱
-			handleSearchOut() {
-				this.getDate();
-			},
-			// 写邮件
-			handleAdd() {
+  // 1. 处理 10 位秒级时间戳，转为毫秒并实例化 Date 对象
+  const date = new Date(Number(timestamp) * 1000);
+  const now = new Date();
+  
+  // 提取日期信息用于比较
+  const dateYear = date.getFullYear();
+  const dateMonth = date.getMonth() + 1;
+  const dateDay = date.getDate();
+  const nowYear = now.getFullYear();
+  
+  // 获取昨天日期
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
 
-			},
-			// 邮箱信息
-			handleDetail(e) {
+  // 获取具体时分并补零 (例如 09:05)
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const timePart = `${hours}:${minutes}`;
 
-			},
+  // --- 按照图示规则判断返回 ---
 
-			// 分页导航-收件箱
-			handlePageChangeIn(val) {
-				this.$set(this.queryIn, 'pageIndex', val);
-				this.getDate();
-			},
-			// 分页导航-发件箱
-			handlePageChangeOut(val) {
-				this.$set(this.queryOut, 'pageIndex', val);
-				this.getDate();
-			},
-		}
-	};
+  // 1. 如果是今天：只显示时间，如 "15:57"
+  if (date.toDateString() === now.toDateString()) {
+    return timePart;
+  }
+
+  // 2. 如果是昨天：只显示 "昨天"
+  if (date.toDateString() === yesterday.toDateString()) {
+    return '昨天';
+  }
+
+  // 3. 如果是今年（非今天/昨天）：显示 "月-日"，如 "3月8日"
+  if (dateYear === nowYear) {
+    return `${dateMonth}月${dateDay}日`;
+  }
+
+  // 4. 如果是往年：显示完整年月日，如 "2025-12-05"
+  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?journal_id=' +
+          this.selectedAccount.journal_id +
+          '&j_email_id=' +
+          this.selectedAccount.j_email_id
+      );
+    },
+    handleSearch() { this.fetchData(); },
+    notImplemented() { this.$message.info('开发中...'); }
+  }
+};
 </script>
 
 <style scoped>
+.mail-container {
+  display: flex;
+  height: calc(100vh - 120px);
+  background: #fff;
+  overflow: hidden;
+}
 
-</style>
+/* 1. 左侧栏 */
+.mail-sidebar {
+  width: 220px;
+  background-color: #f8f9fa;
+  border-right: 1px solid #eaeaea;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+.p-20 { padding: 20px; }
+.write-btn { width: 100%; border-radius: 8px; font-weight: bold; }
+.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;
+}
+.folder-list li i { margin-right: 12px; font-size: 18px; }
+.folder-list li.active { background: #edeef0; color: #006699; font-weight: bold; border-right: 3px solid #006699; }
+.badge { margin-left: auto; background: #ddd; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
+
+.sidebar-footer { padding: 15px 20px; 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-item-box {
+  display: flex;
+  padding: 12px 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; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* 拖拽条 */
+.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; display: flex; flex-direction: column; overflow: hidden; }
+.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>

src/components/page/mailboxConfig.vue

@@ -0,0 +1,324 @@
+<template>
+	<div>
+		<div class="crumbs">
+			<el-breadcrumb separator="/">
+				<el-breadcrumb-item><i class="el-icon-setting"></i> {{ $t('mailboxConfig.mailSystem') }}</el-breadcrumb-item>
+				<el-breadcrumb-item>{{ $t('mailboxConfig.title') }}</el-breadcrumb-item>
+			</el-breadcrumb>
+		</div>
+		<div class="container">
+			<div class="handle-box">
+				<el-form :inline="true" :model="query" class="filter-form">
+					<el-form-item :label="$t('mailboxConfig.journal')">
+						<el-select v-model="query.journal_id" :placeholder="$t('mailboxConfig.selectJournal')" style="width: 300px;" @change="getList">
+							<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" icon="el-icon-search" @click="getList">{{ $t('mailboxConfig.query') }}</el-button>
+						<el-button type="primary" icon="el-icon-plus" @click="handleAdd">{{ $t('mailboxConfig.addAccount') }}</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData" border stripe class="table" header-cell-class-name="table-header" :empty-text="$t('mailboxConfig.noData')">
+				<!-- <el-table-column prop="journal_name" :label="$t('mailboxConfig.journal')" min-width="140"></el-table-column> -->
+				<el-table-column prop="account" :label="$t('mailboxConfig.account')" min-width="160"></el-table-column>
+				<el-table-column prop="smtp_from_name" :label="$t('mailboxConfig.smtpFromName')" min-width="120"></el-table-column>
+				<el-table-column prop="smtp_host" :label="$t('mailboxConfig.smtpHost')" min-width="120"></el-table-column>
+				<el-table-column prop="smtp_port" :label="$t('mailboxConfig.smtpPort')" width="100" align="center"></el-table-column>
+				<el-table-column prop="imap_host" :label="$t('mailboxConfig.imapHost')" min-width="120"></el-table-column>
+				<el-table-column prop="imap_port" :label="$t('mailboxConfig.imapPort')" width="100" align="center"></el-table-column>
+				<el-table-column prop="today_sent" :label="$t('mailboxConfig.todaySent')" width="95" align="center"></el-table-column>
+				<el-table-column prop="remaining_today" :label="$t('mailboxConfig.remainingToday')" width="130" align="center"></el-table-column>
+				<!-- <el-table-column prop="state" :label="$t('mailboxConfig.state')" width="80" align="center"></el-table-column> -->
+				<el-table-column :label="$t('mailboxConfig.operation')" width="220" align="center" fixed="right">
+					<template slot-scope="scope">
+						<el-button size="mini" type="primary" plain icon="el-icon-edit" @click="handleEdit(scope.row)">{{ $t('mailboxConfig.edit') }}</el-button>
+						<el-button size="mini" type="success" plain icon="el-icon-message" @click="handleMailManage(scope.row)">{{ $t('mailboxConfig.mailManage') }}</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</div>
+
+		<!-- 添加/编辑 弹窗 -->
+		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="580px" :close-on-click-modal="false">
+			<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
+				<el-form-item :label="$t('mailboxConfig.journal')" prop="journal_id">
+					<el-select v-model="form.journal_id" :placeholder="$t('mailboxConfig.selectJournal')" style="width: 100%;">
+						<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.account')" prop="account">
+					<el-input v-model="form.account" ></el-input>
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.password')" prop="password">
+					<el-input v-model="form.password" type="password"  show-password autocomplete="new-password"></el-input>
+					<!-- <span class="form-tip">{{ $t('mailboxConfig.passwordTip') }}</span> -->
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.smtpFromName')" prop="smtp_from_name">
+					<el-input v-model="form.smtp_from_name" ></el-input>
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.smtpHost')" prop="smtp_host">
+					<el-input v-model="form.smtp_host" :placeholder="$t('mailboxConfig.smtpPlaceholder')"></el-input>
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.smtpPort')" prop="smtp_port">
+					<el-input v-model="form.smtp_port" :placeholder="$t('mailboxConfig.smtpPortPlaceholder')" style="width: 100%;"></el-input>
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.smtpEncryption')" prop="smtp_encryption">
+					<el-input v-model="form.smtp_encryption" :placeholder="$t('mailboxConfig.smtpEncryptionPlaceholder')"></el-input>
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.imapHost')" prop="imap_host">
+					<el-input v-model="form.imap_host" :placeholder="$t('mailboxConfig.imapPlaceholder')"></el-input>
+				</el-form-item>
+				<el-form-item :label="$t('mailboxConfig.imapPort')" prop="imap_port">
+					<el-input v-model="form.imap_port" :placeholder="$t('mailboxConfig.imapPortPlaceholder')" style="width: 100%;"></el-input>
+				</el-form-item>
+			</el-form>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="dialogVisible = false">{{ $t('mailboxConfig.cancel') }}</el-button>
+				<el-button type="primary" @click="submitForm">{{ $t('mailboxConfig.save') }}</el-button>
+			</span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	// 期刊邮箱列表：POST api/email_client/getAccounts 参数 journal_id，返回 data[]: j_email_id, journal_id, smtp_host, smtp_port, smtp_user, imap_host, imap_port, daily_limit, today_sent, state, remaining_today 等
+	const API = {
+		getAllJournal: 'api/Journal/getAllJournal',
+		getAccounts: 'api/email_client/getAccounts',
+		addAccount: 'api/email_client/addAccount',
+		updateAccount: 'api/email_client/updateAccount',
+		deleteEmailAccount: 'api/Mail/deleteEmailAccount',
+	};
+
+	export default {
+		name: 'mailboxConfig',
+		data() {
+			return {
+				query: {
+					journal_id: 0,
+					pageIndex: 1,
+					pageSize: 10,
+				},
+				tableData: [],
+				total: 0,
+				journalList: [],
+				dialogVisible: false,
+				dialogTitle: '',
+				form: {
+					id: null,
+					journal_id: null,
+					account: '',
+					password: '',
+					smtp_from_name: '',
+					smtp_host: '',
+					smtp_port: '',
+					smtp_encryption: '',
+					imap_host: '',
+					imap_port: '',
+				},
+			};
+		},
+		computed: {
+			rules() {
+				return {
+					journal_id: [{ required: true, message: this.$t('mailboxConfig.rulesJournal'), trigger: 'change' }],
+					account: [
+						{ required: true, message: this.$t('mailboxConfig.rulesAccount'), trigger: 'blur' },
+						{
+							pattern: /^[-._A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+							message: this.$t('mailboxConfig.rulesAccountFormat'),
+							trigger: 'blur',
+						},
+					],
+					password: [{ required: true, message: this.$t('mailboxConfig.rulesPassword'), trigger: 'blur' }],
+					smtp_from_name: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpFromName'), trigger: 'blur' }],
+					smtp_host: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpHost'), trigger: 'blur' }],
+					smtp_encryption: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpEncryption'), trigger: 'blur' }],
+					imap_host: [{ required: true, message: this.$t('mailboxConfig.rulesImapHost'), trigger: 'blur' }],
+					imap_port: [{ required: true, message: this.$t('mailboxConfig.rulesImapPort'), trigger: 'blur' }],
+				};
+			},
+		},
+		created() {
+			this.loadJournals();
+		},
+		methods: {
+			// 期刊下拉框：调用 api/Journal/getAllJournal 获取列表
+			loadJournals() {
+				var self = this;
+				this.$api.post(API.getAllJournal, {}).then(function(res) {
+					var list = [];
+					if (res && res.code === 0 && res.data) {
+						if (Array.isArray(res.data.journals)) {
+							list = res.data.journals;
+						} else if (Array.isArray(res.data)) {
+							list = res.data;
+						}
+					} else if (res && Array.isArray(res)) {
+						list = res;
+					}
+					// 统一为 { journal_id, title }，兼容 id/title 等字段
+					self.journalList = list.map(function(item) {
+						return {
+							journal_id: item.journal_id != null ? item.journal_id : item.id,
+							title: item.title || item.name || ''
+						};
+					});
+					if (self.journalList.length === 0) {
+						self.journalList = [
+							{ journal_id: 1, title: 'TMR Clinical Research' },
+							{ journal_id: 2, title: 'TMR Theory' }
+						];
+					}
+					// 默认选第一个期刊并拉取邮箱列表
+					if (self.journalList.length > 0 && (self.query.journal_id === 0 || self.query.journal_id === null || self.query.journal_id === '')) {
+						self.query.journal_id = self.journalList[0].journal_id;
+						self.getList();
+					}
+				}).catch(function() {
+					self.journalList = [
+						{ journal_id: 1, title: 'TMR Clinical Research' },
+						{ journal_id: 2, title: 'TMR Theory' }
+					];
+					if (self.journalList.length > 0) {
+						self.query.journal_id = self.journalList[0].journal_id;
+						self.getList();
+					}
+				});
+			},
+			getJournalName(journalId) {
+				var j = this.journalList.find(function(item) { return item.journal_id === journalId; });
+				return j ? j.title : '';
+			},
+			getList() {
+				var journalId = this.query.journal_id;
+				var params = {};
+				if (journalId !== 0 && journalId !== '' && journalId != null) {
+					params.journal_id = String(journalId);
+				}
+				this.$api.post(API.getAccounts, params).then((res) => {
+					if (res && res.code === 0 && Array.isArray(res.data)) {
+						var list = res.data.map(function(item) {
+							return {
+								id: item.j_email_id,
+								j_email_id: item.j_email_id,
+								journal_id: item.journal_id,
+								journal_name: this.getJournalName(item.journal_id),
+								account: item.smtp_user,
+								smtp_user: item.smtp_user,
+								smtp_host: item.smtp_host,
+								smtp_port: item.smtp_port,
+								smtp_encryption: item.smtp_encryption,
+								smtp_from_name: item.smtp_from_name || '',
+								imap_host: item.imap_host,
+								imap_port: item.imap_port,
+								last_uid: item.last_uid,
+								daily_limit: item.daily_limit,
+								today_sent: item.today_sent,
+								state: item.state,
+								remaining_today: item.remaining_today,
+							};
+						}.bind(this));
+						this.tableData = list;
+						this.total = list.length;
+					} else {
+						this.tableData = [];
+						this.total = 0;
+					}
+				}).catch(function() {
+					this.tableData = [];
+					this.total = 0;
+				}.bind(this));
+			},
+			handleAdd() {
+				this.dialogTitle = this.$t('mailboxConfig.dialogAdd');
+				this.form = {
+					id: null,
+					journal_id: this.journalList[0] ? this.journalList[0].journal_id : null,
+					account: '',
+					password: '',
+					smtp_from_name: '',
+					smtp_host: '',
+					smtp_port: '',
+					smtp_encryption: '',
+					imap_host: '',
+					imap_port: '',
+				};
+				this.dialogVisible = true;
+				this.$nextTick(function() { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); }.bind(this));
+			},
+			handleEdit(row) {
+				this.dialogTitle = this.$t('mailboxConfig.dialogEdit');
+				this.form = {
+					id: row.id,
+					journal_id: row.journal_id,
+					account: row.account || row.smtp_user || '',
+					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) : '',
+					smtp_encryption: row.smtp_encryption || '',
+					imap_host: row.imap_host || '',
+					imap_port: row.imap_port != null && row.imap_port !== '' ? String(row.imap_port) : '',
+				};
+				this.dialogVisible = true;
+				this.$nextTick(function() { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); }.bind(this));
+			},
+			submitForm() {
+				var self = this;
+				this.$refs.formRef.validate(function(valid) {
+					if (!valid) return;
+					var isEdit = !!self.form.id;
+					var url = isEdit ? API.updateAccount : API.addAccount;
+					var payload = {
+						journal_id: String(self.form.journal_id),
+						smtp_host: String(self.form.smtp_host || ''),
+						smtp_port: String(self.form.smtp_port || ''),
+						smtp_encryption: String(self.form.smtp_encryption || ''),
+						smtp_user: String(self.form.account || ''),
+						smtp_from_name: String(self.form.smtp_from_name || ''),
+						imap_host: String(self.form.imap_host || ''),
+						imap_port: String(self.form.imap_port || ''),
+					};
+					if (isEdit) {
+						payload.j_email_id = String(self.form.id);
+						if (self.form.password) payload.smtp_password = String(self.form.password);
+					} else {
+						payload.smtp_password = String(self.form.password || '');
+					}
+
+					self.$api.post(url, payload).then(function(res) {
+						if (res && res.code === 0) {
+							self.$message.success(isEdit ? self.$t('mailboxConfig.editSuccess') : self.$t('mailboxConfig.addSuccess'));
+							self.dialogVisible = false;
+							self.getList();
+						} else {
+							self.$message.error((res && res.msg) || (isEdit ? self.$t('mailboxConfig.editFail') : self.$t('mailboxConfig.addFail')));
+						}
+					}).catch(function() {
+						self.$message.success(isEdit ? self.$t('mailboxConfig.editSuccessMock') : self.$t('mailboxConfig.addSuccessMock'));
+						self.dialogVisible = false;
+						self.getList();
+					});
+				});
+			},
+			handleMailManage(row) {
+				this.$router.push({
+					path: '/mailboxCollect',
+					query: {
+						journal_id: row.journal_id,
+						j_email_id: row.j_email_id
+					}
+				});
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	.handle-box { margin-bottom: 16px; }
+	.filter-form { margin: 0; }
+	.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
+</style>

src/components/page/mailboxSend.vue

@@ -1,78 +1,143 @@
 <template>
 	<div>
 		<div class="crumbs">
+			<el-button type="text" icon="el-icon-arrow-left" @click="goBackInbox" class="back-inbox-btn">
+				{{ $t('mailboxSend.backToInbox') }}
+			</el-button>
 			<el-breadcrumb separator="/">
 				<el-breadcrumb-item>
-					<i class="el-icon-message"></i> Mailbox Send
+					<i class="el-icon-message"></i> {{ $t('mailboxSend.title') }}
 				</el-breadcrumb-item>
 			</el-breadcrumb>
 		</div>
+		
 		<div class="container">
-			<div class="mail_shuru" style="position: relative;">
-				<span class="mail_tit">Addressee :</span>
-				<span class="sel_liby" @click="handleSetLibrary">
-					<i class="el-icon-plus"></i>Select from library
-				</span>
-				<!-- <el-input v-model="queryMail.sendname" class="mail_inp"></el-input> -->
-				<multi-items-input v-model="queryMail.sendnamelist" placeholder="" separator="" @select="selectHandle" @delete="deleteHandle"
-				 :selection-only="false" class="dxk_inp" @blur="blueHandle"></multi-items-input>
-			</div>
-			<div class="mail_shuru">
-				<span class="mail_tit">Mail Subject :</span>
-				<el-input v-model="queryMail.sendtitle" class="mail_inp"></el-input>
-			</div>
-			<div class="mail_shuru">
-				<span class="mail_tit">CC :</span>
-				<el-input v-model="queryMail.sendcc" class="mail_inp"></el-input>
-				<!-- <multi-items-input v-model="queryMail.sendnamelist" placeholder="" separator="" @select="selectHandle" @delete="deleteHandle"
-				 :selection-only="false" class="dxk_inp" @blur="blueHandle"></multi-items-input> -->
-			</div>
-			<div class="mail_shuru" style="border: 0;">
-				<span class="mail_tit">Attachments :</span>
-				<el-upload class="upload-demo up_newstyle" :action="this.baseUrl + 'api/Article/up_file/type/attr'" accept=".jpg, .png, .rar, .zip"
-				 name="atta" :before-upload="beforeupload_atta" :on-error="uperr_atta" :on-success="upSuccess_atta" :limit="30"
-				 :on-exceed="alertlimit" :on-remove="removefile_atta" :file-list="fileL_atta">
-					<div class="el-upload__text">
-						<em>Upload</em>
-					</div>
-					<!-- <div class="el-upload__tip" slot="tip">Only compressed files can be uploaded(.rar,.zip)</div> -->
-				</el-upload>
+			<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
+    <span class="mail_tit">{{ $t('mailboxSend.to') }}</span>
+    
+    <div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
+        <div class="selected-tags" v-if="queryMail.sendnamelist && queryMail.sendnamelist.length" style="display: inline-block;">
+            <el-tag
+                v-for="(item, index) in queryMail.sendnamelist"
+                :key="item._uid != null ? item._uid : 'to-' + index"
+                closable
+                @close="removeRecipient(index)"
+                type="info"
+                size="small"
+                style="margin-right: 6px;"
+            >
+                {{ item.name }}
+            </el-tag>
+        </div>
 
+        <el-autocomplete
+            ref="autocompleteTo"
+            class="mail_inp"
+            v-model="toInput"
+            :fetch-suggestions="fetchUserSuggestions"
+            :trigger-on-focus="false"
+            placeholder=""
+            @select="handleSelectUser"
+            @blur="handleToBlur"
+            style="width: 200px; flex: 1;" 
+        >
+            <!-- <i slot="suffix" class="el-icon-plus" @click="handleSetLibrary" style="cursor: pointer; color: #006699; font-weight: bold; line-height: 40px; font-size: 16px;"></i> -->
+            
+            <template slot-scope="{ item }">
+                <div class="name">
+                    {{ item.value }} <span style="padding: 4px; color: #ccc;">|</span> {{ item.realname }}
+                </div>
+            </template>
+        </el-autocomplete>
+    </div>
+
+    <span class="sel_liby" @click="handleSetLibrary" style="position: static; margin-left: 10px;">
+        <i class="el-icon-plus"></i>{{ $t('mailboxSend.selectFromLibrary') }}
+    </span>
+</div>
+			<div class="mail_shuru">
+				<span class="mail_tit">{{ $t('mailboxSend.subject') }}</span>
+				<el-input v-model="queryMail.sendtitle" class="mail_inp" ></el-input>
 			</div>
-			<p class="sel_moud" @click="handleSetMoudle">
-				<i class="el-icon-brush"></i>Template selection
-			</p>
+			<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
+				<span class="mail_tit">{{ $t('mailboxSend.cc') }}</span>
+				<div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
+					<div class="selected-tags" v-if="ccList && ccList.length" style="display: inline-block;">
+						<el-tag
+							v-for="(item, index) in ccList"
+							:key="item._uid != null ? item._uid : 'cc-' + index"
+							closable
+							@close="removeCc(index)"
+							type="info"
+							size="small"
+							style="margin-right: 6px;"
+						>
+							{{ item.name }}
+						</el-tag>
+					</div>
+					<el-autocomplete
+						ref="autocompleteCc"
+						class="mail_inp"
+						v-model="ccInput"
+						:fetch-suggestions="fetchUserSuggestions"
+						:trigger-on-focus="false"
+						placeholder=""
+						@select="handleSelectCc"
+						@blur="handleCcBlur"
+						style="width: 200px; flex: 1;"
+					>
+						<template slot-scope="{ item }">
+							<div class="name">
+								{{ item.value }} <span style="padding: 4px; color: #ccc;">|</span> {{ item.realname }}
+							</div>
+						</template>
+					</el-autocomplete>
+				</div>
+			</div>
+			
 			<div style="margin: 20px 0 0 0;">
 				<quill-editor ref="myTextEditor" v-model="queryMail.content" :options="editorOption"></quill-editor>
 				<el-upload class="avatar-uploader-mail" :action="baseUrl+'api/Suggest/upImg'" name="img" :show-file-list="false"
 				 :on-success="uploadSuccess">
 				</el-upload>
-				<p style="margin-top: 10px;font-size: 14px;">
-					Sender :<span style="color: #006699;margin: 0 0 0 15px;">{{userMes.realname}} &lt {{userMes.email}} &gt</span>
-				</p>
-			</div>
-			<div style="margin: 20px 0 0 0;">
-
-				<el-button type="primary" icon="el-icon-s-promotion" @click="handleSend" style="">Send</el-button>
+				
 			</div>
+			<div class="mail-footer-bar" :style="{ left: footerBarLeft }">
+    <div class="sender-info">
+        <span class="sender-label">{{ $t('mailboxSend.sender') }}</span>
+        <span class="sender-content">
+            {{ userMes.realname }} &lt;{{ userMes.email }}&gt;
+        </span>
+    </div>
+    
+    <div class="action-buttons">
+        <el-button type="primary" icon="el-icon-s-promotion" :loading="sendLoading" :disabled="sendLoading" @click="handleSend">
+            {{ $t('mailboxSend.send') }}
+        </el-button>
+        <el-button size="medium" :loading="saveDraftLoading" :disabled="saveDraftLoading" @click="handleSaveDraft">{{ $t('mailboxSend.saveDraft') }}</el-button>
+    </div>
+</div>
 		</div>
 
 		<!-- 选择通讯录 -->
-		<el-dialog title="Select User" :visible.sync="Librarybox" width="900px" :close-on-click-modal="false">
-			<el-button type="primary" style="margin: 0 0 15px 0;" icon="el-icon-plus" @click="mailLiyAll()" v-if="LibrarySelection!=''">Batch
-				Selection</el-button>
-			<el-table :data="mail_List" border ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange" empty-text="New messages (0)">
+		<el-dialog :title="$t('mailboxSend.selectUser')" :visible.sync="Librarybox" width="900px" :close-on-click-modal="false">
+			<el-button type="primary" style="margin: 0 0 15px 0;" icon="el-icon-plus" @click="mailLiyAll()" v-if="LibrarySelection!=''">
+				{{ $t('mailboxSend.batchSelection') }}
+			</el-button>
+			<el-table :data="mail_List" border ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :empty-text="$t('mailboxSend.emptyText')">
 				<el-table-column type="selection" width="40" align="center" :selectable='checkboxSelect'></el-table-column>
-				<el-table-column label="Email">
+				<el-table-column :label="$t('mailboxSend.email')">
 					<template slot-scope="scope">
 						<b class="el-icon-check" v-if="scope.row.select_mark==1" style="color:#f74c4c;margin-right: 5px;font-weight: bold;"></b>
 						{{scope.row.email}}
 					</template>
 				</el-table-column>
-				<el-table-column prop="account" label="Account"></el-table-column>
-				<el-table-column label=" " width="110" align="center">
+				<el-table-column prop="account" :label="$t('mailboxSend.account')"></el-table-column>
+				<el-table-column :label="$t('mailboxSend.operation')" width="110" align="center">
 					<template slot-scope="scope">
-						<el-button plain type="primary" icon="el-icon-plus" @click="mailLibAdd(scope.row)">Select</el-button>
+						<el-button plain type="primary" icon="el-icon-plus" @click="mailLibAdd(scope.row)">
+							{{ $t('mailboxSend.selectBtn') }}
+						</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -83,22 +148,22 @@
 		</el-dialog>
 
 		<!-- 选择模板 -->
-		<el-dialog title="Select template" :visible.sync="Templatebox" width="620px" :close-on-click-modal="false">
+		<el-dialog :title="$t('mailboxSend.selectTemplate')" :visible.sync="Templatebox" width="620px" :close-on-click-modal="false">
 			<el-form ref="Tempform" :model="TempForm" label-width="225px">
-				<el-form-item label="Choose Template :">
-					<el-select v-model="TempForm.board" placeholder=" " @change="select_tem($event)" style="width: 220px;">
-						<el-option :key="0" label="None" :value="0"></el-option>
+				<el-form-item :label="$t('mailboxSend.chooseTemplate')">
+					<el-select v-model="TempForm.board" :placeholder="$t('mailboxSend.chooseTemplatePlaceholder')" @change="select_tem($event)" style="width: 220px;">
+						<el-option :key="0" :label="$t('mailboxSend.none') " :value="0"></el-option>
 						<el-option v-for="item in fol_low" :key="item.value" :label="item.label" :value="item.value">
 						</el-option>
 					</el-select>
 				</el-form-item>
-				<el-form-item label="Preview Formatted Document :">
+				<el-form-item :label="$t('mailboxSend.previewTemplate')">
 					<img src="../../assets/img/img.jpg" alt="" style="width: 250px;">
 				</el-form-item>
 			</el-form>
 			<span slot="footer" class="dialog-footer">
-				<el-button @click="Templatebox = false">Cancel</el-button>
-				<el-button type="primary" @click="saveTemplate">Save</el-button>
+				<el-button @click="Templatebox = false">{{ $t('mailboxSend.cancel') }}</el-button>
+				<el-button type="primary" @click="saveTemplate">{{ $t('mailboxSend.save') }}</el-button>
 			</span>
 		</el-dialog>
 	</div>
@@ -118,6 +183,7 @@
 	// Quill.register('modules/imageResize', ImageResize)
 	import 'multi-items-input'
 	import 'multi-items-input/dist/multi-items-input.css'
+	import bus from '../common/bus'
 	export default {
 		data() {
 			return {
@@ -127,13 +193,7 @@
 				userMes: {},
 				queryMail: {
 					sendname: [],
-					sendnamelist: [{
-						id: null,
-						name: "atr@tmrjournals.com"
-					}, {
-						id: null,
-						name: "tmrtheory@tmrjournals.com"
-					}],
+					sendnamelist: [],
 					sendtitle: '',
 					sendcc: '',
 					content: ''
@@ -158,7 +218,7 @@
 				Librarybox: false,
 				link_TotalLibry: 0,
 				editorOption: {
-					placeholder: 'Please enter...',
+					placeholder: this.$t('mailboxSend.editorPlaceholder'),
 					modules: {
 						toolbar: {
 							container: [
@@ -229,46 +289,215 @@
 						// }
 					}
 				},
+				toInput: '',
+				toSelecting: false,
+				nextToUid: 1,
+				ccList: [],
+				ccInput: '',
+				ccSelecting: false,
+				nextCcUid: 1,
+				collapseValue: localStorage.getItem('collapse'),
+				sendLoading: false,
+				saveDraftLoading: false,
 			};
 		},
+		computed: {
+			footerBarLeft() {
+				const collapsed = this.collapseValue === true || this.collapseValue === 'true';
+				return (collapsed ? 64: 260) + 'px';
+			},
+		},
+		watch: {
+			collapseValue: {
+				handler() {
+					// 监听 collapseValue 变化，footerBarLeft 通过 computed 自动更新
+				},
+				immediate: true,
+			},
+		},
 		created() {
 			this.getDate();
-			this.getLibary();
 		},
-		// components: {
-		// 	quillEditor
-		// },
-		computed: {
-
+		mounted() {
+			bus.$on('collapse-content', (msg) => {
+				this.collapseValue = msg;
+			});
+		},
+		beforeDestroy() {
+			bus.$off('collapse-content');
 		},
 		methods: {
-			// 获取初始用户数据
-			getDate() {
+			// 返回收件箱（邮箱列表），带上 journal_id 和 j_email_id
+			goBackInbox() {
+				const q = this.$route.query;
+				const query = {};
+				if (q.journal_id) query.journal_id = q.journal_id;
+				if (q.j_email_id) query.j_email_id = q.j_email_id;
+				this.$router.push({
+					path: '/mailboxCollect',
+					query,
+				});
+			},
+			// 收件人自动补全 - 搜索用户
+			fetchUserSuggestions(queryString, cb) {
+				if (!queryString) {
+					cb([]);
+					return;
+				}
 				this.$api
-					.post('api/User/getUserDetail', {
-						'user_id': localStorage.getItem('U_id')
+					.post('api/Reviewer/researchUser', {
+						
+					keywords: queryString
 					})
 					.then(res => {
-						if (res.code == 0) {
-							this.userMes = res.data.user
+						if (res && res.code === 0 && res.data && res.data.list) {
+							const list = res.data.list.map(u => ({
+								...u,
+								value: u.email,
+								realname: u.realname || u.username || ''
+							}));
+							cb(list);
 						} else {
-							this.$message.error(res.msg);
+							cb([]);
 						}
 					})
-					.catch(err => {
-						this.$message.error(err);
+					.catch(() => cb([]));
+			},
+			// 收件人输入框失焦：输入内容失去焦点则自动成为一条收件人数据（排除点击下拉项时）
+			handleToBlur(e) {
+				// 若失焦是因为点击了下拉建议区域，不执行任何逻辑，让 click 触发 select，否则点击会选不中
+				const related = e && e.relatedTarget;
+				if (related && typeof related.closest === 'function' && related.closest('.el-autocomplete-suggestion')) {
+					return;
+				}
+				const value = (this.toInput || '').trim();
+				setTimeout(() => {
+					if (this.toSelecting) {
+						this.toSelecting = false;
+						return;
+					}
+					if (!value) return;
+					if (value.indexOf('@') === -1) {
+						this.toInput = '';
+						return;
+					}
+					const exists = (this.queryMail.sendnamelist || []).some(item => item.name === value);
+					if (!exists) {
+						this.queryMail.sendnamelist.push({
+							id: null,
+							name: value,
+							_uid: this.nextToUid++,
+						});
+						this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
+					}
+					this.toInput = '';
+				}, 150);
+			},
+			// 选中某个用户作为收件人
+			handleSelectUser(user) {
+				this.toSelecting = true;
+				if (!user || !user.email) return;
+				const email = user.email;
+				// 去重
+				const exists = (this.queryMail.sendnamelist || []).some(item => item.name === email);
+				if (!exists) {
+					this.queryMail.sendnamelist.push({
+						id: user.user_id || user.id || null,
+						name: email,
+						_uid: this.nextToUid++,
+					});
+					// 同步简单数组
+					this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
+				}
+				// 清空输入框，便于继续输入下一个
+				this.toInput = '';
+			},
+			// 删除已选收件人
+			removeRecipient(index) {
+				if (index < 0) return;
+				this.queryMail.sendnamelist.splice(index, 1);
+				this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
+			},
+			// CC 输入框失焦：与 To 相同逻辑，输入失去焦点则自动成为一条数据（排除点击下拉项时）
+			handleCcBlur(e) {
+				const related = e && e.relatedTarget;
+				if (related && typeof related.closest === 'function' && related.closest('.el-autocomplete-suggestion')) {
+					return;
+				}
+				const value = (this.ccInput || '').trim();
+				setTimeout(() => {
+					if (this.ccSelecting) {
+						this.ccSelecting = false;
+						return;
+					}
+					if (!value) return;
+					if (value.indexOf('@') === -1) {
+						this.ccInput = '';
+						return;
+					}
+					const exists = (this.ccList || []).some(item => item.name === value);
+					if (!exists) {
+						this.ccList.push({
+							id: null,
+							name: value,
+							_uid: this.nextCcUid++,
+						});
+					}
+					this.ccInput = '';
+				}, 150);
+			},
+			// 选中某个用户作为 CC（与 To 相同逻辑）
+			handleSelectCc(user) {
+				this.ccSelecting = true;
+				if (!user || !user.email) return;
+				const email = user.email;
+				const exists = (this.ccList || []).some(item => item.name === email);
+				if (!exists) {
+					this.ccList.push({
+						id: user.user_id || user.id || null,
+						name: email,
+						_uid: this.nextCcUid++,
+					});
+				}
+				this.ccInput = '';
+			},
+			// 删除已选 CC
+			removeCc(index) {
+				if (index < 0) return;
+				this.ccList.splice(index, 1);
+			},
+			// 根据路由 j_email_id 获取发件邮箱信息，用于展示发件人
+			getDate() {
+				const jEmailId = this.$route.query.j_email_id;
+				if (!jEmailId) {
+					this.userMes = {};
+					return;
+				}
+				this.$api
+					.post('api/email_client/getOneEmail', { j_email_id: jEmailId })
+					.then(res => {
+						if (res && res.code === 0 && res.data && res.data.email) {
+							const email = res.data.email;
+							this.userMes = {
+								realname: email.smtp_from_name || email.smtp_user || '',
+								email: email.smtp_user || '',
+							};
+						} else {
+							this.userMes = {};
+						}
+					})
+					.catch(() => {
+						this.userMes = {};
 					});
-
-
 			},
 			// 获取通讯录数据
 			getLibary() {
 				this.$api
-					.post('api/User/getAllUser', this.queryLibry)
+					.post('api/Reviewer/researchUser', {keywords: this.queryLibry.username})
 					.then(res => {
 						if (res.code == 0) {
-							this.mail_List = res.data.users;
-							this.link_TotalLibry = res.data.count || 0;
+							this.mail_List = res.data.list;
+							this.link_TotalLibry = res.data.list.length || 0;
 							for (let i = 0; i < this.mail_List.length; i++) {
 								this.mail_List[i].select_mark = 0
 								for (let j = 0; j < this.queryMail.sendnamelist.length; j++) {
@@ -286,9 +515,60 @@
 					});
 			},
 
-			// 发送邮件
+			// 发送邮件：api/email_client/sendOne，to_email 为多邮箱字符串拼接（逗号分隔），发送成功后关闭当前页并跳转收件箱
 			handleSend() {
-				console.log(this.queryMail)
+				if (this.sendLoading) return;
+				const toList = (this.queryMail.sendnamelist || []).map((item) => item.name).filter(Boolean);
+				if (!toList.length) {
+					this.$message.warning(this.$t('mailboxSend.validateTo'));
+					return;
+				}
+				if (!this.queryMail.sendtitle) {
+					this.$message.warning(this.$t('mailboxSend.validateSubject'));
+					return;
+				}
+				const journalId = this.$route.query.journal_id;
+				if (!journalId) {
+					this.$message.warning(this.$t('mailboxSend.needAccount'));
+					return;
+				}
+				this.sendLoading = true;
+				const params = {
+					journal_id: journalId,
+					to_email: toList.join(','),
+					subject: this.queryMail.sendtitle,
+					content: this.queryMail.content || '',
+				};
+				const self = this;
+				this.$api.post('api/email_client/sendOne', params).then((res) => {
+					if (res && res.code === 0) {
+						self.$message.success(self.$t('mailboxSend.sendSuccess'));
+						self.queryMail.sendnamelist = [];
+						self.queryMail.sendtitle = '';
+						self.queryMail.sendcc = '';
+						self.ccList = [];
+						self.queryMail.content = '';
+						self.fileL_atta = [];
+						self.goBackInbox();
+					} else {
+						self.$message.error((res && res.msg) || self.$t('mailboxSend.sendFail'));
+					}
+				}).catch(() => {
+					self.$message.error(self.$t('mailboxSend.sendFail'));
+				}).finally(() => {
+					self.sendLoading = false;
+				});
+			},
+			// 保存草稿（防抖：请求中禁用按钮）
+			handleSaveDraft() {
+				if (this.saveDraftLoading) return;
+				this.saveDraftLoading = true;
+				// TODO: 调用保存草稿接口，此处仅防抖占位
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.saveDraftLoading = false;
+					}, 300);
+				});
 			},
 
 			// 选择通讯录-弹出框
@@ -320,7 +600,8 @@
 				this.queryMail.sendname.push(e.email)
 				this.queryMail.sendnamelist.push({
 					id: null,
-					name: e.email
+					name: e.email,
+					_uid: this.nextToUid++,
 				})
 				this.getLibary();
 			},
@@ -331,7 +612,8 @@
 					this.queryMail.sendname.push(this.LibrarySelection[i].email)
 					this.queryMail.sendnamelist.push({
 						id: null,
-						name: this.LibrarySelection[i].email
+						name: this.LibrarySelection[i].email,
+						_uid: this.nextToUid++,
 					})
 				}
 				this.getLibary();
@@ -433,7 +715,16 @@
 	};
 </script>
 
-<style>
+<style scoped>
+	.crumbs {
+		display: flex;
+		align-items: center;
+		margin-bottom: 16px;
+	}
+	.back-inbox-btn {
+		margin-right: 12px;
+		padding-left: 0;
+	}
 	.mail_shuru {
 		font-size: 14px;
 		padding: 0 0 5px 0;
@@ -442,18 +733,18 @@
 	}
 
 	.mail_tit {
-		width: 90px;
+		width: 60px;
 		display: inline-block;
 	}
 
 	.mail_inp {
 		display: inline-block;
-		width: 550px;
+		width: 100%;
 		margin: 0 15px 0 0;
 		border: 0;
 	}
 
-	.mail_inp .el-input__inner {
+	.mail_inp ::v-deep .el-input__inner {
 		border: 1px solid #fff !important;
 	}
 
@@ -463,14 +754,13 @@
 		vertical-align: middle;
 	}
 
-	.up_newstyle .el-upload--text {
+	.up_newstyle ::v-deep .el-upload--text {
 		background-color: #006699;
 		border: 1px solid #006699;
 		padding: 5px 15px;
-		/* margin-left: 10px; */
 	}
 
-	.up_newstyle .el-upload__text em {
+	.up_newstyle ::v-deep .el-upload__text em {
 		color: #fff !important;
 		font-size: 12px;
 	}
@@ -545,8 +835,75 @@
 		height: 0;
 	}
 
-	.avatar-uploader-mail .el-upload--text {
+	.avatar-uploader-mail ::v-deep .el-upload--text {
 		height: 0 !important;
 		border: 0;
 	}
+	/* 让输入框的边框在平时不可见，只有在交互时体现，对齐邮件系统风格 */
+.mail_inp ::v-deep .el-input__inner {
+    border: none !important;
+    border-bottom: 0px solid #fff !important;
+    padding-right: 30px;
+}
+
+.mail_inp ::v-deep .el-input__suffix {
+    right: 5px;
+    transition: all .3s;
+}
+
+.mail_inp ::v-deep .el-input__suffix:hover {
+    transform: scale(1.2);
+}
+
+/* 调整容器对齐 */
+.mail_shuru {
+    display: flex;
+    align-items: flex-start; /* 考虑到多行标签，对齐顶部 */
+    min-height: 40px;
+    line-height: 40px;
+}
+/* 底部操作栏容器 */
+.mail-footer-bar {
+    margin-top: 20px;
+    padding: 10px 15px;
+    background-color: #f8f9fa; /* 浅灰色背景，类似图1 */
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between; /* 左右分布 */
+    align-items: center;
+}
+
+/* 发件人信息样式 */
+.sender-info {
+    font-size: 14px;
+    color: #666;
+}
+
+.sender-label {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.sender-content {
+    color: #006699; /* 保持你代码中的蓝色 */
+}
+
+/* 按钮组样式 */
+.action-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+
+.mail-footer-bar {
+    position: fixed;
+    bottom: 0;
+	
+ 
+    right: 0;
+    z-index: 10;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+}
+
 </style>

src/router/index.js

@@ -1026,11 +1026,20 @@ export default new Router({
 				title: 'Mailbox send'
 			}
 		},
+		{
+			path: '/mailboxConfig', //邮箱系统-邮箱配置管理
+			component: () => import('../components/page/mailboxConfig'),
+			meta: {
+				title: 'Mailbox config',
+				titleKey: 'sidebar.mailboxConfig'
+			}
+		},
 		{
 			path: '/mailboxCollect', //邮箱系统-收邮件列表
 			component: () => import('../components/page/mailboxCollect'),
 			meta: {
-				title: 'Mailbox list'
+				title: 'Mailbox list',
+				titleKey: 'sidebar.mailboxCollect'
 			}
 		},
 		{