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.name} - - )} + {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 ( - {script?.name} + {script?.name} 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; };