From 62c7edfd6bbd82cc79966ce9e9565f83fc3cff97 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 18 Dec 2022 22:16:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8B=86=E5=88=86webview=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=E4=B8=8E=E9=9D=9E=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

并迁移部分插件iframe到Webview组件
---
 .../com.msgbyte.snapdrop/src/index.tsx        |  6 +++++-
 .../src/group/GroupCustomWebPanelRender.tsx   |  5 +++--
 .../src/group/GroupWebPanelRender.tsx         |  6 ++++--
 client/web/src/components/Webview.tsx         | 20 ++++++++++++-------
 client/web/src/plugin/component/index.tsx     |  2 +-
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/client/web/plugins/com.msgbyte.snapdrop/src/index.tsx b/client/web/plugins/com.msgbyte.snapdrop/src/index.tsx
index 3b7b06ba..29d4c62f 100644
--- a/client/web/plugins/com.msgbyte.snapdrop/src/index.tsx
+++ b/client/web/plugins/com.msgbyte.snapdrop/src/index.tsx
@@ -1,4 +1,5 @@
 import { regCustomPanel } from '@capital/common';
+import { WebviewKeepAlive } from '@capital/component';
 import React from 'react';
 import { Translate } from './translate';
 
@@ -10,6 +11,9 @@ regCustomPanel({
   label: Translate.panelName,
   icon: 'mdi:radio-tower',
   render: () => (
-    <iframe className="w-full h-full bg-white" src="https://snapdrop.net/" />
+    <WebviewKeepAlive
+      className="w-full h-full bg-white"
+      url="https://snapdrop.net/"
+    />
   ),
 });
diff --git a/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx b/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
index 30d4614c..3d714a6b 100644
--- a/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
@@ -3,6 +3,7 @@ import { encode } from 'js-base64';
 import { isValidStr } from '@capital/common';
 import { Translate } from '../translate';
 import { sanitize } from 'script_sanitize';
+import { WebviewKeepAlive } from '@capital/component';
 
 function getInjectedStyle() {
   try {
@@ -25,7 +26,7 @@ const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   }
 
   const html = panelInfo?.meta?.html;
-  const src = useMemo(() => {
+  const url = useMemo(() => {
     if (isValidStr(html)) {
       const appendHtml = getInjectedStyle(); // 额外追加的样式
       try {
@@ -40,7 +41,7 @@ const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
     }
   }, [html]);
 
-  return <iframe className="w-full h-full" src={src} />;
+  return <WebviewKeepAlive className="w-full h-full" url={url} />;
 };
 GroupCustomWebPanelRender.displayName = 'GroupCustomWebPanelRender';
 
diff --git a/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx b/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
index f7e5abae..ad425999 100644
--- a/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Translate } from '../translate';
-import { Webview } from '@capital/component';
+import { WebviewKeepAlive } from '@capital/component';
 
 const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   const panelInfo = props.panelInfo;
@@ -11,7 +11,9 @@ const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
 
   const url = panelInfo?.meta?.url;
 
-  return <Webview key={String(url)} className="w-full h-full" url={url} />;
+  return (
+    <WebviewKeepAlive key={String(url)} className="w-full h-full" url={url} />
+  );
 };
 GroupWebPanelRender.displayName = 'GroupWebPanelRender';
 
diff --git a/client/web/src/components/Webview.tsx b/client/web/src/components/Webview.tsx
index bebc761b..7b42933a 100644
--- a/client/web/src/components/Webview.tsx
+++ b/client/web/src/components/Webview.tsx
@@ -10,11 +10,17 @@ interface WebviewProps {
 /**
  * 网页渲染容器
  */
-export const Webview: React.FC<WebviewProps> =
-  withKeepAliveOverlay<WebviewProps>(
-    (props) => {
-      return <iframe className="w-full h-full bg-white" src={props.url} />;
-    },
-    { cacheId: (props) => props.url }
-  );
+export const Webview: React.FC<WebviewProps> = (props) => {
+  return <iframe className="w-full h-full" src={props.url} />;
+};
 Webview.displayName = 'Webview';
+
+/**
+ * 带缓存的网页渲染容器
+ * 用于需要在切换时依旧保持加载的case
+ */
+export const WebviewKeepAlive: React.FC<WebviewProps> =
+  withKeepAliveOverlay<WebviewProps>(Webview, {
+    cacheId: (props) => props.url,
+  });
+WebviewKeepAlive.displayName = 'WebviewKeepAlive';
diff --git a/client/web/src/plugin/component/index.tsx b/client/web/src/plugin/component/index.tsx
index 5cca67f7..a043ea4f 100644
--- a/client/web/src/plugin/component/index.tsx
+++ b/client/web/src/plugin/component/index.tsx
@@ -56,4 +56,4 @@ export { ErrorBoundary } from '@/components/ErrorBoundary';
 export { UserAvatar } from '@/components/UserAvatar';
 export { UserName } from '@/components/UserName';
 export { Markdown } from '@/components/Markdown';
-export { Webview } from '@/components/Webview';
+export { Webview, WebviewKeepAlive } from '@/components/Webview';