refactor: 优化eslint配置，提升代码质量 (#1341)

* feat: 统一并标准化eslint

* lint: napcat.webui

* lint: napcat.webui

* lint: napcat.core

* build: fix

* lint: napcat.webui

* refactor: 重构eslint

* Update README.md

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

@@ -1,116 +1,120 @@
-import { Card, CardBody } from '@heroui/card'
-import { Image } from '@heroui/image'
-import { Link } from '@heroui/link'
-import { Skeleton } from '@heroui/skeleton'
-import { Spinner } from '@heroui/spinner'
-import { useRequest } from 'ahooks'
-import { useMemo } from 'react'
-import { BsTelegram, BsTencentQq } from 'react-icons/bs'
-import { IoDocument } from 'react-icons/io5'
+import { Card, CardBody } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { Link } from '@heroui/link';
+import { Skeleton } from '@heroui/skeleton';
+import { Spinner } from '@heroui/spinner';
+import { useRequest } from 'ahooks';
+import { useMemo } from 'react';
+import { BsTelegram, BsTencentQq } from 'react-icons/bs';
+import { IoDocument } from 'react-icons/io5';
 
-import HoverTiltedCard from '@/components/hover_titled_card'
-import NapCatRepoInfo from '@/components/napcat_repo_info'
-import RotatingText from '@/components/rotating_text'
+import HoverTiltedCard from '@/components/hover_titled_card';
+import NapCatRepoInfo from '@/components/napcat_repo_info';
+import RotatingText from '@/components/rotating_text';
 
-import { usePreloadImages } from '@/hooks/use-preload-images'
-import { useTheme } from '@/hooks/use-theme'
+import { usePreloadImages } from '@/hooks/use-preload-images';
+import { useTheme } from '@/hooks/use-theme';
 
-import logo from '@/assets/images/logo.png'
-import WebUIManager from '@/controllers/webui_manager'
+import logo from '@/assets/images/logo.png';
+import WebUIManager from '@/controllers/webui_manager';
 
-function VersionInfo() {
-  const { data, loading, error } = useRequest(WebUIManager.getPackageInfo)
+function VersionInfo () {
+  const { data, loading, error } = useRequest(WebUIManager.getPackageInfo);
   return (
-    <div className="flex items-center gap-2 text-2xl font-bold">
-      <div className="flex items-center gap-2">
-        <div className="text-primary-500 drop-shadow-md">NapCat</div>
-        {error ? (
-          error.message
-        ) : loading ? (
-          <Spinner size="sm" />
-        ) : (
-          <RotatingText
-            texts={['WebUI', data?.version ?? '']}
-            mainClassName="overflow-hidden flex items-center bg-primary-500 px-2 rounded-lg text-default-50 shadow-md"
-            staggerFrom={'last'}
-            initial={{ y: '100%' }}
-            animate={{ y: 0 }}
-            exit={{ y: '-120%' }}
-            staggerDuration={0.025}
-            splitLevelClassName="overflow-hidden"
-            transition={{ type: 'spring', damping: 30, stiffness: 400 }}
-            rotationInterval={2000}
-          />
-        )}
+    <div className='flex items-center gap-2 text-2xl font-bold'>
+      <div className='flex items-center gap-2'>
+        <div className='text-primary-500 drop-shadow-md'>NapCat</div>
+        {error
+          ? (
+            error.message
+          )
+          : loading
+            ? (
+              <Spinner size='sm' />
+            )
+            : (
+              <RotatingText
+                texts={['WebUI', data?.version ?? '']}
+                mainClassName='overflow-hidden flex items-center bg-primary-500 px-2 rounded-lg text-default-50 shadow-md'
+                staggerFrom='last'
+                initial={{ y: '100%' }}
+                animate={{ y: 0 }}
+                exit={{ y: '-120%' }}
+                staggerDuration={0.025}
+                splitLevelClassName='overflow-hidden'
+                transition={{ type: 'spring', damping: 30, stiffness: 400 }}
+                rotationInterval={2000}
+              />
+            )}
       </div>
     </div>
-  )
+  );
 }
 
-export default function AboutPage() {
-  const { isDark } = useTheme()
+export default function AboutPage () {
+  const { isDark } = useTheme();
 
   const imageUrls = useMemo(
     () => [
       'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=light',
       'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=dark',
       'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=light',
-      'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=dark'
+      'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=dark',
     ],
     []
-  )
+  );
 
-  const { loadedUrls, isLoading } = usePreloadImages(imageUrls)
+  const { loadedUrls, isLoading } = usePreloadImages(imageUrls);
 
   const getImageUrl = useMemo(
     () => (baseUrl: string) => {
-      const theme = isDark ? 'dark' : 'light'
+      const theme = isDark ? 'dark' : 'light';
       const fullUrl = baseUrl.replace(
         /color_scheme=(?:light|dark)/,
         `color_scheme=${theme}`
-      )
-      return isLoading ? null : loadedUrls[fullUrl] ? fullUrl : null
+      );
+      return isLoading ? null : loadedUrls[fullUrl] ? fullUrl : null;
     },
     [isDark, isLoading, loadedUrls]
-  )
+  );
 
   const renderImage = useMemo(
     () => (baseUrl: string, alt: string) => {
-      const imageUrl = getImageUrl(baseUrl)
+      const imageUrl = getImageUrl(baseUrl);
 
       if (!imageUrl) {
-        return <Skeleton className="h-16 rounded-lg" />
+        return <Skeleton className='h-16 rounded-lg' />;
       }
 
       return (
         <Image
-          className="flex-1 pointer-events-none select-none rounded-none"
+          className='flex-1 pointer-events-none select-none rounded-none'
           src={imageUrl}
           alt={alt}
         />
-      )
+      );
     },
     [getImageUrl]
-  )
+  );
 
   return (
     <>
       <title>关于 NapCat WebUI</title>
-      <section className="max-w-7xl py-8 md:py-10 px-5 mx-auto space-y-10">
-        <div className="w-full flex flex-col md:flex-row gap-4">
-          <div className="flex flex-col md:flex-row items-center">
-            <HoverTiltedCard imageSrc={logo} overlayContent="" />
+      <section className='max-w-7xl py-8 md:py-10 px-5 mx-auto space-y-10'>
+        <div className='w-full flex flex-col md:flex-row gap-4'>
+          <div className='flex flex-col md:flex-row items-center'>
+            <HoverTiltedCard imageSrc={logo} overlayContent='' />
           </div>
-          <div className="flex-1 flex flex-col gap-2 py-2">
+          <div className='flex-1 flex flex-col gap-2 py-2'>
             <VersionInfo />
-            <div className="space-y-1">
-              <p className="font-bold text-primary-400">NapCat 是什么?</p>
-              <p className="text-default-800">
+            <div className='space-y-1'>
+              <p className='font-bold text-primary-400'>NapCat 是什么?</p>
+              <p className='text-default-800'>
                 基于TypeScript构建的Bot框架,通过相应的启动器或者框架,主动调用QQ
                 Node模块提供给客户端的接口,实现Bot的功能.
               </p>
-              <p className="font-bold text-primary-400">魔法版介绍</p>
-              <p className="text-default-800">
+              <p className='font-bold text-primary-400'>魔法版介绍</p>
+              <p className='text-default-800'>
                 猫猫框架通过魔法的手段获得了 QQ 的发送消息、接收消息等接口。
                 为了方便使用，猫猫框架将通过一种名为 OneBot 的约定将你的 HTTP /
                 WebSocket 请求按照规范读取，
@@ -119,16 +123,16 @@ export default function AboutPage() {
             </div>
           </div>
         </div>
-        <div className="flex flex-row gap-2 flex-wrap justify-around">
+        <div className='flex flex-row gap-2 flex-wrap justify-around'>
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://qm.qq.com/q/F9cgs1N3Mc"
+            href='https://qm.qq.com/q/F9cgs1N3Mc'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <BsTencentQq size={16} />
               </span>
               <span>官方社群1</span>
@@ -137,13 +141,13 @@ export default function AboutPage() {
 
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://qm.qq.com/q/hSt0u9PVn"
+            href='https://qm.qq.com/q/hSt0u9PVn'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <BsTencentQq size={16} />
               </span>
               <span>官方社群2</span>
@@ -152,13 +156,13 @@ export default function AboutPage() {
 
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://t.me/napcatqq"
+            href='https://t.me/napcatqq'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <BsTelegram size={16} />
               </span>
               <span>Telegram</span>
@@ -167,21 +171,21 @@ export default function AboutPage() {
 
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://napcat.napneko.icu/"
+            href='https://napcat.napneko.icu/'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <IoDocument size={16} />
               </span>
               <span>使用文档</span>
             </CardBody>
           </Card>
         </div>
-        <div className="flex flex-col md:flex-row md:items-start gap-4">
-          <div className="w-full flex flex-col gap-4">
+        <div className='flex flex-col md:flex-row md:items-start gap-4'>
+          <div className='w-full flex flex-col gap-4'>
             {renderImage(
               'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=light',
               'Contributors'
@@ -196,5 +200,5 @@ export default function AboutPage() {
         </div>
       </section>
     </>
-  )
+  );
 }