feat: add export diagnostic info functionality (#2856)

src/components/setting/setting-verge-advanced.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Typography } from "@mui/material";
 import {
@@ -7,6 +7,7 @@ import {
   openCoreDir,
   openLogsDir,
   openDevTools,
+  exportDiagnosticInfo,
 } from "@/services/cmds";
 import { check as checkUpdate } from "@tauri-apps/plugin-updater";
 import { useVerge } from "@/hooks/use-verge";
@@ -21,6 +22,7 @@ import { LayoutViewer } from "./mods/layout-viewer";
 import { UpdateViewer } from "./mods/update-viewer";
 import { BackupViewer } from "./mods/backup-viewer";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { ContentCopyRounded } from "@mui/icons-material";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -51,6 +53,11 @@ const SettingVergeAdvanced = ({ onError }: Props) => {
     }
   };
 
+  const onExportDiagnosticInfo = useCallback(async () => {
+    await exportDiagnosticInfo();
+    Notice.success(t("Copy Success"), 1000);
+  }, []);
+
   return (
     <SettingList title={t("Verge Advanced Setting")}>
       <ThemeViewer ref={themeRef} />
@@ -111,6 +118,16 @@ const SettingVergeAdvanced = ({ onError }: Props) => {
         label={t("Exit")}
       />
 
+      <SettingItem
+        label={t("Export Diagnostic Info")}
+        extra={
+          <TooltipIcon
+            icon={ContentCopyRounded}
+            onClick={onExportDiagnosticInfo}
+          />
+        }
+      ></SettingItem>
+
       <SettingItem label={t("Verge Version")}>
         <Typography sx={{ py: "7px", pr: 1 }}>v{version}</Typography>
       </SettingItem>