提交
This commit is contained in:
@@ -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: '/', //正式
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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> -->
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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: '写邮件',
|
||||
|
||||
@@ -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
237
src/components/page/components/email/FilePreviewDialog.vue
Normal 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>
|
||||
@@ -1,164 +1,354 @@
|
||||
<template>
|
||||
<div class="mail-detail-container">
|
||||
<div class="detail-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<h1 class="mail-subject-top">{{ $t('mailboxCollect.subject') }}：{{ mailData.subject }}</h1>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<!-- <i class="el-icon-star-off action-icon"></i> -->
|
||||
<i class="el-icon-close action-icon" @click="$emit('close')"></i>
|
||||
<div class="detail-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<h1 class="mail-subject-top">{{ $t('mailboxCollect.subject') }}：{{ mailData.subject }}</h1>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<!-- <i class="el-icon-star-off action-icon"></i> -->
|
||||
<i class="el-icon-close action-icon" @click="$emit('close')"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-scroll-content">
|
||||
<div class="mail-header-info">
|
||||
<el-avatar :size="40" class="sender-avatar">{{ (mailData.from_name || 'U')[0] }}</el-avatar>
|
||||
<div class="info-main">
|
||||
<div class="first-line">
|
||||
<span class="sender-name">{{ mailData.from_name }}</span>
|
||||
<span class="sender-email"><{{ mailData.from_email }}></span>
|
||||
<span class="send-time">{{ formatDisplayTime(mailData.email_date) }}</span>
|
||||
|
||||
<span
|
||||
class="detail-toggle"
|
||||
@click="isDetailExpanded = !isDetailExpanded"
|
||||
v-if="mailData.to_list && mailData.to_list.length > 0"
|
||||
>
|
||||
{{ isDetailExpanded ? '收起' : '详情' }}
|
||||
<i :class="isDetailExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="isDetailExpanded" class="expanded-info">
|
||||
<div class="info-row">
|
||||
<span class="label">收件人：</span>
|
||||
<div class="recipient-tags">
|
||||
<el-tag v-for="(to, index) in mailData.to_list" :key="'to-' + index" size="mini" type="info">{{
|
||||
to.name || to.email
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="mailData.cc_list && mailData.cc_list.length" class="info-row">
|
||||
<span class="label">抄送：</span>
|
||||
<div class="recipient-tags">
|
||||
<el-tag
|
||||
v-for="(cc, index) in mailData.cc_list"
|
||||
:key="'cc-' + index"
|
||||
size="mini"
|
||||
type="warning"
|
||||
effect="plain"
|
||||
>{{ cc.name || cc.email }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="simple-info" v-if="mailData.to_list && mailData.to_list.length > 0">
|
||||
发送给
|
||||
{{ mailData.to_list && mailData.to_list[0] ? mailData.to_list[0].name || mailData.to_list[0].email : '' }} 等{{
|
||||
mailData.to_list.length
|
||||
}}人
|
||||
</div>
|
||||
<div v-if="mailData.attachments && mailData.attachments.length" class="attachment-brief-bar">
|
||||
<span class="brief-info">
|
||||
{{ $t('mailboxCollect.totalAttachments', { count: mailData.attachments.length }) }}（
|
||||
<i class="el-icon-document" style="color: #409EFF;"></i>
|
||||
<span class="first-file-name">{{ mailData.attachments[0].name }}{{ mailData.attachments.length > 1 ? $t('mailboxCollect.etcSuffix') : '' }}</span>
|
||||
）
|
||||
|
||||
</span>
|
||||
<el-link type="primary" :underline="false" @click="scrollToAttachments" class="jump-link">
|
||||
{{ $t('mailboxCollect.viewAttachments') }}
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mail-body-content" v-html="mailData.content_html"></div>
|
||||
|
||||
<div v-if="mailData.attachments && mailData.attachments.length" class="attachment-section">
|
||||
<div class="attachment-header">
|
||||
<div class="header-left">
|
||||
<span>{{ mailData.attachments.length }}{{ $t('mailboxCollect.attachmentCount') }} ({{ totalAttachmentSize }})</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="download-all" @click="downloadAll">
|
||||
<template v-if="packingAll"><i class="el-icon-loading"></i> {{ $t('mailboxCollect.packingAttachments') }}</template>
|
||||
<template v-else>{{ $t('mailboxCollect.downloadAllZip') }}</template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="attachment-list">
|
||||
<div v-for="(file, index) in mailData.attachments" :key="index" class="attachment-card">
|
||||
<div class="file-icon" :class="getFileTypeClass(file.name)">
|
||||
<i :class="getFileIcon(file.name)"></i>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name" :title="file.name">{{ file.name }}</div>
|
||||
<div class="file-size-row">
|
||||
<span class="file-size">{{ formatFileSize(file.size) }}</span>
|
||||
<span class="file-actions">
|
||||
<!-- <i class="el-icon-view" title="预览" @click.stop="previewAttachment(file)"></i> -->
|
||||
<i
|
||||
:class="downloadingIndex === index ? 'el-icon-loading' : 'el-icon-download'"
|
||||
:title="downloadingIndex === index ? '' : '下载'"
|
||||
@click.stop="downloadAttachment(file, index)"
|
||||
></i>
|
||||
|
||||
<div class="detail-scroll-content">
|
||||
<div class="mail-header-info">
|
||||
<el-avatar :size="40" class="sender-avatar">{{ (mailData.from_name || 'U')[0] }}</el-avatar>
|
||||
<div class="info-main">
|
||||
<div class="first-line">
|
||||
<span class="sender-name">{{ mailData.from_name }}</span>
|
||||
<span class="sender-email"><{{ mailData.from_email }}></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>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<file-preview-dialog
|
||||
ref="previewDialog"
|
||||
@download="downloadAttachment"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
<script>
|
||||
import Common from '@/components/common/common';
|
||||
import JSZip from 'jszip';
|
||||
import { saveAs } from 'file-saver';
|
||||
import FilePreviewDialog from './FilePreviewDialog.vue';
|
||||
export default {
|
||||
components: {
|
||||
FilePreviewDialog
|
||||
},
|
||||
name: 'MailDetail',
|
||||
props: {
|
||||
mailData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
subject: '',
|
||||
from_name: '',
|
||||
from_email: '',
|
||||
send_time: '',
|
||||
to_list: [],
|
||||
cc_list: [],
|
||||
content: '',
|
||||
attachments: []
|
||||
})
|
||||
}
|
||||
mailData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
subject: '',
|
||||
from_name: '',
|
||||
from_email: '',
|
||||
send_time: '',
|
||||
to_list: [],
|
||||
cc_list: [],
|
||||
content: '',
|
||||
attachments: []
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isDetailExpanded: false
|
||||
};
|
||||
return {
|
||||
mediaUrl: Common.mediaUrl,
|
||||
isDetailExpanded: false,
|
||||
downloadingIndex: -1,
|
||||
packingAll: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
totalAttachmentSize() {
|
||||
// 简单模拟计算总量，实际可根据逻辑累加
|
||||
return "11MB";
|
||||
}
|
||||
totalAttachmentSize() {
|
||||
if (!this.mailData.attachments || !this.mailData.attachments.length) return '0B';
|
||||
const total = this.mailData.attachments.reduce((sum, f) => sum + (Number(f.size) || 0), 0);
|
||||
return this.formatFileSize(total);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDisplayTime(timestamp) {
|
||||
if (!timestamp) return '';
|
||||
scrollToAttachments() {
|
||||
// 1. 获取目标元素的 DOM
|
||||
const target = this.$el.querySelector('.attachment-section');
|
||||
|
||||
// 1. 处理 10 位秒级时间戳，转为毫秒并实例化 Date 对象
|
||||
const date = new Date(Number(timestamp) * 1000);
|
||||
const now = new Date();
|
||||
|
||||
// 提取日期信息用于比较
|
||||
const dateYear = date.getFullYear();
|
||||
const nowYear = now.getFullYear();
|
||||
const lang = localStorage.getItem('langs') === 'zh' ? 'zh-CN' : 'en-US';
|
||||
|
||||
// 获取昨天日期
|
||||
const yesterday = new Date(now);
|
||||
yesterday.setDate(now.getDate() - 1);
|
||||
|
||||
// 获取具体时分并补零 (例如 09:05)
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
const timePart = `${hours}:${minutes}`;
|
||||
|
||||
// --- 按照图示规则判断返回 ---
|
||||
|
||||
// 1. 如果是今天：只显示时间，如 "15:57"
|
||||
if (date.toDateString() === now.toDateString()) {
|
||||
return timePart;
|
||||
}
|
||||
|
||||
// 2. 如果是昨天：只显示 "昨天"
|
||||
if (date.toDateString() === yesterday.toDateString()) {
|
||||
return this.$t('mailboxCollect.yesterday');
|
||||
}
|
||||
|
||||
// 3. 如果是今年（非今天/昨天）：按语言显示月日
|
||||
if (dateYear === nowYear) {
|
||||
return new Intl.DateTimeFormat(lang, { month: 'short', day: 'numeric' }).format(date);
|
||||
}
|
||||
|
||||
// 4. 如果是往年：显示完整年月日，如 "2025-12-05"
|
||||
const dateMonth = date.getMonth() + 1;
|
||||
const dateDay = date.getDate();
|
||||
const fullMonth = dateMonth.toString().padStart(2, '0');
|
||||
const fullDay = dateDay.toString().padStart(2, '0');
|
||||
return `${dateYear}-${fullMonth}-${fullDay}`;
|
||||
},
|
||||
getFileIcon(fileName) {
|
||||
if (fileName.includes('.doc')) return 'el-icon-document text-blue';
|
||||
if (fileName.includes('.pdf')) return 'el-icon-document text-red';
|
||||
return 'el-icon-document';
|
||||
}
|
||||
if (target) {
|
||||
// 2. 使用原生 scrollIntoView 实现平滑滚动
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth', // 平滑滚动
|
||||
block: 'start' // 滚动到元素顶部
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
},
|
||||
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);
|
||||
|
||||
<style scoped>
|
||||
.mail-detail-container { height: 100%; display: flex; flex-direction: column; background: #fff; }
|
||||
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)
|
||||
});
|
||||
|
||||
/* 顶部工具栏 */
|
||||
.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 {
|
||||
if (res.data && res.data.file_url) {
|
||||
const fullUrl = this.mediaUrl + res.data.file_url;
|
||||
|
||||
// 2. 调用弹窗组件的 init 方法
|
||||
// 注意：微软预览要求 fullUrl 必须是公网可访问的！
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
async downloadAttachment(file, index) {
|
||||
if (this.downloadingIndex >= 0) return;
|
||||
this.downloadingIndex = index;
|
||||
try {
|
||||
const url = await this.ensureFileUrl(file);
|
||||
if (!url) {
|
||||
this.$message.warning(this.$t('mailboxCollect.downloadFail') || '下载失败');
|
||||
return;
|
||||
}
|
||||
const fileUrl = this.mediaUrl + url;
|
||||
const fileName = file.name || 'attachment';
|
||||
const resp = await fetch(fileUrl);
|
||||
const blob = await resp.blob();
|
||||
saveAs(blob, fileName);
|
||||
} catch (e) {
|
||||
this.$message.error(this.$t('mailboxCollect.downloadFail') || '下载失败');
|
||||
} finally {
|
||||
this.downloadingIndex = -1;
|
||||
}
|
||||
},
|
||||
|
||||
formatDisplayTime(timestamp) {
|
||||
if (!timestamp) return '';
|
||||
|
||||
// 1. 处理 10 位秒级时间戳，转为毫秒并实例化 Date 对象
|
||||
const date = new Date(Number(timestamp) * 1000);
|
||||
const now = new Date();
|
||||
|
||||
// 提取日期信息用于比较
|
||||
const dateYear = date.getFullYear();
|
||||
const nowYear = now.getFullYear();
|
||||
const lang = localStorage.getItem('langs') === 'zh' ? 'zh-CN' : 'en-US';
|
||||
|
||||
// 获取昨天日期
|
||||
const yesterday = new Date(now);
|
||||
yesterday.setDate(now.getDate() - 1);
|
||||
|
||||
// 获取具体时分并补零 (例如 09:05)
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
const timePart = `${hours}:${minutes}`;
|
||||
|
||||
// --- 按照图示规则判断返回 ---
|
||||
|
||||
// 1. 如果是今天：只显示时间，如 "15:57"
|
||||
if (date.toDateString() === now.toDateString()) {
|
||||
return timePart;
|
||||
}
|
||||
|
||||
// 2. 如果是昨天：显示 "昨天 15:57"
|
||||
if (date.toDateString() === yesterday.toDateString()) {
|
||||
return this.$t('mailboxCollect.yesterday') + ' ' + timePart;
|
||||
}
|
||||
|
||||
// 3. 如果是今年（非今天/昨天）：按语言显示月日
|
||||
if (dateYear === nowYear) {
|
||||
return new Intl.DateTimeFormat(lang, { month: 'short', day: 'numeric' }).format(date);
|
||||
}
|
||||
|
||||
// 4. 如果是往年：显示完整年月日，如 "2025-12-05"
|
||||
const dateMonth = date.getMonth() + 1;
|
||||
const dateDay = date.getDate();
|
||||
const fullMonth = dateMonth.toString().padStart(2, '0');
|
||||
const fullDay = dateDay.toString().padStart(2, '0');
|
||||
return `${dateYear}-${fullMonth}-${fullDay}`;
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mail-detail-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 顶部工具栏 */
|
||||
.detail-toolbar {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.toolbar-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.mail-subject-top {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
@@ -166,40 +356,307 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.action-icon {
|
||||
font-size: 18px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.detail-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
/* 头部信息 */
|
||||
.mail-header-info {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.info-main {
|
||||
flex: 1;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.first-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.sender-name {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
.sender-email {
|
||||
color: #909399;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.send-time {
|
||||
margin-left: auto;
|
||||
color: #909399;
|
||||
}
|
||||
.detail-toggle {
|
||||
margin-left: 10px;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expanded-info {
|
||||
background: #f8f9fa;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.info-row .label {
|
||||
width: 60px;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
.recipient-tags {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
.simple-info {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 正文 */
|
||||
.mail-body-content {
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
min-height: 200px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* 附件卡片 */
|
||||
.attachment-section {
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.attachment-header {
|
||||
margin-bottom: 15px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.security-tip {
|
||||
margin-left: auto;
|
||||
color: #67c23a;
|
||||
}
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
.attachment-card {
|
||||
/* width: 260px; */
|
||||
/* border: 1px solid #e4e7ed; */
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: #fbfbfc;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.attachment-card:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.12);
|
||||
}
|
||||
.file-icon {
|
||||
font-size: 32px;
|
||||
color: #409eff;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.file-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.file-download {
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.attachment-card:hover .file-download {
|
||||
color: #409eff;
|
||||
}
|
||||
.text-blue {
|
||||
color: #409eff;
|
||||
}
|
||||
.text-red {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.attachment-section {
|
||||
padding-top: 10px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.attachment-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.attachment-header .divider {
|
||||
margin: 0 10px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.attachment-header .download-all {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.attachment-header .header-right {
|
||||
color: #2ba471; /* 安全绿色 */
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 列表布局 */
|
||||
.attachment-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 附件卡片 */
|
||||
.attachment-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: #f3f5f8; /* 浅灰色背景 */
|
||||
border-radius: 2px;
|
||||
cursor: default;
|
||||
transition: background-color 0.2s;
|
||||
height: 54px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.attachment-card:hover {
|
||||
background-color: #e7eaf0;
|
||||
}
|
||||
|
||||
/* 图标颜色控制 */
|
||||
.file-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
border-radius: 2px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 根据类型设置背景色 (需在 getFileTypeClass 中返回) */
|
||||
.file-icon.img { background-color: #e34d59; } /* 红色 */
|
||||
.file-icon.word { background-color: #0052d9; } /* 蓝色 */
|
||||
.file-icon.html { background-color: #ed7b2f; } /* 橙色 */
|
||||
.file-icon.txt { background-color: #737b85; } /* 灰色 */
|
||||
|
||||
/* 信息部分 */
|
||||
.file-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.file-size-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 悬浮图标控制 */
|
||||
.file-actions {
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.attachment-card:hover .file-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.file-actions i {
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-actions i:hover {
|
||||
color: #0052d9;
|
||||
}
|
||||
.attachment-brief-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
border-top: 1px solid #ebeef5;
|
||||
|
||||
|
||||
}
|
||||
.attachment-brief-bar .brief-info {
|
||||
|
||||
}
|
||||
.action-icon { font-size: 18px; color: #606266; cursor: pointer; }
|
||||
.action-icon:hover { color: #409EFF; }
|
||||
|
||||
.detail-scroll-content { flex: 1; overflow-y: auto; padding: 20px 40px; }
|
||||
|
||||
/* 头部信息 */
|
||||
.mail-header-info { display: flex; margin-bottom: 30px; }
|
||||
.info-main { flex: 1; margin-left: 15px; }
|
||||
.first-line { display: flex; align-items: center; margin-bottom: 5px; font-size: 14px; }
|
||||
.sender-name { font-weight: bold; color: #303133; }
|
||||
.sender-email { color: #909399; margin-left: 5px; }
|
||||
.send-time { margin-left: auto; color: #909399; }
|
||||
.detail-toggle { margin-left: 10px; color: #409EFF; cursor: pointer; font-size: 12px; }
|
||||
|
||||
.expanded-info { background: #f8f9fa; padding: 10px; border-radius: 4px; margin-top: 10px; }
|
||||
.info-row { display: flex; margin-bottom: 8px; }
|
||||
.info-row .label { width: 60px; color: #909399; font-size: 13px; }
|
||||
.recipient-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
.simple-info { font-size: 12px; color: #909399; }
|
||||
|
||||
/* 正文 */
|
||||
.mail-body-content { line-height: 1.6; font-size: 14px; color: #303133; min-height: 200px; margin-bottom: 50px; }
|
||||
|
||||
/* 附件卡片 */
|
||||
.attachment-section { border-top: 1px solid #eee; padding-top: 20px; }
|
||||
.attachment-header { margin-bottom: 15px; font-size: 13px; color: #606266; display: flex; align-items: center; }
|
||||
.security-tip { margin-left: auto; color: #67C23A; }
|
||||
.attachment-list { display: flex; flex-wrap: wrap; gap: 15px; }
|
||||
.attachment-card { width: 260px; border: 1px solid #e4e7ed; border-radius: 4px; display: flex; padding: 10px; background: #fbfbfc; }
|
||||
.file-icon { font-size: 32px; color: #409EFF; margin-right: 12px; }
|
||||
.file-info { flex: 1; overflow: hidden; }
|
||||
.file-name { font-size: 13px; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.file-size { font-size: 12px; color: #909399; margin-top: 4px; }
|
||||
.text-blue { color: #409EFF; }
|
||||
.text-red { color: #F56C6C; }
|
||||
</style>
|
||||
.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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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) : '',
|
||||
|
||||
@@ -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
545
src/components/page/scholarCrawlersKeywords.vue
Normal 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>
|
||||
@@ -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'),
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user