feat: 新版webui

napcat.webui/src/pages/dashboard/debug/http/index.tsx

@@ -0,0 +1,68 @@
+import { Button } from '@heroui/button'
+import clsx from 'clsx'
+import { motion } from 'motion/react'
+import { useEffect, useRef, useState } from 'react'
+import { TbSquareRoundedChevronLeftFilled } from 'react-icons/tb'
+
+import oneBotHttpApi from '@/const/ob_api'
+import type { OneBotHttpApi } from '@/const/ob_api'
+
+import OneBotApiDebug from '@/components/onebot/api/debug'
+import OneBotApiNavList from '@/components/onebot/api/nav_list'
+
+export default function HttpDebug() {
+  const [selectedApi, setSelectedApi] =
+    useState<keyof OneBotHttpApi>('/set_qq_profile')
+  const data = oneBotHttpApi[selectedApi]
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [openSideBar, setOpenSideBar] = useState(true)
+
+  useEffect(() => {
+    contentRef?.current?.scrollTo?.({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }, [selectedApi])
+
+  return (
+    <>
+      <title>HTTP调试 - NapCat WebUI</title>
+      <div className="w-full h-[calc(100%-3.6rem)] flex items-stretch">
+        <OneBotApiNavList
+          data={oneBotHttpApi}
+          selectedApi={selectedApi}
+          onSelect={setSelectedApi}
+          openSideBar={openSideBar}
+        />
+        <div
+          ref={contentRef}
+          className="flex-1 h-full overflow-x-hidden relative"
+        >
+          <motion.div
+            className="sticky top-0 z-20 md:!ml-4"
+            animate={{ marginLeft: openSideBar ? '16rem' : '1rem' }}
+            transition={{ type: 'spring', stiffness: 150, damping: 15 }}
+          >
+            <Button
+              isIconOnly
+              color="danger"
+              radius="md"
+              variant="shadow"
+              size="sm"
+              onPress={() => setOpenSideBar(!openSideBar)}
+            >
+              <TbSquareRoundedChevronLeftFilled
+                size={24}
+                className={clsx(
+                  'transition-transform',
+                  openSideBar ? '' : 'transform rotate-180'
+                )}
+              />
+            </Button>
+          </motion.div>
+          <OneBotApiDebug path={selectedApi} data={data} />
+        </div>
+      </div>
+    </>
+  )
+}