refactor: extract webview kernel wich easy replace

client/web/src/components/Webview.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { t } from 'tailchat-shared';
+import { buildRegFn, t } from 'tailchat-shared';
 import { withKeepAliveOverlay } from './KeepAliveOverlay';
 import { Loading } from './Loading';
 
-interface WebviewProps {
+interface WebviewKernelProps {
   className?: string;
-  style?: React.CSSProperties;
+  src: string;
-  url: string;
 }
 
 /**
- * 网页渲染容器
+ * 内置的默认webview渲染容器
  */
-export const Webview: React.FC<WebviewProps> = (props) => {
+const DefaultWebviewKernel: React.FC<WebviewKernelProps> = React.memo(
+  (props) => {
     const ref = useRef<HTMLIFrameElement>(null);
     const [spinning, setSpinning] = useState(true);
 
@@ -33,9 +33,32 @@ export const Webview: React.FC<WebviewProps> = (props) => {
         className="w-full h-full"
         tip={t('加载网页中...')}
       >
-      <iframe ref={ref} className="w-full h-full" src={props.url} />
+        <iframe {...props} ref={ref} />
       </Loading>
     );
+  }
+);
+DefaultWebviewKernel.displayName = 'DefaultWebviewKernel';
+
+const [getWebviewKernel, setWebviewKernel] = buildRegFn<
+  () => React.ComponentType<WebviewKernelProps>
+>('webviewKernelComponent', () => DefaultWebviewKernel);
+
+export { setWebviewKernel };
+
+interface WebviewProps {
+  className?: string;
+  style?: React.CSSProperties;
+  url: string;
+}
+
+/**
+ * 网页渲染容器
+ */
+export const Webview: React.FC<WebviewProps> = (props) => {
+  const KernelComponent = useMemo(() => getWebviewKernel(), []);
+
+  return <KernelComponent className="w-full h-full" src={props.url} />;
 };
 Webview.displayName = 'Webview';