feat: 新版webui

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

@@ -0,0 +1,101 @@
+import { Chip } from '@heroui/chip'
+import { Image } from '@heroui/image'
+import { Link } from '@heroui/link'
+import { Spinner } from '@heroui/spinner'
+import { Tooltip } from '@heroui/tooltip'
+import { useRequest } from 'ahooks'
+import clsx from 'clsx'
+
+import { BietiaopIcon, GithubIcon, WebUIIcon } from '@/components/icons'
+import NapCatRepoInfo from '@/components/napcat_repo_info'
+import { title } from '@/components/primitives'
+
+import logo from '@/assets/images/logo.png'
+import WebUIManager from '@/controllers/webui_manager'
+
+import packageJson from '../../../package.json'
+
+function VersionInfo() {
+  const { data, loading, error } = useRequest(WebUIManager.getPackageInfo)
+  return (
+    <div className="flex items-center gap-2 mb-5">
+      <Chip
+        startContent={
+          <Chip color="danger" size="sm" className="-ml-0.5 select-none">
+            WebUI
+          </Chip>
+        }
+      >
+        {packageJson.version}
+      </Chip>
+      <Chip
+        startContent={
+          <Chip color="warning" size="sm" className="-ml-0.5 select-none">
+            NapCat
+          </Chip>
+        }
+      >
+        {error ? (
+          error.message
+        ) : loading ? (
+          <Spinner size="sm" />
+        ) : (
+          data?.version
+        )}
+      </Chip>
+      <Tooltip content="查看WebUI源码" placement="bottom" showArrow>
+        <Link isExternal href="https://github.com/bietiaop/NextNapCatWebUI">
+          <GithubIcon className="text-default-900 hover:text-default-600 w-8 h-8 hover:drop-shadow-lg transition-all" />
+        </Link>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default function AboutPage() {
+  return (
+    <>
+      <title>关于 NapCat WebUI</title>
+      <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+        <div className="max-w-full w-[1000px] px-5 flex flex-col items-center">
+          <div className="flex flex-col md:flex-row items-center">
+            <Image
+              alt="logo"
+              className="flex-shrink-0 w-52 md:w-48 mr-2"
+              src={logo}
+            />
+            <div className="flex -mt-9 md:mt-0">
+              <WebUIIcon />
+            </div>
+          </div>
+          <div className="flex opacity-60 items-center gap-2 mb-2 font-ubuntu">
+            Created By
+            <div className="flex scale-80 -ml-5 -mr-5">
+              <BietiaopIcon />
+            </div>
+          </div>
+          <VersionInfo />
+          <div className="mb-6 flex flex-col items-center gap-4">
+            <p
+              className={clsx(
+                title({
+                  color: 'cyan',
+                  shadow: true
+                }),
+                '!text-3xl'
+              )}
+            >
+              NapCat Contributors
+            </p>
+            <Image
+              className="w-[600px] max-w-full pointer-events-none select-none"
+              src="https://contrib.rocks/image?repo=bietiaop/NapCatQQ"
+              alt="Contributors"
+            />
+          </div>
+          <NapCatRepoInfo />
+        </div>
+      </section>
+    </>
+  )
+}