refactor: 拆分webview缓存与非缓存

并迁移部分插件iframe到Webview组件

Author: moonrailgun

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/"
+    />
   ),
 });

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';
 

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';
 

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';

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';