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

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, // 平滑滚动
             }}

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 = {

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, // 平滑滚动
             }}

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, // 平滑滚动
             }}