feat: update eslint & prettier rules

2026-06-18 19:44:21 +00:00 · 2025-04-30 17:36:46 +08:00
parent d4af2d4326
commit 460e065eed
53 changed files with 2241 additions and 2102 deletions
@@ -1,37 +1,41 @@
-"use client"
+'use client';
 import { Radio } from 'antd';
-import { useState } from "react";
-import PluginInstalledComponent from "@/app/home/plugins/plugin-installed/PluginInstalledComponent";
-import PluginMarketComponent from "@/app/home/plugins/plugin-market/PluginMarketComponent";
-import styles from './plugins.module.css'
+import { useState } from 'react';
+import PluginInstalledComponent from '@/app/home/plugins/plugin-installed/PluginInstalledComponent';
+import PluginMarketComponent from '@/app/home/plugins/plugin-market/PluginMarketComponent';
+import styles from './plugins.module.css';

 export default function PluginConfigPage() {
-    enum PageType {
-        INSTALLED = "installed",
-        MARKET = 'market'
-    }
+  enum PageType {
+    INSTALLED = 'installed',
+    MARKET = 'market',
+  }

-    const [nowPageType, setNowPageType] = useState(PageType.INSTALLED)
+  const [nowPageType, setNowPageType] = useState(PageType.INSTALLED);

-    return (
-        <div className={styles.pageContainer}>
-            <Radio.Group
-                block
-                options={[
-                    { label: '已安装', value: PageType.INSTALLED },
-                    { label: '插件市场', value: PageType.MARKET },
-                ]}
-                defaultValue={PageType.INSTALLED}
-                value={nowPageType}
-                optionType="button"
-                buttonStyle="solid"
-                style={{ marginBottom: '20px' }}
-                onChange={(e) => {
-                    setNowPageType(e.target.value as PageType)
-                }}
-            />
+  return (
+    <div className={styles.pageContainer}>
+      <Radio.Group
+        block
+        options={[
+          { label: '已安装', value: PageType.INSTALLED },
+          { label: '插件市场', value: PageType.MARKET },
+        ]}
+        defaultValue={PageType.INSTALLED}
+        value={nowPageType}
+        optionType="button"
+        buttonStyle="solid"
+        style={{ marginBottom: '20px' }}
+        onChange={(e) => {
+          setNowPageType(e.target.value as PageType);
+        }}
+      />

-            {nowPageType === PageType.INSTALLED ? <PluginInstalledComponent /> : <PluginMarketComponent />}
-        </div>
-    );
+      {nowPageType === PageType.INSTALLED ? (
+        <PluginInstalledComponent />
+      ) : (
+        <PluginMarketComponent />
+      )}
+    </div>
+  );
 }
@@ -1,27 +1,26 @@
 export interface IPluginCardVO {
-    author: string,
-    version: string,
-    name: string,
-    description: string,
-    handlerCount: number,
-    isInitialized: boolean,
+  author: string;
+  version: string;
+  name: string;
+  description: string;
+  handlerCount: number;
+  isInitialized: boolean;
 }

 export class PluginCardVO implements IPluginCardVO {
-    description: string;
-    handlerCount: number;
-    name: string;
-    author: string;
-    version: string;
-    isInitialized: boolean;
-
-    constructor(prop: IPluginCardVO) {
-        this.description = prop.description
-        this.handlerCount = prop.handlerCount
-        this.name = prop.name
-        this.author = prop.author
-        this.version = prop.version
-        this.isInitialized = prop.isInitialized
-    }
+  description: string;
+  handlerCount: number;
+  name: string;
+  author: string;
+  version: string;
+  isInitialized: boolean;

+  constructor(prop: IPluginCardVO) {
+    this.description = prop.description;
+    this.handlerCount = prop.handlerCount;
+    this.name = prop.name;
+    this.author = prop.author;
+    this.version = prop.version;
+    this.isInitialized = prop.isInitialized;
+  }
 }
@@ -1,18 +1,18 @@
-"use client";
+'use client';

-import { useState, useEffect } from "react";
-import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
-import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
-import PluginCardComponent from "@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent";
-import styles from "@/app/home/plugins/plugins.module.css";
-import { Modal, Input } from "antd";
-import { GithubOutlined } from "@ant-design/icons";
-import { httpClient } from "@/app/infra/http/HttpClient";
+import { useState, useEffect } from 'react';
+import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
+import { PluginCardVO } from '@/app/home/plugins/plugin-installed/PluginCardVO';
+import PluginCardComponent from '@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent';
+import styles from '@/app/home/plugins/plugins.module.css';
+import { Modal, Input } from 'antd';
+import { GithubOutlined } from '@ant-design/icons';
+import { httpClient } from '@/app/infra/http/HttpClient';

 export default function PluginInstalledComponent() {
  const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
  const [modalOpen, setModalOpen] = useState(false);
-  const [githubURL, setGithubURL] = useState("");
+  const [githubURL, setGithubURL] = useState('');

  useEffect(() => {
    initData();
@@ -33,9 +33,9 @@ export default function PluginInstalledComponent() {
            handlerCount: 0,
            name: plugin.name,
            version: plugin.version,
-            isInitialized: plugin.status === "initialized"
+            isInitialized: plugin.status === 'initialized',
          });
-        })
+        }),
      );
    });
  }
@@ -53,7 +53,7 @@ export default function PluginInstalledComponent() {
        getPluginList();
      })
      .catch((err) => {
-        console.log("error when install plugin:", err);
+        console.log('error when install plugin:', err);
      });
  }
  return (
@@ -63,8 +63,8 @@ export default function PluginInstalledComponent() {
          <div className={`${styles.modalTitle}`}>
            <GithubOutlined
              style={{
-                fontSize: "30px",
-                marginRight: "20px"
+                fontSize: '30px',
+                marginRight: '20px',
              }}
            />
          </div>
@@ -1,12 +1,12 @@
-import styles from "./pluginCard.module.css";
-import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
-import { GithubOutlined, LinkOutlined, ToolOutlined } from "@ant-design/icons";
-import { Switch, Tag } from "antd";
-import { useState } from "react";
-import { httpClient } from "@/app/infra/http/HttpClient";
+import styles from './pluginCard.module.css';
+import { PluginCardVO } from '@/app/home/plugins/plugin-installed/PluginCardVO';
+import { GithubOutlined, LinkOutlined, ToolOutlined } from '@ant-design/icons';
+import { Switch, Tag } from 'antd';
+import { useState } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';

 export default function PluginCardComponent({
-  cardVO
+  cardVO,
 }: {
  cardVO: PluginCardVO;
 }) {
@@ -21,7 +21,7 @@ export default function PluginCardComponent({
        setInitialized(!initialized);
      })
      .catch((err) => {
-        console.log("error: ", err);
+        console.log('error: ', err);
      })
      .finally(() => {
        setSwitchEnable(true);
@@ -35,7 +35,7 @@ export default function PluginCardComponent({
        <div className={`${styles.fontGray}`}>{cardVO.author}</div>
        {/*  right icon & version  */}
        <div className={`${styles.iconVersionContainer}`}>
-          <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
+          <GithubOutlined style={{ fontSize: '26px' }} type="setting" />
          <Tag color="#108ee9">v{cardVO.version}</Tag>
        </div>
      </div>
@@ -49,10 +49,10 @@ export default function PluginCardComponent({
        <div className={`${styles.footerContainer}`}>
          <div className={`${styles.linkAndToolContainer}`}>
            <div className={`${styles.link}`}>
-              <LinkOutlined style={{ fontSize: "22px" }} />
+              <LinkOutlined style={{ fontSize: '22px' }} />
              <span>1</span>
            </div>
-            <ToolOutlined style={{ fontSize: "22px" }} />
+            <ToolOutlined style={{ fontSize: '22px' }} />
          </div>
          <div className={`${styles.switchContainer}`}>
            <Switch
@@ -1,107 +1,122 @@
-"use client";
+'use client';

-import { useEffect, useState } from "react";
-import styles from "@/app/home/plugins/plugins.module.css";
-import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
-import PluginMarketCardComponent from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent";
-import { Input, Pagination } from "antd";
-import { spaceClient } from "@/app/infra/http/HttpClient";
+import { useEffect, useState } from 'react';
+import styles from '@/app/home/plugins/plugins.module.css';
+import { PluginMarketCardVO } from '@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO';
+import PluginMarketCardComponent from '@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent';
+import { Input, Pagination } from 'antd';
+import { spaceClient } from '@/app/infra/http/HttpClient';

 export default function PluginMarketComponent() {
-    const [marketPluginList, setMarketPluginList] = useState<
-        PluginMarketCardVO[]
-    >([]);
-    const [totalCount, setTotalCount] = useState(0);
-    const [nowPage, setNowPage] = useState(1);
-    const [searchKeyword, setSearchKeyword] = useState("");
-    const [loading, setLoading] = useState(false);
-    const pageSize = 10;
+  const [marketPluginList, setMarketPluginList] = useState<
+    PluginMarketCardVO[]
+  >([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [nowPage, setNowPage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const pageSize = 10;

-    useEffect(() => {
-        initData();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  useEffect(() => {
+    initData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

-    function initData() {
-        getPluginList();
-    }
+  function initData() {
+    getPluginList();
+  }

-    function onInputSearchKeyword(keyword: string) {
-        // 这里记得加防抖，暂时没加
-        setSearchKeyword(keyword);
-        setNowPage(1);
-        getPluginList(1, keyword);
-    }
+  function onInputSearchKeyword(keyword: string) {
+    // 这里记得加防抖，暂时没加
+    setSearchKeyword(keyword);
+    setNowPage(1);
+    getPluginList(1, keyword);
+  }

-    function getPluginList(
-        page: number = nowPage,
-        keyword: string = searchKeyword
-    ) {
-        setLoading(true);
-        spaceClient.getMarketPlugins(page, pageSize, keyword).then((res) => {
-            setMarketPluginList(
-                res.plugins.map(
-                    (marketPlugin) =>
-                        new PluginMarketCardVO({
-                            author: marketPlugin.author,
-                            description: marketPlugin.description,
-                            githubURL: marketPlugin.repository,
-                            name: marketPlugin.name,
-                            pluginId: String(marketPlugin.ID),
-                            starCount: marketPlugin.stars,
-                            version: "version" in marketPlugin ? String(marketPlugin.version) : "1.0.0", // Default version if not provided
-                        })
-                )
-            );
-            setTotalCount(res.total);
-            setLoading(false);
-            console.log("market plugins:", res);
-        }).catch(error => {
-            console.error("获取插件列表失败:", error);
-            setLoading(false);
-        });
-    }
+  function getPluginList(
+    page: number = nowPage,
+    keyword: string = searchKeyword,
+  ) {
+    setLoading(true);
+    spaceClient
+      .getMarketPlugins(page, pageSize, keyword)
+      .then((res) => {
+        setMarketPluginList(
+          res.plugins.map(
+            (marketPlugin) =>
+              new PluginMarketCardVO({
+                author: marketPlugin.author,
+                description: marketPlugin.description,
+                githubURL: marketPlugin.repository,
+                name: marketPlugin.name,
+                pluginId: String(marketPlugin.ID),
+                starCount: marketPlugin.stars,
+                version:
+                  'version' in marketPlugin
+                    ? String(marketPlugin.version)
+                    : '1.0.0', // Default version if not provided
+              }),
+          ),
+        );
+        setTotalCount(res.total);
+        setLoading(false);
+        console.log('market plugins:', res);
+      })
+      .catch((error) => {
+        console.error('获取插件列表失败:', error);
+        setLoading(false);
+      });
+  }

-    function handlePageChange(page: number) {
-        setNowPage(page);
-        getPluginList(page);
-    }
+  function handlePageChange(page: number) {
+    setNowPage(page);
+    getPluginList(page);
+  }

-    return (
-        <div className={`${styles.marketComponentBody}`}>
-            <Input
-                style={{
-                    width: '300px',
-                    marginBottom: '10px',
-                }}
-                value={searchKeyword}
-                placeholder="搜索插件"
-                onChange={(e) => onInputSearchKeyword(e.target.value)}
-            />
-            <div className={`${styles.pluginListContainer}`}>
-                {loading ? (
-                    <div style={{ textAlign: 'center', padding: '20px' }}>加载中...</div>
-                ) : marketPluginList.length === 0 ? (
-                    <div style={{ textAlign: 'center', padding: '20px' }}>没有找到匹配的插件</div>
-                ) : (
-                    marketPluginList.map((vo, index) => (
-                        <div key={`${vo.pluginId}-${index}`}>
-                            <PluginMarketCardComponent cardVO={vo} />
-                        </div>
-                    ))
-                )}
+  return (
+    <div className={`${styles.marketComponentBody}`}>
+      <Input
+        style={{
+          width: '300px',
+          marginBottom: '10px',
+        }}
+        value={searchKeyword}
+        placeholder="搜索插件"
+        onChange={(e) => onInputSearchKeyword(e.target.value)}
+      />
+      <div className={`${styles.pluginListContainer}`}>
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '20px' }}>加载中...</div>
+        ) : marketPluginList.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '20px' }}>
+            没有找到匹配的插件
+          </div>
+        ) : (
+          marketPluginList.map((vo, index) => (
+            <div key={`${vo.pluginId}-${index}`}>
+              <PluginMarketCardComponent cardVO={vo} />
            </div>
-            {totalCount > 0 && (
-                <div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: '20px' }}>
-                    <Pagination
-                        current={nowPage}
-                        total={totalCount}
-                        pageSize={pageSize}
-                        onChange={handlePageChange}
-                        showSizeChanger={false}
-                    />
-                </div>
-            )}
+          ))
+        )}
+      </div>
+      {totalCount > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+            marginTop: '20px',
+          }}
+        >
+          <Pagination
+            current={nowPage}
+            total={totalCount}
+            pageSize={pageSize}
+            onChange={handlePageChange}
+            showSizeChanger={false}
+          />
        </div>
-    )
+      )}
+    </div>
+  );
 }
@@ -1,15 +1,15 @@
-import styles from "./pluginMarketCard.module.css";
-import { GithubOutlined, StarOutlined } from "@ant-design/icons";
-import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
-import { Button } from "antd";
+import styles from './pluginMarketCard.module.css';
+import { GithubOutlined, StarOutlined } from '@ant-design/icons';
+import { PluginMarketCardVO } from '@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO';
+import { Button } from 'antd';

 export default function PluginMarketCardComponent({
-  cardVO
+  cardVO,
 }: {
  cardVO: PluginMarketCardVO;
 }) {
  function handleInstallClick(pluginId: string) {
-    console.log("Install plugin: ", pluginId);
+    console.log('Install plugin: ', pluginId);
  }

  return (
@@ -19,7 +19,7 @@ export default function PluginMarketCardComponent({
        {/* left author */}
        <div className={`${styles.fontGray}`}>{cardVO.author}</div>
        {/*  right icon */}
-        <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
+        <GithubOutlined style={{ fontSize: '26px' }} type="setting" />
      </div>
      {/*  content  */}
      <div className={`${styles.cardContent}`}>
@@ -30,13 +30,13 @@ export default function PluginMarketCardComponent({
      <div className={`${styles.cardFooter}`}>
        <div className={`${styles.linkSettingContainer}`}>
          <div className={`${styles.link}`}>
-            <StarOutlined style={{ fontSize: "22px" }} />
-            <span style={{ paddingLeft: "5px" }}>{cardVO.starCount}</span>
+            <StarOutlined style={{ fontSize: '22px' }} />
+            <span style={{ paddingLeft: '5px' }}>{cardVO.starCount}</span>
          </div>
        </div>
        <Button
          type="primary"
-          size={"small"}
+          size={'small'}
          onClick={() => {
            handleInstallClick(cardVO.pluginId);
          }}
@@ -1,29 +1,29 @@
 export interface IPluginMarketCardVO {
-    pluginId: string;
-    author: string,
-    name: string,
-    description: string,
-    starCount: number,
-    githubURL: string,
-    version: string,
+  pluginId: string;
+  author: string;
+  name: string;
+  description: string;
+  starCount: number;
+  githubURL: string;
+  version: string;
 }

 export class PluginMarketCardVO implements IPluginMarketCardVO {
-    pluginId: string;
-    description: string;
-    name: string;
-    author: string;
-    githubURL: string;
-    starCount: number;
-    version: string;
+  pluginId: string;
+  description: string;
+  name: string;
+  author: string;
+  githubURL: string;
+  starCount: number;
+  version: string;

-    constructor(prop: IPluginMarketCardVO) {
-        this.description = prop.description
-        this.name = prop.name
-        this.author = prop.author
-        this.githubURL = prop.githubURL
-        this.starCount = prop.starCount
-        this.pluginId = prop.pluginId
-        this.version = prop.version
-    }
+  constructor(prop: IPluginMarketCardVO) {
+    this.description = prop.description;
+    this.name = prop.name;
+    this.author = prop.author;
+    this.githubURL = prop.githubURL;
+    this.starCount = prop.starCount;
+    this.pluginId = prop.pluginId;
+    this.version = prop.version;
+  }
 }