[Feature] 添加日志保留行数调节选项 (#217)

* feat: Add LogLevel option.

* style: update debug log color.

* fix: code lint, constant extract, i18

* chore: Add prettierignore

* refactor: Remove LogType.

* fix(type err.): type err

* Update src/signals/request.ts

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: sdttttt <Kaltsit@111.com>

* refactor: var name change.

* Update package.json

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: sdttttt <Kaltsit@111.com>

* feat: Add log max rows option.

* style(format): format

* fix: import err.

* chore: reset.

* Update package.json

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: sdttttt <Kaltsit@111.com>

* Update src/pages/Config.tsx

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: sdttttt <Kaltsit@111.com>

* Update src/pages/Config.tsx

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: sdttttt <Kaltsit@111.com>

---------

Signed-off-by: sdttttt <Kaltsit@111.com>
Signed-off-by: sdttttt <sdttttt@163.com>
Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>

src/constants/index.ts

@@ -161,3 +161,5 @@ export enum LOG_LEVEL {
   Debug = 'debug',
   Silent = 'silent',
 }
+
+export const LOGS_TABLE_MAX_ROWS_LIST = [200, 300, 500, 800, 1000]

src/i18n/en.ts

@@ -67,6 +67,7 @@ export default {
   debug: 'debug',
   warning: 'warning',
   error: 'error',
+  logMaxRows: 'Log Maxinum Reserved Rows',
   xs: 'Extra small size',
   sm: 'Small size',
   md: 'Normal size',

src/i18n/zh.ts

@@ -67,6 +67,7 @@ export default {
   debug: '调试',
   warning: '警告',
   error: '错误',
+  logMaxRows: '日志最大保留行数',
   xs: '超小尺寸',
   sm: '小尺寸',
   md: '正常尺寸',

src/pages/Config.tsx

@@ -25,6 +25,7 @@ import {
 import { Button } from '~/components'
 import {
   LANG,
+  LOGS_TABLE_MAX_ROWS_LIST,
   LOG_LEVEL,
   MODE_OPTIONS,
   PROXIES_ORDERING_TYPE,
@@ -41,6 +42,7 @@ import {
   favNightTheme,
   latencyTestTimeoutDuration,
   logLevel,
+  logMaxRows,
   proxiesOrderingType,
   proxiesPreviewType,
   renderInTwoColumns,
@@ -51,6 +53,7 @@ import {
   setFavNightTheme,
   setLatencyTestTimeoutDuration,
   setLogLevel,
+  setLogMaxRows,
   setProxiesOrderingType,
   setProxiesPreviewType,
   setRenderInTwoColumns,
@@ -429,6 +432,26 @@ const ConfigForXd = () => {
         </select>
       </div>
 
+      <div>
+        <ConfigTitle>{t('logMaxRows')}</ConfigTitle>
+
+        <select
+          class="select select-bordered w-full max-w-xs"
+          value={rows}
+          onChange={(e) => {
+            setLogMaxRows(parseInt(e.target.value))
+          }}
+        >
+          <For each={LOGS_TABLE_MAX_ROWS_LIST}>
+            {(rows) => (
+              <option value={rows}>
+                {rows}
+              </option>
+            )}
+          </For>
+        </select>
+      </div>
+
       <div>
         <Button
           onClick={() => {

src/pages/Logs.tsx

@@ -7,9 +7,9 @@ import {
 } from '@tanstack/solid-table'
 import { For, Index, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { LOGS_TABLE_MAX_ROWS, LOG_LEVEL } from '~/constants'
+import { LOG_LEVEL } from '~/constants'
 import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
-import { logLevel } from '~/signals/config'
+import { logLevel, logMaxRows } from '~/signals/config'
 import { Log } from '~/types'
 
 type LogWithSeq = Log & { seq: number }
@@ -21,6 +21,7 @@ export default () => {
   const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 
   const logsData = useWsRequest<Log>('logs', { level: logLevel() })
+  const maxRows = logMaxRows()
 
   createEffect(() => {
     const data = logsData()
@@ -29,7 +30,7 @@ export default () => {
       return
     }
 
-    setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, LOGS_TABLE_MAX_ROWS))
+    setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, maxRows))
 
     seq++
   })

src/signals/config.ts

@@ -58,6 +58,11 @@ export const [logLevel, setLogLevel] = makePersisted(
   { name: 'logLevel', storage: localStorage },
 )
 
+export const [logMaxRows, setLogMaxRows] = makePersisted(createSignal(300), {
+  name: 'logMaxRows',
+  storage: localStorage,
+})
+
 export const tableSizeClassName = (size: TAILWINDCSS_SIZE) => {
   let className = 'table-xs'