feat: improve plugin market style, finish pagination

web_ui/src/app/home/plugins/page.tsx

@@ -14,7 +14,7 @@ export default function PluginConfigPage() {
     const [nowPageType, setNowPageType] = useState(PageType.INSTALLED)
 
     return (
-        <div className={``}>
+        <div className={`${styles.pageContainer}`}>
             <div>
                 <Radio.Group
                     block
@@ -32,7 +32,7 @@ export default function PluginConfigPage() {
                     }}
                 />
             </div>
-            <div className={``}>
+            <div className={`${styles.pageContainer}`}>
                 {
                     nowPageType === PageType.INSTALLED && <PluginInstalledComponent/>
                 }

web_ui/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx

@@ -4,10 +4,10 @@ import {useCallback, 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} from "antd";
+import {Input, Pagination} from "antd";
 import {debounce} from "lodash"
 
-export default function PluginInstalledComponent () {
+export default function PluginMarketComponent () {
     const [marketPluginList, setMarketPluginList] = useState<PluginMarketCardVO[]>([])
     const [searchKeyword, setSearchKeyword] = useState("")
 
@@ -16,9 +16,7 @@ export default function PluginInstalledComponent () {
     }, [])
 
     function initData() {
-        getPluginList().then((value) => {
+        getPluginList()
-            setMarketPluginList(value)
-        })
     }
 
     function onInputSearchKeyword(keyword: string) {
@@ -35,7 +33,7 @@ export default function PluginInstalledComponent () {
         }, 500), []
     )
 
-    async function searchPlugin(keyword: string): Promise<PluginMarketCardVO[]> {
+    async function searchPlugin(keyword: string, pageNumber: number = 1): Promise<PluginMarketCardVO[]> {
         // TODO 实现搜索
         const demoResult: PluginMarketCardVO[] =  []
         for (let i = 0; i < keyword.length; i ++) {
@@ -52,33 +50,66 @@ export default function PluginInstalledComponent () {
         return demoResult
     }
 
-    async function getPluginList(): Promise<PluginMarketCardVO[]> {
+    function getPluginList(pageNumber: number = 1) {
-        return [
+        new Promise<PluginMarketCardVO[]>((resolve, reject) => {
-            new PluginMarketCardVO({
+            const result = [
-                pluginId: "aaa",
+                new PluginMarketCardVO({
-                description: "一般的描述",
+                    pluginId: "aaa",
-                name: "插件AAA",
+                    description: "一般的描述",
-                author: "/hana",
+                    name: "插件AAA",
-                version: "0.1",
+                    author: "/hana",
-                githubURL: "",
+                    version: "0.1",
-                starCount: 23
+                    githubURL: "",
-            }),
+                    starCount: 23
-        ]
+                }),
+            ]
+            for (let i = 0; i < pageNumber; i ++) {
+                result.push(
+                    new PluginMarketCardVO({
+                        pluginId: "aaa",
+                        description: "一般的描述",
+                        name: "插件AAA",
+                        author: "/hana",
+                        version: "0.1",
+                        githubURL: "",
+                        starCount: 23
+                    })
+                )
+            }
+            resolve(result)
+        }).then((value) => {
+            setMarketPluginList(value)
+        })
     }
 
     return (
-        <div className={`${styles.pluginListContainer}`}>
+        <div className={`${styles.marketComponentBody}`}>
             <Input
+                style={{
+                    width: '300px',
+                    marginTop: '10px',
+                }}
                 value={searchKeyword}
+                placeholder="搜索插件"
                 onChange={(e) => onInputSearchKeyword(e.target.value)}
             />
-            {
+            <div className={`${styles.pluginListContainer}`}>
-                marketPluginList.map((vo, index) => {
+                {
-                    return <div key={index}>
+                    marketPluginList.map((vo, index) => {
-                        <PluginMarketCardComponent cardVO={vo}/>
+                        return <div key={index}>
-                    </div>
+                            <PluginMarketCardComponent cardVO={vo}/>
-                })
+                        </div>
-            }
+                    })
+                }
+            </div>
+            <Pagination
+                defaultCurrent={1}
+                total={500}
+                onChange={(pageNumber) => {
+                    getPluginList(pageNumber)
+                }}
+            />
         </div>
+
     )
 }

web_ui/src/app/home/plugins/plugins.module.css

@@ -1,7 +1,19 @@
+.pageContainer {
+    width: 100%;
+    height: calc(100% - 30px);
+}
+
+.marketComponentBody {
+    width: 100%;
+    height: calc(100% - 60px);
+}
+
 .pluginListContainer {
     align-self: flex-start;
     justify-self: flex-start;
     width: calc(100% - 60px);
+    height: 100%;
+    max-height: 100%;
     margin:  auto;
     display: grid;
     grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
@@ -9,6 +21,7 @@
     gap: 15px;
     justify-items: center;
     align-items: center;
+    overflow-y: scroll;
 }
 
 .modalTitle {
@@ -22,4 +35,4 @@
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-}
+}