[Feature] 添加日志等级设置 (#215)

* 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>

---------

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

.prettierignore

@@ -0,0 +1,2 @@
+CHANGELOG.md
+pnpm-lock.yaml

.prettierrc

@@ -4,5 +4,6 @@
     "prettier-plugin-tailwindcss"
   ],
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "endOfLine": "crlf"
 }

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite",
+    "format": "prettier -w .",
     "prepare": "husky install",
     "serve": "vite preview"
   },

src/constants/index.ts

@@ -153,3 +153,11 @@ export enum MODE_OPTIONS {
   Rule = 'rule',
   Direct = 'direct',
 }
+
+export enum LOG_LEVEL {
+  Info = 'info',
+  Error = 'error',
+  Warning = 'warning',
+  Debug = 'debug',
+  Silent = 'silent',
+}

src/i18n/en.ts

@@ -61,6 +61,12 @@ export default {
   updated: 'Updated',
   renderProxiesInSamePage: 'Render proxies and proxy provider in same page',
   tableSize: 'Table size',
+  logLevel: 'Log Level',
+  info: 'info',
+  silent: 'silent',
+  debug: 'debug',
+  warning: 'warning',
+  error: 'error',
   xs: 'Extra small size',
   sm: 'Small size',
   md: 'Normal size',

src/i18n/zh.ts

@@ -61,6 +61,12 @@ export default {
   updated: '更新于',
   renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
   tableSize: '表格大小',
+  logLevel: '日志等级',
+  info: '信息',
+  silent: '静默',
+  debug: '调试',
+  warning: '警告',
+  error: '错误',
   xs: '超小尺寸',
   sm: '小尺寸',
   md: '正常尺寸',

src/pages/Config.tsx

@@ -25,6 +25,7 @@ import {
 import { Button } from '~/components'
 import {
   LANG,
+  LOG_LEVEL,
   MODE_OPTIONS,
   PROXIES_ORDERING_TYPE,
   PROXIES_PREVIEW_TYPE,
@@ -40,6 +41,7 @@ import {
   favDayTheme,
   favNightTheme,
   latencyTestTimeoutDuration,
+  logLevel,
   proxiesOrderingType,
   proxiesPreviewType,
   renderInTwoColumns,
@@ -49,6 +51,7 @@ import {
   setFavDayTheme,
   setFavNightTheme,
   setLatencyTestTimeoutDuration,
+  setLogLevel,
   setProxiesOrderingType,
   setProxiesPreviewType,
   setRenderInTwoColumns,
@@ -407,6 +410,33 @@ const ConfigForXd = () => {
         </select>
       </div>
 
+      <div>
+        <ConfigTitle>{t('logLevel')}</ConfigTitle>
+
+        <select
+          class="select select-bordered w-full max-w-xs"
+          onChange={(e) => {
+            setLogLevel(e.target.value as LOG_LEVEL)
+          }}
+        >
+          <For
+            each={[
+              LOG_LEVEL.Info,
+              LOG_LEVEL.Error,
+              LOG_LEVEL.Warning,
+              LOG_LEVEL.Debug,
+              LOG_LEVEL.Silent,
+            ]}
+          >
+            {(level) => (
+              <option selected={logLevel() === level} value={level}>
+                {t(level)}
+              </option>
+            )}
+          </For>
+        </select>
+      </div>
+
       <div>
         <Button
           onClick={() => {

src/pages/Logs.tsx

@@ -7,8 +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 } from '~/constants'
+import { LOGS_TABLE_MAX_ROWS, LOG_LEVEL } from '~/constants'
 import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
+import { logLevel } from '~/signals/config'
 import { Log } from '~/types'
 
 type LogWithSeq = Log & { seq: number }
@@ -19,7 +20,7 @@ export default () => {
   const [search, setSearch] = createSignal('')
   const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 
-  const logsData = useWsRequest<Log>('logs')
+  const logsData = useWsRequest<Log>('logs', { level: logLevel() })
 
   createEffect(() => {
     const data = logsData()
@@ -41,20 +42,23 @@ export default () => {
     {
       header: t('type'),
       cell: ({ row }) => {
-        const type = row.original.type
+        const type = row.original.type as LOG_LEVEL
 
         let className = ''
 
         switch (type) {
-          case 'error':
+          case LOG_LEVEL.Error:
             className = 'text-error'
             break
-          case 'warning':
+          case LOG_LEVEL.Warning:
             className = 'text-warning'
             break
-          case 'info':
+          case LOG_LEVEL.Info:
             className = 'text-info'
             break
+          case LOG_LEVEL.Debug:
+            className = 'text-success'
+            break
         }
 
         return <span class={className}>{`[${row.original.type}]`}</span>

src/signals/config.ts

@@ -3,6 +3,7 @@ import { createSignal } from 'solid-js'
 import {
   LATENCY_QUALITY_MAP_HTTP,
   LATENCY_QUALITY_MAP_HTTPS,
+  LOG_LEVEL,
   PROXIES_ORDERING_TYPE,
   PROXIES_PREVIEW_TYPE,
   TAILWINDCSS_SIZE,
@@ -51,6 +52,11 @@ export const [tableSize, setTableSize] = makePersisted(
   { name: 'tableSize', storage: localStorage },
 )
 
+export const [logLevel, setLogLevel] = makePersisted(
+  createSignal<LOG_LEVEL>(LOG_LEVEL.Info),
+  { name: 'logLevel', storage: localStorage },
+)
+
 export const tableSizeClassName = (size: TAILWINDCSS_SIZE) => {
   let className = 'table-xs'
 

src/signals/request.ts

@@ -50,9 +50,15 @@ export const secret = () => endpoint()?.secret
 export const wsEndpointURL = () =>
   new URL(endpoint()?.url ?? '').origin.replace('http', 'ws')
 
-export const useWsRequest = <T>(path: string) => {
+export const useWsRequest = <T>(
+  path: string,
+  queries: Record<string, string> = {}
+) => {
+  const queryParams = new URLSearchParams(queries)
+  queryParams.set('token', secret() ?? '')
+
   const ws = createReconnectingWS(
-    `${wsEndpointURL()}/${path}?token=${secret()}`,
+    `${wsEndpointURL()}/${path}?${queryParams.toString()}`,
   )
 
   const event = createEventSignal<{

src/types/index.d.ts

@@ -1,3 +1,6 @@
+
+import { LOG_LEVEL } from '~/constants'
+
 declare module 'solid-js' {
   namespace JSX {
     interface Directives {
@@ -106,7 +109,7 @@ export type Connection = ConnectionRawMessage & {
 }
 
 export type Log = {
-  type: 'error' | 'warning' | 'info' | 'debug' | 'silent'
+  type: LOG_LEVEL
   payload: string
 }