set log level

src/main/core/mihomoApi.ts

@@ -245,12 +245,14 @@ export const stopMihomoLogs = (): void => {
 }
 
 const mihomoLogs = (): void => {
-  let server = getControledMihomoConfig()['external-controller']
+  const { secret = '', 'log-level': level = 'info' } = getControledMihomoConfig()
-  const secret = getControledMihomoConfig().secret ?? ''
+  let { 'external-controller': server } = getControledMihomoConfig()
   if (server?.startsWith(':')) server = `127.0.0.1${server}`
   stopMihomoLogs()
 
-  mihomoLogsWs = new WebSocket(`ws://${server}/logs?token=${encodeURIComponent(secret)}`)
+  mihomoLogsWs = new WebSocket(
+    `ws://${server}/logs?token=${encodeURIComponent(secret)}&level=${level}`
+  )
 
   mihomoLogsWs.onmessage = (e): void => {
     const data = e.data as string

src/renderer/src/pages/logs.tsx

@@ -1,28 +1,38 @@
 import BasePage from '@renderer/components/base/base-page'
 import { startMihomoLogs, stopMihomoLogs } from '@renderer/utils/ipc'
 import LogItem from '@renderer/components/logs/log-item'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
-import { Input } from '@nextui-org/react'
+import { Button, Input } from '@nextui-org/react'
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
 
 const Logs: React.FC = () => {
   const [logs, setLogs] = useState<IMihomoLogInfo[]>([])
   const [filter, setFilter] = useState('')
+  const [trace, setTrace] = useState(true)
 
+  const virtuosoRef = useRef<VirtuosoHandle>(null)
   const filteredLogs = useMemo(() => {
     if (filter === '') return logs
     return logs.filter((log) => {
-      return log.payload.includes(filter)
+      return log.payload.includes(filter) || log.type.includes(filter)
     })
   }, [logs, filter])
 
+  useEffect(() => {
+    if (!trace) return
+    virtuosoRef.current?.scrollToIndex({
+      index: filteredLogs.length - 1,
+      behavior: 'smooth',
+      align: 'end',
+      offset: 0
+    })
+  }, [filteredLogs, trace])
+
   useEffect(() => {
     startMihomoLogs()
     window.electron.ipcRenderer.on('mihomoLogs', (_e, log: IMihomoLogInfo) => {
-      log.time = new Date().toISOString()
+      log.time = new Date().toLocaleString()
       setLogs((prevLogs) => {
-        if (prevLogs.length >= 200) {
-          prevLogs.shift()
-        }
         return [...prevLogs, log]
       })
     })
@@ -35,25 +45,45 @@ const Logs: React.FC = () => {
 
   return (
     <BasePage title="实时日志">
-      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
+      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40 flex p-2">
-        <Input
+        <div className="w-full flex">
-          variant="bordered"
+          <Input
-          size="sm"
+            variant="bordered"
-          value={filter}
+            size="sm"
-          placeholder="筛选过滤"
+            value={filter}
-          onValueChange={setFilter}
+            placeholder="筛选过滤"
-        />
+            onValueChange={setFilter}
-      </div>
-      {filteredLogs.map((log, index) => {
-        return (
-          <LogItem
-            key={log.payload + index}
-            time={log.time}
-            type={log.type}
-            payload={log.payload}
           />
-        )
+          <Button
-      })}
+            size="sm"
+            className="ml-2"
+            color={trace ? 'primary' : 'default'}
+            variant={trace ? 'solid' : 'bordered'}
+            onPress={() => {
+              setTrace((prev) => !prev)
+            }}
+          >
+            追踪
+          </Button>
+        </div>
+      </div>
+      <Virtuoso
+        autoFocus
+        ref={virtuosoRef}
+        style={{ height: 'calc(100vh - 100px)' }}
+        totalCount={filteredLogs.length}
+        itemContent={(index) => {
+          const log = filteredLogs[index]
+          return (
+            <LogItem
+              key={log.payload + index}
+              time={log.time}
+              type={log.type}
+              payload={log.payload}
+            />
+          )
+        }}
+      />
     </BasePage>
   )
 }

src/renderer/src/pages/mihomo.tsx

@@ -297,9 +297,9 @@ const Mihomo: React.FC = () => {
             }}
           >
             <SelectItem key="silent">静默</SelectItem>
-            <SelectItem key="info">信息</SelectItem>
-            <SelectItem key="warning">警告</SelectItem>
             <SelectItem key="error">错误</SelectItem>
+            <SelectItem key="warning">警告</SelectItem>
+            <SelectItem key="info">信息</SelectItem>
             <SelectItem key="debug">调试</SelectItem>
           </Select>
         </SettingItem>

src/renderer/src/pages/rules.tsx

@@ -23,7 +23,7 @@ const Rules: React.FC = () => {
 
   return (
     <BasePage title="分流规则">
-      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
+      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40 flex p-2">
         <Input
           variant="bordered"
           size="sm"