feat: 新版webui

napcat.webui/src/pages/dashboard/logs.tsx

@@ -0,0 +1,79 @@
+import { Tab, Tabs } from '@heroui/tabs'
+import { useRequest } from 'ahooks'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+
+import HistoryLogs from '@/components/log_com/history'
+import RealTimeLogs from '@/components/log_com/realtime'
+
+import WebUIManager from '@/controllers/webui_manager'
+
+export default function LogsPage() {
+  const {
+    data: logList,
+    loading: logListLoading,
+    error: logListError,
+    refresh: refreshLogList
+  } = useRequest(WebUIManager.getLogList)
+  const [selectedLog, setSelectedLog] = useState<string | null>(null)
+  const [logContent, setLogContent] = useState<string | null>(null)
+  const [logLoading, setLogLoading] = useState<boolean>(false)
+  const onLogSelect = (name: string) => {
+    setSelectedLog(name)
+  }
+  const onLoadLog = async () => {
+    if (!selectedLog) {
+      return
+    }
+    setLogLoading(true)
+    try {
+      const result = await WebUIManager.getLogContent(selectedLog)
+      setLogContent(result)
+    } catch (error) {
+      const msg = (error as Error).message
+      toast.error(`加载日志失败: ${msg}`)
+    } finally {
+      setLogLoading(false)
+    }
+  }
+  useEffect(() => {
+    if (logList && logList.length > 0) {
+      setSelectedLog(logList[0])
+    }
+  }, [logList])
+  useEffect(() => {
+    if (selectedLog) {
+      onLoadLog()
+    }
+  }, [selectedLog])
+  return (
+    <div className="h-[calc(100vh_-_8rem)] flex flex-col gap-4 items-center pt-4 px-2">
+      <Tabs
+        aria-label="Logs"
+        classNames={{
+          panel: 'w-full flex-1 h-full py-0 flex flex-col gap-4',
+          base: 'flex-shrink-0 !h-fit',
+          tabList: 'bg-opacity-50 backdrop-blur-sm',
+          cursor: 'bg-opacity-60 backdrop-blur-sm'
+        }}
+      >
+        <Tab title="实时日志">
+          <RealTimeLogs />
+        </Tab>
+        <Tab title="历史日志">
+          <HistoryLogs
+            list={logList || []}
+            onSelect={onLogSelect}
+            selectedLog={selectedLog || undefined}
+            refreshList={refreshLogList}
+            refreshLog={onLoadLog}
+            listLoading={logListLoading}
+            logLoading={logLoading}
+            listError={logListError}
+            logContent={logContent || undefined}
+          />
+        </Tab>
+      </Tabs>
+    </div>
+  )
+}