feat: display network interface

src/components/setting/mods/network-interface-viewer.tsx

@@ -0,0 +1,135 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { getNetworkInterfacesInfo } from "@/services/cmds";
+import { alpha, Box, Button, Chip, IconButton } from "@mui/material";
+import { ContentCopyRounded } from "@mui/icons-material";
+import { writeText } from "@tauri-apps/api/clipboard";
+
+export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [networkInterfaces, setNetworkInterfaces] = useState<
+    INetworkInterface[]
+  >([]);
+  const [isV4, setIsV4] = useState(true);
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      setOpen(true);
+    },
+    close: () => setOpen(false),
+  }));
+
+  useEffect(() => {
+    if (!open) return;
+    getNetworkInterfacesInfo().then((res) => {
+      console.log(res);
+      setNetworkInterfaces(res);
+    });
+  }, [open]);
+
+  return (
+    <BaseDialog
+      open={open}
+      title={
+        <Box display="flex" justifyContent="space-between">
+          {t("Network Interface")}
+          <Box>
+            <Button
+              variant="contained"
+              size="small"
+              onClick={() => {
+                setIsV4((prev) => !prev);
+              }}
+            >
+              {isV4 ? t("Ipv6") : t("Ipv4")}
+            </Button>
+          </Box>
+        </Box>
+      }
+      contentSx={{ width: 450, maxHeight: 330 }}
+      okBtn={t("Save")}
+      cancelBtn={t("Cancel")}
+      onClose={() => setOpen(false)}
+      onCancel={() => setOpen(false)}
+    >
+      {networkInterfaces.map((item) => (
+        <Box key={item.name}>
+          <h4>{item.name}</h4>
+          <Box>
+            {isV4 && (
+              <>
+                {item.addr.map(
+                  (address) =>
+                    address.V4 && (
+                      <AddressDisplay
+                        key={address.V4.ip}
+                        label="Address"
+                        content={address.V4.ip}
+                      />
+                    )
+                )}
+                <AddressDisplay label="Mac" content={item.mac_addr ?? ""} />
+              </>
+            )}
+            {!isV4 && (
+              <>
+                {item.addr.map(
+                  (address) =>
+                    address.V6 && (
+                      <AddressDisplay
+                        key={address.V6.ip}
+                        label="Address"
+                        content={address.V6.ip}
+                      />
+                    )
+                )}
+                <AddressDisplay label="Mac" content={item.mac_addr ?? ""} />
+              </>
+            )}
+          </Box>
+        </Box>
+      ))}
+    </BaseDialog>
+  );
+});
+
+const AddressDisplay = (props: { label: string; content: string }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        margin: "8px 0",
+      }}
+    >
+      <Box>{props.label}</Box>
+      <Box
+        sx={({ palette }) => ({
+          borderRadius: "8px",
+          padding: "2px",
+          background:
+            palette.mode === "dark"
+              ? alpha(palette.background.paper, 0.3)
+              : alpha(palette.grey[400], 0.3),
+        })}
+      >
+        <Box sx={{ display: "inline", userSelect: "text" }}>
+          {props.content}
+        </Box>
+        <IconButton
+          size="small"
+          onClick={async () => {
+            await writeText(props.content);
+            Notice.success(t("Copy Success"));
+          }}
+        >
+          <ContentCopyRounded sx={{ fontSize: "18px" }} />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+};