From 33709c76bee88d9c5a9a30bb5a78bbd4aba1d697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Fri, 27 Dec 2024 12:32:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 .../pendingPayment/PayPalButton copy.vue      |  68 +++
 .../pendingPayment/PayPalButton.vue           |  91 +++-
 src/components/page/components/table/word.vue | 462 +++++++++---------
 4 files changed, 375 insertions(+), 248 deletions(-)
 create mode 100644 src/components/page/components/pendingPayment/PayPalButton copy.vue

diff --git a/package.json b/package.json
index f6dac83..6d7f01f 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "vue": "^2.6.10",
     "vue-cropperjs": "^3.0.0",
     "vue-i18n": "^8.10.0",
-    "vue-paypal-checkout": "^3.2.0",
+    "vue-paypal-checkout": "latest",
     "vue-pdf": "^4.3.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
diff --git a/src/components/page/components/pendingPayment/PayPalButton copy.vue b/src/components/page/components/pendingPayment/PayPalButton copy.vue
new file mode 100644
index 0000000..7649284
--- /dev/null
+++ b/src/components/page/components/pendingPayment/PayPalButton copy.vue	
@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <PayPal
+            currency="USD"
+            :client="paypal"
+            :amount="amount"
+            :env="env"
+            @payment-authorized="onPaymentSuccess"
+            @payment-completed="onPaymentError"
+        >
+        </PayPal>
+    </div>
+</template>
+
+<script>
+import PayPal from 'vue-paypal-checkout';
+export default {
+    data() {
+        return {
+            paypal: {
+                sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
+                production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
+            },
+            // myItems: [
+            //     {
+            //         name: 'hat',
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     },
+            //     {
+            //         name: 'handbag',
+            //         // description: "Black handbag.",
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     }
+            // ],
+            amount: '9.99', // Amount to be paid
+            env: 'sandbox'
+        };
+    },
+    components: {
+        PayPal
+    },
+    methods: {
+        onPaymentSuccess(payment) {
+            try {
+                console.log('Payment successful!', payment);
+                this.$emit('payment-success', payment);
+            } catch (error) {
+                console.error('Error in onPaymentSuccess callback:', error);
+            }
+        },
+
+        onPaymentError(error) {
+            try {
+                console.error('Payment error:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in onPaymentError callback:', err);
+            }
+        }
+    }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/page/components/pendingPayment/PayPalButton.vue b/src/components/page/components/pendingPayment/PayPalButton.vue
index c7e1788..41c3270 100644
--- a/src/components/page/components/pendingPayment/PayPalButton.vue
+++ b/src/components/page/components/pendingPayment/PayPalButton.vue
@@ -1,24 +1,35 @@
 <template>
     <div>
         <PayPal
-           
             currency="USD"
             :client="paypal"
             :amount="amount"
             :env="env"
-            
-            :on-success="onPaymentSuccess"
-            :on-error="onPaymentError"
+            :commit="true"
+            @payment-authorized="onPaymentSuccess"
+            @payment-completed="onPaymentCompleted"
+            @payment-cancelled="onPaymentCancel"
+            locale="en_US"
+            :button-style="myStyle"
+            :token="paymentToken"
+            :paypal-button="paypalButton"
         >
         </PayPal>
     </div>
 </template>
-
+<!-- paymentID= "PAY-3L661344P7749433KLD2R5ZQ" -->
 <script>
 import PayPal from 'vue-paypal-checkout';
 export default {
     data() {
         return {
+            myStyle: {
+                label: 'checkout',
+                size: 'responsive',
+                shape: 'pill',
+                color: 'blue'
+            },
+            paymentToken: '2S842212TP193105C', // 存储自定义的 token
             paypal: {
                 sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
                 production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
@@ -26,7 +37,6 @@ export default {
             // myItems: [
             //     {
             //         name: 'hat',
-
             //         quantity: '1',
             //         price: '5',
             //         currency: 'USD'
@@ -46,17 +56,68 @@ export default {
     components: {
         PayPal
     },
+    created() {
+        // this.fetchCustomToken();
+    },
     methods: {
-        onPaymentSuccess(payment) {
-          alert(payment)
-            console.log('Payment successful!', payment);
-            // Handle successful payment here
-            this.$emit('payment-success', payment);
+        // 配置 PayPal 按钮（传递自定义的 token）
+        paypalButton(data, actions) {
+            return actions.payment.create({
+                transactions: [
+                    {
+                        amount: {
+                            total: '20.00',
+                            currency: 'USD'
+                        },
+                        custom: this.paymentToken // 将自定义 token 作为 custom 数据传递
+                    }
+                ]
+            });
         },
-        onPaymentError(error) {
-            console.error('Payment error:', error);
-            // Handle payment error here
-            this.$emit('payment-error', error);
+        async fetchCustomToken() {
+            try {
+                this.customToken = '2S842212TP193105C'; // 假设返回的 JSON 里有 token 字段
+            } catch (error) {}
+        },
+
+        onPaymentSuccess(payment) {
+            try {
+                console.log('Payment successful Button!', payment);
+                // this.$emit('payment-success', payment);
+
+                // const token = this.paymentToken;
+
+                // // 使用token进行支付处理
+                // paypal.payment.execute(token, (error, payment) => {
+                // 	console.log('payment at line 73:', payment)
+                //     if (error) {
+                //         // 处理错误
+                //         console.error('Error in onPaymentSuccess callback:', error);
+                //     } else {
+                //         // 处理支付成功的情况
+                //         console.log('Payment successful Button!', payment);
+                //     }
+                // });
+            } catch (error) {
+                console.error('Error in onPaymentSuccess callback:', error);
+            }
+        },
+
+        onPaymentCompleted(error) {
+            try {
+                console.error('Payment paymentCompleted Button:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in paymentCompleted callback:', err);
+            }
+        },
+        onPaymentCancel(error) {
+            try {
+                console.error('Payment cancel Button:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in onPaymentCancel callback:', err);
+            }
         }
     }
 };
diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue
index b7796d7..86373b8 100644
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -249,7 +249,7 @@ export default {
         isShowEditComment() {
             if (localStorage.getItem('U_role')) {
                 var identity = localStorage.getItem('U_role');
-                
+
                 if (identity.includes('editor')) {
                     this.isEditComment = true;
                 } else {
@@ -386,256 +386,254 @@ export default {
                 content_css: 'default',
 
                 setup(ed) {
-                    if(!_this.readonly){
-ed.on('click', function (e) {
-                        // 判断点击的是否是目标元素
-                        const target = e.target;
-                        console.log('target at line 351:', target);
-                        
-                        if (target.classList.contains('isRemarkIcon')) {
-                            _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'; // 当编辑器获取焦点时，移除焦点框
+                    if (!_this.readonly) {
+                        ed.on('click', function (e) {
+                            // 判断点击的是否是目标元素
+                            const target = e.target;
+                            console.log('target at line 351:', target);
+
+                            if (target.classList.contains('isRemarkIcon')) {
+                                _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('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 = ''; // 清除上一个高亮的标签样式
+                        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);
 
-                            // 设置当前节点的背景色和边框
-                            node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
-                            node.style.border = '2px dashed rgb(0 102 153 / 50%)';
+                            const selection = ed.selection;
+                            const selectedNode = selection.getNode(); // 获取选中的节点
+                            console.log('1899', selectedNode); // 查看光标位置的节点类型
 
-                            // 更新选中的节点
-                            var currentNode = node;
+                            // 向上遍历直到找到带有 main-id 属性的节点
+                            const findParentWithMainId = (node) => {
+                                while (node) {
+                                    if (node.hasAttribute && node.classList.contains('pMain')) {
+                                        return node; // 找到并返回该节点
+                                    }
+                                    node = node.parentNode; // 向上遍历父节点
+                                }
+                                return null; // 如果没有找到，返回 null
+                            };
 
-                            // 显示删除按钮
-                            showDeleteButton(currentNode);
-
-                            // 更新 lastTag
-                            _this.lastTag = node;
-                        } else {
-                            // 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
+                            // 查找选中节点的父节点，直到找到带有 main-id 属性的节点
+                            const nodeWithMainId = findParentWithMainId(selectedNode);
+                            console.log('at line 395:', nodeWithMainId);
+                            const dataId = nodeWithMainId.getAttribute('main-id');
+                            event.preventDefault();
                             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'));
+                            // 获取拖动的数据
+                            _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();
 
-                        // 创建批注按钮
-                        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; // 清空按钮引用
+                            // 向上查找包含的节点直到找到合适的标签
+                            if (node && !node.classList.contains('pMain')) {
+                                node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
                             }
-                            });
 
-                            wordButtonContainer.appendChild(commentButton);
-                        }
+                            if (node && node.classList.contains('pMain')) {
+                                // 清除上一个高亮的节点样式
+                                if (_this.lastTag && _this.lastTag !== node) {
+                                    _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
+                                    _this.lastTag.style.border = '';
+                                }
 
-                        wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
-                        // 将容器添加到页面中
-                        document.body.appendChild(wordButtonContainer);
-                    }
-                    ed.on('mousedown', function (e) {
-                        // 检查点击的位置是否是删除按钮或选中的 <p> 标签
-                        if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
+                                // 设置当前节点的背景色和边框
+                                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) => {