Merge branch 'master' of https://git.nuttyreading.com/wangjinlei/tougao_web into Editorial-Board

src/common/js/commonJS.js

@@ -226,8 +226,7 @@ export default {
 
 
         str = this.transformHtmlString(processedContent, 'table',{ keepBr: true })
-        console.log("🚀 ~ extractContentWithoutOuterSpan888888 ~ str:", str);
-
+       
 
         // 创建一个临时的 DOM 元素来解析 HTML
         const div = document.createElement('div');
@@ -917,9 +916,9 @@ str = str.replace(regex, function (match, content, offset, fullString) {
         });
         // 2. 删除所有不需要的标签 (除 `strong`, `em`, `sub`, `sup`, `b`, `i` 外的所有标签)
         if (type == 'table') {
-            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|img|myfigure|mytable|myh3))[^>]+>/g, ''); // 删除不需要的标签
+            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|img|myfigure|mytable|myh3|autocite))[^>]+>/g, ''); // 删除不需要的标签
         } else {
-            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|myfigure|mytable|myh3))[^>]+>/g, ''); // 删除不需要的标签
+            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|myfigure|mytable|myh3|autocite))[^>]+>/g, ''); // 删除不需要的标签
         }
 
 

src/components/common/langs/en.js

@@ -1157,6 +1157,19 @@ colTitle: 'Template title',
 	  tmrEmailEditor: {
 		preview: 'Preview',
 		placeholder: 'Please enter email content'
+	  },
+	  wordCite: {
+		noRefs: 'Reference list is not loaded yet. Please wait or refresh the page.',
+		notFoundById: 'No reference found for citation ID {id}',
+		selectRef: 'Select Reference',
+		reference: 'Reference',
+		cancel: 'Cancel',
+		confirm: 'Confirm',
+		remove: 'Remove',
+		selected: 'Selected',
+		modifyRef: 'Edit citation',
+		removeRefTag: 'Remove citation',
+		citeUpdateFail: 'Could not update the citation in the text. Try again or use Edit.'
 	  }
 	  
 	

src/components/common/langs/zh.js

@@ -1142,6 +1142,19 @@ const zh = {
 	  tmrEmailEditor: {
 		preview: '预览效果',
 		placeholder: '请输入邮件内容'
+	  },
+	  wordCite: {
+		noRefs: '参考文献列表尚未加载，请稍候再试或刷新页面',
+		notFoundById: '未查询到编号{id}相关参考文献',
+		selectRef: '选择参考文献',
+		reference: '参考文献',
+		cancel: '取消',
+		confirm: '确认',
+		remove: '移除',
+		selected: '已选择',
+		modifyRef: '修改引用',
+		removeRefTag: '移除引用',
+		citeUpdateFail: '未能更新正文中的引用标签，请重试或进入编辑修改'
 	  }
    
 	  

src/components/page/GenerateCharts.vue

@@ -75,7 +75,7 @@
                         <template slot="catalogue1">
                             <catalogue
                                 v-if="Main_List.length > 0"
-                                :content="Main_List"
+                                :content="catalogueContent"
                                 :articleId="articleId"
                                 ref="catalogue"
                                 @goToListComment="goToListComment"
@@ -94,6 +94,7 @@
                     ref="commonWord"
                     :value="htmlContent"
                     :contentList="Main_List"
+                    :chanFerForm="chanFerForm"
                     :comments="comments"
                     :wordStyle="wordStyle"
                     @onDrop="onDrop"
@@ -121,12 +122,25 @@
                     @onEditTitle="onEditTitle"
                     @onAddRow="onAddRow"
                     @changeComment="changeComment"
+                    @openRefSelector="handleOpenRefSelectorFromManuscript"
                     style="width: calc(100%); height: calc(100%)"
                     :style="`100%`"
                 >
                     <template slot="comment">
                         <div style="" class="commentList annotations"></div>
                     </template>
+                    <template slot="refrences">
+                        <edit-public-ref-table-only
+                            v-if="p_article_id"
+                            ref="editPublicRefTableOnly"
+                            :chanFerForm="chanFerForm"
+                            :chanFerFormRepeatList="chanFerFormRepeatList"
+                            :p_article_id="p_article_id"
+                            @ChanFerMashUp="ChanFerMashUp"
+                            @refrashComp="fetchReferList"
+                            @changeRefer="fetchReferList"
+                        />
+                    </template>
                 </common-word>
             </div>
         </div>
@@ -375,6 +389,8 @@
                         :value="currentContent.content"
                         @getContent="getContent"
                         @openLatexEditor="openLatexEditor"
+                        @openRefSelector="handleOpenRefSelector"
+                        :chanFerForm="chanFerForm"
                         v-if="editVisible"
                         ref="commonContent"
                         style="margin-left: -115px"
@@ -409,6 +425,8 @@
                         @getContent="getContent"
                         type="content"
                         @openLatexEditor="openLatexEditor"
+                        @openRefSelector="handleOpenRefSelector"
+                        :chanFerForm="chanFerForm"
                         v-if="addContentVisible"
                         ref="addContent"
                         style="margin-left: -115px"
@@ -426,6 +444,52 @@
         </el-dialog>
 
         <common-late-x v-if="showLateX" @close="showLateX = false" @save="saveLateX" :LateXInfo="LateXInfo"></common-late-x>
+
+        <el-dialog
+            :title="$t('wordCite.selectRef')"
+            :visible.sync="refSelectorVisible"
+            width="900px"
+            append-to-body
+            :close-on-click-modal="false"
+        >
+            <div v-if="refSelectedRows.length > 0" style="margin-bottom: 10px; font-size: 13px; color: #606266;">
+                {{ $t('wordCite.selected') }}: <b style="color: #0082AA;">[{{ refPreviewLabel }}]</b>
+            </div>
+            <el-table
+                ref="refSelectorTable"
+                :data="chanFerForm"
+                @selection-change="handleRefSelectionChange"
+                style="width: 100%"
+                max-height="420"
+                size="small"
+                row-key="p_refer_id"
+            >
+                <el-table-column type="selection" width="45" :reserve-selection="true"></el-table-column>
+                <el-table-column :label="'#'" width="50">
+                    <template slot-scope="scope">
+                        <b>{{ scope.$index + 1 }}.</b>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('wordCite.reference')">
+                    <template slot-scope="scope">
+                        <div style="line-height: 1.6;">
+                            <span>{{ scope.row.refer_frag || [scope.row.author, scope.row.title, scope.row.joura, scope.row.dateno].filter(Boolean).join('. ') || '-' }}</span>
+                            <br v-if="scope.row.doilink || scope.row.doi || scope.row.isbn">
+                            <a v-if="scope.row.doilink || scope.row.doi || scope.row.isbn"
+                               :href="(scope.row.doilink || scope.row.doi || '').startsWith('http') ? (scope.row.doilink || scope.row.doi) : 'https://doi.org/' + (scope.row.doilink || scope.row.doi || scope.row.isbn)"
+                               target="_blank"
+                               style="color: #0082AA; font-size: 12px;"
+                            >{{ scope.row.doilink || scope.row.doi || scope.row.isbn }}</a>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="refSelectorVisible = false">{{ $t('wordCite.cancel') }}</el-button>
+                <el-button type="danger" v-if="refSelectorIsEdit" @click="handleRemoveRefCite">{{ $t('wordCite.remove') }}</el-button>
+                <el-button type="primary" :disabled="refSelectedRows.length === 0" @click="handleConfirmRefCite">{{ $t('wordCite.confirm') }}</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
@@ -437,6 +501,7 @@ import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
 import Tinymce from '@/components/page/components/Tinymce';
 import bottomTinymce from '@/components/page/components/Tinymce';
 import catalogue from '@/components/page/components/table/catalogue.vue';
+import editPublicRefTableOnly from './editPublicRefTableOnly.vue';
 export default {
     data() {
         return {
@@ -559,18 +624,58 @@ export default {
             pictVisible: false,
             typesettingType: 1,
             imagesList: [],
-            exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
+            exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!",
+            p_article_id: null,
+            chanFerForm: [],
+            chanFerFormRepeatList: [],
+            refSelectorVisible: false,
+            refSelectorIsEdit: false,
+            refSelectedRows: [],
+            refSelectorSource: 'commonContent'
         };
     },
     components: {
         Tinymce,
         bottomTinymce,
-        catalogue
+        catalogue,
+        editPublicRefTableOnly
     },
     computed: {
-        combinedValue() {
-            // 将两个值组合成一个新的值，可以是字符串、数组、对象等
-            // return `${this.isFirstComponentLoaded}-${this.isWordComponentLoaded}`;
+        refPreviewLabel() {
+            if (!this.refSelectedRows.length) return '';
+            const refs = Array.isArray(this.chanFerForm) ? this.chanFerForm : [];
+            const nums = this.refSelectedRows.map((row) => {
+                const idx = refs.findIndex((r) => r.p_refer_id === row.p_refer_id);
+                return idx >= 0 ? idx + 1 : null;
+            }).filter((n) => n != null);
+            if (!nums.length) return '?';
+            const sorted = [...new Set(nums)].sort((a, b) => a - b);
+            const result = [];
+            let i = 0;
+            while (i < sorted.length) {
+                let j = i;
+                while (j < sorted.length - 1 && sorted[j + 1] === sorted[j] + 1) j++;
+                if (j - i >= 2) {
+                    result.push(`${sorted[i]}–${sorted[j]}`);
+                } else {
+                    for (let k = i; k <= j; k++) result.push(sorted[k]);
+                }
+                i = j + 1;
+            }
+            return result.join(', ');
+        },
+        catalogueContent() {
+            const base = Array.isArray(this.Main_List) ? this.Main_List : [];
+            if (!Array.isArray(this.chanFerForm) || this.chanFerForm.length === 0) return base;
+            return [
+                ...base,
+                {
+                    am_id: 'References',
+                    content: 'References',
+                    is_h1: 1,
+                    is_h2: 0
+                }
+            ];
         }
     },
     watch: {
@@ -597,6 +702,7 @@ export default {
     async created() {
         localStorage.removeItem('scrollPosition');
         this.isShowEditComment();
+        this.loadPreacceptArticleDetail();
         this.getDate();
         this.getCommentList();
     },
@@ -615,11 +721,140 @@ export default {
     },
     async activated() {
         this.isShowEditComment();
+        this.loadPreacceptArticleDetail();
         this.getDate();
         this.getCommentList();
     },
 
     methods: {
+        loadPreacceptArticleDetail() {
+            if (!this.articleId) return;
+            this.$api
+                .post('api/Article/getPreacceptArticleDetail', { article_id: this.articleId })
+                .then((res) => {
+                    const pid = res.data && res.data.production && res.data.production.p_article_id;
+                    this.p_article_id = pid;
+                    if (pid != null && pid !== '') {
+                        if (!this.Art_P_Id) this.Art_P_Id = pid;
+                        this.fetchReferList();
+                    }
+                })
+                .catch(() => {});
+        },
+        fetchReferList() {
+            if (!this.p_article_id) return;
+            this.$api
+                .post('api/Production/getReferList', {
+                    p_article_id: this.p_article_id
+                })
+                .then((res) => {
+                    this.chanFerForm = res.data.refers;
+                    this.chanFerFormRepeatList = Object.values(res.data.repeat || {});
+                    for (let i = 0; i < this.chanFerForm.length; i++) {
+                        this.chanFerForm[i].edit_mark = 1;
+                    }
+                    this.$nextTick(() => {
+                        if (this.$refs.editPublicRefTableOnly) {
+                            this.$refs.editPublicRefTableOnly.init();
+                        }
+                        if (this.editVisible && this.$refs.commonContent && this.$refs.commonContent.refreshAutociteDisplay) {
+                            this.$refs.commonContent.refreshAutociteDisplay();
+                        }
+                        if (this.addContentVisible && this.$refs.addContent && this.$refs.addContent.refreshAutociteDisplay) {
+                            this.$refs.addContent.refreshAutociteDisplay();
+                        }
+                    });
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        handleOpenRefSelectorFromManuscript(data) {
+            this.handleOpenRefSelector(data, 'manuscriptAutocite');
+        },
+        handleOpenRefSelector(data, sourceOverride) {
+            const currentIds = data && Array.isArray(data.currentRefIds) ? data.currentRefIds : [];
+            this.refSelectorIsEdit = currentIds.length > 0;
+            this.refSelectedRows = [];
+            if (sourceOverride === 'manuscriptAutocite' || (data && data.source === 'manuscript')) {
+                this.refSelectorSource = 'manuscriptAutocite';
+            } else if (this.editVisible) {
+                this.refSelectorSource = 'commonContent';
+            } else if (this.addContentVisible) {
+                this.refSelectorSource = 'addContent';
+            }
+            this.refSelectorVisible = true;
+            this.$nextTick(() => {
+                const table = this.$refs.refSelectorTable;
+                if (table) {
+                    table.clearSelection();
+                    if (currentIds.length > 0) {
+                        const idSet = new Set(currentIds.map(String));
+                        this.chanFerForm.forEach((row) => {
+                            if (idSet.has(String(row.p_refer_id))) {
+                                table.toggleRowSelection(row, true);
+                            }
+                        });
+                    }
+                }
+            });
+        },
+        handleRefSelectionChange(rows) {
+            this.refSelectedRows = rows;
+        },
+        handleConfirmRefCite() {
+            if (this.refSelectedRows.length === 0) return;
+            const ids = this.refSelectedRows.map((r) => r.p_refer_id);
+            if (this.refSelectorSource === 'manuscriptAutocite') {
+                const w = this.$refs.commonWord;
+                if (w && typeof w.applyManuscriptAutocite === 'function') {
+                    w.applyManuscriptAutocite(ids);
+                }
+                this.refSelectorVisible = false;
+                this.refSelectedRows = [];
+                return;
+            }
+            const ref = this.$refs[this.refSelectorSource];
+            if (ref) {
+                ref.insertAutocite(ids);
+            }
+            this.refSelectorVisible = false;
+            this.refSelectedRows = [];
+        },
+        handleRemoveRefCite() {
+            const idsToStrip = (this.refSelectedRows || []).map((r) => r.p_refer_id);
+            if (this.refSelectorSource === 'manuscriptAutocite') {
+                const w = this.$refs.commonWord;
+                if (w && typeof w.stripManuscriptAutociteIds === 'function') {
+                    w.stripManuscriptAutociteIds(idsToStrip);
+                }
+                this.refSelectorVisible = false;
+                this.refSelectedRows = [];
+                return;
+            }
+            const ref = this.$refs[this.refSelectorSource];
+            if (ref && typeof ref.stripAutociteIds === 'function') {
+                ref.stripAutociteIds(idsToStrip);
+            } else if (ref) {
+                ref.removeAutocite();
+            }
+            this.refSelectorVisible = false;
+            this.refSelectedRows = [];
+        },
+        ChanFerMashUp(e) {
+            this.$api
+                .post('api/Production/referHB', e)
+                .then((res) => {
+                    if (res.code == 0) {
+                        this.fetchReferList();
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                });
+        },
         openAddTable(content) {
             this.editVisible = false;
             this.threeVisible = true;
@@ -655,6 +890,11 @@ export default {
 
         loadedWord() {
             this.isWordComponentLoaded = true;
+            this.$nextTick(() => {
+                if (this.$refs.editPublicRefTableOnly) {
+                    this.$refs.editPublicRefTableOnly.init();
+                }
+            });
         },
         // 监听第一个兄弟组件加载完毕
         // onFirstComponentLoaded(imagesList) {
@@ -1669,6 +1909,16 @@ export default {
 
                 this.editVisible = true;
                 this.currentId = dataId;
+                if (this.p_article_id) {
+                    this.fetchReferList();
+                }
+                this.$nextTick(() => {
+                    this.$nextTick(() => {
+                        if (this.$refs.commonContent && this.$refs.commonContent.refreshAutociteDisplay) {
+                            this.$refs.commonContent.refreshAutociteDisplay();
+                        }
+                    });
+                });
             }
         },
         onAddContent(dataId) {

src/components/page/PreIngestedEditor.vue

@@ -1337,7 +1337,7 @@ export default {
 
         // 5----重新获取加载参考文献
         changeRefer(val) {
-            console.log('重新获取参考文献');
+          
             this.$api
                 .post('api/Production/getReferList', {
                     p_article_id: this.p_article_id
@@ -1348,7 +1348,7 @@ export default {
                     for (var i = 0; i < this.chanFerForm.length; i++) {
                         this.chanFerForm[i].edit_mark = 1;
                     }
-                    console.log(this.chanFerForm);
+                   
                 })
                 .catch((err) => {
                     console.log(err);

src/components/page/PreIngestedEditorProduce.vue

@@ -1433,7 +1433,7 @@ export default {
 
         // 5----重新获取加载参考文献
         changeRefer(val) {
-            console.log('重新获取参考文献');
+            
             this.$api
                 .post('api/Production/getReferList', {
                     p_article_id: this.p_article_id
@@ -1444,7 +1444,7 @@ export default {
                     for (var i = 0; i < this.chanFerForm.length; i++) {
                         this.chanFerForm[i].edit_mark = 1;
                     }
-                    console.log(this.chanFerForm);
+                  
                 })
                 .catch((err) => {
                     console.log(err);

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

@@ -63,6 +63,21 @@ export default {
         },
         articleId: {
             default: ''
+        },
+        chanFerForm: {
+            type: Array,
+            default: () => []
+        }
+    },
+    computed: {
+        citeMap() {
+            const map = {};
+            const refs = Array.isArray(this.chanFerForm) ? this.chanFerForm : [];
+            refs.forEach((row, idx) => {
+                const key = row && row.p_refer_id != null ? String(row.p_refer_id) : '';
+                if (key) map[key] = idx + 1;
+            });
+            return map;
         }
     },
     data() {
@@ -129,17 +144,24 @@ export default {
     },
     watch: {
         value: {
-
             handler(val) {
-          
-        
-            if (!this.hasChange && this.hasInit) {
-                this.$nextTick(() => {
-                    window.tinymce.get(this.tinymceId).setContent(val);
-                });
-            }
+                if (!this.hasChange && this.hasInit) {
+                    this.$nextTick(() => {
+                        this.handleSetContent(val);
+                    });
+                }
+            },
+            immediate: true
         },
-        immediate: true 
+        chanFerForm: {
+            handler() {
+                this.$nextTick(() => {
+                    if (this.editorInstance) {
+                        this.renderAutociteInEditor(this.editorInstance);
+                    }
+                });
+            },
+            deep: true
         }
     },
     mounted() {
@@ -163,10 +185,165 @@ export default {
         this.destroyTinymce();
     },
     methods: {
+        /** 与正文一致：两项连续写作 1, 2；三项及以上连续写作 1-3 */
+        formatCiteNumbers(nums) {
+            if (!nums || !nums.length) return '';
+            const sorted = [...new Set(nums)].sort((a, b) => a - b);
+            const result = [];
+            let i = 0;
+            while (i < sorted.length) {
+                let j = i;
+                while (j < sorted.length - 1 && sorted[j + 1] === sorted[j] + 1) j++;
+                if (j - i >= 2) {
+                    result.push(`${sorted[i]}–${sorted[j]}`);
+                } else {
+                    for (let k = i; k <= j; k++) result.push(sorted[k]);
+                }
+                i = j + 1;
+            }
+            return result.join(', ');
+        },
+        parseAutociteDataIds(attr) {
+            if (!attr || typeof attr !== 'string') return [];
+            return attr
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean);
+        },
+        /** 与 word.vue renderCiteLabels：tooltip 行按引用序号排序 */
+        sortAutociteIdsByCiteNumber(ids) {
+            const uniq = [...new Set(ids.map(String))];
+            const map = this.citeMap || {};
+            return uniq.sort((a, b) => {
+                const na = map[a];
+                const nb = map[b];
+                const ha = na != null && na !== '';
+                const hb = nb != null && nb !== '';
+                if (ha && hb) return Number(na) - Number(nb);
+                if (ha) return -1;
+                if (hb) return 1;
+                return String(a).localeCompare(String(b));
+            });
+        },
+        renderAutociteInEditor(ed) {
+            const body = ed.getBody();
+            if (!body) return;
+            const allAutocites = Array.from(body.querySelectorAll('autocite'));
+            if (!allAutocites.length) return;
+
+            const refs = Array.isArray(this.chanFerForm) ? this.chanFerForm : [];
+            const refMap = {};
+            refs.forEach((item) => {
+                const key = item && item.p_refer_id != null ? String(item.p_refer_id) : '';
+                if (key) refMap[key] = item;
+            });
+
+            allAutocites.forEach((el) => {
+                ed.dom.setAttrib(el, 'contenteditable', 'false');
+                el.style.display = '';
+                const ids = this.parseAutociteDataIds(el.getAttribute('data-id'));
+                const sortedIds = this.sortAutociteIdsByCiteNumber(ids);
+                const nums = sortedIds.map((id) => this.citeMap[String(id)]).filter((n) => n != null);
+                const label = nums.length > 0 ? this.formatCiteNumbers(nums) : '?';
+
+                const lines = sortedIds.map((id) => {
+                    const no = this.citeMap[String(id)] != null ? this.citeMap[String(id)] : '?';
+                    const ref = refMap[String(id)];
+                    if (!ref) return this.$t('wordCite.notFoundById', { id: no === '?' ? id : no });
+                    const content = ref.refer_frag || [ref.author, ref.title, ref.joura, ref.dateno].filter(Boolean).join(' ').trim() || '[?]';
+                    const doi = ref.doilink || ref.isbn || ref.doi || '[?]';
+                    return `[${no}] ${content}\nDOI: ${doi}`;
+                });
+
+                el.textContent = `[${label}]`;
+                ed.dom.setAttrib(el, 'title', lines.join('\n'));
+            });
+            this.padAutociteCaretPlaceholder(ed);
+        },
+        /** 段尾不可编辑节点后浏览器/TinyMCE 容易把后续输入新开 <p>，在引用后补零宽空格让光标留在同一段 */
+        padAutociteCaretPlaceholder(ed) {
+            const doc = ed.getDoc();
+            const body = doc.body;
+            if (!body) return;
+            body.querySelectorAll('autocite').forEach((el) => {
+                const next = el.nextSibling;
+                if (next === null) {
+                    el.parentNode.appendChild(doc.createTextNode('\u200b'));
+                    return;
+                }
+                if (next.nodeType === 3) {
+                    if (next.textContent === '\u200b') return;
+                    if (next.textContent === '') {
+                        next.textContent = '\u200b';
+                    }
+                }
+            });
+        },
+        insertAutocite(refIds) {
+            const ed = this.editorInstance;
+            if (!ed) return;
+            const ids = (Array.isArray(refIds) ? refIds : [refIds]).map(String);
+            const dataId = ids.join(',');
+            const escaped = dataId.replace(/"/g, '&quot;');
+
+            if (this._editingAutocite) {
+                this._editingAutocite.setAttribute('data-id', dataId);
+                this._editingAutocite = null;
+                ed.fire('change');
+            } else {
+                if (this._refBookmark) {
+                    ed.selection.moveToBookmark(this._refBookmark);
+                }
+                ed.insertContent(`<autocite data-id="${escaped}" contenteditable="false"></autocite>&#8203;`);
+            }
+            this.renderAutociteInEditor(ed);
+        },
+        removeAutocite() {
+            const ed = this.editorInstance;
+            if (!ed || !this._editingAutocite) return;
+            ed.dom.remove(this._editingAutocite);
+            this._editingAutocite = null;
+            ed.fire('change');
+        },
+        /**
+         * 从当前编辑的 autocite 中去掉指定 p_refer_id；去掉后无 id 则删除整段标签。
+         * ids 为空：删除整段（与 removeAutocite 一致）。
+         */
+        stripAutociteIds(idsToRemove) {
+            const ed = this.editorInstance;
+            if (!ed || !this._editingAutocite) return;
+            const remove = new Set((idsToRemove || []).map((id) => String(id)));
+            const el = this._editingAutocite;
+            this._editingAutocite = null;
+            if (remove.size === 0) {
+                ed.dom.remove(el);
+                ed.fire('change');
+                return;
+            }
+            const parts = this.parseAutociteDataIds(el.getAttribute('data-id') || '');
+            const remaining = parts.filter((id) => !remove.has(String(id)));
+            if (remaining.length === 0) {
+                ed.dom.remove(el);
+            } else {
+                const sorted = this.sortAutociteIdsByCiteNumber(remaining);
+                el.setAttribute('data-id', sorted.join(','));
+                this.renderAutociteInEditor(ed);
+            }
+            ed.fire('change');
+        },
+        /** TinyMCE 会剔除「空」的行内标签；空 autocite 必须在入编辑器前占位，否则合并引用 [1–3] 等整段消失 */
+        normalizeAutociteHtmlForEditor(html) {
+            if (!html || typeof html !== 'string') return html;
+            let out = html.replace(/<autocite([^>]*)>\s*<\/autocite>/gi, '<autocite$1>&#8203;</autocite>');
+            // 与 getSafeContent 标签边界逻辑一致：autocite 左右水平空白改为 &nbsp;，不换行符（避免吃掉段间 \n）
+            out = out.replace(/[^\S\r\n]+(?=<autocite\b)/gi, '&nbsp;');
+            out = out.replace(/(?<=<\/autocite>)[^\S\r\n]+/gi, '&nbsp;');
+            return out;
+        },
         handleSetContent(val) {
             if (!this.editorInstance) return;
 
-            let finalContent = val || '';
+            let finalContent = this.normalizeAutociteHtmlForEditor(val || '');
             // 你的业务逻辑：自动包裹 <p> 标签
             if (!finalContent.includes('wordTableHtml') && !finalContent.startsWith('<p>')) {
                 finalContent = '<p>' + finalContent + '</p>';
@@ -320,7 +497,10 @@ export default {
         },
         getDetail(val) {
             if (this.hasInit == true) {
-                this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
+                this.$nextTick(() => {
+                    const ed = window.tinymce.get(this.tinymceId);
+                    if (ed) ed.setContent(this.normalizeAutociteHtmlForEditor(val || ''));
+                });
             }
         },
         //将字符串添加到富文本编辑器中
@@ -431,7 +611,7 @@ export default {
             return new Blob([u8arr], { type: mime });
         },
         formatHtml(val) {
-        const rawValue = val || ''; // 处理 null
+        const rawValue = this.normalizeAutociteHtmlForEditor(val || ''); // 须先于 cleanEmptyTags，否则空 autocite 被删
         const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
         const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
         const removeBr = /<br\s*\/?>/gi; // 移除所有 br 标签
@@ -456,7 +636,7 @@ export default {
         }
     },
     getSafeContent(val) {
-        const rawValue = val || '';
+        const rawValue = this.normalizeAutociteHtmlForEditor(val || '');
         const cleanEmptyTags = /<([a-zA-Z1-6]+)\b[^>]*><\/\1>/g;
         const replaceSpaces = /\s+(?=<)|(?<=>)\s+/g;
 
@@ -497,9 +677,10 @@ export default {
             window.tinymce.init({
                 ..._this.tinymceOtherInit,
                 trim_span_elements: false, // 禁止修剪内联标签周围的空格
-                extended_valid_elements: 'blue[*]',
-                custom_elements: 'blue',
-                valid_children: '+blue[#text|i|em|b|strong|span],+body[blue],+p[blue]',
+                extended_valid_elements: 'blue[*],autocite[*]',
+                /* ~ 前缀：按行内（类似 span）处理，否则默认当块级会拆段导致引用后强制换行 */
+                custom_elements: 'blue,~autocite',
+                valid_children: '+blue[#text|i|em|b|strong|span],+body[blue|autocite],+p[blue|autocite]',
 
                 inline: false, // 使用 iframe 模式
                 selector: `#${this.tinymceId}`,
@@ -509,7 +690,7 @@ export default {
                 valid_elements:
                     this.type == 'table'
                         ? '*[*]'
-                        : `img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i,myfigure,mytable,wmath${this.valid_elements}`, // 允许的标签和属性
+                        : `img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i,myfigure,mytable,wmath,autocite[data-id|contenteditable|title]${this.valid_elements}`, // 允许的标签和属性
                 // valid_elements: '*[*]', // 允许所有 HTML 标签
                 noneditable_editable_class: 'MathJax',
                 height: this.height,
@@ -541,6 +722,25 @@ export default {
                 font-weight: bold !important;
                 }
 
+                /* inline 与 blue 引用一致，避免 inline-block 在行尾产生多余换行感 */
+                autocite {
+                    display: inline;
+                    vertical-align: baseline;
+                    color: rgb(0, 130, 170);
+                    // font-weight: bold;
+                    cursor: pointer;
+                    padding: 0 2px;
+                    border-radius: 3px;
+                    background-color: rgba(0, 130, 170, 0.08);
+                    user-select: all;
+                    font-size: 12px;
+                    white-space: nowrap;
+                }
+                autocite:hover {
+                    background-color: rgba(0, 130, 170, 0.2);
+                    text-shadow: 0 0 3px rgba(0, 130, 170, 0.3);
+                }
+
                 @keyframes blueGlow {
                     0%,
                     100% {
@@ -559,7 +759,23 @@ export default {
                 },
                 body_class: 'panel-body ',
                 object_resizing: false,
-                toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+                toolbar: (function () {
+                    const tb = _this.toolbar;
+                    const hasCustom =
+                        (Array.isArray(tb) && tb.length > 0) ||
+                        (typeof tb === 'string' && tb.length > 0);
+                    /* 与 content.vue 默认一致，且含 insertRef；避免未传 toolbar 时引用到未定义的变量 */
+                    const defaultToolbar = [
+                        'bold italic |customBlue removeBlue|LateX insertRef| myuppercase myuppercasea Line MoreSymbols|subscript superscript|clearButton|searchreplace'
+                    ];
+                    if (!hasCustom) return defaultToolbar;
+                    const rows = Array.isArray(tb) ? tb : [tb];
+                    return rows.map((row) =>
+                        typeof row === 'string' && row.indexOf('insertRef') === -1
+                            ? row.replace(/\|LateX\|/g, '|LateX insertRef|').replace(/\|\s*LateX\s*\|/g, '| LateX insertRef |')
+                            : row
+                    );
+                })(),
                 menubar: false, // 启用菜单栏并保持必要的项目
                 statusbar: false, // 关闭底部状态栏
                 custom_colors: false,
@@ -626,7 +842,37 @@ export default {
                     let currentPasteImages = [];
                     _this.$commonJS.initEditorButton(_this, ed);
                     var currentWmathElement = null;
+
+                    ed.ui.registry.addButton('insertRef', {
+                        text: 'Ref',
+                        tooltip: 'Insert Reference',
+                        onAction: function () {
+                            const refs = Array.isArray(_this.chanFerForm) ? _this.chanFerForm : [];
+                            if (refs.length === 0) {
+                                _this.$message.warning(_this.$t('wordCite.noRefs'));
+                                return;
+                            }
+                            _this._refBookmark = ed.selection.getBookmark(2);
+                            _this._editingAutocite = null;
+                            _this.$emit('openRefSelector', { currentRefIds: [] });
+                        }
+                    });
+
                     ed.on('click', function (e) {
+                        const autociteEl = e.target.closest('autocite');
+                        if (autociteEl) {
+                            const refs = Array.isArray(_this.chanFerForm) ? _this.chanFerForm : [];
+                            if (refs.length === 0) {
+                                _this.$message.warning(_this.$t('wordCite.noRefs'));
+                                return;
+                            }
+                            const dataIds = _this.parseAutociteDataIds(autociteEl.getAttribute('data-id'));
+                            _this._refBookmark = ed.selection.getBookmark(2);
+                            _this._editingAutocite = autociteEl;
+                            _this.$emit('openRefSelector', { currentRefIds: dataIds });
+                            return;
+                        }
+
                         const wmathElement = e.target.closest('wmath');
                         if (wmathElement) {
                             currentWmathElement = wmathElement; // 保存当前点击的元素
@@ -791,14 +1037,20 @@ export default {
                         const editorBody = ed.getBody();
                         ed.dom.select('wmath', editorBody).forEach(function (wmathElement) {
                             ed.dom.setAttrib(wmathElement, 'contenteditable', 'false');
-                            // ed.dom.addClass(wmathElement, 'non-editable-wmath');
                         });
+                        _this.renderAutociteInEditor(ed);
                         e.content = e.content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
                         e.content = e.content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
                     });
                     ed.on('GetContent', function (e) {
                         e.content = e.content.replace(/<b>/g, '<strong>').replace(/<\/b>/g, '</strong>');
-                        e.content = e.content.replace(/<i>/g, '<em>').replace(/<\/i>/g, '</em>');
+                        e.content = e.content.replace(/<i>/g, '<em>').replace(/<\/em>/g, '</em>');
+                        e.content = e.content.replace(/<\/autocite>\s*&#8203;/gi, '</autocite>');
+                        e.content = e.content.replace(/<\/autocite>\s*\u200b/g, '</autocite>');
+                        e.content = e.content.replace(/<autocite([^>]*)>[^<]*<\/autocite>/gi, function (match, attrs) {
+                            var clean = attrs.replace(/\s*style="[^"]*"/gi, '').replace(/\s*title="[^"]*"/gi, '').replace(/\s*contenteditable="[^"]*"/gi, '');
+                            return '<autocite' + clean + '></autocite>';
+                        });
                     });
                 },
                 paste_preprocess: function (plugin, args) {
@@ -964,7 +1216,8 @@ export default {
         },
         //设置内容
         setContent(value) {
-            window.tinymce.get(this.tinymceId).setContent(value);
+            const ed = window.tinymce.get(this.tinymceId);
+            if (ed) ed.setContent(this.normalizeAutociteHtmlForEditor(value || ''));
         },
         //获取内容
         async getContent(type) {

src/components/page/components/table/content.vue

@@ -12,11 +12,13 @@
                 :isAutomaticUpdate="isAutomaticUpdate"
                 @getContent="getContent"
                 @openLatexEditor="openLatexEditor"
+                @openRefSelector="openRefSelector"
                 @updateChange="updateChange"
                 :value="value"
+                :chanFerForm="chanFerForm"
                 :typesettingType="typesettingType"
                 class="paste-area text-container"
-                :toolbar="!isAutomaticUpdate?['bold italic |customBlue removeBlue|LateX| myuppercase myuppercasea Line MoreSymbols|subscript superscript|clearButton|searchreplace']:['bold italic |customBlue removeBlue| myuppercase myuppercasea Line MoreSymbols|subscript superscript|clearButton|searchreplace']"
+                :toolbar="toolbarConfig"
                 style="
                     /* white-space: pre-line; */
                     line-height: 12px;
@@ -36,10 +38,20 @@
 <script>
 import Tinymce from '@/components/page/components/Tinymce';
 export default {
-    props: ['value','isAutomaticUpdate','height','id'],
+    props: ['value', 'isAutomaticUpdate', 'height', 'id', 'chanFerForm'],
     components: {
         Tinymce
     },
+    computed: {
+        toolbarConfig() {
+            // Ref 必须始终出现在配置里：TinyMCE 只在 init 时读一次 toolbar，若首屏 chanFerForm 为空则按钮会永久缺失
+            const refBtn = ' insertRef';
+            if (!this.isAutomaticUpdate) {
+                return [`bold italic |customBlue removeBlue|LateX${refBtn}| myuppercase myuppercasea Line MoreSymbols|subscript superscript|clearButton|searchreplace`];
+            }
+            return [`bold italic |customBlue removeBlue${refBtn}| myuppercase myuppercasea Line MoreSymbols|subscript superscript|clearButton|searchreplace`];
+        }
+    },
     watch: {
         lineStyle() {}
     },
@@ -85,8 +97,29 @@ export default {
             this.$refs.tinymceChild1.getContent(type);
         },
         getContent(type, content) {
-       
             this.$emit('getContent', type, content);
+        },
+        openRefSelector(data) {
+            this.$emit('openRefSelector', data);
+        },
+        insertAutocite(refId) {
+            this.$refs.tinymceChild1.insertAutocite(refId);
+        },
+        removeAutocite() {
+            this.$refs.tinymceChild1.removeAutocite();
+        },
+        /** 从当前 autocite 的 data-id 中移除指定 id；无剩余则删标签；未选 id 时删整段 */
+        stripAutociteIds(ids) {
+            if (this.$refs.tinymceChild1 && typeof this.$refs.tinymceChild1.stripAutociteIds === 'function') {
+                this.$refs.tinymceChild1.stripAutociteIds(ids);
+            }
+        },
+        /** 参考文献异步到达后刷新编辑器内 autocite 数字（供父组件在打开弹窗 / fetch 完成后调用） */
+        refreshAutociteDisplay() {
+            const t = this.$refs.tinymceChild1;
+            if (t && typeof t.renderAutociteInEditor === 'function' && t.editorInstance) {
+                t.renderAutociteInEditor(t.editorInstance);
+            }
         }
     }
 };

src/components/page/components/table/word.vue

@@ -369,7 +369,8 @@
                         </div>
                     </div>
                 </template>
-                <!-- <slot name="refrences"></slot> -->
+                <div main-id="References"></div>
+                <slot name="refrences"></slot>
             </div>
 
             <el-tabs
@@ -962,7 +963,12 @@
         </div>
 
         <!-- 操作按钮 -->
-        <div v-if="isMenuVisible || bubbleVisible" class="wps-two-layer-bar selection-bubble no-select" :style="bubbleStyle">
+        <div
+            v-if="isMenuVisible || bubbleVisible"
+            class="wps-two-layer-bar selection-bubble no-select"
+            :style="bubbleStyle"
+            @click.stop
+        >
             <div class="bar-row" v-if="currentData">
                 <div v-if="currentData.type == 0" class="h-group">
                     <span :class="['h-item', { active: currentData.is_h1 == 1 }]" @click="changeTitle(currentData.is_h1 ? 0 : 1)">H1</span>
@@ -976,9 +982,21 @@
                 <div v-if="isEditComment" class="menu-item comment-feat" @mousedown="cacheSelection" @click="menuAction('comment')">
                     <i class="el-icon-chat-line-square"></i><span>{{ $t('commonTable.Annotations') }}</span>
                 </div>
-                <div class="row-divider" v-if="isEditComment && currentData.type == 0"></div>
+                <div class="row-divider" v-if="currentData.type == 0 && (isEditComment || manuscriptAutociteContext)"></div>
 
-                <div class="menu-item menu-link" v-if="currentData.type == 0 && !['figure', 'table'].includes(currentTag)" @click="menuAction('link')">
+                <template v-if="manuscriptAutociteContext && currentData && currentData.type == 0">
+                    <div class="menu-item menu-autocite-ref" @click.stop="menuAction('editRefCite')">
+                        <i class="el-icon-edit-outline"></i><span>{{ $t('wordCite.modifyRef') }}</span>
+                    </div>
+                    <div class="menu-item menu-autocite-ref" @click.stop="menuAction('removeRefCite')">
+                        <i class="el-icon-remove-outline"></i><span>{{ $t('wordCite.removeRefTag') }}</span>
+                    </div>
+                </template>
+                <div
+                    class="menu-item menu-link"
+                    v-if="currentData.type == 0 && !['figure', 'table'].includes(currentTag) && !manuscriptAutociteContext"
+                    @click="menuAction('link')"
+                >
                     <i class="el-icon-link"></i><span>{{ $t('commonTable.Association') }}</span>
                 </div>
                 <div class="menu-item menu-link menu-jump" v-if="currentData.type == 0 && ['figure', 'table'].includes(currentTag)" @click="menuAction('jump')">
@@ -1072,6 +1090,13 @@ export default {
                 return [];
             }
         },
+        chanFerForm: {
+            type: Array,
+
+            default() {
+                return [];
+            }
+        },
         comments: {
             type: [Array, Object], // 允许数组或对象
 
@@ -1155,6 +1180,8 @@ export default {
             editorsInitialized: {}, // 用于存储每个编辑器实例
             mediaUrl: mediaUrl, //
             lastTag: null,
+            /** 稿面点击 <autocite> 时记录，用于浮动条「修改引用 / 移除引用」 */
+            manuscriptAutociteContext: null,
             isEditComment: false,
             isUserEditComment: false,
             typesettingType: 1,
@@ -1244,6 +1271,47 @@ export default {
         }
     },
     computed: {
+        citeMap() {
+            // 1) 优先使用参考文献列表顺序（与右侧 References 一致）
+            const mapFromRefs = {};
+            const refs = Array.isArray(this.chanFerForm) ? this.chanFerForm : [];
+            refs.forEach((row, idx) => {
+                const key = row && row.p_refer_id != null ? String(row.p_refer_id) : '';
+                if (key) mapFromRefs[key] = idx + 1;
+            });
+            if (Object.keys(mapFromRefs).length > 0) return mapFromRefs;
+
+            // 2) 兜底：按正文首次出现顺序编号（支持 data-id 含多个逗号分隔 id）
+            const order = [];
+            const re = /<autocite\s+data-id="([^"]+)"/gi;
+            const paragraphs =
+                Array.isArray(this.wordList) && this.wordList.length > 0
+                    ? this.wordList
+                    : Array.isArray(this.contentList)
+                    ? this.contentList
+                    : [];
+
+            paragraphs.forEach((p) => {
+                const candidates = [];
+                if (p && typeof p.text === 'string') candidates.push(p.text);
+                if (p && typeof p.content === 'string') candidates.push(p.content);
+                candidates.forEach((raw) => {
+                    re.lastIndex = 0;
+                    let m;
+                    while ((m = re.exec(raw)) !== null) {
+                        m[1].split(',').forEach((part) => {
+                            const id = part.trim();
+                            if (id && !order.includes(id)) order.push(id);
+                        });
+                    }
+                });
+            });
+
+            return order.reduce((acc, id, idx) => {
+                acc[id] = idx + 1;
+                return acc;
+            }, {});
+        },
         sortedProofreadingList() {
             const order = [2, 1, 3];
             const rank = { 2: 0, 1: 1, 3: 2 };
@@ -1355,6 +1423,90 @@ export default {
         this.editors = {};
     },
     methods: {
+// 1. 引用序号合并：两项连续 1, 2；三项及以上连续 1-3（与富文本 autocite data-id 多 id 一致）
+formatCiteNumbers(nums) {
+    if (!nums || !nums.length) return "";
+    const sorted = [...new Set(nums)].sort((a, b) => a - b);
+    const result = [];
+    let i = 0;
+    while (i < sorted.length) {
+        let j = i;
+        while (j < sorted.length - 1 && sorted[j + 1] === sorted[j] + 1) j++;
+        if (j - i >= 2) {
+            result.push(`${sorted[i]}–${sorted[j]}`);
+        } else {
+            for (let k = i; k <= j; k++) result.push(sorted[k]);
+        }
+        i = j + 1;
+    }
+    return result.join(', ');
+},
+
+/** 合并引用 tooltip / title 行按正文序号排列，与 [2–4, 6] 标签一致 */
+sortAutociteIdsByCiteNumber(ids) {
+    const uniq = [...new Set(ids)];
+    const map = this.citeMap || {};
+    return uniq.sort((a, b) => {
+        const na = map[a];
+        const nb = map[b];
+        const ha = na != null && na !== '';
+        const hb = nb != null && nb !== '';
+        if (ha && hb) return Number(na) - Number(nb);
+        if (ha) return -1;
+        if (hb) return 1;
+        return String(a).localeCompare(String(b));
+    });
+},
+
+// 2. 最终引用标签渲染器 (将 autocite 转换为 [n])；支持 data-id="a,b,c" 单标签 或 多个相邻单 id 标签（旧数据）
+renderCiteLabels(html) {
+    const citeGroupRe = /(?:<autocite\s+data-id="([^"]+)"\s*><\/autocite>\s*)+/gi;
+    return html.replace(citeGroupRe, (groupMatch) => {
+        const ids = [];
+        const innerRe = /<autocite\s+data-id="([^"]+)"\s*><\/autocite>/gi;
+        let m;
+        while ((m = innerRe.exec(groupMatch)) !== null) {
+            m[1].split(',').forEach((part) => {
+                const id = part.trim();
+                if (id) ids.push(id);
+            });
+        }
+        const refList = Array.isArray(this.chanFerForm) ? this.chanFerForm : [];
+        const refMap = refList.reduce((acc, item) => {
+            const key = item && item.p_refer_id != null ? String(item.p_refer_id) : '';
+            if (key) acc[key] = item;
+            return acc;
+        }, {});
+
+        const sortedIds = this.sortAutociteIdsByCiteNumber(ids);
+        const nums = sortedIds.map((id) => this.citeMap && this.citeMap[id]).filter((n) => n != null);
+        const label = nums.length > 0 ? this.formatCiteNumbers(nums) : '?';
+
+        const lines = sortedIds.map((id) => {
+            const no = this.citeMap && this.citeMap[id] != null ? this.citeMap[id] : '?';
+            const ref = refMap[id];
+            if (!ref) {
+                return this.$t('wordCite.notFoundById', { id: no === '?' ? id : no });
+            }
+
+            const content =
+                ref.refer_frag ||
+                [ref.author, ref.title, ref.joura, ref.dateno].filter(Boolean).join(' ').trim() ||
+                '[?]';
+            const doi = ref.doilink || ref.isbn || ref.doi || '[?]';
+            return `[${no}] ${content}&#10;DOI: ${doi}`;
+        });
+
+        const escAttr = (s) =>
+            String(s || '')
+                .replace(/&/g, '&amp;')
+                .replace(/"/g, '&quot;')
+                .replace(/</g, '&lt;');
+        const dataIdAttr = escAttr(sortedIds.join(','));
+        const titleAttr = escAttr(lines.join('\n'));
+        return `<autocite data-id="${dataIdAttr}" title="${titleAttr}">[${label}]</autocite>`;
+    });
+},
         getInvolvedPMain(range) {
             // 1. 找到起始节点所属的 .pMain
             let startNode = range.startContainer;
@@ -1479,6 +1631,7 @@ export default {
             if(this.isPreview)return;
             // 如果点在气泡内，不关
             if (e.target.closest('.bubble-container')) return;
+            if (e.target.closest('.selection-bubble')) return;
 
             const selection = window.getSelection();
             const hasSelection = selection && selection.toString().trim() !== '';
@@ -1491,6 +1644,7 @@ export default {
 
                 this.currentData = {};
                 this.currentId = '';
+                this.manuscriptAutociteContext = null;
 
                 this.clearActiveGlow(); // 清除高亮
             }
@@ -1939,6 +2093,132 @@ export default {
 
             this.isMenuVisible = false;
         },
+        escapeHtmlAttr(val) {
+            return String(val == null ? '' : val).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+        },
+        /** 同一组 data-id 不同顺序视为相同，便于稿面排序后与存储正文对齐 */
+        normalizeAutociteDataIdKey(str) {
+            const parts = String(str || '')
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean);
+            parts.sort((a, b) => {
+                const na = Number(a);
+                const nb = Number(b);
+                if (!isNaN(na) && !isNaN(nb)) return na - nb;
+                return String(a).localeCompare(String(b));
+            });
+            return parts.join(',');
+        },
+        /** 按 data-id 替换第一段匹配的 <autocite>；兼容稿面已排序、正文存储未排序的情况 */
+        replaceFirstAutociteByDataId(html, dataId, replacement) {
+            if (!html || typeof html !== 'string' || dataId == null || dataId === '') return html;
+            const esc = String(dataId).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const reExact = new RegExp(`<autocite\\s[^>]*\\bdata-id="${esc}"[^>]*>[\\s\\S]*?<\\/autocite>`, 'i');
+            let out = html.replace(reExact, replacement);
+            if (out !== html) return out;
+
+            const keyWant = this.normalizeAutociteDataIdKey(dataId);
+            if (!keyWant) return html;
+
+            const _this = this;
+            let done = false;
+            return html.replace(/<autocite\s([^>]*)>([\s\S]*?)<\/autocite>/gi, function (full, attrs) {
+                if (done) return full;
+                const dm = attrs.match(/\bdata-id\s*=\s*"([^"]*)"/i) || attrs.match(/\bdata-id\s*=\s*'([^']*)'/i);
+                if (!dm) return full;
+                if (_this.normalizeAutociteDataIdKey(dm[1]) !== keyWant) return full;
+                done = true;
+                return replacement;
+            });
+        },
+        openManuscriptRefSelector() {
+            const ctx = this.manuscriptAutociteContext;
+            if (!ctx || !ctx.dataId) return;
+            const refs = Array.isArray(this.chanFerForm) ? this.chanFerForm : [];
+            if (refs.length === 0) {
+                this.$message.warning(this.$t('wordCite.noRefs'));
+                return;
+            }
+            const parts = String(ctx.dataId)
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean);
+            this.$emit('openRefSelector', { currentRefIds: parts, source: 'manuscript' });
+        },
+        applyManuscriptAutocite(refIds) {
+            const ctx = this.manuscriptAutociteContext;
+            if (!ctx || !ctx.am_id) return;
+            const item = this.wordList.find((w) => w.am_id == ctx.am_id);
+            if (!item || typeof item.content !== 'string') return;
+            const ids = (Array.isArray(refIds) ? refIds : [refIds]).map(String);
+            const dataId = ids.join(',');
+            const newTag = `<autocite data-id="${this.escapeHtmlAttr(dataId)}"></autocite>`;
+            const newContent = this.replaceFirstAutociteByDataId(item.content, ctx.dataId, newTag);
+            if (newContent === item.content) {
+                this.$message.warning(this.$t('wordCite.citeUpdateFail'));
+                return;
+            }
+            this.$set(item, 'content', newContent);
+            if (item.text !== undefined) this.$set(item, 'text', newContent);
+            this.manuscriptAutociteContext = null;
+            this.$emit('saveContent', newContent, ctx.am_id);
+        },
+        removeManuscriptAutocite() {
+            this.stripManuscriptAutociteIds([]);
+        },
+        /**
+         * 从稿面当前 autocite 的 data-id 中移除给定 id；移除后无 id 则删掉整段标签。
+         * ids 为空：删除整段引用（稿面「移除引用」浮动按钮）。
+         */
+        stripManuscriptAutociteIds(idsToRemove) {
+            const ctx = this.manuscriptAutociteContext;
+            if (!ctx || !ctx.am_id) return;
+            const item = this.wordList.find((w) => w.am_id == ctx.am_id);
+            if (!item || typeof item.content !== 'string') return;
+            const removeSet = new Set((idsToRemove || []).map((id) => String(id)));
+            if (removeSet.size === 0) {
+                const newContent = this.replaceFirstAutociteByDataId(item.content, ctx.dataId, '');
+                if (newContent === item.content) {
+                    this.$message.warning(this.$t('wordCite.citeUpdateFail'));
+                    return;
+                }
+                this.$set(item, 'content', newContent);
+                if (item.text !== undefined) this.$set(item, 'text', newContent);
+                this.manuscriptAutociteContext = null;
+                this.$emit('saveContent', newContent, ctx.am_id);
+                return;
+            }
+
+            const keyWant = this.normalizeAutociteDataIdKey(ctx.dataId);
+            const _this = this;
+            let done = false;
+            const newHtml = item.content.replace(/<autocite\s([^>]*)>([\s\S]*?)<\/autocite>/gi, function (full, attrs) {
+                if (done) return full;
+                const dm = attrs.match(/\bdata-id\s*=\s*"([^"]*)"/i) || attrs.match(/\bdata-id\s*=\s*'([^']*)'/i);
+                if (!dm) return full;
+                if (_this.normalizeAutociteDataIdKey(dm[1]) !== keyWant) return full;
+                done = true;
+                const parts = dm[1]
+                    .split(',')
+                    .map((s) => s.trim())
+                    .filter(Boolean);
+                const remaining = parts.filter((id) => !removeSet.has(String(id)));
+                if (remaining.length === 0) return '';
+                const sorted = _this.sortAutociteIdsByCiteNumber(remaining);
+                const newDataId = sorted.join(',');
+                return `<autocite data-id="${_this.escapeHtmlAttr(newDataId)}"></autocite>`;
+            });
+
+            if (!done || newHtml === item.content) {
+                this.$message.warning(this.$t('wordCite.citeUpdateFail'));
+                return;
+            }
+            this.$set(item, 'content', newHtml);
+            if (item.text !== undefined) this.$set(item, 'text', newHtml);
+            this.manuscriptAutociteContext = null;
+            this.$emit('saveContent', newHtml, ctx.am_id);
+        },
         handleAIProofreading() {
             if (this.currentId) {
                 this.$api
@@ -1996,6 +2276,12 @@ export default {
                 case 'delete':
                     this.onDelete();
                     break;
+                case 'editRefCite':
+                    this.openManuscriptRefSelector();
+                    break;
+                case 'removeRefCite':
+                    this.removeManuscriptAutocite();
+                    break;
             }
             this.closeMenu();
         },
@@ -2060,7 +2346,7 @@ export default {
             let selectedText = tempDiv.innerText.trim().replace(/\s+/g, ' ');
 
          
-            const allowedTags = ['sup', 'sub', 'strong', 'em', 'b', 'i', 'blue', 'tr', 'td'];
+            const allowedTags = ['sup', 'sub', 'strong', 'em', 'b', 'i', 'blue', 'autocite', 'tr', 'td'];
             function preserveTags(node) {
                 if (node.nodeType === 3) return node.nodeValue; // 文本节点
                 if (node.nodeType === 1 && allowedTags.includes(node.nodeName.toLowerCase())) {
@@ -2804,6 +3090,14 @@ export default {
             }
             this.currentTag = '';
             this.currentTagData = null; // 必须重置，防止带入旧数据
+            this.manuscriptAutociteContext = null;
+            const clickedAutocite = event.target.closest('autocite');
+            if (clickedAutocite && !this.isPreview) {
+                const dataId = clickedAutocite.getAttribute('data-id') || '';
+                if (dataId) {
+                    this.manuscriptAutociteContext = { am_id: id, dataId };
+                }
+            }
             const clickedTag = event.target.closest('myfigure, mytable, myh3');
                 if (clickedTag) {
                     this.currentTag = clickedTag.tagName.toLowerCase().replace('my', '');
@@ -2947,6 +3241,7 @@ export default {
                 // 如果你希望滚动时保持高亮，可以不清空这一行
                 this.currentId = '';
                 this.currentData = {};
+                this.manuscriptAutociteContext = null;
 
                 // 4. 清除浏览器原生的文字选中蓝色区域
                 // 这样滚动时就不会有一大片蓝色的选区跟着走，视觉上更干净
@@ -3042,7 +3337,7 @@ export default {
             const src = String(text || '');
 
             // 1) 用一个全局、区分大小写不敏感的 wmath 提取正则
-            const wmathRe = /<wmath\b[^>]*>[\s\S]*?<\/wmath\s*>/gi;
+            const wmathRe = /<(wmath|autocite)\b[^>]*>[\s\S]*?<\/(wmath|autocite)\s*>/gi;
 
             // 2) 把原文切成： [非wmath片段, wmath片段, 非wmath片段, wmath片段, ...]
             const parts = [];
@@ -3133,7 +3428,7 @@ export default {
 >${rawHit}</span>`;
                 html = html.split(ph).join(span);
             });
-
+            html = this.renderCiteLabels(html);
             // 6) 空文本占位图（沿用你的逻辑，且不会影响 wmath）
             if (type === 0 && html.trim() === '') {
                 html += `<img contenteditable="false" src="${
@@ -3148,7 +3443,7 @@ export default {
             const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
             // 1) 切分出 wmath 与非 wmath 片段
-            const wmathRe = /<wmath\b[^>]*>[\s\S]*?<\/wmath\s*>/gi;
+            const wmathRe = /<(wmath|autocite)\b[^>]*>[\s\S]*?<\/(wmath|autocite)\s*>/gi;
             const parts = [];
             let lastIdx = 0,
                 m;
@@ -3218,7 +3513,7 @@ export default {
                 // 用 split/join 精确回填，避免再走正则
                 html = html.split(ph).join(span);
             });
-
+            html = this.renderCiteLabels(html);
             // 6) 空文本时按你原逻辑补图标（不会影响 wmath）
             if (type === 0 && html.trim() === '') {
                 html += `<img contenteditable="false" src="${this.imagePath || ''}" alt="" style="width:20px;height:20px;opacity:.6;">`;
@@ -3231,7 +3526,7 @@ export default {
             const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
             // 1) 切分出 wmath 与非 wmath 片段
-            const wmathRe = /<wmath\b[^>]*>[\s\S]*?<\/wmath\s*>/gi;
+            const wmathRe = /<(wmath|autocite)\b[^>]*>[\s\S]*?<\/(wmath|autocite)\s*>/gi;
             const parts = [];
             let lastIdx = 0,
                 m;
@@ -3301,7 +3596,7 @@ export default {
                 // 用 split/join 精确回填，避免再走正则
                 html = html.split(ph).join(span);
             });
-
+            html = this.renderCiteLabels(html);
             // 6) 空文本时按你原逻辑补图标（不会影响 wmath）
             if (type === 0 && html.trim() === '') {
                 html += `<img contenteditable="false" src="${this.imagePath || ''}" alt="" style="width:20px;height:20px;opacity:.6;">`;
@@ -4057,6 +4352,18 @@ export default {
 .comment-feat {
     color: #f56c6c;
 }
+/* 稿面 autocite：与 Association 互斥，品牌色 */
+.menu-autocite-ref {
+    color: #006699 !important;
+    font-weight: 500;
+}
+.menu-autocite-ref i {
+    color: #006699;
+}
+.menu-autocite-ref:hover {
+    background-color: rgba(0, 102, 153, 0.08) !important;
+    color: #006699 !important;
+}
 .menu-link {
     color: #2b81ef;
 }
@@ -4192,7 +4499,7 @@ export default {
     top: 26px;
     left: 0px;
 }
-/deep/.rightTabs .first-pane-width {
+::v-deep .rightTabs .first-pane-width {
     width: 200px; /* 规定第一个面板内容的宽度 */
 }
 .arrow-group {
@@ -4395,6 +4702,18 @@ wmath {
     text-shadow: 0 0 3px #09c2fb, 0 0 4px rgba(0, 130, 170, 0.3);
 }
 
+/* 正文预览：引用直接用语义标签 autocite（原 blue 包装已移除） */
+::v-deep autocite {
+    display: inline;
+    vertical-align: baseline;
+    color: rgb(0, 130, 170) !important;
+    /* font-weight: bold; */
+    /* 勿用 cursor:help，浏览器会显示“问号”帮助光标；悬停仍可用原生 title 提示 */
+    cursor: inherit;
+    text-decoration: none;
+    background-color: rgba(0, 130, 170, 0.08);
+}
+
 ::v-deep myfigure *,
 ::v-deep mytable * {
     color: inherit !important;

src/components/page/crawlTaskMonitor.vue

@@ -1,5 +1,7 @@
 <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">
@@ -7,7 +9,6 @@
           <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')"
@@ -15,95 +16,129 @@
           size="small"
           class="search-box"
           clearable
-          @keyup.enter.native="handleFilter"
+          @input="handleFilter"
         />
-        
-        <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearchClick">
+        <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>
+        
+        <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="item.state === 'running' ? 'is-active' : 'is-paused'"
-      >
+      <div v-for="item in list" :key="item.id" class="task-row" :class="'status-' + item.stateClass">
         <div class="col-base">
-          <div class="status-indicator">
-            <div class="status-dot"></div>
-          </div>
-          <div class="info-content">
-            <div class="task-name-row">
-              <span class="task-id">#{{ item.id }}</span>
-              <span class="task-name">{{ item.task_name }}</span>
-            </div>
-            <div class="task-meta">
-              <el-tag size="mini" effect="plain" type="info">{{ item.source }}</el-tag>
-              <span class="time-label"><i class="el-icon-time"></i> {{ item.create_time }}</span>
-            </div>
+          <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-block main">
-            <span class="m-label">{{ $t('crawlTask.metricExperts') }}</span>
-            <span class="m-value expert-count">{{ item.expert_count }}</span>
+          <div class="metric-item">
+            <span class="m-label">{{ $t('crawlTask.source') }}</span>
+            <span class="m-value mini-text">{{ item.source }}</span>
           </div>
-          <div class="divider"></div>
-          <div class="metric-block">
-            <span class="m-label">{{ $t('crawlTask.metricPages') }}</span>
-            <span class="m-value">{{ item.last_page }} <small>/ {{ item.total_pages }}</small></span>
+          <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-progress">
-          <div class="prog-text">
-            <span>{{ $t('crawlTask.progress') }}</span>
-            <span class="percent">{{ item.progress }}%</span>
+        <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>
-          <el-progress 
-            :percentage="item.progress" 
-            :show-text="false" 
-            :stroke-width="6"
-            :color="progressStrokeColor(item)"
-          />
         </div>
 
         <div class="col-action">
-          <div class="switch-wrapper">
-            <span class="state-text" :class="item.state">{{
-              item.state === 'running' ? $t('crawlTask.stateRunning') : $t('crawlTask.stateStopped')
-            }}</span>
-            <el-switch
-              v-model="item.state"
-              active-value="running"
-              inactive-value="paused"
-              active-color="#13ce66"
-              inactive-color="#c0c4cc"
-              @change="handleToggleTask(item)"
+          <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>
-          <el-button
-            type="primary"
-            size="mini"
-            plain
-            icon="el-icon-refresh-right"
-            :loading="runOnceLoadingId === item.id"
-            @click="handleRunOnce(item)"
-          >
-            {{ $t('crawlTask.runOnceBtn') }}
-          </el-button>
+          <div class="btn-group">
+            <div class="crawl-once-frame">
+              <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>
+            </div>
+            <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>
+          </div>
         </div>
       </div>
     </div>
@@ -114,27 +149,12 @@
         layout="total, sizes, prev, pager, next, jumper"
         :current-page.sync="currentPage"
         :page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
+        :page-sizes="[5, 10, 20, 50]"
         :total="total"
         @size-change="handleSizeChange"
         @current-change="handlePageChange"
       />
     </div>
-
-    <el-dialog :title="$t('crawlTask.addKeyword')" :visible.sync="addDialogVisible" width="460px" @closed="resetAddForm">
-      <el-form label-width="100px" 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" />
-        </el-form-item>
-      </el-form>
-      <div slot="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>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -151,107 +171,212 @@ export default {
       list: [],
       addDialogVisible: false,
       addLoading: false,
+      runOnceLoading: false,
       runOnceLoadingId: null,
-      addForm: { field: '', runNow: false }
+      addForm: {
+        field: '',
+        runNow: false
+      }
     };
   },
   created() {
     this.fetchList();
   },
   methods: {
-    /** 停止态用灰条，避免 exception 大红；运行中未满用蓝，满格用绿 */
-    progressStrokeColor(item) {
-      if (item.state !== 'running') return '#c0c4cc';
-      if (item.progress >= 100) return '#67c23a';
-      return '#409eff';
+    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 total = Number(item.total_pages || 0);
-      const current = Number(item.last_page || 0);
-      let progress = total > 0 ? (current / total) * 100 : 0;
-      
+      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,
-        task_name: item.field || '-',
-        source: (item.source || 'PubMed'),
+        id: item.expert_fetch_id || item.id || 0,
+        field: item.field || '',
         expert_count: item.expert_count || 0,
-        total_pages: total,
-        last_page: current,
-        progress: Number(progress.toFixed(1)),
-        state: Number(item.state) === 0 ? 'running' : 'paused',
-        create_time: item.ctime_text || '-'
+        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,
+          keyword: this.searchText || '',
           pageIndex: this.currentPage,
-          pageSize: this.pageSize,
-          state: this.filterStatus !== '' ? this.filterStatus : undefined
+          pageSize: this.pageSize
         };
-        const res = await this.$api.post('api/expert_manage/getFetchList', params);
-        if (res.code === 0) {
-          this.list = res.data.list.map(this.normalizeItem);
-          this.total = res.data.total;
+        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;
       }
     },
-    async handleToggleTask(item) {
-      const isNowRunning = item.state === 'running';
-      const newState = isNowRunning ? '0' : '1';
+    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.code === 0) {
-          this.$message.success(isNowRunning ? this.$t('crawlTask.taskRunningMsg') : this.$t('crawlTask.taskStoppedMsg'));
+        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 {
-          item.state = isNowRunning ? 'paused' : 'running';
-          this.$message.error(res.msg || this.$t('crawlTask.operationFail'));
+          this.$message.error((res && res.msg) || (isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed')));
         }
       } catch (e) {
-        item.state = isNowRunning ? 'paused' : 'running';
+        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: item.task_name });
-        if (res.code === 0) {
-          this.$message.success(this.$t('crawlTask.runOnceQueued'));
-          this.fetchList();
+        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;
       }
     },
-    // 其余分页/弹窗逻辑
-    handleFilter() { this.currentPage = 1; this.fetchList(); },
-    handleSearchClick() { this.handleFilter(); },
-    handleSizeChange(val) { this.pageSize = val; this.fetchList(); },
-    handlePageChange(val) { this.currentPage = val; this.fetchList(); },
-    openAddDialog() { this.addDialogVisible = true; },
-    resetAddForm() { this.addForm = { field: '', runNow: false }; this.addLoading = false; },
-    async submitAddKeyword() {
-      if (!this.addForm.field.trim()) return this.$message.warning(this.$t('crawlTask.enterKeyword'));
-      this.addLoading = true;
-      try {
-        const res = await this.$api.post('api/expert_manage/addFetchField', { field: this.addForm.field });
-        if (res.code === 0) {
-          this.$message.success(this.$t('crawlTask.addKeywordSuccess'));
-          if (this.addForm.runNow) {
-            await this.$api.post('api/expert_finder/fetchOneField', { field: this.addForm.field });
-          }
-          this.addDialogVisible = false;
-          this.fetchList();
-        }
-      } finally { this.addLoading = false; }
+    handleAction(msg, item) {
+      if (msg === 'logs') {
+        this.$message.info(`${this.$t('crawlTask.viewLogs')}: #${item.id}`);
+        return;
+      }
+      this.$message.info(msg);
     }
   }
 };
@@ -259,86 +384,145 @@ export default {
 
 <style scoped>
 .monitor-container {
-  padding: 20px;
-  background: #f5f7fa;
-  min-height: calc(100vh - 100px);
+  padding:0px 20px;
+  background: #f4f7f9;
+  min-height: 100vh;
+  color: #334155;
 }
 
-/* 控制面板 */
-.control-panel {
+/* 统计卡片 */
+.stat-overview { display: flex; gap: 16px; margin-bottom: 24px; }
+.stat-card {
   background: #fff;
-  padding: 12px 20px;
+  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;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
 }
-.panel-left { display: flex; gap: 15px; }
-.search-box { width: 220px; }
+.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: 12px;
-  padding: 4px 15px;
-  border-radius: 10px;
+  margin-bottom: 8px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
-  transition: all 0.3s;
-  border-left: 5px solid #dcdfe6;
+  padding: 12px 20px;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+.status-paused {
+  background: #f3f4f6;
 }
 .task-row:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
 }
-.task-row.is-active { border-left-color: #409eff; }
-.task-row.is-paused { background: #fbfbfc; border-left-color: #909399; opacity: 0.9; }
 
-/* 1. 基础信息列 */
-.col-base { flex: 1.5; display: flex; align-items: flex-start; gap: 15px; }
-.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #909399; margin-top: 6px; }
-.is-active .status-dot { background: #13ce66; box-shadow: 0 0 8px #13ce66; animation: pulse 2s infinite; }
+/* 列定义 */
+.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; }
 
-.task-id { font-family: monospace; color: #909399; font-size: 12px; margin-right: 8px; }
-.task-name { font-size: 14px; font-weight: bold; color: #303133; }
-.task-meta { margin-top: 6px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #909399; }
-
-/* 2. 指标展示列 */
-.col-metrics { flex: 1.2; display: flex; align-items: center; justify-content: space-around; }
-.metric-block { text-align: center; }
-.m-label { font-size: 12px; color: #909399; display: block; margin-bottom: 4px; }
-.m-value { font-size: 18px; font-weight: 600; color: #606266; }
-.m-value small { font-weight: normal; font-size: 12px; color: #888; }
-.expert-count { color: #006699; font-size: 16px; } /* 专家数高亮 */
-.divider { width: 1px; height: 35px; background: #ebeef5; }
-
-/* 3. 进度条列 */
-.col-progress { flex: 1.2; padding: 0 30px; }
-.prog-text { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; color: #606266; }
-.percent { font-weight: bold; color: #409eff; }
-
-/* 4. 操作列 */
-.col-action { flex: 1.1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
-.switch-wrapper {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-right: 6px;
-  transform: translateX(-6px);
+/* 状态点 */
+.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;
 }
-.state-text { font-size: 11px; font-weight: bold; }
-.state-text.running { color: #13ce66; }
-.state-text.paused { color: #909399; }
+.status-done .status-dot { background: #10b981; }
+.status-paused .status-dot { background: #ef4444; }
+.status-error .status-dot { background: #ef4444; }
 
-/* 分页 */
-.pagination-container { margin-top: 25px; text-align: right; }
+/* 文字样式 */
+.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 {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+/* 单次抓取按钮单独线框（与右侧启停区分） */
+.crawl-once-frame {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border: 1px solid #006699;
+  border-radius: 6px;
+  background: #fff;
+  line-height: 1;
+  box-sizing: border-box;
+}
+.crawl-once-frame .op-run-once {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.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% { opacity: 1; }
-  50% { opacity: 0.5; }
-  100% { opacity: 1; }
+  0% { transform: scale(1); opacity: 0.8; }
+  100% { transform: scale(2.5); opacity: 0; }
 }
 </style>

src/components/page/publishRefernceEditor.vue

@@ -124,7 +124,7 @@ export default {
 			}, 
             // 5----重新获取加载参考文献
 			changeRefer(val) {
-				console.log('重新获取参考文献')
+				
 				this.$api
 					.post('api/Production/getReferList', {
 						'p_article_id': this.p_article_id