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-30 13:07:33 +08:00
parent 7d3e6654fd
commit 3f53a6c7d0
13 changed files with 1349 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,6 +98,10 @@
:visible.sync="showWizardDialog"
:config="wizardConfig"
:wizardStartDate.sync="wizardStartDate"
:selectedFieldIds.sync="selectedFieldIds"
:availableFields="availableFields"
:fieldsLoading="fieldsLoading"
:fieldsSaving="fieldsSaving"
:currentJournalName="wizardJournal ? wizardJournal.title : ''"
:selectedTemplateThumbHtml="selectedTemplateThumbHtml"
:selectedTemplateName="selectedTemplateName"
@@ -105,6 +109,7 @@
:saving="saving"
:title="`${$t('autoPromotion.journalManage')}: ${wizardJournal ? wizardJournal.title : ''}`"
@open-template-selector="openTemplateSelector"
@confirm-fields="savePromotionFieldsNow"
@cancel="showWizardDialog = false"
@confirm="saveWizardConfig"
/>
@@ -150,6 +155,10 @@ export default {
selectedTemplateThumbHtml: '',
selectedTemplateName: '',
selectedStyleName: '',
selectedFieldIds: [],
availableFields: [],
fieldsLoading: false,
fieldsSaving: false,
templateDialogInitialStyleId: '',
templateDialogInitialTemplateId: '',
templateNameMap: {},
@@ -306,6 +315,81 @@ export default {
? this.$t('autoPromotion.goManagePlan')
: this.$t('autoPromotion.startPlan');
},
findArray(obj) {
if (Array.isArray(obj)) return obj;
if (!obj || typeof obj !== 'object') return null;
const keys = ['list', 'fields', 'rows', 'items', 'data', 'result'];
for (const k of keys) {
if (Array.isArray(obj[k])) return obj[k];
}
const values = Object.values(obj);
if (values.length && Array.isArray(values[0])) return values[0];
return null;
},
async loadPromotionFields(journalId) {
this.fieldsLoading = true;
this.availableFields = [];
this.selectedFieldIds = [];
try {
const availableRes = await this.$api.post('api/email_client/getAvailableFields', { journal_id: String(journalId) });
console.log('[getAvailableFields] raw response:', JSON.stringify(availableRes));
const availablePayload = (availableRes && availableRes.data) || availableRes || {};
let availableArr = this.findArray(availablePayload);
if (!availableArr) {
availableArr = Array.isArray(availablePayload) ? availablePayload : [];
}
this.availableFields = availableArr.map((item, idx) => {
const id = item.expert_fetch_id || item.fetch_id || item.id || item.field_id || (idx + 1);
const label = item.field || item.title || item.name || item.label || String(id);
return { id: String(id), label };
});
console.log('[getAvailableFields] parsed fields:', this.availableFields.length, this.availableFields.slice(0, 3));
} catch (e) {
console.error('[getAvailableFields] error:', e);
this.availableFields = [];
}
try {
const selectedRes = await this.$api.post('api/email_client/getJournalPromotionFields', { journal_id: String(journalId) });
console.log('[getJournalPromotionFields] raw response:', JSON.stringify(selectedRes));
const selectedPayload = (selectedRes && selectedRes.data) || selectedRes || {};
let selectedArr = this.findArray(selectedPayload);
if (selectedArr) {
this.selectedFieldIds = selectedArr.map((it) => {
return String(it.expert_fetch_id || it.fetch_id || it.id || it.field_id || it);
});
} else if (typeof selectedPayload === 'string') {
this.selectedFieldIds = selectedPayload.split(',').map((s) => s.trim()).filter(Boolean);
} else if (typeof selectedPayload.fetch_ids === 'string') {
this.selectedFieldIds = selectedPayload.fetch_ids.split(',').map((s) => s.trim()).filter(Boolean);
}
console.log('[getJournalPromotionFields] parsed selected:', this.selectedFieldIds);
} catch (e) {
console.error('[getJournalPromotionFields] error:', e);
this.selectedFieldIds = [];
}
this.fieldsLoading = false;
},
async savePromotionFieldsNow() {
if (!this.wizardJournal || !this.wizardJournal.journal_id) return;
this.fieldsSaving = true;
try {
await this.$api.post('api/email_client/setJournalPromotionFields', {
journal_id: String(this.wizardJournal.journal_id),
fetch_ids: (this.selectedFieldIds || []).join(',')
});
this.$message.success(this.$t('autoPromotion.fieldsSaved'));
} catch (e) {
this.$message.error(this.$t('autoPromotion.saveFailed'));
} finally {
this.fieldsSaving = false;
}
},
async handleSolicitAction(journal) {
if (!this.isSolicitConfigured(journal)) {
@@ -344,7 +428,7 @@ export default {
this.openDetail(journal);
},
openWizardForJournal(journal) {
async openWizardForJournal(journal) {
this.wizardJournal = journal;
const s = journal.solicit || {};
this.wizardConfig = {
@@ -355,6 +439,11 @@ export default {
this.selectedTemplateName = s.templateName || '';
this.selectedStyleName = s.styleName || '';
this.selectedTemplateThumbHtml = `<div style="zoom:0.18; pointer-events:none; user-select:none;">${s.html || ''}</div>`;
this.selectedFieldIds = [];
this.availableFields = [];
if (journal && journal.journal_id) {
await this.loadPromotionFields(journal.journal_id);
}
this.showWizardDialog = true;
},
@@ -387,6 +476,10 @@ export default {
start_promotion: this.wizardConfig.enabled ? '1' : '0',
user_id: userId
});
await this.$api.post('api/email_client/setJournalPromotionFields', {
journal_id: String(this.wizardJournal.journal_id),
fetch_ids: (this.selectedFieldIds || []).join(',')
});
await this.refreshJournalByDetail(this.wizardJournal);
this.$message.success(this.$t('autoPromotion.configSaved'));
this.showWizardDialog = false;

90
src/components/page/autoPromotionLogs.vue
View File

@@ -40,6 +40,10 @@
mode="inline"
:config="config"
:wizardStartDate.sync="wizardStartDate"
:selectedFieldIds.sync="selectedFieldIds"
:availableFields="availableFields"
:fieldsLoading="fieldsLoading"
:fieldsSaving="fieldsSaving"
:currentJournalName="currentJournalName"
:selectedTemplateThumbHtml="selectedTemplateThumbHtml"
:selectedTemplateName="selectedTemplateName"
@@ -47,6 +51,7 @@
:saving="saving"
:title="$t('autoPromotion.title')"
@open-template-selector="showTemplateDialog = true"
@confirm-fields="savePromotionFieldsNow"
@confirm="completeInitialization"
/>
</el-card>
@@ -204,6 +209,10 @@
:visible.sync="showWizardDialog"
:config="config"
:wizardStartDate.sync="wizardStartDate"
:selectedFieldIds.sync="selectedFieldIds"
:availableFields="availableFields"
:fieldsLoading="fieldsLoading"
:fieldsSaving="fieldsSaving"
:currentJournalName="currentJournalName"
:selectedTemplateThumbHtml="selectedTemplateThumbHtml"
:selectedTemplateName="selectedTemplateName"
@@ -211,6 +220,7 @@
:saving="saving"
:title="$t('autoPromotion.title')"
@open-template-selector="showTemplateDialog = true"
@confirm-fields="savePromotionFieldsNow"
@cancel="showWizardDialog = false"
@confirm="completeInitialization"
/>
@@ -328,6 +338,10 @@ export default {
templateDialogInitialStyleId: '',
templateDialogInitialTemplateId: '',
togglingTaskId: '',
selectedFieldIds: [],
availableFields: [],
fieldsLoading: false,
fieldsSaving: false,
previewForm: {
id: '',
email: '',
@@ -453,6 +467,9 @@ export default {
this.loading = true;
try {
await this.fetchJournalDetail();
if (this.selectedJournalId) {
this.loadPromotionFields(this.selectedJournalId);
}
if (this.config.initialized) {
await this.fetchTemplates();
await this.fetchList();
@@ -524,13 +541,74 @@ export default {
},
// 打开向导弹窗：用于“修改期刊自动推广配置”
openWizardDialog() {
this.showWizardDialog = true;
findArray(obj) {
if (Array.isArray(obj)) return obj;
if (!obj || typeof obj !== 'object') return null;
const keys = ['list', 'fields', 'rows', 'items', 'data', 'result'];
for (const k of keys) {
if (Array.isArray(obj[k])) return obj[k];
}
const values = Object.values(obj);
if (values.length && Array.isArray(values[0])) return values[0];
return null;
},
async loadPromotionFields(journalId) {
this.fieldsLoading = true;
this.availableFields = [];
this.selectedFieldIds = [];
try {
const availableRes = await this.$api.post('api/email_client/getAvailableFields', { journal_id: String(journalId) });
const availablePayload = (availableRes && availableRes.data) || availableRes || {};
let availableArr = this.findArray(availablePayload);
if (!availableArr) availableArr = Array.isArray(availablePayload) ? availablePayload : [];
this.availableFields = availableArr.map((item, idx) => {
const id = item.expert_fetch_id || item.fetch_id || item.id || item.field_id || (idx + 1);
const label = item.field || item.title || item.name || item.label || String(id);
return { id: String(id), label };
});
} catch (e) {
this.availableFields = [];
}
try {
const selectedRes = await this.$api.post('api/email_client/getJournalPromotionFields', { journal_id: String(journalId) });
const selectedPayload = (selectedRes && selectedRes.data) || selectedRes || {};
let selectedArr = this.findArray(selectedPayload);
if (selectedArr) {
this.selectedFieldIds = selectedArr.map((it) => String(it.expert_fetch_id || it.fetch_id || it.id || it.field_id || it));
} else if (typeof selectedPayload === 'string') {
this.selectedFieldIds = selectedPayload.split(',').map((s) => s.trim()).filter(Boolean);
} else if (typeof selectedPayload.fetch_ids === 'string') {
this.selectedFieldIds = selectedPayload.fetch_ids.split(',').map((s) => s.trim()).filter(Boolean);
}
} catch (e) {
this.selectedFieldIds = [];
}
this.fieldsLoading = false;
},
async savePromotionFieldsNow() {
if (!this.selectedJournalId) return;
this.fieldsSaving = true;
try {
await this.$api.post('api/email_client/setJournalPromotionFields', {
journal_id: String(this.selectedJournalId),
fetch_ids: (this.selectedFieldIds || []).join(',')
});
this.$message.success(this.$t('autoPromotion.fieldsSaved'));
} catch (e) {
this.$message.error(this.$t('autoPromotion.saveFailed'));
} finally {
this.fieldsSaving = false;
}
},
async openWizardDialog() {
this.wizardStep = 0;
// 尽量从已加载的 config 里取开始日期（没有就保持空）
if (this.config && this.config.start_date) {
this.wizardStartDate = this.config.start_date;
}
if (this.selectedJournalId) {
await this.loadPromotionFields(this.selectedJournalId);
}
this.showWizardDialog = true;
},
// 切换期刊逻辑
@@ -622,10 +700,14 @@ export default {
default_style_id: String(this.config.defaultStyleId || ''),
start_promotion: this.config.enabled ? '1' : '0'
};
this.config.initialized = true; // 切换到管理模式
this.config.initialized = true;
this.showWizardDialog = false;
this.fetchList();
await this.$api.post(API.saveConfig, payload);
await this.$api.post('api/email_client/setJournalPromotionFields', {
journal_id: String(this.selectedJournalId || ''),
fetch_ids: (this.selectedFieldIds || []).join(',')
});
this.$message.success(this.$t('autoPromotionLogs.configUpdated'));
} finally {
this.saving = false;

29
src/components/page/components/autoPromotion/AutoPromotionWizard.vue
View File

@@ -3,7 +3,7 @@
v-if="mode === 'dialog'"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="1000px"
width="1200px"
top="5vh"
destroy-on-close
:title="title"
@@ -16,7 +16,12 @@
:selectedTemplateThumbHtml="selectedTemplateThumbHtml"
:selectedTemplateName="selectedTemplateName"
:selectedStyleName="selectedStyleName"
:availableFields="availableFields"
:fieldsLoading="fieldsLoading"
:fieldsSaving="fieldsSaving"
:selectedFieldIds.sync="selectedFieldIdsProxy"
@open-template-selector="emitOpenTemplateSelector"
@confirm-fields="emitConfirmFields"
@update:wizardStartDate="onWizardStartDateUpdate"
/>
@@ -43,7 +48,12 @@
:selectedTemplateThumbHtml="selectedTemplateThumbHtml"
:selectedTemplateName="selectedTemplateName"
:selectedStyleName="selectedStyleName"
:availableFields="availableFields"
:fieldsLoading="fieldsLoading"
:fieldsSaving="fieldsSaving"
:selectedFieldIds.sync="selectedFieldIdsProxy"
@open-template-selector="emitOpenTemplateSelector"
@confirm-fields="emitConfirmFields"
@update:wizardStartDate="onWizardStartDateUpdate"
/>
<div class="dialog-footer">
@@ -77,7 +87,11 @@ export default {
selectedTemplateThumbHtml: { type: String, default: '' },
selectedTemplateName: { type: String, default: '' },
selectedStyleName: { type: String, default: '' },
saving: { type: Boolean, default: false }
saving: { type: Boolean, default: false },
availableFields: { type: Array, default: () => [] },
fieldsLoading: { type: Boolean, default: false },
fieldsSaving: { type: Boolean, default: false },
selectedFieldIds: { type: Array, default: () => [] }
},
computed: {
dialogVisible: {
@@ -96,6 +110,14 @@ export default {
this.$emit('update:wizardStartDate', val);
}
},
selectedFieldIdsProxy: {
get() {
return this.selectedFieldIds;
},
set(val) {
this.$emit('update:selectedFieldIds', val);
}
},
canConfirm() {
const id = this.config && this.config.defaultTemplateId != null ? String(this.config.defaultTemplateId) : '';
return id !== '' && id !== '0';
@@ -105,6 +127,9 @@ export default {
emitOpenTemplateSelector() {
this.$emit('open-template-selector');
},
emitConfirmFields() {
this.$emit('confirm-fields');
},
onWizardStartDateUpdate(val) {
// 由内容组件回传日期，继续走父组件的 .sync 链路
this.wizardStartDateProxy = val;

165
src/components/page/components/autoPromotion/AutoPromotionWizardContent.vue
View File

@@ -76,7 +76,34 @@
<section class="form-section">
<h4 class="section-title">
<i class="el-icon-finished"></i> 2. {{ $t('autoPromotion.confirmAndEnable') }}
<i class="el-icon-collection-tag"></i> 2. {{ $t('autoPromotion.selectPromotionFields') }}
<span class="selected-count">
{{ $t('autoPromotion.selectedCount', { count: selectedFieldIdsProxy.length }) }}
</span>
<el-button
size="small"
type="primary"
plain
icon="el-icon-edit-outline"
class="section-action-btn"
@click="fieldDialogVisible = true"
>
{{ $t('autoPromotion.choosePromotionFields') }}
</el-button>
</h4>
<div class="status-confirm-box">
<div v-if="selectedFieldLabels.length" class="selected-tags">
<el-tag v-for="label in selectedFieldLabels" :key="label" size="mini" type="info" effect="plain">{{ label }}</el-tag>
</div>
<div class="field-tip">{{ $t('autoPromotion.selectPromotionFieldsTip') }}</div>
</div>
</section>
<el-divider></el-divider>
<section class="form-section">
<h4 class="section-title">
<i class="el-icon-finished"></i> 3. {{ $t('autoPromotion.confirmAndEnable') }}
</h4>
<div class="status-confirm-box">
@@ -88,19 +115,64 @@
</div>
</section>
</div>
<el-dialog
:title="$t('autoPromotion.selectPromotionFields')"
:visible.sync="fieldDialogVisible"
width="1200px"
append-to-body
:close-on-click-modal="false"
>
<div class="field-dialog-toolbar">
<el-input
v-model="fieldSearchText"
size="small"
clearable
class="field-search-input"
prefix-icon="el-icon-search"
:placeholder="$t('autoPromotion.fieldSearchPlaceholder')"
/>
<el-button size="mini" @click="selectAllFields">{{ $t('autoPromotion.selectAll') }}</el-button>
<el-button size="mini" @click="clearAllFields">{{ $t('autoPromotion.clearAll') }}</el-button>
</div>
<div class="field-dialog-body" v-loading="fieldsLoading">
<el-checkbox-group v-model="selectedFieldIdsProxy" class="field-check-group">
<el-checkbox v-for="f in sortedFilteredFields" :key="String(f.id)" :label="String(f.id)">
{{ f.label }}
</el-checkbox>
</el-checkbox-group>
<div v-if="!fieldsLoading && sortedFilteredFields.length === 0" class="field-empty-tip">
{{ $t('autoPromotion.noFieldMatch') }}
</div>
</div>
<span slot="footer">
<el-button size="small" @click="fieldDialogVisible = false">{{ $t('autoPromotion.cancel') }}</el-button>
<el-button size="small" type="primary" :loading="fieldsSaving" @click="emitConfirmFields">{{ $t('autoPromotion.confirm') }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'AutoPromotionWizardContent',
data() {
return {
fieldSearchText: '',
fieldDialogVisible: false
};
},
props: {
config: { type: Object, required: true },
wizardStartDate: { type: [String, Date], default: '' },
currentJournalName: { type: String, default: '' },
selectedTemplateThumbHtml: { type: String, default: '' },
selectedTemplateName: { type: String, default: '' },
selectedStyleName: { type: String, default: '' }
selectedStyleName: { type: String, default: '' },
availableFields: { type: Array, default: () => [] },
fieldsLoading: { type: Boolean, default: false },
fieldsSaving: { type: Boolean, default: false },
selectedFieldIds: { type: Array, default: () => [] }
},
computed: {
hasSelectedTemplate() {
@@ -109,11 +181,44 @@ export default {
},
displayTemplateName() {
return this.selectedTemplateName || (this.hasSelectedTemplate ? String(this.config.defaultTemplateId) : '');
},
selectedFieldIdsProxy: {
get() {
return this.selectedFieldIds;
},
set(val) {
this.$emit('update:selectedFieldIds', val);
}
},
sortedFilteredFields() {
const kw = (this.fieldSearchText || '').trim().toLowerCase();
const list = (this.availableFields || []).filter((item) => {
if (!kw) return true;
return String(item.label || '').toLowerCase().includes(kw);
});
return list.slice().sort((a, b) => String(a.label || '').localeCompare(String(b.label || '')));
},
selectedFieldLabels() {
const map = {};
(this.availableFields || []).forEach((i) => { map[String(i.id)] = i.label; });
return (this.selectedFieldIdsProxy || [])
.map((id) => map[String(id)])
.filter(Boolean);
}
},
methods: {
emitOpenTemplateSelector() {
this.$emit('open-template-selector');
},
selectAllFields() {
this.selectedFieldIdsProxy = (this.availableFields || []).map((f) => String(f.id));
},
clearAllFields() {
this.selectedFieldIdsProxy = [];
},
emitConfirmFields() {
this.$emit('confirm-fields');
this.fieldDialogVisible = false;
}
}
};
@@ -192,6 +297,9 @@ export default {
color: #409EFF;
font-size: 18px;
}
.section-action-btn {
margin-left: 0;
}
/* 优化后的模板选择框 */
.template-placeholder.mini-mode {
@@ -406,5 +514,58 @@ export default {
display: flex;
gap: 30px;
}
.field-check-group {
display: grid;
grid-template-columns: repeat(4, minmax(180px, 1fr));
gap: 8px 14px;
margin-bottom: 10px;
}
.field-dialog-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.field-search-input {
width: 320px;
}
.field-choose-row {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 10px;
}
.selected-count {
font-size: 13px;
color: #606266;
margin-left: auto;
margin-right: 10px;
}
.selected-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.field-dialog-body {
max-height: none;
overflow: visible;
}
.field-empty-tip {
font-size: 12px;
color: #909399;
margin-bottom: 8px;
}
.field-check-group >>> .el-checkbox {
margin-right: 0;
line-height: 20px;
}
.field-check-group >>> .el-checkbox__label {
font-size: 13px;
}
.field-tip {
font-size: 12px;
color: #909399;
}
</style>

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

@@ -1,180 +1,249 @@
<template>
<div class="tmr-editor-container">
<div class="editor-header">
<span class="title"></span>
<button @click="showModal = true" class="preview-trigger-btn">
<i class="icon-eye"></i> {{ $t('tmrEmailEditor.preview') }}
</button>
<div class="tmr-editor-container">
<div class="editor-header">
<div class="title-slot">
<slot name="title"></slot>
</div>
<textarea
maxlength="-1"
:value="plainText"
@input="handleInput"
:placeholder="resolvedPlaceholder"
class="tmr-textarea"
></textarea>
<transition name="fade">
<div v-if="showModal" class="tmr-modal-mask" @click.self="showModal = false">
<div class="tmr-modal-container">
<div class="modal-header">
<span>{{ $t('tmrEmailEditor.preview') }}</span>
<button class="close-btn" @click="showModal = false">&times;</button>
</div>
<div class="modal-body">
<div class="common_tmr_email_box" v-html="htmlContentForPreview"></div>
</div>
<button @click="showModal = true" class="preview-trigger-btn">
<i class="icon-eye"></i> {{ $t('tmrEmailEditor.preview') || '预览' }}
</button>
</div>
<textarea
ref="editorRef"
class="tmr-textarea"
:value="plainText"
@input="handleInput"
:placeholder="resolvedPlaceholder"
></textarea>
<transition name="fade">
<div v-if="showModal" class="tmr-modal-mask" @click.self="showModal = false">
<div class="tmr-modal-container">
<div class="modal-header">
<span>{{ $t('tmrEmailEditor.preview') || '邮件预览' }}</span>
<button class="close-btn" @click="showModal = false">&times;</button>
</div>
<div class="modal-body">
<div class="common_tmr_email_box" v-html="htmlContentForPreview"></div>
</div>
<div class="modal-footer">
<button class="confirm-btn" @click="showModal = false">关闭</button>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'TmrEmailEditor',
props: {
value: { type: String, default: '' },
placeholder: { type: String, default: '' }
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'TmrEmailEditor',
props: {
// 预期格式: <div class="common_tmr_email_box">内容...</div>
value: {
type: String,
default: ''
},
data() {
return {
showModal: false // 控制弹窗显示
}
placeholder: {
type: String,
default: ''
}
},
data() {
return {
showModal: false
}
},
computed: {
resolvedPlaceholder() {
return this.placeholder || (this.$t && this.$t('tmrEmailEditor.placeholder')) || '请输入邮件内容...';
},
computed: {
resolvedPlaceholder() {
return this.placeholder || this.$t('tmrEmailEditor.placeholder');
},
plainText() {
if (!this.value) return '';
var inner = this.extractInnerContent(this.value);
return inner.replace(/<br\s*\/?>/gi, '\n');
},
htmlContentForPreview() {
if (!this.value) return '';
return this.extractInnerContent(this.value);
}
// 将传入的 HTML 还原为 textarea 可读的纯文本
plainText() {
if (!this.value) return '';
return this.extractContent(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>');
const finalResult = `<div class="common_tmr_email_box">${htmlContent}</div>`;
this.$emit('input', finalResult);
}
// 用于预览的 HTML，保持与输出一致
htmlContentForPreview() {
return this.value || '';
}
},
methods: {
/**
* 核心：剥离外层容器和换行符
* 将 <div class="...">line1<br>line2</div> 还原为 line1\nline2
*/
extractContent(html) {
if (!html) return '';
// 1. 匹配最外层 div 内部的内容
const wrapperRegex = /<div class="common_tmr_email_box">([\s\S]*)<\/div>/i;
const match = html.match(wrapperRegex);
let content = match ? match[1] : html;
// 2. 将 <br> 或 <br /> 替换为换行符 \n
content = content.replace(/<br\s*\/?>/gi, '\n');
// 3. (可选) 如果还有其他标签可以进一步清洗，目前保持原样
return content;
},
/**
* 输入处理：实时包装并提交
*/
handleInput(e) {
const text = e.target.value;
// 将换行符转回 HTML 换行
const htmlContent = text.replace(/\n/g, '<br>');
// 包装外层容器
const finalResult = `<div class="common_tmr_email_box">${htmlContent}</div>`;
// 触发 v-model 更新
this.$emit('input', finalResult);
}
}
</script>
<style scoped>
/* 1. 基础布局 */
.tmr-editor-container { width: 100%; position: relative; }
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.preview-trigger-btn {
background: #f0f2f5;
border: 1px solid #dcdfe6;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
color: #606266;
font-size: 13px;
}
.preview-trigger-btn:hover { color: #409eff; border-color: #c6e2ff; background: #ecf5ff; }
.tmr-textarea {
width: 100%;
min-height: 70vh;
padding: 15px;
border: 1px solid #e4e7ed;
border-radius: 4px;
font-size: 14px;
line-height: 1.6;
box-sizing: border-box;
resize: vertical;
}
/* 2. 弹窗动画 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter, .fade-leave-to { opacity: 0; }
/* 3. 弹窗样式 */
.tmr-modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.tmr-modal-container {
width: 1000px;
max-width: 90%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
overflow: hidden;
}
.modal-header {
padding: 15px 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
font-weight: bold;
}
.close-btn { border: none; background: none; font-size: 20px; cursor: pointer; color: #909399; }
.modal-body {
padding: 20px;
min-height: 200px;
max-height: 75vh;
overflow-y: auto;
text-align: left;
}
.modal-footer {
padding: 10px 20px;
border-top: 1px solid #eee;
text-align: right;
}
.confirm-btn {
background: #409eff;
color: #fff;
border: none;
padding: 8px 20px;
border-radius: 4px;
cursor: pointer;
}
/* 确保预览区域样式正确渲染 */
.common_tmr_email_box {
word-break: break-all;
line-height: 1.6;
}
</style>
}
</script>
<style scoped>
/* 1. 基础布局 */
.tmr-editor-container {
width: 100%;
position: relative;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
}
.preview-trigger-btn {
background: #fff;
border: 1px solid #dcdfe6;
padding: 6px 15px;
border-radius: 4px;
cursor: pointer;
color: #606266;
font-size: 13px;
transition: all 0.2s;
}
.preview-trigger-btn:hover {
color: #409eff;
border-color: #c6e2ff;
background: #ecf5ff;
}
/* 2. 编辑器样式 */
.tmr-textarea {
width: 100%;
min-height: 400px;
padding: 15px;
border: 1px solid #e4e7ed;
border-radius: 4px;
font-size: 14px;
line-height: 1.6;
box-sizing: border-box;
resize: vertical;
outline: none;
color: #333;
}
.tmr-textarea:focus {
border-color: #409eff;
}
/* 3. 弹窗动画 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter, .fade-leave-to { opacity: 0; }
/* 4. 弹窗样式 */
.tmr-modal-mask {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.tmr-modal-container {
width: 800px;
max-width: 90%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #303133;
}
.close-btn {
border: none;
background: none;
font-size: 24px;
cursor: pointer;
color: #909399;
line-height: 1;
}
.close-btn:hover { color: #f56c6c; }
.modal-body {
padding: 30px;
min-height: 300px;
max-height: 70vh;
overflow-y: auto;
background-color: #fafafa; /* 模拟邮件阅读背景 */
}
/* 模拟邮件内容容器样式 */
.common_tmr_email_box {
background: #fff;
padding: 20px;
border: 1px solid #eee;
word-break: break-word;
line-height: 1.6;
white-space: pre-wrap; /* 保证换行显示 */
min-height: 100px;
}
.modal-footer {
padding: 12px 20px;
border-top: 1px solid #f0f0f0;
text-align: right;
}
.confirm-btn {
background: #409eff;
color: #fff;
border: none;
padding: 8px 24px;
border-radius: 4px;
cursor: pointer;
}
.confirm-btn:hover { background: #66b1ff; }
</style>

511
src/components/page/crawlTaskMonitor.vue Normal file
View File

@@ -0,0 +1,511 @@
<template>
<div class="monitor-container">
<div class="control-panel">
<div class="panel-left">
<el-radio-group v-model="filterStatus" size="small" class="status-group" @change="handleFilter">
<el-radio-button label="">{{ $t('crawlTask.allKeywords') }}</el-radio-button>
<el-radio-button label="0">{{ $t('crawlTask.enabled') }}</el-radio-button>
<el-radio-button label="1">{{ $t('crawlTask.disabled') }}</el-radio-button>
</el-radio-group>
<el-input
v-model="searchText"
:placeholder="$t('crawlTask.searchPlaceholder')"
prefix-icon="el-icon-search"
size="small"
class="search-box"
clearable
@input="handleFilter"
/>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="handleSearchClick"
>
{{ $t('crawlTask.searchBtn') }}
</el-button>
</div>
<div class="panel-right">
<el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">{{ $t('crawlTask.addKeyword') }}</el-button>
</div>
</div>
<el-dialog
:title="$t('crawlTask.addKeyword')"
:visible.sync="addDialogVisible"
width="500px"
:close-on-click-modal="false"
@closed="resetAddForm"
>
<el-form label-width="120px" size="small">
<el-form-item :label="$t('crawlTask.keyword')">
<el-input
v-model="addForm.field"
:placeholder="$t('crawlTask.keywordPlaceholder')"
clearable
/>
</el-form-item>
<el-form-item :label="$t('crawlTask.runOnce')">
<el-switch
v-model="addForm.runNow"
:active-text="$t('crawlTask.yes')"
:inactive-text="$t('crawlTask.no')"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="addDialogVisible = false">{{ $t('crawlTask.cancel') }}</el-button>
<el-button type="primary" size="small" :loading="addLoading" @click="submitAddKeyword">
{{ $t('crawlTask.confirm') }}
</el-button>
</span>
</el-dialog>
<div v-loading="loading" class="task-list">
<el-empty v-if="list.length === 0" :description="$t('crawlTask.emptyResult')" />
<div v-for="item in list" :key="item.id" class="task-row" :class="'status-' + item.stateClass">
<div class="col-base">
<div class="status-dot"></div>
<div class="id-info">
<span class="task-id">#{{ item.id}}</span>
<span class="task-name">{{ item.task_name }}</span>
</div>
</div>
<div class="col-metrics">
<div class="metric-item">
<span class="m-label">{{ $t('crawlTask.source') }}</span>
<span class="m-value mini-text">{{ item.source }}</span>
</div>
<div class="metric-item highlight">
<span class="m-label">{{ $t('crawlTask.totalPages') }}</span>
<span class="m-value">{{ item.total_pages }}</span>
</div>
<div class="metric-item highlight">
<span class="m-label">{{ $t('crawlTask.crawledPages') }}</span>
<span class="m-value">{{ item.last_page }}</span>
</div>
<div class="metric-item highlight">
<span class="m-label">{{ $t('crawlTask.expertCountLabel') }}</span>
<span class="m-value expert-num">{{ item.expert_count }}</span>
</div>
</div>
<div class="col-timeline">
<div class="time-block">
<i class="el-icon-time"></i>
<div class="time-detail">
<span>{{ $t('crawlTask.created') }}: {{ item.create_time }}</span>
<span :class="item.state === 'done' ? 'success-text' : ''">
{{ item.state === 'done' ? $t('crawlTask.completed') : $t('crawlTask.updated') }}: {{ item.update_time }}
</span>
</div>
</div>
<div class="duration-tag" v-if="item.duration">
<i class="el-icon-odometer"></i> {{ item.duration }}
</div>
</div>
<div class="col-action">
<div class="prog-box">
<span class="prog-num">{{ item.progress }}%</span>
<el-progress
:percentage="item.progress"
:show-text="false"
:stroke-width="4"
:status="item.state === 'error' ? 'exception' : (item.state === 'done' ? 'success' : '')"
/>
</div>
<div class="btn-group">
<!-- <el-tooltip content="查看日志" placement="top">
<el-button type="text" icon="el-icon-document" @click="handleAction('logs', item)"></el-button>
</el-tooltip> -->
<!-- <el-tooltip content="执行单次抓取" placement="top" > -->
<el-button
type="text"
:icon="runOnceLoadingId === item.id ? 'el-icon-loading' : 'el-icon-finished'"
class="op-run-once"
:disabled="runOnceLoadingId === item.id"
@click="handleRunOnce(item)"
>{{ runOnceLoadingId === item.id ? $t('crawlTask.runOnceLoading') : $t('crawlTask.runOnceBtn') }}</el-button>
<!-- </el-tooltip> -->
<!-- <el-tooltip :content="item.state == 'running' ? '暂停抓取' : '恢复抓取'" placement="top"> -->
<el-button
type="text"
:icon="item.state === 'running' ? 'el-icon-video-pause' : 'el-icon-video-play'"
:class="['toggle-btn', item.state === 'running' ? 'op-pause' : 'op-resume']"
@click="handleToggleTask(item)"
>{{ item.state === 'running' ? $t('crawlTask.disabled') : $t('crawlTask.enabled') }}</el-button>
<!-- </el-tooltip> -->
</div>
</div>
</div>
</div>
<div class="pagination-container">
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="currentPage"
:page-size="pageSize"
:page-sizes="[5, 10, 20, 50]"
:total="total"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
searchText: '',
filterStatus: '',
currentPage: 1,
pageSize: 10,
total: 0,
list: [],
addDialogVisible: false,
addLoading: false,
runOnceLoading: false,
runOnceLoadingId: null,
addForm: {
field: '',
runNow: false
}
};
},
created() {
this.fetchList();
},
methods: {
calcProgress(lastPage, totalPages) {
const current = Number(lastPage || 0);
const total = Number(totalPages || 0);
if (total <= 0) return 0;
let percent = (current / total) * 100;
if (percent > 100) percent = 100;
return Number(percent.toFixed(2));
},
normalizeItem(item) {
const totalPages = Number(item.total_pages || 0);
const lastPage = Number(item.last_page || 0);
const percent = this.calcProgress(lastPage, totalPages);
const stateNum = Number(item.state);
const stateClass = stateNum === 0 ? 'running' : 'paused';
const source = (item.source || '').toUpperCase() === 'PUBMED' ? 'PubMed' : (item.source || '-');
return {
id: item.expert_fetch_id || item.id || 0,
field: item.field || '',
expert_count: item.expert_count || 0,
task_name: item.field ? `${item.field}`:'-',
source,
state: stateClass,
stateClass,
progress: percent,
create_time: item.ctime_text || '-',
update_time: item.last_time_text || '-',
duration: '',
total_pages: Number(item.total_pages || 0),
last_page: Number(item.last_page || 0),
duplicates: 0,
failed: 0
};
},
async fetchList() {
this.loading = true;
try {
const params = {
keyword: this.searchText || '',
pageIndex: this.currentPage,
pageSize: this.pageSize
};
if (this.filterStatus !== '') {
params.state = this.filterStatus;
}
const res = await this.$api.post('api/expert_manage/getFetchList', params);
if (res && res.code === 0 && res.data) {
const rows = res.data.list || [];
this.list = rows.map(this.normalizeItem);
this.total = Number(res.data.total || rows.length || 0);
} else {
this.list = [];
this.total = 0;
}
} catch (e) {
this.list = [];
this.total = 0;
} finally {
this.loading = false;
}
},
handleFilter() {
this.currentPage = 1;
this.fetchList();
},
handleSearchClick() {
this.handleFilter();
},
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.fetchList();
},
handlePageChange(val) {
this.currentPage = val;
this.fetchList();
window.scrollTo({ top: 0, behavior: 'smooth' });
},
resetQuery() {
this.searchText = '';
this.filterStatus = '';
this.currentPage = 1;
this.fetchList();
},
openAddDialog() {
this.addDialogVisible = true;
},
resetAddForm() {
this.addLoading = false;
this.runOnceLoading = false;
this.addForm = {
field: '',
runNow: false
};
},
async submitAddKeyword() {
const field = (this.addForm.field || '').trim();
if (!field) {
this.$message.warning(this.$t('crawlTask.enterKeyword'));
return;
}
const runNow = !!this.addForm.runNow;
this.addLoading = true;
try {
const addRes = await this.$api.post('api/expert_manage/addFetchField', { field });
if (!addRes || addRes.code !== 0) {
this.$message.error((addRes && addRes.msg) || this.$t('crawlTask.addKeywordFailed'));
return;
}
this.$message.success(this.$t('crawlTask.addKeywordSuccess'));
this.addDialogVisible = false;
this.currentPage = 1;
await this.fetchList();
if (runNow) {
// 勾选“单次抓取”时，在列表对应行按钮上显示 loading
const lowerField = field.toLowerCase();
const target = this.list.find(
(row) => ((row.field || '').trim().toLowerCase() === lowerField)
);
this.runOnceLoading = true;
this.runOnceLoadingId = target ? target.id : null;
const runRes = await this.$api.post('api/expert_finder/fetchOneField', { field });
if (!runRes || runRes.code !== 0) {
this.$message.warning((runRes && runRes.msg) || this.$t('crawlTask.runOnceFailed'));
} else {
this.$message.success(this.$t('crawlTask.runOnceSuccess'));
}
await this.fetchList();
}
} catch (e) {
this.$message.error(this.$t('crawlTask.operationRetry'));
} finally {
this.addLoading = false;
this.runOnceLoading = false;
this.runOnceLoadingId = null;
this.loading = false;
}
},
async handleToggleTask(item) {
const isRunning = item.state === 'running';
const newState = isRunning ? '1' : '0';
try {
this.loading = true;
const res = await this.$api.post('api/expert_manage/editFetchField', {
expert_fetch_id: item.id,
state: newState
});
if (res && res.code === 0) {
item.state = isRunning ? 'paused' : 'running';
item.stateClass = item.state;
this.$message.success(isRunning ? this.$t('crawlTask.disabledMsg') : this.$t('crawlTask.enabledMsg'));
} else {
this.$message.error((res && res.msg) || (isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed')));
}
} catch (e) {
this.$message.error(isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed'));
} finally {
this.loading = false;
}
},
handleRestart(item) {
item.state = 'running';
item.stateClass = 'running';
item.progress = 0;
this.$message.success(this.$t('crawlTask.restartSuccess'));
},
async handleRunOnce(item) {
const field = (item.field || item.task_name || '').trim();
if (!field) {
this.$message.warning(this.$t('crawlTask.missingKeyword'));
return;
}
this.runOnceLoadingId = item.id;
try {
const res = await this.$api.post('/api/expert_finder/fetchOneField', { field });
if (res && res.code === 0) {
this.$message.success(this.$t('crawlTask.runOnceSuccess'));
await this.fetchList();
} else {
this.$message.error((res && res.msg) || this.$t('crawlTask.runOnceFailed'));
}
} catch (e) {
this.$message.error(this.$t('crawlTask.runOnceFailed'));
} finally {
this.runOnceLoadingId = null;
}
},
handleAction(msg, item) {
if (msg === 'logs') {
this.$message.info(`${this.$t('crawlTask.viewLogs')}: #${item.id}`);
return;
}
this.$message.info(msg);
}
}
};
</script>
<style scoped>
.monitor-container {
padding:0px 20px;
background: #f4f7f9;
min-height: 100vh;
color: #334155;
}
/* 统计卡片 */
.stat-overview { display: flex; gap: 16px; margin-bottom: 24px; }
.stat-card {
background: #fff;
padding: 16px 20px;
border-radius: 8px;
flex: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
border-top: 3px solid #0a3088; /* 呼应你偏好的深蓝色 */
}
.stat-val { font-size: 22px; font-weight: bold; color: #0a3088; display: block; }
.stat-label { font-size: 12px; color: #64748b; margin-top: 4px; }
/* 过滤工具栏 */
.control-panel {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
background: #fff;
padding: 12px;
border-radius: 8px;
align-items: center;
}
.panel-left { display: flex; align-items: center; gap: 12px; }
.search-box { width: 200px; }
.date-picker { width: 240px !important; }
/* 任务行核心样式 */
.task-list { min-height: 400px; }
.task-row {
background: #fff;
margin-bottom: 8px;
border-radius: 6px;
display: flex;
align-items: center;
padding: 12px 20px;
transition: all 0.2s;
border: 1px solid transparent;
}
.status-paused {
background: #f3f4f6;
}
.task-row:hover {
border-color: #cbd5e1;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
/* 列定义 */
.col-base { flex: 1.5; display: flex; align-items: center; gap: 15px; }
.col-metrics { flex: 2; display: flex; justify-content: space-around; border-left: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; }
.col-timeline { flex: 1.1; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; }
.col-action { flex:1.8; display: flex; align-items: center; gap: 15px; }
/* 状态点 */
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; position: relative; }
.status-dot { width: 10px; height: 10px; }
.status-running .status-dot { background: #3b82f6; }
.status-running .status-dot::after {
content: ''; position: absolute; width: 100%; height: 100%; background: inherit;
border-radius: 50%; animation: pulse 1.5s infinite;
}
.status-done .status-dot { background: #10b981; }
.status-paused .status-dot { background: #ef4444; }
.status-error .status-dot { background: #ef4444; }
/* 文字样式 */
.task-id { font-family: monospace; color: #94a3b8; font-size: 12px; display: block; }
.task-name { font-weight: 600; font-size: 14px; color: #1e293b; }
.metric-item { text-align: center; }
.m-label { font-size: 11px; color: #94a3b8; display: block; margin-bottom: 2px; }
.m-value { font-size: 16px; font-weight: bold; color: #475569; }
.m-value.mini-text { font-size: 12px; font-weight: normal; }
.m-value.expert-num { color: #006699; }
.success-text { color: #10b981; }
.danger { color: #ef4444; }
/* 时间线样式 */
.time-block { display: flex; align-items: center; gap: 10px; color: #64748b; font-size: 12px; }
.time-block i { font-size: 16px; }
.time-detail span { display: block; line-height: 1.4; }
.duration-tag { background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #475569; }
/* 进度与分页 */
.prog-box { flex: 1; }
.prog-num { font-size: 12px; font-weight: bold; display: block; text-align: right; margin-bottom: 4px; min-width: 56px; }
.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; padding: 10px; }
.btn-group .el-button.op-pause,
.btn-group .el-button.op-pause i { color: #fc4d4d !important; }
.btn-group .el-button.op-resume,
.btn-group .el-button.op-resume i { color: #67c23a !important; }
.btn-group .el-button.op-restart,
.btn-group .el-button.op-restart i { color: #409eff !important; }
.btn-group .el-button.op-run-once,
.btn-group .el-button.op-run-once i { color: #006699 !important; }
.btn-group .el-button {
font-size: 20px;
padding: 6px;
}
.btn-group .el-button.op-run-once {
font-size: 13px;
padding: 4px 6px;
}
.btn-group .el-button.toggle-btn {
font-size: 13px;
padding: 4px 6px;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(2.5); opacity: 0; }
}
</style>

26
src/components/page/expertDatabase.vue
View File

@@ -29,6 +29,15 @@
style="width: 260px"
/>
</el-form-item>
<el-form-item label="">
<el-input
v-model="query.field"
:placeholder="$t('expertDatabase.fieldPlaceholder')"
clearable
style="width: 260px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">
@@ -107,6 +116,7 @@ export default {
query: {
major_id: null,
keyword: '',
field: '',
pageIndex: 1,
pageSize: 10
},
@@ -167,6 +177,7 @@ export default {
const params = {
major_id: this.query.major_id,
keyword: this.query.keyword,
field: this.query.field,
pageIndex: this.query.pageIndex,
pageSize: this.query.pageSize
};
@@ -202,6 +213,7 @@ export default {
this.query = {
major_id: null,
keyword: '',
field: '',
pageIndex: 1,
pageSize: 10
};
@@ -217,7 +229,7 @@ export default {
this.fetchList();
},
async handleExport() {
if (!this.query.major_id && !this.query.keyword) {
if (!this.query.major_id && !this.query.keyword && !this.query.field) {
this.$message.warning(this.$t('expertDatabase.exportWarn'));
return;
}
@@ -225,7 +237,8 @@ export default {
try {
const params = {
major_id: this.query.major_id,
keyword: this.query.keyword
keyword: this.query.keyword,
field: this.query.field
};
const res = await this.$api.post('api/expert_manage/exportExcel', params);
if (res && res.code === 0 && res.data && res.data.file_url) {
@@ -259,6 +272,11 @@ export default {
margin: 0 20px;
margin-left: 0;
}
.form-line-break {
flex-basis: 100%;
width: 100%;
height: 0;
}
.actions {
white-space: nowrap;
}
@@ -269,11 +287,11 @@ export default {
margin-top: 15px;
text-align: right;
}
/deep/ .dark-table-header th {
::v-deep .dark-table-header th {
background-color: #f5f7fa;
font-weight: 600;
}
/deep/ .el-form-item--mini.el-form-item,
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0;
}

1
src/components/page/mailboxMould.vue
View File

@@ -395,5 +395,6 @@ export default {
padding: 10px;
border: 1px solid #eee;
background: #fff;
box-sizing: border-box;
}
</style>