zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2026-03-27 13:24:04 +08:00
parent c6c262169d
commit 7d3e6654fd
17 changed files with 2653 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/index.js
View File

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

2
src/components/common/Header.vue
View File

@@ -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');
}
},

2
src/components/common/Header2.vue
View File

@@ -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');
}
},

3
src/components/common/Sidebar.vue
View File

@@ -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> -->

53
src/components/common/langs/en.js
View File

@@ -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',

51
src/components/common/langs/zh.js
View File

@@ -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: '写邮件',

2
src/components/page/autoPromotion.vue
View File

@@ -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; }

237
src/components/page/components/email/FilePreviewDialog.vue Normal file
View File

@@ -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>

609
src/components/page/components/email/MailDetail.vue
View File

@@ -18,8 +18,14 @@
<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
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>
@@ -27,20 +33,44 @@
<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>
<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>
<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 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>
@@ -48,28 +78,58 @@
<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 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">
<div class="file-icon" :class="getFileTypeClass(file.name)">
<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>
<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>
<script>
export default {
</span>
</div>
</div>
</div>
</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: {
@@ -88,16 +148,136 @@
},
data() {
return {
isDetailExpanded: false
mediaUrl: Common.mediaUrl,
isDetailExpanded: false,
downloadingIndex: -1,
packingAll: false
};
},
computed: {
totalAttachmentSize() {
// 简单模拟计算总量，实际可根据逻辑累加
return "11MB";
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: {
scrollToAttachments() {
// 1. 获取目标元素的 DOM
const target = this.$el.querySelector('.attachment-section');
if (target) {
// 2. 使用原生 scrollIntoView 实现平滑滚动
target.scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 滚动到元素顶部
});
}
},
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 '';
@@ -126,9 +306,9 @@
return timePart;
}
// 2. 如果是昨天：只显示 "昨天"
// 2. 如果是昨天：显示 "昨天 15:57"
if (date.toDateString() === yesterday.toDateString()) {
return this.$t('mailboxCollect.yesterday');
return this.$t('mailboxCollect.yesterday') + ' ' + timePart;
}
// 3. 如果是今年（非今天/昨天）：按语言显示月日
@@ -142,23 +322,33 @@
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; }
}
};
</script>
/* 顶部工具栏 */
.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 {
<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>
.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>

26
src/components/page/components/email/TmrEmailEditor.vue
View File

@@ -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;
}

2
src/components/page/edit_per_text.vue
View File

@@ -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"

754
src/components/page/mailboxCollect.vue
View File

@@ -16,25 +16,24 @@
<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 :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-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')}}
{{ $t('mailboxCollect.changeAccountBtn') }}
</el-button>
</div>
</div>
@@ -58,21 +57,28 @@
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>
{{ $t('mailboxCollect.newMailArrived', { count: newMailsBuffer.length }) || `收到 ${newMailsBuffer.length} 封新邮件，点击查看` }}
</div>
</transition>
<template v-if="displayList.length > 0">
<div
v-for="item in displayList"
v-for="(item,i) in displayList"
:key="item.id"
:class="['mail-item-box', { active: activeMailId === item.id, unread: item.state === 1 }]"
@click="selectMail(item)"
@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="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>
<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>
@@ -103,11 +109,7 @@
<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"
/>
<mail-detail v-if="detailMail" :mailData="detailMail" @close="closeDetail" />
</div>
</template>
@@ -128,14 +130,9 @@
:show-close="true"
:before-close="handleAccountDialogBeforeClose"
>
<el-form inline style="margin-bottom: 10px;">
<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-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>
@@ -145,8 +142,12 @@
<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>
<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>
@@ -157,14 +158,17 @@
<script>
const API = {
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',
getAllJournal: 'api/Article/getJournal'
};
import MailDetail from '../../components/page/components/email/MailDetail.vue';
export default {
export default {
data() {
return {
currentFolder: 'inbox',
@@ -176,7 +180,7 @@ export default {
detailMail: {},
queryIn: { num: 0 },
inboxPage: 1,
inboxPerPage: 20,
inboxPerPage:100,
inboxTotalPages: 1,
inboxTotal: 0,
inboxLoadingMore: false,
@@ -192,6 +196,15 @@ export default {
accountList: [],
accountLoading: false,
detailLoading: false,
// SSE (POST 长连接)
sseAbortController: null,
sseReconnectTimer: null,
sseReader: null,
sseBuffer: '',
sseManuallyStopped: false,
inboxRefreshTimer: null,
sseSyncing: false,
newMailsBuffer: [], // SSE 发现的新邮件暂存区
};
},
components: { MailDetail },
@@ -207,7 +220,23 @@ export default {
this.loadJournals();
this.initAccountSelection();
},
beforeDestroy() {
this.stopInboxSse(true);
if (this.inboxRefreshTimer) {
clearTimeout(this.inboxRefreshTimer);
this.inboxRefreshTimer = null;
}
},
methods: {
insertMailsFromBuffer() {
// 1. 合并数据
this.tableData_in = [...this.newMailsBuffer, ...this.tableData_in];
// 3. 滚动到顶部
this.$nextTick(() => {
this.$refs.listScrollArea.scrollTop = 0;
});
},
closeDetail() {
this.activeMailId = null;
this.detailMail = {};
@@ -255,23 +284,31 @@ export default {
// 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 => {
.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;
}
// 接口返回 null/非 0：回退到选择账号弹窗
// 账号不存在或不属于当前用户：清除本地缓存并弹窗选择
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();
});
},
@@ -289,9 +326,9 @@ export default {
loadJournals() {
this.journalLoading = true;
this.$api
.post(API.getAllJournal, {username: localStorage.getItem('U_name')})
.then(res => {
this.journalList = (res || []).map(i => ({
.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 || ''
}));
@@ -306,7 +343,7 @@ export default {
},
loadAccountsForJournal(id) {
this.accountLoading = true;
this.$api.post(API.getAccounts, { journal_id: id }).then(res => {
this.$api.post(API.getAccounts, { journal_id: id }).then((res) => {
this.accountLoading = false;
this.accountList = res.data || [];
});
@@ -330,16 +367,62 @@ export default {
// 不再写入路由 query，直接拉取数据
this.fetchData();
this.startInboxSse();
},
handleAccountDialogBeforeClose(done) {
const hasAccount = this.selectedAccount || this.$route.query.j_email_id;
if (hasAccount) {
done();
}else{
} 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;
@@ -363,51 +446,107 @@ export default {
} else {
this.inboxLoadingMore = true;
}
this.$api.post(API.getInboxList, params).then(res => {
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 => ({
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 || '',
state: item.is_read === 1 ? 0 : 1
is_read: item.is_read
}));
if (isFirstPage) {
this.tableData_in = rows;
} else {
this.tableData_in = this.tableData_in.concat(rows);
// 过滤掉已经在列表中存在的 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.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(() => {
})
.catch(() => {
this.inboxLoadingMore = false;
if (isFirstPage) this.inboxLoading = false;
});
},
switchFolder(f) { this.currentFolder = f; this.activeMailId = null; },
selectMail(item) {
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 => {
this.detailLoading = false;
this.$api
.post(API.getEmailDetail, { inbox_id: inboxId })
.then((res) => {
const d = res && res.data;
if (res && res.code === 0 && d) {
this.detailMail = {
...d
};
this.detailMail = { ...d, inbox_id: String(inboxId), attachments: [] };
item.state = 0;
}
}).catch(() => {
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
@@ -416,22 +555,26 @@ export default {
this.syncLoading = true;
const params = {
j_email_id: String(this.selectedAccount.j_email_id),
journal_id: String(this.selectedAccount.journal_id),
journal_id: String(this.selectedAccount.journal_id)
};
this.$api.post(API.syncInbox, params).then((res) => {
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(() => {
})
.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)
@@ -464,9 +607,9 @@ export default {
return timePart;
}
// 2. 如果是昨天：只显示 "昨天"
// 2. 如果是昨天：显示 "昨天 15:57"
if (date.toDateString() === yesterday.toDateString()) {
return this.$t('mailboxCollect.yesterday');
return this.$t('mailboxCollect.yesterday') + ' ' + timePart;
}
// 3. 如果是今年（非今天/昨天）：按语言显示月日
@@ -480,15 +623,17 @@ export default {
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 || ""; },
},
stripHtml(html) {
return new DOMParser().parseFromString(html, 'text/html').body.textContent || '';
},
handleWrite() {
if (!this.selectedAccount) return;
this.$router.push(
'/mailboxSend'
);
this.$router.push('/mailboxSend');
},
handleSearch() {
this.fetchData(1);
},
handleSearch() { this.fetchData(1); },
onListScroll(e) {
const el = e.target;
if (!el || this.currentFolder !== 'inbox' || this.inboxLoadingMore) return;
@@ -498,9 +643,170 @@ export default {
this.fetchData(this.inboxPage + 1);
}
},
notImplemented() { this.$message.info(this.$t('mailboxCollect.featureDev')); }
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>
@@ -520,12 +826,40 @@ export default {
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;
@@ -533,57 +867,257 @@ export default {
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;
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; }
.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>

9
src/components/page/mailboxConfig.vue
View File

@@ -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) : '',

19
src/components/page/mailboxSend.vue
View File

@@ -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'));

545
src/components/page/scholarCrawlersKeywords.vue Normal file
View File

@@ -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>

7
src/router/index.js
View File

@@ -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'),

11
vue.config.js
View File

@@ -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
}
}
},