feat: 新版webui

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

@@ -0,0 +1,135 @@
+import { Tab, Tabs } from '@heroui/tabs'
+import { useLocalStorage } from '@uidotdev/usehooks'
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { useMediaQuery } from 'react-responsive'
+
+import key from '@/const/key'
+
+import useConfig from '@/hooks/use-config'
+import useMusic from '@/hooks/use-music'
+
+import OneBotConfigCard from './onebot'
+import WebUIConfigCard from './webui'
+
+export default function ConfigPage() {
+  const { config, saveConfigWithoutNetwork, refreshConfig } = useConfig()
+  const {
+    control: onebotControl,
+    handleSubmit: handleOnebotSubmit,
+    formState: { isSubmitting: isOnebotSubmitting },
+    setValue: setOnebotValue
+  } = useForm<IConfig['onebot']>({
+    defaultValues: {
+      musicSignUrl: '',
+      enableLocalFile2Url: false,
+      parseMultMsg: false
+    }
+  })
+
+  const {
+    control: webuiControl,
+    handleSubmit: handleWebuiSubmit,
+    formState: { isSubmitting: isWebuiSubmitting },
+    setValue: setWebuiValue
+  } = useForm<IConfig['webui']>({
+    defaultValues: {
+      background: '',
+      musicListID: '',
+      customIcons: {}
+    }
+  })
+
+  const isMediumUp = useMediaQuery({ minWidth: 768 })
+  const [b64img, setB64img] = useLocalStorage(key.backgroundImage, '')
+  const [customIcons, setCustomIcons] = useLocalStorage<Record<string, string>>(
+    key.customIcons,
+    {}
+  )
+  const { setListId, listId } = useMusic()
+  const resetOneBot = () => {
+    setOnebotValue('musicSignUrl', config.musicSignUrl)
+    setOnebotValue('enableLocalFile2Url', config.enableLocalFile2Url)
+    setOnebotValue('parseMultMsg', config.parseMultMsg)
+  }
+
+  const resetWebUI = () => {
+    setWebuiValue('musicListID', listId)
+    setWebuiValue('customIcons', customIcons)
+    setWebuiValue('background', b64img)
+  }
+
+  const onOneBotSubmit = handleOnebotSubmit((data) => {
+    try {
+      saveConfigWithoutNetwork(data)
+      toast.success('保存成功')
+    } catch (error) {
+      const msg = (error as Error).message
+      toast.error(`保存失败: ${msg}`)
+    }
+  })
+
+  const onWebuiSubmit = 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}`)
+    }
+  })
+
+  const onRefresh = async () => {
+    try {
+      await refreshConfig()
+      toast.success('刷新成功')
+    } catch (error) {
+      const msg = (error as Error).message
+      toast.error(`刷新失败: ${msg}`)
+    }
+  }
+
+  useEffect(() => {
+    resetOneBot()
+    resetWebUI()
+  }, [config])
+
+  return (
+    <section className="w-[1000px] max-w-full md:mx-auto gap-4 py-8 px-2 md:py-10">
+      <Tabs
+        aria-label="config tab"
+        fullWidth
+        className="w-full"
+        isVertical={isMediumUp}
+        classNames={{
+          tabList: 'sticky flex top-14 bg-opacity-50 backdrop-blur-sm',
+          panel: 'w-full',
+          base: 'md:!w-auto flex-grow-0 flex-shrink-0 mr-0',
+          cursor: 'bg-opacity-60 backdrop-blur-sm'
+        }}
+      >
+        <Tab title="OneBot配置" key="onebot">
+          <OneBotConfigCard
+            isSubmitting={isOnebotSubmitting}
+            onRefresh={onRefresh}
+            onSubmit={onOneBotSubmit}
+            control={onebotControl}
+            reset={resetOneBot}
+          />
+        </Tab>
+        <Tab title="WebUI配置" key="webui">
+          <WebUIConfigCard
+            isSubmitting={isWebuiSubmitting}
+            onRefresh={onRefresh}
+            onSubmit={onWebuiSubmit}
+            control={webuiControl}
+            reset={resetWebUI}
+          />
+        </Tab>
+      </Tabs>
+    </section>
+  )
+}