tijiao

src/api/index.js

@@ -19,8 +19,8 @@ const service = axios.create({
 	// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
 	// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
 	// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
-	// baseURL: '/api', //本地
+	baseURL: '/api', //本地
-	baseURL: '/', //正式
+	// baseURL: '/', //正式
 
 });
 

src/components/common/langs/en.js

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

src/components/common/langs/zh.js

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

src/components/page/components/Tinymce/index.vue

@@ -129,17 +129,14 @@ export default {
     },
     watch: {
         value: {
-
             handler(val) {
-          
+                if (!this.hasChange && this.hasInit) {
-        
+                    this.$nextTick(() => {
-            if (!this.hasChange && this.hasInit) {
+                        window.tinymce.get(this.tinymceId).setContent(val);
-                this.$nextTick(() => {
+                    });
-                    window.tinymce.get(this.tinymceId).setContent(val);
+                }
-                });
+            },
-            }
+            immediate: true
-        },
-        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 rawValue = val || ''; // 处理 null
-        const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
+            const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
-        const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
+            const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
-        const removeBr = /<br\s*\/?>/gi; // 移除所有 br 标签
+            const removeBr = /<br\s*\/?>/gi; // 移除所有 br 标签
 
-        if (rawValue.includes('wordTableHtml')) {
+            if (rawValue.includes('wordTableHtml')) {
-            const parser = new DOMParser();
+                const parser = new DOMParser();
-            const doc = parser.parseFromString(rawValue, 'text/html');
+                const doc = parser.parseFromString(rawValue, 'text/html');
-            const cells = doc.querySelectorAll('td, th');
+                const cells = doc.querySelectorAll('td, th');
 
-            cells.forEach((cell) => {
+                cells.forEach((cell) => {
-                cell.innerHTML = cell.innerHTML
+                    cell.innerHTML = cell.innerHTML
-                    .replace(cleanEmptyTags, '')
+                        .replace(cleanEmptyTags, '')
-                    .replace(removeBr, '') // 针对你“不想要br”的需求
+                        .replace(removeBr, '') // 针对你“不想要br”的需求
-                    .replace(replaceSpaces, '&nbsp;');
+                        .replace(replaceSpaces, '&nbsp;');
-            });
+                });
-            return doc.body.innerHTML;
+                return doc.body.innerHTML;
-        } else {
+            } else {
-            return rawValue
+                return rawValue.replace(cleanEmptyTags, '').replace(removeBr, '').replace(replaceSpaces, '&nbsp;');
-                .replace(cleanEmptyTags, '')
+            }
-                .replace(removeBr, '')
+        },
-                .replace(replaceSpaces, '&nbsp;');
+        getSafeContent(val) {
-        }
+            const rawValue = val || '';
-    },
+            const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
-    getSafeContent(val) {
+            const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
-        const rawValue = val || '';
-        const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
-        const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
 
+            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;'
+                );
+            };
 
-        const escapeIllegalLT = (str) => {
+            let processedHtml = '';
-            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;');
-        };
 
-        let processedHtml = '';
+            if (rawValue.includes('wordTableHtml')) {
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(rawValue, 'text/html');
+                const cells = doc.querySelectorAll('td, th');
 
-        if (rawValue.includes('wordTableHtml')) {
+                cells.forEach((cell) => {
-            const parser = new DOMParser();
+                    let cellText = cell.innerHTML;
-            const doc = parser.parseFromString(rawValue, 'text/html');
-            const cells = doc.querySelectorAll('td, th');
 
-            cells.forEach((cell) => {
+                    cell.innerHTML = cellText.replace(cleanEmptyTags, '').replace(replaceSpaces, '&nbsp;');
+                });
+                processedHtml = doc.body.innerHTML;
+            } else {
+                processedHtml = rawValue.replace(cleanEmptyTags, '').replace(replaceSpaces, '&nbsp;');
+            }
 
-                let cellText = cell.innerHTML;
+            return processedHtml;
+        },
+        parseWordLinearTextToStandardLatex(text) {
+            let result = text;
 
-                cell.innerHTML = cellText
+            // 🌟 动态特征一：修复分式与包裹大括号（如把 13(...) 转换为 \frac{1}{3}\left( ... \right)）
-                    .replace(cleanEmptyTags, '')
+            // 通过捕捉连续的两位数字和紧跟的括号，不管它是 12 还是 13 还是 25，动态拆分为分子分母
-                    .replace(replaceSpaces, '&nbsp;');
+            result = result.replace(/^(\d)(\d)\s*\(([\s\S]+)\)$/g, '\\frac{$1}{$2}\\left( $3 \\right)');
-            });
-            processedHtml = doc.body.innerHTML;
-        } else {
 
-            processedHtml = rawValue
+            // 🌟 动态特征二：学术公式多变量复合下标高精度自动恢复（如 MIi 变成 \widehat{\text{MI}}_i）
-                .replace(cleanEmptyTags, '')
+            // 抽象规律：大写字母组成的复合单词（代表一个统计变量），后面紧跟着一个用于做索引循环的小写字母（如 i, j, k, n）
-                .replace(replaceSpaces, '&nbsp;');
+            // 我们用正则边界 \b 精准识别这种大小写交替的数学边界，动态完成 \text 包裹和 _ 下标追加
-        }
+            result = result.replace(/\b([A-Z]{2,})([ijkmn])\b/g, '\\widehat{\\text{$1 exterior_flag}}_$2');
+            result = result.replace(/ exterior_flag/g, ''); // 清理临时标记
 
-        return processedHtml;
+            // 🌟 动态特征三：单字母变量的帽子与下标高精度自动恢复（如 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.editorInstance = ed;
-    _this.hasInit = true;
+                        _this.hasInit = true;
-    _this.$commonJS.inTinymceButtonClass();
+                        _this.$commonJS.inTinymceButtonClass();
-    if (_this.isAutomaticUpdate) {
+                        if (_this.isAutomaticUpdate) {
-            _this.$emit('updateChange', _this.value);
+                            _this.$emit('updateChange', _this.value);
+                        }
+                        _this.content = _this.getSafeContent(_this.value);
 
+                        _this.handleSetContent(_this.content || '');
 
-        }
+                        // 3. 监听内容变化
-        _this.content = _this.getSafeContent(_this.value);
+                        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. 监听内容变化
+                        observer.observe(ed.getBody(), {
-    ed.on('NodeChange Change KeyUp SetContent', () => {
+                            childList: true,
-        _this.hasChange = true;
+                            subtree: true,
-        _this.$emit('input', ed.getContent({ format: 'raw' }));
+                            characterData: true
-    });
+                        });
-
+                    });
-    // 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
-    });
-});
 
                     // 定义自定义按钮
                     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="">

src/components/page/components/email/CkeditorMail.vue

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

src/components/page/components/email/MailTemplatePreviewDialog.vue

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

src/components/page/components/email/TmrEmailEditor.vue

@@ -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 '';
+      return applyMailTemplateVariableMocks(html, {
-      const oneMonthLater = new Date();
+        journalList: this.journalList,
-oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
+        journalId: this.journalId,
-// 格式化为 YYYY-MM-DD
+        language: this.language
-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;
       });
     },
     /**

src/components/page/editPublicRefRdit.vue

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

src/components/page/mailboxMould.vue

@@ -126,20 +126,13 @@
     </el-tabs>
 
     <!-- 预览弹窗（两个 Tab 共用） -->
-    <el-dialog
+    <MailTemplatePreviewDialog ref="templatePreviewDialog" />
-      :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>
   </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: [],
+      styleTableData: []
-
-      // --- 共用预览 ---
-      previewVisible: false,
-      previewContent: ''
     };
   },
   created() {
@@ -202,10 +192,11 @@ export default {
       this.$api
         .post(API.getAllJournal, {username: localStorage.getItem('U_name')})
         .then(res => {
-          const list = res || [];
+          const list = normalizeJournalListResponse(res);
-          const mapped = (Array.isArray(list) ? list : []).map(j => ({
+          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 : '';
+      const dialog = this.$refs.templatePreviewDialog;
-      this.previewVisible = true;
+      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}`;
+      const dialog = this.$refs.templatePreviewDialog;
-      this.previewVisible = true;
+      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>

src/components/page/mailboxMouldDetail.vue

@@ -95,25 +95,52 @@
           </div>
           
           <div class="body-editor-container">
-            <div class="subject-label" style="margin-bottom: 10px;">{{ $t('mailboxMouldDetail.emailBody') }}:</div>
+            <div class="body-editor-header">
-            <TmrEmailEditor 
+              <div class="subject-label">{{ $t('mailboxMouldDetail.emailBody') }}:</div>
-      v-model="form.body" 
+              <div class="body-editor-actions">
-      :journalList="journalList"
+                <el-dropdown trigger="click" @command="copyVariable">
-      :journalId="form.journalId"
+                  <el-button size="mini" class="insert-variable-btn">
-      :language="form.lang"
+                    {{ $t('mailboxMouldDetail.insertVariable') }}<i class="el-icon-arrow-down el-icon--right"></i>
-      placeholder="" 
+                  </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 list = normalizeJournalListResponse(res);
-          const mapped = (Array.isArray(list) ? list : []).map(j => ({
+          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; }
 
@@ -419,3 +546,28 @@ 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>

src/utils/mailTemplatePreview.js

@@ -0,0 +1,76 @@
+const DEFAULT_VARIABLE_MOCKS = {
+  submission_url: 'https://submission.tmrjournals.com/',
+  eic_name: 'Zhang San',
+  editor_name: 'Alice Wong',
+  expert_title: 'Prof',
+  expert_name: 'John Doe',
+  expert_field: 'Biomedical Engineering',
+  representative_work_title: 'Advanced Applications of AI in Medical Imaging.',
+  ai_content_analysis: '【AI分析文章，一句话总结】',
+  ai_advised_topics:
+    'We especially welcome submissions on topics such as 【Topic suggestion 1】, 【Topic suggestion 2】, and 【Topic suggestion 3】, or other closely related areas that align with your work.'
+};
+
+const LOCALIZED_AI_MOCKS = {
+  zh: {
+    ai_content_analysis: '【AI分析这篇文章，一句话总结】。【我们希望也关注个领域】',
+    ai_advised_topics:
+      '我们尤其关注如【方向/题目建议1】、【方向/题目建议2】以及【方向/题目建议3】等相关议题的研究进展。'
+  },
+  en: {
+    ai_content_analysis: '【AI分析文章，一句话总结】',
+    ai_advised_topics:
+      'We especially welcome submissions on topics such as 【Topic suggestion 1】, 【Topic suggestion 2】, and 【Topic suggestion 3】, or other closely related areas that align with your work.'
+  }
+};
+
+export function normalizeJournalListResponse(res) {
+  if (Array.isArray(res)) return res;
+  if (res && Array.isArray(res.data)) return res.data;
+  if (res && res.data && Array.isArray(res.data.list)) return res.data.list;
+  if (res && Array.isArray(res.list)) return res.list;
+  return [];
+}
+
+function getLocalizedAiMockData(language) {
+  const lang = String(language || 'en').toLowerCase();
+  return lang === 'zh' ? LOCALIZED_AI_MOCKS.zh : LOCALIZED_AI_MOCKS.en;
+}
+
+function findJournalInfo(journalList, journalId) {
+  const list = Array.isArray(journalList) ? journalList : [];
+  if (!list.length) return null;
+  if (journalId == null || journalId === '') return list[0];
+  return list.find((item) => String(item.journal_id || item.id) === String(journalId)) || list[0];
+}
+
+export function applyMailTemplateVariableMocks(html, options) {
+  const opts = options || {};
+  if (!html) return '';
+
+  const oneMonthLater = new Date();
+  oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
+  const deadlineStr = oneMonthLater.toISOString().split('T')[0];
+  const journalInfo = findJournalInfo(opts.journalList, opts.journalId) || {};
+
+  const map = {
+    ...DEFAULT_VARIABLE_MOCKS,
+    ...getLocalizedAiMockData(opts.language),
+    journal_abbr: journalInfo.jabbr || journalInfo.abbr || '',
+    journal_name: journalInfo.title || journalInfo.name || journalInfo.journal_title || journalInfo.journal_name || '',
+    journal_url: journalInfo.website || journalInfo.url || '',
+    journal_email: journalInfo.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;
+  });
+}

src/utils/mailTemplateVariables.js

@@ -0,0 +1,64 @@
+/** 约稿邮件模板变量清单（来源：约稿变量清单表格.docx） */
+export const MAIL_TEMPLATE_VARIABLE_GROUPS = [
+  {
+    id: 'expert',
+    labelZh: '专家动态信息',
+    labelEn: 'Expert info',
+    variables: [
+      { key: 'expert_title', labelZh: '职称', labelEn: 'Expert title' },
+      { key: 'expert_name', labelZh: '专家姓名', labelEn: 'Expert name' },
+      { key: 'expert_field', labelZh: '专家研究领域', labelEn: 'Expert research field' },
+      { key: 'representative_work_title', labelZh: '专家代表作标题', labelEn: 'Representative work title' },
+      { key: 'ai_content_analysis', labelZh: 'AI 约稿理由分析', labelEn: 'AI solicitation rationale' },
+      {
+        key: 'ai_advised_topics',
+        labelZh: 'AI 总结的方向/题目建议（【方向/题目建议1】、【方向/题目建议2】、【方向/题目建议3】）',
+        labelEn: 'AI suggested topics (topic 1, topic 2, topic 3)'
+      },
+      { key: 'special_support_deadline', labelZh: '特别支持截止日期', labelEn: 'Special support deadline' },
+      { key: 'status_tag_text', labelZh: '状态标签文案', labelEn: 'Status tag text' },
+      { key: 'unsubscribe_url', labelZh: '退订链接', labelEn: 'Unsubscribe URL' }
+    ]
+  },
+  {
+    id: 'journal',
+    labelZh: '期刊基础配置',
+    labelEn: 'Journal config',
+    variables: [
+      { key: 'journal_abbr', labelZh: '期刊缩写', labelEn: 'Journal abbreviation' },
+      { key: 'journal_name', labelZh: '期刊全称', labelEn: 'Journal name' },
+      { key: 'journal_url', labelZh: '期刊官网链接', labelEn: 'Journal website URL' },
+      { key: 'journal_email', labelZh: '期刊官方邮箱', labelEn: 'Journal email' },
+      { key: 'indexing_databases', labelZh: '收录数据库', labelEn: 'Indexing databases' },
+      { key: 'review_cycle_days', labelZh: '平均审稿周期（天）', labelEn: 'Review cycle (days)' },
+      { key: 'submission_url', labelZh: '投稿系统链接', labelEn: 'Submission URL' },
+      { key: 'eic_name', labelZh: '主编姓名', labelEn: 'Editor-in-Chief name' },
+      { key: 'editor_name', labelZh: '责任编辑姓名', labelEn: 'Handling editor name' }
+    ]
+  }
+];
+
+export function formatMailTemplateVariableToken(key) {
+  return `{{${key}}}`;
+}
+
+export function getMailTemplateVariableGroups(locale) {
+  const isZh = String(locale || '').toLowerCase().startsWith('zh');
+  return MAIL_TEMPLATE_VARIABLE_GROUPS.map((group) => ({
+    id: group.id,
+    label: isZh ? group.labelZh : group.labelEn,
+    variables: group.variables.map((item) => ({
+      key: item.key,
+      token: formatMailTemplateVariableToken(item.key),
+      label: isZh ? item.labelZh : item.labelEn
+    }))
+  }));
+}
+
+export function buildDefaultVariablesJson(keys) {
+  const obj = {};
+  (keys || []).forEach((key) => {
+    if (key) obj[key] = 'string';
+  });
+  return JSON.stringify(obj, null, 2);
+}