From e20330be924da7cc35de5553382e598386f8a3fe Mon Sep 17 00:00:00 2001
From: moshangqi <2509678669@qq.com>
Date: Mon, 25 Dec 2023 13:59:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E5=86=85=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../impl/ClipAssistant/index.module.less      |  6 +++---
 src/components/lake-editor/template-html.ts   |  2 +-
 src/pages/inject/WordMark/Editor/index.tsx    | 21 +++++++++++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/SuperSideBar/impl/ClipAssistant/index.module.less b/src/components/SuperSideBar/impl/ClipAssistant/index.module.less
index 3cc54686..56a5c7f1 100644
--- a/src/components/SuperSideBar/impl/ClipAssistant/index.module.less
+++ b/src/components/SuperSideBar/impl/ClipAssistant/index.module.less
@@ -25,8 +25,8 @@
   .headerWrapper {
     flex: 0 0 auto;
     display: flex;
-    padding: 16px 10px 0;
-    gap: 30px;
+    padding: 16px 18px 0;
+    gap: 20px;
 
     .headerItem {
       cursor: pointer;
@@ -53,7 +53,7 @@
     flex: 0 0 auto;
 
     .title {
-      padding: 0 16px;
+      padding: 0 24px;
       color: @text-primary;
       font-weight: 500;
       font-size: @font-size-lg;
diff --git a/src/components/lake-editor/template-html.ts b/src/components/lake-editor/template-html.ts
index 59027083..77b09d6d 100644
--- a/src/components/lake-editor/template-html.ts
+++ b/src/components/lake-editor/template-html.ts
@@ -56,7 +56,7 @@ export const templateHtml = `
       height: 100%;
     }
     .ne-layout-mode-fixed .ne-engine, .ne-layout-mode-adapt .ne-engine {
-      padding: 16px 16px 0;
+      padding: 16px 24px 0;
       min-height: calc(100vh - 10px)
     }
     .ne-layout-mode-fixed .ne-editor-wrap-content {
diff --git a/src/pages/inject/WordMark/Editor/index.tsx b/src/pages/inject/WordMark/Editor/index.tsx
index ae529f40..74f16b9e 100644
--- a/src/pages/inject/WordMark/Editor/index.tsx
+++ b/src/pages/inject/WordMark/Editor/index.tsx
@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react';
 import {
   EDITOR_IFRAME_CONTAINER_ID,
@@ -75,6 +76,7 @@ const getRequestID = (() => {
 export default forwardRef<IEditorRef, {}>((props, ref) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const sendMessageRef = useRef<(data: any) => Promise<any>>();
+  const [needLoadEditor, setNeedLoadEditor] = useState(true);
 
   useEffect(() => {
     const resolveCache: Map<number, (data: any) => void> = new Map();
@@ -169,6 +171,25 @@ export default forwardRef<IEditorRef, {}>((props, ref) => {
     [sendMessage],
   );
 
+  useEffect(() => {
+    // 当页面可见性发生改变时，如果发现用户未使用过插件，释放掉 editor iframe
+    const onVisibilitychange = () => {
+      if (document.hidden) {
+        setNeedLoadEditor(false);
+      } else {
+        setNeedLoadEditor(true);
+      }
+    };
+    document.addEventListener('visibilitychange', onVisibilitychange);
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibilitychange);
+    };
+  }, []);
+
+  if (!needLoadEditor) {
+    return null;
+  }
+
   return (
     <iframe
       src={chrome.runtime.getURL('editor.html')}