🐛 修复脚本图标展示 #1052 (#1104)

* 🐛 删除脚本图标的背景色和边框 #1052

* 图片加载失败回退逻辑

* 修复二次刷新时图标加载问题

Author: CodFrm

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() {
       </Modal>
       <div className="tw-flex tw-flex-row tw-gap-x-3 tw-pt-3 tw-pb-3">
         <div className="tw-grow-1 tw-shrink-1 tw-flex tw-flex-row tw-justify-start tw-items-center">
-          {upsertScript?.metadata.icon && (
-            <Avatar size={32} shape="square" style={{ marginRight: "8px" }}>
-              <img src={upsertScript.metadata.icon[0]} alt={upsertScript.name} />
-            </Avatar>
-          )}
+          {upsertScript?.metadata.icon && <ScriptIcons script={upsertScript} size={32} />}
           {upsertScript && (
             <Tooltip position="tl" content={i18nName(upsertScript)}>
               <Typography.Text bold className="tw-text-size-lg tw-truncate tw-w-0 tw-grow-1">

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 }) => (
-    <Avatar
-      shape="square"
-      style={{
-        backgroundColor: "unset",
-        borderWidth: 1,
-      }}
-      className={website ? "tw-cursor-pointer" : "tw-cursor-default"}
-      {...rest}
-    >
-      {icon ? <img title={match} src={icon} /> : <TbWorldWww title={match} color="#aaa" size={24} />}
-    </Avatar>
-  ),
+  ({ match, icon, website, ...rest }: { match: string; icon?: string; website?: string; [key: string]: any }) => {
+    return (
+      <Avatar
+        shape="square"
+        style={{
+          backgroundColor: "unset",
+          borderWidth: 0,
+        }}
+        className={website ? "tw-cursor-pointer" : "tw-cursor-default"}
+        {...rest}
+      >
+        {icon ? <img title={match} src={icon} /> : <TbWorldWww title={match} color="#aaa" size={24} />}
+      </Avatar>
+    );
+  },
   (prevProps, nextProps) => {
     return (
       prevProps.match === nextProps.match &&

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 (
       <Avatar size={size || 32} shape="square" style={style}>
-        <img src={icon} alt={script?.name} />
+        <img src={icon} alt={script?.name} onError={() => setImageError(true)} />
       </Avatar>
     );
   }

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<string> => {
   const directoryHandle = await getFaviconRootFolder();
   // 使用url的uuid作为文件名
   const filename = `icon_${uuidv5(iconUrl, uuidv5.URL)}.dat`;
-  try {
-    const sessionBlobUrl = await cacheInstance.get<string>(`${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<string> => {
   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;
 };