diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 28d651c..6634b84 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -1,8 +1,9 @@
 :root {
-	--primary-comment-deep: #00BFFF;    /* 深天蓝：用于边框、标题、重要按钮 */
-	--primary-comment-main: #87CEEB;    /* 天蓝色：主色调，用于普通高亮 */
-	--primary-comment-light: #B0E2FF;   /* 浅天蓝：用于鼠标悬停 (hover) 效果 */
-	--primary-comment-bg: #F0F8FF;      /* 爱丽丝蓝：最浅底色，用于批注框背景 */
+	--primary-comment-deep: #ffcf30;   
+	--primary-comment-main: #87CEEB;    
+	--primary-comment-light: #ffcf30;  
+	--primary-comment-bg: #ffe796;     
+	--primary-comment-font-deep: #ff9814;
   }
 * {
 	margin: 0;
diff --git a/src/common/js/commonJS.js b/src/common/js/commonJS.js
index 7b859a4..eac128e 100644
--- a/src/common/js/commonJS.js
+++ b/src/common/js/commonJS.js
@@ -843,7 +843,7 @@ export default {
             // 使用正则表达式删除属性（保留 data-latex）
             let updatedAttributes = attributes.replace(/\s([a-zA-Z0-9-]+)(="[^"]*")?/g, function (attrMatch, attrName) {
 
-                if (attrName === "data-latex") {
+                if (attrName === "data-latex" || attrName === "data-id") {
                     return attrMatch;
                 }
                 if (type == 'table' && tag == 'img' && (attrName === "src" || attrName === "width" || attrName === "height")) {
@@ -856,9 +856,9 @@ export default {
         });
         // 2. 删除所有不需要的标签 (除 `strong`, `em`, `sub`, `sup`, `b`, `i` 外的所有标签)
         if (type == 'table') {
-            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|img))[^>]+>/g, ''); // 删除不需要的标签
+            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|img|myfigure|mytable))[^>]+>/g, ''); // 删除不需要的标签
         } else {
-            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath))[^>]+>/g, ''); // 删除不需要的标签
+            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|myfigure|mytable))[^>]+>/g, ''); // 删除不需要的标签
         }
 
 
diff --git a/src/common/js/debounce.js b/src/common/js/debounce.js
index 74e4488..0f37664 100644
--- a/src/common/js/debounce.js
+++ b/src/common/js/debounce.js
@@ -34,20 +34,20 @@ function throttle(fn, delay = 1000, immediate = false) {
     let args = arguments
 
     if (immediate) {
-      console.log("立即执行参数 执行一次方法")
+     
       fn.apply(_this, args)
       immediate = false
       return
     }
     if (status) {
-      console.log("当前点击状态为正在重复点击，请稍等片刻后在点击执行")
+     
       return
     }
-    console.log("执行节流：当前执行了一次点击方法")
+  
     fn.apply(_this, args)
     status = true // 修改状态
     timer = setTimeout(() => {
-      console.log("规定时间到,重置状态，可以重新调用")
+     
       status = false
     }, delay)
   }
diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index 408022b..f3498b6 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -381,7 +381,6 @@ const en = {
 		reply: 'Reply',
 		execute: 'Execute',
 		revoke: 'Revoke',
-
 		solve: 'Solve',
 		cancelsolve: 'Cancel resolved',
 		Resolved: 'Resolved',
@@ -412,9 +411,17 @@ const en = {
 		Multicolumn: 'Multicolumn',
 		singleRow: "single-row",
 		Row: "Row",
+		addRow: "Add Row",
 		Uncheck: 'Uncheck the paragraph',
 		ManuscirptAIProofreading: 'Manuscript AI Proofreading',
+		AIProofreading: 'AI Proofreading',
+		Association: 'Association',
 		BatchAddcontent: 'Batch Add content',
+		MoveUp: 'Move Up',
+		
+		MoveDown: 'Move Down',
+		jump: 'Locate',
+		editAssociation: 'Edit Association',
 	},
 	pendingPayment: {
 		title: 'Title',
diff --git a/src/components/common/langs/zh.js b/src/components/common/langs/zh.js
index dda07e1..a7b496d 100644
--- a/src/components/common/langs/zh.js
+++ b/src/components/common/langs/zh.js
@@ -398,9 +398,16 @@ const zh = {
 		Multicolumn:'多列',
 		singleRow:"单列",
 		Row:"空行",
+		addRow:"新增空行",
 		Uncheck:'取消勾选段落',
 		ManuscirptAIProofreading:'稿件AI校对',
+		AIProofreading:'AI校对',
+		Association:'关联',
 		BatchAddcontent: '批量添加内容',
+		MoveUp: '上移',
+		MoveDown: '下移',
+		jump: 'Locate',
+		editAssociation: 'Edit Association',
 	},
 	pendingPayment: {
 		title: 'Title',
diff --git a/src/components/page/GenerateCharts.vue b/src/components/page/GenerateCharts.vue
index eb7c8d6..00e2818 100644
--- a/src/components/page/GenerateCharts.vue
+++ b/src/components/page/GenerateCharts.vue
@@ -88,7 +88,7 @@
               </div> -->
 
                 <common-word
-                  
+                :articleId="articleId"
                     v-if="htmlContent"
                     ref="commonWord"
                     :value="htmlContent"
@@ -96,6 +96,7 @@
                     :comments="comments"
                     :wordStyle="wordStyle"
                     @onDrop="onDrop"
+                    @onLinkConfirm="handleConfirmLink"
                     @saveContent="saveContent"
                     @editComment="editComment"
                     @loaded="loadedWord"
@@ -154,6 +155,10 @@
                 </el-form-item>
 
                 <el-form-item label="Figure Title :">
+                    <span slot="label">
+                        <font style="color: #f56c6c; margin-right: 5px">*</font>
+                        Figure Title :
+                    </span>
                     <common-content
                         :isAutomaticUpdate="true"
                         :value="picStyle.title"
@@ -207,6 +212,10 @@
                 <!-- <common-late-x></common-late-x> -->
                 <!-- :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`" -->
                 <el-form-item label="Title:">
+                    <span slot="label">
+                        <font style="color: #f56c6c; margin-right: 5px">*</font>
+                        Title:
+                    </span>
                     <common-content
                         :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
                         :isAutomaticUpdate="true"
@@ -696,6 +705,34 @@ export default {
                 this.addComment(content);
             }
         },
+       
+handleConfirmLink(selectedMedia) {
+    // selectedMedia 是你从 el-radio 列表中选中的那一项（包含 ami_id 或 amt_id）
+    const targetId = selectedMedia.select.amt_id || selectedMedia.select.ami_id;
+  
+    const type = selectedMedia.type; // 'table' 或 'figure'
+    const tagName = `my${type}`; // 生成 mytable 或 myfigure
+    
+    // 获取当前段落原本的完整 HTML 内容
+    let originalContent = selectedMedia.linkData.content;
+    // 获取用户选中的纯文本片段
+    const label = selectedMedia.linkData.label;
+
+    if (!label || !originalContent) return;
+
+    // --- 核心替换逻辑 ---
+    // 使用正则匹配选中的文字，并用自定义标签包裹它
+    // 注意：这里需要考虑 label 在 HTML 中可能被拆分的情况，简单处理可直接 replace
+    const replacement = `<${tagName} data-id="${targetId}">${label}</${tagName}>`;
+    
+    // 执行替换（仅替换第一次匹配到的，防止全篇误伤）
+    const newContent = originalContent.replace(label, replacement);
+
+   
+console.log('newContent at line 592:', newContent);
+this.saveContent(newContent, selectedMedia.linkData.mainId);
+        },
+
         async saveContent(content, am_id) {
             var that = this;
             var str = content.replace(/^<p>\s*(.*?)\s*<\/p>$/, '$1').trim();
@@ -1622,10 +1659,19 @@ this.lineStyle1 = { ...formattedData }; // 使用浅拷贝确保两个变量指
 
         // 确定保存图片
         async savePic() {
-            this.picStyle.picUrl;
+          
 
             var str = this.picStyle1.note ? await this.$commonJS.decodeHtml(this.picStyle1.note) : '';
             var titleStr = this.picStyle1.title ? await this.$commonJS.decodeHtml(this.picStyle1.title) : '';
+
+            if (!this.picStyle.picUrl) {
+                this.$message.error('Please upload a picture');
+                return;
+            }
+            if (!titleStr) {
+                this.$message.error('Please enter a title');
+                return;
+            }
             if (this.picStyle.visiTitle == 'Edit Figure') {
                 this.$api
                     .post(this.urlList.editImage, {
@@ -1720,14 +1766,18 @@ this.lineStyle1 = { ...formattedData }; // 使用浅拷贝确保两个变量指
             }
             if (strTitle != '') {
                 strTitle = await this.$commonJS.decodeHtml(strTitle);
+            }else{
+                this.$message.error('Please enter a title');
+                return;
             }
-            const loading = this.$loading({
+           
+            if (content && cleanedTableList && cleanedTableList.length > 0) {
+                const loading = this.$loading({
                 lock: true,
                 text: 'Loading...',
                 spinner: 'el-icon-loading',
                 background: 'rgba(0, 0, 0, 0.7)'
             });
-            if (content && cleanedTableList && cleanedTableList.length > 0) {
                 if (this.lineStyle.visiTitle == 'Edit Table') {
                     this.$api
                         .post(this.urlList.editTable, {
@@ -2287,4 +2337,5 @@ this.lineStyle1 = { ...formattedData }; // 使用浅拷贝确保两个变量指
     background-color: #0066990d;
     /* display: block !important; */
 }
+
 </style>
diff --git a/src/components/page/OnlineProofreading.vue b/src/components/page/OnlineProofreading.vue
index b52706c..4c99c86 100644
--- a/src/components/page/OnlineProofreading.vue
+++ b/src/components/page/OnlineProofreading.vue
@@ -136,7 +136,7 @@
                         <div style="" class="commentList annotations"></div>
                     </template>
                     <template slot="refrences">
-                        <reference ref="commonRef"  :articleId="articleId" :p_article_id="p_article_id"></reference>
+                        <!-- <reference ref="commonRef"  :articleId="articleId" :p_article_id="p_article_id"></reference> -->
                     </template>
                 </common-word>
             </div>
diff --git a/src/components/page/components/OnlineProofreading/catalogue.vue b/src/components/page/components/OnlineProofreading/catalogue.vue
index e8dc02c..142cc49 100644
--- a/src/components/page/components/OnlineProofreading/catalogue.vue
+++ b/src/components/page/components/OnlineProofreading/catalogue.vue
@@ -1,12 +1,10 @@
 <template>
     <div class="ManuscirptList">
-       
-        
         <div class="arrlist">
             <ul class="catalogue-ul">
                 <li class="catalogue-li">
-                    <div 
-                        @click="goToListComment(item.am_id,'content')"
+                    <div
+                        @click="goToListComment(item.am_id, 'content')"
                         v-for="(item, index) in catalogueList"
                         :key="index"
                         :class="['catalogue-item', 'level-' + item.level]"
@@ -14,7 +12,6 @@
                         <div class="title-content-wrapper">
                             <div class="title-content" v-html="item.content"></div>
                         </div>
-                     
                     </div>
                 </li>
             </ul>
@@ -29,7 +26,7 @@ export default {
     watch: {
         content: {
             handler(newVal, oldVal) {
-                if(this.content.length > 0)this.getCatalogueList();
+                if (this.content.length > 0) this.getCatalogueList();
             },
             deep: true
         }
@@ -54,7 +51,7 @@ export default {
                 { title: 'Typed', type: '1' },
                 { title: 'Unfettered', type: '2' }
             ],
-          
+
             images: [],
             tables: [],
             imagesList: [],
@@ -77,31 +74,31 @@ export default {
     },
     methods: {
         getCatalogueList() {
-           
-          
-this.catalogueList = this.content.filter(item => {
-    return item.is_h1 == 1 || item.is_h2 == 1 ;
-}).map(item => {
-    // 增加一个 level 字段进行标记
-    let level = 1;
-    if (item.is_h2 == 1) level = 2;
-  
-    return {
-        ...item,
-        level: level // 1, 2, 或 3
-    };
-})
-this.catalogueList=[...this.catalogueList,{
-        am_id:'References',
-        content:'References',
-       
-        level:1,
-}]
+            this.catalogueList = this.content
+                .filter((item) => {
+                    return item.is_h1 == 1 || item.is_h2 == 1;
+                })
+                .map((item) => {
+                    // 增加一个 level 字段进行标记
+                    let level = 1;
+                    if (item.is_h2 == 1) level = 2;
 
+                    return {
+                        ...item,
+                        level: level // 1, 2, 或 3
+                    };
+                });
+            this.catalogueList = [
+                ...this.catalogueList
+                // ,{
+                //         am_id:'References',
+                //         content:'References',
 
+                //         level:1,
+                // }
+            ];
 
-                        // this.catalogueList = res.data;
-                 
+            // this.catalogueList = res.data;
         },
         changeIsCollapse(e) {
             localStorage.setItem('isCollapse', e);
@@ -369,7 +366,7 @@ this.catalogueList=[...this.catalogueList,{
                 });
         },
         isHeaderRow(rowIndex, table) {
-            var table =table;
+            var table = table;
 
             var head = table[0];
 
@@ -419,8 +416,8 @@ this.catalogueList=[...this.catalogueList,{
                                 >`;
 
                             if (table.table && table.table.length > 0) {
-                                table.table.forEach((row,i) => {
-                                    modalContent += `<tr   class="${this.isHeaderRow(i, table.table)? 'table-header-row':''  }">`;
+                                table.table.forEach((row, i) => {
+                                    modalContent += `<tr   class="${this.isHeaderRow(i, table.table) ? 'table-header-row' : ''}">`;
                                     row.forEach((cell) => {
                                         modalContent += `
                                         <td
@@ -486,7 +483,7 @@ this.catalogueList=[...this.catalogueList,{
     padding: 12px 16px 0 16px;
     font-size: 14px;
     color: #333;
-    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
+    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }
 
 .word-tabs {
@@ -509,7 +506,7 @@ this.catalogueList=[...this.catalogueList,{
 }
 
 .word-tabs span.active::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
@@ -575,23 +572,25 @@ this.catalogueList=[...this.catalogueList,{
     overflow: hidden;
     text-overflow: ellipsis;
     /* Times New Roman 增加学术感 */
-    font-family: "Charis SIL" !important; 
+    font-family: 'Charis SIL' !important;
     color: #333;
 }
 
 /* 保持 v-html 内部样式 */
-::v-deep .title-content b { font-weight: bold; }
-::v-deep .title-content i { font-style: italic; }
+::v-deep .title-content b {
+    font-weight: bold;
+}
+::v-deep .title-content i {
+    font-style: italic;
+}
 
 /* --- Word 风格的层级缩进 --- */
 
 /* 1级标题 */
 .level-1 {
     padding-left: 16px;
-  
 }
-.level-1 .title-content{
-   
+.level-1 .title-content {
     font-style: italic !important;
 }
 
diff --git a/src/components/page/components/OnlineProofreading/reference.vue b/src/components/page/components/OnlineProofreading/reference.vue
index 9be8a7a..392657b 100644
--- a/src/components/page/components/OnlineProofreading/reference.vue
+++ b/src/components/page/components/OnlineProofreading/reference.vue
@@ -418,7 +418,7 @@ export default {
         },
         referenceList: {
             type: Array,
-            required: true
+            default: () => []
         },
         gridData: {
             type: String,
diff --git a/src/components/page/components/Tinymce/index.vue b/src/components/page/components/Tinymce/index.vue
index e563ec7..7d7e009 100644
--- a/src/components/page/components/Tinymce/index.vue
+++ b/src/components/page/components/Tinymce/index.vue
@@ -10,140 +10,7 @@ import htmlDocx from 'html-docx-js/dist/html-docx.js';
 import { Document, Packer, PageOrientation, Paragraph, TextRun } from 'docx'; // 引入 docx.js
 import html2canvas from 'html2canvas';
 import { extractHexImagesFromRTF, hexToBlob } from '@/utils/rtfParser';
-const tableStyle = `
-                        .word-img-placeholder {
-                            background: #f0f0f0 ;
-                        }
-                        *{
-                            font-family: 'Charis SIL';
-                        }
-                        b span{
-                            font-weight: bold !important;
-                        }
-                        i span{
-                            font-style: italic !important; ;
-                        }
-                        sub span{
-                            vertical-align: sub;
-                        }
-                        sup span{
-                            vertical-align: sup;
-                        }
-                        sub {
-                            vertical-align: sub!important;
-                        }
-                        sup {
-                            vertical-align: sup !important;
-                        }
-                        span[style*="vertical-align: super"] {
-                            vertical-align: super !important;
-                        }
-                        span[style*="vertical-align: sub"] {
-                            vertical-align: sub !important;
-                        }
-                        table {
-                            border:0px !important;
-                            border-collapse: collapse; /* 去除单元格间隙 */
-                            width: auto;
-                            margin : 0 auto !important;
-                            table-layout: auto; /* 自动调整列宽 */
-                            text-align:left;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table td, table th {
-                            padding: 5px;
-                            text-align:left !important;
-                            white-space: pre-wrap; /* 保留换行符并换行 */
-                            word-wrap: break-word; /* 长单词自动换行 */
-                            word-break: break-word;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table tbody tr td{
-                            text-align:left !important;
-                            border-left:none !important;
-                            mso-border-left-alt:none !important;
-                            border-right:none !important;
-                            mso-border-right-alt:none !important;
-                            border-top:none;mso-border-top-alt:none !important;
-                            border-bottom:none !important;
-                            mso-border-bottom-alt:none !important;
-                            border:1px dashed #dcdfe6 !important;
-                            border-left:1px dashed #dcdfe6 !important;
-                            border-right:1px dashed #dcdfe6 !important;
-                            word-break: keep-all !important;
-                            // text-align: justify !important; // 设置两端对齐
-
-
-                        }
-                        table tr td p{
-
-                           text-align:left !important;
-
-                            margin:0;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table span{
-
-                         color:#000000;text-align:left !important;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table .color-highlight{
-                            color:rgb(0,130,170) !important;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table tr:first-child td {
-                            border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;
-                         }
-                        table tr:last-of-type {
-                            border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;;
-                        }
-                        table span blue {
-                    color: rgb(0, 130, 170) !important;
-                }blue {
-                    color: rgb(0, 130, 170) !important;
-                }
-                blue sup {
-                    color: rgb(0, 130, 170) !important;
-                }
-                blue sub {
-                    color: rgb(0, 130, 170) !important;
-                }
-                .wordTableHtml table tr.table-header-row:nth-of-type(2) td {
-    border-bottom: 1px solid #000 !important;
-}
-                mjx-container {
-	font-size: 14px !important;
-  ;
-}
-wmath{
-	width: 100%;
-	display: block;
-    display: flex;
-  }
-  Info{
-    color:#ff8f25;
-  }
-                        `;
+import { tableStyle } from '@/utils/tinymceStyles';
 export default {
     name: 'tinymce',
     components: {},
@@ -399,7 +266,7 @@ export default {
                 valid_elements:
                     this.type == 'table'
                         ? '*[*]'
-                        : `img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i,wmath${this.valid_elements}`, // 允许的标签和属性
+                        : `img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i,myfigure,mytable,wmath${this.valid_elements}`, // 允许的标签和属性
                 // valid_elements: '*[*]', // 允许所有 HTML 标签
                 noneditable_editable_class: 'MathJax',
                 height: this.height,
diff --git a/src/components/page/components/table/MediaLinkDialog.vue b/src/components/page/components/table/MediaLinkDialog.vue
new file mode 100644
index 0000000..0c10729
--- /dev/null
+++ b/src/components/page/components/table/MediaLinkDialog.vue
@@ -0,0 +1,162 @@
+<template>
+    <el-dialog
+        :close-on-click-modal="false"
+        :title="`Link ${currentTypeText}`"
+        :visible.sync="visible"
+        width="1000px"
+        custom-class="academic-link-dialog"
+        append-to-body
+    >
+        <p v-if="errorMessage" class="error-message"><i class="el-icon-warning"></i> &nbsp;{{ errorMessage }}</p>
+        <div class="list-container">
+            <el-radio-group v-model="selectedId" class="full-width-radio">
+                <div
+                    v-for="item in displayList"
+                    :key="item.amt_id || item.ami_id"
+                    :class="['item-card', { active: selectedId === item.amt_id || selectedId === item.ami_id }]"
+                >
+                    <el-radio :label="item.amt_id || item.ami_id"
+                        ><div
+                            v-html="item.title"
+                            class="custom-radio-title"
+                            @click.stop="handleClick(item)"
+                            :title="stripHtml(item.title)"
+                        ></div
+                    ></el-radio>
+                </div>
+
+                <el-empty
+                    v-if="displayList.length === 0"
+                    :description="`No ${currentTypeText.toLowerCase()}s found in document`"
+                    :image-size="60"
+                ></el-empty>
+            </el-radio-group>
+        </div>
+
+        <div slot="footer" class="dialog-footer">
+            
+            <el-button size="small" @click="visible = false">Cancel</el-button>
+            <el-button size="small" type="primary" @click="confirm" :disabled="!selectedId">Confirm</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    props: ['content', 'urlList', 'articleId', 'displayList', 'currentTypeText'], // 全文内容
+    data() {
+        return {
+            errorMessage: '',
+            visible: false,
+            selectedId: null,
+            initialSelectedId: null,
+            selectLinkData: {}
+        };
+    },
+    methods: {
+        stripHtml(html) {
+            return html ? html.replace(/<[^>]+>/g, '') : '';
+        },
+        handleClick(item) {
+            this.selectedId = item.amt_id || item.ami_id;
+            this.$forceUpdate();
+        },
+        show(data) {
+            this.selectLinkData = data;
+            // 1. 获取传入的 ID
+            const inputId = data.selectedId ? Number(data.selectedId) : null;
+            const exists = this.displayList.some((item) => item.ami_id === inputId || item.amt_id === inputId);
+
+            // 3. 存在则赋值，不存在（或原本就是 null）则设为 null
+            this.selectedId = exists ? inputId : null;
+
+            // 调试日志，方便排查回显失败的原因
+            if (inputId && !exists) {
+                this.errorMessage = `The associated resource no longer exists. Please re-select and bind.`;
+            }
+
+            this.visible = true;
+        },
+
+        confirm() {
+            const item = this.displayList.find((i) => i.amt_id === this.selectedId || i.ami_id === this.selectedId);
+            this.$emit('confirm', { select: item, linkData: this.selectLinkData, type: this.currentTypeText.toLowerCase() });
+            this.visible = false;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep .el-dialog__body {
+    padding: 10px 20px 20px !important;
+}
+::v-deep .el-radio {
+    width: 100% !important;
+    display: flex;
+    align-items: flex-start;
+}
+/* 保持原有好看的样式 */
+.academic-link-dialog {
+    .dialog-header-tip {
+        background: #f0f7ff;
+        padding: 12px;
+        border-radius: 4px;
+        margin-bottom: 15px;
+        font-size: 13px;
+        color: #409eff;
+        i {
+            margin-right: 8px;
+        }
+    }
+    .list-container {
+        max-height: 400px;
+        overflow-y: auto;
+        border: 1px solid #f0f0f0;
+        border-radius: 4px;
+        padding: 10px;
+    }
+    .item-card {
+        padding: 10px;
+        margin-bottom: 6px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        &:hover {
+            background: #f5f7fa;
+        }
+        &.active {
+            border-color: #409eff;
+            background: #f0f7ff;
+        }
+    }
+    .full-width-radio {
+        width: 100%;
+    }
+}
+/* 核心：限制宽度并触发省略号 */
+.custom-radio-title {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100%; /* 必须设置一个宽度，或者 100% */
+    overflow: hidden;
+    text-overflow: ellipsis; /* 超出显示点点点 */
+    white-space: nowrap; /* 强制不换行 */
+}
+
+/* 兼容 Element UI：让 radio 的 label 容器能够自适应宽度 */
+::v-deep .el-radio__label {
+    display: inline-flex;
+    align-items: center;
+    width: calc(100% - 25px); /* 减去左侧 radio 圆圈的宽度 */
+}
+.error-message {
+    background-color: #fdf6ec;
+    border-color: #faecd8;
+    color: #e6a23c;
+    padding: 0 10px;
+    line-height: 30px;
+    font-size: 14px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+</style>
diff --git a/src/components/page/components/table/word copy.vue b/src/components/page/components/table/word copy.vue
index fd88455..cb5daad 100644
--- a/src/components/page/components/table/word copy.vue	
+++ b/src/components/page/components/table/word copy.vue	
@@ -1,327 +1,997 @@
 <template>
-    <div class="tinymce-container editor-container word-container" :style="!isPreview ? 'padding:10px 20px 10px 10px;' : 'padding:0px;'" ref="scrollDiv">
-        <div
-            style="
-                box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
-                margin: 0px 0;
-                box-sizing: border-box;
-                display: flex;
-            "
-        >
+    <div
+        @click="
+            isMenuVisible = false;
+            currentData = {};
+            currentId = '';
+        "
+        class="tinymce-container editor-container word-container"
+        :style="!isPreview ? 'padding:10px 20px 10px 30px;' : 'padding:0px;'"
+        ref="scrollDiv"
+    >
+        <div class="word-menu">
             <div
-                class=""
-                :style="isPreview ? 'width: 100%;padding: 20px;' : 'width: calc(100% - 300px);padding: 20px  20px 20px 34px;'"
-                style="
-                    
-                    box-sizing: border-box;
-                    width: calc(100% - 300px);
-                    float: left;
-                    background-color: #fff;
-                    border-right: 1px solid #cecfd3;
-                    position: relative;
-                "
+                class="word-tool"
+                v-if="!isPreview"
+                :style="rightW ? `right:${rightW + 20}px; width: calc(100% - 285px - ${rightW + 20}px);` : ''"
             >
+                <div class="w-auto base-flex" :style="{ '--fl-ai': 'center' }">
+                    <li
+                        class="base-flex base-pos"
+                        style="list-style: none"
+                        :style="{ '--p-l': '10px', '--p-l': '10px', '--fl-ai': 'center' }"
+                    >
+                        <el-button @click="handleUncheck" v-if="!isPreview" plain type="info">{{ $t('commonTable.Uncheck') }}</el-button>
+                        <div
+                            @click="handleClickAI()"
+                            v-if="isEditComment && !isPreview && activeName == 'proofreading'"
+                            class="base-tag base-font-size"
+                            :style="{ '--f-s': '12px', '--f-c': '#fff' }"
+                        >
+                            <i class="el-icon-magic-stick base-margin" :style="{ '--m-r': '2px' }"></i>
+                            {{ $t('commonTable.ManuscirptAIProofreading') }}
+                        </div>
+                    </li>
+                </div>
+
+                <div class="base-padding-all float-var" :style="{ '--f': 'right' }">
+                    <ul class="operateBox">
+                        <div class="base-border base-padding-all" :style="{ '--br': '1px', '--p': '0 20px' }">
+                            <ul class="HTitleBox" style="border: none">
+                                <li
+                                    @click="addContent"
+                                    class="base-font-size base-bg-imp base-padding-all"
+                                    :style="{ '--f-s': '12px', '--f-c': '#333' }"
+                                >
+                                    <i class="el-icon-document base-margin" :style="{ '--m-r': '2px' }"> </i>
+                                    {{ $t('commonTable.BatchAddcontent') }}
+                                </li>
+                            </ul>
+                        </div>
+                        <li
+                            class="base-font-size base-border-all"
+                            :style="{ '--f-s': '12px', '--b-c': '#cbccd1' }"
+                            style="background-color: #cbccd1 !important"
+                            @click="onAddRow"
+                        >
+                            <i class="el-icon-document-add base-margin" :style="{ '--m-r': '2px' }"></i>
+
+                            {{ $t('commonTable.Row') }}
+                        </li>
+
+                        <li
+                            class="base-font-size base-bg-imp"
+                            :style="{ '--f-s': '12px', '--bg': '#fc625d', '--f-c': '#fff' }"
+                            @click="onDelete"
+                        >
+                            <i class="el-icon-delete base-margin" :style="{ '--m-t': '2px' }"></i>
+                            {{ $t('commonTable.delete') }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div
+                ref="scroll"
+                class="word-container-box scroll b-box float-var base-bg-imp base-border float-var base-pos"
+                :class="{
+                    'w-full': isPreview,
+                    'dynamic-width': !isPreview
+                }"
+                :style="{
+                    '--f': 'left',
+                    '--br': isPreview ? '0' : '1px',
+                    '--bc': '#cecfd3',
+                    '--pos': 'relative',
+                    '--minus-w': !isPreview && rightW ? rightW - 10 + 'px' : '300px',
+                    padding: isPreview ? '20px !important' : '45px 20px 20px 34px !important'
+                }"
+            >
+                <!-- <common-late-x></common-late-x> -->
                 <template v-for="(item, index) in wordList">
-                    <span class="isRemark" :remark-main-id="item.am_id" v-if="item.checks && item.checks.length > 0 && !isPreview">
-                        ><img
-                            class="isRemark"
+                    <el-checkbox
+                        class="select-main-id base-pos base-margin"
+                        :style="{ '--p-l': '-20px', '--m-t': '8px' }"
+                        @change="(e) => updateUniqueIds(e, item.am_id)"
+                        v-if="!isPreview"
+                        :value="isChecked(item.am_id)"
+                        style="width: 8px; height: 8px; z-index: 10"
+                    ></el-checkbox>
+
+                    <span
+                        @click="handleClickProofreadingList([item.am_id])"
+                        v-if="
+                            !isPreview &&
+                            isEditComment &&
+                            item.proof_read_num &&
+                            item.proof_read_num > 0 &&
+                            item.is_proofread == 1 &&
+                            item.type == 0 &&
+                            item.content != ''
+                        "
+                        class="proofreading-num"
+                        >{{ item.proof_read_num }}</span
+                    >
+                    <span
+                        @click="handleClickProofreadingList([item.am_id])"
+                        v-if="
+                            !isPreview &&
+                            isEditComment &&
+                            item.proof_read_num == -1 &&
+                            item.is_proofread == 1 &&
+                            item.type == 0 &&
+                            item.content != ''
+                        "
+                        class="Proofreadingstatus"
+                        style="color: rgb(19, 188, 32)"
+                        ><i class="el-icon-success"></i
+                    ></span>
+                    <span
+                        @click="handleClickProofreadingList([item.am_id])"
+                        v-if="
+                            !isPreview &&
+                            isEditComment &&
+                            item.proof_read_num == 0 &&
+                            item.is_proofread == 1 &&
+                            item.type == 0 &&
+                            item.content != ''
+                        "
+                        class="Proofreadingstatus"
+                        style="color: #006699e0"
+                        ><i class="el-icon-success"></i
+                    ></span>
+                    <span
+                        @click="handleClickProofreadingList([item.am_id])"
+                        v-if="!isPreview && isEditComment && item.is_proofread == 2 && item.type == 0 && item.content != ''"
+                        class="Proofreadingstatus"
+                        style="color: #e6a23c"
+                        ><i class="el-icon-warning"></i
+                    ></span>
+
+                    <span
+                        @click="handleClickProofreadingList([item.am_id])"
+                        class="isRemark"
+                        :remark-main-id="item.am_id"
+                        v-if="(item.proof_read_num > 0 || item.proof_read_num == 0) && !isPreview && !isShowPiZhu"
+                    >
+                        <img
+                            class="isRemark base-margin"
+                            :style="{ '--m-l': '-14px', '--m-r': '6px' }"
                             src="@/assets/img/isRemark.png"
                             alt=""
-                            style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px"
+                            style="width: 15px; height: 15px"
                         />
 
                         <span>{{ item.am_id }}</span>
                     </span>
-                    <div :class="!isPreview?(item.is_h1?'isTitleH1':item.is_h2?'isTitleH2':item.is_h3?'isTitleH3':''):''" style="line-height: 24px;">
-                        <template v-if="!isPreview"> <span class="Htitle Htitle1" v-if="item.is_h1==1">H1</span>
-                        <span class="Htitle Htitle2" v-else-if="item.is_h2==1">H2</span>
-                        <span class="Htitle Htitle3" v-else-if="item.is_h3==1">H3</span></template>
-                       
-                        <div
-                            :key="item.am_id"
-                            id="drop-target"
-                            :class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
-                            :comment-Id="highlightImgCommentId(item.ami_id, item.checks ? item.checks : [])"
-                            @dragover="handleDragOver"
-                            @dragenter="handleDragEnter"
-                            @dragleave="handleDragLeave"
-                            @drop="handleDrop"
-                            class="MaxPicture pMain myeditabledivImage drop-target"
-                            @click="initializeEditor(item.am_id, 'img', item)"
-                            v-if="item.type == 1"
-                            :main-state="item.state"
-                            :remark="item.checks && item.checks.length > 0 ? 1 : 0"
-                            :contenteditable="!readonly && !isPreview"
-                            :data-id="item.ami_id"
-                            :type="item.type"
-                            :main-id="item.am_id"
-                            :id="'editor' + item.am_id"
+                    <span
+                        class="isRemark base-margin"
+                        :remark-main-id="item.am_id"
+                        v-if="item.checks && item.checks.length > 0 && !isPreview && isShowPiZhu"
+                    >
+                        <img
+                            class="isRemark"
+                            :style="{ '--m-l': '-14px', '--m-r': '6px' }"
+                            src="@/assets/img/isRemark.png"
+                            alt=""
+                            style="width: 15px; height: 15px"
+                        />
+
+                        <span>{{ item.am_id }}</span>
+                    </span>
+                    <div
+                        :class="
+                            !isPreview
+                                ? item.is_h1
+                                    ? 'isTitleH1 pMainH1'
+                                    : item.is_h2
+                                    ? 'isTitleH2'
+                                    : item.is_h3
+                                    ? 'isTitleH3'
+                                    : ''
+                                : item.is_h1
+                                ? 'Ptitle'
+                                : ''
+                        "
+                        style="line-height: 24px"
+                    >
+                        <template v-if="!isPreview">
+                            <span class="Htitle Htitle1" v-if="item.is_h1 == 1">H1</span>
+                            <span class="Htitle Htitle2" v-else-if="item.is_h2 == 1">H2</span>
+                            <span class="Htitle Htitle3" v-else-if="item.is_h3 == 1">H3</span></template
                         >
-                            <img :src="`${mediaUrl + item.image.url}`" />
 
-                            <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
-                                <span v-html="item.image.note ? highlightText(item.image.note, item.checks ? item.checks : []) : ''"></span>
-                            </font>
+                        <div :class="currentId == item.am_id ? 'glowing-border' : ''" style="position: relative">
+                            <div
+                                class="base-bg base-pos"
+                                :style="{ '--p-r': '0px', '--p-t': '-40px' }"
+                                v-if="currentId == item.am_id"
+                                style="z-index: 100"
+                            ></div>
+                            <!-- @dblclick="dblclickEdit(item.am_id, 'img', item, index)" -->
+                            <div
+                                :ref="'row-' + item.am_id"
+                                :key="item.am_id"
+                                id="drop-target"
+                                :class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
+                                :comment-Id="highlightImgCommentId(item.ami_id, item.checks ? item.checks : [])"
+                                @dragover="handleDragOver"
+                                @dragenter="handleDragEnter"
+                                @dragleave="handleDragLeave"
+                                @drop="handleDrop"
+                                class="MaxPicture pMain myeditabledivImage drop-target"
+                                @click.stop="initializeEditor($event, item.am_id, 'img', item, index)"
+                                v-if="item.type == 1"
+                                :main-state="item.state"
+                                :remark="item.checks && item.checks.length > 0 ? 1 : 0"
+                                :data-id="item.ami_id"
+                                :type="item.type"
+                                :main-id="item.am_id"
+                                :id="'editor' + item.am_id"
+                            >
+                                <img :src="`${mediaUrl + item.image.url}`" />
+
+                                <font class="font imageTitle" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
+                                    <span
+                                        @click="onProofSpanClick"
+                                        v-html="
+                                            item.image.title
+                                                ? highlightText(
+                                                      { am_id: item.am_id, text: item.image.title },
+                                                      item.checks ? item.checks : []
+                                                  )
+                                                : ''
+                                        "
+                                    ></span>
+                                </font>
+                                <font class="font imageNote" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
+                                    <span
+                                        @click="onProofSpanClick"
+                                        v-html="
+                                            item.image.note
+                                                ? highlightText(
+                                                      { am_id: item.am_id, text: item.image.note },
+                                                      item.checks ? item.checks : []
+                                                  )
+                                                : ''
+                                        "
+                                    ></span>
+                                </font>
+                            </div>
+                            <!-- @dblclick="dblclickEdit(item.am_id, 'table', item, index)" -->
+                            <div
+                                :ref="'row-' + item.am_id"
+                                id="drop-target"
+                                @dragover="handleDragOver"
+                                @dragenter="handleDragEnter"
+                                @dragleave="handleDragLeave"
+                                @drop="handleDrop"
+                                @click.stop="initializeEditor($event, item.am_id, 'table', item, index)"
+                                class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
+                                v-else-if="item.type == 2"
+                                :main-state="item.state"
+                                :remark="item.checks && item.checks.length > 0 ? 1 : 0"
+                                :data-id="item.amt_id"
+                                :type="item.type"
+                                :id="'editor' + item.am_id"
+                                :main-id="item.am_id"
+                            >
+                                <!-- 标题部分 -->
+                                <font
+                                    class="font tableTitle"
+                                    :style="`width: ${item.width ? `${item.width}px` : '100%'}`"
+                                    style="text-align: center"
+                                >
+                                    <span
+                                        @click="onProofSpanClick"
+                                        v-html="
+                                            highlightText(
+                                                { am_id: item.am_id, text: item.table.title || '' },
+                                                item.checks ? item.checks : []
+                                            )
+                                        "
+                                    ></span>
+                                </font>
+
+                                <!-- 表格部分 -->
+                                <table border="1" style="width: 100%; border-collapse: collapse; text-align: center" class="table-box">
+                                    <tbody>
+                                        <tr v-for="(row, rIdx) in item.table.tableHeader" :key="'h-' + rIdx" class="table-header-row">
+                                            <td v-for="cell in row" :rowspan="cell.rowspan" :colspan="cell.colspan">
+                                                <span
+                                                    @click="onProofSpanClick"
+                                                    v-html="
+                                                        highlightText(
+                                                            { am_id: item.am_id, text: cell.text || '' },
+                                                            item.checks ? item.checks : []
+                                                        )
+                                                    "
+                                                ></span>
+                                            </td>
+                                        </tr>
+
+                                        <tr
+                                            v-for="(row, rIdx) in item.table.tableContent"
+                                            class="table-content-row"
+                                            :class="{ oddColor: item.table.oddRowIds.includes(row.rowId) }"
+                                        >
+                                            <td v-for="cell in row" :rowspan="cell.rowspan" :colspan="cell.colspan">
+                                                <span
+                                                    @click="onProofSpanClick"
+                                                    v-html="
+                                                        highlightText(
+                                                            { am_id: item.am_id, text: cell.text || '' },
+                                                            item.checks ? item.checks : []
+                                                        )
+                                                    "
+                                                ></span>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+
+                                <!-- 备注部分 -->
+                                <font class="font tableNote" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
+                                    <span
+                                        @click="onProofSpanClick"
+                                        v-html="
+                                            highlightText(
+                                                { am_id: item.am_id, text: item.table.note || '' },
+                                                item.checks ? item.checks : []
+                                            )
+                                        "
+                                    ></span>
+                                </font>
+                            </div>
+                            <!-- @dblclick="dblclickEdit(item.am_id, 'text', item, index)" -->
+                            <div
+                                :ref="'row-' + item.am_id"
+                                @click="onProofSpanClick"
+                                v-else
+                                id="drop-target"
+                                @dragover="handleDragOver"
+                                @dragenter="handleDragEnter"
+                                @dragleave="handleDragLeave"
+                                @drop="handleDrop"
+                                @click.stop="initializeEditor($event, item.am_id, 'text', item, index)"
+                                class="pMain myeditablediv drop-target"
+                                @blur="clearEditor(item.am_id)"
+                                :main-state="item.state"
+                                :remark="item.checks && item.checks.length > 0 ? 1 : 0"
+                                :data-id="item.am_id"
+                                :main-id="item.am_id"
+                                :type="item.type"
+                                :id="'editor' + item.am_id"
+                                v-html="highlightText({ am_id: item.am_id, text: item.content }, item.checks ? item.checks : [], item.type)"
+                            ></div>
                         </div>
-                        <div
-                            id="drop-target"
-                            @dragover="handleDragOver"
-                            @dragenter="handleDragEnter"
-                            @dragleave="handleDragLeave"
-                            @drop="handleDrop"
-                            @click="initializeEditor(item.am_id, 'table', item)"
-                            class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
-                            v-else-if="item.type == 2"
-                            :main-state="item.state"
-                            :remark="item.checks && item.checks.length > 0 ? 1 : 0"
-                            :contenteditable="!readonly && !isPreview"
-                            :data-id="item.amt_id"
-                            :type="item.type"
-                            :id="'editor' + item.am_id"
-                            :main-id="item.am_id"
-                        >
-                            <!-- 标题部分 -->
-                            <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`" style="text-align: center;">
-                                <span v-html="highlightText(item.table.title || '', item.checks ? item.checks : [])"></span>
-                            </font>
-
-                            <!-- 表格部分 -->
-                            <table border="1" style="width: 100%; border-collapse: collapse; text-align: center">
-                                <tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i" :class="{ 'table-header-row': isHeaderRow(i,item.table.table_data) }">
-                                    <td 
-                                        v-for="(cell, i1) in row"
-                                        :key="i1"
-                                        :colspan="`${cell.colspan || 1}`"
-                                        :rowspan="`${cell.rowspan || 1}`"
-                                    >
-                                        <span v-html="highlightText(cell.text || '', item.checks ? item.checks : [])"></span>
-                                    </td>
-                                </tr>
-                            </table>
-
-                            <!-- 备注部分 -->
-                            <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
-                                <span v-html="highlightText(item.table.note || '', item.checks ? item.checks : [])"></span>
-                            </font>
-                        </div>
-
-                        <div
-                            v-else
-                            id="drop-target"
-                            @dragover="handleDragOver"
-                            @dragenter="handleDragEnter"
-                            @dragleave="handleDragLeave"
-                            @drop="handleDrop"
-                            @click="initializeEditor(item.am_id)"
-                            class="pMain myeditablediv drop-target"
-                            @blur="clearEditor(item.am_id)"
-                            :main-state="item.state"
-                            :remark="item.checks && item.checks.length > 0 ? 1 : 0"
-                            :contenteditable="!readonly && !isPreview"
-                            :data-id="item.am_id"
-                            :main-id="item.am_id"
-                            :type="item.type"
-                            :id="'editor' + item.am_id"
-                            v-html="highlightText(item.content, item.checks ? item.checks : [], item.type)"
-                        ></div>
                     </div>
                 </template>
+                <slot name="refrences"></slot>
             </div>
-
-            <div
+           
+            <el-tabs
+                v-model="activeName"
+                @tab-click="handleClick"
                 v-if="!isPreview"
-                style="
-                    width: 310px;
-                    position: fixed;
-                    top: 70px;
-                    box-sizing: border-box;
-                    right: 10px;
-                    bottom: 0;
-
-                    overflow-y: auto;
-                "
-                class="commentList"
+                class="rightTabs base-pos el-tabs--border-card"
+                type="border-card b-box"
+                :style="{
+                    '--pos': 'fixed',
+                    '--p-t': '40px',
+                    '--p-r': '14px',
+                    width: rightW ? `${rightW}px` : '310px'
+                }"
+                style=""
             >
-                <li
-                    v-for="(item, index) in commentList"
-                    class="comment-item annotation"
-                    :data-target="`main-${item.am_id}`"
-                    style="width: 100%; margin:0 0 10px; background: #fafafa; box-sizing: border-box"
-                >
-                    <div>
-                        <div style="display: flex; align-items: center; justify-content: space-between; background-color: #f3d5d5c2">
-                            <el-link class="pizhu" style="display: flex; align-items: center">
-                                <span style="color: #fc625d; display: flex; align-items: center; font-weight: bold">
-                                    <img
-                                        class="isRemark"
-                                        src="@/assets/img/isRemark.png"
-                                        alt=""
-                                        style="width: 15px; height: 15px; margin-right: 6px"
-                                    />{{ item.am_id }}
-                                </span>
-                            </el-link>
-                        </div>
-                        <div
-                            style="
-                           
-                                padding:6px 6px;
-                                box-sizing: border-box;
-                                border-bottom: 1px solid rgba(243, 213, 213);
-                            "
-                            :style="commont.estate == 1 ? 'background:#13bc200f;' : ''"
-                            v-for="(commont, commentIndex) in item.comment"
-                            @click="highlightLeftComment(commont.amc_id, item.am_id)"
-                        >
-                            <div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
-                                <div style="display: flex; align-items: center;line-height: 20px;">
-                                    <span
-                                        :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
-                                        style="color: #e61a12; font-weight: bold;font-size: 12px;"
-                                        >{{ commentIndex + 1 }}、</span
-                                    >
-                                    <span
-                                        style="color: rgb(230, 26, 18); font-size: 12px"
-                                        :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
-                                        >Comment</span
-                                    >
-                                    <!-- <img
-                                        :style="commont.estate == 1 ? 'opacity:0.4' : ''"
-                                        src="@/assets/img/bit_bug.png"
-                                        alt=""
-                                        style="width: 30px; height: 14px"
-                                    /> -->
-
-                                    <span v-if="commont.estate == 1" class="Resolved" :style="commont.estate == 1 ? 'opacity:0.6;' : ''">{{
-                                        $t('commonTable.Resolved')
-                                    }}</span>
-                                </div>
-                                <div style="display: flex; align-items: center; justify-content: center;line-height: 20px;">
-                                    <span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span
-                                    ><span
-                                        style="color: #aaa; font-size: 13px; margin: 0 4px"
-                                        v-if="(!isEditComment && commont.estate == 0) || isEditComment"
-                                        >|</span
-                                    >
-                                    <el-dropdown
-                                        style="cursor: pointer"
-                                        class="commentOperate"
-                                        v-if="(!isEditComment && commont.estate == 0) || isEditComment"
-                                    >
-                                        <span class="el-dropdown-link" style="display: flex; align-items: center; justify-content: center">
-                                            <img
-                                                src="@/assets/img/selectComment.png"
-                                                alt=""
-                                                style="width: 18px; height: 18px; margin-top: 2px"
-                                            />
-                                        </span>
-                                        <el-dropdown-menu slot="dropdown">
-                                            <el-dropdown-item>
-                                                <p
-                                                    class="commentOperateItem"
-                                                    v-if="!isEditComment && commont.estate == 0"
-                                                    @click="replyComment(commont)"
-                                                >
-                                                    <img src="@/assets/img/replyComment.png" alt="" />
-                                                    <span style="color: #000">{{ $t('commonTable.reply') }}</span>
-                                                </p>
-                                            </el-dropdown-item>
-                                            <!-- <el-dropdown-item>答复</el-dropdown-item> -->
-                                            <el-dropdown-item>
-                                                <p class="commentOperateItem" v-if="commont.estate == 0" @click="solveComment(commont)">
-                                                    <img src="@/assets/img/solveComment.png" alt="" />
-                                                    <span style="color: #34c749">{{ $t('commonTable.solve') }}</span>
-                                                </p>
-                                            </el-dropdown-item>
-                                            <el-dropdown-item>
-                                                <p
-                                                    class="commentOperateItem"
-                                                    v-if="isEditComment && commont.estate == 1"
-                                                    @click="cancelSolveComment(commont)"
-                                                >
-                                                    <img src="@/assets/img/solveComment.png" alt="" />
-                                                    <span style="color: #bbb">{{ $t('commonTable.cancelsolve') }}</span>
-                                                </p>
-                                            </el-dropdown-item>
-                                            <el-dropdown-item v-if="isEditComment && commont.estate == 0 && commont.author_remark == ''">
-                                                <p class="commentOperateItem" @click="deleteComment(commont)">
-                                                    <img src="@/assets/img/deleteComment.png" alt="" />
-                                                    <span style="color: #ed382d"> {{ $t('commonTable.delete') }}</span>
-                                                </p>
-                                            </el-dropdown-item>
-                                        </el-dropdown-menu>
-                                    </el-dropdown>
-                                </div>
-                            </div>
-                            <div
-                                :style="commont.estate == 1 ? 'opacity:0.6' : ''"
-                                style="
-                                    line-height: 18px;
-                                    min-height: 20px;
-                                    width: calc(100% -26px);
-                                    white-space: normal;
-                                    padding-left: 26px;
-                                    box-sizing: border-box;
-                                    display: flex;
-                                    margin-top: 4px;
-                                    align-items: center;
-                                    justify-content: space-between;
-                                "
-                            >
-                                <p v-html="commont.remark" style="width: calc(100% - 20px); font-size: 14px"></p>
-                                <i
-                                    class="el-icon-edit"
-                                    v-if="isEditComment && commont.estate == 0"
-                                    @click="editComment(commont, index, 'editor')"
-                                    style="color: #006699; cursor: pointer"
-                                ></i>
-                            </div>
-                            <div
-                                :style="commont.estate == 1 ? 'opacity:0.6' : ''"
-                                v-if="commont.author_remark"
-                                style="
-                                    line-height: 18px;
-                                    min-height: 20px;
-                                    width: calc(100% -46px);
-                                    white-space: normal;
-                                    padding-left: 46px;
-                                    box-sizing: border-box;
-                                    display: flex;
-                                    margin-top: 4px;
-                                    align-items: center;
-                                    justify-content: space-between;
-                                "
-                            >
-                                <div
-                                    style="
-                                        width: calc(100% - 20px);
-                                        display: flex;
-                                        border-left: 2px solid #dedede;
-
-                                        align-items: center;
-                                        justify-content: space-between;
-                                    "
-                                >
-                                    <i class="el-icon-user-solid" style="color: #333; padding: 0 4px"></i>
-                                    <div v-html="commont.author_remark" style="width: calc(100% - 20px); font-size: 13px;line-height: 14px;"></div>
-                                </div>
-                                <i
-                                    class="el-icon-edit"
-                                    v-if="isUserEditComment && commont.estate == 0"
-                                    @click="editComment(commont, index, 'user')"
-                                    style="color: #006699; cursor: pointer"
-                                ></i>
-                            </div>
-                        </div>
-                    </div>
-                </li>
+                <el-tab-pane :label="`AI Proofreading`" name="proofreading" v-if="isEditComment" class="first-pane-width">
+                    <div :style="`width: calc(${rightW}px - 200px);position:relative;`"slot="label"> 
+    <span >
+                        AI proofreading
+                        <div class="pagination-box" style="" v-if="!isPreview&isEditComment && activeName == 'proofreading'">
+                <div class="arrow-group" v-if="totalItems > 0">
+                    <i
+                        class="el-icon-arrow-up"
+                        @click="handleUp"
+                        :style="{ opacity: currentItem === 1 ? 0.5 : 1 }"
+                        :disabled="currentItem === 1"
+                    ></i>
+                    <i
+                        class="el-icon-arrow-down"
+                        @click="handleDown"
+                        :style="{ opacity: currentItem === totalItems ? 0.5 : 1 }"
+                        :disabled="currentItem === totalItems"
+                    ></i>
+                </div>
             </div>
+                        <el-tooltip
+                            class="item"
+                            effect="dark"
+                            :content="`There are a total of ${totalNumbers} proofreading items that need to be addressed`"
+                            placement="top-start"
+                        >
+                            <span style="color: #888">( Total {{ totalNumbers }} ) </span>
+                        </el-tooltip>
+
+                        <el-tooltip
+                            v-if="totalItems > 0 && totalNumbers > 0"
+                            class="item"
+                            effect="dark"
+                            :content="`There are ${totalItems} paragraphs with unresolved errors in the Manuscript`"
+                            placement="top-start"
+                        >
+                            <span class="info-text"
+                                ><span v-if="showcurrentItemIndex()"
+                                    >Current <span style="color: rgb(230, 26, 18)">{{ showcurrentItemIndex() }}</span> ,</span
+                                >
+                                Total {{ totalItems }} paragraphs
+                            </span>
+                        </el-tooltip>
+                    </span>
+    </div>
+                    
+
+                    <div
+                        v-loading="proofreadingLoading"
+                        v-if="!isPreview"
+                        :style="{
+                            '--pos': 'fixed',
+                            '--p-t': '90px',
+                            '--p-r': '14px',
+                            '--p-b': '0',
+                            width: rightW ? `${rightW}px` : '310px'
+                        }"
+                        style=""
+                        class="commentList base-pos"
+                    >
+                        <li
+                            v-if="proofreadingList.length > 0"
+                            v-for="(item, index) in sortedProofreadingList"
+                            class="comment-item annotation b-box base-bg base-margin w-full"
+                            :data-target="`main-${item.am_id}`"
+                            style="height: 100%"
+                            :style="{ '--bg': '#fafafa', '--m': '0 0 10px' }"
+                        >
+                            <div style="height: 100%">
+                                <div class="base-flex-center base-bg" :style="{ '--jc': 'space-between', '--bg': '#f3d5d5c2' }">
+                                    <el-link
+                                        class="pizhu base-flex-center"
+                                        :style="{ '--jc': 'space-between' }"
+                                        @click="handleClickProofreading(item, index)"
+                                    >
+                                        <div
+                                            :style="rightW ? `width:${rightW}px` : ''"
+                                            style="
+                                                color: #fc625d;
+                                                display: flex;
+                                                align-items: center;
+                                                font-weight: bold;
+                                                width: 310px;
+                                                position: relative;
+                                            "
+                                        >
+                                            <img
+                                                class="isRemark"
+                                                src="@/assets/img/isRemark.png"
+                                                alt=""
+                                                style="width: 15px; height: 15px; margin-right: 6px"
+                                            />{{ item.am_id }}
+                                            <span
+                                                style="
+                                                    background: #707070;
+                                                    color: #fff;
+                                                    border-radius: 20px;
+                                                    padding: 0 6px;
+                                                    font-size: 12px;
+                                                    margin-left: 20px;
+                                                    position: absolute;
+                                                    right: 10px;
+                                                "
+                                                v-if="item && item.data && item.data.length > 0 && getUnresolved(item.data) > 0"
+                                                >Unresolved : {{ getUnresolved(item.data) }}</span
+                                            >
+                                        </div>
+                                    </el-link>
+                                </div>
+                                <div style="overflow-y: auto; height: calc(100% - 30px)" class="proofreadingBox">
+                                    <div
+                                        :data-proofreading-id="commont.id"
+                                        style="
+                                            cursor: pointer;
+                                            padding: 6px 6px;
+                                            box-sizing: border-box;
+                                            border-bottom: 1px solid rgba(243, 213, 213);
+                                            background-color: #fff;
+                                        "
+                                        :style="
+                                            commont.state == 1 ? 'background:#f0f0f0;' : commont.state == 3 ? 'background:#f0f0f0;' : ''
+                                        "
+                                        v-for="(commont, commentIndex) in item.data"
+                                        @click="highlightLefProofreading(commont.id, item, index)"
+                                    >
+                                        <div style="width: 100%; display: flex; align-items: flex-start; justify-content: space-between">
+                                            <div
+                                                style="display: flex; align-items: flex-start; line-height: 20px; width: calc(100% - 40px)"
+                                            >
+                                                <span
+                                                    :style="commont.state == 3 || commont.state == 1 ? 'opacity:0.6;color:#888;' : ''"
+                                                    style="color: #fb6868; font-weight: bold; font-size: 12px"
+                                                    >{{ commentIndex + 1 }}、</span
+                                                >
+
+                                                <span
+                                                    style="margin-top: 2px; margin-left: 0; margin-right: 4px; opacity: 0.6"
+                                                    v-if="commont.state == 1"
+                                                    class="Resolved"
+                                                    >{{ $t('commonTable.Resolved') }}</span
+                                                >
+                                                <span
+                                                    style="
+                                                        margin-top: 2px;
+                                                        margin-left: 0;
+                                                        margin-right: 4px;
+                                                        opacity: 0.6;
+                                                        background: #888;
+                                                    "
+                                                    v-if="commont.state == 3"
+                                                    class="Resolved"
+                                                    >{{ $t('commonTable.delete') }}</span
+                                                >
+                                                <div style="width: calc(100% - 20px); font-size: 14px">
+                                                    <div style="display: flex; align-items: flex-start; justify-content: space-between">
+                                                        <span
+                                                            style="
+                                                                color: rgb(230, 26, 18);
+                                                                font-size: 13px;
+                                                                display: inline-block;
+                                                                width: 60px;
+                                                                text-align: right;
+                                                            "
+                                                            :style="
+                                                                commont.state == 3 || commont.state == 1
+                                                                    ? 'opacity:0.6;color:#333;'
+                                                                    : 'color#fb6868'
+                                                            "
+                                                            >Incorrect:
+                                                        </span>
+                                                        <p
+                                                            :style="
+                                                                commont.state == 3 || commont.state == 1
+                                                                    ? 'opacity:0.6;color:#333;'
+                                                                    : 'color#fb6868'
+                                                            "
+                                                            class="proofreading_content"
+                                                            v-html="commont.verbatim_texts"
+                                                            style="width: calc(100% - 60px); color: #812525; font-size: 14px"
+                                                        ></p>
+                                                    </div>
+                                                    <div style="display: flex; align-items: flex-start; justify-content: space-between">
+                                                        <span
+                                                            style="
+                                                                color: rgb(230, 26, 18);
+                                                                font-size: 13px;
+                                                                display: inline-block;
+                                                                width: 60px;
+                                                                text-align: right;
+                                                            "
+                                                            :style="
+                                                                commont.state == 3 || commont.state == 1
+                                                                    ? 'opacity:0.6;color:#333;'
+                                                                    : 'color:#027E6F;'
+                                                            "
+                                                            >Correct:
+                                                        </span>
+                                                        <p
+                                                            :style="
+                                                                commont.state == 3 || commont.state == 1
+                                                                    ? 'opacity:0.6;color:#333;'
+                                                                    : 'color#fb6868'
+                                                            "
+                                                            class="proofreading_content"
+                                                            v-html="commont.revised_content"
+                                                            style="width: calc(100% - 60px); color: #333; font-size: 14px"
+                                                        ></p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div
+                                            :style="commont.state == 1 ? 'opacity:0.6' : ''"
+                                            style="
+                                                line-height: 18px;
+                                                min-height: 20px;
+                                                width: calc(100% - 0px);
+                                                white-space: normal;
+                                                padding-left: 0px;
+                                                box-sizing: border-box;
+                                                display: flex;
+                                                margin-top: 4px;
+                                                align-items: center;
+                                                justify-content: space-between;
+                                            "
+                                        >
+                                            <div style="width: calc(100%); font-size: 14px">
+                                                <div
+                                                    style="
+                                                        display: flex;
+                                                        align-items: flex-start;
+                                                        justify-content: space-between;
+                                                        color: #918f8f;
+                                                    "
+                                                >
+                                                    <span
+                                                        style="
+                                                            color: rgb(230, 26, 18);
+                                                            font-size: 13px;
+                                                            display: inline-block;
+                                                            width: 75px;
+                                                            text-align: right;
+                                                        "
+                                                        :style="commont.estate == 1 ? 'opacity:0.6;color:#918f8f;' : 'color:#918f8f'"
+                                                        >Explanation:
+                                                    </span>
+                                                    <p v-html="commont.explanation" style="width: calc(100% - 78px); font-size: 14px"></p>
+                                                </div>
+                                            </div>
+
+                                            <i
+                                                class="el-icon-edit"
+                                                v-if="isEditComment && commont.estate == 0"
+                                                @click="editComment(commont, index, 'editor')"
+                                                style="color: #006699; cursor: pointer"
+                                            ></i>
+                                        </div>
+
+                                        <div style="width: 100%; margin-top: 4px" v-if="isEditComment && commont.state != 3">
+                                            <div
+                                                style="
+                                                    cursor: pointer;
+                                                    width: 100%;
+                                                    display: flex;
+                                                    align-items: center;
+                                                    justify-content: space-between;
+                                                "
+                                                class="commentOperate"
+                                                v-if="isEditComment"
+                                            >
+                                                <div style="display: flex; align-items: center">
+                                                    <p
+                                                        class="commentOperateItem proofreadingOperateItem"
+                                                        v-if="isEditComment && commont.state == 2"
+                                                        @click.stop="executeProofreading(commont)"
+                                                    >
+                                                        <i class="el-icon-check" style="color: #34c749"></i>
+                                                        <span style="color: #34c749">{{ $t('commonTable.execute') }}</span>
+                                                    </p>
+
+                                                    <p
+                                                        v-if="isEditComment && commont.state == 1"
+                                                        class="commentOperateItem proofreadingOperateItem"
+                                                        @click.stop="revokeProofreading(commont)"
+                                                    >
+                                                        <i class="el-icon-close" style="color: #333"></i>
+                                                        <span style="color: #333">{{ $t('commonTable.revoke') }}</span>
+                                                    </p>
+                                                </div>
+                                                <div style="display: flex; align-items: center">
+                                                    <p
+                                                        style="margin-right: 20px"
+                                                        v-if="isEditComment && commont.state == 2"
+                                                        class="commentOperateItem proofreadingOperateItem"
+                                                        @click.stop="editProofreading(commont)"
+                                                    >
+                                                        <i class="el-icon-edit" style="color: #006699"></i>
+                                                        <span style="color: #006699">{{ $t('commonTable.edit') }}</span>
+                                                    </p>
+                                                    <p
+                                                        v-if="isEditComment && commont.state == 2"
+                                                        class="commentOperateItem proofreadingOperateItem"
+                                                        @click.stop="deleteProofreading(commont)"
+                                                    >
+                                                        <i class="el-icon-delete" style="color: #ed382d"></i>
+                                                        <span style="color: #ed382d"> {{ $t('commonTable.delete') }}</span>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <div v-else>No Data</div>
+                    </div></el-tab-pane
+                >
+                <el-tab-pane label="Comment" name="Comment"
+                    ><div
+                        v-if="!isPreview && isShowPiZhu"
+                        style="
+                            width: 310px;
+                            position: fixed;
+                            top: 90px;
+                            box-sizing: border-box;
+                            right: 14px;
+                            bottom: 0;
+
+                            overflow-y: auto;
+                        "
+                        :style="rightW ? `width:${rightW}px` : ''"
+                        class="commentList"
+                    >
+                        <li
+                            v-for="(item, index) in commentList"
+                            class="comment-item annotation"
+                            :data-target="`main-${item.am_id}`"
+                            style="width: 100%; margin: 0 0 10px; background: #fafafa; box-sizing: border-box"
+                        >
+                            <div>
+                                <div
+                                    class="base-flex-center"
+                                    :style="{
+                                        '--fl-jc': 'space-between'
+                                    }"
+                                    style="background-color: var(--primary-comment-bg)"
+                                >
+                                    <el-link
+                                        class="pizhu base-flex"
+                                        :style="{
+                                            '--fl-ai': 'center'
+                                        }"
+                                        @click="highlightLeftComment(null,item.am_id)"
+                                    >
+                                        <span
+                                            class="base-flex"
+                                            :style="{
+                                                '--fl-ai': 'center'
+                                            }"
+                                            style="color: var(--primary-comment-font-deep); font-weight: bold"
+                                        >
+                                            <img
+                                                class="isRemark"
+                                                src="@/assets/img/isRemark.png"
+                                                alt=""
+                                                style="width: 15px; height: 15px; margin-right: 6px"
+                                            />{{ item.am_id }}
+                                        </span>
+                                    </el-link>
+                                </div>
+                                <div
+                                    style="padding: 6px 6px; box-sizing: border-box; border-bottom: 1px solid rgba(243, 213, 213)"
+                                    :style="commont.estate == 1 ? 'background:#13bc200f;' : ''"
+                                    v-for="(commont, commentIndex) in item.comment"
+                                    @click="highlightLeftComment(commont.amc_id, item.am_id)"
+                                >
+                                    <div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
+                                        <div style="display: flex; align-items: center; line-height: 20px">
+                                            <span
+                                                :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
+                                                style="color: var(--primary-comment-font-deep); font-weight: bold; font-size: 12px"
+                                                >{{ commentIndex + 1 }}、</span
+                                            >
+                                            <span
+                                                style="color: var(--primary-comment-font-deep); font-size: 12px"
+                                                :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
+                                                >Comment</span
+                                            >
+
+                                            <span
+                                                v-if="commont.estate == 1"
+                                                class="Resolved"
+                                                :style="commont.estate == 1 ? 'opacity:0.6;' : ''"
+                                                >{{ $t('commonTable.Resolved') }}</span
+                                            >
+                                        </div>
+                                        <div style="display: flex; align-items: center; justify-content: center; line-height: 20px">
+                                            <span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span
+                                            ><span
+                                                style="color: #aaa; font-size: 13px; margin: 0 4px"
+                                                v-if="(!isEditComment && commont.estate == 0) || isEditComment"
+                                                >|</span
+                                            >
+                                            <el-dropdown
+                                                style="cursor: pointer"
+                                                class="commentOperate"
+                                                v-if="(!isEditComment && commont.estate == 0) || isEditComment"
+                                            >
+                                                <span
+                                                    class="el-dropdown-link"
+                                                    style="display: flex; align-items: center; justify-content: center"
+                                                >
+                                                    <img
+                                                        src="@/assets/img/selectComment.png"
+                                                        alt=""
+                                                        style="width: 18px; height: 18px; margin-top: 2px"
+                                                    />
+                                                </span>
+                                                <el-dropdown-menu slot="dropdown">
+                                                    <el-dropdown-item>
+                                                        <p
+                                                            class="commentOperateItem"
+                                                            v-if="!isEditComment && commont.estate == 0"
+                                                            @click="replyComment(commont)"
+                                                        >
+                                                            <img src="@/assets/img/replyComment.png" alt="" />
+                                                            <span style="color: #000">{{ $t('commonTable.reply') }}</span>
+                                                        </p>
+                                                    </el-dropdown-item>
+                                                    <!-- <el-dropdown-item>答复</el-dropdown-item> -->
+                                                    <el-dropdown-item>
+                                                        <p
+                                                            class="commentOperateItem"
+                                                            v-if="commont.estate == 0"
+                                                            @click="solveComment(commont)"
+                                                        >
+                                                            <img src="@/assets/img/solveComment.png" alt="" />
+                                                            <span style="color: #34c749">{{ $t('commonTable.solve') }}</span>
+                                                        </p>
+                                                    </el-dropdown-item>
+                                                    <el-dropdown-item>
+                                                        <p
+                                                            class="commentOperateItem"
+                                                            v-if="isEditComment && commont.estate == 1"
+                                                            @click="cancelSolveComment(commont)"
+                                                        >
+                                                            <img src="@/assets/img/solveComment.png" alt="" />
+                                                            <span style="color: #bbb">{{ $t('commonTable.cancelsolve') }}</span>
+                                                        </p>
+                                                    </el-dropdown-item>
+                                                    <el-dropdown-item
+                                                        v-if="isEditComment && commont.estate == 0 && commont.author_remark == ''"
+                                                    >
+                                                        <p class="commentOperateItem" @click="deleteComment(commont)">
+                                                            <img src="@/assets/img/deleteComment.png" alt="" />
+                                                            <span style="color: #ed382d"> {{ $t('commonTable.delete') }}</span>
+                                                        </p>
+                                                    </el-dropdown-item>
+                                                </el-dropdown-menu>
+                                            </el-dropdown>
+                                        </div>
+                                    </div>
+                                    <div
+                                        :style="commont.estate == 1 ? 'opacity:0.6' : ''"
+                                        style="
+                                            line-height: 18px;
+                                            min-height: 20px;
+                                            width: calc(100% -26px);
+                                            white-space: normal;
+                                            padding-left: 26px;
+                                            box-sizing: border-box;
+                                            display: flex;
+                                            margin-top: 4px;
+                                            align-items: center;
+                                            justify-content: space-between;
+                                        "
+                                    >
+                                        <p v-html="commont.remark" style="width: calc(100% - 20px); font-size: 14px"></p>
+                                        <i
+                                            class="el-icon-edit"
+                                            v-if="isEditComment && commont.estate == 0"
+                                            @click="editComment(commont, index, 'editor')"
+                                            style="color: #006699; cursor: pointer"
+                                        ></i>
+                                    </div>
+                                    <div
+                                        :style="commont.estate == 1 ? 'opacity:0.6' : ''"
+                                        v-if="commont.author_remark"
+                                        style="
+                                            line-height: 18px;
+                                            min-height: 20px;
+                                            width: calc(100% -46px);
+                                            white-space: normal;
+                                            padding-left: 46px;
+                                            box-sizing: border-box;
+                                            display: flex;
+                                            margin-top: 4px;
+                                            align-items: center;
+                                            justify-content: space-between;
+                                        "
+                                    >
+                                        <div
+                                            style="
+                                                width: calc(100% - 20px);
+                                                display: flex;
+                                                border-left: 2px solid #dedede;
+
+                                                align-items: center;
+                                                justify-content: space-between;
+                                            "
+                                        >
+                                            <i class="el-icon-user-solid" style="color: #333; padding: 0 4px"></i>
+                                            <div
+                                                v-html="commont.author_remark"
+                                                style="width: calc(100% - 20px); font-size: 13px; line-height: 14px"
+                                            ></div>
+                                        </div>
+                                        <i
+                                            class="el-icon-edit"
+                                            v-if="isUserEditComment && commont.estate == 0"
+                                            @click="editComment(commont, index, 'user')"
+                                            style="color: #006699; cursor: pointer"
+                                        ></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </li></div
+                ></el-tab-pane>
+            </el-tabs>
         </div>
 
-        <!-- <form method="post"> -->
+        <div v-if="isMenuVisible" class="wps-two-layer-bar" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }" @mousedown.stop>
+            <div class="bar-row">
+                <div v-if="currentData.type == 0" class="h-group">
+                 
+                    <span :class="['h-item', { active: currentData.is_h1 == 1 }]" @click="changeTitle(1)">H1</span>
+                    <span :class="['h-item', { active: currentData.is_h2 == 1 }]" @click="changeTitle(2)">H2</span>
+                    <span :class="['h-item', { active: currentData.is_h3 == 1 }]" @click="changeTitle(3)">H3</span>
+                </div>
+                <div class="row-divider" v-if="currentData.type == 0"></div>
+                <div v-if="isEditComment && currentData.type == 0" class="menu-item ai-feat" @click="menuAction('proofreading')">
+                    <i class="el-icon-magic-stick"></i><span>AI Proofreading</span>
+                </div>
+                <div v-if="isEditComment" class="menu-item comment-feat" @mousedown="cacheSelection" @click="menuAction('comment')">
+                    <i class="el-icon-chat-line-square"></i><span>Comment</span>
+                </div>
+                <div class="row-divider" v-if="currentData.type == 0"></div>
+                <div  class="menu-item comment-feat" @mousedown="cacheSelection" v-if="currentData.type == 0" @click="menuAction('link')">
+                    <i class="el-icon-link"></i><span>Link</span>
+                </div>
+            </div>
 
-        <!-- </form> -->
+            <div class="bar-row bottom-row">
+                <div class="menu-item" @click="menuAction('row')"><i class="el-icon-plus"></i><span>Add Row</span></div>
+                <div class="menu-item primary" @click="menuAction('edit')"><i class="el-icon-edit"></i><span>Edit</span></div>
 
-        <!-- <textarea class="tinymce-textarea" :id="tinymceId"></textarea> -->
+                <div class="menu-item danger" @click="menuAction('delete')"><i class="el-icon-delete"></i><span>Delete</span></div>
+                <div class="row-divider"></div>
+                <div class="menu-item" @click="menuAction('up')"><i class="el-icon-top"></i><span>Move Up</span></div>
+                <div class="menu-item" @click="menuAction('down')"><i class="el-icon-bottom"></i><span>Move Down</span></div>
+            </div>
+        </div>
+        <el-dialog
+            append-to-body
+            destroy-on-close
+            v-if="editProofreadingContentVisible"
+            title="Edit Content"
+            :visible.sync="editProofreadingContentVisible"
+            width="1200px"
+            :close-on-click-modal="false"
+        >
+            <el-form ref="editMes" :model="proofreadingContent" label-width="115px">
+                <el-form-item label="Word">
+                    <span slot="label">
+                        <font style="color: #f56c6c; margin-right: 5px">*</font>
+                        Content :
+                    </span>
+
+                    <common-content
+                        :value="proofreadingContent.content"
+                        @getContent="getContent1"
+                        v-if="editProofreadingContentVisible"
+                        ref="proofreadingContent"
+                        style="margin-left: -115px"
+                    ></common-content>
+                </el-form-item>
+            </el-form>
+
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="editVisible = false"> Cancel </el-button>
+                <el-button type="primary" @click="handleSaveEditProofreadingContent">
+                    <!-- <i class="el-icon-finished" style="margin-right: 5px"></i> -->
+                    Save
+                </el-button>
+            </span>
+        </el-dialog>
+        <div class="rail" ref="rail" v-if="isEditComment">
+            <div
+                v-for="(m, i) in markers"
+                :key="i"
+                class="dot"
+                :title="m.label"
+                :style="{ top: m.top + 'px', background: m.color, height: m.height + 'px' }"
+                @click="scrollToIndex(m.am_id)"
+            />
+            <!-- 当前视口位置提示（可选） -->
+        </div>
+        <common-media-link-dialog ref="mediaLinkRef" @onLinkConfirm="onLinkConfirm" :articleId="articleId"></common-media-link-dialog>
     </div>
 </template>
 <script>
@@ -341,6 +1011,12 @@ const tableStyle = `
                     }blue {
                             color: rgb(0, 130, 170) !important;
                         }
+                        blue sup{
+                            color: rgb(0, 130, 170) !important;
+                        }
+                        blue sub{
+                            color: rgb(0, 130, 170) !important;
+                        }
 b span{
                             font-weight: bold !important;
                         }
@@ -400,7 +1076,7 @@ b span{
                             border-top:none;mso-border-top-alt:none !important;
                             border-bottom:none !important;
                             mso-border-bottom-alt:none !important;
-                           
+
                             word-break: keep-all !important;
                             // text-align: justify !important; // 设置两端对齐
 
@@ -445,7 +1121,8 @@ b span{
     color: rgb(0, 130, 170) !important;
 }
                         `;
-
+import { TableUtils } from '@/common/js/TableUtils';
+import { debounce, throttle } from '@/common/js/debounce';
 export default {
     name: 'tinymce',
     components: {},
@@ -453,6 +1130,10 @@ export default {
         id: {
             type: String
         },
+        articleId: {
+         
+            default: ''
+        },
         isPreview: {
             type: Boolean,
             default() {
@@ -481,7 +1162,7 @@ export default {
             }
         },
         comments: {
-            type: Object,
+            type: [Array, Object], // 允许数组或对象
 
             default() {
                 return {};
@@ -510,9 +1191,36 @@ export default {
     },
     data() {
         return {
+            totalNumbers: 0,
+            proofreadingLoading: false, // 总项数
+            totalItems: 0, // 总项数
+            currentItem: 0, // 当前项
+            markers: [],
+            viewportTop: 0,
+            viewportHeight: 0,
+            resizeObs: null,
+            mutObs: null,
+            rightW: '',
+            currentSelectProofreadingId: '',
+            activeName: '',
+            editProofreadingContentVisible: false,
+            proofreadingContent: {},
+            isShowPiZhu: true,
+            isMenuVisible: false,
+            menuPosition: { x: 0, y: 0 },
+            menuType: '', // 用来区分不同的菜单
+            cachedHtml: '', // 缓存选中的 HTML
+            cachedText: '', // 缓存选中的纯文本
+            cachedMainId: null, // 选中的 main-id
+            cachedType: null, // 选中的 type
+            currentId: null,
+            currentIndex: null,
+            checked: false,
+            currentData: {},
             imagePath: require('@/assets/img/carriageReturn.png'), // 或者你可以设置其他路径
             scrollPosition: 0,
             wordList: [],
+            proofreadingList: [],
             commentList: [],
             visibleDivs: [], // 存储当前可见的 div id
             editors: {}, // 用于存储每个编辑器的实例
@@ -556,6 +1264,7 @@ export default {
                 }
             ],
             uploadReset: false,
+            uniqueIds: [],
             dialogVisible: false,
             form: {
                 name: '',
@@ -570,7 +1279,7 @@ export default {
             formLabelWidth: '120px',
             hasChange: false,
             hasInit: false,
-
+            selectedIds: [],
             tinymceId: this.id || 'vue-tinymce-' + +new Date()
         };
     },
@@ -578,44 +1287,84 @@ export default {
     watch: {
         contentList: {
             handler(val) {
-                console.log('val at line 550:', val);
                 if (val) {
                     this.wordList = [...this.contentList];
+                    this.initHtml();
+                    this.selectedIds = [];
+
+                    this.$forceUpdate();
+
+                    if (this.isEditComment && this.activeName == 'proofreading') {
+                        this.calcMarkers();
+                    }
                     this.$nextTick(() => {
+                        window.renderMathJax(); // 主动触发 MathJax 渲染
                         this.getCommentsData();
                     });
                 }
             },
             deep: true // 启用深度监听
+        },
+        totalNumbers: {
+            handler(val) {
+                if (val == 0) {
+                    this.markers = [];
+                }
+            },
+            deep: true // 启用深度监听
         }
     },
+    computed: {
+        sortedProofreadingList() {
+            const order = [2, 1, 3];
+            const rank = { 2: 0, 1: 1, 3: 2 };
+
+            function cmp(a, b) {
+                var ra = rank[a.state] != null ? rank[a.state] : 999;
+                var rb = rank[b.state] != null ? rank[b.state] : 999;
+                if (ra !== rb) return ra - rb;
+                return (a.id || 0) - (b.id || 0);
+            }
+
+            var list = this.proofreadingList || [];
+            return list.map(function (group) {
+                var data = group && group.data ? group.data : [];
+                return Object.assign({}, group, { data: data.slice().sort(cmp) });
+            });
+        }
+        //         selectedIds() {
+
+        //     return this.wordList.filter(item => item.checked).map(item => item.am_id);
+        //   }
+    },
     updated() {
         // 恢复子组件的滚动位置
         // this.$refs.scrollDiv.scrollTop = this.scrollPosition;
     },
     mounted() {
-        this.$nextTick(() => {
-            this.getCommentsData();
-            if (!this.isPreview && localStorage.getItem('scrollPosition')) {
-                this.$refs.scrollDiv.scrollTop = localStorage.getItem('scrollPosition'); // 滚动到 500px 位置
-            }
-        });
-        this.isShowEditComment();
+        document.addEventListener('selectionchange', this.handleSelectionUpdate);
+        this.isShowPiZhu = false;
         this.typesettingType = 1;
         this.editors = {};
         this.wordList = [...this.contentList];
+        this.initHtml();
+        this.isShowEditComment();
         this.$nextTick(() => {
+            window.renderMathJax(); // 主动触发 MathJax 渲染
             this.getCommentsData();
         });
-
         this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
     },
     activated() {
-        this.isShowEditComment();
+        // 主动触发 MathJax 渲染
         this.typesettingType = 1;
         this.editors = {};
         this.wordList = [...this.contentList];
-
+        this.isShowEditComment();
+        this.$nextTick(() => {
+            window.renderMathJax(); // 主动触发 MathJax 渲染
+            this.getCommentsData();
+        });
         this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
     },
     deactivated() {
@@ -623,8 +1372,6 @@ export default {
         this.editors = {};
     },
     beforeDestroy() {
-      
-
         for (const key in this.editors) {
             if (this.editors[key]) {
                 // 确保销毁所有编辑器实例
@@ -632,6 +1379,9 @@ export default {
                 this.editors[key] = null; // 清除引用
             }
         }
+        // window.removeEventListener('resize', this.calcMarkers);
+        if (this.resizeObs) this.resizeObs.disconnect();
+        if (this.mutObs) this.mutObs.disconnect();
         // 页面销毁前清理定时器和事件监听器
     },
     destroy() {
@@ -639,9 +1389,677 @@ export default {
         this.editors = {};
     },
     methods: {
+        // 优化后的选区处理
+        handleSelectionUpdate() {
+        const selection = window.getSelection();
+        const selectedText = selection.toString().trim();
+
+        // 只有当选中的是编辑器内部的内容，且字数 > 0 时才显示
+        if (selectedText && this.$refs.tinymceContent.contains(selection.anchorNode)) {
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect(); // 拿到选中文字的精确矩形
+
+            // 设置菜单位置：水平居中，垂直在选区上方
+            this.menuPosition = {
+                x: rect.left + rect.width / 2,
+                y: rect.top - 10 // 向上偏移 10px 避开文字
+            };
+            this.isMenuVisible = true;
+        } else {
+            // 如果只是普通点击（没选文字），立刻隐藏
+            this.isMenuVisible = false;
+        }
+    },
+        initHtml() {
+            this.wordList = [...this.wordList].map((item) => {
+                if (item.type === 2 && item.table && item.table.table_data) {
+                    const processed = this.processTableData(item.table.table_data);
+                    return {
+                        ...item,
+                        table: {
+                            ...item.table,
+                            tableHeader: processed.tableHeader,
+                            tableContent: processed.tableContent,
+                            oddRowIds: processed.oddRowIds
+                        }
+                    };
+                }
+                return item;
+            });
+        },
+        processTableData(rawContent) {
+            try {
+                // 解析字符串（如果是 JSON 字符串的话）
+                const tableList = typeof rawContent === 'string' ? JSON.parse(rawContent) : rawContent;
+
+                // 1. 拆分表头和内容
+                const { header, content } = TableUtils.splitTable(tableList);
+
+                // 2. 计算跨行 ID 和斑马纹 ID 集合
+                const { rowData, rowIds } = TableUtils.addRowIdToData(content);
+                
+                return {
+                    tableHeader: header,
+                    tableContent: rowData,
+                    oddRowIds: rowIds // 存储用于变色的 ID 集合
+                };
+            } catch (e) {
+               
+                return { tableHeader: [], tableContent: [], oddRowIds: [] };
+            }
+        },
+
+        // 渲染时获取行 Class
+        getTableRowClass(row, rowIndex, isHeader, oddRowIds = []) {
+            if (isHeader) return 'table-header-row';
+
+            // 这里的 row.rowId 是在 TableUtils.addRowIdToData 中生成的
+            const isOdd = row.rowId && oddRowIds.includes(row.rowId);
+            return `table-content-row ${isOdd ? 'oddColor' : ''}`;
+        },
+        isChecked(am_id) {
+            // 返回一个函数，接收 am_id 并判断是否存在
+            if (this.selectedIds.includes(am_id)) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+
+        handleClickAI() {
+            this.$api
+                .post('api/Proofread/proofReadByArticle', {
+                    article_id: this.$route.query.id
+                })
+                .then(async (res) => {
+                    if (res.status == 1) {
+                        this.$message.success(res.msg);
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err.message);
+                });
+        },
+        showcurrentItemIndex() {
+            var index = this.markers.findIndex((e) => e.am_id == this.currentSelectProofreadingId);
+            if (index != -1) {
+                return index + 1;
+            } else {
+                return '';
+            }
+        },
+        async handleClickProofreadingList([am_id]) {
+            await this.getProofreadingList([am_id]);
+            this.currentItem = this.markers.find((e) => e.am_id == am_id).index + 1;
+        },
+        // 上一项
+        handleUp() {
+            if (this.currentItem > 1) {
+                this.currentItem--;
+            } else {
+                this.currentItem = this.totalItems;
+            }
+            var am_id = this.markers[this.currentItem - 1].am_id;
+            if (am_id != this.currentSelectProofreadingId) {
+                this.getProofreadingList([am_id]);
+                this.handleClickProofreading({ am_id: am_id }, 0);
+            }
+        },
+        // 下一项
+        handleDown() {
+            if (this.currentItem < this.totalItems) {
+                this.currentItem++;
+            } else {
+                this.currentItem = 1;
+            }
+            var am_id = this.markers[this.currentItem - 1].am_id;
+
+            if (am_id != this.currentSelectProofreadingId) {
+                this.getProofreadingList([am_id]);
+                this.handleClickProofreading({ am_id: am_id }, 0);
+            }
+        },
+        // 统一的区间映射
+        mapRange(v, inMin, inMax, outMin, outMax) {
+            const p = (Math.min(Math.max(v, inMin), inMax) - inMin) / Math.max(1, inMax - inMin);
+            return outMin + p * (outMax - outMin);
+        },
+        topInScroll(el, sc) {
+            const rEl = el.getBoundingClientRect();
+            const rSc = sc.getBoundingClientRect();
+            return rEl.top - rSc.top + sc.scrollTop; // 相对滚动容器顶部
+        },
+        async getPList(am_id) {
+            var data = { state: '1,2', article_id: this.$route.query.id };
+            if (am_id) {
+                data.am_id = am_id;
+            }
+            await this.$api.post('api/Proofread/getCountByState', data).then(async (res) => {
+                if (res.status == 1 && res.data) {
+                    this.totalNumbers = res.data.sum_count;
+                    if (am_id) {
+                        var refreshDataIndex = this.wordList.findIndex((e) => e.am_id == am_id);
+
+                        if (res.data.am_id_count || res.data.am_id_count == 0) {
+                            this.wordList[refreshDataIndex].proof_read_num = res.data.am_id_count;
+                        }
+                        if (res.data.is_proofread) {
+                            this.wordList[refreshDataIndex].is_proofread = res.data.is_proofread;
+                        }
+
+                        this.$forceUpdate();
+                    }
+
+                    this.$forceUpdate();
+                }
+            });
+        },
+        async initMarkersList() {
+            await this.getPList();
+            await this.calcMarkers();
+            // if (this.markers.length > 0) {
+            //     this.totalItems = this.markers.length;
+            //     // this.currentItem = 1;
+            //     // await this.getProofreadingList([this.markers[this.currentItem - 1].am_id]);
+            // }
+        },
+        async calcMarkers() {
+            const colors = { 2: '#f97316', 1: '#3b82f6', 3: '#10b981' }; // 可自定义
+            const sc = this.$refs.scrollDiv; // ★ 用 scrollDiv
+            const rail = this.$refs.rail;
+            if (!sc || !rail) return;
+            const contentH = sc.scrollHeight;
+            const viewH = sc.clientHeight;
+            const scrollRange = Math.max(1, contentH - viewH);
+            const dotH = 6;
+            const railH = rail.clientHeight;
+            const railRange = Math.max(1, railH - dotH);
+            // 视口指示（可选）
+            this.viewportHeight = Math.max(6, railH * (viewH / contentH));
+            const vpRange = Math.max(1, railH - this.viewportHeight);
+            this.viewportTop = Math.round(this.mapRange(sc.scrollTop, 0, scrollRange, 0, vpRange));
+            const out = [];
+
+            var newArr = [...this.wordList].filter((e) => e.proof_read_num > 0);
+            (newArr || []).forEach((_, i) => {
+                const r = this.$refs['row-' + _.am_id];
+                const el = Array.isArray(r) ? r[0] : r;
+                if (!el) return;
+                const topScroll = this.topInScroll(el, sc);
+                const topRail = Math.round(this.mapRange(topScroll, 0, scrollRange, 0, railRange));
+                out.push({ index: i, top: topRail, height: dotH, am_id: _.am_id, color: colors[_.state] || '#b06000e0' });
+            });
+            this.markers = out.sort((a, b) => a.top - b.top);
+            if (this.markers.length > 0) {
+                this.totalItems = this.markers.length;
+            }
+        },
+
+        scrollToIndex(am_id) {
+            const sc = this.$refs.scrollDiv; // ★ 用 scrollDiv
+            const r = this.$refs['row-' + am_id];
+            const el = Array.isArray(r) ? r[0] : r;
+            if (!sc || !el) return;
+            const top = this.topInScroll(el, sc) - 80;
+            console.log('top at line 1491:', top);
+
+            sc.scrollTo({ top, behavior: 'smooth' });
+        },
+
+        handleSaveEditProofreadingContent: throttle(function () {
+            this.$refs.proofreadingContent.getTinymceContent('proofreadingContent');
+        }, 2000),
+        convertSpacesToNbsp(html) {
+            // 把字符串转成 DOM 结构
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(`<div>${html}</div>`, 'text/html'); // 包一层防止body空
+
+            // 遍历所有文本节点
+            const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+            let node;
+            while ((node = walker.nextNode())) {
+                const text = node.nodeValue;
+
+                // 转换逻辑：
+                // 1. 保留开头和结尾空格
+                // 2. 保留中间连续空格
+                const replaced = text
+                    .replace(/(^ +)|( +$)/g, (m) => '\u00A0'.repeat(m.length)) // 首尾空格
+                    .replace(/ {2,}/g, (m) => '\u00A0'.repeat(m.length)); // 中间多个空格
+
+                node.nodeValue = replaced;
+            }
+
+            return doc.body.innerHTML;
+        },
+        async editProofreadingContent(data) {
+            console.log('data at line 1276:', data);
+
+            data.revised_content = await this.convertSpacesToNbsp(data.revised_content);
+            this.proofreadingContent = {
+                ...data,
+                content: data.revised_content.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, '') // 去除span标签
+            };
+            this.editProofreadingContentVisible = true;
+
+            // this.currentId = data.am_id;
+        },
+        async handleClickProofreading(data, index) {
+            await this.goToListComment(data);
+        },
+        // 让右侧相同 id 的项闪一下边框，并可选滚动到可视区域
+        flashRightPanel(proofreadingId, { scroll = true, offset = 80 } = {}) {
+            // 1️⃣ 清除所有其他元素的闪烁样式
+            const oldFlashEls = document.querySelectorAll('.flash-border');
+            oldFlashEls.forEach((el) => {
+                el.classList.remove('flash-border');
+                if (el.__flashTimer) {
+                    clearTimeout(el.__flashTimer);
+                    el.__flashTimer = null;
+                }
+                if (el.__flashHandler) {
+                    el.removeEventListener('animationend', el.__flashHandler);
+                    el.__flashHandler = null;
+                }
+            });
+
+            // 2️⃣ 获取当前匹配元素
+            const items = document.querySelectorAll(`[data-proofreading-id="${proofreadingId}"]`);
+            if (!items.length) return;
+
+            items.forEach((el) => {
+                // 3️⃣ 确保能重新触发动画
+                el.classList.remove('flash-border');
+                // 强制重排
+                void el.offsetWidth;
+                el.classList.add('flash-border');
+
+                // 4️⃣ 动画结束时自动清除
+                el.__flashHandler = (evt) => {
+                    if (evt.animationName === 'flashFade') {
+                        el.classList.remove('flash-border');
+                        el.removeEventListener('animationend', el.__flashHandler);
+                        el.__flashHandler = null;
+                    }
+                };
+                el.addEventListener('animationend', el.__flashHandler);
+
+                // 5️⃣ 兜底 2 秒后清除
+                el.__flashTimer = setTimeout(() => {
+                    el.classList.remove('flash-border');
+                    if (el.__flashHandler) {
+                        el.removeEventListener('animationend', el.__flashHandler);
+                        el.__flashHandler = null;
+                    }
+                    el.__flashTimer = null;
+                }, 1000);
+
+                // 6️⃣ 自动滚动
+                //   if (scroll) this.scrollContainerTo(el, offset);
+            });
+        },
+        scrollContainerTo(targetEl, offset = 80) {
+            const getScrollableParent = (el) => {
+                let p = el && el.parentElement;
+                while (p) {
+                    const cs = getComputedStyle(p);
+                    if (/(auto|scroll)/.test(cs.overflowY) && p.scrollHeight > p.clientHeight) return p;
+                    p = p.parentElement;
+                }
+                return document.scrollingElement || document.documentElement;
+            };
+
+            const container = getScrollableParent(targetEl);
+            const cRect = container.getBoundingClientRect();
+            const tRect = targetEl.getBoundingClientRect();
+            const top = tRect.top - cRect.top + container.scrollTop - offset;
+            container.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+            if (this.isEditComment) {
+                if (tab.index == 0) {
+                    this.activeName == 'proofreading';
+                    this.isShowPiZhu = false;
+                    this.currentItem = 1;
+                    this.initMarkersList();
+                } else {
+                    this.proofreadingList = [];
+                    this.markers = [];
+                    this.currentSelectProofreadingId = '';
+                    this.activeName == 'Comment';
+                    this.isShowPiZhu = true;
+                }
+            } else {
+                this.proofreadingList = [];
+                this.markers = [];
+                this.currentSelectProofreadingId = '';
+                this.activeName == 'Comment';
+                this.isShowPiZhu = true;
+                this.getCommentsData();
+            }
+
+            this.$nextTick(() => {
+                window.renderMathJax();
+            });
+        },
+        openMenu(event, type, currentId) {
+            console.log('event at line 860:', event);
+            // 获取鼠标点击位置
+            this.menuPosition.x = event.clientX + 30;
+            this.menuPosition.y = event.clientY + 40;
+            this.menuType = type; // 设置菜单类型，根据点击区域不同显示不同菜单
+            // this.currentId=currentId;
+            this.isMenuVisible = true;
+        },
+        closeMenu() {
+            this.isMenuVisible = false;
+        },
+        handleAIProofreading() {
+            if (this.currentId) {
+                console.log('this.currentId at line 1716:', this.currentId);
+                this.$api
+                    .post('api/Proofread/proofReadByLine', {
+                        am_id: this.currentId,
+                        article_id: this.$route.query.id
+                    })
+                    .then((res) => {
+                        if (res.status == 1) {
+                            this.$message.success(res.msg);
+                        } else {
+                            this.$message.error(res.msg);
+                        }
+                    })
+                    .catch((err) => {
+                        this.$message.error(err.msg);
+                    });
+            }
+        },
+        menuAction(action) {
+           
+            switch (action) {
+                case 'addContent':
+                    this.addContent();
+                    break;
+                case 'comment':
+                    this.handleSelection();
+                    break;
+                case 'link':
+                    this.handleOpenLink();
+                    break;
+                case 'proofreading':
+                    this.handleAIProofreading();
+                    break;
+                case 'edit':
+                    this.onEdit();
+                    break;
+                case 'row':
+                    this.onAddRow('');
+                    break;
+                case 'up':
+                    this.changeSort('up');
+                    break;
+                case 'down':
+                    this.changeSort('down');
+                    break;
+                case 'delete':
+                    this.onDelete();
+                    break;
+            }
+            this.closeMenu();
+        },
+
+        changeSort(type) {
+            console.log('type at line 782:', type);
+            if (this.currentId) {
+                this.$emit('changeSort', type, this.currentId);
+            }
+        },
+        addContent() {
+            if (this.currentId) {
+                this.$emit('addContent', this.currentId);
+            } else if (this.selectedIds && this.selectedIds.length > 0) {
+                if (this.selectedIds.length == 1) {
+                    this.$emit('addContent', this.selectedIds[0]);
+                } else {
+                    this.$message.warning(this.$t('commonTable.selectOne'));
+                    return;
+                }
+            } else {
+                this.$message.warning('Please select content');
+                return;
+            }
+        },
+        cacheSelection() {
+            const selection = window.getSelection();
+            if (!selection.rangeCount) {
+                this.clearCache();
+                return;
+            }
+
+            const range = selection.getRangeAt(0);
+            let selectedNode = range.commonAncestorContainer;
+
+            // **向上查找包含 main-id 的最近 div**
+            let outerDiv = selectedNode;
+            while (outerDiv && outerDiv.tagName !== 'DIV') {
+                outerDiv = outerDiv.parentNode;
+            }
+
+            if (!outerDiv) {
+                this.clearCache();
+                return;
+            }
+
+            // **缓存 main-id 和 type**
+            this.cachedMainId = outerDiv.getAttribute('main-id');
+            this.cachedType = outerDiv.getAttribute('type');
+
+            // **创建临时 div 存放选中的 HTML**
+            const tempDiv = document.createElement('div');
+            tempDiv.appendChild(range.cloneContents());
+
+            // **检查是否包含 <img> 标签**
+            if (tempDiv.querySelector('img')) {
+                this.clearCache();
+                this.$message.error(this.$t('commonTable.selectComment'));
+                return;
+            }
+
+            // **获取纯文本**
+            let selectedText = tempDiv.innerText.trim().replace(/\s+/g, ' ');
+
+            // **允许保留的 HTML 标签**
+            const allowedTags = ['sup', 'sub', 'strong', 'em', 'b', 'i', 'blue', 'tr', 'td'];
+
+            function preserveTags(node) {
+                if (node.nodeType === 3) return node.nodeValue; // 文本节点
+                if (node.nodeType === 1 && allowedTags.includes(node.nodeName.toLowerCase())) {
+                    return node.outerHTML; // 仅保留允许的标签
+                }
+                return '';
+            }
+
+            let preservedContent = Array.from(tempDiv.childNodes).map(preserveTags).join('');
+
+            // **检查是否已有批注**
+            if (tempDiv.querySelector('.positionRemarkIndex')) {
+                this.clearCache();
+                this.$message.error(this.$t('commonTable.alreadyCommented'));
+                return;
+            }
+
+            // **缓存选区内容**
+            this.cachedHtml = preservedContent;
+            this.cachedText = selectedText;
+        },
+
+        // **点击“添加批注”按钮**
+        handleSelection() {
+            if (!this.cachedText) {
+                this.$message.error(this.$t('commonTable.selectComment'));
+                return;
+            }
+
+            // **发送批注**
+            this.$emit('onAddComment', {
+                mainId: this.cachedMainId,
+                label: this.cachedHtml
+            });
+
+            // **清空缓存**
+            this.clearCache();
+        },
+        // 接收组件传回的关联数据
+    onLinkConfirm(selectedItem) {
+      console.log('关联的对象：', selectedItem); 
+      // 在这里处理后续逻辑，比如保存绑定关系
+    },
+        handleOpenLink() {
+            if (!this.cachedText) {
+                this.$message.error(this.$t('commonTable.selectComment'));
+                return;
+            }
+// 2. 调用组件的 show 方法，传入选中文本
+this.$refs.mediaLinkRef.show(
+    {
+               mainId: this.cachedMainId,
+              label: this.cachedHtml
+             }
+);
+            // **发送批注**
+            // this.$emit('onOpenLink', {
+            //     mainId: this.cachedMainId,
+            //     label: this.cachedHtml
+            // });
+
+            // **清空缓存**
+            this.clearCache();
+        },
+
+        // **清空缓存**
+        clearCache() {
+            this.cachedHtml = '';
+            this.cachedText = '';
+            this.cachedMainId = null;
+            this.cachedType = null;
+        },
+        updateUniqueIds(e, am_id) {
+            this.currentId = null;
+            this.currentData = {};
+
+            if (e) {
+                // 数组：不存在则添加
+                if (!this.selectedIds.includes(am_id)) {
+                    this.selectedIds.push(am_id);
+                }
+            } else if (!e) {
+                // 数组：存在则删除
+                const index = this.selectedIds.indexOf(am_id);
+                if (index > -1) {
+                    this.selectedIds.splice(index, 1);
+                }
+            }
+
+            this.$forceUpdate();
+        },
+        handleUncheck() {
+            this.currentId = null;
+            this.currentData = {};
+            this.selectedIds = [];
+            this.$forceUpdate();
+        },
+        onEdit() {
+            this.$emit('onEdit', this.currentId);
+        },
+        onAddRow() {
+            if (this.currentId) {
+                this.$emit('onAddRow', this.currentId);
+            } else if (this.selectedIds && this.selectedIds.length > 0) {
+                if (this.selectedIds.length == 1) {
+                    this.$emit('onAddRow', this.selectedIds[0]);
+                } else {
+                    this.$message.warning(this.$t('commonTable.selectOne'));
+                    return;
+                }
+            } else {
+                this.$message.warning('Please select content');
+                return;
+            }
+        },
+        onDelete() {
+            // console.log('this.uniqueIds.length at line 866:', this.selectedIds.length);
+            if (this.selectedIds && this.selectedIds.length > 0) {
+                this.$emit('onDeletes', this.selectedIds.toString());
+                this.$forceUpdate();
+            } else if (this.currentId) {
+                this.$emit('onDelete', this.currentId);
+            } else {
+                this.$message.warning('Please select content');
+                return;
+            }
+        },
+
+        changeTitle(value) {
+            if (this.currentData.type == 0) {
+                this.$emit('onEditTitle', {
+                    mainId: this.currentId,
+                    value: value
+                });
+            }
+        },
+        clearHighlight1() {
+            const highlighted = document.querySelectorAll('.highlighted1');
+            highlighted.forEach((el) => {
+                el.style.backgroundColor = '';
+                el.classList.remove('highlighted1');
+            });
+        },
+        isElementInViewport(el) {
+            if (!el) return false;
+            const rect = el.getBoundingClientRect();
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            // 判断元素是否有部分区域在视口内
+            return rect.top < viewportHeight && rect.bottom > 0 && rect.left < viewportWidth && rect.right > 0;
+        },
         // 右侧批注列点击时，触发高亮左侧对应的批注
         // 右侧批注列点击时，触发高亮左侧对应的批注
+        highlightLefProofreading(id, data, index) {
+            console.log('commentId at line 1384:', id);
+            // if (this.currentHighlightId === id) {
+            //     this.clearHighlight1();
+            //     this.currentHighlightId = null;
+            //     return;
+            // }
+
+            this.clearHighlight1();
+            const remarkElements = document.querySelectorAll(`[proofreading-id="${id}"]`);
+            if (!remarkElements.length) return;
+
+            remarkElements.forEach((el) => {
+                el.style.backgroundColor = 'rgb(247, 123, 123)';
+                el.classList.add('highlighted1');
+            });
+
+            // 检测第一个元素是否在可视区域，不在则滚动
+            const firstElement = remarkElements[0];
+            if (!this.isElementInViewport(firstElement)) {
+                firstElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                });
+            }
+
+            this.currentHighlightId = id;
+        },
         highlightLeftComment(commentId) {
+            if(!commentId){
+                return;
+            }
+         
             // 清除之前的高亮
             this.clearHighlight();
 
@@ -651,7 +2069,7 @@ export default {
                 remarkElements.forEach((remarkElement) => {
                     // 随机生成颜色或使用自定义颜色
                     // const randomColor = this.getRandomLightColor();
-                    remarkElement.style.backgroundColor = '#f77b7b'; // 设置背景色
+                    remarkElement.style.backgroundColor = 'var(--primary-comment-deep)'; // 设置背景色
                     remarkElement.classList.add('highlighted'); // 添加高亮样式类
                 });
             }
@@ -661,13 +2079,129 @@ export default {
         clearHighlight() {
             const allRemarks = document.querySelectorAll('.remarkbg');
             allRemarks.forEach((element) => {
-                element.style.backgroundColor = '#f3d5d5c2'; // 重置背景色
+                element.style.backgroundColor = 'var(--primary-comment-bg)'; // 重置背景色
                 element.classList.remove('highlighted'); // 移除高亮类
             });
         },
         solveComment(data) {
             this.$emit('solveComment', data);
         },
+        editProofreading(data) {
+            // this.$emit('editProofreading', data);
+            this.editProofreadingContent(data);
+            // this.$emit('editProofreadingContent', data);
+        },
+        revokeProofreading(data) {
+            // this.$emit('revokeProofreading', data);
+            var content = this.wordList.find((e) => e.am_id == data.am_id).content;
+            console.log('content at line 1890:', content);
+            this.$api
+                .post('api/Proofread/change', {
+                    am_id: data.am_id,
+                    record_id: data.id,
+                    content: content,
+                    state: 2,
+                    article_id: this.$route.query.id
+                })
+                .then(async (res) => {
+                    if (res.status == 1) {
+                        this.getProofreadingList([data.am_id]);
+
+                        this.refreshCurrentData(data.am_id, res.data, 'revoke');
+
+                        this.$message.success('Success');
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err.msg);
+                });
+        },
+        executeProofreading(data) {
+            console.log('data at line 1416:', data);
+            // this.$emit('executeProofreading', data);
+            var content = this.wordList.find((e) => e.am_id == data.am_id).content;
+            console.log('content at line 1890:', content);
+            this.$api
+                .post('api/Proofread/change', {
+                    am_id: data.am_id,
+                    record_id: data.id,
+                    content: content,
+                    state: 1,
+                    article_id: this.$route.query.id
+                })
+                .then(async (res) => {
+                    if (res.status == 1) {
+                        this.getProofreadingList([data.am_id]);
+                        this.refreshCurrentData(data.am_id, res.data, 'execute');
+                        this.$message.success('Success');
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err.msg);
+                });
+        },
+        refreshCurrentData(am_id, newData, type) {
+            console.log('newData at line 2106:', newData);
+            var refreshData = { ...this.wordList.find((e) => e.am_id == am_id) };
+            var refreshDataIndex = this.wordList.findIndex((e) => e.am_id == am_id);
+            if (refreshData.type == 0) {
+                this.$nextTick(() => {
+                    if (newData.am_id_count || newData.am_id_count == 0) {
+                        this.wordList[refreshDataIndex].proof_read_num = newData.am_id_count;
+                    }
+                    if (newData.sum_count || newData.sum_count == 0) {
+                        this.totalNumbers = newData.sum_count;
+                    }
+                    if (type != 'delete') {
+                        this.wordList[refreshDataIndex].content = newData.content;
+                        this.wordList[refreshDataIndex].text = newData.content;
+                    }
+                });
+
+                this.$forceUpdate();
+            }
+            //图片的注解 表格标题和注解 还有表格要单独处理
+
+            console.log('refreshData at line 1293:', refreshData);
+        },
+        deleteProofreading(data, index) {
+            console.log('data at line 1599:', data);
+            // this.$emit('deleteProofreading', data);
+            if (this.isEditComment) {
+                this.$confirm(this.$t('commonTable.removeProofread'), 'Prompt', {
+                    confirmButtonText: 'Submit',
+                    cancelButtonText: 'Cancel',
+                    type: 'warning'
+                })
+                    .then(() => {
+                        this.$api
+                            .post('api/Proofread/change', {
+                                am_id: data.am_id,
+                                record_id: data.id,
+                                state: 3,
+                                article_id: this.$route.query.id
+                            })
+                            .then(async (res) => {
+                                if (res.status == 1) {
+                                    this.getProofreadingList([data.am_id]);
+                                    this.refreshCurrentData(data.am_id, res.data, 'delete');
+                                    this.$message.success('Success');
+                                } else {
+                                    this.$message.error(res.msg);
+                                }
+                            })
+                            .catch((err) => {
+                                this.$message.error(err.msg);
+                            });
+                        // this.comments.splice(index, 1); // 删除评论
+                    })
+                    .catch(() => {});
+            }
+        },
         cancelSolveComment(data) {
             this.$emit('cancelSolveComment', data);
         },
@@ -689,16 +2223,7 @@ export default {
             if (outerDiv) {
             }
         },
-         // 判断是否是表头行
-    isHeaderRow(rowIndex,table) {
-   
-    var table=JSON.parse(table)
-  
-    var head=table[0]
-  
-    
-      return rowIndex < head[0].rowspan; // 假设前两行是表头
-    },
+
         handleDragLeave(e) {
             e.preventDefault();
             e.stopPropagation();
@@ -790,6 +2315,28 @@ export default {
                 }
             });
         },
+        onProofSpanClick(e) {
+            // 找最近的 .hoverProofreading（你生成高亮时加的那个 class）
+            const el = e.target.closest('.hoverProofreading');
+          
+            if (!el) return;
+
+            // 取出你写入的属性
+            const proofreadingId = el.getAttribute('proofreading-id');
+           
+            const amId = el.getAttribute('am-id');
+            const annotationId = el.getAttribute('data-annotation-id');
+
+            // 联动你已有的高亮/滚动逻辑
+            // this.highlightLefProofreading(proofreadingId);
+            this.flashRightPanel(proofreadingId, { scroll: true }); // 右侧闪一下
+            // 如果还需要滚动到右侧对应项，这里继续调用你的滚动函数
+            // this.scrollRightPanelTo(proofreadingId);
+        },
+        getUnresolved(arr) {
+            var length = arr.filter((e) => e.state == 2).length;
+            return length;
+        },
         initTinymceImg(editorId) {
             var _this = this;
             tinymce.init({
@@ -889,7 +2436,7 @@ export default {
                 image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
                 plugins: 'forecolor code paste table image resize ',
                 content_style: `${tableStyle + this.wordStyle}
-                
+
                                 `,
                 entity_encoding: 'raw', // 不编码 > 等字符
                 menubar: false,
@@ -959,29 +2506,86 @@ export default {
                 }
             });
         },
-        initializeEditor(index, type, data) {
+
+        initializeEditor: throttle(function (event, id, type, data, index) {
+            
+            this.clearHighlight();
+            this.selectedIds = [];
+            // this.menuPosition.x = event.clientX+20;
+            // this.menuPosition.y = event.clientY+20;
+            const menuWidth = 180; // 你的菜单宽度（按实际调整）
+            const menuHeight = 275; // 你的菜单高度（按实际调整）
+            let x = event.clientX + 20;
+            let y = event.clientY + 20;
+
+            // 判断右侧是否越界
+            if (x + menuWidth > window.innerWidth) {
+                x = window.innerWidth - menuWidth - 10; // 留点空隙
+            }
+
+            // 判断底部是否越界
+            if (y + menuHeight > window.innerHeight) {
+                y = event.clientY - menuHeight - 10; // 改为往上弹
+            }
+
+            this.menuPosition.x = x;
+            this.menuPosition.y = y;
+
+            this.menuType = type; // 设置菜单类型，根据点击区域不同显示不同菜单
+            // this.currentId=currentId;
+
+            this.wordList.forEach((item, index) => {
+                item.checked = false;
+            });
             if (!this.isPreview) {
-                const editorId = `editor${index}`;
-                // 检查当前编辑器是否已经初始化
-                if (this.editors[editorId]) return;
-                // 销毁所有已初始化的编辑器实例
-                for (const key in this.editors) {
-                    if (this.editors[key]) {
-                        // 确保销毁所有编辑器实例
-                        tinymce.remove(this.editors[key]);
-                        this.editors[key] = null; // 清除引用
+                if (this.isEditComment && this.activeName == 'proofreading') {
+                    if (type == 'text') {
+                        this.getProofreadingList([id]);
+                        this.getPList(id);
+                        if (this.markers.length > 0) {
+                            this.currentItem = this.markers.findIndex((item) => item.am_id == id) + 1;
+                        }
                     }
                 }
+                this.currentId = id;
+                this.currentIndex = index;
+                this.currentData = data;
+                this.isMenuVisible = true;
 
-                if (type == 'img') {
-                    this.initTinymceImg(editorId);
-                } else if (type == 'table') {
-                    this.initTinymceTable(editorId);
-                } else {
-                    this.initTinymceContent(editorId);
-                }
-                this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
+                // const editorId = `editor${index}`;
+                // // 检查当前编辑器是否已经初始化
+                // if (this.editors[editorId]) return;
+                // // 销毁所有已初始化的编辑器实例
+                // for (const key in this.editors) {
+                //     if (this.editors[key]) {
+                //         // 确保销毁所有编辑器实例
+                //         tinymce.remove(this.editors[key]);
+                //         this.editors[key] = null; // 清除引用
+                //     }
+                // }
+
+                // if (type == 'img') {
+                //     this.initTinymceImg(editorId);
+                // } else if (type == 'table') {
+                //     this.initTinymceTable(editorId);
+                // } else {
+                //     this.initTinymceContent(editorId);
+                // }
+                // this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
             }
+        }, 200),
+        dblclickEdit(id, type, data, index) {
+            if (!this.isPreview) {
+                this.currentId = id;
+                this.currentIndex = index;
+                this.currentData = data;
+                this.onEdit();
+            }
+            this.clearHighlight();
+            this.selectedIds = [];
+            this.wordList.forEach((item, index) => {
+                item.checked = false;
+            });
         },
         deleteComment(data) {
             this.$emit('deleteComment', data);
@@ -1019,17 +2623,46 @@ export default {
 
             return formattedDate;
         },
-        goToListComment(data) {
+        async goToListComment(data, fn) {
             console.log('data at line 993:', data);
-            this.goToComment(data.am_id);
+            await this.goToComment(data.am_id, fn);
         },
         divOnScroll() {
             if (!this.isPreview) {
+                const sc = this.$refs.scrollDiv; // ★ 用 scrollDiv
+
+                var rail = null;
+
+                if (this.isEditComment) {
+                    rail = this.$refs.rail;
+                }
+
+                if (this.isEditComment) {
+                    if (!sc || !rail) return;
+                } else {
+                    rail = null;
+                    if (!sc) return;
+                }
+
+                const contentH = sc.scrollHeight,
+                    viewH = sc.clientHeight;
+                const scrollRange = Math.max(1, contentH - viewH);
+                if (rail && this.isEditComment) {
+                    const railH = rail.clientHeight;
+                    this.viewportHeight = Math.max(6, railH * (viewH / contentH));
+                    const vpRange = Math.max(1, railH - this.viewportHeight);
+                    this.viewportTop = Math.round(this.mapRange(sc.scrollTop, 0, scrollRange, 0, vpRange));
+                }
+
+                this.isMenuVisible = false;
+                this.currentId = null;
+                this.currentData = {};
                 // const scrollTop = scrollDiv.scrollTop; // 获取垂直滚动距离
                 this.scrollPosition = this.$refs.scrollDiv.scrollTop;
                 localStorage.setItem('scrollPosition', this.scrollPosition);
                 // console.log('this.scrollPosition at line 980:', this.scrollPosition);
                 // 检查每个编辑器是否在可视区域内
+
                 for (const key in this.editors) {
                     const editorElement = document.getElementById(key);
                     const editor = this.editors[key];
@@ -1060,7 +2693,7 @@ export default {
             const b = Math.floor(Math.random() * 128) + 127; // 使蓝色值偏浅
             const a = (Math.random() * 0.4 + 0.4).toFixed(2); // 设置透明度范围为 0.4 到 0.7 之间
 
-            return `#f3d5d5c2`; // 返回 RGBA 颜色
+            return `var(--primary-comment-bg)`; // 返回 RGBA 颜色
         },
 
         highlightImg(imgId, annotations) {
@@ -1071,90 +2704,371 @@ export default {
             }
         },
         highlightImgCommentId(imgId, annotations) {
-           
-                 const emptyContentIndexes = annotations
+            const emptyContentIndexes = annotations
                 .map((annotation, index) => (annotation.content === '' ? annotation.amc_id : -1)) // 找到内容为空的批注项的索引，其他项返回 -1
                 .filter((index) => index !== -1) // 过滤掉值为 -1 的项
                 .join(','); // 以逗号连接索引
-                return emptyContentIndexes;
-           
-           
-
-            
+            return emptyContentIndexes;
         },
         escapeRegExp(string) {
             return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
         },
-        highlightText(text, annotations, type) {
+
+        highlightText(item, annotations, type) {
+            var text = item.text;
             if (!this.isPreview) {
-                let tempText = text;
+                if (this.isShowPiZhu) {
+                    text = this.highlightText1(item.text, annotations, type, item.am_id);
+                } else if (!this.isShowPiZhu && this.proofreadingList.length > 0 && this.currentSelectProofreadingId == item.am_id) {
+                    text = this.highlightText2(item.text, this.proofreadingList[0].data, type, item.am_id);
+                } else {
+                    text = this.highlightText3(item.text, [], type, item.am_id);
+                }
+            }
+            return text;
+        },
+        // 改造版：DOM 安全高亮
+        // 仅保留 <wmath>…</wmath> 内部，其他用正则匹配高亮
+        // highlightText2(text, annotations, type, am_id,record_style) {
+        // console.log('record_style at line 2497:', record_style)
+        //    if(record_style){
+        //     return record_style
+        //    }else{
+        //     return text
+        //    }
 
-                // 1. 使用占位符替代批注内容
-                const placeholders = [];
-                annotations.forEach((annotation, index) => {
-                    if (annotation.content == '') {
-                        return tempText;
-                    }
-                    const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
-                    const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
-                    const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
+        // },
+        highlightText2(text, annotations, type, am_id) {
+            const src = String(text || '');
 
-                    // 如果批注内容存在，替换成占位符
-                    if (tempText.includes(annotation.content)) {
-                        tempText = tempText.replace(regExp, placeholder);
-                        placeholders.push({ placeholder, annotation, index });
+            // 1) 用一个全局、区分大小写不敏感的 wmath 提取正则
+            const wmathRe = /<wmath\b[^>]*>[\s\S]*?<\/wmath\s*>/gi;
+
+            // 2) 把原文切成： [非wmath片段, wmath片段, 非wmath片段, wmath片段, ...]
+            const parts = [];
+            let lastIdx = 0;
+            let m;
+            while ((m = wmathRe.exec(src)) !== null) {
+                const start = m.index;
+                const end = start + m[0].length;
+                if (start > lastIdx) {
+                    parts.push({ type: 'plain', html: src.slice(lastIdx, start) });
+                }
+                parts.push({ type: 'wmath', html: m[0] }); // 原样保留
+                lastIdx = end;
+            }
+            if (lastIdx < src.length) {
+                parts.push({ type: 'plain', html: src.slice(lastIdx) });
+            }
+
+            // 3) 批注准备：只用 verbatim_texts；空的直接跳过
+            const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const anns = (annotations || [])
+                .map((a, i) => ({
+                    raw: a,
+                    idx: i,
+                    text: (a && a.verbatim_texts && a.state == 2 ? String(a.verbatim_texts) : '').trim()
+                }))
+                .filter((a) => a.text);
+
+            // 4) 仅在 plain 片段上做替换，每个批注只匹配一次
+            //    先替成占位符（不会与用户文本冲突的控制字符包裹），再统一回填 span
+            const placeholders = []; // { ph, rawHit, ann }
+            const PH_L = '\u0002'; // STX
+            const PH_R = '\u0003'; // ETX
+
+            const replaceOnePlain = (html) => {
+                let out = html;
+                // 记录每个批注是否已经匹配过
+                const matchedAnnotations = new Set();
+
+                anns.forEach((ann) => {
+                    // 如果该批注已经匹配过，跳过
+                    if (matchedAnnotations.has(ann.idx)) return;
+
+                    const re = new RegExp(escapeRegExp(ann.text), 'gi');
+                    // 查找第一个匹配
+                    const matchResult = re.exec(out);
+
+                    if (matchResult) {
+                        // 标记为已匹配
+                        matchedAnnotations.add(ann.idx);
+
+                        const match = matchResult[0];
+                        const ph = `${PH_L}PH_${ann.idx}_0_${Math.random().toString(36).slice(2)}${PH_R}`;
+                        placeholders.push({ ph, rawHit: match, ann });
+
+                        // 替换第一个匹配项
+                        const before = out.substring(0, matchResult.index);
+                        const after = out.substring(matchResult.index + match.length);
+                        out = before + ph + after;
                     }
                 });
 
-                // 2. 为占位符添加高亮
-                placeholders.forEach(({ placeholder, annotation, index }) => {
-                    const regExp = new RegExp(placeholder, 'gi');
+                return out;
+            };
 
-                    tempText = tempText.replace(regExp, (match) => {
-                        const randomColor = this.getRandomLightColor();
-                        return `
-                    <span 
-                        class="remarkbg"
-                        style="background-color: ${randomColor}; 
-                               position: relative; 
-                               display: inline-block; 
-                               white-space: nowrap; 
-                               overflow-wrap: anywhere; 
-                               border-left: 2px solid #cd5454; 
-                               border-right: 2px solid #cd5454;"
-                        comment-Id="${annotation.amc_id}"
-                    >
-                        ${annotation.content}
-                        <span class="positionRemarkIndex"
-                            style="position: absolute; top: -14px; right: -10px; font-size: 0.8em; color: red;">
-                            ${index + 1}
-                        </span>
-                    </span>
-                `;
+            parts.forEach((p) => {
+                if (p.type === 'plain' && p.html) {
+                    p.html = replaceOnePlain(p.html);
+                }
+            });
+
+            // 5) 回填占位符为高亮 span（wmath 片段不参与）
+            let html = parts.map((p) => p.html).join('');
+
+            placeholders.forEach(({ ph, rawHit, ann }) => {
+                // 精确替占位符（用 split/join 避免正则二次干扰）
+                const span = `<span  class="hoverProofreading"
+  style="
+    position: relative;
+    display: inline-block;
+    overflow-wrap: anywhere;
+    border-bottom: 2px solid #ff99ab;
+    cursor: pointer;
+  "
+  proofreading-Id="${ann.raw && ann.raw.id != null ? ann.raw.id : ''}"
+  am-Id="${am_id != null ? am_id : ''}"
+  data-annotation-id="${ann.raw && ann.raw.id ? ann.raw.id : ''}"
+>${rawHit}</span>`;
+                html = html.split(ph).join(span);
+            });
+
+            // 6) 空文本占位图（沿用你的逻辑，且不会影响 wmath）
+            if (type === 0 && html.trim() === '') {
+                html += `<img contenteditable="false" src="${
+                    this.imagePath || ''
+                }" alt="空内容标记" style="width:20px;height:20px;opacity:0.6;">`;
+            }
+
+            return html;
+        },
+        highlightText1(text, annotations, type) {
+            const src = String(text || '');
+            const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+            // 1) 切分出 wmath 与非 wmath 片段
+            const wmathRe = /<wmath\b[^>]*>[\s\S]*?<\/wmath\s*>/gi;
+            const parts = [];
+            let lastIdx = 0,
+                m;
+            while ((m = wmathRe.exec(src)) !== null) {
+                const start = m.index,
+                    end = start + m[0].length;
+                if (start > lastIdx) parts.push({ type: 'plain', html: src.slice(lastIdx, start) });
+                parts.push({ type: 'wmath', html: m[0] }); // 原样保留
+                lastIdx = end;
+            }
+            if (lastIdx < src.length) parts.push({ type: 'plain', html: src.slice(lastIdx) });
+
+            // 2) 预处理批注（用 annotation.content）
+            const anns = (annotations || [])
+                .map((a, i) => ({
+                    raw: a,
+                    idx: i,
+                    text: (a && a.content ? String(a.content) : '').trim()
+                }))
+                .filter((a) => a.text);
+
+            // 3) 仅在 plain 片段里做：正则→占位
+            const placeholders = []; // { ph, rawHit, ann }
+            const PH_L = '\u0002',
+                PH_R = '\u0003'; // 控制字符，避免冲突
+
+            const replaceInPlain = (html) => {
+                let out = html;
+                anns.forEach((ann) => {
+                    const re = new RegExp(escapeRegExp(ann.text), 'gi');
+                    let hit = 0;
+                    out = out.replace(re, (match) => {
+                        const ph = `${PH_L}PH_${ann.idx}_${hit++}_${Math.random().toString(36).slice(2)}${PH_R}`;
+                        placeholders.push({ ph, rawHit: match, ann });
+                        return ph;
                     });
                 });
-                if (type == 0 && tempText == '') {
-             
-                    tempText =
-                        tempText +
-                        `<img contenteditable="${false}" src="${this.imagePath}" alt="" style="width: 20px;height: 20px;opacity:0.6;">`;
-                }
-                // 3. 返回处理后的文本
-                return tempText;
-            } else {
-                return text;
-            }
-        },
+                return out;
+            };
 
+            parts.forEach((p) => {
+                if (p.type === 'plain' && p.html) p.html = replaceInPlain(p.html);
+            });
+
+            // 4) 拼回整体 HTML
+            let html = parts.map((p) => p.html).join('');
+
+            // 5) 回填占位符为高亮 span
+            placeholders.forEach(({ ph, rawHit, ann }) => {
+                const color = this.getRandomLightColor ? this.getRandomLightColor() : 'rgba(255,240,200,.8)';
+                const badge = ann.idx + 1;
+                const span = `<span
+           class="remarkbg"
+           style="background-color:${color};
+                  position:relative;
+                  display:inline-block;
+                  overflow-wrap:anywhere;
+                  border-left:2px solid var(--primary-comment-deep);
+                  border-right:2px solid var(--primary-comment-deep);"
+           comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}"
+         >${rawHit}
+           <span class="positionRemarkIndex"
+                 style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:var(--primary-comment-deep);">
+             ${badge}
+           </span>
+         </span>`;
+                // 用 split/join 精确回填，避免再走正则
+                html = html.split(ph).join(span);
+            });
+
+            // 6) 空文本时按你原逻辑补图标（不会影响 wmath）
+            if (type === 0 && html.trim() === '') {
+                html += `<img contenteditable="false" src="${this.imagePath || ''}" alt="" style="width:20px;height:20px;opacity:.6;">`;
+            }
+
+            return html;
+        },
+        highlightText3(text, annotations, type) {
+            const src = String(text || '');
+            const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+            // 1) 切分出 wmath 与非 wmath 片段
+            const wmathRe = /<wmath\b[^>]*>[\s\S]*?<\/wmath\s*>/gi;
+            const parts = [];
+            let lastIdx = 0,
+                m;
+            while ((m = wmathRe.exec(src)) !== null) {
+                const start = m.index,
+                    end = start + m[0].length;
+                if (start > lastIdx) parts.push({ type: 'plain', html: src.slice(lastIdx, start) });
+                parts.push({ type: 'wmath', html: m[0] }); // 原样保留
+                lastIdx = end;
+            }
+            if (lastIdx < src.length) parts.push({ type: 'plain', html: src.slice(lastIdx) });
+
+            // 2) 预处理批注（用 annotation.content）
+            const anns = (annotations || [])
+                .map((a, i) => ({
+                    raw: a,
+                    idx: i,
+                    text: (a && a.content ? String(a.content) : '').trim()
+                }))
+                .filter((a) => a.text);
+
+            // 3) 仅在 plain 片段里做：正则→占位
+            const placeholders = []; // { ph, rawHit, ann }
+            const PH_L = '\u0002',
+                PH_R = '\u0003'; // 控制字符，避免冲突
+
+            const replaceInPlain = (html) => {
+                let out = html;
+                anns.forEach((ann) => {
+                    const re = new RegExp(escapeRegExp(ann.text), 'gi');
+                    let hit = 0;
+                    out = out.replace(re, (match) => {
+                        const ph = `${PH_L}PH_${ann.idx}_${hit++}_${Math.random().toString(36).slice(2)}${PH_R}`;
+                        placeholders.push({ ph, rawHit: match, ann });
+                        return ph;
+                    });
+                });
+                return out;
+            };
+
+            parts.forEach((p) => {
+                if (p.type === 'plain' && p.html) p.html = replaceInPlain(p.html);
+            });
+
+            // 4) 拼回整体 HTML
+            let html = parts.map((p) => p.html).join('');
+
+            // 5) 回填占位符为高亮 span
+            placeholders.forEach(({ ph, rawHit, ann }) => {
+                const color = this.getRandomLightColor ? this.getRandomLightColor() : 'rgba(255,240,200,.8)';
+                const badge = ann.idx + 1;
+                const span = `<span
+           class="remarkbg"
+           style="background-color:${color};
+                  position:relative;
+                  display:inline-block;
+                  overflow-wrap:anywhere;
+                  border-left:2px solid var(--primary-comment-deep);
+                  border-right:2px solid var(--primary-comment-deep);"
+           comment-Id="${ann.raw && ann.raw.amc_id != null ? ann.raw.amc_id : ''}"
+         >${rawHit}
+           <span class="positionRemarkIndex"
+                 style="position:absolute;top:-14px;right:-10px;font-size:.8em;color:var(--primary-comment-deep);">
+             ${badge}
+           </span>
+         </span>`;
+                // 用 split/join 精确回填，避免再走正则
+                html = html.split(ph).join(span);
+            });
+
+            // 6) 空文本时按你原逻辑补图标（不会影响 wmath）
+            if (type === 0 && html.trim() === '') {
+                html += `<img contenteditable="false" src="${this.imagePath || ''}" alt="" style="width:20px;height:20px;opacity:.6;">`;
+            }
+
+            return html;
+        },
+        getProofreadingList(arr) {
+            // this.proofreadingLoading = true;
+            this.isShowPiZhu = false;
+            this.activeName = 'proofreading';
+            const requests = arr.map((e) => {
+                return this.$api
+                    .post('api/Proofread/get', {
+                        am_id: e,
+                        article_id: this.$route.query.id
+                    })
+                    .then(async (res) => {
+                        if (res.status == 1 && res.data) {
+                            return {
+                                am_id: e,
+                                data: res.data.record[e]
+                            };
+                        } else {
+                            return {
+                                am_id: e,
+                                data: []
+                            };
+                        }
+                    })
+                    .catch((err) => {
+                        return {
+                            am_id: e,
+                            data: []
+                        };
+                    });
+            });
+
+            // 并发请求
+            Promise.all(requests)
+                .then((resArr) => {
+                    this.proofreadingLoading = false;
+                 
+                    this.proofreadingList = resArr.filter((e) => e.data.length > 0);
+                    if (this.proofreadingList.length > 0) {
+                        this.currentSelectProofreadingId = this.proofreadingList[0].am_id;
+                        this.$forceUpdate();
+                    } else {
+                        this.currentSelectProofreadingId = '';
+                    }
+                })
+                .catch((err) => {
+                    console.error('获取数据失败:', err);
+                });
+        },
         getCommentsData() {
             if (!this.isPreview) {
                 this.clearHighlight();
                 const divs = document.querySelectorAll('.pMain');
                 const visibleDivs = [];
+
                 divs.forEach((div) => {
                     const rect = div.getBoundingClientRect();
                     // 检查 div 是否部分可见（只要它的任何一部分在视口内）
                     if (rect.top < window.innerHeight && rect.bottom > 0) {
+                        // console.log('visibleDivsAll.push at line 1889:', visibleDivsAll);
+                        // console.log('visibleDivsAll.push at line 1889:', visibleDivsAll);
                         // 判断 div 是否有 remark 属性
                         if (div.hasAttribute('remark')) {
                             // 获取 remark 属性的值（如果需要）
@@ -1169,6 +3083,7 @@ export default {
                 });
                 this.commentList = [];
                 this.visibleDivs = [...visibleDivs];
+
                 this.visibleDivs.forEach((e) => {
                     this.commentList.push({
                         am_id: e,
@@ -1177,19 +3092,37 @@ export default {
                 });
             }
         },
+
         isShowEditComment() {
             if (localStorage.getItem('U_role')) {
                 var identity = localStorage.getItem('U_role');
-
+                const screenWidth = window.innerWidth;
+                const dynamicWidth = screenWidth > 1600 ? 500 : 400;
                 if (identity.includes('editor')) {
                     this.isEditComment = true;
+                    this.isShowPiZhu = false;
+                    this.activeName = 'proofreading';
+                    this.rightW = dynamicWidth;
                 } else {
                     this.isEditComment = false;
+                    this.isShowPiZhu = true;
+                    this.activeName = 'Comment';
+                    this.rightW = dynamicWidth;
                 }
                 if (identity.includes('author')) {
                     this.isUserEditComment = true;
+                    this.isShowPiZhu = true;
+                    this.activeName = 'Comment';
+                    this.rightW = dynamicWidth;
                 } else {
                     this.isUserEditComment = false;
+                    this.isShowPiZhu = false;
+                    this.activeName = 'proofreading';
+                    this.rightW = dynamicWidth;
+                }
+                if (this.isEditComment) {
+                    this.$nextTick(() => requestAnimationFrame(this.initMarkersList));
+                    // window.addEventListener('resize', this.calcMarkers);
                 }
             }
         },
@@ -1227,403 +3160,32 @@ export default {
 
             this.$forceUpdate();
         },
-        goToComment(mainId) {
-            const section = document.querySelector(`[main-id="${mainId}"]`);
-            if (section) {
-                section.scrollIntoView({ top: 100, behavior: 'smooth' });
-            }
+        goToComment(mainId, fn) {
+            this.$nextTick(() => {
+                const container = document.querySelector('.word-container');
+                const section = container.querySelector(`[main-id="${mainId}"]`);
+                if (!section || !container) return;
+
+                // 计算目标位置（同之前的逻辑）
+                const cRect = container.getBoundingClientRect();
+                const sRect = section.getBoundingClientRect();
+                const OFFSET = 120;
+                const targetTop = sRect.top - cRect.top + container.scrollTop - OFFSET;
+                const safeTargetTop = Math.max(0, targetTop);
+
+                // 关键：使用 auto 行为（无平滑动画，瞬间到位）
+                container.scrollTo({
+                    top: safeTargetTop,
+                    behavior: 'auto' // 替换为 auto 而非 smooth
+                });
+
+                // 因为是瞬间滚动，可直接在 scrollTo 后调用回调
+                if (fn) {
+                    fn();
+                }
+            });
         },
         initTinymce() {},
-        //     initTinymce() {
-        //         var deleteButtons = document.querySelectorAll('.wordButtonContainer');
-        //         if (deleteButtons) {
-        //             deleteButtons.forEach(function (button) {
-        //                 button.remove(); // 移除每个 wordButtonContainer 按钮
-        //             });
-        //         }
-
-        //         let isDeleting = false;
-        //         let currentParagraph = null; // 用来存储当前选中的 <p> 元素
-        //         let wordButtonContainer = null; // 用来存储删除按钮
-        //         const _this = this;
-        //         window.tinymce.init({
-        //             height: '100%',
-        //             resize: true,
-        //             readonly: true, // 设置为只读模式
-        //             selector: `#${this.tinymceId}`,
-        //             content_css: false,
-        //             table_resize_bars: true,
-        //             valid_elements: '*[*]',
-        //             paste_preprocess: function (plugin, args) {
-        //                 let content = args.content;
-        //                 const container = document.createElement('div');
-        //                 container.innerHTML = content;
-        //                 _this.updateTableStyles(container);
-        //                 args.content = container.innerHTML;
-        //             },
-        //             content_style: `${tableStyle + this.wordStyle}.tox .tox-edit-area::before{
-        //                 border:none;
-        //             }
-        //             .isRemark {
-        //                 display:flex;
-
-        // align-items:center;
-        //                 position:absolute;
-        //                 top:-12px;
-        //                 left:-12px;
-        //                 z-index:2;
-        //                 cursor: pointer;
-
-        //             }
-        //             .isRemark img{
-        //                 width:15px;
-        //                 height:15px;
-        //                 margin-right:4px;
-
-        //             }
-        //             .isRemark span{
-        //                 background-color: #fef0f0;
-        // border-color: #fde2e2;
-        // padding: 0 5px;
-        // line-height: 19px;
-        // color: #f56c6c;
-        // font-size: 12px;display:inline-block;
-
-        //             }
-        //             .isRemark .Resolved{
-        //                 background-color: #f0f9eb;
-        //                 margin-left:10px;
-        // border-color: #67c23a;
-        // color:#67c23a;
-        // font-weight:bold;
-        // border-radius:2px;
-
-        //             }
-
-        //             img{
-        //                 max-width:580px;
-        //             }blue {
-        //                     color: rgb(0, 130, 170) !important;
-        //                 }
-        //             `,
-        //             formats: {
-        //                 bold: { inline: 'b' },
-        //                 italic: { inline: 'i' }
-        //             },
-        //             body_class: 'panel-body ',
-        //             object_resizing: false,
-        //             toolbar: [],
-        //             menubar: false,
-        //             statusbar: false,
-        //             custom_colors: false,
-        //             color_map: ['000000', 'Black', '0082AA', 'TMR Blue'],
-        //             plugins: 'forecolor code paste table image resize',
-        //             end_container_on_empty_block: true,
-        //             content_css: 'default ',
-
-        //             setup(ed) {
-        //                 ed.ui.registry.addButton('customBlue', {
-        //                     text: 'Blue', // 按钮文本
-        //                     onAction: function () {
-        //                         // 在选中的文本周围包裹 <blue> 标签
-        //                         var selectedText = ed.selection.getContent();
-        //                         var wrappedText = `<blue>${selectedText}</blue>`;
-        //                         ed.selection.setContent(wrappedText);
-        //                     }
-        //                 });
-        //                 ed.ui.registry.addButton('removeBlue', {
-        //   text: 'Remove Blue', // 按钮文本
-        //   onAction: function () {
-        //     var content = ed.selection.getContent(); // 获取选中的文本内容
-
-        //     // 如果选中内容中有 <blue> 标签，去掉它们
-        //     var cleanedContent = content.replace(/<\/?blue>/g, ''); // 删除所有 <blue> 和 </blue> 标签
-
-        //     // 更新编辑器中的内容
-        //     ed.selection.setContent(cleanedContent);
-        //   }
-        // });
-        //                 if (!_this.readonly) {
-        //                     ed.on('click', function (e) {
-        //                         // 判断点击的是否是目标元素
-        //                         const target = e.target;
-        //                         console.log('target at line 351:', target);
-
-        //                         if (target.classList.contains('isRemarkIcon')||target.classList.contains('Resolved')) {
-        //                             _this.$emit('onComment', target.getAttribute('main-id'));
-        //                         }
-        //                     });
-        //                     // // 添加批注按钮
-        //                     ed.ui.registry.addButton('addImageButton', {
-        //                         text: 'Add Figure',
-        //                         icon: 'comment',
-        //                         onAction: function () {
-        //                             _this.$emit('add', img);
-        //                             // const selection = ed.selection;
-        //                             // const selectedNode = selection.getNode(); // 获取选中的节点
-        //                             // console.log('selectedNode at line 333:', selectedNode);
-        //                             // if (selectedNode) {
-        //                             //     const comment = prompt('Enter your comment:');
-        //                             //     if (comment) {
-        //                             //         const dataId = selectedNode.getAttribute('main-id');
-        //                             //         _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
-        //                             //     }
-        //                             // } else {
-        //                             //     alert('Please select some text to comment on.');
-        //                             // }
-        //                         }
-        //                     });
-        //                     ed.on('dragstart', (e) => {
-        //                         // 阻止拖动事件
-        //                         e.preventDefault();
-        //                     });
-        //                     // 监听焦点变化并高亮当前选中的元素
-        //                     ed.on('focus', function () {
-        //                         if (!isDeleting) {
-        //                             // 处理正常的焦点逻辑
-        //                             ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
-        //                             _this.updateCurrentTag(ed);
-        //                         }
-        //                     });
-        //                     // 监听焦点变化并高亮当前选中的元素
-        //                     ed.on('selectionChange', function () {
-        //                         _this.updateCurrentTag(ed);
-        //                     });
-
-        //                     ed.on('mouseup', function () {
-        //                         _this.updateCurrentTag(ed);
-        //                     });
-        //                     ed.on('blur', function () {
-        //                         console.log('_this.lastPTag at line 367:', _this.lastTag);
-        //                         if (_this.lastTag) {
-        //                             _this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
-        //                             _this.lastTag.style.border = '';
-        //                             _this.lastTag = null;
-        //                         }
-        //                         if (wordButtonContainer) {
-        //                             wordButtonContainer.remove();
-        //                             wordButtonContainer = null;
-        //                         }
-        //                     });
-        //                     ed.on('drop', (event, index) => {
-        //                         console.log('event at line 375:', event);
-
-        //                         const selection = ed.selection;
-        //                         const selectedNode = selection.getNode(); // 获取选中的节点
-        //                         console.log('1899', selectedNode); // 查看光标位置的节点类型
-
-        //                         // 向上遍历直到找到带有 main-id 属性的节点
-        //                         const findParentWithMainId = (node) => {
-        //                             while (node) {
-        //                                 if (node.hasAttribute && node.classList.contains('pMain')) {
-        //                                     return node; // 找到并返回该节点
-        //                                 }
-        //                                 node = node.parentNode; // 向上遍历父节点
-        //                             }
-        //                             return null; // 如果没有找到，返回 null
-        //                         };
-
-        //                         // 查找选中节点的父节点，直到找到带有 main-id 属性的节点
-        //                         const nodeWithMainId = findParentWithMainId(selectedNode);
-        //                         console.log('at line 395:', nodeWithMainId);
-        //                         const dataId = nodeWithMainId.getAttribute('main-id');
-        //                         event.preventDefault();
-        //                         hideDeleteButton();
-        //                         // 获取拖动的数据
-        //                         _this.$emit('onDrop', event, dataId); // 阻止默认的行为
-        //                         // 在编辑器中插入数据
-        //                         // const content = <div class="dropped-item">${itemData}</div>;
-        //                         // ed.insertContent(content); // 插入文本或HTML
-        //                     });
-        //                     // 方法：更新当前选中的 p 标签的样式
-        //                     _this.updateCurrentTag = function (ed) {
-        //                         var selection = ed.selection;
-        //                         var node = selection.getNode();
-
-        //                         // 向上查找包含的节点直到找到合适的标签
-        //                         if (node && !node.classList.contains('pMain')) {
-        //                             node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
-        //                         }
-
-        //                         if (node && node.classList.contains('pMain')) {
-        //                             // 清除上一个高亮的节点样式
-        //                             if (_this.lastTag && _this.lastTag !== node) {
-        //                                 _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
-        //                                 _this.lastTag.style.border = '';
-        //                             }
-
-        //                             // 设置当前节点的背景色和边框
-        //                             node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
-        //                             node.style.border = '2px dashed rgb(0 102 153 / 50%)';
-
-        //                             // 更新选中的节点
-        //                             var currentNode = node;
-
-        //                             // 显示删除按钮
-        //                             showDeleteButton(currentNode);
-
-        //                             // 更新 lastTag
-        //                             _this.lastTag = node;
-        //                         } else {
-        //                             // 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
-        //                             hideDeleteButton();
-        //                         }
-        //                     };
-        //                     function hideDeleteButton() {
-        //                         if (wordButtonContainer) {
-        //                             wordButtonContainer.remove(); // 移除删除按钮
-        //                             wordButtonContainer = null; // 清空按钮引用
-        //                         }
-        //                     }
-        //                     function showDeleteButton(paragraph) {
-        //                         if (wordButtonContainer) {
-        //                             wordButtonContainer.remove(); // 如果已有按钮容器，移除
-        //                         }
-
-        //                         // 获取 <p> 标签的位置信息
-        //                         const paragraphRect = paragraph.getBoundingClientRect();
-        //                         const iframe = ed.getDoc().defaultView.frameElement;
-        //                         const iframeRect = iframe.getBoundingClientRect();
-        //                         var left = 0;
-        //                         if (_this.isEditComment) {
-        //                             left = 100;
-        //                         } else {
-        //                             left = 80;
-        //                         }
-        //                         // 创建按钮容器 div
-        //                         wordButtonContainer = document.createElement('div');
-        //                         wordButtonContainer.style.position = 'absolute';
-        //                         wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
-        //                         wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
-        //                         wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
-        //                         wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
-        //                         wordButtonContainer.style.alignItems = 'center'; // 垂直居中
-
-        //                         // 创建删除按钮
-        //                         const deleteButton = document.createElement('button');
-        //                         deleteButton.style.backgroundColor = 'red';
-        //                         deleteButton.style.color = 'white';
-        //                         deleteButton.style.border = 'none';
-        //                         deleteButton.style.borderRadius = '50%';
-        //                         deleteButton.style.padding = '5px';
-        //                         deleteButton.style.cursor = 'pointer';
-        //                         deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
-        //                         const deleteIcon = document.createElement('i');
-        //                         deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
-        //                         deleteIcon.style.fontSize = '20px';
-        //                         deleteIcon.style.color = '#fff'; // 设置图标颜色
-        //                         deleteButton.appendChild(deleteIcon);
-        //                         deleteButton.addEventListener('mousedown', function (e) {
-        //                             e.stopImmediatePropagation();
-        //                             e.preventDefault();
-
-        //                             _this.$emit('onDelete', paragraph.getAttribute('main-id'));
-        //                         });
-
-        //                         // 创建批注按钮
-        //                         const editButton = document.createElement('button');
-        //                         editButton.style.backgroundColor = 'rgb(19, 188, 32)';
-        //                         editButton.style.color = 'white';
-        //                         editButton.style.border = 'none';
-        //                         editButton.style.borderRadius = '50%';
-        //                         editButton.style.padding = '5px';
-        //                         editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
-        //                         editButton.style.cursor = 'pointer';
-
-        //                         const editIcon = document.createElement('i');
-        //                         editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
-        //                         editIcon.style.fontSize = '20px';
-        //                         editIcon.style.color = '#fff'; // 设置图标颜色
-
-        //                         editButton.appendChild(editIcon);
-        //                         editButton.addEventListener('mousedown', function (e) {
-        //                             e.stopImmediatePropagation();
-        //                             e.preventDefault();
-        //                             // 触发批注事件
-        //                             _this.$emit('onEdit', paragraph.getAttribute('main-id'));
-        //                         });
-
-        //                         // 将按钮添加到容器中
-        //                         wordButtonContainer.appendChild(editButton);
-        //                         wordButtonContainer.appendChild(deleteButton);
-
-        //                         if (_this.isEditComment) {
-        //                             // 创建批注按钮
-        //                             const commentButton = document.createElement('button');
-        //                             commentButton.style.backgroundColor = '#2b81ef';
-        //                             commentButton.style.color = 'white';
-        //                             commentButton.style.border = 'none';
-        //                             commentButton.style.borderRadius = '50%';
-        //                             commentButton.style.padding = '5px';
-        //                             commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
-        //                             commentButton.style.cursor = 'pointer';
-
-        //                             const commentIcon = document.createElement('i');
-        //                             commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
-        //                             commentIcon.style.fontSize = '20px';
-        //                             commentIcon.style.color = '#fff'; // 设置图标颜色
-
-        //                             commentButton.appendChild(commentIcon);
-        //                             commentButton.addEventListener('mousedown', function (e) {
-        //                                 e.stopImmediatePropagation();
-        //                                 e.preventDefault();
-        //                                 // 触发批注事件
-        //                                 _this.$emit('onAddComment', paragraph.getAttribute('main-id'));
-        //                                 if (wordButtonContainer) {
-        //                                     wordButtonContainer.remove(); // 移除删除按钮
-        //                                     wordButtonContainer = null; // 清空按钮引用
-        //                                 }
-        //                             });
-
-        //                             wordButtonContainer.appendChild(commentButton);
-        //                         }
-
-        //                         wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
-        //                         // 将容器添加到页面中
-        //                         document.body.appendChild(wordButtonContainer);
-        //                     }
-        //                     ed.on('mousedown', function (e) {
-        //                         // 检查点击的位置是否是删除按钮或选中的 <p> 标签
-        //                         if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
-        //                             if (wordButtonContainer) {
-        //                                 wordButtonContainer.remove(); // 移除删除按钮
-        //                                 wordButtonContainer = null; // 清空按钮引用
-        //                             }
-        //                         }
-        //                     });
-        //                 }
-        //             },
-
-        //             init_instance_callback: (editor) => {
-        //                 if (_this.value) {
-        //                     editor.setContent(_this.value);
-        //                     _this.$emit('loaded');
-        //                 }
-        //                 _this.hasInit = true;
-        //                 editor.on('NodeChange Change KeyUp SetContent', () => {
-        //                     this.hasChange = true;
-        //                     this.$emit('input', editor.getContent());
-        //                 });
-
-        //                 const iframeDocument = editor.getDoc(); // 使用 ed.getDoc() 获取编辑器的 document
-        //                 if (iframeDocument) {
-        //                     iframeDocument.addEventListener('scroll', function () {
-        //                         if (wordButtonContainer) {
-        //                             wordButtonContainer.remove();
-        //                             wordButtonContainer = null;
-        //                         }
-
-        //                         if (_this.lastTag) {
-        //                             _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
-        //                             _this.lastTag.style.border = '';
-        //                         }
-        //                     });
-        //                 }
-        //             }
-        //         });
-        //     },
-
-        // 显示选中的批注内容
         viewCommentDetail(comment) {
             this.selectedComment = comment.text;
         },
@@ -1669,6 +3231,53 @@ export default {
             this.$emit('getContent', type, window.tinymce.get(this.tinymceId).getContent());
         },
 
+        //获取内容
+        getContent1(type, content) {
+            console.log('content at line 2986:', content);
+            content = this.$commonJS.transformHtmlString(content);
+
+            var div = document.createElement('div');
+            div.innerHTML = content; // 将 HTML 字符串加载到 div 中
+            // 替换所有 <strong> 为 <b>
+            var strongTags = div.getElementsByTagName('strong');
+            for (var i = 0; i < strongTags.length; i++) {
+                var bTag = document.createElement('b');
+                bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
+                strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
+            }
+            // 替换所有 <em> 为 <i>
+            var emTags = div.getElementsByTagName('em');
+            for (var i = 0; i < emTags.length; i++) {
+                var iTag = document.createElement('i');
+                iTag.innerHTML = emTags[i].innerHTML; // 保留内容
+                emTags[i].parentNode.replaceChild(iTag, emTags[i]);
+            }
+
+            // 获取最终修改后的 HTML
+            content = div.innerHTML;
+            console.log('content at line 3007:', content);
+            this.$api
+                .post('api/Proofread/modify', {
+                    am_id: this.proofreadingContent.am_id,
+                    record_id: this.proofreadingContent.id,
+                    revised_content: content,
+                    article_id: this.$route.query.id
+                })
+                .then(async (res) => {
+                    if (res.status == 1) {
+                        this.getProofreadingList([this.proofreadingContent.am_id]);
+                        // this.refreshCurrentData(data.am_id);
+                        this.$message.success('Success');
+                        this.editProofreadingContentVisible = false;
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err.msg);
+                });
+        },
+
         async export(type, data) {
             if (type == 'table') {
                 var tableHtml = `<html xmlns:w="urn:schemas-microsoft-com:office:word">
@@ -1739,17 +3348,20 @@ export default {
 
         //获取上传图片后的地址，并设置图片样式
         tableSuccessCBK(arr) {
-            console.log(arr, '222');
             const _this = this;
             window.tinymce.get(_this.tinymceId).insertContent(arr);
         }
     },
     destroyed() {
         this.destroyTinymce();
+        document.removeEventListener('selectionchange', this.handleSelectionUpdate);
     }
 };
 </script>
 <style scoped>
+::-webkit-scrollbar {
+    width: 12px !important;
+}
 ::v-deep .tox-tinymce-aux {
     z-index: 9999 !important;
 }
@@ -1821,22 +3433,24 @@ export default {
 }
 
 .MaxPicture {
-    text-align: center;
+    text-align: center !important;
 }
 
 .myeditablediv img {
-    width: 500px !important;
+    width: 80% !important;
     margin-bottom: 10px;
+    max-width: 580px;
 }
 
 .font {
     display: block;
     margin: 0 auto;
-    font-size: 13px;
+    font-size: 14px;
 }
 .tableTitle {
     text-align: center !important;
     font-weight: bold;
+    color: rgb(210, 90, 90) !important;
 }
 
 .word-container {
@@ -1845,19 +3459,24 @@ export default {
     position: relative;
     overflow: auto;
     /* background: #f2f3f5 !important; */
-    padding: 20px 20px;
+    padding: 20px 24px;
     box-sizing: border-box;
+    z-index: 10;
 }
 .pMain {
     margin-top: 5px;
     margin-bottom: 5px;
+    min-height: 22px;
+    font-size: 14px;
+    font-family: 'Charis SIL';
+    text-align: justify;
 }
 ::v-deep .tox.tox-tinymce-inline {
     z-index: 9999 !important;
 }
 .remarkbg {
-    background-color: #f3d5d5c2 !important;
-    border-right: 2px solid #cd5454 !important;
+    background-color: var(--primary-comment-bg) !important;
+    border-right: 2px solid var(--primary-comment-deep) !important;
 }
 .isRemark {
     display: flex;
@@ -1892,21 +3511,11 @@ export default {
     list-style: none;
 }
 .comment-item::before {
-    /* content: '';
-    position: absolute;
-    top: 24px; 
-    left: -32px; 
-    width: 34px; 
-    height: 0;
-    border-top: 2px dashed #cd5454; 
-
-    background-color: #cd5454; 
-    transform: rotate(-15deg); */
 }
 .commentOperateItem {
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: bold;
 }
 .commentOperateItem img {
@@ -1914,7 +3523,15 @@ export default {
     height: 20px;
     margin-right: 10px;
 }
-
+.proofreadingOperateItem {
+    display: flex;
+    align-items: center;
+    line-height: 16px;
+}
+.proofreadingOperateItem i {
+    font-size: 18px;
+    margin-right: 4px;
+}
 .Resolved {
     /* background-color: #dedede; */
     background-color: rgb(19, 188, 32);
@@ -1952,21 +3569,24 @@ export default {
     background: #555; /* 滑块悬停时的颜色 */
 }
 .highlighted {
-    border: 2px solid #cd5454; /* 高亮边框 */
-    box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */
+    border: 2px solid var(--primary-comment-deep); /* 高亮边框 */
+    box-shadow: 0 0 10px var(--primary-comment-light); /* 高亮阴影 */
 }
-.isTitleH1{
-  position: relative;
-  /* border: 1px solid #94c2f7; */
+.highlighted1 {
+    border: 2px solid var(--primary-comment-deep); /* 高亮边框 */
+    box-shadow: 0 0 10px var(--primary-comment-light); /* 高亮阴影 */
+}
+.isTitleH1 {
+    position: relative;
+    /* border: 1px solid #94c2f7; */
     background-color: #dbebfc54;
 }
 
- .Htitle{
-  
-   color: #4d99f1;
-   background-color: #dbebfca6;
-   /* border: 1px solid #4d99f1; */
-   border-radius: 50%;
+.Htitle {
+    color: #4d99f1;
+    background-color: #dbebfca6;
+    /* border: 1px solid #4d99f1; */
+    border-radius: 50%;
     font-weight: bold;
     position: absolute;
 
@@ -1976,25 +3596,461 @@ export default {
     left: -30px;
     top: 0px;
     text-align: center;
-
 }
-.Htitle1{
+.Htitle1 {
     width: 24px;
     height: 24px;
     /* font-size: 14px; */
 }
-.Htitle2{   width: 24px;
+.Htitle2 {
+    width: 24px;
     height: 24px;
     /* font-size: 16px; */
 }
-.Htitle3{   width: 24px;
+.Htitle3 {
+    width: 24px;
     height: 24px;
     /* font-size: 12px; */
 }
-.isTitleH2{position: relative;
-    background-color: #dbebfc54;
+.isTitleH2 {
+    position: relative;
+    /* background-color: #dbebfc54; */
 }
-.isTitleH3{position: relative;
-    background-color: #dbebfc54;
+.isTitleH3 {
+    position: relative;
+    /* background-color: #dbebfc54; */
+}
+.glowing-border {
+    border: 3px solid #006699d1;
+    border-radius: 5px;
+    padding: 4px;
+    animation: glow 1.5s infinite alternate;
+}
+@keyframes glow {
+    0% {
+        box-shadow: 0 0 5px #006699d1;
+    }
+    50% {
+        box-shadow: 0 0 20px #006699d1;
+    }
+    100% {
+        box-shadow: 0 0 5px #006699d1;
+    }
+}
+
+.HTitleBox {
+    height: 100%;
+    border: 1px solid #c5c5c5;
+    width: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 6px;
+}
+.HTitleBox li {
+    list-style: none;
+    padding: 0 10px;
+    color: #333;
+    font-weight: bold;
+    font-size: 20px;
+    cursor: pointer;
+}
+.operateBox {
+    width: auto;
+    display: flex;
+}
+.operateBox li {
+    min-width: 50px;
+    display: flex;
+    /* flex-direction: column; */
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    list-style: none;
+    padding: 2px 10px;
+    margin-left: 10px;
+    color: #8a8a8b;
+    /* font-weight: bold; */
+    font-size: 16px;
+    background-color: rgb(43, 129, 239);
+    color: #fff;
+    border-radius: 4px;
+    height: 26px;
+}
+::v-deep .el-checkbox__inner {
+    width: 18px;
+    height: 18px;
+}
+/* 悬浮提示的样式 */
+.selected-to-here {
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 123, 255, 0.7);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 14px;
+    z-index: 999;
+}
+/* 容器：改为纵向 Flex，让两行排开 */
+.wps-two-layer-bar {
+    position: fixed;
+    display: flex;
+    flex-direction: column; /* 纵向排列两行 */
+    gap: 1px; /* 两行之间的间距 */
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.98);
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    border: 1px solid #e5e6eb;
+    z-index: 10000;
+    min-width: 320px;
+}
+
+/* 每一行的样式 */
+.bar-row {
+    display: flex;
+    align-items: center;
+    gap: 0px;
+}
+
+/* 下层样式可以微调，比如颜色稍淡或缩小 */
+.bottom-row {
+    padding-top: 4px;
+    border-top: 1px dashed #9b9c9f; /* 增加一条虚线分割感 */
+}
+
+/* 通用项样式 */
+.menu-item {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    height: 30px;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #4e5969;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.menu-item i {
+    margin-right: 6px;
+    font-size: 14px;
+}
+
+.menu-item:hover {
+    background-color: #f2f3f5;
+}
+
+/* 颜色高亮 */
+.primary {
+    color: #2b81ef;
+    font-weight: 500;
+}
+.ai-feat {
+    color: #6740fb;
+    background: rgba(43, 129, 239, 0.05);
+}
+.comment-feat {
+    color: #f56c6c;
+}
+.danger {
+    color: red;
+}
+
+/* H1/H2/H3 组样式 */
+.h-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 4px;
+}
+.h-item {
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 14px;
+    color: #1d2129;
+}
+.h-item.active {
+    color: #2b81ef;
+}
+
+/* 分隔线 */
+.row-divider {
+    width: 1px;
+    height: 14px;
+    background-color: #e5e6eb;
+    margin: 0 8px;
+}
+::v-deep .rightTabs .el-tabs__item {
+    height: 46px !important;
+    line-height: 36px !important;
+}
+.proofreading_content {
+    white-space: pre-wrap; /* 保留空格和换行，自动换行 */
+}
+.hoverProofreading {
+    display: inline-block;
+
+    /* cursor: pointer !important; */
+}
+.hoverProofreading:hover {
+    background-color: #cd5454;
+}
+/* 闪烁高亮边框样式：2秒内逐渐淡出 */
+.flash-border {
+    outline: 2px solid var(--primary-comment-deep) !important;
+    box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.25);
+    background: rgba(243, 213, 213, 0.26) !important;
+    animation: flashFade 1s infinite alternate;
+}
+
+@keyframes flashFade {
+    0% {
+        box-shadow: 0 0 5px rgba(255, 77, 79, 0.35);
+    }
+    50% {
+        box-shadow: 0 0 10px rgba(255, 154, 160, 0.2);
+    }
+    100% {
+        box-shadow: 0 0 5px rgba(255, 154, 160, 0.2);
+    }
+}
+.proofreadingBox::-webkit-scrollbar-thumb {
+    background: #aaa;
+    border-radius: 10px;
+    width: 8px !important;
+}
+
+.rail {
+    position: fixed;
+    top: 60px;
+    bottom: 4px;
+    right: 0px;
+    width: 14px;
+    /* background: #f5f5f5; */
+    border-radius: 4px;
+    z-index: 1;
+}
+.dot {
+    position: absolute;
+    left: 1px;
+    right: 1px;
+    height: 6px;
+    border-radius: 2px;
+    cursor: pointer;
+    opacity: 0.25;
+}
+.dot:hover {
+    transform: scaleX(1.2);
+}
+.viewport {
+    position: absolute;
+    left: 3px;
+    right: 3px;
+    background: #888;
+    border-radius: 4px;
+    pointer-events: none;
+}
+.viewport {
+    cursor: grab;
+}
+.viewport.dragging {
+    cursor: grabbing;
+}
+.pagination-box {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 0 6px 0px;
+    /* border: 1px solid #e4e7ed; */
+    /* border-radius: 4px; */
+    /* background-color: #fff; */
+    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
+    position: absolute;
+    top:0px;
+    box-sizing: border-box;
+    right: 0px;
+    z-index: 2;
+}
+
+.info-text {
+    margin-right: 10px;
+    color: #606266;
+    width: 100%;
+    cursor: pointer;
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    font-size: 11px;
+    position: absolute;
+    top: 26px;
+    left:0px;
+}
+/deep/.rightTabs  .first-pane-width {
+    width: 200px; /* 规定第一个面板内容的宽度 */
+}
+.arrow-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.el-icon-arrow-up,
+.el-icon-arrow-down {
+    cursor: pointer;
+    color: #333;
+    transition: color 0.2s;
+}
+
+.el-icon-arrow-up:hover,
+.el-icon-arrow-down:hover {
+    color: #333;
+}
+
+.el-icon-arrow-up:disabled,
+.el-icon-arrow-down:disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+}
+.word-menu {
+    box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
+    margin: 0px 0;
+    box-sizing: border-box;
+    display: flex;
+}
+.pMainH1 {
+    font-family: 'Charis SIL';
+    min-height: 12px;
+    background: rgb(222, 235, 247);
+    color: rgb(210, 90, 90) !important;
+    text-align: center !important;
+    border: 1px solid rgba(222, 234, 247, 0.1);
+    border-radius: 10px;
+    font-size: 16px;
+
+    margin-top: 15px !important;
+    margin-bottom: 10px !important;
+    box-shadow: rgba(222, 234, 247, 0.6) 0px 4px 4px;
+}
+::v-deep .pMainH1 .pMain {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    line-height: 30px !important;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold !important;
+}
+::v-deep.pMainH1 .pMain i {
+    font-style: normal !important;
+}
+.proofreading-num {
+    z-index: 2;
+    background: #e61a12;
+    color: rgb(255, 255, 255);
+    border-radius: 20px;
+    padding: 0px 6px;
+    font-size: 12px;
+    margin-left: 20px;
+    position: absolute;
+    right: 6px;
+    cursor: pointer;
+}
+.imageTitle {
+    color: rgb(210, 90, 90) !important;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.table-header-row {
+    border-bottom: 1px solid #000;
+}
+.oddColor td {
+    background: rgb(250, 231, 232);
+}
+.table_Box {
+    padding: 8px 15px;
+    box-sizing: border-box;
+}
+.table-box tr:first-child td {
+    border-top: 1px solid #000 !important;
+}
+.imageNote {
+    line-height: 22px;
+    font-size: 14px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.tableNote {
+    line-height: 22px;
+    font-size: 14px;
+
+    margin-bottom: 10px;
+    color: #333;
+}
+wmath {
+    font-size: 14px !important;
+}
+.word-tool {
+    border-bottom: 2px solid #c7cdcf;
+    background-color: #fff;
+    position: fixed;
+    top: 40px;
+    left: 285px;
+    z-index: 10;
+    right: 330px;
+    height: 46px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+    width: calc(100% - 285px - 330px);
+    z-index: 12;
+}
+.Proofreadingstatus {
+    z-index: 2;
+    background-color: #fff;
+    border-radius: 16px;
+    font-size: 16px;
+    margin-left: 20px;
+    position: absolute;
+    right: 2px;
+    cursor: pointer;
+}
+/* common.css */
+.base-tag {
+    border-radius: 4px;
+    cursor: pointer;
+    line-height: 26px;
+    padding: 2px 10px;
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    /* 变量：未传参时使用默认值 */
+    margin-left: var(--ml, 10px);
+    background-color: var(--bg, #6740fb) !important;
+    border: 1px solid var(--bg, #6740fb);
+}
+::v-deep .select-main-id,
+.select-main-id .el-checkbox__input {
+    position: absolute !important;
+}
+/* 修改 word.vue 的 style 部分 */
+.wps-two-layer-bar {
+    position: fixed; /* 改用 fixed 配合 getBoundingClientRect */
+    transform: translate(-50%, -100%); /* 确保中心对齐文字 */
+    transition: opacity 0.2s, transform 0.2s; /* 增加平滑过渡 */
+    pointer-events: auto;
+    
+    background: #ffffff;
+    border-radius: 6px;
+    box-shadow: 0 3px 15px rgba(0,0,0,0.15); /* 更有层次感的阴影 */
+    border: 1px solid #ddd;
+    padding: 8px;
+    z-index: 3000;
 }
 </style>
diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue
index 30b87aa..2e7235a 100644
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -1,14 +1,14 @@
 <template>
     <div
-        @click="
-            isMenuVisible = false;
-            currentData = {};
-            currentId = '';
-        "
+        @click="handleGlobalClick"
         class="tinymce-container editor-container word-container"
         :style="!isPreview ? 'padding:10px 20px 10px 30px;' : 'padding:0px;'"
         ref="scrollDiv"
+        @mouseup="handleMouseUp"
     >
+        <!-- <div class="tinymce-container editor-container" style="margin-top: 60px;">
+            <textarea class="tinymce-textarea" id="wordHtml"></textarea>
+        </div> -->
         <div class="word-menu">
             <div
                 class="word-tool"
@@ -208,7 +208,7 @@
                                 v-if="currentId == item.am_id"
                                 style="z-index: 100"
                             ></div>
-                            <!-- @dblclick="dblclickEdit(item.am_id, 'img', item, index)" -->
+
                             <div
                                 :ref="'row-' + item.am_id"
                                 :key="item.am_id"
@@ -225,6 +225,7 @@
                                 :main-state="item.state"
                                 :remark="item.checks && item.checks.length > 0 ? 1 : 0"
                                 :data-id="item.ami_id"
+                                :data-index="index"
                                 :type="item.type"
                                 :main-id="item.am_id"
                                 :id="'editor' + item.am_id"
@@ -258,7 +259,7 @@
                                     ></span>
                                 </font>
                             </div>
-                            <!-- @dblclick="dblclickEdit(item.am_id, 'table', item, index)" -->
+
                             <div
                                 :ref="'row-' + item.am_id"
                                 id="drop-target"
@@ -272,6 +273,7 @@
                                 :main-state="item.state"
                                 :remark="item.checks && item.checks.length > 0 ? 1 : 0"
                                 :data-id="item.amt_id"
+                                :data-index="index"
                                 :type="item.type"
                                 :id="'editor' + item.am_id"
                                 :main-id="item.am_id"
@@ -343,7 +345,7 @@
                                     ></span>
                                 </font>
                             </div>
-                            <!-- @dblclick="dblclickEdit(item.am_id, 'text', item, index)" -->
+
                             <div
                                 :ref="'row-' + item.am_id"
                                 @click="onProofSpanClick"
@@ -359,6 +361,7 @@
                                 :main-state="item.state"
                                 :remark="item.checks && item.checks.length > 0 ? 1 : 0"
                                 :data-id="item.am_id"
+                                :data-index="index"
                                 :main-id="item.am_id"
                                 :type="item.type"
                                 :id="'editor' + item.am_id"
@@ -369,24 +372,7 @@
                 </template>
                 <slot name="refrences"></slot>
             </div>
-            <div class="pagination-box" style="" v-if="isEditComment && activeName == 'proofreading'">
-               
 
-                <div class="arrow-group" v-if="totalItems > 0">
-                    <i
-                        class="el-icon-arrow-up"
-                        @click="handleUp"
-                        :style="{ opacity: currentItem === 1 ? 0.5 : 1 }"
-                        :disabled="currentItem === 1"
-                    ></i>
-                    <i
-                        class="el-icon-arrow-down"
-                        @click="handleDown"
-                        :style="{ opacity: currentItem === totalItems ? 0.5 : 1 }"
-                        :disabled="currentItem === totalItems"
-                    ></i>
-                </div>
-            </div>
             <el-tabs
                 v-model="activeName"
                 @tab-click="handleClick"
@@ -401,36 +387,52 @@
                 }"
                 style=""
             >
-                <el-tab-pane :label="`AI Proofreading`" name="proofreading" v-if="isEditComment">
-                    <span slot="label">
-                        AI proofreading
-                        <el-tooltip
-                            class="item"
-                            effect="dark"
-                            :content="`There are a total of ${totalNumbers} proofreading items that need to be addressed`"
-                            placement="top-start"
-                        >
-                            <span style="color: #888">( Total {{ totalNumbers }} ) </span>
-                        </el-tooltip>
-                       
-                              <el-tooltip
-                    v-if="totalItems > 0 && totalNumbers > 0"
-                    class="item"
-                    effect="dark"
-                    :content="`There are ${totalItems} paragraphs with unresolved errors in the Manuscript`"
-                    placement="top-start"
-                >
-                    <span class="info-text"
-                        ><span v-if="showcurrentItemIndex()"
-                            >Current <span style="color: rgb(230, 26, 18)">{{ showcurrentItemIndex() }}</span> ,</span
-                        >
-                        Total {{ totalItems }} paragraphs
-                    </span>
-                </el-tooltip>  
-                        
-                    
-                    </span>
-                    
+                <el-tab-pane :label="`AI Proofreading`" name="proofreading" v-if="isEditComment" class="first-pane-width">
+                    <div :style="`width: calc(${rightW}px - 200px);position:relative;`" slot="label">
+                        <span>
+                            AI proofreading
+                            <div class="pagination-box" style="" v-if="!isPreview & isEditComment && activeName == 'proofreading'">
+                                <div class="arrow-group" v-if="totalItems > 0">
+                                    <i
+                                        class="el-icon-arrow-up"
+                                        @click="handleUp"
+                                        :style="{ opacity: currentItem === 1 ? 0.5 : 1 }"
+                                        :disabled="currentItem === 1"
+                                    ></i>
+                                    <i
+                                        class="el-icon-arrow-down"
+                                        @click="handleDown"
+                                        :style="{ opacity: currentItem === totalItems ? 0.5 : 1 }"
+                                        :disabled="currentItem === totalItems"
+                                    ></i>
+                                </div>
+                            </div>
+                            <el-tooltip
+                                class="item"
+                                effect="dark"
+                                :content="`There are a total of ${totalNumbers} proofreading items that need to be addressed`"
+                                placement="top-start"
+                            >
+                                <span style="color: #888">( Total {{ totalNumbers }} ) </span>
+                            </el-tooltip>
+
+                            <el-tooltip
+                                v-if="totalItems > 0 && totalNumbers > 0"
+                                class="item"
+                                effect="dark"
+                                :content="`There are ${totalItems} paragraphs with unresolved errors in the Manuscript`"
+                                placement="top-start"
+                            >
+                                <span class="info-text"
+                                    ><span v-if="showcurrentItemIndex()"
+                                        >Current <span style="color: rgb(230, 26, 18)">{{ showcurrentItemIndex() }}</span> ,</span
+                                    >
+                                    Total {{ totalItems }} paragraphs
+                                </span>
+                            </el-tooltip>
+                        </span>
+                    </div>
+
                     <div
                         v-loading="proofreadingLoading"
                         v-if="!isPreview"
@@ -724,23 +726,27 @@
                             style="width: 100%; margin: 0 0 10px; background: #fafafa; box-sizing: border-box"
                         >
                             <div>
-                                <div class="base-flex-center"
-                                :style="{
-                                    '--fl-jc': 'space-between',
-                                }"
+                                <div
+                                    class="base-flex-center"
+                                    :style="{
+                                        '--fl-jc': 'space-between'
+                                    }"
                                     style="background-color: var(--primary-comment-bg)"
                                 >
                                     <el-link
-                                       
-                                        class="pizhu base-flex" :style="{
-                                            '--fl-ai':'center'
+                                        class="pizhu base-flex"
+                                        :style="{
+                                            '--fl-ai': 'center'
                                         }"
-                                       
-                                        @click="highlightLeftComment(commont.amc_id, item.am_id)"
+                                        @click="highlightLeftComment(null, item.am_id)"
                                     >
-                                        <span class="base-flex" :style="{
-                                            '--fl-ai':'center'
-                                        }" style="color: var(--primary-comment-deep);  font-weight: bold">
+                                        <span
+                                            class="base-flex"
+                                            :style="{
+                                                '--fl-ai': 'center'
+                                            }"
+                                            style="color: var(--primary-comment-font-deep); font-weight: bold"
+                                        >
                                             <img
                                                 class="isRemark"
                                                 src="@/assets/img/isRemark.png"
@@ -760,11 +766,11 @@
                                         <div style="display: flex; align-items: center; line-height: 20px">
                                             <span
                                                 :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
-                                                style="color: var(--primary-comment-deep); font-weight: bold; font-size: 12px"
+                                                style="color: var(--primary-comment-font-deep); font-weight: bold; font-size: 12px"
                                                 >{{ commentIndex + 1 }}、</span
                                             >
                                             <span
-                                                style="color: var(--primary-comment-deep); font-size: 12px"
+                                                style="color: var(--primary-comment-font-deep); font-size: 12px"
                                                 :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
                                                 >Comment</span
                                             >
@@ -911,32 +917,6 @@
             </el-tabs>
         </div>
 
-        <div v-if="isMenuVisible" class="wps-two-layer-bar" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }">
-            <div class="bar-row">
-                <div v-if="currentData.type == 0" class="h-group">
-                    <span :class="['h-item', { active: currentData.is_h1 == 1 }]" @click="changeTitle(1)">H1</span>
-                    <span :class="['h-item', { active: currentData.is_h2 == 1 }]" @click="changeTitle(2)">H2</span>
-                    <span :class="['h-item', { active: currentData.is_h3 == 1 }]" @click="changeTitle(3)">H3</span>
-                </div>
-                <div class="row-divider" v-if="currentData.type == 0"></div>
-                <div v-if="isEditComment && currentData.type == 0" class="menu-item ai-feat" @click="menuAction('proofreading')">
-                    <i class="el-icon-magic-stick"></i><span>AI Proofreading</span>
-                </div>
-                <div v-if="isEditComment" class="menu-item comment-feat" @mousedown="cacheSelection" @click="menuAction('comment')">
-                    <i class="el-icon-chat-line-square"></i><span>Comment</span>
-                </div>
-            </div>
-
-            <div class="bar-row bottom-row">
-                <div class="menu-item" @click="menuAction('row')"><i class="el-icon-plus"></i><span>Add Row</span></div>
-                <div class="menu-item primary" @click="menuAction('edit')"><i class="el-icon-edit"></i><span>Edit</span></div>
-
-                <div class="menu-item danger" @click="menuAction('delete')"><i class="el-icon-delete"></i><span>Delete</span></div>
-                <div class="row-divider"></div>
-                <div class="menu-item" @click="menuAction('up')"><i class="el-icon-top"></i><span>Move Up</span></div>
-                <div class="menu-item" @click="menuAction('down')"><i class="el-icon-bottom"></i><span>Move Down</span></div>
-            </div>
-        </div>
         <el-dialog
             append-to-body
             destroy-on-close
@@ -980,8 +960,55 @@
                 :style="{ top: m.top + 'px', background: m.color, height: m.height + 'px' }"
                 @click="scrollToIndex(m.am_id)"
             />
-            <!-- 当前视口位置提示（可选） -->
         </div>
+        <!-- 操作按钮 -->
+        <div v-if="isMenuVisible || bubbleVisible" class="wps-two-layer-bar selection-bubble" :style="bubbleStyle" @mousedown.stop>
+            <div class="bar-row">
+                <div v-if="currentData.type == 0" class="h-group">
+                    <span :class="['h-item', { active: currentData.is_h1 == 1 }]" @click="changeTitle(1)">H1</span>
+                    <span :class="['h-item', { active: currentData.is_h2 == 1 }]" @click="changeTitle(2)">H2</span>
+                    <span :class="['h-item', { active: currentData.is_h3 == 1 }]" @click="changeTitle(3)">H3</span>
+                </div>
+                <div class="row-divider" v-if="currentData.type == 0"></div>
+                <div v-if="isEditComment && currentData.type == 0" class="menu-item ai-feat" @click="menuAction('proofreading')">
+                    <i class="el-icon-magic-stick"></i><span>{{ $t('commonTable.AIProofreading') }}</span>
+                </div>
+                <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="currentData.type == 0"></div>
+
+                <div class="menu-item menu-link" v-if="currentData.type == 0" @click="menuAction('link')">
+                    <i class="el-icon-link"></i><span>{{ $t('commonTable.Association') }}</span>
+                </div>
+            </div>
+
+            <div class="bar-row bottom-row">
+                <div class="menu-item" @click="menuAction('row')">
+                    <i class="el-icon-plus"></i><span>{{ $t('commonTable.addRow') }}</span>
+                </div>
+                <div class="menu-item primary" @click="menuAction('edit')">
+                    <i class="el-icon-edit"></i><span>{{ $t('commonTable.edit') }}</span>
+                </div>
+                <div class="menu-item danger" @click="menuAction('delete')">
+                    <i class="el-icon-delete"></i><span>{{ $t('commonTable.delete') }}</span>
+                </div>
+                <div class="row-divider"></div>
+                <div class="menu-item" @click="menuAction('up')">
+                    <i class="el-icon-top"></i><span>{{ $t('commonTable.MoveUp') }}</span>
+                </div>
+                <div class="menu-item" @click="menuAction('down')">
+                    <i class="el-icon-bottom"></i><span>{{ $t('commonTable.MoveDown') }}</span>
+                </div>
+            </div>
+        </div>
+        <common-media-link-dialog
+            ref="mediaLinkRef"
+            @confirm="onLinkConfirm"
+            :articleId="articleId"
+            :displayList="displayList"
+            :currentTypeText="currentTypeText"
+        ></common-media-link-dialog>
     </div>
 </template>
 <script>
@@ -991,128 +1018,127 @@ import htmlDocx from 'html-docx-js/dist/html-docx.js';
 import { Document, Packer, PageOrientation, Paragraph, TextRun } from 'docx'; // 引入 docx.js
 import html2canvas from 'html2canvas';
 const toolbar = 'addImageButton ';
-const tableStyle = `
-.tox .tox-edit-area::before{
-                        border:none;
-                    }
+// const tableStyle = `
+// .tox .tox-edit-area::before{
+//                         border:none;
+//                     }
 
-                    img{
-                        max-width:580px;
-                    }blue {
-                            color: rgb(0, 130, 170) !important;
-                        }
-                        blue sup{
-                            color: rgb(0, 130, 170) !important;
-                        }
-                        blue sub{
-                            color: rgb(0, 130, 170) !important;
-                        }
-b span{
-                            font-weight: bold !important;
-                        }
-                        i span{
-                            font-style: italic !important; ;
-                        }
-                        sub span{
-                            vertical-align: sub;
-                        }
-                        sup span{
-                            vertical-align: sup;
-                        }
-                        sub {
-                            vertical-align: sub!important;
-                        }
-                        sup {
-                            vertical-align: sup !important;
-                        }
-                        span[style*="vertical-align: super"] {
-                            vertical-align: super !important;
-                        }
-                        span[style*="vertical-align: sub"] {
-                            vertical-align: sub !important;
-                        }
-                        table {
-                            border:0px !important;
-                            border-collapse: collapse; /* 去除单元格间隙 */
-                            width: auto;
-                            margin : 0 auto !important;
-                            table-layout: auto; /* 自动调整列宽 */
-                            text-align:left;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table td, table th {
-                            padding: 5px;
-                            text-align: !important;
-                            white-space: pre-wrap; /* 保留换行符并换行 */
-                            word-wrap: nomarl; /* 长单词自动换行 */
-                            word-break: nomarl;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table tbody tr td{
+//                     img{
+//                         max-width:580px;
+//                     }blue {
+//                             color: rgb(0, 130, 170) !important;
+//                         }
+//                         blue sup{
+//                             color: rgb(0, 130, 170) !important;
+//                         }
+//                         blue sub{
+//                             color: rgb(0, 130, 170) !important;
+//                         }
+// b span{
+//                             font-weight: bold !important;
+//                         }
+//                         i span{
+//                             font-style: italic !important; ;
+//                         }
+//                         sub span{
+//                             vertical-align: sub;
+//                         }
+//                         sup span{
+//                             vertical-align: sup;
+//                         }
+//                         sub {
+//                             vertical-align: sub!important;
+//                         }
+//                         sup {
+//                             vertical-align: sup !important;
+//                         }
+//                         span[style*="vertical-align: super"] {
+//                             vertical-align: super !important;
+//                         }
+//                         span[style*="vertical-align: sub"] {
+//                             vertical-align: sub !important;
+//                         }
+//                         table {
+//                             border:0px !important;
+//                             border-collapse: collapse; /* 去除单元格间隙 */
+//                             width: auto;
+//                             margin : 0 auto !important;
+//                             table-layout: auto; /* 自动调整列宽 */
+//                             text-align:left;
+//                             font-family:'Charis SIL' !important;
+//                             font-size: 14px !important;
+//                             mso-font-kerning: 1.0000pt !important;
+//                             line-height: 20px !important;
+//                             mos-line-height: 20px !important;
+//                         }
+//                         table td, table th {
+//                             padding: 5px;
+//                             text-align: !important;
+//                             white-space: pre-wrap; /* 保留换行符并换行 */
+//                             word-wrap: nomarl; /* 长单词自动换行 */
+//                             word-break: nomarl;
+//                             font-family:'Charis SIL' !important;
+//                             font-size: 14px !important;
+//                             mso-font-kerning: 1.0000pt !important;
+//                             line-height: 20px !important;
+//                             mos-line-height: 20px !important;
+//                         }
+//                         table tbody tr td{
 
-                            text-align:left !important;
-                            border-left:none !important;
-                            mso-border-left-alt:none !important;
-                            border-right:none !important;
-                            mso-border-right-alt:none !important;
-                            border-top:none;mso-border-top-alt:none !important;
-                            border-bottom:none !important;
-                            mso-border-bottom-alt:none !important;
+//                             text-align:left !important;
+//                             border-left:none !important;
+//                             mso-border-left-alt:none !important;
+//                             border-right:none !important;
+//                             mso-border-right-alt:none !important;
+//                             border-top:none;mso-border-top-alt:none !important;
+//                             border-bottom:none !important;
+//                             mso-border-bottom-alt:none !important;
 
-                            word-break: keep-all !important;
-                            // text-align: justify !important; // 设置两端对齐
+//                             word-break: keep-all !important;
+//                             // text-align: justify !important; // 设置两端对齐
 
+//                         }
+//                         table tr td p{
 
-                        }
-                        table tr td p{
+//                             text-align:left !important;
 
+//                             margin:0;
+//                             font-family:'Charis SIL' !important;
+//                             font-size: 14px !important;
+//                             mso-font-kerning: 1.0000pt !important;
+//                             line-height: 20px !important;
+//                             mos-line-height: 20px !important;
+//                         }
+//                         table span{
 
-                            text-align:left !important;
-
-                            margin:0;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table span{
-
-                         color:#000000;text-align:left !important;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table .color-highlight{
-                            color:rgb(0,130,170) !important;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table tr:first-child td {
-                            border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;
-                         }
-                        table tr:last-of-type {
-                            border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;;
-                        }
-                        table span blue {
-    color: rgb(0, 130, 170) !important;
-}
-                        `;
+//                          color:#000000;text-align:left !important;
+//                             font-family:'Charis SIL' !important;
+//                             font-size: 14px !important;
+//                             mso-font-kerning: 1.0000pt !important;
+//                             line-height: 20px !important;
+//                             mos-line-height: 20px !important;
+//                         }
+//                         table .color-highlight{
+//                             color:rgb(0,130,170) !important;
+//                             font-family:'Charis SIL' !important;
+//                             font-size: 14px !important;
+//                             mso-font-kerning: 1.0000pt !important;
+//                             line-height: 20px !important;
+//                             mos-line-height: 20px !important;
+//                         }
+//                         table tr:first-child td {
+//                             border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;
+//                          }
+//                         table tr:last-of-type {
+//                             border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;;
+//                         }
+//                         table span blue {
+//     color: rgb(0, 130, 170) !important;
+// }
+//                         `;
 import { TableUtils } from '@/common/js/TableUtils';
 import { debounce, throttle } from '@/common/js/debounce';
+import { tableStyle, commonWordStyle } from '@/utils/tinymceStyles';
 export default {
     name: 'tinymce',
     components: {},
@@ -1120,6 +1146,9 @@ export default {
         id: {
             type: String
         },
+        articleId: {
+            default: ''
+        },
         isPreview: {
             type: Boolean,
             default() {
@@ -1177,6 +1206,19 @@ export default {
     },
     data() {
         return {
+            bubbleVisible: false,
+            bubbleStyle: {
+                position: 'absolute',
+                left: '0px',
+                top: '0px',
+                zIndex: 2000
+            },
+            currentSelection: {
+                label: '',
+                mainId: '',
+                index: 0,
+                content: {}
+            },
             totalNumbers: 0,
             proofreadingLoading: false, // 总项数
             totalItems: 0, // 总项数
@@ -1266,6 +1308,9 @@ export default {
             hasChange: false,
             hasInit: false,
             selectedIds: [],
+
+            displayList: [],
+            currentTypeText: '',
             tinymceId: this.id || 'vue-tinymce-' + +new Date()
         };
     },
@@ -1277,9 +1322,7 @@ export default {
                     this.wordList = [...this.contentList];
                     this.initHtml();
                     this.selectedIds = [];
-
                     this.$forceUpdate();
-
                     if (this.isEditComment && this.activeName == 'proofreading') {
                         this.calcMarkers();
                     }
@@ -1304,53 +1347,39 @@ export default {
         sortedProofreadingList() {
             const order = [2, 1, 3];
             const rank = { 2: 0, 1: 1, 3: 2 };
-
             function cmp(a, b) {
                 var ra = rank[a.state] != null ? rank[a.state] : 999;
                 var rb = rank[b.state] != null ? rank[b.state] : 999;
                 if (ra !== rb) return ra - rb;
                 return (a.id || 0) - (b.id || 0);
             }
-
             var list = this.proofreadingList || [];
             return list.map(function (group) {
                 var data = group && group.data ? group.data : [];
                 return Object.assign({}, group, { data: data.slice().sort(cmp) });
             });
         }
-        //         selectedIds() {
-
-        //     return this.wordList.filter(item => item.checked).map(item => item.am_id);
-        //   }
-    },
-    updated() {
-        // 恢复子组件的滚动位置
-        // this.$refs.scrollDiv.scrollTop = this.scrollPosition;
     },
+    updated() {},
     mounted() {
         this.isShowPiZhu = false;
         this.typesettingType = 1;
         this.editors = {};
         this.wordList = [...this.contentList];
         this.initHtml();
-        console.log(this.wordList, '999');
         this.isShowEditComment();
-
         this.$nextTick(() => {
             window.renderMathJax(); // 主动触发 MathJax 渲染
             this.getCommentsData();
         });
-
         this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
     },
     activated() {
         // 主动触发 MathJax 渲染
-
         this.typesettingType = 1;
         this.editors = {};
         this.wordList = [...this.contentList];
         this.isShowEditComment();
-
         this.$nextTick(() => {
             window.renderMathJax(); // 主动触发 MathJax 渲染
             this.getCommentsData();
@@ -1372,6 +1401,7 @@ export default {
         // window.removeEventListener('resize', this.calcMarkers);
         if (this.resizeObs) this.resizeObs.disconnect();
         if (this.mutObs) this.mutObs.disconnect();
+
         // 页面销毁前清理定时器和事件监听器
     },
     destroy() {
@@ -1379,6 +1409,339 @@ export default {
         this.editors = {};
     },
     methods: {
+        handleGlobalClick(e) {
+            if (e && e.target.closest('.pMain')) {
+                return;
+            }
+            // 2. 如果当前有选中的文字，也不触发清空（防止选中文字瞬间消失）
+            const selection = window.getSelection();
+            if (selection && selection.toString().trim() !== '') {
+                return;
+            }
+            // 3. 只有真正点到了空白处，才清空
+            this.isMenuVisible = false;
+            this.currentData = {};
+            this.currentId = '';
+            this.bubbleVisible = false; // 同时隐藏气泡
+            this.clearActiveGlow(); // 清除高亮
+        },
+
+        // 辅助方法：清除发光边框
+        clearActiveGlow() {
+            document.querySelectorAll('.glowing-border').forEach((el) => el.classList.remove('glowing-border'));
+        },
+
+        handleMouseUp(e) {
+            const selection = window.getSelection();
+            // 1. 检查是否有文字选中
+            if (selection.isCollapsed || selection.toString().trim() === '') {
+                this.bubbleVisible = false;
+                return;
+            }
+            let selectedText = selection.toString().trim();
+            // 2. 核心逻辑：只抓取选区“起点”所在的段落
+            let anchorNode = selection.anchorNode;
+            if (anchorNode.nodeType === 3) anchorNode = anchorNode.parentElement;
+
+            // 向上寻找最近的带有 data-id 的主节点
+            const mainNode = anchorNode.closest('[data-id]') || e.target.closest('[data-id]');
+
+            if (mainNode) {
+                // --- A. 提取 ID、Index 等关键信息 ---
+                const id = mainNode.getAttribute('data-id');
+                const mainId = mainNode.getAttribute('main-id');
+                const index = parseInt(mainNode.getAttribute('data-index'));
+                const type = mainNode.getAttribute('type') || 'text';
+
+                // --- B. 强制单一赋值 ---
+                this.currentId = mainId || id;
+                this.currentIndex = index;
+                this.currentData = this.wordList[index];
+                this.menuType = type;
+
+                // --- C. 选区体验优化 (核心改进点) ---
+                const range = selection.getRangeAt(0);
+
+                // 逻辑：如果选区的结束点不在 mainNode 内部（说明选多了/跨段了）
+                if (!mainNode.contains(range.endContainer)) {
+                    const newRange = document.createRange();
+                    newRange.setStart(range.startContainer, range.startOffset);
+                    // 强制将终点设置在当前段落的末尾
+                    newRange.setEndAfter(mainNode.lastChild);
+
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+
+                    // 重新获取裁剪后的文本
+                    selectedText = selection.toString().trim();
+                }
+
+                // --- D. 记录选中的内容数据 ---
+                this.currentSelection = {
+                    label: selectedText,
+                    mainId: this.currentId,
+                    index: index,
+                    content: this.wordList[index] ? this.wordList[index].content : ''
+                };
+
+                // --- E. 业务初始化（拉取按钮数据） ---
+                if (!this.isPreview) {
+                    this.getProofreadingList([id]);
+                    this.getPList(id);
+                }
+
+                // --- F. 定位逻辑 (Fixed 定位) ---
+                const rect = selection.getRangeAt(0).getBoundingClientRect();
+                const bubbleHeight = 75;
+                const toolbarHeight = 125;
+
+                // 判断是否被顶部工具栏挡住
+                const isOverlappingToolbar = rect.top < toolbarHeight + bubbleHeight;
+                this.bubbleDirection = isOverlappingToolbar ? 'bottom' : 'top';
+                const finalTop = isOverlappingToolbar ? rect.bottom + 10 : rect.top - bubbleHeight - 5;
+
+                this.bubbleStyle = {
+                    position: 'fixed',
+                    left: `${rect.left + rect.width / 2}px`,
+                    top: `${finalTop}px`,
+                    zIndex: 9999,
+                    display: 'block'
+                };
+
+                this.isMenuVisible = true;
+                this.bubbleVisible = true;
+            }
+        },
+
+        convertWordListToHtml() {
+            let htmlString = '';
+            const mediaUrl = this.mediaUrl || ''; // 确保 mediaUrl 存在
+
+            this.wordList.forEach((item) => {
+                // 1. 计算外层容器类名 (同步 Vue 的 :class 逻辑)
+                let containerClass = 'pMain';
+                if (item.is_h1) containerClass += ' isTitleH1 pMainH1';
+                else if (item.is_h2) containerClass += ' isTitleH2';
+                else if (item.is_h3) containerClass += ' isTitleH3';
+
+                // 2. 构造公共属性 (用于编辑器识别和定位)
+                const commonAttrs = `
+            data-id="${item.am_id}" 
+            data-type="${item.type}" 
+            id="editor${item.am_id}" 
+            class="${containerClass}"
+            contenteditable="false"
+        `;
+
+                // 3. 构造 H 标题标识 (H1/H2/H3)
+                let hTagHtml = '';
+                if (item.is_h1) hTagHtml = '<span class="Htitle">H1</span>';
+                else if (item.is_h2) hTagHtml = '<span class="Htitle">H2</span>';
+                else if (item.is_h3) hTagHtml = '<span class="Htitle">H3</span>';
+
+                // 4. 根据类型生成具体内容
+                let contentHtml = '';
+
+                if (item.type == 1) {
+                    // --- 图片类型 (同步 MaxPicture 结构) ---
+                    contentHtml = `
+                <div ${commonAttrs} class="MaxPicture ${containerClass}">
+                    ${hTagHtml}
+                    <img src="${mediaUrl + item.image.url}" style="width: 80%; max-width: 580px;" />
+                    ${item.image.title ? `<div class="imageTitle">${item.image.title}</div>` : ''}
+                    ${item.image.note ? `<div class="imageNote">${item.image.note}</div>` : ''}
+                </div>`;
+                } else if (item.type == 2) {
+                    // --- 表格类型 (同步 table_Box 结构) ---
+                    let tableRows = '';
+
+                    // 处理表头
+                    if (item.table.tableHeader) {
+                        item.table.tableHeader.forEach((row) => {
+                            tableRows +=
+                                '<tr>' +
+                                row
+                                    .map((cell) => `<td rowspan="${cell.rowspan}" colspan="${cell.colspan}">${cell.text || ''}</td>`)
+                                    .join('') +
+                                '</tr>';
+                        });
+                    }
+
+                    // 处理表体 (带奇偶行颜色)
+                    if (item.table.tableContent) {
+                        item.table.tableContent.forEach((row) => {
+                            const isOdd = item.table.oddRowIds.includes(row.rowId);
+                            tableRows +=
+                                `<tr class="${isOdd ? 'oddColor' : ''}">` +
+                                row
+                                    .map((cell) => `<td rowspan="${cell.rowspan}" colspan="${cell.colspan}">${cell.text || ''}</td>`)
+                                    .join('') +
+                                '</tr>';
+                        });
+                    }
+
+                    contentHtml = `
+                <div ${commonAttrs} class="table_Box ${containerClass}">
+                    ${hTagHtml}
+                    ${item.table.title ? `<div class="tableTitle">${item.table.title}</div>` : ''}
+                    <table class="table-box" border="1" style="width:100%; border-collapse:collapse;">
+                        <tbody>${tableRows}</tbody>
+                    </table>
+                    ${item.table.note ? `<div class="tableNote">${item.table.note}</div>` : ''}
+                </div>`;
+                } else {
+                    // --- 普通文本类型 ---
+                    // 注意：这里建议直接用 item.content，如果需要高亮，请确保 highlightText 函数是纯字符串处理
+                    const textContent = item.content || '';
+                    contentHtml = `
+                <div ${commonAttrs}>
+                    ${hTagHtml}
+                    ${textContent}
+                </div>`;
+                }
+
+                htmlString += contentHtml;
+            });
+
+            return htmlString;
+        },
+        renderToTinyMCE() {
+            const fullHtml = this.convertWordListToHtml();
+            this.$nextTick(() => {
+                if (window.tinymce.get('wordHtml')) {
+                    window.tinymce.get('wordHtml').setContent(fullHtml);
+                }
+            });
+        },
+
+        initFigureAndTable() {
+            let existingStyle = document.getElementById('dynamic-toolbar-style');
+            if (existingStyle) existingStyle.remove();
+            const style = document.createElement('style');
+            style.id = 'dynamic-toolbar-style';
+            style.innerHTML = `
+            #dynamic-toolbar {
+            position: fixed;
+            display: none;
+            padding: 6px 12px;
+            background: #ffffff;
+            border: 1px solid rgb(0, 130, 170);
+            color: rgb(0, 130, 170);
+            border-radius: 4px;
+            box-shadow: 0 0 10px rgba(0, 130, 170, 0.5);
+            font-size: 12px;
+            z-index: 999999;
+            opacity: 0;
+            transition: opacity 0.15s ease-in-out;
+            pointer-events: auto;
+            flex-direction: row;
+            gap: 10px;
+            align-items: center;
+        }
+        #dynamic-toolbar.active { display: flex; opacity: 1; transform: translateY(-2px); }
+        .toolbar-btn { cursor: pointer; font-weight: bold; padding: 4px 4px; }
+        .toolbar-btn:hover { background: rgba(0, 130, 170, 0.1); border-radius: 3px; }
+    `;
+            document.head.appendChild(style);
+
+            const toolbar = document.getElementById('dynamic-toolbar') || document.createElement('div');
+            toolbar.id = 'dynamic-toolbar';
+            toolbar.innerHTML = `
+        <span class="toolbar-btn" id="dynamic-btn-jump">${this.$t('commonTable.jump')}</span>
+        <span style="color:#ccc">|</span>
+        <span class="toolbar-btn" id="dynamic-btn-edit-link">${this.$t('commonTable.editAssociation')}</span>
+    `;
+            if (!document.getElementById('dynamic-toolbar')) document.body.appendChild(toolbar);
+
+            let currentTarget = null;
+            let hideTimer = null;
+
+            // 2. 移入监听
+            document.addEventListener('mouseover', (e) => {
+                const tag = e.target.closest('myfigure, mytable');
+                if (tag) {
+                    clearTimeout(hideTimer);
+                    currentTarget = tag;
+                    const rect = tag.getBoundingClientRect();
+                    toolbar.style.left = `${rect.left- 40}px`;
+                    toolbar.style.top = `${rect.top - 35}px`;
+                    toolbar.classList.add('active');
+                }
+            });
+
+            // 3. 移出监听（带 500ms 缓冲防止断开）
+            document.addEventListener('mouseout', (e) => {
+                hideTimer = setTimeout(() => {
+                    const isHoveringTag = document.querySelector('myfigure:hover, mytable:hover');
+                    const isHoveringToolbar = toolbar.matches(':hover');
+                    if (!isHoveringTag && !isHoveringToolbar) {
+                        toolbar.classList.remove('active');
+                    }
+                }, 200);
+            });
+
+            toolbar.onmouseenter = () => clearTimeout(hideTimer);
+
+            // 4. 执行你提供的“正确跳转逻辑”
+            document.getElementById('dynamic-btn-jump').onclick = async (e) => {
+                e.stopPropagation();
+                if (!currentTarget) return;
+                const dataId = currentTarget.getAttribute('data-id');
+                const tagName = currentTarget.tagName.toLowerCase();
+                try {
+                    const targetItem = this.wordList.find((item) => item.ami_id == dataId || item.amt_id == dataId);
+                    const finalJumpId = targetItem ? targetItem.am_id : '';
+
+                    console.log(`[${tagName}] 匹配结果:`, { dataId, finalJumpId });
+
+                    if (finalJumpId) {
+                        // 执行系统原有的跳转函数
+                        await this.goToListComment({ am_id: finalJumpId });
+                        toolbar.classList.remove('active'); // 跳转后自动关闭
+                    } else {
+                        console.warn('未在 wordList 中找到对应的 am_id');
+                    }
+                } catch (err) {
+                    console.error('跳转执行失败:', err);
+                }
+            };
+            document.getElementById('dynamic-btn-edit-link').onclick = async (e) => {
+                e.stopPropagation();
+                if (!currentTarget) return;
+
+                const dataId = currentTarget.getAttribute('data-id');
+                const selectedText = currentTarget.innerText; // 获取标签内的文字回显
+
+                try {
+                    // 1. 查找目标项及其在列表中的索引
+                    const targetIndex = this.wordList.findIndex((item) => item.ami_id == dataId || item.amt_id == dataId);
+                    const targetItem = this.wordList[targetIndex];
+
+                    if (targetItem) {
+                        // 2. 回显数据到当前选择对象 (Data Population)
+                        this.currentSelection = {
+                            label: selectedText,
+                            selectedId: dataId,
+                            mainId: this.currentId,
+                            index: targetIndex,
+                            content: targetItem.content || ''
+                        };
+
+                        // 3. 触发回显后的打开逻辑
+                        console.log('Data restored for re-association:', this.currentSelection);
+                        this.handleOpenLink();
+
+                        // 4. 成功后关闭悬浮工具栏
+                        toolbar.classList.remove('active');
+                    } else {
+                        console.warn('Matching item not found in wordList for ID:', dataId);
+                    }
+                } catch (err) {
+                    console.error('Failed to restore association data:', err);
+                }
+            };
+        },
+
         initHtml() {
             this.wordList = [...this.wordList].map((item) => {
                 if (item.type === 2 && item.table && item.table.table_data) {
@@ -1395,6 +1758,141 @@ export default {
                 }
                 return item;
             });
+            this.initFigureAndTable();
+            //             this.$nextTick(() => {
+            //                 // 1. 必须先销毁旧实例，否则第二次打开绝对没内容
+            //                 if (window.tinymce.get('wordHtml')) {
+            //                     window.tinymce.remove('#wordHtml');
+            //                 }
+
+            //                 const contentHtml = this.convertWordListToHtml();
+
+            //                 window.tinymce.init({
+            //                     selector: '#wordHtml',
+            //                     valid_elements: '*[*]',
+            //                     extended_valid_elements: 'div[*],span[*],img[*],table[*],td[*],th[*]',
+
+            //                     // 2. 核心：防止 TinyMCE 把空内容的 div 给优化掉
+            //                     verify_html: false,
+
+            //                     // 3. 强制保留 contenteditable 属性
+            //                     allow_html_data_urls: true,
+
+            //                     // 4. 防止它自动把 div 转成 p
+            //                     forced_root_block: '',
+            //                     // --- 关键配置：模拟只读，不开启官方readonly ---
+            //                     plugins: 'quickbars autoresize  link',
+            //                     quickbars_selection_toolbar: 'myCustomBtn | bold italic',
+            //                     quickbars_insert_toolbar: false,
+            //                     mathjax: {
+            //                         // 配置 MathJax 用于渲染数学公式
+            //                         path: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
+            //                         config: 'TeX-AMS-MML_HTMLorMML'
+            //                     },
+            //                     // 样式：确保内容可见
+            //                     content_style: `*{font-size:14px;color:#000;}${tableStyle}${this.wordStyle}${commonWordStyle}
+            //                                 .item-group { cursor: pointer; transition: background 0.2s; }
+            //                         .item-group * { user-select: none !important; } /* 禁止内部所有东西被选中 */
+
+            //                                 .content-block { position: relative; padding: 10px; }
+            //                         /* 核心：让内部的文字和图片不可被单独选为片段，强制用户选中整个块 */
+            //                         .content-block img, .content-block .sub-info {
+            //                             user-select: none;
+            //                             pointer-events: none;
+            //                         }
+            //                         .glowing-border {
+            //                         border: 3px solid #006699d1;
+            //                         border-radius: 5px;
+            //                         padding: 4px;
+            //                         animation: glow 1.5s infinite alternate;
+            //                     }
+            //                     @keyframes glow {
+            //                         0% {
+            //                             box-shadow: 0 0 5px #006699d1;
+            //                         }
+            //                         50% {
+            //                             box-shadow: 0 0 20px #006699d1;
+            //                         }
+            //                         100% {
+            //                             box-shadow: 0 0 5px #006699d1;
+            //                         }
+            //                     }
+            // `,
+
+            //                     // 界面隐藏
+            //                     menubar: false,
+            //                     toolbar: false,
+            //                     statusbar: false,
+            //                     branding: false,
+
+            //                     setup: (editor) => {
+            //                         // 处理点击：强行选中整个原子块
+            //                         editor.on('mousedown', (e) => {
+            //                             const atomBlock = editor.dom.getParent(e.target, '.atom-group');
+            //                             if (atomBlock) {
+            //                                 // 阻止默认行为（防止光标闪现）
+            //                                 e.preventDefault();
+            //                                 // 强制选中整个节点
+            //                                 editor.selection.select(atomBlock);
+
+            //                                 // 视觉高亮
+            //                                 const all = editor.dom.select('.highlight-section');
+            //                                 editor.dom.removeClass(all, 'highlight-section');
+            //                                 editor.dom.addClass(atomBlock, 'highlight-section');
+
+            //                                 // 手动触发气泡栏（有时需要重新定位）
+            //                                 editor.fire('contextmenu');
+            //                             }
+            //                         });
+
+            //                         // 关键配置：防止点击图片时弹出自带的图片工具栏
+            //                         editor.on('click', (e) => {
+            //                             if (editor.dom.getParent(e.target, '.atom-group')) {
+            //                                 e.stopPropagation();
+            //                             }
+            //                         });
+            //                         editor.on('NodeChange', (e) => {
+            //                             // 1. 清除所有已有的高亮（防止多段高亮）
+            //                             const allNodes = editor.dom.select('.glowing-border');
+            //                             editor.dom.removeClass(allNodes, 'glowing-border');
+
+            //                             // 2. 找到当前光标所在的“段落级”容器
+            //                             // 我们查找最近的 p, div, tr 或 h1-h3 标签
+            //                             const activeNode = editor.dom.getParent(e.element, 'p,div,tr,h1,h2,h3');
+
+            //                             if (activeNode) {
+            //                                 editor.dom.addClass(activeNode, 'glowing-border');
+            //                             }
+            //                         });
+            //                         // 注册你的标注按钮
+            //                         editor.ui.registry.addButton('myCustomBtn', {
+            //                             text: '标注',
+            //                             onAction: () => {
+            //                                 const selectedText = editor.selection.getContent({ format: 'text' });
+            //                                 alert('选中了: ' + selectedText);
+            //                             }
+            //                         });
+
+            //                         // 核心：等初始化完成后再塞内容
+            //                         editor.on('init', () => {
+            //                             editor.setContent(contentHtml);
+            //                             // 如果还是不显示，尝试强制触发一次重绘
+            //                             editor.focus();
+            //                             setTimeout(() => {
+            //                                 window.renderMathJax('wordHtml'); // 初始化时渲染 MathJax
+            //                             }, 10);
+            //                         });
+
+            //                         // 拦截键盘，实现只读
+            //                         editor.on('keydown', (e) => {
+            //                             const isAllowed = (e.ctrlKey || e.metaKey) && [65, 67].includes(e.keyCode);
+            //                             if (!isAllowed) {
+            //                                 e.preventDefault();
+            //                             }
+            //                         });
+            //                     }
+            //                 });
+            //             });
         },
         processTableData(rawContent) {
             try {
@@ -1406,14 +1904,13 @@ export default {
 
                 // 2. 计算跨行 ID 和斑马纹 ID 集合
                 const { rowData, rowIds } = TableUtils.addRowIdToData(content);
-                console.log({ tableHeader: header, tableContent: rowData, oddRowIds: rowIds });
+
                 return {
                     tableHeader: header,
                     tableContent: rowData,
                     oddRowIds: rowIds // 存储用于变色的 ID 集合
                 };
             } catch (e) {
-                console.error('表格转换失败:', e);
                 return { tableHeader: [], tableContent: [], oddRowIds: [] };
             }
         },
@@ -1747,7 +2244,6 @@ export default {
             }
         },
         menuAction(action) {
-            console.log(`执行了：${action}`);
             switch (action) {
                 case 'addContent':
                     this.addContent();
@@ -1755,6 +2251,9 @@ export default {
                 case 'comment':
                     this.handleSelection();
                     break;
+                case 'link':
+                    this.handleOpenLink();
+                    break;
                 case 'proofreading':
                     this.handleAIProofreading();
                     break;
@@ -1798,6 +2297,7 @@ export default {
                 return;
             }
         },
+
         cacheSelection() {
             const selection = window.getSelection();
             if (!selection.rangeCount) {
@@ -1878,6 +2378,78 @@ export default {
             // **清空缓存**
             this.clearCache();
         },
+        // 接收组件传回的关联数据
+        onLinkConfirm(data) {
+            console.log('关联的对象：', data);
+            this.$emit('onLinkConfirm', data);
+            // 在这里处理后续逻辑，比如保存绑定关系
+        },
+        // 1. 修改获取图片方法
+        async getFigures() {
+            // 必须返回 api 的 promise
+            return this.$api
+                .post('api/Preaccept/getMainImages', {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    this.figures = res.data.list || [];
+                    return res; // 返回结果供 await 确认完成
+                });
+        },
+
+        async getTables() {
+            return this.$api
+                .post('api/Preaccept/getMainTables', {
+                    article_id: this.articleId
+                })
+                .then((res) => {
+                    this.tables = res.data.list || [];
+                    return res;
+                });
+        },
+
+        // 3. 核心调用逻辑
+        async handleOpenLink() {
+            // 1. 校验是否选中内容
+            const selectedText = this.currentSelection.label || '';
+            if (!selectedText) {
+                this.$message.error(this.$t('commonTable.selectComment'));
+                return;
+            }
+            // 2. 识别类型：不区分大小写
+            const text = selectedText.toLowerCase();
+            let requestTask = null;
+            if (text.includes('table')) {
+                this.currentTypeText = 'Table';
+                // 只定义获取 Table 的任务
+                requestTask = this.getTables();
+            } else {
+                // 默认或是包含 fig/figure
+                this.currentTypeText = 'Figure';
+                // 只定义获取 Figure 的任务
+                requestTask = this.getFigures();
+            }
+
+            try {
+                // 3. 执行对应的那个接口，并等待完成
+                await requestTask;
+                // 4. 数据到位后，根据类型给 displayList 赋值
+                // (注：也可以在 getTables/getFigures 内部直接赋给 displayList)
+                this.displayList = this.currentTypeText === 'Table' ? this.tables : this.figures;
+                // 5. 唤起弹窗
+                this.$nextTick(() => {
+                    if (this.$refs.mediaLinkRef) {
+                        this.$refs.mediaLinkRef.show(this.currentSelection);
+                    }
+                });
+
+                // 6. 清空缓存
+                this.clearCache();
+            } catch (error) {
+                console.error('获取媒体列表失败', error);
+                this.$message.error('加载数据失败');
+            }
+        },
 
         // **清空缓存**
         clearCache() {
@@ -1968,13 +2540,6 @@ export default {
         // 右侧批注列点击时，触发高亮左侧对应的批注
         // 右侧批注列点击时，触发高亮左侧对应的批注
         highlightLefProofreading(id, data, index) {
-            console.log('commentId at line 1384:', id);
-            // if (this.currentHighlightId === id) {
-            //     this.clearHighlight1();
-            //     this.currentHighlightId = null;
-            //     return;
-            // }
-
             this.clearHighlight1();
             const remarkElements = document.querySelectorAll(`[proofreading-id="${id}"]`);
             if (!remarkElements.length) return;
@@ -1996,7 +2561,10 @@ export default {
             this.currentHighlightId = id;
         },
         highlightLeftComment(commentId) {
-            console.log('commentId at line 1384:', commentId);
+            if (!commentId) {
+                return;
+            }
+
             // 清除之前的高亮
             this.clearHighlight();
 
@@ -2206,14 +2774,11 @@ export default {
                 valid_elements: '*[*]',
                 entity_encoding: 'raw', // 不编码 > 等字符
                 plugins: 'forecolor code paste table image resize  dragdrop',
-
                 menubar: false,
                 toolbar: _this.isEditComment ? ['commentAdd |delete|  level1 level2 level3|addRow|Edit'] : ['delete|addRow| Edit'],
                 end_container_on_empty_block: true,
                 content_css: 'default ',
                 content_style: `${tableStyle + this.wordStyle}
-
-
 `,
                 setup(ed) {
                     ed.on('init', function () {
@@ -2255,12 +2820,12 @@ export default {
         onProofSpanClick(e) {
             // 找最近的 .hoverProofreading（你生成高亮时加的那个 class）
             const el = e.target.closest('.hoverProofreading');
-            console.log('el at line 1616:', el);
+
             if (!el) return;
 
             // 取出你写入的属性
             const proofreadingId = el.getAttribute('proofreading-id');
-            console.log('proofreadingId at line 1621:', proofreadingId);
+
             const amId = el.getAttribute('am-id');
             const annotationId = el.getAttribute('data-annotation-id');
 
@@ -2285,14 +2850,8 @@ export default {
                 table_resize_bars: true,
                 image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
                 valid_elements: '*[*]',
-
                 plugins: 'forecolor code paste table image resize ',
-                content_style: `${tableStyle + this.wordStyle}
-
-
-
-
-                                      `,
+                content_style: `${tableStyle + this.wordStyle}`,
                 menubar: false,
                 toolbar: _this.isEditComment ? ['commentAdd |delete| addRow|Edit'] : ['delete|addRow| Edit'],
                 end_container_on_empty_block: true,
@@ -2372,9 +2931,7 @@ export default {
                 valid_elements: '*[*]',
                 image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
                 plugins: 'forecolor code paste table image resize ',
-                content_style: `${tableStyle + this.wordStyle}
-
-                                `,
+                content_style: `${tableStyle + this.wordStyle}`,
                 entity_encoding: 'raw', // 不编码 > 等字符
                 menubar: false,
                 toolbar: _this.isEditComment ? ['commentAdd |delete| addRow|Edit'] : ['delete| addRow|Edit'],
@@ -2444,37 +3001,52 @@ export default {
             });
         },
 
-        initializeEditor: throttle(function (event, id, type, data, index) {
-            console.log('event at line 1598:', event);
-            console.log('id at line 1598:', id);
-            console.log('type at line 1598:', type);
-            console.log('data at line 1598:', data);
-            console.log('index at line 1598:', index);
+        initializeEditor: throttle(async function (event, id, type, data, index) {
+            var that = this;
             this.clearHighlight();
             this.selectedIds = [];
-            // this.menuPosition.x = event.clientX+20;
-            // this.menuPosition.y = event.clientY+20;
-            const menuWidth = 180; // 你的菜单宽度（按实际调整）
-            const menuHeight = 275; // 你的菜单高度（按实际调整）
-            let x = event.clientX + 20;
-            let y = event.clientY + 20;
-
-            // 判断右侧是否越界
-            if (x + menuWidth > window.innerWidth) {
-                x = window.innerWidth - menuWidth - 10; // 留点空隙
+            // const target = event.target;
+            // const customTag = target.closest('myfigure, mytable');
+            // if (customTag) {
+            //     const dataId = customTag.getAttribute('data-id');
+            //     const tagName = customTag.tagName.toLowerCase();
+            //     const targetItem = this.wordList.find((item) => item.ami_id == dataId || item.amt_id == dataId);
+            //     console.log('targetItem:', targetItem);
+            //     const finalJumpId = targetItem ? targetItem.am_id : '';
+            //     console.log(`[${tagName}] 匹配结果:`, { dataId, finalJumpId });
+            //     if (finalJumpId) {
+            //         setTimeout(async () => {
+            //             try {
+            //                 await this.goToListComment({ am_id: finalJumpId });
+            //             } catch (e) {
+            //                 console.error('跳转执行失败:', e);
+            //             }
+            //         }, 10);
+            //     }
+            //     return; // 拦截，不打开编辑器菜单
+            // }
+            const menuWidth = 180;
+            const menuHeight = 275;
+            let x = event.clientX;
+            let y = event.clientY;
+            if (x + menuWidth + 20 > window.innerWidth) {
+                x = x - menuWidth - 10;
+            } else {
+                x = x + 10;
             }
-
-            // 判断底部是否越界
-            if (y + menuHeight > window.innerHeight) {
-                y = event.clientY - menuHeight - 10; // 改为往上弹
+            if (y + menuHeight + 20 > window.innerHeight) {
+                y = y - menuHeight - 10;
+            } else {
+                y = y + 10;
             }
-
-            this.menuPosition.x = x;
-            this.menuPosition.y = y;
-
+            this.bubbleStyle = {
+                position: 'fixed',
+                left: `${x}px`,
+                top: `${y}px`,
+                zIndex: 3000,
+                display: 'block'
+            };
             this.menuType = type; // 设置菜单类型，根据点击区域不同显示不同菜单
-            // this.currentId=currentId;
-
             this.wordList.forEach((item, index) => {
                 item.checked = false;
             });
@@ -2595,9 +3167,27 @@ export default {
                     this.viewportTop = Math.round(this.mapRange(sc.scrollTop, 0, scrollRange, 0, vpRange));
                 }
 
-                this.isMenuVisible = false;
-                this.currentId = null;
+                // 1. 如果气泡当前是显示的，直接隐藏
+                if (this.bubbleVisible) {
+                    this.bubbleVisible = false;
+                }
+
+                // 2. 如果菜单面板是显示的，也建议隐藏（防止错位）
+                if (this.isMenuVisible) {
+                    this.isMenuVisible = false;
+                }
+
+                // 3. 清除当前选中 ID（这会通过数据驱动自动移除 glowing-border 高亮）
+                // 如果你希望滚动时保持高亮，可以不清空这一行
+                this.currentId = '';
                 this.currentData = {};
+
+                // 4. 清除浏览器原生的文字选中蓝色区域
+                // 这样滚动时就不会有一大片蓝色的选区跟着走，视觉上更干净
+                const selection = window.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                }
                 // const scrollTop = scrollDiv.scrollTop; // 获取垂直滚动距离
                 this.scrollPosition = this.$refs.scrollDiv.scrollTop;
                 localStorage.setItem('scrollPosition', this.scrollPosition);
@@ -2985,7 +3575,7 @@ export default {
             Promise.all(requests)
                 .then((resArr) => {
                     this.proofreadingLoading = false;
-                    console.log('所有结果：', resArr);
+
                     this.proofreadingList = resArr.filter((e) => e.data.length > 0);
                     if (this.proofreadingList.length > 0) {
                         this.currentSelectProofreadingId = this.proofreadingList[0].am_id;
@@ -3006,19 +3596,14 @@ export default {
 
                 divs.forEach((div) => {
                     const rect = div.getBoundingClientRect();
-                    // 检查 div 是否部分可见（只要它的任何一部分在视口内）
+
                     if (rect.top < window.innerHeight && rect.bottom > 0) {
-                        // console.log('visibleDivsAll.push at line 1889:', visibleDivsAll);
-                        // console.log('visibleDivsAll.push at line 1889:', visibleDivsAll);
-                        // 判断 div 是否有 remark 属性
                         if (div.hasAttribute('remark')) {
-                            // 获取 remark 属性的值（如果需要）
                             const remarkValue = div.getAttribute('remark');
 
                             if (remarkValue == 1) {
                                 visibleDivs.push(div.id.slice(6)); // 假设 id 以 "div-" 开头
                             }
-                            // 如果有 remark 属性，将该 div 的 id 加入 visibleDivs
                         }
                     }
                 });
@@ -3038,7 +3623,7 @@ export default {
             if (localStorage.getItem('U_role')) {
                 var identity = localStorage.getItem('U_role');
                 const screenWidth = window.innerWidth;
-const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏给 310
+                const dynamicWidth = screenWidth > 1600 ? 500 : 400;
                 if (identity.includes('editor')) {
                     this.isEditComment = true;
                     this.isShowPiZhu = false;
@@ -3105,6 +3690,7 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
             this.$nextTick(() => {
                 const container = document.querySelector('.word-container');
                 const section = container.querySelector(`[main-id="${mainId}"]`);
+                console.log('mainId at line 380:', section);
                 if (!section || !container) return;
 
                 // 计算目标位置（同之前的逻辑）
@@ -3295,6 +3881,7 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
     },
     destroyed() {
         this.destroyTinymce();
+        // document.removeEventListener('selectionchange', this.handleSelectionUpdate);
     }
 };
 </script>
@@ -3451,7 +4038,6 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
     list-style: none;
 }
 .comment-item::before {
-
 }
 .commentOperateItem {
     display: flex;
@@ -3555,27 +4141,26 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
 }
 .isTitleH2 {
     position: relative;
-    background-color: #dbebfc54;
+    /* background-color: #dbebfc54; */
 }
 .isTitleH3 {
     position: relative;
-    background-color: #dbebfc54;
+    /* background-color: #dbebfc54; */
 }
 .glowing-border {
-    border: 3px solid #006699d1;
-    border-radius: 5px;
-    padding: 4px;
-    animation: glow 1.5s infinite alternate;
+    border: 2px solid #409eff; /* 使用标准 ElementUI 主色 */
+    border-radius: 6px;
+    padding: 0px;
+    animation: glow-blue 1.5s infinite alternate ease-in-out;
 }
-@keyframes glow {
+@keyframes glow-blue {
     0% {
-        box-shadow: 0 0 5px #006699d1;
-    }
-    50% {
-        box-shadow: 0 0 20px #006699d1;
+        box-shadow: 0 0 5px rgba(64, 158, 255, 0.2);
+        border-color: rgba(64, 158, 255, 0.5);
     }
     100% {
-        box-shadow: 0 0 5px #006699d1;
+        box-shadow: 0 0 15px rgba(64, 158, 255, 0.6), inset 0 0 5px rgba(64, 158, 255, 0.1);
+        border-color: rgba(64, 158, 255, 1);
     }
 }
 
@@ -3644,10 +4229,11 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
     padding: 10px;
     background: rgba(255, 255, 255, 0.98);
     border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+
     border: 1px solid #e5e6eb;
     z-index: 10000;
     min-width: 320px;
+    box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), 0 4px 8px 0 rgba(34, 47, 62, 0.15);
 }
 
 /* 每一行的样式 */
@@ -3698,6 +4284,9 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
 .comment-feat {
     color: #f56c6c;
 }
+.menu-link {
+    color: #2b81ef;
+}
 .danger {
     color: red;
 }
@@ -3728,7 +4317,7 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
 }
 ::v-deep .rightTabs .el-tabs__item {
     height: 46px !important;
-    line-height: 46px !important;
+    line-height: 36px !important;
 }
 .proofreading_content {
     white-space: pre-wrap; /* 保留空格和换行，自动换行 */
@@ -3810,21 +4399,29 @@ const dynamicWidth = screenWidth > 1600 ? 500 : 310; // 大屏给 400，小屏
     /* border-radius: 4px; */
     /* background-color: #fff; */
     /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
-    position: fixed;
-    top: 40px;
+    position: absolute;
+    top: 0px;
     box-sizing: border-box;
-    right: 24px;
+    right: 0px;
     z-index: 2;
 }
 
 .info-text {
     margin-right: 10px;
     color: #606266;
-  width: 100%;
+    width: 100%;
     cursor: pointer;
-    display: inline-block;height: 20px;line-height: 20px;font-size: 11px;
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    font-size: 11px;
+    position: absolute;
+    top: 26px;
+    left: 0px;
+}
+/deep/.rightTabs .first-pane-width {
+    width: 200px; /* 规定第一个面板内容的宽度 */
 }
-
 .arrow-group {
     display: flex;
     flex-direction: column;
@@ -3972,4 +4569,74 @@ wmath {
 .select-main-id .el-checkbox__input {
     position: absolute !important;
 }
+/* 修改 word.vue 的 style 部分 */
+.wps-two-layer-bar {
+    position: fixed; /* 改用 fixed 配合 getBoundingClientRect */
+    transform: translate(-50%, -100%); /* 确保中心对齐文字 */
+    transition: opacity 0.2s, transform 0.2s; /* 增加平滑过渡 */
+    pointer-events: auto;
+
+    background: #ffffff;
+    border-radius: 6px;
+    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15); /* 更有层次感的阴影 */
+    border: 1px solid #ddd;
+    padding: 8px;
+    z-index: 3000;
+}
+.selection-bubble {
+    transform: translateX(-50%);
+    background: #ffffff;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    padding: 4px;
+    transition: opacity 0.2s;
+}
+
+.bubble-arrow {
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #ffffff;
+}
+
+/* 确保文字选中时辅助图标不被选中 */
+.Htitle,
+.select-main-id,
+.proofreading-num {
+    user-select: none;
+}
+
+::v-deep myfigure,
+::v-deep mytable {
+    pointer-events: auto !important; /* 强制允许鼠标点击 */
+    display: inline-block;
+    cursor: pointer;
+    color: rgb(0, 130, 170) !important;
+    text-shadow: 0 0 3px #09c2fb, 0 0 4px rgba(0, 130, 170, 0.3);
+}
+
+::v-deep myfigure *,
+::v-deep mytable * {
+    color: inherit !important;
+    text-shadow: inherit !important;
+    background: transparent !important; /* 防止内部标签背景干扰 */
+}
+
+@keyframes blueGlow {
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.9;
+    }
+    50% {
+        transform: scale(1.02);
+        opacity: 1;
+    }
+}
 </style>
diff --git a/src/main.js b/src/main.js
index 5e0c86b..5a0ab98 100644
--- a/src/main.js
+++ b/src/main.js
@@ -195,6 +195,7 @@ const components = {
   'common-word-html': () => import('@/components/page/components/table/wordHtml.vue'),
   'common-word-html-type-setting': () => import('@/components/page/components/table/wordHtmlTypesetting.vue'),
   'common-drag-word': () => import('@/components/page/components/table/dragWord.vue'),
+  'common-media-link-dialog': () => import('@/components/page/components/table/MediaLinkDialog.vue'),
 };
 
 Object.keys(components).forEach(key => {
diff --git a/src/utils/tinymceStyles.js b/src/utils/tinymceStyles.js
new file mode 100644
index 0000000..3adc6f8
--- /dev/null
+++ b/src/utils/tinymceStyles.js
@@ -0,0 +1,269 @@
+export const tableStyle = `
+.word-img-placeholder {
+    background: #f0f0f0 ;
+}
+*{
+    font-family: 'Charis SIL';
+}
+b span{
+    font-weight: bold !important;
+}
+i span{
+    font-style: italic !important; ;
+}
+sub span{
+    vertical-align: sub;
+}
+sup span{
+    vertical-align: sup;
+}
+sub {
+    vertical-align: sub!important;
+}
+sup {
+    vertical-align: sup !important;
+}
+span[style*="vertical-align: super"] {
+    vertical-align: super !important;
+}
+span[style*="vertical-align: sub"] {
+    vertical-align: sub !important;
+}
+table {
+    border:0px !important;
+    border-collapse: collapse; /* 去除单元格间隙 */
+    width: auto;
+    margin : 0 auto !important;
+    table-layout: auto; /* 自动调整列宽 */
+    text-align:left;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table td, table th {
+    padding: 5px;
+    text-align:left !important;
+    white-space: pre-wrap; /* 保留换行符并换行 */
+    word-wrap: break-word; /* 长单词自动换行 */
+    word-break: break-word;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table tbody tr td{
+    text-align:left !important;
+    border-left:none !important;
+    mso-border-left-alt:none !important;
+    border-right:none !important;
+    mso-border-right-alt:none !important;
+    border-top:none;mso-border-top-alt:none !important;
+    border-bottom:none !important;
+    mso-border-bottom-alt:none !important;
+    border:1px dashed #dcdfe6 !important;
+    border-left:1px dashed #dcdfe6 !important;
+    border-right:1px dashed #dcdfe6 !important;
+    word-break: keep-all !important;
+    // text-align: justify !important; // 设置两端对齐
+
+
+}
+table tr td p{
+
+   text-align:left !important;
+
+    margin:0;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table span{
+
+ color:#000000;text-align:left !important;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table .color-highlight{
+    color:rgb(0,130,170) !important;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table tr:first-child td {
+    border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;
+ }
+table tr:last-of-type {
+    border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;;
+}
+table span blue {
+color: rgb(0, 130, 170) !important;
+}blue {
+color: rgb(0, 130, 170) !important;
+}
+blue sup {
+color: rgb(0, 130, 170) !important;
+}
+blue sub {
+color: rgb(0, 130, 170) !important;
+}
+.wordTableHtml table tr.table-header-row:nth-of-type(2) td {
+border-bottom: 1px solid #000 !important;
+}
+mjx-container {
+font-size: 14px !important;
+;
+}
+wmath{
+width: 100%;
+display: block;
+display: flex;
+}
+Info{
+color:#ff8f25;
+}
+`;
+
+/**
+ * 提取自编辑器 template 节点的公共样式
+ * 包含：基础布局、H1-H3 标识、校对状态、图片/表格特定样式
+ */
+export const commonWordStyle  = `
+    /* 1. 基础段落与容器 */
+    .pMain {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        min-height: 22px;
+        font-size: 14px;
+        line-height: 22px;
+        font-family: 'Charis SIL', serif;
+        text-align: justify;
+        color: #606266;
+        position: relative;
+    }
+
+    /* H1 标题容器块 */
+    .pMainH1 {
+        background: rgb(222, 235, 247);
+        color: rgb(210, 90, 90) !important;
+        text-align: center !important;
+        border-radius: 10px;
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 15px !important;
+        margin-bottom: 10px !important;
+        box-shadow: rgba(222, 234, 247, 0.6) 0px 4px 4px;
+    }
+.pMainH1 *{
+    color: rgb(210, 90, 90) !important;
+    font-weight: bold;
+}
+.pMainH1 *.pMain  {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    line-height: 30px !important;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold !important;
+}
+.pMainH1 * .pMain i {
+    font-style: normal !important;
+}
+    /* 选中/激活时的发光边框 */
+    .glowing-border {
+        border: 3px solid #006699d1;
+        border-radius: 5px;
+        padding: 4px;
+        animation: glow-flash 1.5s infinite alternate;
+    }
+
+    @keyframes glow-flash {
+        0% { box-shadow: 0 0 5px #006699d1; }
+        100% { box-shadow: 0 0 20px #006699d1; }
+    }
+
+    /* 2. 状态标识样式 */
+    .proofreading-num, .Proofreadingstatus {
+        position: absolute;
+        right: 6px;
+        z-index: 10;
+        cursor: pointer;
+    }
+
+    .proofreading-num {
+        background: #e61a12;
+        color: #fff;
+        border-radius: 20px;
+        padding: 0px 6px;
+        font-size: 12px;
+    }
+
+    .Proofreadingstatus {
+        background-color: #fff;
+        border-radius: 16px;
+        font-size: 16px;
+        right: 2px;
+    }
+
+    .isRemark {
+        display: flex;
+        align-items: center;
+        z-index: 2;
+        cursor: pointer;
+    }
+
+    .isRemark span {
+        font-weight: bold;
+        background-color: #fef0f0;
+        color: #f56c6c;
+        padding: 0 5px;
+        font-size: 12px;
+    }
+
+    /* 3. 内容类型样式 (图片/表格) */
+    .MaxPicture { text-align: center !important; }
+    .myeditablediv img { width: 80% !important; max-width: 580px; margin-bottom: 10px; }
+    
+    .imageTitle, .tableTitle { 
+        color: rgb(210, 90, 90) !important; 
+        font-weight: bold; 
+        text-align: center; 
+        margin-bottom: 10px; 
+        display: block;
+    }
+
+    .table_Box { padding: 8px 15px; }
+    .table-box { width: 100%; border-collapse: collapse; text-align: center; }
+    .table-box td { border: 1px solid #000; }
+    .oddColor td { background: rgb(250, 231, 232); }
+
+    /* 4. 辅助层级标识 (H1/H2/H3 侧边圆圈) */
+    .Htitle {
+        color: #4d99f1;
+        background-color: #dbebfca6;
+        border-radius: 50%;
+        font-weight: bold;
+        position: absolute;
+        line-height: 24px;
+        font-size: 16px;
+        left: -30px;
+        top: 0px;
+        text-align: center;
+        width: 24px;
+        height: 24px;
+    }
+    
+    .select-main-id { position: absolute !important; }
+`;
+
+
+