From 4aeac0ebb3b1bcad0ebd73fc022a4981afaea91d Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Mon, 19 Aug 2024 10:10:22 +0800
Subject: [PATCH] support interfaces info

---
 changelog.md                                  |   1 +
 src/main/sys/interface.ts                     |   5 +
 src/main/utils/ipc.ts                         |   2 +
 .../src/components/mihomo/interface-modal.tsx |  67 +++
 src/renderer/src/pages/mihomo.tsx             | 497 +++++++++---------
 src/renderer/src/utils/ipc.ts                 |   4 +
 src/shared/types.d.ts                         |   1 +
 7 files changed, 340 insertions(+), 237 deletions(-)
 create mode 100644 src/main/sys/interface.ts
 create mode 100644 src/renderer/src/components/mihomo/interface-modal.tsx

diff --git a/changelog.md b/changelog.md
index 4db6d2f..aaff616 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,4 @@
 ### New Features
 
 - 添加覆写脚本执行日志功能
+- 支持查看局域网网络信息
diff --git a/src/main/sys/interface.ts b/src/main/sys/interface.ts
new file mode 100644
index 0000000..36744e4
--- /dev/null
+++ b/src/main/sys/interface.ts
@@ -0,0 +1,5 @@
+import os from 'os'
+
+export function getInterfaces(): NodeJS.Dict<NetworkInterfaceInfo[]> {
+  return os.networkInterfaces()
+}
diff --git a/src/main/utils/ipc.ts b/src/main/utils/ipc.ts
index 40d9807..9721497 100644
--- a/src/main/utils/ipc.ts
+++ b/src/main/utils/ipc.ts
@@ -51,6 +51,7 @@ import { getFilePath, openUWPTool, readTextFile, setupFirewall } from '../sys/mi
 import { getRuntimeConfig, getRuntimeConfigStr } from '../core/factory'
 import { isPortable, setPortable } from './dirs'
 import { listWebdavBackups, webdavBackup, webdavRestore } from '../resolve/backup'
+import { getInterfaces } from '../sys/interface'
 
 function ipcErrorWrapper<T>( // eslint-disable-next-line @typescript-eslint/no-explicit-any
   fn: (...args: any[]) => Promise<T> // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -139,6 +140,7 @@ export function registerIpcMainHandlers(): void {
   ipcMain.handle('platform', () => process.platform)
   ipcMain.handle('openUWPTool', ipcErrorWrapper(openUWPTool))
   ipcMain.handle('setupFirewall', ipcErrorWrapper(setupFirewall))
+  ipcMain.handle('getInterfaces', getInterfaces)
   ipcMain.handle('setPortable', (_e, portable) => ipcErrorWrapper(setPortable)(portable))
   ipcMain.handle('isPortable', isPortable)
   ipcMain.handle('webdavBackup', ipcErrorWrapper(webdavBackup))
diff --git a/src/renderer/src/components/mihomo/interface-modal.tsx b/src/renderer/src/components/mihomo/interface-modal.tsx
new file mode 100644
index 0000000..6bae34b
--- /dev/null
+++ b/src/renderer/src/components/mihomo/interface-modal.tsx
@@ -0,0 +1,67 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Snippet
+} from '@nextui-org/react'
+import React, { useEffect, useState } from 'react'
+import { getInterfaces } from '@renderer/utils/ipc'
+interface Props {
+  onClose: () => void
+}
+const InterfaceModal: React.FC<Props> = (props) => {
+  const { onClose } = props
+  const [info, setInfo] = useState<Record<string, NetworkInterfaceInfo[]>>({})
+  const getInfo = async (): Promise<void> => {
+    setInfo(await getInterfaces())
+  }
+
+  useEffect(() => {
+    getInfo()
+  }, [])
+
+  return (
+    <Modal
+      backdrop="blur"
+      hideCloseButton
+      isOpen={true}
+      onOpenChange={onClose}
+      scrollBehavior="inside"
+    >
+      <ModalContent>
+        <ModalHeader className="flex">网络信息</ModalHeader>
+        <ModalBody>
+          {Object.entries(info).map(([key, value]) => {
+            return (
+              <div key={key}>
+                <h4 className="font-bold">{key}</h4>
+                {value.map((v) => {
+                  return (
+                    <div key={v.address}>
+                      <div className="mt-2 flex justify-between">
+                        {v.family}
+                        <Snippet symbol="" size="sm">
+                          {v.address}
+                        </Snippet>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )
+          })}
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="light" onPress={onClose}>
+            关闭
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default InterfaceModal
diff --git a/src/renderer/src/pages/mihomo.tsx b/src/renderer/src/pages/mihomo.tsx
index 6a83825..c39f4eb 100644
--- a/src/renderer/src/pages/mihomo.tsx
+++ b/src/renderer/src/pages/mihomo.tsx
@@ -5,8 +5,10 @@ import SettingItem from '@renderer/components/base/base-setting-item'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
 import { platform } from '@renderer/utils/init'
+import { FaNetworkWired } from 'react-icons/fa'
 import { restartCore } from '@renderer/utils/ipc'
 import React, { useState } from 'react'
+import InterfaceModal from '@renderer/components/mihomo/interface-modal'
 
 const CoreMap = {
   mihomo: '稳定版',
@@ -43,128 +45,47 @@ const Mihomo: React.FC = () => {
   const [externalControllerInput, setExternalControllerInput] = useState(externalController)
   const [secretInput, setSecretInput] = useState(secret)
 
+  const [lanOpen, setLanOpen] = useState(false)
+
   const onChangeNeedRestart = async (patch: Partial<IMihomoConfig>): Promise<void> => {
     await patchControledMihomoConfig(patch)
     await restartCore()
   }
 
   return (
-    <BasePage title="内核设置">
-      <SettingCard>
-        <SettingItem title="内核版本" divider>
-          <Select
-            className="w-[100px]"
-            size="sm"
-            selectedKeys={new Set([core])}
-            onSelectionChange={async (v) => {
-              try {
-                await patchAppConfig({ core: v.currentKey as 'mihomo' | 'mihomo-alpha' })
-                await restartCore()
-              } catch (e) {
-                alert(e)
-              } finally {
-                PubSub.publish('mihomo-core-changed')
-              }
-            }}
-          >
-            <SelectItem key="mihomo">{CoreMap['mihomo']}</SelectItem>
-            <SelectItem key="mihomo-alpha">{CoreMap['mihomo-alpha']}</SelectItem>
-          </Select>
-        </SettingItem>
-        <SettingItem title="混合端口" divider>
-          <div className="flex">
-            {mixedPortInput !== mixedPort && (
-              <Button
-                size="sm"
-                color="primary"
-                className="mr-2"
-                onPress={() => {
-                  onChangeNeedRestart({ 'mixed-port': mixedPortInput })
-                }}
-              >
-                确认
-              </Button>
-            )}
-
-            <Input
-              size="sm"
-              type="number"
+    <>
+      {lanOpen && <InterfaceModal onClose={() => setLanOpen(false)} />}
+      <BasePage title="内核设置">
+        <SettingCard>
+          <SettingItem title="内核版本" divider>
+            <Select
               className="w-[100px]"
-              value={mixedPortInput.toString()}
-              max={65535}
-              min={0}
-              onValueChange={(v) => {
-                setMixedPortInput(parseInt(v))
-              }}
-            />
-          </div>
-        </SettingItem>
-        <SettingItem title="Socks端口" divider>
-          <div className="flex">
-            {socksPortInput !== socksPort && (
-              <Button
-                size="sm"
-                color="primary"
-                className="mr-2"
-                onPress={() => {
-                  onChangeNeedRestart({ 'socks-port': socksPortInput })
-                }}
-              >
-                确认
-              </Button>
-            )}
-
-            <Input
               size="sm"
-              type="number"
-              className="w-[100px]"
-              value={socksPortInput.toString()}
-              max={65535}
-              min={0}
-              onValueChange={(v) => {
-                setSocksPortInput(parseInt(v))
+              selectedKeys={new Set([core])}
+              onSelectionChange={async (v) => {
+                try {
+                  await patchAppConfig({ core: v.currentKey as 'mihomo' | 'mihomo-alpha' })
+                  await restartCore()
+                } catch (e) {
+                  alert(e)
+                } finally {
+                  PubSub.publish('mihomo-core-changed')
+                }
               }}
-            />
-          </div>
-        </SettingItem>
-        <SettingItem title="Http端口" divider>
-          <div className="flex">
-            {httpPortInput !== httpPort && (
-              <Button
-                size="sm"
-                color="primary"
-                className="mr-2"
-                onPress={() => {
-                  onChangeNeedRestart({ port: httpPortInput })
-                }}
-              >
-                确认
-              </Button>
-            )}
-
-            <Input
-              size="sm"
-              type="number"
-              className="w-[100px]"
-              value={httpPortInput.toString()}
-              max={65535}
-              min={0}
-              onValueChange={(v) => {
-                setHttpPortInput(parseInt(v))
-              }}
-            />
-          </div>
-        </SettingItem>
-        {platform !== 'win32' && (
-          <SettingItem title="Redir端口" divider>
+            >
+              <SelectItem key="mihomo">{CoreMap['mihomo']}</SelectItem>
+              <SelectItem key="mihomo-alpha">{CoreMap['mihomo-alpha']}</SelectItem>
+            </Select>
+          </SettingItem>
+          <SettingItem title="混合端口" divider>
             <div className="flex">
-              {redirPortInput !== redirPort && (
+              {mixedPortInput !== mixedPort && (
                 <Button
                   size="sm"
                   color="primary"
                   className="mr-2"
                   onPress={() => {
-                    onChangeNeedRestart({ 'redir-port': redirPortInput })
+                    onChangeNeedRestart({ 'mixed-port': mixedPortInput })
                   }}
                 >
                   确认
@@ -175,26 +96,24 @@ const Mihomo: React.FC = () => {
                 size="sm"
                 type="number"
                 className="w-[100px]"
-                value={redirPortInput.toString()}
+                value={mixedPortInput.toString()}
                 max={65535}
                 min={0}
                 onValueChange={(v) => {
-                  setRedirPortInput(parseInt(v))
+                  setMixedPortInput(parseInt(v))
                 }}
               />
             </div>
           </SettingItem>
-        )}
-        {platform === 'linux' && (
-          <SettingItem title="TProxy端口" divider>
+          <SettingItem title="Socks端口" divider>
             <div className="flex">
-              {tproxyPortInput !== tproxyPort && (
+              {socksPortInput !== socksPort && (
                 <Button
                   size="sm"
                   color="primary"
                   className="mr-2"
                   onPress={() => {
-                    onChangeNeedRestart({ 'tproxy-port': tproxyPortInput })
+                    onChangeNeedRestart({ 'socks-port': socksPortInput })
                   }}
                 >
                   确认
@@ -205,151 +124,255 @@ const Mihomo: React.FC = () => {
                 size="sm"
                 type="number"
                 className="w-[100px]"
-                value={tproxyPortInput.toString()}
+                value={socksPortInput.toString()}
                 max={65535}
                 min={0}
                 onValueChange={(v) => {
-                  setTproxyPortInput(parseInt(v))
+                  setSocksPortInput(parseInt(v))
                 }}
               />
             </div>
           </SettingItem>
-        )}
-        <SettingItem title="外部控制" divider>
-          <div className="flex">
-            {externalControllerInput !== externalController && (
-              <Button
-                size="sm"
-                color="primary"
-                className="mr-2"
-                onPress={() => {
-                  onChangeNeedRestart({ 'external-controller': externalControllerInput })
-                }}
-              >
-                确认
-              </Button>
-            )}
+          <SettingItem title="Http端口" divider>
+            <div className="flex">
+              {httpPortInput !== httpPort && (
+                <Button
+                  size="sm"
+                  color="primary"
+                  className="mr-2"
+                  onPress={() => {
+                    onChangeNeedRestart({ port: httpPortInput })
+                  }}
+                >
+                  确认
+                </Button>
+              )}
 
-            <Input
+              <Input
+                size="sm"
+                type="number"
+                className="w-[100px]"
+                value={httpPortInput.toString()}
+                max={65535}
+                min={0}
+                onValueChange={(v) => {
+                  setHttpPortInput(parseInt(v))
+                }}
+              />
+            </div>
+          </SettingItem>
+          {platform !== 'win32' && (
+            <SettingItem title="Redir端口" divider>
+              <div className="flex">
+                {redirPortInput !== redirPort && (
+                  <Button
+                    size="sm"
+                    color="primary"
+                    className="mr-2"
+                    onPress={() => {
+                      onChangeNeedRestart({ 'redir-port': redirPortInput })
+                    }}
+                  >
+                    确认
+                  </Button>
+                )}
+
+                <Input
+                  size="sm"
+                  type="number"
+                  className="w-[100px]"
+                  value={redirPortInput.toString()}
+                  max={65535}
+                  min={0}
+                  onValueChange={(v) => {
+                    setRedirPortInput(parseInt(v))
+                  }}
+                />
+              </div>
+            </SettingItem>
+          )}
+          {platform === 'linux' && (
+            <SettingItem title="TProxy端口" divider>
+              <div className="flex">
+                {tproxyPortInput !== tproxyPort && (
+                  <Button
+                    size="sm"
+                    color="primary"
+                    className="mr-2"
+                    onPress={() => {
+                      onChangeNeedRestart({ 'tproxy-port': tproxyPortInput })
+                    }}
+                  >
+                    确认
+                  </Button>
+                )}
+
+                <Input
+                  size="sm"
+                  type="number"
+                  className="w-[100px]"
+                  value={tproxyPortInput.toString()}
+                  max={65535}
+                  min={0}
+                  onValueChange={(v) => {
+                    setTproxyPortInput(parseInt(v))
+                  }}
+                />
+              </div>
+            </SettingItem>
+          )}
+          <SettingItem title="外部控制" divider>
+            <div className="flex">
+              {externalControllerInput !== externalController && (
+                <Button
+                  size="sm"
+                  color="primary"
+                  className="mr-2"
+                  onPress={() => {
+                    onChangeNeedRestart({ 'external-controller': externalControllerInput })
+                  }}
+                >
+                  确认
+                </Button>
+              )}
+
+              <Input
+                size="sm"
+                value={externalControllerInput}
+                onValueChange={(v) => {
+                  setExternalControllerInput(v)
+                }}
+              />
+            </div>
+          </SettingItem>
+          <SettingItem title="外部控制访问密钥" divider>
+            <div className="flex">
+              {secretInput !== secret && (
+                <Button
+                  size="sm"
+                  color="primary"
+                  className="mr-2"
+                  onPress={() => {
+                    onChangeNeedRestart({ secret: secretInput })
+                  }}
+                >
+                  确认
+                </Button>
+              )}
+
+              <Input
+                size="sm"
+                type="password"
+                value={secretInput}
+                onValueChange={(v) => {
+                  setSecretInput(v)
+                }}
+              />
+            </div>
+          </SettingItem>
+          <SettingItem title="IPv6" divider>
+            <Switch
               size="sm"
-              value={externalControllerInput}
+              isSelected={ipv6}
               onValueChange={(v) => {
-                setExternalControllerInput(v)
+                onChangeNeedRestart({ ipv6: v })
               }}
             />
-          </div>
-        </SettingItem>
-        <SettingItem title="外部控制访问密钥" divider>
-          <div className="flex">
-            {secretInput !== secret && (
+          </SettingItem>
+          <SettingItem
+            title="允许局域网连接"
+            actions={
               <Button
                 size="sm"
-                color="primary"
-                className="mr-2"
+                isIconOnly
+                variant="light"
+                className="ml-2"
                 onPress={() => {
-                  onChangeNeedRestart({ secret: secretInput })
+                  setLanOpen(true)
                 }}
               >
-                确认
+                <FaNetworkWired className="text-lg" />
               </Button>
-            )}
-
-            <Input
+            }
+            divider
+          >
+            <Switch
               size="sm"
-              type="password"
-              value={secretInput}
+              isSelected={allowLan}
               onValueChange={(v) => {
-                setSecretInput(v)
+                onChangeNeedRestart({ 'allow-lan': v })
               }}
             />
-          </div>
-        </SettingItem>
-        <SettingItem title="IPv6" divider>
-          <Switch
-            size="sm"
-            isSelected={ipv6}
-            onValueChange={(v) => {
-              onChangeNeedRestart({ ipv6: v })
-            }}
-          />
-        </SettingItem>
-        <SettingItem title="允许局域网连接" divider>
-          <Switch
-            size="sm"
-            isSelected={allowLan}
-            onValueChange={(v) => {
-              onChangeNeedRestart({ 'allow-lan': v })
-            }}
-          />
-        </SettingItem>
-        <SettingItem title="使用RTT延迟测试" divider>
-          <Switch
-            size="sm"
-            isSelected={unifiedDelay}
-            onValueChange={(v) => {
-              onChangeNeedRestart({ 'unified-delay': v })
-            }}
-          />
-        </SettingItem>
-        <SettingItem title="TCP并发" divider>
-          <Switch
-            size="sm"
-            isSelected={tcpConcurrent}
-            onValueChange={(v) => {
-              onChangeNeedRestart({ 'tcp-concurrent': v })
-            }}
-          />
-        </SettingItem>
-        <SettingItem title="存储选择节点" divider>
-          <Switch
-            size="sm"
-            isSelected={storeSelected}
-            onValueChange={(v) => {
-              onChangeNeedRestart({ profile: { 'store-selected': v } })
-            }}
-          />
-        </SettingItem>
-        <SettingItem title="存储FakeIP" divider>
-          <Switch
-            size="sm"
-            isSelected={storeFakeIp}
-            onValueChange={(v) => {
-              onChangeNeedRestart({ profile: { 'store-fake-ip': v } })
-            }}
-          />
-        </SettingItem>
-        <SettingItem title="日志等级" divider>
-          <Select
-            className="w-[100px]"
-            size="sm"
-            selectedKeys={new Set([logLevel])}
-            onSelectionChange={(v) => {
-              onChangeNeedRestart({ 'log-level': v.currentKey as LogLevel })
-            }}
-          >
-            <SelectItem key="silent">静默</SelectItem>
-            <SelectItem key="error">错误</SelectItem>
-            <SelectItem key="warning">警告</SelectItem>
-            <SelectItem key="info">信息</SelectItem>
-            <SelectItem key="debug">调试</SelectItem>
-          </Select>
-        </SettingItem>
-        <SettingItem title="查找进程">
-          <Select
-            className="w-[100px]"
-            size="sm"
-            selectedKeys={new Set([findProcessMode])}
-            onSelectionChange={(v) => {
-              onChangeNeedRestart({ 'find-process-mode': v.currentKey as FindProcessMode })
-            }}
-          >
-            <SelectItem key="strict">自动</SelectItem>
-            <SelectItem key="off">关闭</SelectItem>
-            <SelectItem key="always">开启</SelectItem>
-          </Select>
-        </SettingItem>
-      </SettingCard>
-    </BasePage>
+          </SettingItem>
+          <SettingItem title="使用RTT延迟测试" divider>
+            <Switch
+              size="sm"
+              isSelected={unifiedDelay}
+              onValueChange={(v) => {
+                onChangeNeedRestart({ 'unified-delay': v })
+              }}
+            />
+          </SettingItem>
+          <SettingItem title="TCP并发" divider>
+            <Switch
+              size="sm"
+              isSelected={tcpConcurrent}
+              onValueChange={(v) => {
+                onChangeNeedRestart({ 'tcp-concurrent': v })
+              }}
+            />
+          </SettingItem>
+          <SettingItem title="存储选择节点" divider>
+            <Switch
+              size="sm"
+              isSelected={storeSelected}
+              onValueChange={(v) => {
+                onChangeNeedRestart({ profile: { 'store-selected': v } })
+              }}
+            />
+          </SettingItem>
+          <SettingItem title="存储FakeIP" divider>
+            <Switch
+              size="sm"
+              isSelected={storeFakeIp}
+              onValueChange={(v) => {
+                onChangeNeedRestart({ profile: { 'store-fake-ip': v } })
+              }}
+            />
+          </SettingItem>
+          <SettingItem title="日志等级" divider>
+            <Select
+              className="w-[100px]"
+              size="sm"
+              selectedKeys={new Set([logLevel])}
+              onSelectionChange={(v) => {
+                onChangeNeedRestart({ 'log-level': v.currentKey as LogLevel })
+              }}
+            >
+              <SelectItem key="silent">静默</SelectItem>
+              <SelectItem key="error">错误</SelectItem>
+              <SelectItem key="warning">警告</SelectItem>
+              <SelectItem key="info">信息</SelectItem>
+              <SelectItem key="debug">调试</SelectItem>
+            </Select>
+          </SettingItem>
+          <SettingItem title="查找进程">
+            <Select
+              className="w-[100px]"
+              size="sm"
+              selectedKeys={new Set([findProcessMode])}
+              onSelectionChange={(v) => {
+                onChangeNeedRestart({ 'find-process-mode': v.currentKey as FindProcessMode })
+              }}
+            >
+              <SelectItem key="strict">自动</SelectItem>
+              <SelectItem key="off">关闭</SelectItem>
+              <SelectItem key="always">开启</SelectItem>
+            </Select>
+          </SettingItem>
+        </SettingCard>
+      </BasePage>
+    </>
   )
 }
 
diff --git a/src/renderer/src/utils/ipc.ts b/src/renderer/src/utils/ipc.ts
index 61bcc73..0803ce9 100644
--- a/src/renderer/src/utils/ipc.ts
+++ b/src/renderer/src/utils/ipc.ts
@@ -251,6 +251,10 @@ export async function setupFirewall(): Promise<void> {
   return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('setupFirewall'))
 }
 
+export async function getInterfaces(): Promise<Record<string, NetworkInterfaceInfo[]>> {
+  return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('getInterfaces'))
+}
+
 export async function setPortable(portable: boolean): Promise<void> {
   return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('setPortable', portable))
 }
diff --git a/src/shared/types.d.ts b/src/shared/types.d.ts
index 663a6f8..0417dcd 100644
--- a/src/shared/types.d.ts
+++ b/src/shared/types.d.ts
@@ -36,6 +36,7 @@ type MihomoProxyType =
 type TunStack = 'gvisor' | 'mixed' | 'system'
 type FindProcessMode = 'off' | 'strict' | 'always'
 type DnsMode = 'normal' | 'fake-ip' | 'redir-host'
+type NetworkInterfaceInfo = os.NetworkInterfaceInfo
 
 interface IAppVersion {
   version: string