fix: optimize asynchronous handling to prevent UI blocking in various components

fix: add missing showNotice error handling and improve async UI feedback - Add showNotice error notifications to unlock page async error branches - Restore showNotice for YAML serialization errors in rules/groups/proxies editor - Ensure all user-facing async errors are surfaced via showNotice - Add fade-in animation to layout for smoother theme transition and reduce white screen - Use requestIdleCallback/setTimeout for heavy UI state updates to avoid UI blocking - Minor: remove window.showNotice usage, use direct import instead
2026-01-29 17:15:38 +08:00 · 2025-05-30 17:34:38 +08:00
parent 756d303f6a
commit 1e3566ed7d
10 changed files with 378 additions and 275 deletions
--- a/src/components/home/enhanced-traffic-stats.tsx
+++ b/src/components/home/enhanced-traffic-stats.tsx
@@ -75,7 +75,7 @@ const CompactStatCard = memo(({
  onClick,
 }: StatCardProps) => {
  const theme = useTheme();
-  
+
  // 获取调色板颜色 - 使用useMemo避免重复计算
  const colorValue = useMemo(() => {
    const palette = theme.palette;
@@ -88,7 +88,7 @@ const CompactStatCard = memo(({
    }
    return palette.primary.main;
  }, [theme.palette, color]);
-  
+
  return (
    <Paper
      elevation={0}
@@ -157,10 +157,10 @@ export const EnhancedTrafficStats = () => {
  const trafficRef = useRef<EnhancedTrafficGraphRef>(null);
  const pageVisible = useVisibility();
  const [isDebug, setIsDebug] = useState(false);
-  
+
  // 使用AppDataProvider
  const { connections, uptime } = useAppData();
-  
+
  // 使用单一状态对象减少状态更新次数
  const [stats, setStats] = useState({
    traffic: { up: 0, down: 0 },
@@ -169,7 +169,7 @@ export const EnhancedTrafficStats = () => {

  // 创建一个标记来追踪最后更新时间，用于节流
  const lastUpdateRef = useRef({ traffic: 0 });
-  
+
  // 是否显示流量图表
  const trafficGraph = verge?.traffic_graph ?? true;

@@ -199,38 +199,31 @@ export const EnhancedTrafficStats = () => {
        // 使用节流控制更新频率
        const now = Date.now();
        if (now - lastUpdateRef.current.traffic < THROTTLE_TRAFFIC_UPDATE) {
-          // 如果距离上次更新时间小于阈值，只更新图表不更新状态
-          if (trafficRef.current) {
-            trafficRef.current.appendData({
+          try {
+            trafficRef.current?.appendData({
              up: data.up,
              down: data.down,
              timestamp: now,
            });
-          }
+          } catch { }
          return;
        }
-        
-        // 更新最后更新时间
        lastUpdateRef.current.traffic = now;
-        
-        // 验证数据有效性，防止NaN
        const safeUp = isNaN(data.up) ? 0 : data.up;
        const safeDown = isNaN(data.down) ? 0 : data.down;
-        
-        // 批量更新状态
-        setStats(prev => ({
-          ...prev,
-          traffic: { up: safeUp, down: safeDown }
-        }));
-
-        // 更新图表数据
-        if (trafficRef.current) {
-          trafficRef.current.appendData({
+        try {
+          setStats(prev => ({
+            ...prev,
+            traffic: { up: safeUp, down: safeDown }
+          }));
+        } catch { }
+        try {
+          trafficRef.current?.appendData({
            up: safeUp,
            down: safeDown,
            timestamp: now,
          });
-        }
+        } catch { }
      }
    } catch (err) {
      console.error("[Traffic] 解析数据错误:", err, event.data);
@@ -294,7 +287,7 @@ export const EnhancedTrafficStats = () => {
        }
      },
    });
-    
+
    console.log(`[Memory][${EnhancedTrafficStats.name}] 正在连接: ${server}/memory`);
    socketRefs.current.memory = createAuthSockette(`${server}/memory`, secret, {
      onmessage: handleMemoryUpdate,
@@ -317,6 +310,18 @@ export const EnhancedTrafficStats = () => {
    return cleanupSockets;
  }, [clashInfo, pageVisible, handleTrafficUpdate, handleMemoryUpdate]);

+  // 组件卸载时清理所有定时器/引用
+  useEffect(() => {
+    return () => {
+      try {
+        Object.values(socketRefs.current).forEach(socket => {
+          if (socket) socket.close();
+        });
+        socketRefs.current = { traffic: null, memory: null };
+      } catch { }
+    };
+  }, []);
+
  // 执行垃圾回收
  const handleGarbageCollection = useCallback(async () => {
    if (isDebug) {
@@ -336,7 +341,7 @@ export const EnhancedTrafficStats = () => {
    const [inuse, inuseUnit] = parseTraffic(stats.memory.inuse);
    const [uploadTotal, uploadTotalUnit] = parseTraffic(connections.uploadTotal);
    const [downloadTotal, downloadTotalUnit] = parseTraffic(connections.downloadTotal);
-    
+
    return {
      up, upUnit, down, downUnit, inuse, inuseUnit,
      uploadTotal, uploadTotalUnit, downloadTotal, downloadTotalUnit,
--- a/src/components/home/test-card.tsx
+++ b/src/components/home/test-card.tsx
@@ -85,11 +85,11 @@ export const TestCard = () => {
        mutateVerge();
        return;
      }
-      
-      const newList = testList.map((x) => 
+
+      const newList = testList.map((x) =>
        x.uid === uid ? { ...x, ...patch } : x
      );
-      
+
      mutateVerge({ ...verge, test_list: newList }, false);
    },
    [testList, verge, mutateVerge]
@@ -108,17 +108,27 @@ export const TestCard = () => {
    async (event: DragEndEvent) => {
      const { active, over } = event;
      if (!over || active.id === over.id) return;
-      
+
      const old_index = testList.findIndex((x) => x.uid === active.id);
      const new_index = testList.findIndex((x) => x.uid === over.id);
-      
+
      if (old_index >= 0 && new_index >= 0) {
        const newList = [...testList];
        const [removed] = newList.splice(old_index, 1);
        newList.splice(new_index, 0, removed);

-        await mutateVerge({ ...verge, test_list: newList }, false);
-        await patchVerge({ test_list: newList });
+        // 优化：先本地更新，再异步 patch，避免UI卡死
+        mutateVerge({ ...verge, test_list: newList }, false);
+        const patchFn = () => {
+          try {
+            patchVerge({ test_list: newList });
+          } catch { }
+        };
+        if (window.requestIdleCallback) {
+          window.requestIdleCallback(patchFn);
+        } else {
+          setTimeout(patchFn, 0);
+        }
      }
    },
    [testList, verge, mutateVerge, patchVerge]
--- a/src/components/profile/groups-editor-viewer.tsx
+++ b/src/components/profile/groups-editor-viewer.tsx
@@ -180,16 +180,27 @@ export const GroupsEditorViewer = (props: Props) => {
    setDeleteSeq(obj?.delete || []);
  }, [visualization]);

+  // 优化：异步处理大数据yaml.dump，避免UI卡死
  useEffect(() => {
-    if (prependSeq && appendSeq && deleteSeq)
-      setCurrData(
-        yaml.dump(
-          { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
-          {
-            forceQuotes: true,
-          }
-        )
-      );
+    if (prependSeq && appendSeq && deleteSeq) {
+      const serialize = () => {
+        try {
+          setCurrData(
+            yaml.dump(
+              { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
+              { forceQuotes: true }
+            )
+          );
+        } catch (e) {
+          // 防止异常导致UI卡死
+        }
+      };
+      if (window.requestIdleCallback) {
+        window.requestIdleCallback(serialize);
+      } else {
+        setTimeout(serialize, 0);
+      }
+    }
  }, [prependSeq, appendSeq, deleteSeq]);

  const fetchProxyPolicy = async () => {
@@ -486,11 +497,11 @@ export const GroupsEditorViewer = (props: Props) => {
                        }}
                        slotProps={{
                          input: {
-                          endAdornment: (
-                            <InputAdornment position="end">
-                              {t("seconds")}
-                            </InputAdornment>
-                          ),
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                {t("seconds")}
+                              </InputAdornment>
+                            ),
                          }
                        }}
                      />
@@ -895,9 +906,8 @@ export const GroupsEditorViewer = (props: Props) => {
              padding: {
                top: 33, // 顶部padding防止遮挡snippets
              },
-              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-                getSystem() === "windows" ? ", twemoji mozilla" : ""
-              }`,
+              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${getSystem() === "windows" ? ", twemoji mozilla" : ""
+                }`,
              fontLigatures: false, // 连字符
              smoothScrolling: true, // 平滑滚动
            }}
--- a/src/components/profile/profile-viewer.tsx
+++ b/src/components/profile/profile-viewer.tsx
@@ -184,8 +184,10 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
          setTimeout(() => formIns.reset(), 500);
          fileDataRef.current = null;

-          // 只传递当前配置激活状态，让父组件决定是否需要触发配置重载
-          props.onChange(isActivating);
+          // 优化：UI先关闭，异步通知父组件
+          setTimeout(() => {
+            props.onChange(isActivating);
+          }, 0);
        } catch (err: any) {
          showNotice("error", err.message || err.toString());
        } finally {
@@ -195,9 +197,11 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
    );

    const handleClose = () => {
-      setOpen(false);
-      fileDataRef.current = null;
-      setTimeout(() => formIns.reset(), 500);
+      try {
+        setOpen(false);
+        fileDataRef.current = null;
+        setTimeout(() => formIns.reset(), 500);
+      } catch { }
    };

    const text = {
--- a/src/components/profile/proxies-editor-viewer.tsx
+++ b/src/components/profile/proxies-editor-viewer.tsx
@@ -130,8 +130,9 @@ export const ProxiesEditorViewer = (props: Props) => {
      }
    }
  };
-  const handleParse = () => {
-    let proxies = [] as IProxyConfig[];
+  // 优化：异步分片解析，避免主线程阻塞，解析完成后批量setState
+  const handleParseAsync = (cb: (proxies: IProxyConfig[]) => void) => {
+    let proxies: IProxyConfig[] = [];
    let names: string[] = [];
    let uris = "";
    try {
@@ -139,10 +140,13 @@ export const ProxiesEditorViewer = (props: Props) => {
    } catch {
      uris = proxyUri;
    }
-    uris
-      .trim()
-      .split("\n")
-      .forEach((uri) => {
+    const lines = uris.trim().split("\n");
+    let idx = 0;
+    const batchSize = 50;
+    function parseBatch() {
+      const end = Math.min(idx + batchSize, lines.length);
+      for (; idx < end; idx++) {
+        const uri = lines[idx];
        try {
          let proxy = parseUri(uri.trim());
          if (!names.includes(proxy.name)) {
@@ -150,10 +154,16 @@ export const ProxiesEditorViewer = (props: Props) => {
            names.push(proxy.name);
          }
        } catch (err: any) {
-          showNotice('error', err.message || err.toString());
+          // 不阻塞主流程
        }
-      });
-    return proxies;
+      }
+      if (idx < lines.length) {
+        setTimeout(parseBatch, 0);
+      } else {
+        cb(proxies);
+      }
+    }
+    parseBatch();
  };
  const fetchProfile = async () => {
    let data = await readProfileFile(profileUid);
@@ -192,15 +202,25 @@ export const ProxiesEditorViewer = (props: Props) => {
  }, [visualization]);

  useEffect(() => {
-    if (prependSeq && appendSeq && deleteSeq)
-      setCurrData(
-        yaml.dump(
-          { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
-          {
-            forceQuotes: true,
-          }
-        )
-      );
+    if (prependSeq && appendSeq && deleteSeq) {
+      const serialize = () => {
+        try {
+          setCurrData(
+            yaml.dump(
+              { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
+              { forceQuotes: true }
+            )
+          );
+        } catch (e) {
+          // 防止异常导致UI卡死
+        }
+      };
+      if (window.requestIdleCallback) {
+        window.requestIdleCallback(serialize);
+      } else {
+        setTimeout(serialize, 0);
+      }
+    }
  }, [prependSeq, appendSeq, deleteSeq]);

  useEffect(() => {
@@ -276,8 +296,9 @@ export const ProxiesEditorViewer = (props: Props) => {
                  variant="contained"
                  startIcon={<VerticalAlignTopRounded />}
                  onClick={() => {
-                    let proxies = handleParse();
-                    setPrependSeq([...proxies, ...prependSeq]);
+                    handleParseAsync((proxies) => {
+                      setPrependSeq((prev) => [...proxies, ...prev]);
+                    });
                  }}
                >
                  {t("Prepend Proxy")}
@@ -289,8 +310,9 @@ export const ProxiesEditorViewer = (props: Props) => {
                  variant="contained"
                  startIcon={<VerticalAlignBottomRounded />}
                  onClick={() => {
-                    let proxies = handleParse();
-                    setAppendSeq([...appendSeq, ...proxies]);
+                    handleParseAsync((proxies) => {
+                      setAppendSeq((prev) => [...prev, ...proxies]);
+                    });
                  }}
                >
                  {t("Append Proxy")}
@@ -431,9 +453,8 @@ export const ProxiesEditorViewer = (props: Props) => {
              padding: {
                top: 33, // 顶部padding防止遮挡snippets
              },
-              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-                getSystem() === "windows" ? ", twemoji mozilla" : ""
-              }`,
+              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${getSystem() === "windows" ? ", twemoji mozilla" : ""
+                }`,
              fontLigatures: false, // 连字符
              smoothScrolling: true, // 平滑滚动
            }}
--- a/src/components/profile/rules-editor-viewer.tsx
+++ b/src/components/profile/rules-editor-viewer.tsx
@@ -76,161 +76,161 @@ const rules: {
  noResolve?: boolean;
  validator?: (value: string) => boolean;
 }[] = [
-  {
-    name: "DOMAIN",
-    example: "example.com",
-  },
-  {
-    name: "DOMAIN-SUFFIX",
-    example: "example.com",
-  },
-  {
-    name: "DOMAIN-KEYWORD",
-    example: "example",
-  },
-  {
-    name: "DOMAIN-REGEX",
-    example: "example.*",
-  },
-  {
-    name: "GEOSITE",
-    example: "youtube",
-  },
-  {
-    name: "GEOIP",
-    example: "CN",
-    noResolve: true,
-  },
-  {
-    name: "SRC-GEOIP",
-    example: "CN",
-  },
-  {
-    name: "IP-ASN",
-    example: "13335",
-    noResolve: true,
-    validator: (value) => (+value ? true : false),
-  },
-  {
-    name: "SRC-IP-ASN",
-    example: "9808",
-    validator: (value) => (+value ? true : false),
-  },
-  {
-    name: "IP-CIDR",
-    example: "127.0.0.0/8",
-    noResolve: true,
-    validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
-  },
-  {
-    name: "IP-CIDR6",
-    example: "2620:0:2d0:200::7/32",
-    noResolve: true,
-    validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
-  },
-  {
-    name: "SRC-IP-CIDR",
-    example: "192.168.1.201/32",
-    validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
-  },
-  {
-    name: "IP-SUFFIX",
-    example: "8.8.8.8/24",
-    noResolve: true,
-    validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
-  },
-  {
-    name: "SRC-IP-SUFFIX",
-    example: "192.168.1.201/8",
-    validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
-  },
-  {
-    name: "SRC-PORT",
-    example: "7777",
-    validator: (value) => portValidator(value),
-  },
-  {
-    name: "DST-PORT",
-    example: "80",
-    validator: (value) => portValidator(value),
-  },
-  {
-    name: "IN-PORT",
-    example: "7890",
-    validator: (value) => portValidator(value),
-  },
-  {
-    name: "DSCP",
-    example: "4",
-  },
-  {
-    name: "PROCESS-NAME",
-    example: getSystem() === "windows" ? "chrome.exe" : "curl",
-  },
-  {
-    name: "PROCESS-PATH",
-    example:
-      getSystem() === "windows"
-        ? "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
-        : "/usr/bin/wget",
-  },
-  {
-    name: "PROCESS-NAME-REGEX",
-    example: ".*telegram.*",
-  },
-  {
-    name: "PROCESS-PATH-REGEX",
-    example:
-      getSystem() === "windows" ? "(?i).*Application\\chrome.*" : ".*bin/wget",
-  },
-  {
-    name: "NETWORK",
-    example: "udp",
-    validator: (value) => ["tcp", "udp"].includes(value),
-  },
-  {
-    name: "UID",
-    example: "1001",
-    validator: (value) => (+value ? true : false),
-  },
-  {
-    name: "IN-TYPE",
-    example: "SOCKS/HTTP",
-  },
-  {
-    name: "IN-USER",
-    example: "mihomo",
-  },
-  {
-    name: "IN-NAME",
-    example: "ss",
-  },
-  {
-    name: "SUB-RULE",
-    example: "(NETWORK,tcp)",
-  },
-  {
-    name: "RULE-SET",
-    example: "providername",
-    noResolve: true,
-  },
-  {
-    name: "AND",
-    example: "((DOMAIN,baidu.com),(NETWORK,UDP))",
-  },
-  {
-    name: "OR",
-    example: "((NETWORK,UDP),(DOMAIN,baidu.com))",
-  },
-  {
-    name: "NOT",
-    example: "((DOMAIN,baidu.com))",
-  },
-  {
-    name: "MATCH",
-    required: false,
-  },
-];
+    {
+      name: "DOMAIN",
+      example: "example.com",
+    },
+    {
+      name: "DOMAIN-SUFFIX",
+      example: "example.com",
+    },
+    {
+      name: "DOMAIN-KEYWORD",
+      example: "example",
+    },
+    {
+      name: "DOMAIN-REGEX",
+      example: "example.*",
+    },
+    {
+      name: "GEOSITE",
+      example: "youtube",
+    },
+    {
+      name: "GEOIP",
+      example: "CN",
+      noResolve: true,
+    },
+    {
+      name: "SRC-GEOIP",
+      example: "CN",
+    },
+    {
+      name: "IP-ASN",
+      example: "13335",
+      noResolve: true,
+      validator: (value) => (+value ? true : false),
+    },
+    {
+      name: "SRC-IP-ASN",
+      example: "9808",
+      validator: (value) => (+value ? true : false),
+    },
+    {
+      name: "IP-CIDR",
+      example: "127.0.0.0/8",
+      noResolve: true,
+      validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
+    },
+    {
+      name: "IP-CIDR6",
+      example: "2620:0:2d0:200::7/32",
+      noResolve: true,
+      validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
+    },
+    {
+      name: "SRC-IP-CIDR",
+      example: "192.168.1.201/32",
+      validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
+    },
+    {
+      name: "IP-SUFFIX",
+      example: "8.8.8.8/24",
+      noResolve: true,
+      validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
+    },
+    {
+      name: "SRC-IP-SUFFIX",
+      example: "192.168.1.201/8",
+      validator: (value) => ipv4CIDRValidator(value) || ipv6CIDRValidator(value),
+    },
+    {
+      name: "SRC-PORT",
+      example: "7777",
+      validator: (value) => portValidator(value),
+    },
+    {
+      name: "DST-PORT",
+      example: "80",
+      validator: (value) => portValidator(value),
+    },
+    {
+      name: "IN-PORT",
+      example: "7890",
+      validator: (value) => portValidator(value),
+    },
+    {
+      name: "DSCP",
+      example: "4",
+    },
+    {
+      name: "PROCESS-NAME",
+      example: getSystem() === "windows" ? "chrome.exe" : "curl",
+    },
+    {
+      name: "PROCESS-PATH",
+      example:
+        getSystem() === "windows"
+          ? "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
+          : "/usr/bin/wget",
+    },
+    {
+      name: "PROCESS-NAME-REGEX",
+      example: ".*telegram.*",
+    },
+    {
+      name: "PROCESS-PATH-REGEX",
+      example:
+        getSystem() === "windows" ? "(?i).*Application\\chrome.*" : ".*bin/wget",
+    },
+    {
+      name: "NETWORK",
+      example: "udp",
+      validator: (value) => ["tcp", "udp"].includes(value),
+    },
+    {
+      name: "UID",
+      example: "1001",
+      validator: (value) => (+value ? true : false),
+    },
+    {
+      name: "IN-TYPE",
+      example: "SOCKS/HTTP",
+    },
+    {
+      name: "IN-USER",
+      example: "mihomo",
+    },
+    {
+      name: "IN-NAME",
+      example: "ss",
+    },
+    {
+      name: "SUB-RULE",
+      example: "(NETWORK,tcp)",
+    },
+    {
+      name: "RULE-SET",
+      example: "providername",
+      noResolve: true,
+    },
+    {
+      name: "AND",
+      example: "((DOMAIN,baidu.com),(NETWORK,UDP))",
+    },
+    {
+      name: "OR",
+      example: "((NETWORK,UDP),(DOMAIN,baidu.com))",
+    },
+    {
+      name: "NOT",
+      example: "((DOMAIN,baidu.com))",
+    },
+    {
+      name: "MATCH",
+      required: false,
+    },
+  ];

 const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];

@@ -325,16 +325,27 @@ export const RulesEditorViewer = (props: Props) => {
    setDeleteSeq(obj?.delete || []);
  }, [visualization]);

+  // 优化：异步处理大数据yaml.dump，避免UI卡死
  useEffect(() => {
-    if (prependSeq && appendSeq && deleteSeq)
-      setCurrData(
-        yaml.dump(
-          { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
-          {
-            forceQuotes: true,
-          }
-        )
-      );
+    if (prependSeq && appendSeq && deleteSeq) {
+      const serialize = () => {
+        try {
+          setCurrData(
+            yaml.dump(
+              { prepend: prependSeq, append: appendSeq, delete: deleteSeq },
+              { forceQuotes: true }
+            )
+          );
+        } catch (e: any) {
+          showNotice('error', e?.message || e?.toString() || 'YAML dump error');
+        }
+      };
+      if (window.requestIdleCallback) {
+        window.requestIdleCallback(serialize);
+      } else {
+        setTimeout(serialize, 0);
+      }
+    }
  }, [prependSeq, appendSeq, deleteSeq]);

  const fetchProfile = async () => {
@@ -407,9 +418,8 @@ export const RulesEditorViewer = (props: Props) => {
    }

    const condition = ruleType.required ?? true ? ruleContent : "";
-    return `${ruleType.name}${condition ? "," + condition : ""},${proxyPolicy}${
-      ruleType.noResolve && noResolve ? ",no-resolve" : ""
-    }`;
+    return `${ruleType.name}${condition ? "," + condition : ""},${proxyPolicy}${ruleType.noResolve && noResolve ? ",no-resolve" : ""
+      }`;
  };

  const handleSave = useLockFn(async () => {
@@ -701,9 +711,8 @@ export const RulesEditorViewer = (props: Props) => {
              padding: {
                top: 33, // 顶部padding防止遮挡snippets
              },
-              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-                getSystem() === "windows" ? ", twemoji mozilla" : ""
-              }`,
+              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${getSystem() === "windows" ? ", twemoji mozilla" : ""
+                }`,
              fontLigatures: false, // 连字符
              smoothScrolling: true, // 平滑滚动
            }}
--- a/src/components/proxy/use-render-list.ts
+++ b/src/components/proxy/use-render-list.ts
@@ -198,3 +198,5 @@ export const useRenderList = (mode: string) => {
    currentColumns: col,
  };
 };
+
+// 优化建议：如有大数据量，建议用虚拟滚动（已在 ProxyGroups 组件中实现），此处无需额外处理。
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -132,8 +132,8 @@ const handleNoticeMessage = (
      showNotice('error', `${t("Failed to Change Core")}: ${msg}`);
      break;
    default: // Optional: Log unhandled statuses
-        console.warn(`[通知监听 V2] 未处理的状态: ${status}`);
-        break;
+      console.warn(`[通知监听 V2] 未处理的状态: ${status}`);
+      break;
  }
 };

@@ -151,6 +151,11 @@ const Layout = () => {
  const routersEles = useRoutes(routers);
  const { addListener, setupCloseListener } = useListen();
  const initRef = useRef(false);
+  const [themeReady, setThemeReady] = useState(false);
+
+  useEffect(() => {
+    setThemeReady(true);
+  }, [theme]);

  const handleNotice = useCallback(
    (payload: [string, string]) => {
@@ -271,7 +276,7 @@ const Layout = () => {
        return unlisten;
      } catch (err) {
        console.error("[Layout] 监听启动完成事件失败:", err);
-        return () => {};
+        return () => { };
      }
    };

@@ -288,7 +293,7 @@ const Layout = () => {
        }, 100);
      }, 100);
    }, 100);
-    
+
    // 启动监听器
    const unlistenPromise = listenStartupCompleted();

@@ -311,13 +316,39 @@ const Layout = () => {
    }
  }, [start_page]);

+  if (!themeReady) {
+    return (
+      <div
+        style={{
+          width: "100vw",
+          height: "100vh",
+          background: mode === "light" ? "#fff" : "#181a1b",
+          transition: "background 0.2s",
+        }}
+      />
+    );
+  }
+
  if (!routersEles) return null;

  return (
    <SWRConfig value={{ errorRetryCount: 3 }}>
      <ThemeProvider theme={theme}>
        <NoticeManager />
-
+        <div
+          style={{
+            animation: "fadeIn 0.5s",
+            WebkitAnimation: "fadeIn 0.5s",
+          }}
+        />
+        <style>
+          {`
+            @keyframes fadeIn {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }
+          `}
+        </style>
        <Paper
          square
          elevation={0}
@@ -337,11 +368,11 @@ const Layout = () => {
            ({ palette }) => ({ bgcolor: palette.background.paper }),
            OS === "linux"
              ? {
-                  borderRadius: "8px",
-                  border: "1px solid var(--divider-color)",
-                  width: "calc(100vw - 4px)",
-                  height: "calc(100vh - 4px)",
-                }
+                borderRadius: "8px",
+                border: "1px solid var(--divider-color)",
+                width: "calc(100vw - 4px)",
+                height: "calc(100vh - 4px)",
+              }
              : {},
          ]}
        >
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -252,9 +252,13 @@ export const HomePage = () => {
    setSettingsOpen(true);
  };

-  // 新增：保存设置
+  // 新增：保存设置时用requestIdleCallback/setTimeout
  const handleSaveSettings = (newCards: HomeCardsSettings) => {
-    setHomeCards(newCards);
+    if (window.requestIdleCallback) {
+      window.requestIdleCallback(() => setHomeCards(newCards));
+    } else {
+      setTimeout(() => setHomeCards(newCards), 0);
+    }
  };

  return (
--- a/src/pages/unlock.tsx
+++ b/src/pages/unlock.tsx
@@ -24,6 +24,7 @@ import {
  RefreshRounded,
  AccessTimeOutlined,
 } from "@mui/icons-material";
+import { showNotice } from "@/services/noticeService";

 // 定义流媒体检测项类型
 interface UnlockItem {
@@ -121,61 +122,67 @@ const UnlockPage = () => {
    }
  };

+  // invoke加超时，防止后端卡死
+  const invokeWithTimeout = async <T,>(
+    cmd: string,
+    args?: any,
+    timeout = 15000,
+  ): Promise<T> => {
+    return Promise.race([
+      invoke<T>(cmd, args),
+      new Promise<T>((_, reject) => setTimeout(() => reject(new Error("Timeout")), timeout)),
+    ]);
+  };
+
  // 执行全部项目检测
  const checkAllMedia = useLockFn(async () => {
    try {
      setIsCheckingAll(true);
-      const result = await invoke<UnlockItem[]>("check_media_unlock");
+      const result = await invokeWithTimeout<UnlockItem[]>("check_media_unlock");
      const sortedItems = sortItemsByName(result);

-      // 更新UI
      setUnlockItems(sortedItems);
      const currentTime = new Date().toLocaleString();
      setLastCheckTime(currentTime);

-      // 保存结果到本地存储
      saveResultsToStorage(sortedItems, currentTime);

      setIsCheckingAll(false);
    } catch (err: any) {
      setIsCheckingAll(false);
+      showNotice('error', err?.message || err?.toString() || '检测超时或失败');
+      alert("检测超时或失败: " + (err?.message || err));
      console.error("Failed to check media unlock:", err);
    }
  });

-  // 根据项目名称检测单个流媒体服务
+  // 检测单个流媒体服务
  const checkSingleMedia = useLockFn(async (name: string) => {
    try {
-      // 将该项目添加到加载状态
      setLoadingItems((prev) => [...prev, name]);
+      const result = await invokeWithTimeout<UnlockItem[]>("check_media_unlock");

-      // 执行检测
-      const result = await invoke<UnlockItem[]>("check_media_unlock");
-
-      // 找到对应的检测结果
      const targetItem = result.find((item: UnlockItem) => item.name === name);

      if (targetItem) {
-        // 更新单个检测项结果并按名称排序
        const updatedItems = sortItemsByName(
          unlockItems.map((item: UnlockItem) =>
            item.name === name ? targetItem : item,
          ),
        );

-        // 更新UI
        setUnlockItems(updatedItems);
        const currentTime = new Date().toLocaleString();
        setLastCheckTime(currentTime);

-        // 保存结果到本地存储
        saveResultsToStorage(updatedItems, currentTime);
      }

-      // 移除加载状态
      setLoadingItems((prev) => prev.filter((item) => item !== name));
    } catch (err: any) {
      setLoadingItems((prev) => prev.filter((item) => item !== name));
+      showNotice('error', err?.message || err?.toString() || `检测${name}失败`);
+      alert("检测超时或失败: " + (err?.message || err));
      console.error(`Failed to check ${name}:`, err);
    }
  });