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

tijiao

Browse Source
This commit is contained in:
始于初见
2026-05-28 15:04:54 +08:00
parent 7e8d367b82
commit ed498040ba
12 changed files with 606 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -625,6 +625,9 @@ const en = {
versionPlaceholder: '1.0.0',
bodyEdit: 'Body editor',
activeStatus: 'Active',
insertVariable: 'Copy variable',
copyVariableSuccess: 'Copied {token}',
copyVariableFail: 'Copy failed, please copy manually',
variablesJson: 'Variables (JSON)',
variablesPlaceholder: '{"name": "string"}',
previewTab: 'Preview',

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

@@ -614,6 +614,9 @@ const zh = {
versionPlaceholder: '1.0.0',
bodyEdit: '正文编辑',
activeStatus: '激活状态',
insertVariable: '复制变量',
copyVariableSuccess: '已复制 {token}',
copyVariableFail: '复制失败，请手动复制',
variablesJson: '动态变量 (JSON)',
variablesPlaceholder: '{"name": "string"}',
previewTab: '预览窗口',

257
src/components/page/components/Tinymce/index.vue
View File

@@ -129,17 +129,14 @@ export default {
},
watch: {
value: {
handler(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() => {
window.tinymce.get(this.tinymceId).setContent(val);
});
}
},
immediate: true
if (!this.hasChange && this.hasInit) {
this.$nextTick(() => {
window.tinymce.get(this.tinymceId).setContent(val);
});
}
},
immediate: true
}
},
mounted() {
@@ -487,7 +484,10 @@ export default {
if (!this.isPlainLatexText(normalized)) return '';
const lines = normalized.split(/\n/).map((l) => l.trim()).filter(Boolean);
const lines = normalized
.split(/\n/)
.map((l) => l.trim())
.filter(Boolean);
if (lines.length > 1 && lines.every((l) => this.isPlainLatexText(l))) {
return lines.map((l) => this.createWmathHtml(l, this.resolveWmathWrapMode(l))).join('');
}
@@ -531,68 +531,86 @@ export default {
return new Blob([u8arr], { type: mime });
},
formatHtml(val) {
const rawValue = val || ''; // 处理 null
const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
const removeBr = /<br\s*\/?>/gi; // 移除所有 br 标签
const rawValue = val || ''; // 处理 null
const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
const removeBr = /<br\s*\/?>/gi; // 移除所有 br 标签
if (rawValue.includes('wordTableHtml')) {
const parser = new DOMParser();
const doc = parser.parseFromString(rawValue, 'text/html');
const cells = doc.querySelectorAll('td, th');
cells.forEach((cell) => {
cell.innerHTML = cell.innerHTML
.replace(cleanEmptyTags, '')
.replace(removeBr, '') // 针对你“不想要br”的需求
.replace(replaceSpaces, '&nbsp;');
});
return doc.body.innerHTML;
} else {
return rawValue
.replace(cleanEmptyTags, '')
.replace(removeBr, '')
.replace(replaceSpaces, '&nbsp;');
}
},
getSafeContent(val) {
const rawValue = val || '';
const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
if (rawValue.includes('wordTableHtml')) {
const parser = new DOMParser();
const doc = parser.parseFromString(rawValue, 'text/html');
const cells = doc.querySelectorAll('td, th');
const escapeIllegalLT = (str) => {
return str.replace(/<(?!(\/?(p|div|span|table|tr|td|th|b|i|strong|em|ul|ol|li|br|img|myh3|myfigure|mytable|wmath)))/gi, '&lt;');
};
cells.forEach((cell) => {
cell.innerHTML = cell.innerHTML
.replace(cleanEmptyTags, '')
.replace(removeBr, '') // 针对你“不想要br”的需求
.replace(replaceSpaces, '&nbsp;');
});
return doc.body.innerHTML;
} else {
return rawValue.replace(cleanEmptyTags, '').replace(removeBr, '').replace(replaceSpaces, '&nbsp;');
}
},
getSafeContent(val) {
const rawValue = val || '';
const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
let processedHtml = '';
const escapeIllegalLT = (str) => {
return str.replace(
/<(?!(\/?(p|div|span|table|tr|td|th|b|i|strong|em|ul|ol|li|br|img|myh3|myfigure|mytable|wmath)))/gi,
'&lt;'
);
};
if (rawValue.includes('wordTableHtml')) {
const parser = new DOMParser();
const doc = parser.parseFromString(rawValue, 'text/html');
const cells = doc.querySelectorAll('td, th');
let processedHtml = '';
cells.forEach((cell) => {
let cellText = cell.innerHTML;
cell.innerHTML = cellText
.replace(cleanEmptyTags, '')
.replace(replaceSpaces, '&nbsp;');
});
processedHtml = doc.body.innerHTML;
} else {
processedHtml = rawValue
.replace(cleanEmptyTags, '')
.replace(replaceSpaces, '&nbsp;');
}
if (rawValue.includes('wordTableHtml')) {
const parser = new DOMParser();
const doc = parser.parseFromString(rawValue, 'text/html');
const cells = doc.querySelectorAll('td, th');
return processedHtml;
},
cells.forEach((cell) => {
let cellText = cell.innerHTML;
cell.innerHTML = cellText.replace(cleanEmptyTags, '').replace(replaceSpaces, '&nbsp;');
});
processedHtml = doc.body.innerHTML;
} else {
processedHtml = rawValue.replace(cleanEmptyTags, '').replace(replaceSpaces, '&nbsp;');
}
return processedHtml;
},
parseWordLinearTextToStandardLatex(text) {
let result = text;
// 🌟 动态特征一：修复分式与包裹大括号（如把 13(...) 转换为 \frac{1}{3}\left( ... \right)）
// 通过捕捉连续的两位数字和紧跟的括号，不管它是 12 还是 13 还是 25，动态拆分为分子分母
result = result.replace(/^(\d)(\d)\s*\(([\s\S]+)\)$/g, '\\frac{$1}{$2}\\left( $3 \\right)');
// 🌟 动态特征二：学术公式多变量复合下标高精度自动恢复（如 MIi 变成 \widehat{\text{MI}}_i）
// 抽象规律：大写字母组成的复合单词（代表一个统计变量），后面紧跟着一个用于做索引循环的小写字母（如 i, j, k, n）
// 我们用正则边界 \b 精准识别这种大小写交替的数学边界，动态完成 \text 包裹和 _ 下标追加
result = result.replace(/\b([A-Z]{2,})([ijkmn])\b/g, '\\widehat{\\text{$1 exterior_flag}}_$2');
result = result.replace(/ exterior_flag/g, ''); // 清理临时标记
// 🌟 动态特征三：单字母变量的帽子与下标高精度自动恢复（如 Fi 变成 \widehat{\text{F}}_i）
// 抽象规律：单个大写字母后面紧跟单个小写字母索引。同时通过排除机制 (?!SGMS) 确保左边的复合变量不被错误套上帽子
result = result.replace(/\b(?!SGMS)([A-Z])([ijkmn\d])\b/g, '\\widehat{\\text{$1 single_flag}}_$2');
result = result.replace(/ single_flag/g, '');
// 🌟 动态特征四：左侧纯主变量的普通下标处理（如 SGMSi 变成 \text{SGMS}_i，不需要加帽子）
// 匹配任何在等号左侧或独立区域的、不需要戴帽子的复合纯文本下标变量
result = result.replace(/\b([A-Z]{3,})([ijkmn\d])\b/g, '\\text{$1}_$2');
// 🌟 动态特征五：基础数学连字符规范化
result = result.replace(/\s*\*\s*/g, ' \\cdot ');
return result;
},
initTinymce() {
var _this = this;
window.tinymce.init({
..._this.tinymceOtherInit,
@@ -765,6 +783,56 @@ export default {
ed.on('paste', async (event) => {
const rtf = event.clipboardData.getData('text/rtf');
console.log('🚀 ~ setup ~ rtf:', rtf);
let plainText = event.clipboardData.getData('text/plain') || '';
// ========================================================
// 1. 【通用公式内核判定】—— 绝不绑定任何具体公式的字母
// ========================================================
// 只要 RTF 中包含微软 Office 原生公式对象标记（objdata / mmath / object），
// 并且纯文本里有数学等号，说明当前用户复制的 100% 是一个公式对象，而不是普通插图！
const isWordFormulaObject =
rtf.includes('\\rtf') &&
(rtf.includes('objdata') || rtf.includes('\\mmath') || rtf.includes('\\object')) &&
plainText.includes('=');
if (isWordFormulaObject) {
// 【第一步：绝对截胡断流】
// 强行扼杀浏览器的默认粘贴行为，并阻止事件冒泡。
// 这会使下方原本属于普通插图的图片转换、接口上传、绿色进度条等代码直接被彻底绕过！
event.preventDefault();
event.stopPropagation();
let finalLatex = '';
// 如果用户复制时，纯文本里已经带有标准 LaTeX 控制符了（比如 \frac, \hat 等）
if (/\\frac|\\hat|\\sqrt|\\alpha/i.test(plainText)) {
finalLatex = plainText.trim();
}
// 【核心动态翻译引擎】如果拿到的只是被 Word 阉割后的线性纯文本，
// 我们基于通用的“数学结构特征”进行全自动高保真翻译，不写死任何具体的变量名！
else if (plainText.trim()) {
finalLatex = parseWordLinearTextToStandardLatex(plainText.trim());
}
// ========================================================
// 【高保真 LaTeX 公式注入】
// ========================================================
if (finalLatex) {
// 清洗掉首尾可能重复的 $ 符号
finalLatex = finalLatex.replace(/^(\$\$?)|(\$\$?)$/g, '').trim();
// 包装成标准的块级公式
const latexContainer = `$$${finalLatex}$$`;
ed.insertContent(latexContainer);
console.log('【通用架构级公式转换成功】:', latexContainer);
}
return; // 【绝杀】直接中断整个 paste 函数，下面你原有的图片代码直接气化，绝不触发上传！
}
if (rtf && rtf.includes('\\pict')) {
const extracted = extractHexImagesFromRTF(rtf);
_this.totalUploadImages = extracted.length; // 设置总数
@@ -830,40 +898,36 @@ export default {
}
});
ed.on('init', function () {
_this.editorInstance = ed;
_this.hasInit = true;
_this.$commonJS.inTinymceButtonClass();
if (_this.isAutomaticUpdate) {
_this.$emit('updateChange', _this.value);
_this.editorInstance = ed;
_this.hasInit = true;
_this.$commonJS.inTinymceButtonClass();
if (_this.isAutomaticUpdate) {
_this.$emit('updateChange', _this.value);
}
_this.content = _this.getSafeContent(_this.value);
_this.handleSetContent(_this.content || '');
}
_this.content = _this.getSafeContent(_this.value);
// 3. 监听内容变化
ed.on('NodeChange Change KeyUp SetContent', () => {
_this.hasChange = true;
_this.$emit('input', ed.getContent({ format: 'raw' }));
});
_this.handleSetContent(_this.content || '');
// 4. 监听 DOM 变化
const observer = new MutationObserver(() => {
const currentContent = ed.getContent({ format: 'raw' });
if (_this.isAutomaticUpdate) {
_this.$emit('updateChange', currentContent);
}
});
// 3. 监听内容变化
ed.on('NodeChange Change KeyUp SetContent', () => {
_this.hasChange = true;
_this.$emit('input', ed.getContent({ format: 'raw' }));
});
// 4. 监听 DOM 变化
const observer = new MutationObserver(() => {
const currentContent = ed.getContent({ format: 'raw' });
if (_this.isAutomaticUpdate) {
_this.$emit('updateChange', currentContent);
}
});
observer.observe(ed.getBody(), {
childList: true,
subtree: true,
characterData: true
});
});
observer.observe(ed.getBody(), {
childList: true,
subtree: true,
characterData: true
});
});
// 定义自定义按钮
ed.ui.registry.addButton('customButtonExportWord', {
@@ -921,7 +985,6 @@ export default {
if (tempDiv.querySelector('table')) {
if (_this.type == 'table') {
_this.$commonJS.parseTableToArray(content, (tableList) => {
var contentHtml = `
<div class="thumbnailTableBox wordTableHtml table_Box table_Box3333" style="">
@@ -951,7 +1014,7 @@ export default {
container.innerHTML = contentHtml;
args.content = container.innerHTML; // 更新处理后的内容
});
}
}
} else {
const plainText = (tempDiv.textContent || tempDiv.innerText || '').trim();
const builtPlain = _this.buildWmathHtmlFromLatexText(plainText);

2
src/components/page/components/email/CkeditorMail.vue
View File

@@ -198,7 +198,7 @@ prepareContentForEditor(rawHtml) {
const rawHtml = this.editor.getContent();
// 调用我们之前的 autoInlineStyles 方法
return this.autoInlineStyles(rawHtml);
},
}
},
beforeDestroy() {
// 销毁编辑器防止内存泄漏

91
src/components/page/components/email/MailTemplatePreviewDialog.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<el-dialog
:title="dialogTitle"
:visible.sync="visible"
:width="dialogWidth"
append-to-body
class="mail-template-preview-dialog"
@closed="onClosed"
>
<p v-if="showHint" class="mock-preview-hint">{{ $t('tmrEmailEditor.previewWithVariablesHint') }}</p>
<div class="preview-body" v-html="previewHtml"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ closeLabel }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { applyMailTemplateVariableMocks } from '@/utils/mailTemplatePreview';
export default {
name: 'MailTemplatePreviewDialog',
data() {
return {
visible: false,
dialogTitle: '',
dialogWidth: '80%',
previewHtml: '',
showHint: false,
closeLabel: 'Close'
};
},
methods: {
open(options) {
const opts = options || {};
const html = opts.html != null ? String(opts.html) : '';
const applyMocks = opts.applyVariableMocks != null ? !!opts.applyVariableMocks : !!opts.variablesJson;
this.dialogWidth = opts.width != null && opts.width !== '' ? String(opts.width) : '80%';
this.showHint = opts.showHint != null ? !!opts.showHint : applyMocks;
this.closeLabel =
opts.closeLabel ||
(this.$t && this.$t('mailboxMould.previewClose')) ||
(this.$t && this.$t('tmrEmailEditor.close')) ||
'Close';
if (opts.title) {
this.dialogTitle = String(opts.title);
} else if (applyMocks) {
this.dialogTitle = (this.$t && this.$t('tmrEmailEditor.previewWithVariablesTitle')) || 'Preview';
} else {
this.dialogTitle = (this.$t && this.$t('mailboxMould.previewTitle')) || 'Template preview';
}
this.previewHtml = applyMocks
? applyMailTemplateVariableMocks(html, {
journalList: opts.journalList,
journalId: opts.journalId,
language: opts.language
})
: html;
this.visible = true;
},
onClosed() {
this.previewHtml = '';
this.showHint = false;
}
}
};
</script>
<style scoped>
.preview-body {
max-height: 70vh;
overflow: auto;
padding: 10px;
border: 1px solid #eee;
background: #fff;
box-sizing: border-box;
word-break: break-word;
line-height: 1.6;
}
.mock-preview-hint {
margin: 0 0 12px;
font-size: 12px;
color: red;
line-height: 1.5;
}
</style>

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

@@ -46,6 +46,8 @@
</template>
<script>
import { applyMailTemplateVariableMocks } from '@/utils/mailTemplatePreview';
export default {
name: 'TmrEmailEditor',
props: {
@@ -150,36 +152,10 @@ export default {
* 将 HTML 中的 {{ key }} 替换为 variableMockData[key]；未配置的键保持原样。
*/
applyVariableMocks(html) {
if (!html) return '';
const oneMonthLater = new Date();
oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
// 格式化为 YYYY-MM-DD
const deadlineStr = oneMonthLater.toISOString().split('T')[0];
const journal_info=this.journalList.find(e=>e.journal_id==this.journalId)
const map = {
...this.variableMockData,
...this.localizedAiMockData,
journal_abbr: journal_info.jabbr, // 期刊缩写
journal_name: journal_info.title,// 期刊全称
journal_url: journal_info.website, // 期刊官网链接
journal_email: journal_info.email, // 期刊官方邮箱
indexing_databases: "ESCI, Scopus, ROAD", // 收录数据库
special_support_deadline:deadlineStr
} || {};
return html.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (full, rawKey) => {
const key = String(rawKey).trim();
if (!key) return full;
if (Object.prototype.hasOwnProperty.call(map, key) && map[key] != null && map[key] !== '') {
const val = map[key];
return typeof val === 'string' ? val : String(val);
}
return full;
return applyMailTemplateVariableMocks(html, {
journalList: this.journalList,
journalId: this.journalId,
language: this.language
});
},
/**

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

@@ -4591,7 +4591,7 @@ export default {
clearInterval(timeRef);
this.refProcess = 0;
this.$message.success('Successfully converted to standard format!');
this.changeRefer();
this.afterReferAddOrDeleteSuccess();
this.showB_step = 2;
}
} else {

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

@@ -126,20 +126,13 @@
</el-tabs>
<!-- 预览弹窗（两个 Tab 共用） -->
<el-dialog
:title="$t('mailboxMould.previewTitle')"
:visible.sync="previewVisible"
width="80%"
>
<div class="preview-body" v-html="previewContent"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="previewVisible = false">{{ $t('mailboxMould.previewClose') }}</el-button>
</span>
</el-dialog>
<MailTemplatePreviewDialog ref="templatePreviewDialog" />
</div>
</template>
<script>
import MailTemplatePreviewDialog from '@/components/page/components/email/MailTemplatePreviewDialog.vue';
import { normalizeJournalListResponse } from '@/utils/mailTemplatePreview';
const API = {
listTemplates: 'api/mail_template/listTemplates',
listStyles: 'api/mail_template/listStyles',
@@ -155,6 +148,7 @@ const mailboxMouldSessionMemory = {
};
export default {
components: { MailTemplatePreviewDialog },
data() {
return {
activeTab: 'templates',
@@ -173,11 +167,7 @@ export default {
// --- Styles ---
styleLoading: false,
styleTableData: [],
// --- 共用预览 ---
previewVisible: false,
previewContent: ''
styleTableData: []
};
},
created() {
@@ -202,10 +192,11 @@ export default {
this.$api
.post(API.getAllJournal, {username: localStorage.getItem('U_name')})
.then(res => {
const list = res || [];
const mapped = (Array.isArray(list) ? list : []).map(j => ({
const list = normalizeJournalListResponse(res);
const mapped = list.map(j => ({
...j,
journal_id: j.journal_id || j.id,
title: j.title || j.name || ''
title: j.title || j.name || j.journal_title || j.journal_name || ''
}));
this.journalList = mapped;
if (mapped.length > 0) {
@@ -263,6 +254,7 @@ export default {
title: item.title,
subject: item.subject,
body_html: item.body_html,
variables_json: item.variables_json,
description: item.description || '',
scene: item.scene,
language: item.language,
@@ -291,8 +283,18 @@ export default {
this.$router.push({ path: '/mailboxMouldDetail', query });
},
handlePreviewTemplate(row) {
this.previewContent = row && row.body_html ? row.body_html : '';
this.previewVisible = true;
const dialog = this.$refs.templatePreviewDialog;
if (!dialog || typeof dialog.open !== 'function') return;
const journal =
this.journalList.find((item) => String(item.journal_id) === String(this.tplFilters.journalId)) || null;
dialog.open({
html: row && row.body_html ? row.body_html : '',
journalList: this.journalList,
journalId: this.tplFilters.journalId,
language: (row && row.language) || this.tplFilters.language || 'en',
journalTitle: journal && journal.title ? journal.title : '',
variablesJson: row && row.variables_json != null ? row.variables_json : ''
});
},
handleDeleteTemplate(row) {
this.syncTplFilterMemory();
@@ -348,8 +350,16 @@ export default {
handlePreviewStyle(row) {
const header = (row && row.header_html) || '';
const footer = (row && row.footer_html) || '';
this.previewContent = `${header}${footer}`;
this.previewVisible = true;
const dialog = this.$refs.templatePreviewDialog;
if (!dialog || typeof dialog.open !== 'function') return;
dialog.open({
html: `${header}${footer}`,
journalList: this.journalList,
journalId: this.tplFilters.journalId,
language: this.tplFilters.language || 'en',
title: this.$t('mailboxMould.previewTitle'),
showHint: false
});
},
handleDeleteStyle(row) {
const styleId = row && (row.style_id || row.id);
@@ -411,12 +421,4 @@ export default {
.delete-btn {
color: #f5222d !important;
}
.preview-body {
max-height: 70vh;
overflow: auto;
padding: 10px;
border: 1px solid #eee;
background: #fff;
box-sizing: border-box;
}
</style>

182
src/components/page/mailboxMouldDetail.vue
View File

@@ -95,25 +95,52 @@
</div>
<div class="body-editor-container">
<div class="subject-label" style="margin-bottom: 10px;">{{ $t('mailboxMouldDetail.emailBody') }}:</div>
<TmrEmailEditor
v-model="form.body"
:journalList="journalList"
:journalId="form.journalId"
:language="form.lang"
placeholder=""
/>
<CkeditorMail v-model="form.body" />
<div class="body-editor-header">
<div class="subject-label">{{ $t('mailboxMouldDetail.emailBody') }}:</div>
<div class="body-editor-actions">
<el-dropdown trigger="click" @command="copyVariable">
<el-button size="mini" class="insert-variable-btn">
{{ $t('mailboxMouldDetail.insertVariable') }}<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" class="mail-variable-dropdown">
<el-dropdown-item
v-for="item in variableMenuItems"
:key="'body-' + item.type + '-' + item.id"
:disabled="item.type === 'group'"
:command="item.type === 'item' ? item.key : null"
:class="{ 'variable-group-label': item.type === 'group' }"
>
<template v-if="item.type === 'group'">{{ item.label }}</template>
<template v-else>
<span class="variable-token">{{ item.token }}</span>
<span class="variable-desc">{{ item.label }}</span>
</template>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button size="mini" class="preview-trigger-btn" @click="handlePreview">
<i class="el-icon-view"></i> {{ $t('tmrEmailEditor.previewWithVariables') }}
</el-button>
</div>
</div>
<CkeditorMail v-model="form.body" />
</div>
</el-card>
</section>
</main>
<MailTemplatePreviewDialog ref="templatePreviewDialog" />
</div>
</template>
<script>
import CkeditorMail from '@/components/page/components/email/CkeditorMail.vue';
import TmrEmailEditor from '@/components/page/components/email/TmrEmailEditor.vue';
import MailTemplatePreviewDialog from '@/components/page/components/email/MailTemplatePreviewDialog.vue';
import { normalizeJournalListResponse } from '@/utils/mailTemplatePreview';
import {
formatMailTemplateVariableToken,
getMailTemplateVariableGroups
} from '@/utils/mailTemplateVariables';
const API = {
getAllJournal: 'api/Article/getJournal',
getTemplate: 'api/mail_template/getTemplate',
@@ -122,7 +149,7 @@ const API = {
export default {
name: 'mailboxMouldDetail',
components: { CkeditorMail,TmrEmailEditor },
components: { CkeditorMail, MailTemplatePreviewDialog },
data() {
return {
journalLoading: true,
@@ -154,6 +181,30 @@ export default {
isEditMode() {
const q = this.$route && this.$route.query ? this.$route.query : {};
return !!(q.template_id || q.id);
},
variableGroups() {
const locale = (this.$i18n && this.$i18n.locale) || this.form.lang || 'en';
return getMailTemplateVariableGroups(locale);
},
variableMenuItems() {
const items = [];
this.variableGroups.forEach((group) => {
items.push({
type: 'group',
id: group.id,
label: group.label
});
group.variables.forEach((item) => {
items.push({
type: 'item',
id: item.key,
key: item.key,
token: item.token,
label: item.label
});
});
});
return items;
}
},
created() {
@@ -173,11 +224,11 @@ export default {
this.$api
.post(API.getAllJournal, { username: localStorage.getItem('U_name') })
.then(res => {
const list = res || [];
const mapped = (Array.isArray(list) ? list : []).map(j => ({
const list = normalizeJournalListResponse(res);
const mapped = list.map(j => ({
...j,
journal_id: j.journal_id || j.id,
title: j.title || j.name || '',
title: j.title || j.name || j.journal_title || j.journal_name || ''
}));
this.journalList = mapped;
if (fromRouteJournalId) {
@@ -226,6 +277,59 @@ export default {
}
this.$router.push({ path: '/mailboxMould' });
},
copyVariable(key) {
if (!key) return;
const token = formatMailTemplateVariableToken(key);
this.copyTextToClipboard(token).then((ok) => {
if (ok) {
this.$message.success(this.$t('mailboxMouldDetail.copyVariableSuccess', { token }));
} else {
this.$message.error(this.$t('mailboxMouldDetail.copyVariableFail'));
}
});
},
copyTextToClipboard(text) {
if (!text) return Promise.resolve(false);
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
return navigator.clipboard.writeText(text).then(() => true).catch(() => this.fallbackCopyText(text));
}
return Promise.resolve(this.fallbackCopyText(text));
},
fallbackCopyText(text) {
try {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
const ok = document.execCommand('copy');
document.body.removeChild(textarea);
return ok;
} catch (e) {
return false;
}
},
handlePreview() {
if (!this.form.body) {
this.$message.warning(this.$t('mailboxMouldDetail.rulesBody'));
return;
}
const dialog = this.$refs.templatePreviewDialog;
if (!dialog || typeof dialog.open !== 'function') return;
dialog.open({
html: this.form.body,
journalList: this.journalList,
journalId: this.form.journalId,
language: this.form.lang,
variablesJson: this.form.variables,
width: '80%',
applyVariableMocks: true,
showHint: true,
title: this.$t('tmrEmailEditor.previewWithVariablesTitle')
});
},
handleSave() {
// 若已在保存中，直接忽略重复点击
if (this.saveLoading) return;
@@ -375,6 +479,10 @@ export default {
border-bottom: 1px solid #eee;
gap: 10px;
}
.subject-inner-input {
flex: 1;
min-width: 0;
}
.subject-label { font-size: 12px; font-weight: bold; color: #666; white-space: nowrap; }
.subject-inner-input{
border: 1px solid #dcdfe6;
@@ -385,7 +493,26 @@ border-radius: 4px;
.subject-inner-input /deep/ .el-input__inner:focus { background: #fff; border-color: #dcdfe6; }
/* 编辑器容器撑满 */
.body-editor-container { flex: 1; overflow: hidden; padding: 10px 15px; }
.body-editor-container { flex: 1; overflow: hidden; padding: 10px 15px; display: flex; flex-direction: column; }
.body-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
flex-shrink: 0;
}
.body-editor-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.insert-variable-btn {
border-style: dashed;
}
.preview-trigger-btn {
border-style: dashed;
}
.body-editor-container /deep/ .ck-editor { height: 100%; display: flex; flex-direction: column; }
.body-editor-container /deep/ .ck-editor__main { flex: 1; overflow: auto; }
@@ -418,4 +545,29 @@ border-radius: 4px;
/* 表单紧凑微调 */
.detail-container /deep/ .el-form-item--mini.el-form-item { margin-bottom: 12px; }
.detail-container /deep/ .el-form--label-top .el-form-item__label { padding: 0 0 4px; font-size: 12px; color: #999; }
</style>
<style>
.mail-variable-dropdown .variable-group-label {
color: #909399 !important;
font-size: 12px;
font-weight: 600;
cursor: default !important;
}
.mail-variable-dropdown .el-dropdown-menu__item:not(.is-disabled) {
display: flex;
align-items: center;
gap: 10px;
min-width: 320px;
}
.mail-variable-dropdown .variable-token {
color: #409eff;
font-family: Consolas, Monaco, monospace;
font-size: 12px;
flex-shrink: 0;
}
.mail-variable-dropdown .variable-desc {
color: #606266;
font-size: 12px;
}
</style>