diff --git a/src/pages/install/App.tsx b/src/pages/install/App.tsx
index 94e9fe840..5770bf2b8 100644
--- a/src/pages/install/App.tsx
+++ b/src/pages/install/App.tsx
@@ -1,5 +1,4 @@
import {
- Avatar,
Button,
Dropdown,
Message,
@@ -33,6 +32,7 @@ import { useSearchParams } from "react-router-dom";
import { CACHE_KEY_SCRIPT_INFO } from "@App/app/cache_key";
import { cacheInstance } from "@App/app/cache";
import { formatBytes, prettyUrl } from "@App/pkg/utils/utils";
+import { ScriptIcons } from "../options/routes/utils";
const backgroundPromptShownKey = "background_prompt_shown";
@@ -766,11 +766,7 @@ function App() {
- {upsertScript?.metadata.icon && (
-
-
-
- )}
+ {upsertScript?.metadata.icon &&
}
{upsertScript && (
diff --git a/src/pages/options/routes/ScriptList/components.tsx b/src/pages/options/routes/ScriptList/components.tsx
index 44e085884..b3085d71d 100644
--- a/src/pages/options/routes/ScriptList/components.tsx
+++ b/src/pages/options/routes/ScriptList/components.tsx
@@ -34,19 +34,21 @@ EnableSwitch.displayName = "EnableSwitch";
// Memoized Avatar component to prevent unnecessary re-renders
export const MemoizedAvatar = React.memo(
- ({ match, icon, website, ...rest }: { match: string; icon?: string; website?: string; [key: string]: any }) => (
-
- {icon ?
: }
-
- ),
+ ({ match, icon, website, ...rest }: { match: string; icon?: string; website?: string; [key: string]: any }) => {
+ return (
+
+ {icon ?
: }
+
+ );
+ },
(prevProps, nextProps) => {
return (
prevProps.match === nextProps.match &&
diff --git a/src/pages/options/routes/utils.tsx b/src/pages/options/routes/utils.tsx
index 66ea66c11..9ce52dd42 100644
--- a/src/pages/options/routes/utils.tsx
+++ b/src/pages/options/routes/utils.tsx
@@ -166,15 +166,17 @@ export type ScriptIconsProps = {
};
export function ScriptIcons({ script, size = 32, style }: ScriptIconsProps) {
+ const [imageError, setImageError] = useState(false);
style = style || {};
style.display = style.display || "inline-block";
style.marginRight = style.marginRight || "8px";
+ style.backgroundColor = style.backgroundColor || "unset";
const m = script.metadata;
const [icon] = m.icon || m.iconurl || m.icon64 || m.icon64url || [];
- if (icon) {
+ if (icon && !imageError) {
return (
-
+
setImageError(true)} />
);
}
diff --git a/src/pages/store/favicons.ts b/src/pages/store/favicons.ts
index 7297be50a..45802b0a5 100644
--- a/src/pages/store/favicons.ts
+++ b/src/pages/store/favicons.ts
@@ -1,6 +1,4 @@
import { type Script, ScriptDAO } from "@App/app/repo/scripts";
-import { cacheInstance } from "@App/app/cache";
-import { CACHE_KEY_FAVICON } from "@App/app/cache_key";
import { FaviconDAO, type FaviconFile, type FaviconRecord } from "@App/app/repo/favicon";
import { v5 as uuidv5 } from "uuid";
import { getFaviconRootFolder } from "@App/app/service/service_worker/utils";
@@ -225,12 +223,6 @@ export const loadFavicon = async (iconUrl: string): Promise => {
const directoryHandle = await getFaviconRootFolder();
// 使用url的uuid作为文件名
const filename = `icon_${uuidv5(iconUrl, uuidv5.URL)}.dat`;
- try {
- const sessionBlobUrl = await cacheInstance.get(`${CACHE_KEY_FAVICON}${filename}`);
- if (sessionBlobUrl) return sessionBlobUrl;
- } catch {
- // 即使报错也不影响
- }
// 检查文件是否存在
let fileHandle: FileSystemFileHandle | undefined;
try {
@@ -251,7 +243,6 @@ export const loadFavicon = async (iconUrl: string): Promise => {
const opfsRet = { dirs: ["cached_favicons"], filename: filename };
const file = await getFileFromOPFS(opfsRet);
const blobUrl = URL.createObjectURL(file);
- cacheInstance.set(`${CACHE_KEY_FAVICON}${filename}`, blobUrl); // 不用等待。针对SW重启 - blobURL 的生命周期依附于页面
return blobUrl;
};