feat: 字体修改#771

napcat.webui/src/components/input/file_input.tsx

@@ -0,0 +1,69 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { useRef, useState } from 'react'
+
+export interface FileInputProps {
+  onChange: (file: File) => Promise<void> | void
+  onDelete?: () => Promise<void> | void
+  label?: string
+  accept?: string
+}
+
+const FileInput: React.FC<FileInputProps> = ({
+  onChange,
+  onDelete,
+  label,
+  accept
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  return (
+    <div className="flex items-end gap-2">
+      <div className="flex-grow">
+        <Input
+          isDisabled={isLoading}
+          ref={inputRef}
+          label={label}
+          type="file"
+          placeholder="选择文件"
+          accept={accept}
+          onChange={async (e) => {
+            try {
+              setIsLoading(true)
+              const file = e.target.files?.[0]
+              if (file) {
+                await onChange(file)
+              }
+            } catch (error) {
+              console.error(error)
+            } finally {
+              setIsLoading(false)
+              if (inputRef.current) inputRef.current.value = ''
+            }
+          }}
+        />
+      </div>
+      <Button
+        isDisabled={isLoading}
+        onPress={async () => {
+          try {
+            setIsLoading(true)
+            if (onDelete) await onDelete()
+          } catch (error) {
+            console.error(error)
+          } finally {
+            setIsLoading(false)
+            if (inputRef.current) inputRef.current.value = ''
+          }
+        }}
+        color="primary"
+        variant="flat"
+        size="sm"
+      >
+        删除
+      </Button>
+    </div>
+  )
+}
+
+export default FileInput

napcat.webui/src/controllers/file_manager.ts

@@ -196,4 +196,26 @@ export default class FileManager {
     )
     return data.data
   }
+
+  public static async uploadWebUIFont(file: File) {
+    const formData = new FormData()
+    formData.append('file', file)
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/font/upload/webui',
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }
+    )
+    return data.data
+  }
+
+  public static async deleteWebUIFont() {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/font/delete/webui'
+    )
+    return data.data
+  }
 }

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

@@ -7,11 +7,13 @@ import toast from 'react-hot-toast'
 import key from '@/const/key'
 
 import SaveButtons from '@/components/button/save_buttons'
+import FileInput from '@/components/input/file_input'
 import ImageInput from '@/components/input/image_input'
 
 import useMusic from '@/hooks/use-music'
 
 import { siteConfig } from '@/config/site'
+import FileManager from '@/controllers/file_manager'
 
 const WebUIConfigCard = () => {
   const {
@@ -59,17 +61,47 @@ const WebUIConfigCard = () => {
   return (
     <>
       <title>WebUI配置 - NapCat WebUI</title>
-      <Controller
-        control={control}
-        name="musicListID"
-        render={({ field }) => (
-          <Input
-            {...field}
-            label="网易云音乐歌单ID（网页内音乐播放器）"
-            placeholder="请输入歌单ID"
+      <div className="flex flex-col gap-2">
+        <div className="flex-shrink-0 w-full">WebUI字体</div>
+        <div className="text-sm text-default-400">
+          此项不需要手动保存，上传成功后需清空网页缓存并刷新
+          <FileInput
+            label="中文字体"
+            onChange={async (file) => {
+              try {
+                await FileManager.uploadWebUIFont(file)
+                toast.success('上传成功')
+                setTimeout(() => {
+                  window.location.reload()
+                }, 1000)
+              } catch (error) {
+                toast.error('上传失败: ' + (error as Error).message)
+              }
+            }}
+            onDelete={async () => {
+              try {
+                await FileManager.deleteWebUIFont()
+              } catch (error) {
+                toast.error('删除失败: ' + (error as Error).message)
+              }
+            }}
           />
-        )}
-      />
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="flex-shrink-0 w-full">WebUI音乐播放器</div>
+        <Controller
+          control={control}
+          name="musicListID"
+          render={({ field }) => (
+            <Input
+              {...field}
+              label="网易云音乐歌单ID（网页内音乐播放器）"
+              placeholder="请输入歌单ID"
+            />
+          )}
+        />
+      </div>
       <div className="flex flex-col gap-2">
         <div className="flex-shrink-0 w-full">背景图</div>
         <Controller