feat: Try to cache remote images

#603

src/components/proxy/proxy-render.tsx

@@ -19,6 +19,9 @@ import type { IRenderItem } from "./use-render-list";
 import { useVerge } from "@/hooks/use-verge";
 import { useRecoilState } from "recoil";
 import { atomThemeMode } from "@/services/states";
+import { useEffect, useState } from "react";
+import { convertFileSrc } from "@tauri-apps/api/tauri";
+import { downloadIconCache } from "@/services/cmds";
 
 interface RenderProps {
   item: IRenderItem;
@@ -38,6 +41,23 @@ export const ProxyRender = (props: RenderProps) => {
   const [mode] = useRecoilState(atomThemeMode);
   const isDark = mode === "light" ? false : true;
   const itembackgroundcolor = isDark ? "#282A36" : "#ffffff";
+  const [iconCachePath, setIconCachePath] = useState("");
+
+  useEffect(() => {
+    initIconCachePath();
+  }, [group]);
+
+  async function initIconCachePath() {
+    if (group.icon && group.icon.trim().startsWith("http")) {
+      const fileName = getFileName(group.icon);
+      const iconPath = await downloadIconCache(group.icon, fileName);
+      setIconCachePath(convertFileSrc(iconPath));
+    }
+  }
+
+  function getFileName(url: string) {
+    return url.substring(url.lastIndexOf("/") + 1);
+  }
 
   if (type === 0 && !group.hidden) {
     return (
@@ -55,7 +75,7 @@ export const ProxyRender = (props: RenderProps) => {
           group.icon &&
           group.icon.trim().startsWith("http") && (
             <img
-              src={group.icon}
+              src={iconCachePath === "" ? group.icon : iconCachePath}
               height="32px"
               style={{ marginRight: "12px", borderRadius: "6px" }}
             />

src/components/setting/mods/layout-viewer.tsx

@@ -19,7 +19,6 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const [sysproxyIcon, setSysproxyIcon] = useState("");
   const [tunIcon, setTunIcon] = useState("");
 
-  // const { menu_icon } = verge ?? {};
   useEffect(() => {
     initIconPath();
   }, []);

src/components/test/test-item.tsx

@@ -17,8 +17,9 @@ import { LanguageTwoTone } from "@mui/icons-material";
 import { Notice } from "@/components/base";
 import { TestBox } from "./test-box";
 import delayManager from "@/services/delay";
-import { cmdTestDelay } from "@/services/cmds";
+import { cmdTestDelay, downloadIconCache } from "@/services/cmds";
 import { listen, Event, UnlistenFn } from "@tauri-apps/api/event";
+import { convertFileSrc } from "@tauri-apps/api/tauri";
 
 interface Props {
   id: string;
@@ -39,6 +40,23 @@ export const TestItem = (props: Props) => {
   const [position, setPosition] = useState({ left: 0, top: 0 });
   const [delay, setDelay] = useState(-1);
   const { uid, name, icon, url } = itemData;
+  const [iconCachePath, setIconCachePath] = useState("");
+
+  useEffect(() => {
+    initIconCachePath();
+  }, [icon]);
+
+  async function initIconCachePath() {
+    if (icon && icon.trim().startsWith("http")) {
+      const fileName = getFileName(icon);
+      const iconPath = await downloadIconCache(icon, fileName);
+      setIconCachePath(convertFileSrc(iconPath));
+    }
+  }
+
+  function getFileName(url: string) {
+    return url.substring(url.lastIndexOf("/") + 1);
+  }
 
   const onDelay = async () => {
     setDelay(-2);
@@ -104,7 +122,10 @@ export const TestItem = (props: Props) => {
           {icon && icon.trim() !== "" ? (
             <Box sx={{ display: "flex", justifyContent: "center" }}>
               {icon.trim().startsWith("http") && (
-                <img src={icon} height="40px" />
+                <img
+                  src={iconCachePath === "" ? icon : iconCachePath}
+                  height="40px"
+                />
               )}
               {icon.trim().startsWith("data") && (
                 <img src={icon} height="40px" />

src/services/cmds.ts

@@ -227,3 +227,7 @@ export async function copyIconFile(
 ) {
   return invoke<void>("copy_icon_file", { path, name });
 }
+
+export async function downloadIconCache(url: string, name: string) {
+  return invoke<string>("download_icon_cache", { url, name });
+}