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

import { Input } from '@heroui/input'
import { useLocalStorage } from '@uidotdev/usehooks'
import { useEffect } from 'react'
import { Controller, useForm } from 'react-hook-form'
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 {
    control,
    handleSubmit: handleWebuiSubmit,
    formState: { isSubmitting },
    setValue: setWebuiValue
  } = useForm<IConfig['webui']>({
    defaultValues: {
      background: '',
      musicListID: '',
      customIcons: {}
    }
  })

  const [b64img, setB64img] = useLocalStorage(key.backgroundImage, '')
  const [customIcons, setCustomIcons] = useLocalStorage<Record<string, string>>(
    key.customIcons,
    {}
  )
  const { setListId, listId } = useMusic()

  const reset = () => {
    setWebuiValue('musicListID', listId)
    setWebuiValue('customIcons', customIcons)
    setWebuiValue('background', b64img)
  }

  const onSubmit = handleWebuiSubmit((data) => {
    try {
      setListId(data.musicListID)
      setCustomIcons(data.customIcons)
      setB64img(data.background)
      toast.success('保存成功')
    } catch (error) {
      const msg = (error as Error).message
      toast.error(`保存失败: ${msg}`)
    }
  })

  useEffect(() => {
    reset()
  }, [listId, customIcons, b64img])

  return (
    <>
      <title>WebUI配置 - NapCat WebUI</title>
      <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()
                toast.success('删除成功')
                setTimeout(() => {
                  window.location.reload()
                }, 1000)
              } 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
          control={control}
          name="background"
          render={({ field }) => <ImageInput {...field} />}
        />
      </div>
      <div className="flex flex-col gap-2">
        <div>自定义图标</div>
        {siteConfig.navItems.map((item) => (
          <Controller
            key={item.label}
            control={control}
            name={`customIcons.${item.label}`}
            render={({ field }) => <ImageInput {...field} label={item.label} />}
          />
        ))}
      </div>
      <SaveButtons
        onSubmit={onSubmit}
        reset={reset}
        isSubmitting={isSubmitting}
      />
    </>
  )
}

export default WebUIConfigCard