From c3d585650c3974c19a3e55db828accdf48d63855 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 11 Feb 2023 19:15:43 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E7=BD=91=E9=A1=B5=E9=9D=A2=E6=9D=BFurl=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E6=9C=BA=E5=88=B6,=20=E4=BD=BF=E7=94=A8blob=20url?=
 =?UTF-8?q?=E6=9D=A5=E7=94=9F=E6=88=90=E4=B8=B4=E6=97=B6=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/com.msgbyte.webview/package.json  |  1 -
 .../src/group/GroupCustomWebPanelRender.tsx   | 46 +++++++++++++------
 pnpm-lock.yaml                                |  2 -
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/client/web/plugins/com.msgbyte.webview/package.json b/client/web/plugins/com.msgbyte.webview/package.json
index 77fc4a5f..bfd43feb 100644
--- a/client/web/plugins/com.msgbyte.webview/package.json
+++ b/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"
   }
 }
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 3d714a6b..103be40c 100644
--- a/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
+++ b/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,6 +17,38 @@ function getInjectedStyle() {
   }
 }
 
+const cacheMap = new Map<string, string>();
+
+function createInlineUrl(html: string): string | undefined {
+  if (cacheMap.has(html)) {
+    return cacheMap.get(html);
+  }
+
+  if (isValidStr(html)) {
+    const appendHtml = getInjectedStyle(); // 额外追加的样式
+    try {
+      const blob = new Blob(
+        [
+          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;
 
@@ -27,18 +58,7 @@ const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
 
   const html = panelInfo?.meta?.html;
   const url = useMemo(() => {
-    if (isValidStr(html)) {
-      const appendHtml = getInjectedStyle(); // 额外追加的样式
-      try {
-        return `data:text/html;charset=utf8;base64,${encode(
-          sanitize(html + appendHtml, { replacementText: 'No allowed script' })
-        )}`;
-      } catch (e) {
-        return undefined;
-      }
-    } else {
-      return undefined;
-    }
+    return createInlineUrl(html);
   }, [html]);
 
   return <WebviewKeepAlive className="w-full h-full" url={url} />;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca4f71c1..fca35262 100644
--- a/pnpm-lock.yaml
+++ b/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: