perf: 优化自定义网页面板url生成机制, 使用blob url来生成临时地址

client/web/plugins/com.msgbyte.webview/package.json

@@ -4,7 +4,6 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "js-base64": "^3.7.2",
     "script_sanitize": "^1.2.6"
   }
 }

client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { encode } from 'js-base64';
 import { isValidStr } from '@capital/common';
 import { Translate } from '../translate';
 import { sanitize } from 'script_sanitize';
@@ -18,27 +17,48 @@ function getInjectedStyle() {
   }
 }
 
-const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
+const cacheMap = new Map<string, string>();
-  const panelInfo = props.panelInfo;
 
-  if (!panelInfo) {
+function createInlineUrl(html: string): string | undefined {
-    return <div>{Translate.notfound}</div>;
+  if (cacheMap.has(html)) {
+    return cacheMap.get(html);
   }
 
-  const html = panelInfo?.meta?.html;
-  const url = useMemo(() => {
   if (isValidStr(html)) {
     const appendHtml = getInjectedStyle(); // 额外追加的样式
     try {
-        return `data:text/html;charset=utf8;base64,${encode(
+      const blob = new Blob(
-          sanitize(html + appendHtml, { replacementText: 'No allowed script' })
+        [
-        )}`;
+          sanitize(html + appendHtml, {
+            replacementText: 'No allowed script',
+          }),
+        ],
+        {
+          type: 'text/html',
+        }
+      );
+
+      const url = window.URL.createObjectURL(blob);
+      cacheMap.set(html, url);
+      return url;
     } catch (e) {
       return undefined;
     }
   } else {
     return undefined;
   }
+}
+
+const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
+  const panelInfo = props.panelInfo;
+
+  if (!panelInfo) {
+    return <div>{Translate.notfound}</div>;
+  }
+
+  const html = panelInfo?.meta?.html;
+  const url = useMemo(() => {
+    return createInlineUrl(html);
   }, [html]);
 
   return <WebviewKeepAlive className="w-full h-full" url={url} />;

pnpm-lock.yaml

@@ -751,10 +751,8 @@ importers:
 
   client/web/plugins/com.msgbyte.webview:
     specifiers:
-      js-base64: ^3.7.2
       script_sanitize: ^1.2.6
     dependencies:
-      js-base64: 3.7.2
       script_sanitize: 1.2.6
 
   client/web/plugins/com.msgbyte.wenshushu: