From fcc2684a34a5909c27bd49af5a30a331e83120c3 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 16 Dec 2022 20:29:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0webview=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85=EF=BC=8C=E7=BB=9F=E4=B8=80webview?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/group/GroupWebPanelRender.tsx           |  3 ++-
 client/web/src/components/Webview.tsx           | 17 +++++++++++++++++
 client/web/src/plugin/component/index.tsx       |  1 +
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 client/web/src/components/Webview.tsx

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 fa99bb8b..5336cc3e 100644
--- a/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Translate } from '../translate';
+import { Webview } from '@capital/component';
 
 const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   const panelInfo = props.panelInfo;
@@ -11,7 +12,7 @@ const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
   const url = panelInfo?.meta?.url;
 
   return (
-    <iframe key={String(url)} className="w-full h-full bg-white" src={url} />
+    <Webview key={String(url)} className="w-full h-full bg-white" url={url} />
   );
 };
 GroupWebPanelRender.displayName = 'GroupWebPanelRender';
diff --git a/client/web/src/components/Webview.tsx b/client/web/src/components/Webview.tsx
new file mode 100644
index 00000000..002e8a02
--- /dev/null
+++ b/client/web/src/components/Webview.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface WebviewProps {
+  url: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * 网页渲染容器
+ */
+export const Webview: React.FC<WebviewProps> = React.memo((props) => {
+  return (
+    <iframe className={props.className} style={props.style} src={props.url} />
+  );
+});
+Webview.displayName = 'Webview';
diff --git a/client/web/src/plugin/component/index.tsx b/client/web/src/plugin/component/index.tsx
index 389204da..5cca67f7 100644
--- a/client/web/src/plugin/component/index.tsx
+++ b/client/web/src/plugin/component/index.tsx
@@ -56,3 +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';