perf: 优化office右上角菜单按钮重叠的问题

docker/office/resources/api/documents/api.js

@@ -10,6 +10,28 @@
     try {
         window.localStorage.removeItem('ui-theme-id')
     } catch (e) {}
+    //
+    window._toolbarClick = function(el, type) {
+        window.parent.postMessage({
+            source: 'onlyoffice',
+            act: type,
+            rect: el.getBoundingClientRect()
+        }, "*");
+    };
+    window._toolbarInter = setInterval(function() {
+        if (typeof $ === "function") {
+            var toolbar = $("#toolbar");
+            if (toolbar.find(".hedset").length > 0 && toolbar.find(".hedico").length === 0) {
+                var linkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPkxpbms8L3RpdGxlPjxwYXRoIGQ9Ik0yMDggMzUyaC02NGE5NiA5NiAwIDAxMC0xOTJoNjRNMzA0IDE2MGg2NGE5NiA5NiAwIDAxMCAxOTJoLTY0TTE2My4yOSAyNTZoMTg3LjQyIiBmaWxsPSJub25lIiBzdHJva2U9IiNmNWY1ZjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzNiIvPjwvc3ZnPg==';
+                var historySvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPlRpbWVyPC90aXRsZT48cGF0aCBkPSJNMTEyLjkxIDEyOEExOTEuODUgMTkxLjg1IDAgMDA2NCAyNTRjLTEuMTggMTA2LjM1IDg1LjY1IDE5My44IDE5MiAxOTQgMTA2LjIuMiAxOTItODUuODMgMTkyLTE5MiAwLTEwNC41NC04My41NS0xODkuNjEtMTg3LjUtMTkyYTQuMzYgNC4zNiAwIDAwLTQuNSA0LjM3VjE1MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjVmNWY1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiLz48cGF0aCBkPSJNMjMzLjM4IDI3OC42M2wtNzktMTEzYTguMTMgOC4xMyAwIDAxMTEuMzItMTEuMzJsMTEzIDc5YTMyLjUgMzIuNSAwIDAxLTM3LjI1IDUzLjI2IDMzLjIxIDMzLjIxIDAgMDEtOC4wNy03Ljk0eiIgZmlsbD0iI0Y1RjVGNSIvPjwvc3ZnPg==';
+                toolbar.find(".hedset").eq(0).before('<div class="hedico" style="display:flex;flex-direction:row;align-items:center;justify-content:center">' +
+                    '<button onclick="_toolbarClick(this, \'link\')" type="button" class="btn btn-header"><div style="background-image:url(' + linkSvg + ');background-size:19px;background-position:center;background-repeat:no-repeat;height:100%"></div></button>' +
+                    '<button onclick="_toolbarClick(this, \'history\')" type="button" class="btn btn-header"><div style="background-image:url(' + historySvg + ');background-size:17px;background-position:center;background-repeat:no-repeat;height:100%"></div></button>' +
+                    '</div>')
+                clearInterval(window._toolbarInter);
+            }
+        }
+    }, 1000);
 })(window);
 
 ;(function(DocsAPI, window, document, undefined) {

resources/assets/js/pages/manage/components/FileContent.vue

@@ -2,17 +2,15 @@
     <div v-if="ready" class="file-content">
         <iframe v-if="isPreview" ref="myPreview" class="preview-iframe" :src="previewUrl"></iframe>
         <template v-else>
-            <div v-if="['word', 'excel', 'ppt'].includes(file.type)" class="office-header">
+            <EPopover
-                <div v-if="!file.only_view && officeReady" class="header-icons">
+                v-if="['word', 'excel', 'ppt'].includes(file.type)"
-                    <div class="header-icon" @click="handleClick('link')"><i class="taskfont">&#xe785;</i></div>
+                v-model="historyShow"
-                    <EPopover v-model="historyShow" trigger="click">
+                trigger="click">
-                        <div class="file-content-history">
+                <div class="file-content-history">
-                            <FileHistory :value="historyShow" :file="file" @on-restore="onRestoreHistory"/>
+                    <FileHistory :value="historyShow" :file="file" @on-restore="onRestoreHistory"/>
-                        </div>
-                        <div slot="reference" class="header-icon"><i class="taskfont">&#xe71d;</i></div>
-                    </EPopover>
                 </div>
-            </div>
+                <div slot="reference" ref="officeHeader" class="office-header"></div>
+            </EPopover>
             <div v-else class="edit-header">
                 <div class="header-title">
                     <EPopover v-if="!equalContent" v-model="unsaveTip" class="file-unsave-tip">
@@ -289,6 +287,24 @@ export default {
     methods: {
         handleMessage (event) {
             const data = event.data;
+            if (data.source === 'onlyoffice') {
+                switch (data.act) {
+                    case 'link':
+                        this.handleClick('link')
+                        break;
+
+                    case 'history':
+                        if (this.$refs.officeHeader) {
+                            this.$refs.officeHeader.style.top = `${data.rect.top}px`;
+                            this.$refs.officeHeader.style.left = `${data.rect.left}px`;
+                            this.$refs.officeHeader.style.width = `${data.rect.width}px`;
+                            this.$refs.officeHeader.style.height = `${data.rect.height}px`;
+                            this.$refs.officeHeader.click();
+                        }
+                        break;
+                }
+                return
+            }
             switch (data.act) {
                 case 'ready':
                     this.loadPreview = false;

resources/assets/sass/dark.scss

@@ -63,16 +63,6 @@ body.dark-mode-reverse {
 
     .file-content,
     .file-preview {
-        .office-header {
-            .header-icons {
-                .header-icon {
-                    color: rgba(0, 0, 0, 0.8);
-                    &:hover {
-                        background-color: rgba(0, 0, 0, 0.05);
-                    }
-                }
-            }
-        }
         .content-body {
             .tox {
                 .tox-edit-area__iframe {

resources/assets/sass/pages/components/file-content.scss

@@ -26,37 +26,11 @@
     }
 
     .office-header {
-        display: flex;
-        align-items: center;
         position: absolute;
-        right: 40px;
+        top: 0;
-        top: 28px;
+        left: 0;
-        z-index: 1;
+        z-index: -1;
-
+        opacity: 0;
-        .header-icons {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .header-icon {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 40px;
-                height: 28px;
-                line-height: 28px;
-                cursor: pointer;
-                color: rgba(255, 255, 255, 0.9);
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.2);
-                }
-
-                > i {
-                    font-size: 16px;
-                }
-            }
-        }
     }
 
     .edit-header {
@@ -331,14 +305,6 @@
     }
 }
 
-@media (max-width: 768px) {
-    .file-content {
-        .office-header {
-            display: none;
-        }
-    }
-}
-
 @media (max-width: 1200px) {
     .file-content {
         overflow: auto;