connections page

src/main/core/mihomoApi.ts

@@ -45,6 +45,16 @@ export const mihomoConnections = async (): Promise<IMihomoConnectionsInfo> => {
   return instance.get('/connections') as Promise<IMihomoConnectionsInfo>
 }
 
+export const mihomoCloseConnection = async (id: string): Promise<void> => {
+  const instance = await getAxios()
+  return instance.delete(`/connections/${encodeURIComponent(id)}`)
+}
+
+export const mihomoCloseAllConnections = async (): Promise<void> => {
+  const instance = await getAxios()
+  return instance.delete('/connections')
+}
+
 export const mihomoRules = async (): Promise<IMihomoRulesInfo> => {
   const instance = await getAxios()
   return instance.get('/rules') as Promise<IMihomoRulesInfo>

src/main/index.ts

@@ -1,5 +1,5 @@
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import { registerIpcMainHandlers } from './utils/cmds'
+import { registerIpcMainHandlers } from './utils/ipc'
 import { app, shell, BrowserWindow } from 'electron'
 import { stopCore, startCore } from './core/manager'
 import { triggerSysProxy } from './resolve/sysproxy'

src/main/utils/ipc.ts

@@ -1,6 +1,8 @@
 import { app, ipcMain } from 'electron'
 import {
   mihomoChangeProxy,
+  mihomoCloseAllConnections,
+  mihomoCloseConnection,
   mihomoConfig,
   mihomoConnections,
   mihomoProxies,
@@ -31,6 +33,8 @@ export function registerIpcMainHandlers(): void {
   ipcMain.handle('mihomoVersion', mihomoVersion)
   ipcMain.handle('mihomoConfig', mihomoConfig)
   ipcMain.handle('mihomoConnections', mihomoConnections)
+  ipcMain.handle('mihomoCloseConnection', (_e, id) => mihomoCloseConnection(id))
+  ipcMain.handle('mihomoCloseAllConnections', mihomoCloseAllConnections)
   ipcMain.handle('mihomoRules', mihomoRules)
   ipcMain.handle('mihomoProxies', mihomoProxies)
   ipcMain.handle('mihomoChangeProxy', (_e, group, proxy) => mihomoChangeProxy(group, proxy))

src/renderer/src/components/connections/connection-item.tsx

@@ -0,0 +1,40 @@
+import { Button, Card, CardBody } from '@nextui-org/react'
+import { mihomoCloseConnection } from '@renderer/utils/ipc'
+import { IoClose } from 'react-icons/io5'
+import React from 'react'
+
+interface Props extends IMihomoConnectionDetail {
+  mutate: () => void
+}
+const ConnectionItem: React.FC<Props> = (props) => {
+  const { id, metadata, mutate } = props
+  return (
+    <Card className="m-2">
+      <CardBody className="">
+        <div className="flex justify-between">
+          <div className="select-none h-[32px] leading-[32px]">
+            {metadata.type}({metadata.network})
+          </div>
+          <div className="select-none h-[32px] leading-[32px]">{metadata.inboundIP}</div>
+          <div className="select-none h-[32px] leading-[32px]">{'-->'}</div>
+          <div className="select-none h-[32px] leading-[32px]">{metadata.remoteDestination}</div>
+          <Button
+            isIconOnly
+            size="sm"
+            color="danger"
+            variant="light"
+            onPress={() => {
+              mihomoCloseConnection(id).then(() => {
+                mutate()
+              })
+            }}
+          >
+            <IoClose className="text-[20px]" />
+          </Button>
+        </div>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default ConnectionItem

src/renderer/src/pages/connections.tsx

@@ -1,7 +1,80 @@
+import ConnectionItem from '@renderer/components/connections/connection-item'
 import BasePage from '@renderer/components/base/base-page'
+import { mihomoCloseAllConnections, mihomoConnections } from '@renderer/utils/ipc'
+import { useMemo, useState } from 'react'
+import { Button, Input } from '@nextui-org/react'
+import useSWR from 'swr'
+import { calcTraffic } from '@renderer/utils/calc'
 
 const Connections: React.FC = () => {
-  return <BasePage title="连接"></BasePage>
+  const { data: connections = { downloadTotal: 0, uploadTotal: 0, connections: [] }, mutate } =
+    useSWR<IMihomoConnectionsInfo>('mihomoConnections', mihomoConnections, {
+      refreshInterval: 1000
+    })
+  const [filter, setFilter] = useState('')
+
+  const filteredConnections = useMemo(() => {
+    if (filter === '') return connections.connections
+    return connections.connections?.filter((connection) => {
+      return connection.metadata.remoteDestination.includes(filter)
+    })
+  }, [connections, filter])
+
+  return (
+    <BasePage
+      title="连接"
+      header={
+        <div className="flex">
+          <div className="flex items-center">
+            <span className="mx-1 text-gray-400">
+              下载: {calcTraffic(connections.downloadTotal)}{' '}
+            </span>
+            <span className="mx-1 text-gray-400">
+              上传: {calcTraffic(connections.uploadTotal)}{' '}
+            </span>
+          </div>
+          <Button
+            className="ml-1"
+            size="sm"
+            color="primary"
+            onPress={() =>
+              mihomoCloseAllConnections().then(() => {
+                mutate()
+              })
+            }
+          >
+            关闭所有连接
+          </Button>
+        </div>
+      }
+    >
+      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
+        <Input
+          variant="bordered"
+          size="sm"
+          value={filter}
+          placeholder="筛选过滤"
+          onValueChange={setFilter}
+        />
+      </div>
+      {filteredConnections?.map((connection) => {
+        return (
+          <ConnectionItem
+            mutate={mutate}
+            key={connection.id}
+            id={connection.id}
+            chains={connection.chains}
+            download={connection.download}
+            upload={connection.upload}
+            metadata={connection.metadata}
+            rule={connection.rule}
+            rulePayload={connection.rulePayload}
+            start={connection.start}
+          />
+        )
+      })}
+    </BasePage>
+  )
 }
 
 export default Connections

src/renderer/src/utils/ipc.ts

@@ -10,6 +10,14 @@ export async function mihomoConnections(): Promise<IMihomoConnectionsInfo> {
   return await window.electron.ipcRenderer.invoke('mihomoConnections')
 }
 
+export async function mihomoCloseConnection(id: string): Promise<void> {
+  return await window.electron.ipcRenderer.invoke('mihomoCloseConnection', id)
+}
+
+export async function mihomoCloseAllConnections(): Promise<void> {
+  return await window.electron.ipcRenderer.invoke('mihomoCloseAllConnections')
+}
+
 export async function mihomoRules(): Promise<IMihomoRulesInfo> {
   return await window.electron.ipcRenderer.invoke('mihomoRules')
 }